@zohodesk/components 1.6.28 → 1.6.30

package/es/common/common.module.css

@@ -1,52 +1,49 @@
 /*Font-smooth*/
 .ftsmooth {
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
+  composes: d-antialiased from global;
 }
 
 /*  --Overflow Props-- */
 .oflowx {
-  overflow-x: auto;
-  overflow-y: hidden;
+  composes: d-overflow-x-auto d-overflow-y-hidden from global;
 }
 
 .oflowy {
-  overflow-y: auto;
-  overflow-x: hidden;
+  composes: d-overflow-x-hidden d-overflow-y-auto from global;
 }
 
 .oflow {
-  overflow: hidden;
+  composes: d-overflow-hidden from global;
 }
 
 .oflowA {
-  overflow: auto;
+  composes: d-overflow-auto from global;
 }
 
 .preventScrollBubbleX {
-  overscroll-behavior-x: contain;
+  composes: d-overscroll-x-contain from global;
 }
 
 .preventScrollBubbleY {
-  overscroll-behavior-y: contain;
+  composes: d-overscroll-y-contain from global;
 }
 
 .preventScrollBubbleBoth {
-  overscroll-behavior: contain;
+  composes: d-overscroll-contain from global;
 }
 
 
 /*  --Position Props-- */
 .posrel {
-  position: relative;
+  composes: d-relative from global;
 }
 
 .posab {
-  position: absolute;
+  composes: d-absolute from global;
 }
 
 .posfix {
-  position: fixed;
+  composes: d-fixed from global;
 }
 
 .cboth::after {
@@ -60,21 +57,21 @@
 }
 
 .blockEvent {
-  pointer-events: none;
+  composes: d-pointer-events-none from global;
 }
 
 .clboth {
-  clear: both;
+  composes: d-clear-both from global;
 }
 
 .disable,
 .disabled {
-  position: relative;
+  composes: d-relative from global;
 }
 
 .disable::after {
   cursor: no-drop;
-  background: var(--zdt_disable_bg);
+  background-color: var(--zdt_disable_bg);
 }
 
 .disable::after,
@@ -98,8 +95,9 @@
   left: 0 ;
 }
 
