From 3699ce3bb5c6aa68b008b4b62b3b9a84894e694e Mon Sep 17 00:00:00 2001
From: ponnexcodev <99699764+ponnexcodev@users.noreply.github.com>
Date: Tue, 9 Jul 2024 00:43:44 -0400
Subject: [PATCH] [patch][v16.20.2]Toniq Top Tabs Click Boundary Fix (#132)

---
 package-lock.json                                      | 10 +++++-----
 package.json                                           |  2 +-
 packages/design-system/package.json                    |  2 +-
 .../elements/toniq-top-tabs/toniq-top-tabs.element.ts  | 10 +++++-----
 packages/native-elements-test/package.json             |  2 +-
 packages/scripts/package.json                          |  2 +-
 6 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 23f7003..5de3907 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "@toniq-labs/design-system-root",
-    "version": "16.20.1",
+    "version": "16.20.2",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "@toniq-labs/design-system-root",
-            "version": "16.20.1",
+            "version": "16.20.2",
             "hasInstallScript": true,
             "license": "MIT",
             "workspaces": [
@@ -13297,7 +13297,7 @@
         },
         "packages/design-system": {
             "name": "@toniq-labs/design-system",
-            "version": "16.20.1",
+            "version": "16.20.2",
             "license": "MIT",
             "dependencies": {
                 "@augment-vir/common": "^23.3.4",
@@ -13337,7 +13337,7 @@
         },
         "packages/native-elements-test": {
             "name": "@toniq-labs/design-system-native-elements-test",
-            "version": "16.20.1",
+            "version": "16.20.2",
             "dependencies": {
                 "@toniq-labs/design-system": "*",
                 "element-vir": "*",
@@ -13359,7 +13359,7 @@
         },
         "packages/scripts": {
             "name": "@toniq-labs/design-system-scripts",
-            "version": "16.20.1",
+            "version": "16.20.2",
             "dependencies": {
                 "@augment-vir/common": "^23.3.4",
                 "@augment-vir/node-js": "^23.3.4",
diff --git a/package.json b/package.json
index 2c93c39..8859c6f 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-root",
-    "version": "16.20.1",
+    "version": "16.20.2",
     "private": true,
     "description": "Root design system mono-repo package.",
     "homepage": "https://github.com/Toniq-Labs/toniq-labs-design-system",
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
index 678637a..d159309 100644
--- a/packages/design-system/package.json
+++ b/packages/design-system/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system",
-    "version": "16.20.1",
+    "version": "16.20.2",
     "private": false,
     "description": "Design system elements for Toniq Labs",
     "keywords": [
diff --git a/packages/design-system/src/elements/toniq-top-tabs/toniq-top-tabs.element.ts b/packages/design-system/src/elements/toniq-top-tabs/toniq-top-tabs.element.ts
index b070d9f..9e30627 100644
--- a/packages/design-system/src/elements/toniq-top-tabs/toniq-top-tabs.element.ts
+++ b/packages/design-system/src/elements/toniq-top-tabs/toniq-top-tabs.element.ts
@@ -75,18 +75,17 @@ export const ToniqTopTabs = defineToniqElement<{
                 border-bottom-width ${toniqDurations.interaction},
                 border-color ${toniqDurations.interaction},
                 padding-bottom ${toniqDurations.interaction};
-            padding: 4px 4px ${cssVars['toniq-top-tabs-tab-vertical-padding'].value} 12px;
         }
 
         ${hostClasses['toniq-top-tabs-minimal'].selector} li:not(.selected) {
             border-color: transparent;
         }
 
-        li:first-child {
+        li:first-child .tab {
             padding-left: 4px;
         }
 
-        li:has(+ li.selected) {
+        li:has(+ li.selected) .tab {
             padding-right: 12px;
         }
 
@@ -97,6 +96,7 @@ export const ToniqTopTabs = defineToniqElement<{
             display: inline-block;
             ${toniqFontStyles.paragraphFont};
             max-width: 300px;
+            padding: 4px 4px ${cssVars['toniq-top-tabs-tab-vertical-padding'].value} 12px;
         }
 
         .tab-content {
@@ -120,13 +120,13 @@ export const ToniqTopTabs = defineToniqElement<{
             ${toniqFontStyles.boldFont};
             color: ${toniqColors.pageInteraction.foregroundColor};
             cursor: default;
+            padding-left: 4px;
+            padding-right: 4px;
         }
 
         li.selected {
             border-color: ${toniqColors.pageInteraction.foregroundColor};
             border-bottom-width: ${cssVars['toniq-top-tabs-selected-border-width'].value};
-            padding-left: 4px;
-            padding-right: 4px;
         }
 
         li:last-child {
diff --git a/packages/native-elements-test/package.json b/packages/native-elements-test/package.json
index c38040d..acb95b0 100644
--- a/packages/native-elements-test/package.json
+++ b/packages/native-elements-test/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-native-elements-test",
-    "version": "16.20.1",
+    "version": "16.20.2",
     "private": true,
     "scripts": {
         "compile": "virmator compile",
diff --git a/packages/scripts/package.json b/packages/scripts/package.json
index 3bb2d0b..b37a31c 100644
--- a/packages/scripts/package.json
+++ b/packages/scripts/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-scripts",
-    "version": "16.20.1",
+    "version": "16.20.2",
     "private": true,
     "scripts": {
         "compile": "virmator compile",