@arcgis/core 4.33.0-next.20250219 → 4.33.0-next.20250221

package/assets/esri/themes/base/widgets/_Sketch.scss

@@ -6,38 +6,46 @@
   .esri-sketch {
     display: flex;
     user-select: none;
-    flex-flow: row wrap;
-    gap: var(--calcite-spacing-sm, 8px);
-    justify-content: flex-start;
     pointer-events: none;
 
+    &-pad {
+      flex-flow: row wrap;
+      gap: var(--calcite-spacing-sm, 8px);
+      justify-content: flex-start;
+
+      &.esri-sketch--vertical {
+        flex-flow: column wrap;
+        justify-content: flex-start;
+
+        &:dir(rtl) {
+          flex-flow: column wrap-reverse;
+        }
+
+        .esri-selection-toolbar__container {
+          flex-direction: column;
+        }
+      }
+    }
+
     > * {
       pointer-events: initial;
     }
 
-    &.esri-sketch-bar {
-      display: block;
+    &-bar {
+      flex-direction: column;
+      gap: 0;
       margin: 0;
       width: 100%;
+
+      &.esri-sketch--vertical {
+        flex-flow: row;
+      }
     }
 
     &:dir(rtl) {
       flex-flow: row-reverse wrap;
     }
 
-    &--vertical {
-      flex-flow: column wrap;
-      justify-content: flex-start;
-
-      &:dir(rtl) {
-        flex-flow: column wrap-reverse;
-      }
-
-      .esri-selection-toolbar__container {
-        flex-direction: column;
-      }
-    }
-
     &__popover-wrapper {
       inline-size: max-content;
       min-inline-size: 300px;
@@ -75,7 +83,7 @@
   }
 
   .esri-ui-top-right {
-    .esri-sketch {
+    .esri-sketch-pad {
       flex-flow: row-reverse wrap;
       justify-content: flex-start;
 
@@ -83,7 +91,7 @@
         flex-flow: row wrap;
       }
 
-      &--vertical {
+      &.esri-sketch--vertical {
         flex-flow: column wrap-reverse;
 
         &:dir(rtl) {
@@ -94,14 +102,14 @@
   }
 
   .esri-ui-bottom-right {
-    .esri-sketch {
+    .esri-sketch-pad {
       flex-flow: row-reverse wrap-reverse;
 
       &:dir(rtl) {
         flex-flow: row wrap-reverse;
       }
 
-      &--vertical {
+      &.esri-sketch--vertical {
         flex-flow: column-reverse wrap-reverse;
 
         &:dir(rtl) {
@@ -112,14 +120,14 @@
   }
 
   .esri-ui-bottom-left {
-    .esri-sketch {
+    .esri-sketch-pad {
       flex-flow: row wrap-reverse;
 
       &:dir(rtl) {
         flex-flow: row-reverse wrap-reverse;
       }
 
-      &--vertical {
+      &.esri-sketch--vertical {
         flex-flow: column-reverse wrap;
 
         &:dir(rtl) {