@zohodesk/components 1.0.0-temp-199.9 → 1.0.0-temp-216.1

package/README.md

@@ -32,15 +32,6 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
-# 1.2.57
-
-- **Popup**
-  - Fixed popup scroll behavior is now supported using the `isOutsideScrollBlocked` flag. When set to `false` (default).
-
-- **DropBoxElement**
-  - **Attributes Added**: The `data-box-direction` and `data-arrow-position` attributes have been added to facilitate the use of component-level CSS selectors.
-  - **CSS Selectors**: Added support for `arrow`, `paddingSpace`, `shadow`, and `boxdirection` to facilitate the behavior of the dropbox using CSS selectors.
-  
 # 1.2.56
 
 - **CheckBox** 

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

@@ -54,22 +54,26 @@
 	--zdt_button_primaryfill_bg: var(--zdt_cta_primary_bg);
 	--zdt_button_primaryfill_border: var(--dot_mirror);
 	--zdt_button_primaryfill_hover_bg: var(--zdt_cta_primary_hover_bg);
-	--zdt_button_secondaryfill_bg: var(--zdtm_cta_grey_10_bg_default);
+	--zdt_button_secondaryfill_bg: var(--zdtm_cta_grey_10_bg_darker_lower);
 	--zdt_button_dangerfill_bg: hsla(0, 100.00%, calc(70.98% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--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_border: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_button_successfill_bg: hsla(133, 48.36%, calc(52.16% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_button_successfill_bg: 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_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_button_tertiaryfill_bg: hsla(217, 13.73%, calc(70.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_button_tertiaryfill_hover_bg: hsla(217, 7.76%, calc(54.51% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--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)));
+	--zdt_button_tertiaryfill_hover_bg: hsla(217, 7.76%, calc(54.51% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--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_dangerFilled_strike: hsla(0, 0.00%, calc(100.00% + 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)));
+	--zdt_button_danger_strike: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
+	--zdt_button_tertiaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 	
 	/* button group */
 	--zdt_buttongroup_default_bg: hsla(217, 23.08%, calc(17.84% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));

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

@@ -42,4 +42,9 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(71,157,255);
+	
+	/* button */
+	--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_darker_low)), calc(1 + var(--zdc_alpha_low)));
 }

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

@@ -42,4 +42,9 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(69,161,89);
+	
+	/* button */
+	--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_darker_low)), calc(1 + var(--zdc_alpha_low)));
 }

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

@@ -42,4 +42,9 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(255,128,31);
+	
+	/* button */
+	--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_darker_low)), calc(1 + var(--zdc_alpha_low)));
 }

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

@@ -42,4 +42,9 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(233,79,79);
+	
+	/* button */
+	--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_darker_low)), calc(1 + var(--zdc_alpha_low)));
 }

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

@@ -42,4 +42,9 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(215,152,53);
+	
+	/* button */
+	--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_darker_low)), calc(1 + var(--zdc_alpha_low)));
 }

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

@@ -54,22 +54,26 @@
 	--zdt_button_primaryfill_bg: var(--zdt_cta_primary_bg);
 	--zdt_button_primaryfill_border: var(--dot_mirror);
 	--zdt_button_primaryfill_hover_bg: var(--zdt_cta_primary_hover_bg);
-	--zdt_button_secondaryfill_bg: var(--zdtm_cta_grey_10_bg_default);
+	--zdt_button_secondaryfill_bg: var(--zdtm_cta_grey_10_bg_darker_lower);
 	--zdt_button_dangerfill_bg: hsla(0, 71.91%, calc(53.92% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--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_border: hsla(133, 63.29%, calc(40.59% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_button_successfill_bg: hsla(133, 63.29%, calc(40.59% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_button_successfill_bg: 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_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_button_tertiaryfill_bg: hsla(220, 10.45%, calc(39.41% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_button_tertiaryfill_hover_bg: hsla(218, 9.76%, calc(51.76% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--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)));
+	--zdt_button_tertiaryfill_hover_bg: hsla(218, 9.76%, calc(51.76% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--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_dangerFilled_strike: hsla(0, 0.00%, calc(100.00% + 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.40 + var(--zdc_alpha_low)));
+	--zdt_button_danger_strike: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_low)), calc( 0.30 + var(--zdc_alpha_low)));
+	--zdt_button_tertiaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 	
 	/* button group */
 	--zdt_buttongroup_default_bg: hsla(0, 0.00%, calc(100.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));

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

@@ -42,4 +42,9 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(10,115,235);
+	
+	/* button */
+	--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_darker_low)), calc(1 + var(--zdc_alpha_low)));
 }

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

@@ -42,4 +42,9 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(38,169,66);
+	
+	/* button */
+	--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_darker_low)), calc(1 + var(--zdc_alpha_low)));
 }

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

