@umbraco-ui/uui-menu-item 1.5.0 → 1.6.0-rc.1

package/custom-elements.json

@@ -207,6 +207,10 @@
         {
           "name": "--uui-menu-item-indent",
           "description": "set indentation of the menu items"
+        },
+        {
+          "name": "--uui-menu-item-flat-structure",
+          "description": "set to 1 to remove the indentation of the chevron. Use this when you have a flat menu structure"
         }
       ]
     }

package/lib/index.js

@@ -122,13 +122,18 @@ UUIMenuItemElement.styles = [
         display: block;
         --uui-menu-item-child-indent: calc(var(--uui-menu-item-indent, 0) + 1);
         user-select: none;
+        --flat-structure-reversed: calc(
+          1 - var(--uui-menu-item-flat-structure, 0)
+        );
       }
 
       #menu-item {
         position: relative;
         padding-left: calc(var(--uui-menu-item-indent, 0) * var(--uui-size-4,12px));
         display: grid;
-        grid-template-columns: var(--uui-size-8,24px) 1fr;
+        grid-template-columns:
+          calc(var(--flat-structure-reversed) * var(--uui-size-8,24px))
+          1fr;
         grid-template-rows: 1fr;
         white-space: nowrap;
       }
@@ -311,7 +316,10 @@ UUIMenuItemElement.styles = [
         grid-column-start: 2;
         white-space: nowrap;
         overflow: hidden;
-
+        padding-right: var(--uui-size-space-3,9px);
+        padding-left: calc(
+          var(--uui-menu-item-flat-structure) * var(--uui-size-space-3,9px)
+        );
         display: inline-flex;
         align-items: center;
         text-decoration: none;
@@ -329,10 +337,6 @@ UUIMenuItemElement.styles = [
         pointer-events: none; /* avoid hovering state on this. */
       }
 
-      #caret-button + #label-button {
-        padding-left: 0;
-      }
-
       #caret-button {
         position: relative;
         width: 100%;

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

@@ -3,6 +3,7 @@ declare const UUIMenuItemElement_base: (new (...args: any[]) => import("@umbraco
 /**
  *  @element uui-menu-item
  *  @cssprop --uui-menu-item-indent - set indentation of the menu items
+ *  @cssprop --uui-menu-item-flat-structure - set to 1 to remove the indentation of the chevron. Use this when you have a flat menu structure
  *  @fires {UUIMenuItemEvent} show-children - fires when the expand icon is clicked to show nested menu items
  *  @fires {UUIMenuItemEvent} hide-children - fires when the expend icon is clicked to hide nested menu items
  *  @fires {UUIMenuItemEvent} click-label - fires when the label is clicked

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umbraco-ui/uui-menu-item",
-  "version": "1.5.0",
+  "version": "1.6.0-rc.1",
   "license": "MIT",
   "keywords": [
     "Umbraco",
@@ -30,9 +30,9 @@
     "custom-elements.json"
   ],
   "dependencies": {
-    "@umbraco-ui/uui-base": "1.5.0",
-    "@umbraco-ui/uui-loader-bar": "1.5.0",
-    "@umbraco-ui/uui-symbol-expand": "1.5.0"
+    "@umbraco-ui/uui-base": "1.6.0-rc.1",
+    "@umbraco-ui/uui-loader-bar": "1.6.0-rc.1",
+    "@umbraco-ui/uui-symbol-expand": "1.6.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": "80279d910777f210227a4ed95762bc91d005a273"
+  "gitHead": "9708ccbac569560b716431080c782c5531c66ea5"
 }