@umbraco-ui/uui-menu-item 1.3.0 → 1.4.0-rc.1

package/custom-elements.json

@@ -41,6 +41,12 @@
           "type": "string",
           "default": "\"undefined\""
         },
+        {
+          "name": "select-mode",
+          "description": "Sets the selection mode.",
+          "type": "string",
+          "default": "\"undefined\""
+        },
         {
           "name": "select-only",
           "description": "Enforce selection interaction and prevent all other interactions, set this when the UI is turned into Selection-Mode.",
@@ -117,6 +123,13 @@
           "type": "string",
           "default": "\"undefined\""
         },
+        {
+          "name": "selectMode",
+          "attribute": "select-mode",
+          "description": "Sets the selection mode.",
+          "type": "string",
+          "default": "\"undefined\""
+        },
         {
           "name": "selectOnly",
           "attribute": "select-only",

package/lib/index.js

@@ -118,9 +118,9 @@ let UUIMenuItemElement = class extends SelectOnlyMixin(
 UUIMenuItemElement.styles = [
   css`
       :host {
+        box-sizing: border-box;
         display: block;
         --uui-menu-item-child-indent: calc(var(--uui-menu-item-indent, 0) + 1);
-
         user-select: none;
       }
 
@@ -133,7 +133,8 @@ UUIMenuItemElement.styles = [
         white-space: nowrap;
       }
 
-      :host(:not([active], [selected], [disabled]))
+      /** Not active, not selected, not disabled: */
+      :host(:not([active], [selected], [disabled], [select-mode='highlight']))
         #menu-item
         #label-button:hover
         ~ #label-button-background,
@@ -149,6 +150,7 @@ UUIMenuItemElement.styles = [
         color: var(--uui-color-interactive-emphasis,#3544b1);
       }
 
+      /** Active */
       :host([active]) #label-button,
       :host([active]) #caret-button {
         color: var(--uui-color-current-contrast,#1b264f);
@@ -161,22 +163,127 @@ UUIMenuItemElement.styles = [
         background-color: var(--uui-color-current-emphasis,rgb(248, 214, 211));
       }
 
-      :host([selected]) #label-button,
-      :host([selected]) #caret-button {
+      /** Disabled */
+      :host([disabled]) #menu-item {
+        color: var(--uui-color-disabled-contrast,#c4c4c4);
+        background-color: var(--uui-color-disabled,#f3f3f5);
+      }
+
+      /** Selected */
+      :host([selected]:not([select-mode='highlight'], [disabled]))
+        #label-button,
+      :host([selected]:not([select-mode='highlight'], [disabled]))
+        #caret-button {
         color: var(--uui-color-selected-contrast,#fff);
       }
-      :host([selected]) #label-button-background {
+      :host([selected]:not([select-mode='highlight'], [disabled]))
+        #label-button-background {
         background-color: var(--uui-color-selected,#3544b1);
       }
-      :host([selected]) #label-button:hover ~ #label-button-background,
-      :host([selected]) #caret-button:hover {
+      /** Selected, not highlight mode */
+      :host([selected]:not([select-mode='highlight'], [disabled]))
+        #label-button:hover
+        ~ #label-button-background,
+      :host([selected]:not([select-mode='highlight'], [disabled]))
+        #caret-button:hover {
         background-color: var(--uui-color-selected-emphasis,rgb(70, 86, 200));
       }
 
-      :host([disabled]) #menu-item {
-        color: var(--uui-color-disabled-contrast,#c4c4c4);
-        background-color: var(--uui-color-disabled,#f3f3f5);
+      /** highlight mode, default */
+      :host([select-mode='highlight']:not([disabled], [active], [selectable]))
+        #menu-item
+        #label-button:hover
+        ~ #label-button-background {
+        border-radius: var(--uui-border-radius,3px);
+        background-color: var(--uui-color-surface-emphasis,rgb(250, 250, 250));
+      }
+
+      /** highlight mode, active */
+      :host([select-mode='highlight'][active]:not([disabled]))
+        #menu-item
+        #label-button-background {
+        border-radius: var(--uui-border-radius,3px);
+      }
+
+      /** highlight mode, active & selected */
+      :host([select-mode='highlight'][active][selected]:not([disabled]))
+        #menu-item
+        #label-button:hover
+        ~ #label-button-background {
+        border-radius: var(--uui-border-radius,3px);
+        background-color: var(--uui-color-current-emphasis,rgb(248, 214, 211));
+      }
+
+      /** highlight mode, selected */
+      :host([select-mode='highlight'][selected]:not([disabled]))
+        #menu-item
+        #label-button,
+      :host([select-mode='highlight'][selected]:not([disabled]))
+        #menu-item
+        #caret-button {
+        color: var(--uui-color-interactive,#1b264f);
+      }
+      :host([select-mode='highlight'][selectable][selected]:not([disabled]))
+        #menu-item
+        #label-button:hover {
+        color: var(--uui-color-interactive-emphasis,#3544b1);
+      }
+
+      /** highlight mode, selected, selectable caret hover */
+      :host([selected][selectable][select-mode='highlight']:not([active]))
+        #menu-item
+        #caret-button:hover {
+        border-radius: var(--uui-border-radius,3px);
+        background-color: var(--uui-color-surface-emphasis,rgb(250, 250, 250));
+        color: var(--uui-color-interactive-emphasis,#3544b1);
       }
+
+      /** Highlight borders */
+
+      :host([select-mode='highlight']:not([disabled]))
+        #menu-item
+        #label-button-background::after {
+        border-radius: var(--uui-border-radius,3px);
+        position: absolute;
+        content: '';
+        inset: 1px;
+        border: 2px solid var(--uui-color-selected,#3544b1);
+        opacity: 0;
+      }
+
+      :host([select-mode='highlight'][selectable][selected]:not([disabled]))
+        #menu-item
+        #caret-button:hover::after {
+        border-top-left-radius: var(--uui-border-radius,3px);
+        border-bottom-left-radius: var(--uui-border-radius,3px);
+        position: absolute;
+        content: '';
+        inset: 1px 0 1px 1px;
+        border: 2px solid var(--uui-color-selected,#3544b1);
+        border-right: none;
+      }
+
+      :host([select-mode='highlight'][selected]:not([disabled]))
+        #menu-item
+        #label-button-background::after {
+        opacity: 1;
+      }
+
+      :host([select-mode='highlight'][selectable]:not([disabled]))
+        #menu-item
+        #label-button:hover
+        ~ #label-button-background::after {
+        opacity: 0.33;
+      }
+      :host([select-mode='highlight'][selected]:not([disabled]))
+        #menu-item
+        #label-button:hover
+        ~ #label-button-background::after {
+        opacity: 0.66;
+      }
+
+      /** Buttons */
+
       :host([disabled]) #label-button {
         cursor: default;
       }
@@ -199,6 +306,7 @@ UUIMenuItemElement.styles = [
       }
 
       #label-button {
+        position: relative;
         flex-grow: 1;
         grid-column-start: 2;
         white-space: nowrap;
@@ -226,6 +334,7 @@ UUIMenuItemElement.styles = [
       }
 
       #caret-button {
+        position: relative;
         width: 100%;
         height: 100%;
         display: flex;
@@ -273,6 +382,36 @@ UUIMenuItemElement.styles = [
         margin-left: 6px;
       }
 
+      /** Focus styling */
+
+      :host([select-mode='highlight']) #label-button:focus-visible {
+        outline: none;
+        overflow: initial;
+      }
+
+      :host([select-mode='highlight']) #label-button:focus-visible::after {
+        content: '';
+        border-radius: calc(var(--uui-border-radius,3px) - 1px);
+        position: absolute;
+        inset: 3px 3px 3px -5px;
+        border: 2px solid var(--uui-color-focus,#3879ff);
+      }
+
+      :host([select-mode='highlight']) #caret-button:focus-visible {
+        outline: none;
+        overflow: initial;
+      }
+
+      :host([select-mode='highlight']) #caret-button:focus-visible::after {
+        content: '';
+        position: absolute;
+        inset: 3px;
+        border-radius: calc(var(--uui-border-radius,3px) - 1px);
+        border: 2px solid var(--uui-color-focus,#3879ff);
+      }
+
+      /** Slots */
+
       slot:not([name]) {
         position: relative;
         display: block;
@@ -308,6 +447,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], UUIMenuItemElement.prototype, "target", 2);
+__decorateClass([
+  property({ type: String, attribute: "select-mode", reflect: true })
+], UUIMenuItemElement.prototype, "selectMode", 2);
 __decorateClass([
   state()
 ], UUIMenuItemElement.prototype, "iconSlotHasContent", 2);

package/lib/uui-menu-item.element.d.ts

@@ -55,6 +55,13 @@ export declare class UUIMenuItemElement extends UUIMenuItemElement_base {
      * @default undefined
      */
     target?: '_blank' | '_parent' | '_self' | '_top';
+    /**
+     * Sets the selection mode.
+     * @type {string}
+     * @attr
+     * @default undefined
+     */
+    selectMode?: 'highlight' | 'persisting';
     private iconSlotHasContent;
     connectedCallback(): void;
     private _labelButtonChanged;

package/package.json

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