@zohodesk/components 1.6.28 → 1.6.29

package/lib/ListItem/ListItem.module.css

@@ -28,7 +28,7 @@
 }
 .list {
   composes: varClass;
-  position: relative;
+  composes: d-relative d-border-solid d-cursor-pointer from global;
   list-style: none;
   color: var(--listitem_text_color);
   font-size: var(--listitem_font_size);
@@ -37,9 +37,7 @@
   text-decoration: none;
   padding: var(--listitem_padding);
   border-width: var(--listitem_border_width);
-  border-style: solid;
   border-color: var(--listitem_border_color);
-  cursor: pointer;
 }
 .list, .default, .secondary {
   background-color: var(--listitem_bg_color);
@@ -93,9 +91,9 @@
   composes: dflex from '../common/common.module.css';
 }
 .iconBox {
+  composes: d-text-center from global;
   width: var(--zd_size20) ;
   margin-inline-end: var(--zd_size10) ;
-  text-align: center;
 }
 .iconBox,
 .leftAvatar {
@@ -126,22 +124,21 @@
   composes: justifyFend from '../common/common.module.css';
 }
 .selfAlign_center{
-  align-self: center;
+  composes: d-self-center from global;
 }
 
 .contentWrapper {
   composes: dflex flexrow from '../common/common.module.css';
-  align-items: stretch;
-  width: 100% ;
+  composes: d-items-stretch d-w-full from global;
 }
 .alignLhsBox_end {
-  align-items: flex-end;
+  composes: d-items-end from global;
 }
 .alignLhsBox_center {
-  align-items: center;
+  composes: d-items-center from global;
 }
 .lhsBoxInner{
-  height: 100% ;
+  composes: d-h-full from global;
   max-height: calc((var(--listitem_font_size) * var(--listitem_multiline_lineheight)) * 2 );
 }
 .defaultHover, .primaryHover, .dangerHover, .secondaryHover, .darkHover {
@@ -225,7 +222,7 @@
 .tickIcon,
 .defaultTick,
 .darkTick {
-  position: absolute;
+  composes: d-absolute from global;
   color: var(--listitem_tickicon_color);
   top:50% ;
   font-size: 0 ;
@@ -281,5 +278,5 @@
 }
 
 .titleBox {
-  align-items: stretch;
+  composes: d-items-stretch from global;
 }

package/lib/MultiSelect/MobileHeader/MobileHeader.module.css

@@ -13,5 +13,5 @@
   .buttonText{
     font-size: var(--zd_font_size15) ;
     composes: dotted from '../../common/common.module.css';
-    padding: 0  
+    composes: d-p-0 from global;
   }

package/lib/MultiSelect/MultiSelect.module.css

@@ -1,8 +1,9 @@
 .wrapper {
-  position: relative;
+  composes: d-relative from global;
 }
-.disabled, .readOnly {
-  cursor: not-allowed;
+.disabled,
+.readOnly {
+  composes: d-cursor-not-allowed from global;
 }
 .container {
   max-height: var(--zd_size120) ;
@@ -51,10 +52,10 @@
 }
 
 .delete {
+  composes: d-cursor-pointer from global;
   padding-block: var(--zd_size2) ;
   padding-inline:var(--zd_size6) ;
   font: inherit;
-  cursor: pointer;
   border: 0;
   background-color: var(--zdt_multiselect_delete_bg);
 }
@@ -83,7 +84,7 @@
 }
 
 .tag {
-  max-width: 100% ;
+  composes: d-max-w-full from global;
 }
 
 .container.xmedium .tag {
@@ -96,10 +97,10 @@
   margin-inline:0 var(--zd_size10) ;
 }
 .responsiveParent{
-  width: 100% ;
+  composes: d-w-full from global;
 }
 .box {
-  background: var(--zdt_multiselect_box_bg);
+  background-color: var(--zdt_multiselect_box_bg);
 }
 
 .selectAll:hover {
@@ -137,21 +138,14 @@
   color: var(--zdt_multiselect_darkmsg_text);
 }
 .dark, .darkBox {
-  background: var(--zdt_multiselect_darkmsg_bg);
+  background-color: var(--zdt_multiselect_darkmsg_bg);
 }
 
 .hide {
   composes: vishidden from '../common/common.module.css';
 }
 .custmSpan {
-  display: inline-block;
-  vertical-align: middle;
-  opacity: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 100% ;
-  visibility: hidden;
+  composes: d-inline-block d-invisible d-max-w-full d-align-middle d-opacity-0 d-truncate from global;
 }
 .custmSpanMedium {
   height: var(--zd_size35) ;
@@ -160,9 +154,8 @@
   height: var(--zd_size28) ;
 }
 .custmInputWrapper {
-  position: absolute;
+  composes: d-absolute d-w-full from global;
   top: 0 ;
-  width: 100% ;
 }
 [dir=ltr] .custmInputWrapper {
   left: 0 ;
@@ -188,16 +181,16 @@
 }
 
 .more {
+  composes: d-cursor-pointer from global;
   font-size: var(--zd_font_size14) ;
   color: var(--zdt_multiselect_more_text);
   margin-block-start: var(--zd_size5) ;
   font-weight: var(--zd-fw-normal);
   margin-inline-end:var(--zd_size3) ;
-  cursor: pointer;
   background-color: var(--zdt_multiselect_delete_bg);
   border: 0
 }
 
 .rightPlaceholder{
-  height: 100% ;
+  composes: d-h-full from global;
 }

package/lib/MultiSelect/SelectedOptions.module.css

@@ -1,5 +1,5 @@
 .tag {
-  max-width: 100% ;
+  composes: d-max-w-full from global;
 }
 .xmedium {
   margin-block: 0 var(--zd_size2) ;

package/lib/PopOver/PopOver.module.css

@@ -1,9 +1,9 @@
 .popup {
-  position: relative;
+  composes: d-relative from global;
   background-color: var(--zdt_popover_default_bg);
 }
 
 .target {
   composes: offSelection from '../common/common.module.css';
-  cursor: pointer;
+  composes: d-cursor-pointer from global;
 }

package/lib/Radio/Radio.module.css

@@ -18,11 +18,12 @@
 }
 
 .pointer {
-  cursor: pointer;
+  composes: d-cursor-pointer from global;
 }
 
-.readonly, .disabled {
-  cursor: default;
+.readonly,
+.disabled {
+  composes: d-cursor-default from global;
 }
 
 .disabled {
@@ -34,7 +35,7 @@
   width: var(--radio_width);
   height: var(--radio_height);
   stroke: var(--radio_stroke_color);
-  background: var(--radio_bg_color);
+  background-color: var(--radio_bg_color);
   border-radius: 50%;
 }
 
@@ -66,15 +67,14 @@
 }
 
 .radioLabel {
+  composes: d-block from global;
   font-size: 0 ;
-  display: block;
 }
 
 .rdBox {
-  fill: none;
+  composes: d-fill-none d-stroke-inherit from global;
   stroke-width: var(--radio_stroke_width);
   stroke-linecap: round;
-  stroke: inherit;
 }
 
 .centerPath {

package/lib/Ribbon/Ribbon.module.css

@@ -35,7 +35,7 @@
 /* css:lineheight-validation:ignore */
 .basic {
   composes: varClass;
-  position: relative;
+  composes: d-relative d-border-solid from global;
   color: var(--ribbon_text_color);
   text-transform: var(--ribbon_text_transform);
   font-size: var(--ribbon_font_size);
@@ -44,7 +44,6 @@
   background-color: var(--ribbon_bg_color);
   box-shadow: var(--ribbon_box_shadow);
   border-width: var(--ribbon_border_width);
-  border-style: solid;
   border-color: var(--ribbon_border_color);
 }
 
@@ -60,11 +59,10 @@
 
 .default {
   composes: semibold from '../common/common.module.css';
-  display: block;
+  composes: d-block d-text-center from global;
   --ribbon_padding: var(--zd_size5) var(--zd_size20);
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
-  text-align: center;
 }
 
 .small {
@@ -211,7 +209,7 @@
 
 .flag {
   composes: dotted from '../common/common.module.css';
-  display: block;
+  composes: d-block from global;
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
 }
@@ -265,17 +263,16 @@
 }
 
 .plain {
-  display: inline-block;
   composes: semibold from '../common/common.module.css';
+  composes: d-inline-block from global;
 }
 
 .ribbon {
   composes: semibold from '../common/common.module.css';
-  display: block;
+  composes: d-block d-text-center from global;
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
   --ribbon_padding: var(--zd_size6) var(--zd_size10);
-  text-align: center;
 }
 
 .ribbon.small {
@@ -337,11 +334,10 @@
 
 .tag {
   composes: semibold from '../common/common.module.css';
-  display: inline-block;
+  composes: d-inline-block d-border-solid from global;
   height: var(--zd_size28) ;
   padding-block:var(--zd_size6) ;
   padding-inline:var(--zd_size5) var(--zd_size8) ;
-  border-style: solid;
   border-color: var(--zdt_ribbon_default_tag_border);
 ;
 }
@@ -390,28 +386,26 @@
 }
 
 .box {
-  display: inline-block;
+  composes: d-inline-block from global;
   --ribbon_bg_color: var(--zdt_ribbon_white_bg);
   --ribbon_padding: var(--zd_size5) var(--zd_size8);
   border-radius: 3px;
 }
 
 .stamp {
-  display: inline-block;
+  composes: d-inline-block from global;
   --ribbon_padding: var(--zd_size3) var(--zd_size5);
   --ribbon_text_transform: uppercase;
 }
 
 .sticker {
-  display: block;
+  composes: d-block d-text-center d-border-solid from global;
   height: var(--zd_size18) ;
   padding-block:var(--zd_size3) ;
   padding-inline:var(--zd_size10) ;
   --ribbon_text_color: var(--zdt_ribbon_white_text);
   --ribbon_text_transform: uppercase;
-  text-align: center;
   border-width: 1px 0;
-  border-style: solid;
   border-color: var(--zdt_ribbon_flag_white_border);
 }
 
@@ -433,7 +427,7 @@
 
 .after,
 .before {
-  position: absolute;
+  composes: d-absolute from global;
   top: 0 ;
   bottom: 0 ;
   width: var(--zd_size10) ;
@@ -488,12 +482,11 @@
 }
 
 .children {
-  display: inline-block;
+  composes: d-inline-block d-align-top from global;
   margin-inline-end: var(--zd_size4) ;
-  vertical-align: top;
   line-height: 0;
 }
 
 .childText {
-  position: relative;
+  composes: d-relative from global;
 }

package/lib/RippleEffect/RippleEffect.module.css

@@ -1,5 +1,5 @@
 .effect {
-  position: relative;
+  composes: d-relative from global;
   border-radius: 4px;
 }
 
@@ -121,7 +121,7 @@
 }
 
 .notAllowed {
-  cursor: not-allowed;
+  composes: d-cursor-not-allowed from global;
 }
 
 .secondary.defaultHover, .hoverEffect:hover.secondary.borderHover

package/lib/Select/Select.module.css

@@ -1,5 +1,5 @@
 .input {
-  cursor: pointer;
+  composes: d-cursor-pointer from global;
 }
 
 .small {
@@ -35,7 +35,7 @@
 }
 
 .container {
-  position: relative;
+  composes: d-relative from global;
 }
 /* css:lineheight-validation:ignore */
 .arrowIcon {
@@ -91,7 +91,7 @@
 }
 
 .leftIcon {
-  position: absolute;
+  composes: d-absolute from global;
   top: 0 ;
   bottom: 0 ;
   width: var(--zd_size30) ;
@@ -123,7 +123,7 @@
   transform: rotateX(180deg);
 }
 .rightPlaceholder{
-  height: 100% ;
+  composes: d-h-full from global;
 }
 
 .iconOnHoverStyle .arrowIcon,

package/lib/Switch/Switch.module.css

@@ -11,7 +11,7 @@
 
 .container {
   composes: varClass;
-  vertical-align: middle;
+  composes: d-align-middle from global;
 }
 
 .disabled {
@@ -23,12 +23,10 @@
 }
 
 .label {
-  display: inline-block;
-  position: relative;
+  composes: d-inline-block d-relative d-cursor-pointer from global;
   transition: box-shadow var(--zd_transition3) ease-in-out;
   background-color: var(--switch_off_bg_color);
   border-radius: 20px;
-  cursor: pointer;
 }
 
 .effect:hover .label
@@ -57,7 +55,7 @@
 }
 
 .input {
-  display: none;
+  composes: d-hidden from global;
 }
 
 .small {
@@ -99,9 +97,8 @@
 }
 
 .switch {
-  display: inline-block;
   composes: offSelection from '../common/common.module.css';
-  vertical-align: middle;
+  composes: d-inline-block d-align-middle from global;
 }
 
 .switch_small {

package/lib/Tab/Tab.module.css

@@ -1,15 +1,13 @@
 .tab {
-  text-transform: uppercase;
+  composes: d-uppercase d-cursor-pointer from global;
   letter-spacing: 0.6px;
   text-decoration: none;
-  cursor: pointer;
 }
 .vertical {
-  height: 100% ;
+  composes: d-h-full from global;
 }
 .horizontal {
-  width: 100% ;
-  max-width: 100% ;
+  composes: d-w-full d-max-w-full from global;
 }
 .textContainer,
 .tabText {
@@ -19,7 +17,7 @@
   composes: dotted from '../common/common.module.css';
 }
 .disabled {
-  cursor: not-allowed;
+  composes: d-cursor-not-allowed from global;
 }
 .border {
   border-bottom: 1px solid var(--zdt_tab_default_border);
@@ -55,12 +53,12 @@
   border-color: var(--zdt_tab_delta_active_border);
 }
 .beta {
+  composes: d-capitalize from global;
   padding-inline:  var(--zd_size4) ;
   padding-block:0 ;
   font-size: var(--zd_font_size14) ;
   line-height: 4.2857;
   margin-inline-end: var(--zd_size40) ;
-  text-transform: capitalize;
 }
 .tabBeta {
   composes: beta;

package/lib/Tab/TabContent.module.css

@@ -1,4 +1,4 @@
 /* $Id$ */
 .container {
-  position: relative;
+  composes: d-relative from global;
 }

package/lib/Tab/Tabs.module.css

@@ -1,5 +1,5 @@
 .tab {
-  position: relative;
+  composes: d-relative from global;
   z-index: 1;
   --tab_position_gap: 22px;
 }
@@ -14,9 +14,9 @@
 }
 
 .alpha_border {
+  composes: d-border-solid from global;
   border-width: 0 0 1px 0;
   border-color: var(--zdt_tabs_alpha_border);
-  border-style: solid;
 }
 
 .alpha::after {
@@ -45,7 +45,7 @@
   width: 100% ;
   height: 100% ;
   top: 0 ;
-  background: inherit;
+  background-color: inherit;
 }
 
 [dir=ltr] .alpha:before {
@@ -87,11 +87,11 @@
 }
 
 .maxWidth {
-  max-width: 100% ;
+  composes: d-max-w-full from global;
 }
 
 .highlight {
-  position: absolute;
+  composes: d-absolute from global;
   bottom: 0 ;
   border-bottom: 1px solid var(--zdt_tabs_highlight_border);
 }
@@ -101,8 +101,7 @@
 }
 
 .menu {
-  position: relative;
-  cursor: pointer;
+  composes: d-relative d-cursor-pointer from global;
 }
 
 .menuBox {
@@ -121,7 +120,7 @@
 }
 
 .hidden {
-  visibility: hidden;
+  composes: d-invisible from global;
 }
 
 .search {
@@ -134,11 +133,11 @@
 }
 
 .emptyStateTitle {
+  composes: d-text-center from global;
   font-weight: var(--zd-fw-semibold);
   word-wrap: break-word;
   font-size: var(--zd_font_size16) ;
   max-width: var(--zd_size430) ;
-  text-align: center;
 }
 
 [dir=ltr] .emptyStateTitle {

package/lib/Tag/Tag.module.css

@@ -32,13 +32,11 @@
 .container {
   composes: varClass;
   composes: dInflex alignVertical flexrow from '../common/common.module.css';
-  position: relative;
-  vertical-align: middle;
+  composes: d-relative d-max-w-full d-align-middle from global;
   color: var(--tag_text_color);
   font-size: var(--tag_font_size);
   letter-spacing: var(--tag_letter_spacing);
   height: var(--tag_height);
-  max-width: 100% ;
   background-color: var(--tag_bg_color);
   border-radius: var(--tag_border_radius);
   border-width: var(--tag_border_width);
@@ -48,7 +46,7 @@
   cursor: var(--tag_cursor);
 }
 .disabled {
-  pointer-events: none;
+  composes: d-pointer-events-none from global;
   --tag_text_color: var(--zdt_tag_disabled_text);
 }
 .readonly,
@@ -123,15 +121,14 @@
   display: block;
 }
 .close {
+  composes: d-hidden d-absolute from global;
   color: var(--tag_closeicon_color);
-  display: none;
-  position: absolute;
   top: 0 ;
   bottom: 0 ;
   padding: var(--tag_closeicon_padding);
   cursor: var(--tag_closeicon_cursor);
   border-radius: var(--tag_closeicon_border_radius);
-  background: var(--tag_closeicon_bg_color);
+  background-color: var(--tag_closeicon_bg_color);
 }
 [dir=ltr] .close {
   right: 0 ;

package/lib/TextBoxIcon/TextBoxIcon.module.css

@@ -6,7 +6,7 @@
 }
 .container {
   composes: varClass;
-  position: relative;
+  composes: d-relative from global;
 }
 .disabled,.readonly {
   --textboxicon_icon_cursor: not-allowed;

package/lib/Textarea/Textarea.module.css

@@ -15,10 +15,10 @@
 }
 .basic {
   composes: varClass;
+  composes: d-outline-0 from global;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
-  outline: 0;
   letter-spacing: 0.1px;
   color: var(--textarea_text_color);
   cursor: var(--textarea_cursor);
@@ -60,19 +60,18 @@
 /* css:lineheight-validation:ignore */
 .container {
   composes: basic;
+  composes: d-max-w-full d-border-solid from global;
   transition: border var(--zd_transition2) linear 0s,
     height var(--zd_transition2) linear 0s;
   -moz-transition: border var(--zd_transition2) linear 0s,
     height var(--zd_transition2) linear 0s;
   width: var(--textarea_width);
-  max-width: 100% ;
   min-width: var(--zd_size100) ;
   font-size: var(--textarea_font_size);
   line-height: var(--textarea_line_height);
   height: var(--textarea_height);
   -webkit-transition: border var(--zd_transition2) linear 0s,
     height var(--zd_transition2) linear 0s;
-  border-style: solid;
   background-color: var(--zdt_textarea_default_bg);
   border-color: var(--textarea_border_color);
   padding: var(--textarea_padding);
@@ -101,7 +100,7 @@
 }
 .xsmall,
 .xmedium {
-  vertical-align: middle;
+  composes: d-align-middle from global;
 }
 .xsmall {
   --textarea_font_size: var(--zd_font_size14);