@zohodesk/components 1.4.18 → 1.4.20

package/README.md

@@ -2,6 +2,18 @@
 
 Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
 
+# 1.4.20
+
+- **Popup**
+  - Exposed the `recomputePosition` method to handle repositioning and dropdown alignment after chunk download.
+
+# 1.4.19
+
+- Added rtl:as:property comment for linear-gradient usages to ensure support in PostCSS
+- Added loading styles to all button variants and support given for theme-based loading for primary button.
+  - Impact: In **Button.module.css**, the class name successElement has been renamed to tickElement.
+Also, primarySuccess → primaryTick, and dangerSuccess → dangerTick.
+
 # 1.4.18
 
 - **Select** 

package/assets/Appearance/dark/mode/Component_DarkMode.module.css

@@ -63,6 +63,7 @@
 	--zdt_button_dangerfill_text: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_button_dangerfill_hover_bg: hsla(1, 63.86%, calc(48.82% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_successfill_bg: hsla(133, 48.36%, calc(52.16% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_button_successfill_border: hsla(133, 48.36%, calc(52.16% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_successfill_hover_border: hsla(134, 67.66%, calc(32.75% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_successfill_hover_bg: hsla(134, 67.66%, calc(32.75% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_tertiaryfill_bg: hsla(217, 13.73%, calc(70.00% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
@@ -70,9 +71,12 @@
 	--zdt_button_success_default_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_button_tick_primary_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_button_loading_default_bg: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_button_loading_linear_gradient: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 0% 100%;
-	--zdt_button_loading_primary_linear_gradient: linear-gradient(0deg, rgba(71, 157, 255, 1) 50%, rgba(71, 157, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(71, 157, 255, 0.9) 0%, rgba(71, 157, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(71, 157, 255, 0.6) 0%, rgba(71, 157, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(71, 157, 255, 0.3) 0%, rgba(71, 157, 255, 0) 100%) 0% 100%;
-	--zdt_button_loading_danger_linear_gradient: linear-gradient(0deg, rgba(255, 107, 107, 1) 50%, rgba(255, 107, 107, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 107, 107, 0.9) 0%, rgba(255, 107, 107, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 107, 107, 0.6) 0%, rgba(255, 107, 107, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 107, 107, 0.3) 0%, rgba(255, 107, 107, 0) 100%) 0% 100%;
+	--zdt_button_loading_default_border: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_button_loading_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 0% 100%;
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(71, 157, 255, 1) 50%, rgba(71, 157, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(71, 157, 255, 0.9) 0%, rgba(71, 157, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(71, 157, 255, 0.6) 0%, rgba(71, 157, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(71, 157, 255, 0.3) 0%, rgba(71, 157, 255, 0) 100%) 0% 100%;
+	--zdt_button_loading_danger_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(255, 107, 107, 1) 50%, rgba(255, 107, 107, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 107, 107, 0.9) 0%, rgba(255, 107, 107, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 107, 107, 0.6) 0%, rgba(255, 107, 107, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 107, 107, 0.3) 0%, rgba(255, 107, 107, 0) 100%) 0% 100%;
+	--zdt_button_loading_success_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba( 74, 192, 100, 1) 50%, rgba( 74, 192, 100, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba( 74, 192, 100, 0.9) 0%, rgba( 74, 192, 100, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba( 74, 192, 100, 0.6) 0%, rgba( 74, 192, 100, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(74, 192, 100, 0.3) 0%, rgba(74, 192, 100, 0) 100%) 0% 100%;
+	--zdt_button_loading_secondary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba( 65, 72, 83, 1) 50%, rgba( 65, 72, 83, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba( 65, 72, 83, 0.9) 0%, rgba( 65, 72, 83, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba( 65, 72, 83, 0.6) 0%, rgba( 65, 72, 83, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(65, 72, 83, 0.3) 0%, rgba(65, 72, 83, 0) 100%) 0% 100%;
 	--zdt_button_dangerFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 	--zdt_button_success_strike: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 	--zdt_button_successFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
@@ -219,9 +223,9 @@
 	
 	/* stencils */
 	--zdt_stencil_primary_bg: var(--zdt_cta_grey_10_bg);
-	--zdt_stencil_primary_gradient_bg: linear-gradient(to left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%);
+	--zdt_stencil_primary_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%);
 	--zdt_stencil_secondary_bg: var(--zdt_cta_grey_15_bg);
-	--zdt_stencil_secondary_gradient_bg: linear-gradient(to left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%);
+	--zdt_stencil_secondary_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #383f55 0, #414963 33.33%, #414961 66.66%, #383f55 100%);
 	
 	/* switch */
 	--zdt_switch_default_off_bg: var(--zdt_cta_grey_35_border);

package/assets/Appearance/dark/themes/blue/blue_ComponentTheme_DarkTheme.module.css

@@ -1,7 +1,7 @@
 [data-mode='dark'][data-theme='blue'] {
 	/* stencil */
 	--zdt_stencil_dark_bg: rgb(56,63,85);
-	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
+	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
 	
 	/* dropbox */
 	--zdt_dropbox_dark_bg: rgb(35,43,56);
@@ -47,4 +47,7 @@
 	--zdt_button_primary_strike: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
 	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 	--zdt_button_secondaryFilled_strike: hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* buttonloading */
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(71, 157, 255, 1) 50%, rgba(71, 157, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(71, 157, 255, 0.9) 0%, rgba(71, 157, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(71, 157, 255, 0.6) 0%, rgba(71, 157, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(71, 157, 255, 0.3) 0%, rgba(71, 157, 255, 0) 100%) 0% 100%;
 }

package/assets/Appearance/dark/themes/green/green_ComponentTheme_DarkTheme.module.css

@@ -1,7 +1,7 @@
 [data-mode='dark'][data-theme='green'] {
 	/* stencil */
 	--zdt_stencil_dark_bg: rgb(56,63,85);
-	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
+	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
 	
 	/* dropbox */
 	--zdt_dropbox_dark_bg: rgb(35,43,56);
@@ -47,4 +47,7 @@
 	--zdt_button_primary_strike: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc( 0.45 + var(--zdc_alpha_low)));
 	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 	--zdt_button_secondaryFilled_strike: hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* buttonloading */
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(69, 161, 89, 1) 50%, rgba(45, 161, 89, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(45, 161, 89, 0.9) 0%, rgba(45, 161, 89, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(45, 161, 89, 0.6) 0%, rgba(45, 161, 89, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(45, 161, 89, 0.3) 0%, rgba(45, 161, 89, 0) 100%) 0% 100%;
 }

package/assets/Appearance/dark/themes/orange/orange_ComponentTheme_DarkTheme.module.css

@@ -1,7 +1,7 @@
 [data-mode='dark'][data-theme='orange'] {
 	/* stencil */
 	--zdt_stencil_dark_bg: rgb(56,63,85);
-	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
+	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
 	
 	/* dropbox */
 	--zdt_dropbox_dark_bg: rgb(35,43,56);
@@ -47,4 +47,7 @@
 	--zdt_button_primary_strike: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc( 0.33 + var(--zdc_alpha_low)));
 	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
 	--zdt_button_secondaryFilled_strike: hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* buttonloading */
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(255, 128, 31, 1) 50%, rgba(255, 128, 31, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 128, 31, 0.9) 0%, rgba(255, 128, 31, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 128, 31, 0.6) 0%, rgba(255, 128, 31, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 128, 31, 0.3) 0%, rgba(255, 128, 31, 0) 100%) 0% 100%;
 }

package/assets/Appearance/dark/themes/red/red_ComponentTheme_DarkTheme.module.css

@@ -1,7 +1,7 @@
 [data-mode='dark'][data-theme='red'] {
 	/* stencil */
 	--zdt_stencil_dark_bg: rgb(56,63,85);
-	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
+	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
 	
 	/* dropbox */
 	--zdt_dropbox_dark_bg: rgb(35,43,56);
@@ -47,4 +47,7 @@
 	--zdt_button_primary_strike: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
 	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 	--zdt_button_secondaryFilled_strike: hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* buttonloading */
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(233, 79, 79, 1) 50%, rgba(233, 79, 79, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(233, 79, 79, 0.9) 0%, rgba(233, 79, 79, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(233, 79, 79, 0.6) 0%, rgba(233, 79, 79, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(233, 79, 79, 0.3) 0%, rgba(233, 79, 79, 0) 100%) 0% 100%;
 }

package/assets/Appearance/dark/themes/yellow/yellow_ComponentTheme_DarkTheme.module.css

@@ -1,7 +1,7 @@
 [data-mode='dark'][data-theme='yellow'] {
 	/* stencil */
 	--zdt_stencil_dark_bg: rgb(56,63,85);
-	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
+	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
 	
 	/* dropbox */
 	--zdt_dropbox_dark_bg: rgb(35,43,56);
@@ -47,4 +47,7 @@
 	--zdt_button_primary_strike: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc( 0.33 + var(--zdc_alpha_low)));
 	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
 	--zdt_button_secondaryFilled_strike: hsla(216, 22.98%, calc(31.57% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* buttonloading */
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(215, 152, 53, 1) 50%, rgba(215, 152, 53, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(215, 152, 53, 0.9) 0%, rgba(215, 152, 53, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(215, 152, 53, 0.6) 0%, rgba(215, 152, 53, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(215, 152, 53, 0.3) 0%, rgba(215, 152, 53, 0) 100%) 0% 100%;
 }

package/assets/Appearance/light/mode/Component_LightMode.module.css

@@ -63,6 +63,7 @@
 	--zdt_button_dangerfill_text: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_button_dangerfill_hover_bg: hsla(1, 75.38%, calc(38.24% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_successfill_bg: hsla(133, 63.29%, calc(40.59% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_button_successfill_border: hsla(133, 63.29%, calc(40.59% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_successfill_hover_border: hsla(134, 78.63%, calc(25.69% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_successfill_hover_bg: hsla(134, 78.63%, calc(25.69% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_tertiaryfill_bg: hsla(220, 10.45%, calc(39.41% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
@@ -70,9 +71,12 @@
 	--zdt_button_success_default_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_button_tick_primary_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_button_loading_default_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_button_loading_linear_gradient: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 0% 100%;
-	--zdt_button_loading_primary_linear_gradient: linear-gradient(0deg, rgba(10, 115, 235, 1) 50%, rgba(10, 115, 235, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(10, 115, 235, 0.9) 0%, rgba(10, 115, 235, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(10, 115, 235, 0.6) 0%, rgba(10, 115, 235, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(10, 115, 235, 0.3) 0%, rgba(10, 115, 235, 0) 100%) 0% 100%;
-	--zdt_button_loading_danger_linear_gradient: linear-gradient(0deg, rgba(222, 53, 53, 1) 50%, rgba(222, 53, 53, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(222, 53, 53, 0.9) 0%, rgba(222, 53, 53, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(222, 53, 53, 0.6) 0%, rgba(222, 53, 53, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(222, 53, 53, 0.3) 0%, rgba(222, 53, 53, 0) 100%) 0% 100%;
+	--zdt_button_loading_default_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_button_loading_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 0% 100%;
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(10, 115, 235, 1) 50%, rgba(10, 115, 235, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(10, 115, 235, 0.9) 0%, rgba(10, 115, 235, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(10, 115, 235, 0.6) 0%, rgba(10, 115, 235, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(10, 115, 235, 0.3) 0%, rgba(10, 115, 235, 0) 100%) 0% 100%;
+	--zdt_button_loading_danger_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(222, 53, 53, 1) 50%, rgba(222, 53, 53, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(222, 53, 53, 0.9) 0%, rgba(222, 53, 53, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(222, 53, 53, 0.6) 0%, rgba(222, 53, 53, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(222, 53, 53, 0.3) 0%, rgba(222, 53, 53, 0) 100%) 0% 100%;
+	--zdt_button_loading_success_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(38, 169, 66, 1) 50%, rgba(38, 169, 66, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(38, 169, 66, 0.9) 0%, rgba(38, 169, 66, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(38, 169, 66, 0.6) 0%, rgba(38, 169, 66, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(38, 169, 66, 0.3) 0%, rgba(38, 169, 66, 0) 100%) 0% 100%;
+	--zdt_button_loading_secondary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(65, 72, 83, 1) 50%, rgba(65, 72, 83, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(65, 72, 83, 0.9) 0%, rgba(65, 72, 83, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(65, 72, 83, 0.6) 0%, rgba(65, 72, 83, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(65, 72, 83, 0.3) 0%, rgba(65, 72, 83, 0) 100%) 0% 100%;
 	--zdt_button_dangerFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 	--zdt_button_success_strike: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
 	--zdt_button_successFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
@@ -219,9 +223,9 @@
 	
 	/* stencils */
 	--zdt_stencil_primary_bg: var(--zdt_cta_grey_10_bg);
-	--zdt_stencil_primary_gradient_bg: linear-gradient(to left, var(--zdt_cta_grey_10_bg) 0%, var(--zdt_cta_grey_20_bg) 33.33%, var(--zdt_cta_grey_10_bg) 66.66%, var(--zdt_cta_grey_10_bg) 100%);
+	--zdt_stencil_primary_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, var(--zdt_cta_grey_10_bg) 0%, var(--zdt_cta_grey_20_bg) 33.33%, var(--zdt_cta_grey_10_bg) 66.66%, var(--zdt_cta_grey_10_bg) 100%);
 	--zdt_stencil_secondary_bg: var(--zdt_cta_grey_15_bg);
-	--zdt_stencil_secondary_gradient_bg: linear-gradient(to left, var(--dot_solitude) 0%, var(--dot_paleBlue) 33.33%, var(--dot_solitude) 66.66%, var(--dot_solitude) 100%);
+	--zdt_stencil_secondary_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, var(--dot_solitude) 0%, var(--dot_paleBlue) 33.33%, var(--dot_solitude) 66.66%, var(--dot_solitude) 100%);
 	
 	/* switch */
 	--zdt_switch_default_off_bg: var(--zdt_cta_grey_35_border);

package/assets/Appearance/light/themes/blue/blue_ComponentTheme_LightTheme.module.css

@@ -1,7 +1,7 @@
 [data-mode='light'][data-theme='blue'] {
 	/* stencil */
 	--zdt_stencil_dark_bg: rgb(56,63,85);
-	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
+	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #383f55 0%, #414963 33.33%, #414961 66.66%, #383f55 100%);
 	
 	/* dropbox */
 	--zdt_dropbox_dark_bg: rgb(56,63,87);
@@ -47,4 +47,7 @@
 	--zdt_button_primary_strike: hsla(212, 91.84%, calc(48.04% + var(--zdc_default_inverse_low)), calc( 0.30 + var(--zdc_alpha_low)));
 	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 	--zdt_button_secondaryFilled_strike: hsla(231, 22.22%, calc(82.35% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* buttonloading */
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(10, 115, 235, 1) 50%, rgba(10, 115, 235, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(10, 115, 235, 0.9) 0%, rgba(10, 115, 235, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(10, 115, 235, 0.6) 0%, rgba(10, 115, 235, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(10, 115, 235, 0.3) 0%, rgba(10, 115, 235, 0) 100%) 0% 100%;
 }

package/assets/Appearance/light/themes/green/green_ComponentTheme_LightTheme.module.css

@@ -1,7 +1,7 @@
 [data-mode='light'][data-theme='green'] {
 	/* stencil */
 	--zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
-	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
+	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
 	
 	/* dropbox */
 	--zdt_dropbox_dark_bg: rgb(29,47,51);
@@ -47,4 +47,7 @@
 	--zdt_button_primary_strike: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
 	--zdt_button_secondaryFilled_strike: hsla(135, 7.41%, calc(78.82% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* buttonloading */
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(38, 169, 66, 1) 50%, rgba(38, 169, 66, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(38, 169, 66, 0.9) 0%, rgba(38, 169, 66, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(38, 169, 66, 0.6) 0%, rgba(38, 169, 66, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(38, 169, 66, 0.3) 0%, rgba(38, 169, 66, 0) 100%) 0% 100%;
 }

package/assets/Appearance/light/themes/orange/orange_ComponentTheme_LightTheme.module.css

@@ -1,7 +1,7 @@
 [data-mode='light'][data-theme='orange'] {
 	/* stencil */
 	--zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
-	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
+	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
 	
 	/* dropbox */
 	--zdt_dropbox_dark_bg: rgb(51,46,36);
@@ -47,4 +47,7 @@
 	--zdt_button_primary_strike: hsla(28, 81.75%, calc(49.41% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.45 + var(--zdc_alpha_low)));
 	--zdt_button_secondaryFilled_strike: hsla(27, 10.68%, calc(79.80% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* buttonloading */
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(229, 119, 23, 1) 50%, rgba(229, 119, 23, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(229, 119, 23, 0.9) 0%, rgba(229, 119, 23, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(229, 119, 23, 0.6) 0%, rgba(229, 119, 23, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(229, 119, 23, 0.3) 0%, rgba(229, 119, 23, 0) 100%) 0% 100%;
 }

package/assets/Appearance/light/themes/red/red_ComponentTheme_LightTheme.module.css

@@ -1,7 +1,7 @@
 [data-mode='light'][data-theme='red'] {
 	/* stencil */
 	--zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
-	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
+	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
 	
 	/* dropbox */
 	--zdt_dropbox_dark_bg: rgb(52,34,45);
@@ -47,4 +47,7 @@
 	--zdt_button_primary_strike: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_low)), calc( 0.30 + var(--zdc_alpha_low)));
 	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 	--zdt_button_secondaryFilled_strike: hsla(343, 4.76%, calc(71.18% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* buttonloading */
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(222, 53, 53, 1) 50%, rgba(222, 53, 53, 1) 50%, rgba(222, 53, 53, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(222, 53, 53, 0.9) 0%, rgba(222, 53, 53, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(222, 53, 53, 0.6) 0%, rgba(222, 53, 53, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(222, 53, 53, 0.3) 0%, rgba(222, 53, 53, 0) 100%) 0% 100%;
 }

package/assets/Appearance/light/themes/yellow/yellow_ComponentTheme_LightTheme.module.css

@@ -1,7 +1,7 @@
 [data-mode='light'][data-theme='yellow'] {
 	/* stencil */
 	--zdt_stencil_dark_bg: rgba(255, 255, 255, 0.07);
-	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
+	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.03) 33.33%, rgba(255, 255, 255, 0.03) 66.66%, rgba(255, 255, 255, 0.07) 100%);
 	
 	/* dropbox */
 	--zdt_dropbox_dark_bg: rgb(49,51,35);
@@ -47,4 +47,7 @@
 	--zdt_button_primary_strike: hsla(46, 92.59%, calc(37.06% + var(--zdc_default_inverse_low)), calc( 0.45 + var(--zdc_alpha_low)));
 	--zdt_button_primaryFilled_strike: hsla(42, 75.56%, calc(17.65% + var(--zdc_default_inverse_low)), calc( 0.30 + var(--zdc_alpha_low)));
 	--zdt_button_secondaryFilled_strike: hsla(45, 28.17%, calc(72.16% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
+	
+	/* buttonloading */
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(232, 185, 35, 1) 50%, rgba(232, 185, 35, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(232, 185, 35, 0.9) 0%, rgba(232, 185, 35, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(232, 185, 35, 0.6) 0%, rgba(232, 185, 35, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(232, 185, 35, 0.3) 0%, rgba(232, 185, 35, 0) 100%) 0% 100%;
 }

package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css

@@ -63,6 +63,7 @@
 	--zdt_button_dangerfill_text: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_button_dangerfill_hover_bg: hsla(1, 63.86%, calc(48.82% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_successfill_bg: hsla(133, 48.36%, calc(52.16% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
+	--zdt_button_successfill_border: hsla(133, 48.36%, calc(52.16% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_successfill_hover_border: hsla(134, 67.66%, calc(32.75% + var(--zdc_default_inverse_medium)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_successfill_hover_bg: hsla(134, 67.66%, calc(32.75% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_button_tertiaryfill_bg: hsla(0, 0.00%, calc(60.00% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
@@ -70,9 +71,12 @@
 	--zdt_button_success_default_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_button_tick_primary_border: hsla(0, 0.00%, calc(100.00% + var(--zdc_lighter)), calc(1 + var(--zdc_alpha_high)));
 	--zdt_button_loading_default_bg: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_button_loading_linear_gradient: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 0% 100%;
-	--zdt_button_loading_primary_linear_gradient: linear-gradient(0deg, rgba(71, 157, 255, 1) 50%, rgba(71, 157, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(71, 157, 255, 0.9) 0%, rgba(71, 157, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(71, 157, 255, 0.6) 0%, rgba(71, 157, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(71, 157, 255, 0.3) 0%, rgba(71, 157, 255, 0) 100%) 0% 100%;
-	--zdt_button_loading_danger_linear_gradient: linear-gradient(0deg, rgba(255, 107, 107, 1) 50%, rgba(255, 107, 107, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 107, 107, 0.9) 0%, rgba(255, 107, 107, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 107, 107, 0.6) 0%, rgba(255, 107, 107, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 107, 107, 0.3) 0%, rgba(255, 107, 107, 0) 100%) 0% 100%;
+	--zdt_button_loading_default_border: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_button_loading_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%) 0% 100%;
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(71, 157, 255, 1) 50%, rgba(71, 157, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(71, 157, 255, 0.9) 0%, rgba(71, 157, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(71, 157, 255, 0.6) 0%, rgba(71, 157, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(71, 157, 255, 0.3) 0%, rgba(71, 157, 255, 0) 100%) 0% 100%;
+	--zdt_button_loading_danger_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(255, 107, 107, 1) 50%, rgba(255, 107, 107, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 107, 107, 0.9) 0%, rgba(255, 107, 107, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 107, 107, 0.6) 0%, rgba(255, 107, 107, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 107, 107, 0.3) 0%, rgba(255, 107, 107, 0) 100%) 0% 100%;
+	--zdt_button_loading_success_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba( 74, 192, 100, 1) 50%, rgba( 74, 192, 100, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba( 74, 192, 100, 0.9) 0%, rgba( 74, 192, 100, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba( 74, 192, 100, 0.6) 0%, rgba( 74, 192, 100, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(74, 192, 100, 0.3) 0%, rgba(74, 192, 100, 0) 100%) 0% 100%;
+	--zdt_button_loading_secondary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba( 65, 72, 83, 1) 50%, rgba( 65, 72, 83, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba( 65, 72, 83, 0.9) 0%, rgba( 65, 72, 83, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba( 65, 72, 83, 0.6) 0%, rgba( 65, 72, 83, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(65, 72, 83, 0.3) 0%, rgba(65, 72, 83, 0) 100%) 0% 100%;
 	--zdt_button_dangerFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 	--zdt_button_success_strike: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 	--zdt_button_successFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
@@ -219,9 +223,9 @@
 	
 	/* stencils */
 	--zdt_stencil_primary_bg: var(--zdt_cta_grey_10_bg);
-	--zdt_stencil_primary_gradient_bg: linear-gradient(to left, #262626 0, #2d2d2d 33.33%, #2d2d2d 66.66%, #262626 100%);
+	--zdt_stencil_primary_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #262626 0, #2d2d2d 33.33%, #2d2d2d 66.66%, #262626 100%);
 	--zdt_stencil_secondary_bg: var(--zdt_cta_grey_15_bg);
-	--zdt_stencil_secondary_gradient_bg: linear-gradient(to left, #262626 0, #2d2d2d 33.33%, #2d2d2d 66.66%, #262626 100%);
+	--zdt_stencil_secondary_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #262626 0, #2d2d2d 33.33%, #2d2d2d 66.66%, #262626 100%);
 	
 	/* switch */
 	--zdt_switch_default_off_bg: var(--zdt_cta_grey_35_border);

package/assets/Appearance/pureDark/themes/blue/blue_ComponentTheme_PureDarkTheme.module.css

@@ -1,7 +1,7 @@
 [data-mode='pureDark'][data-theme='blue'] {
 	/* stencil */
 	--zdt_stencil_dark_bg: rgb(33,33,33);
-	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
+	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
 	
 	/* dropbox */
 	--zdt_dropbox_dark_bg: rgb(33,33,33);
@@ -47,4 +47,7 @@
 	--zdt_button_primary_strike: hsla(212, 100.00%, calc(63.92% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
 	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 	--zdt_button_secondaryFilled_strike: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse)), calc( 0.7 + var(--zdc_alpha_high)));
+	
+	/* buttonloading */
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(71, 157, 255, 1) 50%, rgba(71, 157, 255, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(71, 157, 255, 0.9) 0%, rgba(71, 157, 255, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(71, 157, 255, 0.6) 0%, rgba(71, 157, 255, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(71, 157, 255, 0.3) 0%, rgba(71, 157, 255, 0) 100%) 0% 100%;
 }

package/assets/Appearance/pureDark/themes/green/green_ComponentTheme_PureDarkTheme.module.css

@@ -1,7 +1,7 @@
 [data-mode='pureDark'][data-theme='green'] {
 	/* stencil */
 	--zdt_stencil_dark_bg: rgb(33,33,33);
-	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
+	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
 	
 	/* dropbox */
 	--zdt_dropbox_dark_bg: rgb(33,33,33);
@@ -47,4 +47,7 @@
 	--zdt_button_primary_strike: hsla(133, 40.00%, calc(45.10% + var(--zdc_default_inverse_low)), calc( 0.45 + var(--zdc_alpha_low)));
 	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 	--zdt_button_secondaryFilled_strike: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse)), calc( 0.7 + var(--zdc_alpha_high)));
+	
+	/* buttonloading */
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(69, 161, 89, 1) 50%, rgba(45, 161, 89, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(45, 161, 89, 0.9) 0%, rgba(45, 161, 89, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(45, 161, 89, 0.6) 0%, rgba(45, 161, 89, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(45, 161, 89, 0.3) 0%, rgba(45, 161, 89, 0) 100%) 0% 100%;
 }

package/assets/Appearance/pureDark/themes/orange/orange_ComponentTheme_PureDarkTheme.module.css

@@ -1,7 +1,7 @@
 [data-mode='pureDark'][data-theme='orange'] {
 	/* stencil */
 	--zdt_stencil_dark_bg: rgb(33,33,33);
-	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
+	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
 	
 	/* dropbox */
 	--zdt_dropbox_dark_bg: rgb(33,33,33);
@@ -47,4 +47,7 @@
 	--zdt_button_primary_strike: hsla(26, 100.00%, calc(56.08% + var(--zdc_default_inverse_low)), calc( 0.33 + var(--zdc_alpha_low)));
 	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
 	--zdt_button_secondaryFilled_strike: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse)), calc( 0.7 + var(--zdc_alpha_high)));
+	
+	/* buttonloading */
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(255, 128, 31, 1) 50%, rgba(255, 128, 31, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(255, 128, 31, 0.9) 0%, rgba(255, 128, 31, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(255, 128, 31, 0.6) 0%, rgba(255, 128, 31, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(255, 128, 31, 0.3) 0%, rgba(255, 128, 31, 0) 100%) 0% 100%;
 }

package/assets/Appearance/pureDark/themes/red/red_ComponentTheme_PureDarkTheme.module.css

@@ -1,7 +1,7 @@
 [data-mode='pureDark'][data-theme='red'] {
 	/* stencil */
 	--zdt_stencil_dark_bg: rgb(33,33,33);
-	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
+	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
 	
 	/* dropbox */
 	--zdt_dropbox_dark_bg: rgb(33,33,33);
@@ -47,4 +47,7 @@
 	--zdt_button_primary_strike: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
 	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 	--zdt_button_secondaryFilled_strike: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse)), calc( 0.7 + var(--zdc_alpha_high)));
+	
+	/* buttonloading */
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(233, 79, 79, 1) 50%, rgba(233, 79, 79, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(233, 79, 79, 0.9) 0%, rgba(233, 79, 79, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(233, 79, 79, 0.6) 0%, rgba(233, 79, 79, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(233, 79, 79, 0.3) 0%, rgba(233, 79, 79, 0) 100%) 0% 100%;
 }

package/assets/Appearance/pureDark/themes/yellow/yellow_ComponentTheme_PureDarkTheme.module.css

@@ -1,7 +1,7 @@
 [data-mode='pureDark'][data-theme='yellow'] {
 	/* stencil */
 	--zdt_stencil_dark_bg: rgb(33,33,33);
-	--zdt_stencil_dark_gradient_bg: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
+	--zdt_stencil_dark_gradient_bg /* rtl:as:background-image */: linear-gradient(to left, #212121 0%, #262626 33.33%, #262626 66.66%, #212121 100%);
 	
 	/* dropbox */
 	--zdt_dropbox_dark_bg: rgb(33,33,33);
@@ -47,4 +47,7 @@
 	--zdt_button_primary_strike: hsla(37, 66.94%, calc(52.55% + var(--zdc_default_inverse_low)), calc( 0.33 + var(--zdc_alpha_low)));
 	--zdt_button_primaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
 	--zdt_button_secondaryFilled_strike: hsla(0, 0.00%, calc(34.51% + var(--zdc_default_inverse)), calc( 0.7 + var(--zdc_alpha_high)));
+	
+	/* buttonloading */
+	--zdt_button_loading_primary_linear_gradient /* rtl:as:background */: linear-gradient(0deg, rgba(215, 152, 53, 1) 50%, rgba(215, 152, 53, 0.9) 100%) 0% 0%, linear-gradient(90deg, rgba(215, 152, 53, 0.9) 0%, rgba(215, 152, 53, 0.6) 100%) 100% 0%, linear-gradient(180deg, rgba(215, 152, 53, 0.6) 0%, rgba(215, 152, 53, 0.3) 100%) 100% 100%, linear-gradient(360deg, rgba(215, 152, 53, 0.3) 0%, rgba(215, 152, 53, 0) 100%) 0% 100%;
 }

package/es/Button/__tests__/__snapshots__/Button.spec.js.snap

@@ -142,7 +142,7 @@ exports[`Button component Should render CustomStatusclassname of buttons - succe
         class="successstate"
       >
         <div
-          class="customStautusClassName successelement primarysuccess"
+          class="customStautusClassName tickElement primaryTick"
         />
       </div>
     </div>
@@ -263,7 +263,7 @@ exports[`Button component Should render Status of buttons - success 1`] = `
         class="successstate"
       >
         <div
-          class="successelement primarysuccess"
+          class="tickElement primaryTick"
         />
       </div>
     </div>

package/es/Button/css/Button.module.css

@@ -383,11 +383,36 @@
   --button_loading_bg_color: var(--zdt_button_dangerfill_bg);
 }
 
+.successelement {
+  --button_loading_bg_color: var(--zdt_button_loading_default_bg);
+}
+
+.successfilledelement {
+  --button_loading_bg_color: var(--zdt_button_successfill_bg);
+}
+
+.secondaryfilledelement {
+  --button_loading_bg_color: var(--zdt_button_secondaryfill_bg);
+}
+
+.secondaryelement {
+  --button_loading_bg_color: var(--zdt_button_loading_default_bg);
+}
+
+.tertiaryfilledelement {
+  --button_loading_bg_color: var(--zdt_button_tertiaryfill_bg);
+}
+
 .loadingelement:after,
 .primaryelement:after,
 .primaryfilledelement:after,
 .dangerelement:after,
-.dangerfilledelement:after {
+.dangerfilledelement:after,
+.successelement:after,
+.successfilledelement:after,
+.secondaryelement:after,
+.secondaryfilledelement:after,
+.tertiaryfilledelement:after {
   --button_loading_bg_color: inherit;
 }
 
@@ -421,18 +446,47 @@
   transform: rotateX(180deg);
 }
 
-.primarysuccess {
+.primaryTick {
   --button_success_border_color: var(--zdt_button_default_border);
 }
 
-.primaryfilled .successelement {
+.primaryfilled .tickElement {
   --button_success_border_color: var(--zdt_button_tick_primary_border);
 }
 
-.dangersuccess {
+.successelement:before {
+  --button_loading_bg_color: var(--zdt_button_success_border);
+  --zdt_button_loading_linear_gradient: var(--zdt_button_loading_success_linear_gradient);
+}
+
+.secondaryelement:before {
+  --button_loading_bg_color: var(--zdt_button_secondaryfill_bg);
+  --zdt_button_loading_linear_gradient: var(--zdt_button_loading_secondary_linear_gradient);
+  transform: rotateX(180deg);
+}
+
+.dangerTick {
   --button_success_border_color: var(--zdt_button_danger_border);
 }
 
+.successTick {
+  --button_success_border_color: var(--zdt_button_success_border);
+}
+
+.secondaryTick {
+  --button_success_border_color: var(--zdt_button_secondary_border);
+}
+
+.secondaryfilledTick {
+  --button_success_border_color: var(--zdt_button_secondary_border);
+}
+
+.secondaryfilledelement:before {
+  --button_loading_bg_color: var(--zdt_button_secondaryfill_bg);
+  --zdt_button_loading_linear_gradient: var(--zdt_button_loading_secondary_linear_gradient);
+  transform: rotateX(180deg);
+}
+
 @keyframes crlrotate-ltr {
   0% {
     transform: scaleX(-1) rotate(0deg);
@@ -502,7 +556,7 @@
   z-index: 3;
 }
 
-.successelement {
+.tickElement {
   height: var(--zd_size15) ;
   position: relative;
   top: calc( var(--zd_size2) * -1 ) ;
@@ -609,5 +663,5 @@
 }
 .successfilledStrike {
   --button_strike_color: var(--zdt_button_successFilled_strike);
-  --button_border_color: var(--zdt_button_successfill_bg);
+  --button_border_color: var(--zdt_button_successfill_border);
 }

package/es/Button/css/cssJSLogic.js

@@ -47,8 +47,8 @@ export default function cssJSLogic(_ref) {
     [customStatus]: !!customStatus,
     [style.loadingelement]: statusLower === 'loading',
     [style[`${paletteLower}element`]]: statusLower === 'loading',
-    [style.successelement]: statusLower != 'loading',
-    [style[`${paletteLower}success`]]: statusLower != 'loading'
+    [style.tickElement]: statusLower != 'loading',
+    [style[`${paletteLower}Tick`]]: statusLower != 'loading'
   });
   return {
     buttonClass,

package/es/Popup/Popup.js

@@ -159,6 +159,7 @@ const Popup = function (Component) {
       this.handleScrollAndBlockEvents = this.handleScrollAndBlockEvents.bind(this);
       this.handleIframeEventListeners = this.handleIframeEventListeners.bind(this);
       this.handleDropElementStyleUpdate = this.handleDropElementStyleUpdate.bind(this);
+      this.setPosition = this.setPosition.bind(this);
       this.positionRef = /*#__PURE__*/React.createRef();
       this.rootElement = Registry.getRootElement();
       this.popupObserver = new ResizeObserver(this.handlePopupResize);
@@ -391,31 +392,34 @@ const Popup = function (Component) {
       const {
         isMobile
       } = this.state;
-      const {
-        view,
-        viewsOffset
-      } = betterPosition || DUMMY_OBJECT;
-      const styleToApply = selectn(`${view}`, viewsOffset);
-
-      if (isMobile) {
-        this.handleDropElementStyleUpdate({
-          top: '',
-          left: '',
-          right: '',
-          bottom: ''
-        });
-      } else {
-        this.handleDropElementStyleUpdate(styleToApply);
 
-        if (this.positionRef.current !== view) {
-          dropElement.setAttribute('data-position', `${view}`);
-          dropElement.setAttribute('data-box-direction', selectn(`${view}.direction`, positionMapping));
+      if (dropElement) {
+        const {
+          view,
+          viewsOffset
+        } = betterPosition || DUMMY_OBJECT;
+        const styleToApply = selectn(`${view}`, viewsOffset);
+
+        if (isMobile) {
+          this.handleDropElementStyleUpdate({
+            top: '',
+            left: '',
+            right: '',
+            bottom: ''
+          });
+        } else {
+          this.handleDropElementStyleUpdate(styleToApply);
 
-          if (needArrow) {
-            dropElement.setAttribute('data-arrow-position', selectn(`${view}.arrowPosition`, positionMapping));
-          }
+          if (this.positionRef.current !== view) {
+            dropElement.setAttribute('data-position', `${view}`);
+            dropElement.setAttribute('data-box-direction', selectn(`${view}.direction`, positionMapping));
 
-          this.positionRef.current = view;
+            if (needArrow) {
+              dropElement.setAttribute('data-arrow-position', selectn(`${view}.arrowPosition`, positionMapping));
+            }
+
+            this.positionRef.current = view;
+          }
         }
       }
     }
@@ -804,6 +808,51 @@ const Popup = function (Component) {
       });
     }
 
+    setPosition() {
+      this.cancelRaf('setPositionRafId');
+      const needArrow = this.getNeedArrow(this);
+      const isAbsolute = this.getIsAbsolutePopup(this);
+      const customOrder = this.getCustomPositionOrder(this);
+      this.setPositionRafId = requestAnimationFrame(() => {
+        const {
+          placeHolderElement,
+          dropElement,
+          defaultPosition
+        } = this;
+        const {
+          position,
+          isPopupReady
+        } = this.state;
+        const scrollContainer = placeHolderElement ? placeHolderElement.closest('[data-scroll=true]') || document.body : document.body;
+        const betterPosition = viewPort.betterView(dropElement, placeHolderElement, defaultPosition, scrollContainer, {
+          needArrow,
+          isAbsolute,
+          customOrder
+        });
+        const {
+          view,
+          views,
+          viewsOffset,
+          targetOffset,
+          popupOffset
+        } = betterPosition || DUMMY_OBJECT;
+
+        if (!isAbsolute) {
+          if (!isPopupReady) {
+            this.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
+          }
+
+          this.setContainerDynamicPositioning(betterPosition, needArrow);
+        } else {
+          if (position !== view || !isPopupReady) {
+            this.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
+          }
+        }
+
+        this.setPositionRafId = null;
+      });
+    }
+
     handlePopupPosition() {
       let defaultPosition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'bottomCenter';
       let isUpdatePosition = arguments.length > 1 ? arguments[1] : undefined;
@@ -815,9 +864,7 @@ const Popup = function (Component) {
         placeHolderElement,
         dropElement
       } = this;
-      const needArrow = this.getNeedArrow(this);
       const isAbsolute = this.getIsAbsolutePopup(this);
-      const customOrder = this.getCustomPositionOrder(this);
 
       if (direction === 'rtl') {
         defaultPosition = isAbsolute ? rtlAbsolutePositionMapping[defaultPosition] : rtlFixedPositionMapping[defaultPosition];
@@ -825,6 +872,8 @@ const Popup = function (Component) {
         defaultPosition = isAbsolute ? absolutePositionMapping[defaultPosition] : defaultPosition;
       }
 
+      this.defaultPosition = defaultPosition;
+
       if (!placeHolderElement && !dropElement) {
         const isMobile = isMobilePopover(true);
         this.setState({
@@ -835,59 +884,13 @@ const Popup = function (Component) {
         return;
       }
 
-      const setPosition = () => {
-        this.cancelRaf('setPositionRafId');
-        this.setPositionRafId = requestAnimationFrame(() => {
-          const {
-            placeHolderElement,
-            dropElement
-          } = this;
-          const {
-            position,
-            isPopupReady
-          } = this.state;
-          const scrollContainer = placeHolderElement ? placeHolderElement.closest('[data-scroll=true]') || document.body : document.body;
-          const betterPosition = viewPort.betterView(dropElement, placeHolderElement, defaultPosition, scrollContainer, {
-            needArrow,
-            isAbsolute,
-            customOrder
-          });
-          const {
-            view,
-            views,
-            viewsOffset,
-            targetOffset,
-            popupOffset
-          } = betterPosition || DUMMY_OBJECT;
-
-          if (!isAbsolute) {
-            if (!isPopupReady) {
-              this.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
-            }
-
-            if (!dropElement) {
-              return;
-            }
-
-            this.setContainerDynamicPositioning(betterPosition, needArrow);
-          } else {
-            if (position !== view || !isPopupReady) {
-              this.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
-            }
-          }
-
-          this.setPositionRafId = null;
-        });
-      };
-
       if (isUpdatePosition) {
-        setPosition();
+        this.setPosition();
       } else {
-        this.defaultPosition = defaultPosition;
         this.setState({
           isPopupOpen: true,
           isPopupReady: false
-        }, setPosition);
+        }, this.setPosition);
       }
     }
 
@@ -1032,6 +1035,7 @@ const Popup = function (Component) {
         openPopupOnly: this.openPopupOnly,
         closePopupOnly: this.closePopupOnly,
         togglePopup: this.togglePopup,
+        recomputePosition: this.setPosition,
         removeClose: this.removeClose,
         getTargetRef: this.getTargetRef,
         getContainerRef: this.getContainerRef

package/lib/Button/__tests__/__snapshots__/Button.spec.js.snap

@@ -142,7 +142,7 @@ exports[`Button component Should render CustomStatusclassname of buttons - succe
         class="successstate"
       >
         <div
-          class="customStautusClassName successelement primarysuccess"
+          class="customStautusClassName tickElement primaryTick"
         />
       </div>
     </div>
@@ -263,7 +263,7 @@ exports[`Button component Should render Status of buttons - success 1`] = `
         class="successstate"
       >
         <div
-          class="successelement primarysuccess"
+          class="tickElement primaryTick"
         />
       </div>
     </div>

package/lib/Button/css/Button.module.css

@@ -383,11 +383,36 @@
   --button_loading_bg_color: var(--zdt_button_dangerfill_bg);
 }
 
+.successelement {
+  --button_loading_bg_color: var(--zdt_button_loading_default_bg);
+}
+
+.successfilledelement {
+  --button_loading_bg_color: var(--zdt_button_successfill_bg);
+}
+
+.secondaryfilledelement {
+  --button_loading_bg_color: var(--zdt_button_secondaryfill_bg);
+}
+
+.secondaryelement {
+  --button_loading_bg_color: var(--zdt_button_loading_default_bg);
+}
+
+.tertiaryfilledelement {
+  --button_loading_bg_color: var(--zdt_button_tertiaryfill_bg);
+}
+
 .loadingelement:after,
 .primaryelement:after,
 .primaryfilledelement:after,
 .dangerelement:after,
-.dangerfilledelement:after {
+.dangerfilledelement:after,
+.successelement:after,
+.successfilledelement:after,
+.secondaryelement:after,
+.secondaryfilledelement:after,
+.tertiaryfilledelement:after {
   --button_loading_bg_color: inherit;
 }
 
@@ -421,18 +446,47 @@
   transform: rotateX(180deg);
 }
 
-.primarysuccess {
+.primaryTick {
   --button_success_border_color: var(--zdt_button_default_border);
 }
 
-.primaryfilled .successelement {
+.primaryfilled .tickElement {
   --button_success_border_color: var(--zdt_button_tick_primary_border);
 }
 
-.dangersuccess {
+.successelement:before {
+  --button_loading_bg_color: var(--zdt_button_success_border);
+  --zdt_button_loading_linear_gradient: var(--zdt_button_loading_success_linear_gradient);
+}
+
+.secondaryelement:before {
+  --button_loading_bg_color: var(--zdt_button_secondaryfill_bg);
+  --zdt_button_loading_linear_gradient: var(--zdt_button_loading_secondary_linear_gradient);
+  transform: rotateX(180deg);
+}
+
+.dangerTick {
   --button_success_border_color: var(--zdt_button_danger_border);
 }
 
+.successTick {
+  --button_success_border_color: var(--zdt_button_success_border);
+}
+
+.secondaryTick {
+  --button_success_border_color: var(--zdt_button_secondary_border);
+}
+
+.secondaryfilledTick {
+  --button_success_border_color: var(--zdt_button_secondary_border);
+}
+
+.secondaryfilledelement:before {
+  --button_loading_bg_color: var(--zdt_button_secondaryfill_bg);
+  --zdt_button_loading_linear_gradient: var(--zdt_button_loading_secondary_linear_gradient);
+  transform: rotateX(180deg);
+}
+
 @keyframes crlrotate-ltr {
   0% {
     transform: scaleX(-1) rotate(0deg);
@@ -502,7 +556,7 @@
   z-index: 3;
 }
 
-.successelement {
+.tickElement {
   height: var(--zd_size15) ;
   position: relative;
   top: calc( var(--zd_size2) * -1 ) ;
@@ -609,5 +663,5 @@
 }
 .successfilledStrike {
   --button_strike_color: var(--zdt_button_successFilled_strike);
-  --button_border_color: var(--zdt_button_successfill_bg);
+  --button_border_color: var(--zdt_button_successfill_border);
 }

package/lib/Button/css/cssJSLogic.js

@@ -36,7 +36,7 @@ function cssJSLogic(_ref) {
   var canStrikeThrough = !strikeExcludedPalettes.includes(paletteLower);
   var buttonClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, customButton, !!customButton), _defineProperty(_compileClassNames, style.bold, isBold), _defineProperty(_compileClassNames, style["default"], !needAppearance), _defineProperty(_compileClassNames, style[paletteLower], needAppearance), _defineProperty(_compileClassNames, style.rounded, needAppearance && rounded), _defineProperty(_compileClassNames, style[size.toLowerCase()], needAppearance && !children), _defineProperty(_compileClassNames, style["".concat(size, "Btn")], needAppearance && children), _defineProperty(_compileClassNames, style["".concat(size, "Btn").concat(paletteLower)], needAppearance && children && rounded), _defineProperty(_compileClassNames, "".concat(style["".concat(paletteLower, "Strike")], " ").concat(style.strike), disabled && canStrikeThrough && shouldStrikeThroughDisabled), _defineProperty(_compileClassNames, style.loader, !!needAppearance && statusLower !== 'none'), _compileClassNames));
   var loaderParentClass = (0, _utils.compileClassNames)((_compileClassNames2 = {}, _defineProperty(_compileClassNames2, customStatusSize, !!customStatusSize), _defineProperty(_compileClassNames2, style.loading, statusLower === 'loading'), _defineProperty(_compileClassNames2, style["".concat(size, "loading")], statusLower === 'loading'), _defineProperty(_compileClassNames2, style.successstate, statusLower != 'loading'), _compileClassNames2));
-  var loaderChildClass = (0, _utils.compileClassNames)((_compileClassNames3 = {}, _defineProperty(_compileClassNames3, customStatus, !!customStatus), _defineProperty(_compileClassNames3, style.loadingelement, statusLower === 'loading'), _defineProperty(_compileClassNames3, style["".concat(paletteLower, "element")], statusLower === 'loading'), _defineProperty(_compileClassNames3, style.successelement, statusLower != 'loading'), _defineProperty(_compileClassNames3, style["".concat(paletteLower, "success")], statusLower != 'loading'), _compileClassNames3));
+  var loaderChildClass = (0, _utils.compileClassNames)((_compileClassNames3 = {}, _defineProperty(_compileClassNames3, customStatus, !!customStatus), _defineProperty(_compileClassNames3, style.loadingelement, statusLower === 'loading'), _defineProperty(_compileClassNames3, style["".concat(paletteLower, "element")], statusLower === 'loading'), _defineProperty(_compileClassNames3, style.tickElement, statusLower != 'loading'), _defineProperty(_compileClassNames3, style["".concat(paletteLower, "Tick")], statusLower != 'loading'), _compileClassNames3));
   return {
     buttonClass: buttonClass,
     loaderParentClass: loaderParentClass,

package/lib/Popup/Popup.js

@@ -234,6 +234,7 @@ var Popup = function Popup(Component) {
       _this.handleScrollAndBlockEvents = _this.handleScrollAndBlockEvents.bind(_assertThisInitialized(_this));
       _this.handleIframeEventListeners = _this.handleIframeEventListeners.bind(_assertThisInitialized(_this));
       _this.handleDropElementStyleUpdate = _this.handleDropElementStyleUpdate.bind(_assertThisInitialized(_this));
+      _this.setPosition = _this.setPosition.bind(_assertThisInitialized(_this));
       _this.positionRef = /*#__PURE__*/_react["default"].createRef();
       _this.rootElement = _Registry["default"].getRootElement();
       _this.popupObserver = new _ResizeObserver["default"](_this.handlePopupResize);
@@ -488,31 +489,33 @@ var Popup = function Popup(Component) {
         var dropElement = this.dropElement;
         var isMobile = this.state.isMobile;
 
-        var _ref4 = betterPosition || _Common.DUMMY_OBJECT,
-            view = _ref4.view,
-            viewsOffset = _ref4.viewsOffset;
+        if (dropElement) {
+          var _ref4 = betterPosition || _Common.DUMMY_OBJECT,
+              view = _ref4.view,
+              viewsOffset = _ref4.viewsOffset;
 
-        var styleToApply = (0, _selectn["default"])("".concat(view), viewsOffset);
+          var styleToApply = (0, _selectn["default"])("".concat(view), viewsOffset);
 
-        if (isMobile) {
-          this.handleDropElementStyleUpdate({
-            top: '',
-            left: '',
-            right: '',
-            bottom: ''
-          });
-        } else {
-          this.handleDropElementStyleUpdate(styleToApply);
+          if (isMobile) {
+            this.handleDropElementStyleUpdate({
+              top: '',
+              left: '',
+              right: '',
+              bottom: ''
+            });
+          } else {
+            this.handleDropElementStyleUpdate(styleToApply);
 
-          if (this.positionRef.current !== view) {
-            dropElement.setAttribute('data-position', "".concat(view));
-            dropElement.setAttribute('data-box-direction', (0, _selectn["default"])("".concat(view, ".direction"), _DropBoxPositionMapping.positionMapping));
+            if (this.positionRef.current !== view) {
+              dropElement.setAttribute('data-position', "".concat(view));
+              dropElement.setAttribute('data-box-direction', (0, _selectn["default"])("".concat(view, ".direction"), _DropBoxPositionMapping.positionMapping));
 
-            if (needArrow) {
-              dropElement.setAttribute('data-arrow-position', (0, _selectn["default"])("".concat(view, ".arrowPosition"), _DropBoxPositionMapping.positionMapping));
-            }
+              if (needArrow) {
+                dropElement.setAttribute('data-arrow-position', (0, _selectn["default"])("".concat(view, ".arrowPosition"), _DropBoxPositionMapping.positionMapping));
+              }
 
-            this.positionRef.current = view;
+              this.positionRef.current = view;
+            }
           }
         }
       }
@@ -899,22 +902,64 @@ var Popup = function Popup(Component) {
         });
       }
     }, {
-      key: "handlePopupPosition",
-      value: function handlePopupPosition() {
+      key: "setPosition",
+      value: function setPosition() {
         var _this6 = this;
 
+        this.cancelRaf('setPositionRafId');
+        var needArrow = this.getNeedArrow(this);
+        var isAbsolute = this.getIsAbsolutePopup(this);
+        var customOrder = this.getCustomPositionOrder(this);
+        this.setPositionRafId = requestAnimationFrame(function () {
+          var placeHolderElement = _this6.placeHolderElement,
+              dropElement = _this6.dropElement,
+              defaultPosition = _this6.defaultPosition;
+          var _this6$state = _this6.state,
+              position = _this6$state.position,
+              isPopupReady = _this6$state.isPopupReady;
+          var scrollContainer = placeHolderElement ? placeHolderElement.closest('[data-scroll=true]') || document.body : document.body;
+
+          var betterPosition = _viewPort["default"].betterView(dropElement, placeHolderElement, defaultPosition, scrollContainer, {
+            needArrow: needArrow,
+            isAbsolute: isAbsolute,
+            customOrder: customOrder
+          });
+
+          var _ref10 = betterPosition || _Common.DUMMY_OBJECT,
+              view = _ref10.view,
+              views = _ref10.views,
+              viewsOffset = _ref10.viewsOffset,
+              targetOffset = _ref10.targetOffset,
+              popupOffset = _ref10.popupOffset;
+
+          if (!isAbsolute) {
+            if (!isPopupReady) {
+              _this6.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
+            }
+
+            _this6.setContainerDynamicPositioning(betterPosition, needArrow);
+          } else {
+            if (position !== view || !isPopupReady) {
+              _this6.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
+            }
+          }
+
+          _this6.setPositionRafId = null;
+        });
+      }
+    }, {
+      key: "handlePopupPosition",
+      value: function handlePopupPosition() {
         var defaultPosition = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'bottomCenter';
         var isUpdatePosition = arguments.length > 1 ? arguments[1] : undefined;
 
         // isUpdatePosition --->>> Window resize and dropBox resize and to update the position
-        var _ref10 = this.context || {},
-            direction = _ref10.direction;
+        var _ref11 = this.context || {},
+            direction = _ref11.direction;
 
         var placeHolderElement = this.placeHolderElement,
             dropElement = this.dropElement;
-        var needArrow = this.getNeedArrow(this);
         var isAbsolute = this.getIsAbsolutePopup(this);
-        var customOrder = this.getCustomPositionOrder(this);
 
         if (direction === 'rtl') {
           defaultPosition = isAbsolute ? _PositionMapping.rtlAbsolutePositionMapping[defaultPosition] : _PositionMapping.rtlFixedPositionMapping[defaultPosition];
@@ -922,6 +967,8 @@ var Popup = function Popup(Component) {
           defaultPosition = isAbsolute ? _PositionMapping.absolutePositionMapping[defaultPosition] : defaultPosition;
         }
 
+        this.defaultPosition = defaultPosition;
+
         if (!placeHolderElement && !dropElement) {
           var isMobile = (0, _isMobilePopover["default"])(true);
           this.setState({
@@ -932,58 +979,13 @@ var Popup = function Popup(Component) {
           return;
         }
 
-        var setPosition = function setPosition() {
-          _this6.cancelRaf('setPositionRafId');
-
-          _this6.setPositionRafId = requestAnimationFrame(function () {
-            var placeHolderElement = _this6.placeHolderElement,
-                dropElement = _this6.dropElement;
-            var _this6$state = _this6.state,
-                position = _this6$state.position,
-                isPopupReady = _this6$state.isPopupReady;
-            var scrollContainer = placeHolderElement ? placeHolderElement.closest('[data-scroll=true]') || document.body : document.body;
-
-            var betterPosition = _viewPort["default"].betterView(dropElement, placeHolderElement, defaultPosition, scrollContainer, {
-              needArrow: needArrow,
-              isAbsolute: isAbsolute,
-              customOrder: customOrder
-            });
-
-            var _ref11 = betterPosition || _Common.DUMMY_OBJECT,
-                view = _ref11.view,
-                views = _ref11.views,
-                viewsOffset = _ref11.viewsOffset,
-                targetOffset = _ref11.targetOffset,
-                popupOffset = _ref11.popupOffset;
-
-            if (!isAbsolute) {
-              if (!isPopupReady) {
-                _this6.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
-              }
-
-              if (!dropElement) {
-                return;
-              }
-
-              _this6.setContainerDynamicPositioning(betterPosition, needArrow);
-            } else {
-              if (position !== view || !isPopupReady) {
-                _this6.updatePopupState(view, views, viewsOffset, targetOffset, popupOffset, isAbsolute);
-              }
-            }
-
-            _this6.setPositionRafId = null;
-          });
-        };
-
         if (isUpdatePosition) {
-          setPosition();
+          this.setPosition();
         } else {
-          this.defaultPosition = defaultPosition;
           this.setState({
             isPopupOpen: true,
             isPopupReady: false
-          }, setPosition);
+          }, this.setPosition);
         }
       }
     }, {
@@ -1149,6 +1151,7 @@ var Popup = function Popup(Component) {
           openPopupOnly: this.openPopupOnly,
           closePopupOnly: this.closePopupOnly,
           togglePopup: this.togglePopup,
+          recomputePosition: this.setPosition,
           removeClose: this.removeClose,
           getTargetRef: this.getTargetRef,
           getContainerRef: this.getContainerRef

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.4.18",
+  "version": "1.4.20",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -81,8 +81,8 @@
     "@zohodesk/a11y": "2.3.8",
     "@zohodesk/docstool": "1.0.0-alpha-2",
     "@zohodesk/dotkit": "1.0.3",
-    "@zohodesk/hooks": "2.0.5",
-    "@zohodesk/icons": "1.1.0",
+    "@zohodesk/hooks": "2.0.6",
+    "@zohodesk/icons": "1.1.1",
     "@zohodesk/layout": "3.1.0",
     "@zohodesk/svg": "1.2.2",
     "@zohodesk/utils": "1.3.15",
@@ -99,13 +99,13 @@
     "selectn": "1.1.2"
   },
   "peerDependencies": {
-    "@zohodesk/icons": "1.1.0",
+    "@zohodesk/icons": "1.1.1",
     "@zohodesk/variables": "1.1.0",
     "@zohodesk/svg": "1.2.2",
     "@zohodesk/virtualizer": "1.0.13",
     "velocity-react": "1.4.3",
     "react-sortable-hoc": "^0.8.3",
-    "@zohodesk/hooks": "2.0.5",
+    "@zohodesk/hooks": "2.0.6",
     "@zohodesk/utils": "1.3.15",
     "@zohodesk/a11y": "2.3.8",
     "@zohodesk/layout": "3.1.0",