@aurodesignsystem/auro-formkit 1.6.0-beta.8 → 2.0.0-beta.1

package/components/input/src/styles/label.css

@@ -28,18 +28,18 @@ label {
 }
 
 :host .wrapper:focus-within label {
-  top: var(--ds-size-25, 0.125rem);
+  top: var(--ds-size-100, 0.5rem);
   font-size: var(--ds-text-body-size-xs, 0.75rem);
   transform: unset;
 }
 :host label.withValue {
-  top: var(--ds-size-25, 0.125rem);
+  top: var(--ds-size-100, 0.5rem);
   font-size: var(--ds-text-body-size-xs, 0.75rem);
   transform: unset;
 }
 
 :host([activeLabel]) .wrapper label {
-  top: var(--ds-size-25, 0.125rem);
+  top: var(--ds-size-100, 0.5rem);
   font-size: var(--ds-text-body-size-xs, 0.75rem);
   transform: unset;
 }

package/components/input/src/styles/label.scss

@@ -43,9 +43,8 @@ label {
   }
 }
 
-// active label for non-bordered inputs
 @mixin active-label {
-  top: var(--ds-size-25, $ds-size-25);
+  top: var(--ds-size-100, $ds-size-100);
   font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs);
   transform: unset;
 }

package/components/input/src/styles/notificationIcons-css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}`;
+export default css`.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:0;pointer-events:none}:host .wrapper:hover .clearBtn,:host .wrapper:focus-within .clearBtn{opacity:1;pointer-events:auto}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}`;

package/components/input/src/styles/notificationIcons.css

@@ -35,6 +35,13 @@
 .clearBtn {
   width: calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));
   height: calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));
+  opacity: 0;
+  pointer-events: none;
+}
+
+:host .wrapper:hover .clearBtn, :host .wrapper:focus-within .clearBtn {
+  opacity: 1;
+  pointer-events: auto;
 }
 
 .passwordBtn {

package/components/input/src/styles/notificationIcons.scss

@@ -45,6 +45,20 @@
 .clearBtn {
   width: calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-25, $ds-size-25)); 
   height: calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-25, $ds-size-25));
+  opacity: 0;
+  pointer-events: none;
+}
+
+:host {
+  .wrapper {
+    &:hover,
+    &:focus-within {
+      .clearBtn {
+        opacity: 1;
+        pointer-events: auto;
+      }
+    }
+  }
 }
 
 .passwordBtn {

package/components/input/src/styles/style-css.js

@@ -1,2 +1,2 @@
 import { css } from 'lit';
-export default css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem))}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}.inputElement-helpText{margin:var(--ds-size-50, 0.25rem) 0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-25, 0.125rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-25, 0.125rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-25, 0.125rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{--size-lgsm: 1.875rem;--size-xlsm: 2.75rem;--size-mdxxs: 1.2rem;position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{position:relative;overflow:hidden;min-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));max-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-size-200, 1rem);outline:none;text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input:disabled{background:none;pointer-events:none}`;
+export default css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.typeIcon{display:flex;flex-direction:row;align-items:center}.typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([bordered]) .notificationIcons{align-items:center}.notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}.alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}.clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:0;pointer-events:none}:host .wrapper:hover .clearBtn,:host .wrapper:focus-within .clearBtn{opacity:1;pointer-events:auto}.passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}.notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}.notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.notificationBtn [auro-icon][hidden]{display:none}:host(:not([bordered])) .typeIcon,:host(:not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host(:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}.inputElement-helpText{margin:var(--ds-size-50, 0.25rem) 0;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}input{border:unset}.wrapper{position:relative;overflow:hidden;border-style:solid}:host(:not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host(:not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([validity]:not([validity=valid])) .wrapper:before{border-bottom:0}label{position:absolute;overflow:hidden;pointer-events:none;text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}:host(:not([bordered])) label{top:calc(100% - var(--ds-size-25, 0.125rem));transform:translateY(-100%)}:host(:not([bordered])) label.withIcon{left:var(--ds-size-400, 2rem)}:host([bordered]) label{top:50%;transform:translateY(-50%)}:host([bordered]) label.withIcon{left:var(--ds-size-500, 2.5rem)}:host([bordered]) label:not(label.withIcon){left:var(--ds-size-100, 0.5rem)}:host .wrapper:focus-within label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host label.withValue{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host([activeLabel]) .wrapper label{top:var(--ds-size-100, 0.5rem);font-size:var(--ds-text-body-size-xs, 0.75rem);transform:unset}:host{--size-lgsm: 1.875rem;--size-xlsm: 2.75rem;--size-mdxxs: 1.2rem;position:relative;display:block}.wrapper{display:flex;flex-direction:row}.main{display:flex;flex-direction:row;position:relative;flex:1}input{position:relative;overflow:hidden;min-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));max-height:calc(var(--ds-size-700, 3.5rem) + var(--ds-size-25, 0.125rem));flex:1;padding:var(--ds-size-400, 2rem) 0 var(--ds-size-50, 0.25rem);margin:0;font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-size-200, 1rem);outline:none;text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}input::-ms-reveal,input::-ms-clear{display:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}input[type=number]{-moz-appearance:textfield;appearance:textfield}input:disabled{background:none;pointer-events:none}:host([bordered]) input{padding:var(--ds-size-400, 2rem) 0 var(--ds-size-100, 0.5rem)}`;

package/components/input/src/styles/style.css

@@ -99,6 +99,13 @@
 .clearBtn {
   width: calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));
   height: calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));
+  opacity: 0;
+  pointer-events: none;
+}
+
+:host .wrapper:hover .clearBtn, :host .wrapper:focus-within .clearBtn {
+  opacity: 1;
+  pointer-events: auto;
 }
 
 .passwordBtn {
@@ -212,18 +219,18 @@ label {
 }
 
 :host .wrapper:focus-within label {
-  top: var(--ds-size-25, 0.125rem);
+  top: var(--ds-size-100, 0.5rem);
   font-size: var(--ds-text-body-size-xs, 0.75rem);
   transform: unset;
 }
 :host label.withValue {
-  top: var(--ds-size-25, 0.125rem);
+  top: var(--ds-size-100, 0.5rem);
   font-size: var(--ds-text-body-size-xs, 0.75rem);
   transform: unset;
 }
 
 :host([activeLabel]) .wrapper label {
-  top: var(--ds-size-25, 0.125rem);
+  top: var(--ds-size-100, 0.5rem);
   font-size: var(--ds-text-body-size-xs, 0.75rem);
   transform: unset;
 }
@@ -248,6 +255,7 @@ label {
   flex: 1;
 }
 
+/* stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type */
 input {
   position: relative;
   overflow: hidden;
@@ -266,7 +274,19 @@ input {
 input::-ms-reveal, input::-ms-clear {
   display: none;
 }
+input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
+  margin: 0;
+  -webkit-appearance: none;
+}
+input[type=number] {
+  -moz-appearance: textfield; /* For older versions of Firefox */
+  appearance: textfield; /* Standard property */
+}
 input:disabled {
   background: none;
   pointer-events: none;
 }
+
+:host([bordered]) input {
+  padding: var(--ds-size-400, 2rem) 0 var(--ds-size-100, 0.5rem);
+}

package/components/menu/.turbo/turbo-build.log

@@ -101,13 +101,13 @@ More info and automated migrator: https://sass-lang.com/d/import
 
 
 ./src/index.js → dist...
-created dist in 660ms
+created dist in 1.2s
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 576ms
+created ./demo/ in 659ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 453ms
+created ./demo/ in 434ms
 
 > @auro-formkit/auro-menu@4.1.4 build:docs
 > wca analyze 'scripts/wca/*.js' --outFiles docs/api.md; node ../../packages/build-tools/src/docProcessor.mjs --component menu

package/components/menu/.turbo/turbo-bundler.log

@@ -4,10 +4,10 @@
 
 
 ./src/index.js → dist...
-created dist in 791ms
+created dist in 860ms
 
 ./demo/index.js → ./demo/...
-created ./demo/ in 630ms
+created ./demo/ in 781ms
 
 ./demo/api.js → ./demo/...
-created ./demo/ in 349ms
+created ./demo/ in 561ms

package/components/menu/demo/api.md

@@ -35,11 +35,7 @@ The auro-menu element provides users a way to select from a list of options.
 | `auroMenu-loadingChange`      | `CustomEvent<{ loading: boolean; hasLoadingPlaceholder: boolean; }>` | Notifies when the loading attribute is changed.  |
 | `auroMenu-selectValueFailure` | `CustomEvent<any>`                               | Notifies that a an attempt to select a menuoption by matching a value has failed. |
 | `auroMenu-selectValueReset`   | `CustomEvent<any>`                               | Notifies that the component value has been reset. |
-| `auroMenu-selectedOption`     | `CustomEvent<any>`                               | Notifies that a new menuoption selection has been made. |
-| [auroMenuActivatedOption](#auroMenuActivatedOption)     | `CustomEvent<Element>`                           | (DEPRECATED) Notifies that a menuoption has been made `active`. |
-| [auroMenuCustomEventFired](#auroMenuCustomEventFired)    | `CustomEvent<any>`                               | (DEPRECATED) Notifies that a custom event has been fired. |
-| [auroMenuSelectValueFailure](#auroMenuSelectValueFailure)  | `CustomEvent<any>`                               | (DEPRECATED) Notifies that a an attempt to select a menuoption by matching a value has failed. |
-| [selectedOption](#selectedOption)              | `CustomEvent<any>`                               | (DEPRECATED) Notifies that a new menuoption selection has been made. |
+| `auroMenu-selectedOption`     | `CustomEvent<any>`                               | Notifies that a new menuoption selection has been made. |
 
 ## Slots
 

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

@@ -155,13 +155,9 @@ class AuroLibraryRuntimeUtils {
  * @attr {String} value - Value selected for the menu.
  * @prop {Boolean} hasLoadingPlaceholder - Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
  * @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
- * @event selectedOption - (DEPRECATED) Notifies that a new menuoption selection has been made.
  * @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
- * @event auroMenuActivatedOption - (DEPRECATED) Notifies that a menuoption has been made `active`.
  * @event auroMenu-selectValueFailure - Notifies that a an attempt to select a menuoption by matching a value has failed.
- * @event auroMenuSelectValueFailure - (DEPRECATED) Notifies that a an attempt to select a menuoption by matching a value has failed.
  * @event auroMenu-customEventFired - Notifies that a custom event has been fired.
- * @event auroMenuCustomEventFired - (DEPRECATED) Notifies that a custom event has been fired.
  * @event auroMenu-selectValueReset - Notifies that the component value has been reset.
  * @event auroMenu-loadingChange - Notifies when the loading attribute is changed.
  * @slot loadingText - Text to show while loading attribute is set
@@ -370,13 +366,6 @@ class AuroMenu extends r {
    * @return {void}
    */
   notifySelectionChange() {
-    // this event needs to be removed after select and combobox are updated to use the new standard name
-    this.dispatchEvent(new CustomEvent('selectedOption', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-    }));
-
     this.dispatchEvent(new CustomEvent('auroMenu-selectedOption', {
       bubbles: true,
       cancelable: false,
@@ -408,13 +397,6 @@ class AuroMenu extends r {
               composed: true,
             }));
 
-            // this event needs to be removed after select and combobox are updated to use the new standard name
-            this.dispatchEvent(new CustomEvent('auroMenuCustomEventFired', {
-              bubbles: true,
-              cancelable: false,
-              composed: true,
-            }));
-
             this.dispatchEvent(new CustomEvent('auroMenu-customEventFired', {
               bubbles: true,
               cancelable: false,
@@ -575,13 +557,6 @@ class AuroMenu extends r {
         // reset the menu to no selection
         this.index = undefined;
 
-        // this event needs to be removed after select and combobox are updated to use the new standard name
-        this.dispatchEvent(new CustomEvent('auroMenuSelectValueFailure', {
-          bubbles: true,
-          cancelable: false,
-          composed: true,
-        }));
-
         this.dispatchEvent(new CustomEvent('auroMenu-selectValueFailure', {
           bubbles: true,
           cancelable: false,
@@ -613,13 +588,6 @@ class AuroMenu extends r {
     this.items[index].classList.add('active');
     this.optionActive = this.items[index];
 
-    this.dispatchEvent(new CustomEvent('auroMenuActivatedOption', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-      detail: this.items[index]
-    }));
-
     this.dispatchEvent(new CustomEvent('auroMenu-activatedOption', {
       bubbles: true,
       cancelable: false,
@@ -837,7 +805,7 @@ const cacheFetch = (uri, options = {}) => {
   return _fetchMap.get(uri);
 };
 
-var styleCss = i$5`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.labelContainer{line-height:1.8}`;
+var styleCss = i$5`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.wrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelContainer{line-height:1.8}`;
 
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1104,7 +1072,8 @@ class AuroIcon extends BaseIcon {
     };
 
     const classes = {
-      'label': this.label
+      'label': this.label,
+      'wrapper': true,
     };
 
     return x`
@@ -1128,7 +1097,7 @@ class AuroIcon extends BaseIcon {
   }
 }
 
