@umbraco-ui/uui-menu-item 1.16.0 → 1.17.0-rc.0

package/lib/index.js

@@ -197,6 +197,7 @@ UUIMenuItemElement.styles = [
 
       /** Active */
       :host([active]) #label-button,
+      :host([active]) #actions-container,
       :host([active]) #caret-button {
         color: var(
           --uui-menu-item-color-active,
@@ -234,6 +235,8 @@ UUIMenuItemElement.styles = [
       /** Selected */
       :host([selected]:not([select-mode='highlight'], [disabled]))
         #label-button,
+      :host([selected]:not([select-mode='highlight'], [disabled]))
+        #actions-container,
       :host([selected]:not([select-mode='highlight'], [disabled]))
         #caret-button {
         color: var(
@@ -305,6 +308,9 @@ UUIMenuItemElement.styles = [
       :host([select-mode='highlight'][selected]:not([disabled]))
         #menu-item
         #label-button,
+      :host([select-mode='highlight'][selected]:not([disabled]))
+        #menu-item
+        #actions-container,
       :host([select-mode='highlight'][selected]:not([disabled]))
         #menu-item
         #caret-button {
@@ -478,6 +484,9 @@ UUIMenuItemElement.styles = [
         display: inline-flex;
         margin-right: var(--uui-size-2,6px);
       }
+      :host([selected]:not([select-mode='highlight'], [disabled])) #icon {
+        --uui-icon-color-overwrite: currentColor;
+      }
 
       #badge {
         font-size: 12px;
@@ -499,7 +508,7 @@ UUIMenuItemElement.styles = [
         border-radius: calc(var(--uui-border-radius,3px) - 1px);
         position: absolute;
         inset: 3px 3px 3px -5px;
-        border: 2px solid var(--uui-color-focus,#3879ff);
+        outline: 2px solid var(--uui-color-focus,#3879ff);
       }
 
       :host([select-mode='highlight']) #caret-button:focus-visible {
@@ -512,7 +521,7 @@ UUIMenuItemElement.styles = [
         position: absolute;
         inset: 3px;
         border-radius: calc(var(--uui-border-radius,3px) - 1px);
-        border: 2px solid var(--uui-color-focus,#3879ff);
+        outline: 2px solid var(--uui-color-focus,#3879ff);
       }
 
       /** Slots */
@@ -532,6 +541,17 @@ UUIMenuItemElement.styles = [
         --uui-button-height: calc(var(--uui-size-base-unit) * 4);
         margin-right: var(--uui-size-base-unit);
       }
+
+      @keyframes fadeIn {
+        100% {
+          opacity: 1;
+        }
+      }
+
+      uui-loader-bar {
+        opacity: 0;
+        animation: fadeIn 120ms ease-in 60ms forwards;
+      }
     `
 ];
 __decorateClass([

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-menu-item",
-  "version": "1.16.0",
+  "version": "1.17.0-rc.0",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,9 +30,9 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.16.0",
-    "@umbraco-ui/uui-loader-bar": "1.16.0",
-    "@umbraco-ui/uui-symbol-expand": "1.16.0"
+    "@umbraco-ui/uui-base": "1.17.0-rc.0",
+    "@umbraco-ui/uui-loader-bar": "1.17.0-rc.0",
+    "@umbraco-ui/uui-symbol-expand": "1.17.0-rc.0"
   },
   "scripts": {
     "build": "npm run analyze && tsc --build && rollup -c rollup.config.js",
@@ -43,5 +43,5 @@
     "access": "public"
   },
   "homepage": "https://uui.umbraco.com/?path=/story/uui-menu-item",
-  "gitHead": "40e9bb97938eed758af1bc3852b2c2a015f87de6"
+  "gitHead": "028e20bd07ebf02164589b086e746c9cc587409c"
 }