[feature] adding group name alignment controls

src/css/group.css

@@ -26,17 +26,30 @@
 .group-header {
   position: relative;
   display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
   align-items: center;
   flex-wrap: nowrap;
-  transition: padding var(--layout-timing-extra-fast) var(--layout-duration-04);
+  transition: margin var(--layout-timing-extra-fast) var(--layout-duration-04);
+}
+
+.is-group-area-alignment-left .group-header {
+  flex-direction: row;
+  justify-content: flex-start;
+}
+
+.is-group-area-alignment-center .group-header {
+  flex-direction: row;
+  justify-content: center;
+}
+
+.is-group-area-alignment-right .group-header {
+  flex-direction: row-reverse;
+  justify-content: flex-start;
 }
 
 .is-group-name-show .group-header,
 .is-link-edit .group-header {
-  padding-bottom: calc(var(--layout-space) * var(--layout-gutter));
-  transition: padding var(--layout-timing-extra-fast);
+  margin-bottom: calc(var(--layout-space) * var(--layout-gutter));
+  transition: margin var(--layout-timing-extra-fast);
 }
 
 .group-name {
@@ -76,7 +89,6 @@
 }
 
 .is-link-edit .group-control {
-  margin-right: 1em;
   height: 2.5em;
   width: 16em;
   transition:
@@ -85,6 +97,15 @@
     margin var(--layout-timing-extra-fast) var(--layout-duration-04);
 }
 
+.is-group-area-alignment-left.is-link-edit .group-control,
+.is-group-area-alignment-center.is-link-edit .group-control {
+  margin-right: 1em;
+}
+
+.is-group-area-alignment-right.is-link-edit .group-control {
+  margin-left: 1em;
+}
+
 .group-control-item {
   width: 4em;
   flex-shrink: 0;

src/index.html

@@ -782,6 +782,25 @@
                   <button class="control-group-name-size-default button mb-0" tabindex="-1">Default name size</button>
                 </div>
               </div>
+              <hr>
+              <label class="control-group-area-alignment-label">Group Name Horizontal Alignment</label>
+              <div class="form-grid-wrap">
+                <div class="form-grid form-grid-3x1 form-grid-rectangle control-group-area-alignment-grid" tabindex="-1">
+                  <div class="input-wrap">
+                    <input id="control-group-area-alignment-left" class="control-group-area-alignment-left" type="radio" name="control-group-area-alignment" value="left" tabindex="-1">
+                    <label for="control-group-area-alignment-left"><span class="sr-only">Left</span></label>
+                  </div>
+                  <div class="input-wrap">
+                    <input id="control-group-area-alignment-center" class="control-group-area-alignment-center" type="radio" name="control-group-area-alignment" value="center" tabindex="-1">
+                    <label for="control-group-area-alignment-center"><span class="sr-only">Center</span></label>
+                  </div>
+                  <div class="input-wrap">
+                    <input id="control-group-area-alignment-right" class="control-group-area-alignment-right" type="radio" name="control-group-area-alignment" value="right" tabindex="-1">
+                    <label for="control-group-area-alignment-right"><span class="sr-only">Right</span></label>
+                  </div>
+                </div>
+              </div>
+              <p class="control-group-area-alignment-helper form-helper small">Effects may not be visible if the Group Name is not shown.</p>
             </div>
           </div>
           <div class="menu-item">

src/js/control.js

@@ -1675,6 +1675,54 @@ var control = (function() {
       link.render.group.size();
       render.update();
     }
+  }, {
+    element: helper.e(".control-group-area-alignment-left"),
+    path: "group.area.alignment",
+    type: "radio",
+    additionalEvents: [{
+      event: "change",
+      func: function() {
+        edge.box.open({
+          element: helper.e(".group-header"),
+          delay: 500
+        });
+      }
+    }],
+    func: function() {
+      render.class();
+    }
+  }, {
+    element: helper.e(".control-group-area-alignment-center"),
+    path: "group.area.alignment",
+    type: "radio",
+    additionalEvents: [{
+      event: "change",
+      func: function() {
+        edge.box.open({
+          element: helper.e(".group-header"),
+          delay: 500
+        });
+      }
+    }],
+    func: function() {
+      render.class();
+    }
+  }, {
+    element: helper.e(".control-group-area-alignment-right"),
+    path: "group.area.alignment",
+    type: "radio",
+    additionalEvents: [{
+      event: "change",
+      func: function() {
+        edge.box.open({
+          element: helper.e(".group-header"),
+          delay: 500
+        });
+      }
+    }],
+    func: function() {
+      render.class();
+    }
   }, {
     element: helper.e(".control-group-border"),
     path: "group.border",
@@ -2613,6 +2661,12 @@ var control = (function() {
       _transitional();
     };
     var _group = function() {
+      var _area = function() {
+        helper.removeClass(html, "is-group-area-alignment-left");
+        helper.removeClass(html, "is-group-area-alignment-center");
+        helper.removeClass(html, "is-group-area-alignment-right");
+        helper.addClass(html, "is-group-area-alignment-" + state.get().group.area.alignment);
+      };
       var _name = function() {
         if (state.get().group.name.show) {
           helper.addClass(html, "is-group-name-show");
@@ -2626,6 +2680,7 @@ var control = (function() {
           helper.addClass(html, "is-group-border");
         };
       };
+      _area();
       _name();
       _border();
     };

src/js/state.js

@@ -176,6 +176,9 @@ var state = (function() {
       orientation: "bottom"
     },
     group: {
+      area: {
+        alignment: "left"
+      },
       name: {
         show: true,
         size: 1

src/js/update.js

@@ -625,6 +625,9 @@ var update = (function() {
         items: data.bookmarks
       }];
       data.state.group = {
+        area: {
+          alignment: "left"
+        },
         name: {
           show: true,
           size: 1