improve tab nav buttons

src/component/base/animation/index.css

@@ -105,3 +105,23 @@
     transform: scale3d(1, 1, 1);
   }
 }
+
+@keyframes circle-in {
+  0% {
+    clip-path: circle(100% at 50% 50%);
+  }
+
+  100% {
+    clip-path: circle(0% at 50% 50%);
+  }
+}
+
+@keyframes circle-out {
+  0% {
+    clip-path: circle(0% at 50% 50%);
+  }
+
+  100% {
+    clip-path: circle(100% at 50% 50%);
+  }
+}

src/component/bookmark/index.js

@@ -416,6 +416,8 @@ bookmark.add = {
 
     addModal.open();
 
+    bookmarkForm.tab.update();
+
   }
 };
 

src/component/bookmarkForm/index.js

@@ -1235,19 +1235,29 @@ export const BookmarkForm = function({
   };
 
   this.update = () => {
+
     this.control.bookmark.display.visual.show.update();
+
     this.control.bookmark.display.visual.type.update();
+
     this.control.bookmark.display.visual.letter.text.update();
+
     this.control.bookmark.display.visual.icon.text.update();
+
     if (isValidString(bookmarkData.link.display.visual.icon.prefix) && isValidString(bookmarkData.link.display.visual.icon.name)) {
       this.control.bookmark.display.visual.icon.preview.update(node('span|class:bookmark-form-icon ' + bookmarkData.link.display.visual.icon.prefix + ' fa-' + bookmarkData.link.display.visual.icon.name));
     } else {
       this.control.bookmark.display.visual.icon.preview.update();
     };
+
     this.control.bookmark.display.visual.image.url.update();
+
     this.control.bookmark.display.name.show.update();
+
     this.control.bookmark.display.name.text.update();
+
     this.control.bookmark.url.update();
+
   };
 
   this.assemble = () => {

src/component/bookmarkTile/index.js

@@ -170,6 +170,8 @@ const BookmarkTile = function({
 
         editModal.open();
 
+        bookmarkForm.tab.update();
+
       }
     }),
     remove: new Button({

src/component/tab/index.css

@@ -1,5 +1,7 @@
 :root {
   --tab-space: calc((var(--form-space) / 4) * 1em);
+  --tab-indicator-left: 0;
+  --tab-indicator-width: 0;
 }
 
 .tab {
@@ -9,18 +11,51 @@
     "nav"
     "content";
   gap: var(--tab-space);
+  position: relative;
   width: 100%;
 }
 
 .tab-nav {
+  background-color: hsl(var(--theme-primary-020));
+  border-radius: calc(var(--theme-radius) * 0.01em);
   grid-area: nav;
   display: flex;
+  position: relative;
+  transition: background-color var(--layout-transition-extra-fast);
 }
 
 .tab-nav>* {
   flex: 1 1 50%;
 }
 
+.tab-nav-indicator {
+  background-color: rgb(var(--theme-accent));
+  border-radius: calc(var(--theme-radius) * 0.01em);
+  position: absolute;
+  top: 0;
+  left: calc(var(--tab-indicator-left) * 1px);
+  width: calc(var(--tab-indicator-width) * 1px);
+  height: 100%;
+  z-index: 1;
+  animation: circle-out var(--layout-transition-extra-fast) 1;
+}
+
+.tab-nav-indicator-active .tab-nav-indicator {
+  animation: none;
+  transition: left var(--layout-transition-extra-fast), width var(--layout-transition-extra-fast);
+}
+
+.tab-nav-button {
+  background-color: transparent;
+  z-index: 2;
+}
+
+.tab-nav-button.active {
+  background-color: transparent;
+  color: hsl(var(--theme-accent-text));
+  transition: background-color var(--layout-duration-01), border-color var(--layout-transition-extra-fast), color var(--layout-transition-extra-fast);
+}
+
 .tab-content {
   grid-area: content;
 }

src/component/tab/index.js

@@ -11,15 +11,51 @@ export const Tab = function({
   group = []
 } = {}) {
 
-  this.tabElement = node('div|class:tab');
+  this.element = {
+    tab: node('div|class:tab'),
+    nav: node('div|class:tab-nav'),
+    group: node('div|class:tab-nav-group form-group form-group-horizontal form-group-block'),
+    indicator: node('div|class:tab-nav-indicator'),
+    content: node('div|class:tab-content')
+  };
 
-  this.tabNav = node('div|class:tab-nav form-group form-group-horizontal form-group-block');
+  this.assemble = () => {
 
-  this.tabContent = node('div|class:tab-content');
+    this.element.nav.appendChild(this.element.indicator);
 
-  this.tabElement.appendChild(this.tabNav);
+    this.element.nav.appendChild(this.element.group);
 
-  this.tabElement.appendChild(this.tabContent);
+    this.element.tab.appendChild(this.element.nav);
+
+    this.element.tab.appendChild(this.element.content);
+
+    group.forEach((item, i) => {
+
+      item.toggle = new Button({
+        text: item.tabText,
+        classList: ['tab-nav-button', 'form-group-item-equal'],
+        func: () => {
+
+          this.deactive();
+
+          item.active = true;
+
+          this.content.render();
+
+          this.nav.render();
+
+          this.indicator.render();
+
+        }
+      });
+
+      this.element.group.appendChild(item.toggle.button);
+
+      this.element.content.appendChild(item.area);
+
+    });
+
+  };
 
   this.deactive = () => {
     group.forEach((item, i) => {
@@ -27,43 +63,83 @@ export const Tab = function({
     });
   };
 
-  group.forEach((item, i) => {
-    item.toggle = new Button({
-      text: item.tabText,
-      style: ['line'],
-      classList: ['form-group-item-equal'],
-      func: () => {
+  this.indicator = {
+    render: () => {
 
-        this.deactive();
-        item.active = true;
-        this.update();
+      const navBox = this.element.tab.getBoundingClientRect();
 
-      }
-    });
+      group.forEach((item, i) => {
 
-    this.tabNav.appendChild(item.toggle.button);
+        if (item.active) {
 
-    this.tabContent.appendChild(item.area);
-  });
+          const itemBox = item.toggle.button.getBoundingClientRect();
 
-  this.update = () => {
-    group.forEach((item, i) => {
+          this.element.tab.style.setProperty('--tab-indicator-left', itemBox.left - navBox.left);
+          this.element.tab.style.setProperty('--tab-indicator-width', itemBox.width);
 
-      if (item.active) {
-        item.toggle.active();
-        item.area.classList.remove('is-hidden');
-      } else {
-        item.toggle.deactive();
-        item.area.classList.add('is-hidden');
-      };
 
-    });
+        };
+
+      });
+
+    },
+    bind: () => {
+
+      this.element.indicator.addEventListener('animationend', (event) => {
+        this.element.tab.classList.add('tab-nav-indicator-active');
+      });
+
+      this.element.indicator.addEventListener('transitionend', (event) => {});
+
+    }
   };
 
-  this.update();
+  this.content = {
+    render: () => {
+      group.forEach((item, i) => {
+
+        if (item.active) {
+          item.area.classList.remove('is-hidden');
+        } else {
+          item.area.classList.add('is-hidden');
+        };
+
+      });
+    }
+  };
+
+  this.nav = {
+    render: () => {
+
+      group.forEach((item, i) => {
+
+        if (item.active) {
+          item.toggle.active();
+        } else {
+          item.toggle.deactive();
+        };
+
+      });
+
+    }
+  };
 
   this.tab = () => {
-    return this.tabElement;
+    return this.element.tab;
   };
 
+  this.update = () => {
+
+    this.indicator.bind();
+
+    this.indicator.render();
+
+    this.nav.render();
+
+  };
+
+  this.assemble();
+
+  this.content.render();
+
 };