@@ -42,4 +42,9 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(229,119,23);
+	
+	/* button */
+	--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_darker_low)), calc(1 + var(--zdc_alpha_low)));
 }

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

@@ -42,4 +42,9 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(222,53,53);
+	
+	/* button */
+	--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_darker_low)), calc(1 + var(--zdc_alpha_low)));
 }

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

@@ -42,4 +42,9 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(232,185,35);
+	
+	/* button */
+	--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_darker_low)), calc(1 + var(--zdc_alpha_low)));
 }

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

@@ -54,22 +54,26 @@
 	--zdt_button_primaryfill_bg: var(--zdt_cta_primary_bg);
 	--zdt_button_primaryfill_border: var(--dot_mirror);
 	--zdt_button_primaryfill_hover_bg: var(--zdt_cta_primary_hover_bg);
-	--zdt_button_secondaryfill_bg: var(--zdtm_cta_grey_10_bg_default);
+	--zdt_button_secondaryfill_bg: var(--zdtm_cta_grey_10_bg_darker_lower);
 	--zdt_button_dangerfill_bg: hsla(0, 100.00%, calc(70.98% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--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_border: hsla(133, 48.36%, calc(52.16% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_button_successfill_bg: hsla(133, 48.36%, calc(52.16% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--zdt_button_successfill_bg: 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_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_button_tertiaryfill_bg: hsla(0, 0.00%, calc(60.00% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
-	--zdt_button_tertiaryfill_hover_bg: hsla(217, 7.76%, calc(54.51% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));
+	--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)));
+	--zdt_button_tertiaryfill_hover_bg: hsla(217, 7.76%, calc(54.51% + var(--zdc_darker_low)), calc(1 + var(--zdc_alpha_low)));
 	--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_dangerFilled_strike: hsla(0, 0.00%, calc(100.00% + 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)));
+	--zdt_button_danger_strike: hsla(0, 77.78%, calc(61.18% + var(--zdc_default_inverse_low)), calc( 0.40 + var(--zdc_alpha_low)));
+	--zdt_button_tertiaryFilled_strike: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.35 + var(--zdc_alpha_low)));
 	
 	/* button group */
 	--zdt_buttongroup_default_bg: hsla(0, 0.00%, calc(12.94% + var(--zdc_default)), calc(1 + var(--zdc_alpha_high)));

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

@@ -42,4 +42,9 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(71,157,255);
+	
+	/* button */
+	--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_darker_low)), calc( 0.7 + var(--zdc_alpha_low)));
 }

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

@@ -42,4 +42,9 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(69,161,89);
+	
+	/* button */
+	--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_darker_low)), calc( 0.7 + var(--zdc_alpha_low)));
 }

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

@@ -42,4 +42,9 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(255,128,31);
+	
+	/* button */
+	--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_darker_low)), calc( 0.7 + var(--zdc_alpha_low)));
 }

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

@@ -42,4 +42,9 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(233,79,79);
+	
+	/* button */
+	--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_darker_low)), calc( 0.7 + var(--zdc_alpha_low)));
 }

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

@@ -42,4 +42,9 @@
 	
 	/* focusscope */
 	--zdt_a11y_focusScope_focus_border: rgb(215,152,53);
+	
+	/* button */
+	--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_darker_low)), calc( 0.7 + var(--zdc_alpha_low)));
 }

package/es/Button/Button.js

@@ -10,8 +10,6 @@ use children for both cases
 toLowerCase check needed?
 */
 