-.disabled, .readonly {
-  cursor: not-allowed;
+.disabled,
+.readonly {
+  composes: d-cursor-not-allowed from global;
 }
 
 .disabled::after, .readonly::after {
@@ -107,200 +105,145 @@
 }
 
 /*  --Float Props-- */
-[dir=ltr] .fleft {
-  float: left;
-}
-[dir=rtl] .fleft {
-  float: right;
-}
-
-[dir=ltr] .fright {
-  float: right;
+.fleft {
+  composes: d-float-left from global;
 }
 
-[dir=rtl] .fright {
-  float: left;
+.fright {
+  composes: d-float-right from global;
 }
 
 .fnone {
-  float: none;
+  composes: d-float-none from global;
 }
 
 /*  --Display Props-- */
 .dinblk {
-  display: inline-block;
+  composes: d-inline-block from global;
 }
 
 .dblk {
-  display: block;
+  composes: d-block from global;
 }
 
 .dtable {
-  display: table;
+  composes: d-table from global;
 }
 
 .dtcell {
-  display: table-cell;
+  composes: d-table-cell from global;
 }
 
 .hide {
-  display: none;
+  composes: d-hidden from global;
 }
 
 /* FLex Assets*/
 .dflex {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
+  composes: d-flex from global;
 }
 
 .dInflex {
-  display: inline-flex;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
+  composes: d-inline-flex from global;
 }
 
 .flexwrap {
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
+  composes: d-flex-wrap from global;
 }
 
 .flexcolumn {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
+  composes: d-flex-col from global;
 }
 
 .flexrow {
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
+  composes: d-flex-row from global;
 }
 
 .flexrowreverse {
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: reverse;
-  -webkit-flex-direction: row-reverse;
-  -ms-flex-direction: row-reverse;
-  flex-direction: row-reverse;
+  composes: d-flex-row-reverse from global;
 }
 
 .flexcolumnreverse {
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: reverse;
-  -webkit-flex-direction: column-reverse;
-  -ms-flex-direction: column-reverse;
-  flex-direction: column-reverse;
+  composes: d-flex-col-reverse from global;
 }
 
 .flexgrow {
-  -webkit-box-flex: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  min-height: 0 ;
-  min-width: 0 ;
+  composes: d-flex-grow d-min-w-0 d-min-h-0 from global;
 }
 
 .flexshrink {
-  flex-shrink: 0;
-  -moz-flex-shrink: 0;
-  -webkit-flex-shrink: 0;
-  -ms-flex-shrink: 0;
+  composes: d-flex-shrink-0 from global;
 }
 
 .flexbasis {
-  flex-basis: 0% ;
-  -webkit-flex-basis: 0%;
-  -moz-flex-basis: 0%;
-  -ms-flex-basis: 0%;
+  composes: d-basis-0 from global;
 }
 
 .alignVertical {
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
+  composes: d-items-center from global;
 }
 
 .alignFstart {
-  -webkit-box-align: start;
-  -ms-flex-align: start;
-  align-items: flex-start;
+  composes: d-items-start from global;
 }
 
 .alignFend {
-  -webkit-box-align: end;
-  -ms-flex-align: end;
-  align-items: flex-end;
+  composes: d-items-end from global;
 }
 
 .alignBaseline {
-  -webkit-box-align: baseline;
-  -ms-flex-align: baseline;
-  align-items: baseline;
+  composes: d-items-baseline from global;
 }
 
 .alignHorizontal {
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: center;
+  composes: d-justify-center from global;
 }
 
 .alignAround {
-  -ms-flex-pack: distribute;
-  justify-content: space-around;
+  composes: d-justify-around from global;
 }
 
 .alignBetween {
-  -webkit-box-pack: justify;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
+  composes: d-justify-between from global;
 }
 
 .justifyFstart {
-  -webkit-box-pack: flex-start;
-  -ms-flex-pack: flex-start;
-  justify-content: flex-start;
+  composes: d-justify-start from global;
 }
 
 .justifyFend {
-  -webkit-box-pack: flex-end;
-  -ms-flex-pack: flex-end;
-  justify-content: flex-end;
+  composes: d-justify-end from global;
 }
 
 /* --Vertical props-- */
 
 .vtop {
-  vertical-align: top;
+  composes: d-align-top from global;
 }
 
 .vbot {
-  vertical-align: bottom;
+  composes: d-align-bottom from global;
 }
 
 .vmid {
-  vertical-align: middle;
+  composes: d-align-middle from global;
 }
 
 /*  --Resize Props-- */
 .resizeX {
-  resize: horizontal;
+  composes: d-resize-x from global;
 }
 
 .resizenone {
-  resize: none;
+  composes: d-resize-none from global;
 }
 
 .resizeboth {
-  resize: both;
+  composes: d-resize from global;
 }
 
 .resizeY {
-  resize: vertical;
+  composes: d-resize-y from global;
 }
 
 /*font-weight*/
@@ -324,24 +267,24 @@
 
 /* --Pointer props-- */
 .pointer {
-  cursor: pointer;
+  composes: d-cursor-pointer from global;
 }
 
 .notallow {
-  cursor: not-allowed;
+  composes: d-cursor-not-allowed from global;
 }
 
 .curdefault {
-  cursor: default;
+  composes: d-cursor-default from global;
 }
 
 /* --Width Props-- */
 .w100 {
-  width: 100% ;
+  composes: d-w-full from global;
 }
 
 .h100 {
-  height: 100% ;
+  composes: d-h-full from global;
 }
 
 .rounded {
@@ -356,31 +299,23 @@
 }
 
 .tcenter {
-  text-align: center;
-}
-
-[dir=ltr] .tleft {
-  text-align: left;
-}
-
-[dir=rtl] .tleft {
-  text-align: right;
+  composes: d-text-center from global;
 }
 
-[dir=ltr] .tright {
-  text-align: right;
+.tleft {
+  composes: d-text-left from global;
 }
 
-[dir=rtl] .tright {
-  text-align: left;
+.tright {
+  composes: d-text-right from global;
 }
 
 .textCap {
-  text-transform: uppercase;
+  composes: d-uppercase from global;
 }
 
 .textCaps {
-  text-transform: capitalize;
+  composes: d-capitalize from global;
 }
 
 .t50 {
@@ -461,11 +396,11 @@
 }
 
 .vishidden {
-  visibility: hidden;
+  composes: d-invisible from global;
 }
 
 .visible {
-  visibility: visible;
+  composes: d-visible from global;
 }
 
 .coverafter::after {
@@ -487,17 +422,16 @@
 }
 
 .dotted {
-  overflow: hidden;
-  white-space: nowrap;
+  composes: d-truncate from global;
   word-wrap: normal;
-  text-overflow: ellipsis;
 }
 
+/* stylelint-disable-next-line @zohodesk/use-common-class -- display:-webkit-box is required for -webkit-line-clamp, not d-flex */
 .clamp {
+  composes: d-overflow-hidden from global;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   display: -webkit-box;
-  overflow: hidden;
 }
 .lineClamp {
   composes: wbreak clamp;
@@ -505,10 +439,7 @@
 }
 
 .offSelection {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+  composes: d-select-none from global;
 }
 
 .disableFocus a,
@@ -520,42 +451,39 @@
 }
 
 .sticky {
-  position: sticky;
-  position: -webkit-sticky;
+  composes: d-sticky from global;
 }
 
 .fitContWidth {
-  width: fit-content ;
-  width: undefined ;
+  composes: d-w-fit from global;
 }
 
 .fitContHeight {
-  height: fit-content ;
-  height: undefined ;
+  composes: d-h-fit from global;
 }
 
 .whiteSpace_normal {
-  white-space: normal;
+  composes: d-whitespace-normal from global;
 }
 
 .whiteSpace_nowrap {
-  white-space: nowrap;
+  composes: d-whitespace-nowrap from global;
 }
 
 .whiteSpace_pre {
-  white-space: pre;
+  composes: d-whitespace-pre from global;
 }
 
 .whiteSpace_preLine {
-  white-space: pre-line;
+  composes: d-whitespace-pre-line from global;
 }
 
 .whiteSpace_preWrap {
-  white-space: pre-wrap;
+  composes: d-whitespace-pre-wrap from global;
 }
 
 .whiteSpace_breakSpaces {
-  white-space: break-spaces
+  composes: d-whitespace-break-spaces from global;
 }
 
 /*This Lines added to handle mobile number with mixed symbols in rtl case ex : (050)991-881*/

package/es/common/transition.module.css

@@ -144,3 +144,5 @@
 .defaultLeave {
   display: block;
 }
+
+/* stylelint-disable-next-line block-no-empty -- intentional empty transition class stubs */

package/es/semantic/Button/semanticButton.module.css

@@ -1,9 +1,6 @@
 .buttonReset {
-  outline: 0;
+  composes: d-p-0 d-bg-inherit d-text-inherit d-outline-0 from global;
   font: inherit;
-  color: inherit;
   border: inherit;
-  background-color: inherit;
-  padding: 0 ;
   text-align: inherit;
 }

package/es/shared/InputFieldLine/InputFieldLine.module.css

@@ -53,8 +53,8 @@
 }
 
 .hasBorder {
+    composes: d-border-solid from global;
     transition: border var(--zd_transition2) linear 0s;
-    border-style: solid;
 }
 
 .padding_small,

package/es/v1/Button/css/Button_v1.module.css

@@ -19,6 +19,7 @@
 .button {
     composes: varClass;
     composes: posrel pointer from '../../../common/common.module.css';
+    composes: d-bg-none from global;
     padding-block: var(--local-button-padding-block);
     padding-inline: var(--local-button-padding-inline);
     height: var(--local-button-height);
@@ -114,8 +115,7 @@
 
 .overlayHidden {
     composes: contentWrapper;
-    visibility: hidden;
-    opacity: 0;
+    composes: d-invisible d-opacity-0 from global;
 }
 
 .strike::after {

package/es/v1/Label/css/Label_v1.module.css

@@ -1,6 +1,6 @@
 .container {
+    composes: d-max-w-full from global;
     --local-label-cursor: pointer;
-    max-width: 100% ;
 }
 .label {
     /*css:theme-validation:ignore*/

package/es/v1/Switch/css/Switch_v1.module.css

@@ -60,15 +60,14 @@
     --local-switch-offLabel-stroke: var(--zdt_v1_switch_offLabel_hover);
 }
 .trackWrapper {
-    position: relative;
+    composes: d-relative from global;
 }
 .disabled > .trackWrapper {
     opacity: 0.4;
 }
 .track {
+    composes: d-block d-relative from global;
     appearance: none;
-    display: block;
-    position: relative;
     height: var(--local-switch-track-height);
     width: var(--local-switch-track-width);
     margin: 0 ;
@@ -77,9 +76,7 @@
     cursor: var(--local-switch-cursor);
 }
 .commonSvg {
-    display: block;
-    position: absolute;
-    pointer-events: none;
+    composes: d-block d-absolute d-pointer-events-none from global;
     top: 50% ;
 }
 .thumb {
@@ -96,7 +93,7 @@
     right: var(--zd_size1) ;
 }
 .label {
-    max-width: 100% ;
+    composes: d-max-w-full from global;
     cursor: var(--local-switch-cursor);
 }
 .onLabel {

package/es/v1/shared/Spinner/Spinner_v1.module.css

@@ -1,19 +1,17 @@
 .spinner {
+    composes: d-block from global;
     width: var(--local-loader-size, var(--zd_size16));
     height: var(--local-loader-size, var(--zd_size16));
-    display: block;
 }
 
 .spinnerTrack {
-    fill: none;
-    stroke: currentColor;
+    composes: d-fill-none d-stroke-current from global;
     opacity: 0.2;
     stroke-width: 3px;
 }
 
 .spinnerHead {
-    fill: none;
-    stroke: currentColor;
+    composes: d-fill-none d-stroke-current from global;
     stroke-width: 3px;
     stroke-linecap: round;
     stroke-dasharray: 60;

package/es/v1/shared/SuccessTick/SuccessTick_v1.module.css

@@ -1,11 +1,10 @@
 .tick {
+    composes: d-fill-none d-stroke-current from global;
     width: var(--local-tick-size, var(--zd_size16));
     height: var(--local-tick-size, var(--zd_size16));
-    stroke: currentColor;
     stroke-width: 2.5px;
     stroke-linecap: round;
     stroke-linejoin: round;
-    fill: none;
     stroke-dasharray: 24;
     stroke-dashoffset: 24;
 }[dir=ltr] .tick {

package/lib/Avatar/Avatar.module.css

@@ -14,9 +14,8 @@
 
 .avatar {
   composes: varClass;
-  position: relative;
   composes: dInflex alignVertical alignHorizontal from '../common/common.module.css';
-  vertical-align: middle;
+  composes: d-relative d-align-middle from global;
   font-size: var(--avatar_font_size);
   color: var(--avatar_text_color);
   border-width: var(--avatar_border_width);
@@ -36,11 +35,8 @@
 }
 
 .shadow {
-  position: absolute;
-  height: 100% ;
-  width: 100% ;
+  composes: d-absolute d-size-full d-pointer-events-none from global;
   top: 0 ;
-  pointer-events: none;
   border-radius: var(--avatar_border_radius);
 }
 
@@ -69,9 +65,7 @@
 }
 
 .image {
-  width: 100% ;
-  height: 100% ;
-  position: absolute;
+  composes: d-absolute d-size-full from global;
   top: 0 ;
   z-index: 0;
   border-radius: var(--avatar_border_radius);
@@ -120,7 +114,7 @@
 }
 
 .none {
-  display: none;
+  composes: d-hidden from global;
 }
 
 .default {
@@ -136,8 +130,8 @@
 }
 
 .initial {
+  composes: d-inline-block from global;
   text-transform: var(--avatar_text_transform);
-  display: inline-block;
 }
 
 .xxsmall {

package/lib/AvatarTeam/AvatarTeam.module.css

@@ -16,10 +16,8 @@
   --avatarteam_top_top: var(--zd_size1);
 }
 .container {
-  position: relative;
-  display: inline-block;
+  composes: d-inline-block d-relative d-align-middle from global;
   font-size: 0 ;
-  vertical-align: middle;
 }
 .team {
   composes: varClass;