@zohodesk/dot 1.9.9 → 1.9.11

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

@@ -53,7 +53,6 @@ exports[`ActionButton renders with arrowBoxSize medium and children 1`] = `
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -77,11 +76,12 @@ exports[`ActionButton renders with arrowBoxSize medium and children 1`] = `
       </div>
     </button>
     <button
+      aria-controls="1"
+      aria-expanded="false"
       class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper  shrinkOff"
       data-id="actionButton_arrowButton"
       data-selector-id="actionButton_arrowButton"
       data-test-id="actionButton_arrowButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -116,7 +116,6 @@ exports[`ActionButton renders with arrowBoxSize medium and isPopupOpen false 1`]
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -156,7 +155,6 @@ exports[`ActionButton renders with arrowBoxSize small and children 1`] = `
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -180,11 +178,12 @@ exports[`ActionButton renders with arrowBoxSize small and children 1`] = `
       </div>
     </button>
     <button
+      aria-controls="1"
+      aria-expanded="false"
       class="buttonReset small_arrowBox primaryFilledArw  arrowWrapper  shrinkOff"
       data-id="actionButton_arrowButton"
       data-selector-id="actionButton_arrowButton"
       data-test-id="actionButton_arrowButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -219,7 +218,6 @@ exports[`ActionButton renders with arrowBoxSize small and isPopupOpen true 1`] =
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -259,7 +257,6 @@ exports[`ActionButton renders with children and tooltip disabled 1`] = `
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -283,11 +280,12 @@ exports[`ActionButton renders with children and tooltip disabled 1`] = `
       </div>
     </button>
     <button
+      aria-controls="1"
+      aria-expanded="false"
       class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper  shrinkOff"
       data-id="actionButton_arrowButton"
       data-selector-id="actionButton_arrowButton"
       data-test-id="actionButton_arrowButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -322,7 +320,6 @@ exports[`ActionButton renders with children and tooltip enabled 1`] = `
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -346,11 +343,12 @@ exports[`ActionButton renders with children and tooltip enabled 1`] = `
       </div>
     </button>
     <button
+      aria-controls="1"
+      aria-expanded="false"
       class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper  shrinkOff"
       data-id="actionButton_arrowButton"
       data-selector-id="actionButton_arrowButton"
       data-test-id="actionButton_arrowButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -385,7 +383,6 @@ exports[`ActionButton renders with children prop 1`] = `
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -409,11 +406,12 @@ exports[`ActionButton renders with children prop 1`] = `
       </div>
     </button>
     <button
+      aria-controls="1"
+      aria-expanded="false"
       class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper  shrinkOff"
       data-id="actionButton_arrowButton"
       data-selector-id="actionButton_arrowButton"
       data-test-id="actionButton_arrowButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -448,7 +446,6 @@ exports[`ActionButton renders with custom className 1`] = `
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -488,7 +485,6 @@ exports[`ActionButton renders with dataId prop 1`] = `
       data-id="testDataId"
       data-selector-id="box"
       data-test-id="testDataId"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -528,7 +524,6 @@ exports[`ActionButton renders with dataId, children, and popup open 1`] = `
       data-id="testDataId"
       data-selector-id="box"
       data-test-id="testDataId"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -552,11 +547,12 @@ exports[`ActionButton renders with dataId, children, and popup open 1`] = `
       </div>
     </button>
     <button
+      aria-controls="1"
+      aria-expanded="true"
       class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper arrowActive shrinkOff"
       data-id="testDataId_arrowButton"
       data-selector-id="actionButton_arrowButton"
       data-test-id="testDataId_arrowButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -583,6 +579,7 @@ exports[`ActionButton renders with dataId, children, and popup open 1`] = `
         data-selector-id="dropBox"
         data-test-id="testDataId_dropbox"
         dot-ui-element="dropbox"
+        id="1"
         style="z-index: 4;"
       >
         <div
@@ -630,7 +627,6 @@ exports[`ActionButton renders with dataSelectorId and children props 1`] = `
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -654,11 +650,12 @@ exports[`ActionButton renders with dataSelectorId and children props 1`] = `
       </div>
     </button>
     <button