-/* eslint css-modules/no-unused-class: [2, { markAsUsed: ['small','medium','large','xlarge','button_medium','button_small','primary','primaryfilled','danger','dangerfilled','plainprimary', 'plainsecondary', 'secondary', 'secondaryfilled', 'successFilled','tertiaryFilled'] }] */
-
 export default function Button(props) {
   let {
     text,

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

@@ -38,7 +38,6 @@
 }
 
 .native:disabled {
-  pointer-events: none;
   --button_cursor: not-allowed;
   --button_opacity: 0.4;
 }
@@ -525,4 +524,41 @@
 
 .loader{
   color:var(--dot_mirror)
+}
+
+[dir=ltr] .strike {
+  background-image: repeating-linear-gradient(120deg, var(--button_strike_color), var(--button_strike_color) 1px, var(--button_bg_color) 0px, var(--button_bg_color) 8px);
+}
+
+[dir=rtl] .strike {
+  background-image: repeating-linear-gradient(-120deg, var(--button_strike_color), var(--button_strike_color) 1px, var(--button_bg_color) 0px, var(--button_bg_color) 8px);
+}
+.primaryStrike {
+  --button_strike_color: var(--zdt_button_primary_strike);
+}
+.primaryfilledStrike {
+  --button_strike_color: var(--zdt_button_primaryFilled_strike);
+  --button_border_color: var(--zdt_button_primaryfill_bg);
+}
+.dangerStrike {
+  --button_strike_color: var(--zdt_button_danger_strike);
+}
+.dangerfilledStrike {
+  --button_strike_color: var(--zdt_button_dangerFilled_strike);
+  --button_border_color: var(--zdt_button_dangerfill_bg);
+}
+.secondaryStrike {
+  --button_strike_color: var(--zdt_button_secondary_border);
+}
+.secondaryfilledStrike {
+  --button_strike_color: var(--zdt_button_secondaryFilled_strike);
+  --button_border_color: var(--zdt_button_secondaryfill_bg);
+}
+.tertiaryfilledStrike {
+  --button_strike_color: var(--zdt_button_tertiaryFilled_strike);
+  --button_border_color: var(--zdt_button_tertiaryfill_bg);
+}
+.successfilledStrike {
+  --button_strike_color: var(--zdt_button_successFilled_strike);
+  --button_border_color: var(--zdt_button_successfill_bg);
 }

package/es/Button/css/cssJSLogic.js

@@ -1,4 +1,6 @@
+import { useContext } from 'react';
 import { compileClassNames } from '@zohodesk/utils';
+import LibraryContext from "../../Provider/LibraryContextInit";
 export default function cssJSLogic(_ref) {
   let {
     props,
@@ -12,15 +14,21 @@ export default function cssJSLogic(_ref) {
     size,
     children,
     palette,
-    status
+    status,
+    disabled
   } = props;
   let {
     customButton = '',
     customStatus = '',
     customStatusSize = ''
   } = customClass;
+  const {
+    shouldStrikeThroughDisabledButton
+  } = useContext(LibraryContext);
+  const strikeExcludedPalettes = ['plainprimary', 'plainsecondary'];
   let paletteLower = palette.toLowerCase();
   let statusLower = status.toLowerCase();
+  let canStrikeThrough = !strikeExcludedPalettes.includes(paletteLower);
   let buttonClass = compileClassNames({
     [customButton]: !!customButton,
     [style.bold]: isBold,
@@ -30,6 +38,7 @@ export default function cssJSLogic(_ref) {
     [style[size.toLowerCase()]]: needAppearance && !children,
     [style[`${size}Btn`]]: needAppearance && children,
     [style[`${size}Btn${paletteLower}`]]: needAppearance && children && rounded,
+    [`${style[`${paletteLower}Strike`]} ${style.strike}`]: disabled && canStrikeThrough && shouldStrikeThroughDisabledButton,
     [style.loader]: !!needAppearance && statusLower !== 'none'
   });
   let loaderParentClass = compileClassNames({

package/es/DropBox/DropBoxElement/DropBoxElement.js

@@ -103,8 +103,6 @@ export default function DropBoxElement(props) {
     style: inlineStyle,
     "data-tour": tourId,
     "data-position": boxPosition,
-    "data-box-direction": boxDirection,
-    "data-arrow-position": arrowPosition,
     id: htmlId,
     role: role,
     "aria-multiselectable": ariaMultiselectable,
@@ -124,7 +122,7 @@ export default function DropBoxElement(props) {
   }, isModel ? /*#__PURE__*/React.createElement("div", {
     className: style.closeBar
   }) : null, isArrow && !isModel && /*#__PURE__*/React.createElement("div", {
-    className: style.arrowPosition,
+    className: style[arrowPosition],
     style: arrowstyle,
     "data-id": `${dataId}_arrow`,
     "data-test-id": `${dataId}_arrow`,

package/es/DropBox/DropBoxElement/__tests__/__snapshots__/DropBoxElement.spec.js.snap

@@ -5,8 +5,6 @@ exports[`DropBoxElement rendering the defult props 1`] = `
   <div
     class="main hidden container bottomStart default"
     data-a11y-focus-main-area="true"
-    data-arrow-position="end"
-    data-box-direction="bottom"
     data-id="dropBox"
     data-position="bottomStart"
     data-selector-id="dropBox"
@@ -14,14 +12,14 @@ exports[`DropBoxElement rendering the defult props 1`] = `
     dot-ui-element="dropbox"
   >
     <div
-      class="subContainer shadow radius defaultPalette"
+      class="subContainer bottom_shadow radius defaultPalette"
       data-id="dropBox_subcontainer"
       data-selector-id="dropBox_subcontainer"
       data-test-id="dropBox_subcontainer"
       tabindex="-1"
     >
       <div
-        class="arrowPosition"
+        class="end"
         data-id="dropBox_arrow"
         data-selector-id="dropBox_arrow"
         data-test-id="dropBox_arrow"