V 3/tabs feedback

packages/ui/src/composites/wui-tabs/index.ts

@@ -73,27 +73,29 @@ export class WuiTabs extends LitElement {
     const activeBtnBounds = activeBtn?.getBoundingClientRect()
     const activeBtnTextBounds = activeBtnText?.getBoundingClientRect()
 
-    if (passiveBtn && passiveBtnText && !initialAnimation) {
+    if (passiveBtn && passiveBtnText && !initialAnimation && index !== this.activeTab) {
       animate(passiveBtnText, { opacity: 0 }, { duration: 0.25 })
-      animate(passiveBtn, { width: `20px` }, { duration: 0.25, delay: 0.05 })
+      animate(passiveBtn, { width: '34px' }, { duration: 0.5 })
     }
 
     if (activeBtn && activeBtnBounds && activeBtnTextBounds && activeBtnText) {
-      this.localTabWidth = `${Math.round(
-        activeBtnBounds.width + activeBtnTextBounds.width + 6 + 12
-      )}px`
-
-      animate(
-        activeBtn,
-        { width: `${activeBtnBounds.width + activeBtnTextBounds.width + 6}px` },
-        { duration: initialAnimation ? 0 : 0.5, delay: initialAnimation ? 0 : 0.1 }
-      )
-
-      animate(
-        activeBtnText,
-        { opacity: 1 },
-        { duration: initialAnimation ? 0 : 0.25, delay: initialAnimation ? 0 : 0.15 }
-      )
+      if (index !== this.activeTab || initialAnimation) {
+        this.localTabWidth = `${
+          Math.round(activeBtnBounds.width + activeBtnTextBounds.width) + 6
+        }px`
+
+        animate(
+          activeBtn,
+          { width: `${activeBtnBounds.width + activeBtnTextBounds.width}px` },
+          { duration: initialAnimation ? 0 : 0.5 }
+        )
+
+        animate(
+          activeBtnText,
+          { opacity: 1 },
+          { duration: initialAnimation ? 0 : 0.25, delay: initialAnimation ? 0 : 0.05 }
+        )
+      }
     }
   }
 }

packages/ui/src/composites/wui-tabs/styles.ts

@@ -28,13 +28,14 @@ export default css`
   }
 
   :host([data-type='flex'])::before {
-    transform: translateX(calc(var(--local-tab) * var(--local-tab-width) / 1.85));
+    left: 3px;
+    transform: translateX(calc((var(--local-tab) * 34px) + (var(--local-tab) * 4px)));
   }
 
   :host([data-type='flex']) {
     display: flex;
-    padding: 0px 12px;
-    gap: 28px;
+    padding: 0px 0px 0px 12px;
+    gap: 4px;
   }
 
   :host([data-type='flex']) > button > wui-text {
@@ -64,7 +65,7 @@ export default css`
   }
 
   :host([data-type='flex']) > button {
-    width: 20px;
+    width: 34px;
     position: relative;
     display: flex;
     justify-content: flex-start;