[feature] add group border controls

src/css/group.css

@@ -6,6 +6,10 @@
   width: var(--link-area-width);
 }
 
+.is-group-border .group:not(:first-child):not(:only-child) {
+  border-top: calc(var(--layout-line-width) * var(--group-border)) solid rgb(var(--theme-accent));
+}
+
 .group:first-child {
   padding-top: calc(var(--layout-space) * var(--layout-padding));
 }
@@ -14,6 +18,11 @@
   padding-bottom: calc(var(--layout-space) * var(--layout-padding));
 }
 
+.is-group-border .group {
+  padding-top: calc(var(--layout-space) * var(--layout-padding));
+  padding-bottom: calc(var(--layout-space) * var(--layout-padding));
+}
+
 .group-header {
   position: relative;
   display: flex;

src/css/variables.css

@@ -40,6 +40,7 @@
   --header-transitional-size: 1em;
   /* group */
   --group-name-size: 1em;
+  --group-border: 0;
   /* link */
   --link-area-width: 100%;
   --link-item-size: 1em;

src/index.html

@@ -784,6 +784,17 @@
               </div>
             </div>
           </div>
+          <div class="menu-item">
+            <div class="menu-item-header">
+              <h1 class="menu-item-header-text">Border</h1>
+            </div>
+            <div class="menu-item-form">
+              <div class="input-wrap">
+                <label for="control-group-border">Between groups</label>
+                <input id="control-group-border" class="control-group-border mb-0" type="range" min="0" max="60" value="0" tabindex="-1">
+              </div>
+            </div>
+          </div>
         </div>
 
         <div class="menu-content-area menu-content-area-bookmarks is-hidden">

src/js/control.js

@@ -1675,6 +1675,14 @@ var control = (function() {
       link.render.group.size();
       render.update();
     }
+  }, {
+    element: helper.e(".control-group-border"),
+    path: "group.border",
+    type: "range",
+    func: function() {
+      link.render.group.border();
+      render.class();
+    }
   }, {
     element: helper.e(".control-header-border-top"),
     path: "header.border.top",
@@ -2605,11 +2613,21 @@ var control = (function() {
       _transitional();
     };
     var _group = function() {
-      if (state.get().group.name.show) {
+      var _name = function() {
-        helper.addClass(html, "is-group-name-show");
+        if (state.get().group.name.show) {
-      } else {
+          helper.addClass(html, "is-group-name-show");
-        helper.removeClass(html, "is-group-name-show");
+        } else {
+          helper.removeClass(html, "is-group-name-show");
+        };
       };
+      var _border = function() {
+        helper.removeClass(html, "is-group-border");
+        if (state.get().group.border > 0) {
+          helper.addClass(html, "is-group-border");
+        };
+      };
+      _name();
+      _border();
     };
     var _link = function() {
       helper.removeClass(html, "is-link-show");

src/js/link.js

@@ -482,6 +482,10 @@ var link = (function() {
       var html = helper.e("html");
       html.style.setProperty("--group-name-size", state.get().group.name.size + "em");
     },
+    border: function() {
+      var html = helper.e("html");
+      html.style.setProperty("--group-border", state.get().group.border);
+    },
     tabindex: function() {
       var allGroupControlItem = helper.eA(".group-control-item");
       if (state.get().link.edit) {
@@ -1587,6 +1591,7 @@ var link = (function() {
     mod.add.group.close();
     groupAndItems();
     render.group.size();
+    render.group.border();
     render.item.size();
     render.item.display.letter();
     render.item.display.icon();

src/js/state.js

@@ -180,6 +180,7 @@ var state = (function() {
         show: true,
         size: 1
       },
+      border: 0,
       add: false
     },
     layout: {

src/js/update.js

@@ -629,6 +629,7 @@ var update = (function() {
           show: true,
           size: 1
         },
+        border: 0,
         add: false
       };
       data.state.dropdown = false;