-var iconVersion = '6.1.1';
+var iconVersion = '6.1.2';
 
 var checkmarkIcon = {"role":"img","color":"currentColor","title":"","desc":"a small check mark.","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":"checkmark-sm","category":"interface","svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"checkmark-sm__desc\" class=\"ico_squareLarge\" 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=\"checkmark-sm__desc\">a small check mark.</desc><path d=\"M8.461 11.84a.625.625 0 1 0-.922.844l2.504 2.738c.247.27.674.27.922 0l5.496-6a.625.625 0 1 0-.922-.844l-5.035 5.496z\"/></svg>"};
 
@@ -1186,8 +1155,7 @@ class AuroMenuOption extends r {
         reflect: true
       },
       value: {
-        type: String,
-        reflect: true
+        type: String
       },
       tabIndex: {
         type: Number,

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

@@ -115,13 +115,9 @@ class AuroLibraryRuntimeUtils {
  * @attr {String} value - Value selected for the menu.
  * @prop {Boolean} hasLoadingPlaceholder - Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
  * @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
- * @event selectedOption - (DEPRECATED) Notifies that a new menuoption selection has been made.
  * @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
- * @event auroMenuActivatedOption - (DEPRECATED) Notifies that a menuoption has been made `active`.
  * @event auroMenu-selectValueFailure - Notifies that a an attempt to select a menuoption by matching a value has failed.
- * @event auroMenuSelectValueFailure - (DEPRECATED) Notifies that a an attempt to select a menuoption by matching a value has failed.
  * @event auroMenu-customEventFired - Notifies that a custom event has been fired.
- * @event auroMenuCustomEventFired - (DEPRECATED) Notifies that a custom event has been fired.
  * @event auroMenu-selectValueReset - Notifies that the component value has been reset.
  * @event auroMenu-loadingChange - Notifies when the loading attribute is changed.
  * @slot loadingText - Text to show while loading attribute is set
@@ -330,13 +326,6 @@ class AuroMenu extends r {
    * @return {void}
    */
   notifySelectionChange() {
-    // this event needs to be removed after select and combobox are updated to use the new standard name
-    this.dispatchEvent(new CustomEvent('selectedOption', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-    }));
-
     this.dispatchEvent(new CustomEvent('auroMenu-selectedOption', {
       bubbles: true,
       cancelable: false,
@@ -368,13 +357,6 @@ class AuroMenu extends r {
               composed: true,
             }));
 
-            // this event needs to be removed after select and combobox are updated to use the new standard name
-            this.dispatchEvent(new CustomEvent('auroMenuCustomEventFired', {
-              bubbles: true,
-              cancelable: false,
-              composed: true,
-            }));
-
             this.dispatchEvent(new CustomEvent('auroMenu-customEventFired', {
               bubbles: true,
               cancelable: false,
@@ -535,13 +517,6 @@ class AuroMenu extends r {
         // reset the menu to no selection
         this.index = undefined;
 
-        // this event needs to be removed after select and combobox are updated to use the new standard name
-        this.dispatchEvent(new CustomEvent('auroMenuSelectValueFailure', {
-          bubbles: true,
-          cancelable: false,
-          composed: true,
-        }));
-
         this.dispatchEvent(new CustomEvent('auroMenu-selectValueFailure', {
           bubbles: true,
           cancelable: false,
@@ -573,13 +548,6 @@ class AuroMenu extends r {
     this.items[index].classList.add('active');
     this.optionActive = this.items[index];
 
-    this.dispatchEvent(new CustomEvent('auroMenuActivatedOption', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-      detail: this.items[index]
-    }));
-
     this.dispatchEvent(new CustomEvent('auroMenu-activatedOption', {
       bubbles: true,
       cancelable: false,
@@ -797,7 +765,7 @@ const cacheFetch = (uri, options = {}) => {
   return _fetchMap.get(uri);
 };
 
-var styleCss = i$5`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.labelContainer{line-height:1.8}`;
+var styleCss = i$5`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.wrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelContainer{line-height:1.8}`;
 
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1064,7 +1032,8 @@ class AuroIcon extends BaseIcon {
     };
 
     const classes = {
-      'label': this.label
+      'label': this.label,
+      'wrapper': true,
     };
 
     return x`
@@ -1088,7 +1057,7 @@ class AuroIcon extends BaseIcon {
   }
 }
 
-var iconVersion = '6.1.1';
+var iconVersion = '6.1.2';
 
 var checkmarkIcon = {"role":"img","color":"currentColor","title":"","desc":"a small check mark.","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":"checkmark-sm","category":"interface","svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"checkmark-sm__desc\" class=\"ico_squareLarge\" 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=\"checkmark-sm__desc\">a small check mark.</desc><path d=\"M8.461 11.84a.625.625 0 1 0-.922.844l2.504 2.738c.247.27.674.27.922 0l5.496-6a.625.625 0 1 0-.922-.844l-5.035 5.496z\"/></svg>"};
 
@@ -1146,8 +1115,7 @@ class AuroMenuOption extends r {
         reflect: true
       },
       value: {
-        type: String,
-        reflect: true
+        type: String
       },
       tabIndex: {
         type: Number,

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

@@ -8,13 +8,9 @@
  * @attr {String} value - Value selected for the menu.
  * @prop {Boolean} hasLoadingPlaceholder - Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
  * @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
- * @event selectedOption - (DEPRECATED) Notifies that a new menuoption selection has been made.
  * @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
- * @event auroMenuActivatedOption - (DEPRECATED) Notifies that a menuoption has been made `active`.
  * @event auroMenu-selectValueFailure - Notifies that a an attempt to select a menuoption by matching a value has failed.
- * @event auroMenuSelectValueFailure - (DEPRECATED) Notifies that a an attempt to select a menuoption by matching a value has failed.
  * @event auroMenu-customEventFired - Notifies that a custom event has been fired.
- * @event auroMenuCustomEventFired - (DEPRECATED) Notifies that a custom event has been fired.
  * @event auroMenu-selectValueReset - Notifies that the component value has been reset.
  * @event auroMenu-loadingChange - Notifies when the loading attribute is changed.
  * @slot loadingText - Text to show while loading attribute is set

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

@@ -1 +1 @@
-{"version":3,"file":"auro-menu.d.ts","sourceRoot":"","sources":["../src/auro-menu.js"],"names":[],"mappings":"AAcA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAIH;IA+BE;;;;;;;;;;;;;;;;;;;;;;;;;MAmBC;IAED,+CAMC;IAED;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IAnEC,WAAsB;IACtB,oBAA+B;IAC/B,eAA0B;IAC1B,qBAAwB;IACxB,sBAA6B;IAC7B,iBAAoB;IAEpB;;OAEG;IACH,iBAAoB;IAEpB;;OAEG;IACH,qBAAiD;IAEjD;;OAEG;IACH,sBAA0D;IAE1D;;OAEG;IACH,qBAAwB;IA4C1B;;;;OAIG;IACH,8BAcC;IAED,qBAOC;IAED,sCA4BC;IAED;;;;OAIG;IACH,0BAEC;IAED;;;OAGG;IACH,oBAkBC;IAED;;OAEG;IACH,2BAQC;IAED;;;;OAIG;IACH,+BAQC;IADC,cAAuC;IAGzC;;;;OAIG;IACH,8BAaC;IAED;;OAEG;IACH,sBAyCC;IAED;;;;OAIG;IACH,sBAoBC;IAED;;;OAGG;IACH,kBAGC;IAFC,iBAAoF;IAItF;;;OAGG;IACH,yBAQC;IAED;;;;;;;;OAQG;IACH,4CAsCC;IAED;;;;OAIG;IACH,0BAgBC;IAED;;;;OAIG;IACH,sBA4CC;IAED;;;;OAIG;IACH,2BAoBC;IAED;;;;OAIG;IACH,4BAIC;IAED;;;;;;;;;;OAUG;IACH,6BAHU,OAAO,CAKhB;IAED;;;OAGG;IACH,wBA0BC;IAED,+CAYC;CACF;2BArjBgC,KAAK"}
+{"version":3,"file":"auro-menu.d.ts","sourceRoot":"","sources":["../src/auro-menu.js"],"names":[],"mappings":"AAcA;;;;;;;;;;;;;;;;;;GAkBG;AAIH;IA+BE;;;;;;;;;;;;;;;;;;;;;;;;;MAmBC;IAED,+CAMC;IAED;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IAnEC,WAAsB;IACtB,oBAA+B;IAC/B,eAA0B;IAC1B,qBAAwB;IACxB,sBAA6B;IAC7B,iBAAoB;IAEpB;;OAEG;IACH,iBAAoB;IAEpB;;OAEG;IACH,qBAAiD;IAEjD;;OAEG;IACH,sBAA0D;IAE1D;;OAEG;IACH,qBAAwB;IA4C1B;;;;OAIG;IACH,8BAcC;IAED,qBAOC;IAED,sCA4BC;IAED;;;;OAIG;IACH,0BAEC;IAED;;;OAGG;IACH,oBAkBC;IAED;;OAEG;IACH,2BAQC;IAED;;;;OAIG;IACH,+BAQC;IADC,cAAuC;IAGzC;;;;OAIG;IACH,8BAMC;IAED;;OAEG;IACH,sBAkCC;IAED;;;;OAIG;IACH,sBAoBC;IAED;;;OAGG;IACH,kBAGC;IAFC,iBAAoF;IAItF;;;OAGG;IACH,yBAQC;IAED;;;;;;;;OAQG;IACH,4CAsCC;IAED;;;;OAIG;IACH,0BAgBC;IAED;;;;OAIG;IACH,sBAqCC;IAED;;;;OAIG;IACH,2BAaC;IAED;;;;OAIG;IACH,4BAIC;IAED;;;;;;;;;;OAUG;IACH,6BAHU,OAAO,CAKhB;IAED;;;OAGG;IACH,wBA0BC;IAED,+CAYC;CACF;2BArhBgC,KAAK"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"auro-menuoption.d.ts","sourceRoot":"","sources":["../src/auro-menuoption.js"],"names":[],"mappings":"AAqBA;;;;;;;;;GASG;AACH;IAyBE;;;;;;;;;;;;;;;;;;;;;MAuBC;IAED,+CAMC;IAED;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IA5DC,aAAyE;IAEzE,kBAAqB;IACrB,qBAAwB;IACxB,kBAAqB;IAOrB;;OAEG;IACH,qBAAiD;IAgDnD,qBAeC;IAGD,sCAIC;IAED;;;;;;OAMG;IACH,yBAOC;IAED,4CAKC;CACF;2BA7I0B,KAAK"}
+{"version":3,"file":"auro-menuoption.d.ts","sourceRoot":"","sources":["../src/auro-menuoption.js"],"names":[],"mappings":"AAqBA;;;;;;;;;GASG;AACH;IAyBE;;;;;;;;;;;;;;;;;;;;MAsBC;IAED,+CAMC;IAED;;;;;;;OAOG;IACH,uBANW,MAAM,QAQhB;IA3DC,aAAyE;IAEzE,kBAAqB;IACrB,qBAAwB;IACxB,kBAAqB;IAOrB;;OAEG;IACH,qBAAiD;IA+CnD,qBAeC;IAGD,sCAIC;IAED;;;;;;OAMG;IACH,yBAOC;IAED,4CAKC;CACF;2BA5I0B,KAAK"}

package/components/menu/dist/iconVersion.d.ts

@@ -1,3 +1,3 @@
-declare const _default: "6.1.1";
+declare const _default: "6.1.2";
 export default _default;
 //# sourceMappingURL=iconVersion.d.ts.map

package/components/menu/dist/index.js

@@ -115,13 +115,9 @@ class AuroLibraryRuntimeUtils {
  * @attr {String} value - Value selected for the menu.
  * @prop {Boolean} hasLoadingPlaceholder - Indicates whether the menu has a loadingIcon or loadingText to render when in a loading state.
  * @event auroMenu-selectedOption - Notifies that a new menuoption selection has been made.
- * @event selectedOption - (DEPRECATED) Notifies that a new menuoption selection has been made.
  * @event auroMenu-activatedOption - Notifies that a menuoption has been made `active`.
- * @event auroMenuActivatedOption - (DEPRECATED) Notifies that a menuoption has been made `active`.
  * @event auroMenu-selectValueFailure - Notifies that a an attempt to select a menuoption by matching a value has failed.
- * @event auroMenuSelectValueFailure - (DEPRECATED) Notifies that a an attempt to select a menuoption by matching a value has failed.
  * @event auroMenu-customEventFired - Notifies that a custom event has been fired.
- * @event auroMenuCustomEventFired - (DEPRECATED) Notifies that a custom event has been fired.
  * @event auroMenu-selectValueReset - Notifies that the component value has been reset.
  * @event auroMenu-loadingChange - Notifies when the loading attribute is changed.
  * @slot loadingText - Text to show while loading attribute is set
@@ -330,13 +326,6 @@ class AuroMenu extends r {
    * @return {void}
    */
   notifySelectionChange() {
-    // this event needs to be removed after select and combobox are updated to use the new standard name
-    this.dispatchEvent(new CustomEvent('selectedOption', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-    }));
-
     this.dispatchEvent(new CustomEvent('auroMenu-selectedOption', {
       bubbles: true,
       cancelable: false,
@@ -368,13 +357,6 @@ class AuroMenu extends r {
               composed: true,
             }));
 
-            // this event needs to be removed after select and combobox are updated to use the new standard name
-            this.dispatchEvent(new CustomEvent('auroMenuCustomEventFired', {
-              bubbles: true,
-              cancelable: false,
-              composed: true,
-            }));
-
             this.dispatchEvent(new CustomEvent('auroMenu-customEventFired', {
               bubbles: true,
               cancelable: false,
@@ -535,13 +517,6 @@ class AuroMenu extends r {
         // reset the menu to no selection
         this.index = undefined;
 
-        // this event needs to be removed after select and combobox are updated to use the new standard name
-        this.dispatchEvent(new CustomEvent('auroMenuSelectValueFailure', {
-          bubbles: true,
-          cancelable: false,
-          composed: true,
-        }));
-
         this.dispatchEvent(new CustomEvent('auroMenu-selectValueFailure', {
           bubbles: true,
           cancelable: false,
@@ -573,13 +548,6 @@ class AuroMenu extends r {
     this.items[index].classList.add('active');
     this.optionActive = this.items[index];
 
-    this.dispatchEvent(new CustomEvent('auroMenuActivatedOption', {
-      bubbles: true,
-      cancelable: false,
-      composed: true,
-      detail: this.items[index]
-    }));
-
     this.dispatchEvent(new CustomEvent('auroMenu-activatedOption', {
       bubbles: true,
       cancelable: false,
@@ -797,7 +765,7 @@ const cacheFetch = (uri, options = {}) => {
   return _fetchMap.get(uri);
 };
 
-var styleCss = i$5`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.labelContainer{line-height:1.8}`;
+var styleCss = i$5`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.wrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelContainer{line-height:1.8}`;
 
 // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
 // See LICENSE in the project root for license information.
@@ -1064,7 +1032,8 @@ class AuroIcon extends BaseIcon {
     };
 
     const classes = {
-      'label': this.label
+      'label': this.label,
+      'wrapper': true,
     };
 
     return x`
@@ -1088,7 +1057,7 @@ class AuroIcon extends BaseIcon {
   }
 }
 
-var iconVersion = '6.1.1';
+var iconVersion = '6.1.2';
 
 var checkmarkIcon = {"role":"img","color":"currentColor","title":"","desc":"a small check mark.","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":"checkmark-sm","category":"interface","svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"checkmark-sm__desc\" class=\"ico_squareLarge\" 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=\"checkmark-sm__desc\">a small check mark.</desc><path d=\"M8.461 11.84a.625.625 0 1 0-.922.844l2.504 2.738c.247.27.674.27.922 0l5.496-6a.625.625 0 1 0-.922-.844l-5.035 5.496z\"/></svg>"};
 
@@ -1146,8 +1115,7 @@ class AuroMenuOption extends r {
         reflect: true
       },
       value: {
-        type: String,
-        reflect: true
+        type: String
       },
       tabIndex: {
         type: Number,

package/components/menu/package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@alaskaairux/icons": "^4.44.1",
-    "@aurodesignsystem/auro-icon": "^6.0.2",
+    "@aurodesignsystem/auro-icon": "^6.1.2",
     "lit": "^3.2.1"
   },
   "peerDependencies": {