+      aria-controls="1"
+      aria-expanded="false"
       class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper  shrinkOff"
       data-id="actionButton_arrowButton"
       data-selector-id="testSelectorId_arrowButton"
       data-test-id="actionButton_arrowButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -694,7 +691,6 @@ exports[`ActionButton renders with dataTitle 1`] = `
       data-selector-id="box"
       data-test-id="actionButton"
       data-title="Test Data Title"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -734,7 +730,6 @@ exports[`ActionButton renders with default props 1`] = `
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -774,7 +769,6 @@ exports[`ActionButton renders with disabled state true 1`] = `
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -814,7 +808,6 @@ exports[`ActionButton renders with dropBoxClassProps - case 1 1`] = `
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -838,11 +831,12 @@ exports[`ActionButton renders with dropBoxClassProps - case 1 1`] = `
       </div>
     </button>
     <button
+      aria-controls="1"
+      aria-expanded="true"
       class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper arrowActive shrinkOff"
       data-id="actionButton_arrowButton"
       data-selector-id="actionButton_arrowButton"
       data-test-id="actionButton_arrowButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -869,6 +863,7 @@ exports[`ActionButton renders with dropBoxClassProps - case 1 1`] = `
         data-selector-id="dropBox"
         data-test-id="actionButton_dropbox"
         dot-ui-element="dropbox"
+        id="1"
         style="z-index: 4;"
       >
         <div
@@ -916,7 +911,6 @@ exports[`ActionButton renders with dropBoxClassProps - case 2 1`] = `
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -940,11 +934,12 @@ exports[`ActionButton renders with dropBoxClassProps - case 2 1`] = `
       </div>
     </button>
     <button
+      aria-controls="1"
+      aria-expanded="false"
       class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper  shrinkOff"
       data-id="actionButton_arrowButton"
       data-selector-id="actionButton_arrowButton"
       data-test-id="actionButton_arrowButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -979,7 +974,6 @@ exports[`ActionButton renders with dropBoxClassProps - case 3 1`] = `
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -1003,11 +997,12 @@ exports[`ActionButton renders with dropBoxClassProps - case 3 1`] = `
       </div>
     </button>
     <button
+      aria-controls="1"
+      aria-expanded="true"
       class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper arrowActive shrinkOff"
       data-id="actionButton_arrowButton"
       data-selector-id="actionButton_arrowButton"
       data-test-id="actionButton_arrowButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -1034,6 +1029,7 @@ exports[`ActionButton renders with dropBoxClassProps - case 3 1`] = `
         data-selector-id="dropBox"
         data-test-id="actionButton_dropbox"
         dot-ui-element="dropbox"
+        id="1"
         style="z-index: 4;"
       >
         <div
@@ -1081,7 +1077,6 @@ exports[`ActionButton renders with dropBoxClassProps - case 4 1`] = `
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -1105,11 +1100,12 @@ exports[`ActionButton renders with dropBoxClassProps - case 4 1`] = `
       </div>
     </button>
     <button
+      aria-controls="1"
+      aria-expanded="true"
       class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper arrowActive shrinkOff"
       data-id="actionButton_arrowButton"
       data-selector-id="actionButton_arrowButton"
       data-test-id="actionButton_arrowButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -1136,6 +1132,7 @@ exports[`ActionButton renders with dropBoxClassProps - case 4 1`] = `
         data-selector-id="dropBox"
         data-test-id="actionButton_dropbox"
         dot-ui-element="dropbox"
+        id="1"
         style="z-index: 4;"
       >
         <div
@@ -1183,7 +1180,6 @@ exports[`ActionButton renders with iconName: { iconName: 'ZD-replyall', iconSize
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -1250,7 +1246,6 @@ exports[`ActionButton renders with innerClassName set to custom-class 1`] = `
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -1290,7 +1285,6 @@ exports[`ActionButton renders with innerClassName set to empty string 1`] = `
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -1330,7 +1324,6 @@ exports[`ActionButton renders with innerClassName set to undefined 1`] = `
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -1370,7 +1363,6 @@ exports[`ActionButton renders with isAbsolutePositioningNeeded set to true 1`] =
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -1410,7 +1402,6 @@ exports[`ActionButton renders with isAbsolutePositioningNeeded set to true and i
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -1434,11 +1425,12 @@ exports[`ActionButton renders with isAbsolutePositioningNeeded set to true and i
       </div>
     </button>
     <button
+      aria-controls="1"
+      aria-expanded="true"
       class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper arrowActive shrinkOff"
       data-id="actionButton_arrowButton"
       data-selector-id="actionButton_arrowButton"
       data-test-id="actionButton_arrowButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -1465,6 +1457,7 @@ exports[`ActionButton renders with isAbsolutePositioningNeeded set to true and i
         data-selector-id="dropBox"
         data-test-id="actionButton_dropbox"
         dot-ui-element="dropbox"
+        id="1"
         style="z-index: 4;"
       >
         <div
@@ -1512,7 +1505,6 @@ exports[`ActionButton renders with isArrow false and popup open 1`] = `
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -1536,11 +1528,12 @@ exports[`ActionButton renders with isArrow false and popup open 1`] = `
       </div>
     </button>
     <button
+      aria-controls="1"
+      aria-expanded="true"
       class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper arrowActive shrinkOff"
       data-id="actionButton_arrowButton"
       data-selector-id="actionButton_arrowButton"
       data-test-id="actionButton_arrowButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -1567,6 +1560,7 @@ exports[`ActionButton renders with isArrow false and popup open 1`] = `
         data-selector-id="dropBox"
         data-test-id="actionButton_dropbox"
         dot-ui-element="dropbox"
+        id="1"
         style="z-index: 4;"
       >
         <div
@@ -1614,7 +1608,6 @@ exports[`ActionButton renders with isArrow true and popup open 1`] = `
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -1638,11 +1631,12 @@ exports[`ActionButton renders with isArrow true and popup open 1`] = `
       </div>
     </button>
     <button
+      aria-controls="1"
+      aria-expanded="true"
       class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper arrowActive shrinkOff"
       data-id="actionButton_arrowButton"
       data-selector-id="actionButton_arrowButton"
       data-test-id="actionButton_arrowButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -1669,6 +1663,7 @@ exports[`ActionButton renders with isArrow true and popup open 1`] = `
         data-selector-id="dropBox"
         data-test-id="actionButton_dropbox"
         dot-ui-element="dropbox"
+        id="1"
         style="z-index: 4;"
       >
         <div
@@ -1766,7 +1761,6 @@ exports[`ActionButton renders with isPopupOpen false and children 1`] = `
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -1790,11 +1784,12 @@ exports[`ActionButton renders with isPopupOpen false and children 1`] = `
       </div>
     </button>
     <button
+      aria-controls="1"
+      aria-expanded="false"
       class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper  shrinkOff"
       data-id="actionButton_arrowButton"
       data-selector-id="actionButton_arrowButton"
       data-test-id="actionButton_arrowButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -1829,7 +1824,6 @@ exports[`ActionButton renders with isPopupOpen true and children 1`] = `
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -1853,11 +1847,12 @@ exports[`ActionButton renders with isPopupOpen true and children 1`] = `
       </div>
     </button>
     <button
+      aria-controls="1"
+      aria-expanded="true"
       class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper arrowActive shrinkOff"
       data-id="actionButton_arrowButton"
       data-selector-id="actionButton_arrowButton"
       data-test-id="actionButton_arrowButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -1884,6 +1879,7 @@ exports[`ActionButton renders with isPopupOpen true and children 1`] = `
         data-selector-id="dropBox"
         data-test-id="actionButton_dropbox"
         dot-ui-element="dropbox"
+        id="1"
         style="z-index: 4;"
       >
         <div
@@ -1931,7 +1927,6 @@ exports[`ActionButton renders with isRestrictScroll set to true 1`] = `
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -1971,7 +1966,6 @@ exports[`ActionButton renders with isRestrictScroll set to true and isPopupOpen
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -1995,11 +1989,12 @@ exports[`ActionButton renders with isRestrictScroll set to true and isPopupOpen
       </div>
     </button>
     <button
+      aria-controls="1"
+      aria-expanded="true"
       class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper arrowActive shrinkOff"
       data-id="actionButton_arrowButton"
       data-selector-id="actionButton_arrowButton"
       data-test-id="actionButton_arrowButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -2026,6 +2021,7 @@ exports[`ActionButton renders with isRestrictScroll set to true and isPopupOpen
         data-selector-id="dropBox"
         data-test-id="actionButton_dropbox"
         dot-ui-element="dropbox"
+        id="1"
         style="z-index: 4;"
       >
         <div
@@ -2073,7 +2069,6 @@ exports[`ActionButton renders with onClick prop and validates class 1`] = `
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -2140,7 +2135,6 @@ exports[`ActionButton renders with palette - primary 1`] = `
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -2180,7 +2174,6 @@ exports[`ActionButton renders with palette - primary and children 1`] = `
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -2204,11 +2197,12 @@ exports[`ActionButton renders with palette - primary and children 1`] = `
       </div>
     </button>
     <button
+      aria-controls="1"
+      aria-expanded="false"
       class="buttonReset medium_arrowBox primaryArw  arrowWrapper  shrinkOff"
       data-id="actionButton_arrowButton"
       data-selector-id="actionButton_arrowButton"
       data-test-id="actionButton_arrowButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -2283,7 +2277,6 @@ exports[`ActionButton renders with palette - primaryFilled 1`] = `
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -2323,7 +2316,6 @@ exports[`ActionButton renders with palette - primaryFilled and children 1`] = `
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -2347,11 +2339,12 @@ exports[`ActionButton renders with palette - primaryFilled and children 1`] = `
       </div>
     </button>
     <button
+      aria-controls="1"
+      aria-expanded="false"
       class="buttonReset medium_arrowBox primaryFilledArw  arrowWrapper  shrinkOff"
       data-id="actionButton_arrowButton"
       data-selector-id="actionButton_arrowButton"
       data-test-id="actionButton_arrowButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -2426,7 +2419,6 @@ exports[`ActionButton renders with removeClose set to a function 1`] = `
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -2466,7 +2458,6 @@ exports[`ActionButton renders with size - large 1`] = `
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -2506,7 +2497,6 @@ exports[`ActionButton renders with size - medium 1`] = `
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -2546,7 +2536,6 @@ exports[`ActionButton renders with size - small 1`] = `
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -2586,7 +2575,6 @@ exports[`ActionButton renders with subText 1`] = `
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"
@@ -2635,7 +2623,6 @@ exports[`ActionButton renders with text 1`] = `
       data-id="actionButton"
       data-selector-id="box"
       data-test-id="actionButton"
-      tabindex="0"
     >
       <div
         class="flex cover coldir both"

package/es/ActionButton/props/defaultProps.js

@@ -15,5 +15,6 @@ export const defaultProps = {
   removeChildrenTooltip: false,
   innerClassName: '',
   isAbsolutePositioningNeeded: true,
-  isRestrictScroll: false
+  isRestrictScroll: false,
+  a11yAttributes: {}
 };

package/es/ActionButton/props/propTypes.js

@@ -33,5 +33,8 @@ export const propTypes = {
   isAbsolutePositioningNeeded: PropTypes.bool,
   isRestrictScroll: PropTypes.bool,
   positionsOffset: PropTypes.object,
-  targetOffset: PropTypes.object
+  targetOffset: PropTypes.object,
+  a11yAttributes: PropTypes.shape({
+    splitButton: PropTypes.object
+  })
 };

package/es/AlphabeticList/AlphabeticList.module.css

@@ -12,19 +12,18 @@
   padding: 0 ;
 }
 .column .title {
-  margin-bottom: var(--zd_size3) ;
+  margin-block-end: var(--zd_size3) ;
 }
-[dir=ltr] .row .title {
-  margin-right: var(--zd_size3) ;
-}
-[dir=rtl] .row .title {
-  margin-left: var(--zd_size3) ;
+.row .title {
+  margin-inline-end: var(--zd_size3) ;
 }
 .row  .letter {
-  padding: 0 var(--zd_size3) ;
+  padding-block:0 ;
+  padding-inline: var(--zd_size3) ;
 }
 .column .letter {
-  padding: var(--zd_size3) 0 ;
+  padding-block: var(--zd_size3) ;
+  padding-inline: 0 ;
 }
 .heading {
   composes: dotted from '~@zohodesk/components/es/common/common.module.css';