@arcgis/core 5.1.0-next.53 → 5.1.0-next.55

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

@@ -65,8 +65,8 @@
   .esri-date-picker__day-item--header {
     border-top: $cell_border;
     background: $background-color--offset;
-    cursor: auto;
     font-weight: $font-weight__heading;
+    cursor: auto;
   }
 
   .esri-date-picker__day-item {
@@ -75,9 +75,9 @@
     justify-content: center;
     border-right: $cell_border;
     border-bottom: $cell_border;
-    cursor: pointer;
     width: 30px;
     height: 30px;
+    cursor: pointer;
   }
 
   .esri-date-picker__day-item:first-child {
@@ -107,16 +107,16 @@
 
   .esri-date-picker__year-picker-item {
     margin: 0 4px;
-    cursor: pointer;
     padding: $section_margin;
     color: $font-color;
+    cursor: pointer;
   }
 
   .esri-date-picker__day-item--selected,
   .esri-date-picker__year-picker-item--selected {
     background-color: $button-color;
-    cursor: auto;
     color: $button-color--inverse;
+    cursor: auto;
   }
 
   .esri-date-picker__input {

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

@@ -25,8 +25,8 @@
     }
 
     &__panel--error {
-      padding: 0 $side-spacing;
       animation: esri-fade-in 250ms ease-in-out;
+      padding: 0 $side-spacing;
     }
 
     &__container {

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

@@ -7,12 +7,12 @@
   bottom: 0;
   left: 0;
   flex-flow: column nowrap;
+  animation: esri-fade-in-up 250ms ease-in-out;
   border-top: solid 3px $contextColor;
   background-color: var(--calcite-color-background);
   padding-block: $cap-spacing;
   padding-inline: $side-spacing;
   max-height: 85%;
-  animation: esri-fade-in-up 250ms ease-in-out;
   color: $font-color;
 
   .esri-editor__prompt {
@@ -426,8 +426,8 @@
       }
 
       calcite-chip {
-        cursor: pointer;
         line-height: initial;
+        cursor: pointer;
       }
 
       &__item--preserved {

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

@@ -12,9 +12,9 @@
     --actions-spacing-v: #{$cap-spacing--half};
 
     position: relative;
+    container-type: inline-size;
     isolation: isolate;
     padding: var(--esri-widget-padding);
-    container-type: inline-size;
 
     &.esri-component.esri-widget--panel {
       width: var(--width);
@@ -165,8 +165,8 @@
     }
 
     &--disabled {
-      filter: grayscale(1);
       opacity: $opacity--disabled;
+      filter: grayscale(1);
     }
 
     &__color-indicator {

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

@@ -13,10 +13,10 @@
       justify-content: center;
       border: none;
       background: transparent;
-      cursor: pointer;
       padding-block: $cap-spacing--half;
       padding-inline: $side-spacing--half;
       color: $interactive-font-color;
+      cursor: pointer;
 
       &:hover,
       &:focus {

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

@@ -77,8 +77,8 @@
             display: flex;
             align-items: center;
             margin-inline-end: var(--calcite-spacing-md);
-            cursor: default;
             height: 100%;
+            cursor: default;
           }
         }
       }

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

@@ -240,8 +240,8 @@ $floor-filter-scrollbar-track--color: #fafafa;
 
       .esri-floor-filter__filter-menu-header-back:hover {
         background: $background-color--hover;
-        cursor: pointer;
         color: $interactive-font-color--hover;
+        cursor: pointer;
       }
 
       .esri-floor-filter__filter-menu-header-text-group {
@@ -280,8 +280,8 @@ $floor-filter-scrollbar-track--color: #fafafa;
 
       .esri-floor-filter__icon-close:hover {
         background: $background-color--hover;
-        cursor: pointer;
         color: $interactive-font-color--hover;
+        cursor: pointer;
       }
 
       .esri-floor-filter__filter-menu-search {

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

@@ -175,8 +175,8 @@
     // For all cells when a different row has invalid pending edits
     // Does not apply to 'valid' cells in the invalid row itself
     vaadin-grid::part(body-cell pending-edit-other) {
-      cursor: not-allowed;
       color: var(--calcite-color-text-3);
+      cursor: not-allowed;
     }
 
     vaadin-grid::part(selected-row-cell) {

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

@@ -10,10 +10,10 @@
   }
 
   .esri-grid-controls {
-    user-select: none;
     display: flex;
     flex-flow: column wrap;
     padding: var(--esri-widget-padding);
+    user-select: none;
 
     // Update spacing on LabeledSwitch to have the same padding
     // as other labeled elements in the form

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

@@ -35,8 +35,8 @@
   }
 
   .esri-item-list__list-item {
-    cursor: pointer;
     min-height: $list-item-height;
+    cursor: pointer;
 
     /* stylelint-disable-next-line order/order */
     @include icomoonIconSelector("&") {

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

@@ -417,9 +417,9 @@ $relationship_column_size: 85px;
       display: flex;
       align-items: center;
       justify-content: center;
-      cursor: pointer;
       width: $button-width--half;
       height: auto;
+      cursor: pointer;
     }
 
     .esri-legend--card__carousel-indicator::before {

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

@@ -21,8 +21,8 @@
 
     &__error,
     &__hint {
-      overflow: hidden;
       animation: esri-fade-in 250ms ease-in-out;
+      overflow: hidden;
 
       p {
         margin: 0;

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

@@ -215,8 +215,8 @@
       display: flex;
       flex-grow: 1;
       margin: 0;
-      cursor: url("data:text/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2226%22%20width%3D%2226%22%3E%0A%3Cpath%20stroke%3D%22%23000%22%20stroke-width%3D%221px%22%20fill%3D%22%23fff%22%20d%3D%22m15.3%2020.5s6.38-6.73%204.64-8.24-3.47%201.01-3.47%201.01%203.61-5.72%201.41-6.49c-2.2-0.769-3.33%204.36-3.33%204.36s0.873-5.76-1.06-5.76-1.58%205.39-1.58%205.39-0.574-4.59-2.18-4.12c-1.61%200.468-0.572%205.51-0.572%205.51s-1.58-4.89-2.93-3.79c-1.35%201.11%200.258%205.25%200.572%206.62%200.836%202.43%202.03%202.94%202.17%205.55%22%2F%3E%0A%3C%2Fsvg%3E%0A");
       width: 100%;
+      cursor: url("data:text/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2226%22%20width%3D%2226%22%3E%0A%3Cpath%20stroke%3D%22%23000%22%20stroke-width%3D%221px%22%20fill%3D%22%23fff%22%20d%3D%22m15.3%2020.5s6.38-6.73%204.64-8.24-3.47%201.01-3.47%201.01%203.61-5.72%201.41-6.49c-2.2-0.769-3.33%204.36-3.33%204.36s0.873-5.76-1.06-5.76-1.58%205.39-1.58%205.39-0.574-4.59-2.18-4.12c-1.61%200.468-0.572%205.51-0.572%205.51s-1.58-4.89-2.93-3.79c-1.35%201.11%200.258%205.25%200.572%206.62%200.836%202.43%202.03%202.94%202.17%205.55%22%2F%3E%0A%3C%2Fsvg%3E%0A");
 
       &--hidden {
         display: none;

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

@@ -9,12 +9,12 @@
     align-items: center;
     transform-style: preserve-3d;
     z-index: var(--calcite-z-index-overlay);
+    aspect-ratio: 1;
     width: 50%;
     max-width: 330px;
     overflow: hidden;
     pointer-events: none;
     translate: -50%;
-    aspect-ratio: 1;
 
     &__direction {
       --esri-oriented-imagery-viewer__navigation-ui-direction-color: rgb(245 222 179);
@@ -26,9 +26,9 @@
       transition: border-color 150ms ease;
       border: 3px solid #bfc5cc;
       border-radius: 50%;
-      cursor: not-allowed;
       width: 4.5em;
       height: 4.5em;
+      cursor: not-allowed;
 
       &:not([disabled]) {
         cursor: pointer;
@@ -44,9 +44,9 @@
       &-pad {
         box-sizing: border-box;
         transform: perspective(400px) rotateX(60deg);
+        filter: drop-shadow(0 2px 1px rgb(0 0 0 / 50%));
         width: 100%;
         height: 100%;
-        filter: drop-shadow(0 2px 1px rgb(0 0 0 / 50%));
       }
     }
   }

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

@@ -251,8 +251,8 @@
   // DOCKED
   .esri-popup--is-docked {
     inset: 0;
-    margin: $docked-margin $docked-margin $docked-margin--double $docked-margin;
     animation: esri-docking-animation 250ms ease-out;
+    margin: $docked-margin $docked-margin $docked-margin--double $docked-margin;
   }
 
   .esri-ui .esri-popup--is-docked {

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

@@ -69,11 +69,11 @@
     justify-content: center;
     margin: 0;
     border: 1px solid rgb(0 0 0 / 0%);
-    cursor: pointer;
     padding: 5px;
     width: 100%;
     text-align: center;
     color: $interactive-font-color;
+    cursor: pointer;
   }
 
   .esri-print__layout-tab:hover,
@@ -190,10 +190,10 @@
   .esri-print__advanced-options-button {
     border: none;
     background-color: transparent;
-    cursor: pointer;
     padding: $cap-spacing--half $side-spacing--half;
     width: 100%;
     font-family: inherit;
+    cursor: pointer;
   }
 
   .esri-print__advanced-options-button[aria-expanded="true"] .esri-print__advanced-options-button-icon--closed,
@@ -313,8 +313,8 @@
   }
 
   .esri-print__exported-file--error {
-    cursor: pointer;
     color: $font-color--error;
+    cursor: pointer;
   }
 
   .esri-print .esri-print__exported-file--error:hover {

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

@@ -5,8 +5,8 @@
 
   .esri-sketch {
     display: flex;
-    user-select: none;
     pointer-events: none;
+    user-select: none;
 
     &-pad {
       flex-flow: row wrap;

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

@@ -21,8 +21,8 @@
 
     &__error,
     &__hint {
-      overflow: hidden;
       animation: esri-fade-in 250ms ease-in-out;
+      overflow: hidden;
 
       p {
         margin: 0;

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

@@ -183,8 +183,8 @@
     transform-origin: 0 0;
     width: 100%;
     height: 100%;
-    will-change: transform;
     touch-action: none;
+    will-change: transform;
 
     &:hover {
       cursor: pointer;
@@ -245,9 +245,9 @@
       left: -$slider-thumb-offset--hover;
       border-width: 3px;
       border-color: $button-color--hover;
-      cursor: grab;
       width: $slider-thumb-size--hover;
       height: $slider-thumb-size--hover;
+      cursor: grab;
     }
   }
 
@@ -265,8 +265,8 @@
   .esri-slider__max--interactive,
   .esri-slider__min--interactive {
     &:hover {
-      cursor: pointer;
       text-decoration: underline;
+      cursor: pointer;
     }
   }
 

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

@@ -71,8 +71,8 @@
     border-radius: 2px;
     border-color: transparent;
     background-color: $background-color;
-    cursor: pointer;
     padding: 3px;
+    cursor: pointer;
   }
 
   .esri-snapping-controls__item-action-icon {
@@ -95,10 +95,10 @@
     opacity: 1;
     margin: 0;
     border: 1px solid transparent;
-    cursor: pointer;
     padding: $cap-spacing--half $side-spacing;
     width: 100%;
     font-size: $font-size--small;
+    cursor: pointer;
 
     .esri-snapping-controls__item-action-title {
       margin-left: 0;

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

@@ -22,11 +22,11 @@ $spinner_size: 24px;
     .esri-spinner::before {
       display: block;
       position: absolute;
+      animation: esri-spinner--rotate-animation 750ms linear infinite;
       margin: -50% 0 0 -50%;
       background: url("../base/images/Loading_Indicator_double_32.svg") no-repeat center;
       width: 100%;
       height: 100%;
-      animation: esri-spinner--rotate-animation 750ms linear infinite;
       content: "";
     }
 
@@ -37,9 +37,9 @@ $spinner_size: 24px;
 
     .esri-spinner--finish {
       display: block;
-      opacity: 1;
       animation: esri-spinner--finish-animation 125ms ease-in forwards;
       animation-delay: 75ms;
+      opacity: 1;
     }
   }
 }

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

@@ -32,14 +32,14 @@
 
   .esri-swipe--horizontal .esri-swipe__container {
     margin-left: -$button-width--half;
-    cursor: col-resize;
     height: 100%;
+    cursor: col-resize;
   }
 
   .esri-swipe--vertical .esri-swipe__container {
     margin-top: -$button-height--half;
-    cursor: row-resize;
     width: 100%;
+    cursor: row-resize;
   }
 
   .esri-swipe--disabled .esri-swipe__container {

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

@@ -43,6 +43,7 @@
         0 6px 20px -4px rgb(0 0 0 / 10%),
         0 4px 12px -2px rgb(0 0 0 / 8%); // Same as <calcite-alert>
 
+      backdrop-filter: blur(4px);
       background: rgb(255 255 255 / 80%);
       padding-block: var(--content-padding-block);
       padding-inline: var(--content-padding-inline);
@@ -50,7 +51,6 @@
       line-height: 1.1em;
       color: $font-color;
       font-size: var(--font-size);
-      backdrop-filter: blur(4px);
       touch-action: none;
       view-transition-name: tooltip-content;
 
@@ -89,9 +89,9 @@
       &--input {
         --field-height: var(--field-height--input);
 
+        backdrop-filter: none;
         background: var(--calcite-color-foreground-1);
         pointer-events: all;
-        backdrop-filter: none;
 
         // When the tooltip is in input mode but doesn't have focus in it, we reduce the opacity to
         // make easier for the user to understand that keyboard input is not going to the tooltip.

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

@@ -100,11 +100,11 @@
       bottom: 0;
       left: 0;
       flex-flow: column nowrap;
+      animation: esri-fade-in-up 100ms ease-in-out;
       border-top: solid 3px $border-color--subtle;
       background-color: var(--calcite-color-background);
       padding: $cap-spacing $side-spacing;
       max-height: 85%;
-      animation: esri-fade-in-up 100ms ease-in-out;
       color: $font-color;
     }
 

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

@@ -28,9 +28,9 @@
       left: var(--esri-video-player-controls-spacing);
       border: none;
       background: var(--calcite-color-border-1);
-      cursor: pointer;
       width: calc(100% - var(--esri-video-player-controls-spacing) * 2);
       height: var(--esri-video-player-progress-width);
+      cursor: pointer;
 
       &::-webkit-progress-bar {
         background-color: var(--calcite-color-border-3);
@@ -70,9 +70,9 @@
       column-gap: var(--esri-video-player-color-swatch-gap);
 
       .esri-video-player__color-block {
-        cursor: pointer;
         width: var(--esri-video-player-color-swatch-size);
         height: var(--esri-video-player-color-swatch-size);
+        cursor: pointer;
       }
 
       .esri-video-player__color-block__active {

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

@@ -98,10 +98,10 @@
       justify-content: center;
       border: none;
       background-color: transparent;
-      cursor: pointer;
       padding: 0;
       width: $header-button-width;
       color: $interactive-font-color;
+      cursor: pointer;
     }
   }
 
@@ -147,8 +147,8 @@
       margin: 0 $side-spacing--half;
       border: 0;
       background-color: transparent;
-      cursor: pointer;
       padding: $cap-spacing $side-spacing;
+      cursor: pointer;
 
       &:hover,
       &:focus {
@@ -192,8 +192,8 @@
     &__list-item {
       border-top: solid 1px $border-color;
       border-left: $border-size--active solid transparent;
-      cursor: pointer;
       padding: 0.8em 1em;
+      cursor: pointer;
 
       /* stylelint-disable-next-line order/order */
       @include icomoonIconSelector() {
@@ -310,7 +310,6 @@
       border 125ms ease-in-out;
     border: 1px solid $button-color;
     background-color: $button-color;
-    cursor: pointer;
     padding: $cap-spacing--half $side-spacing--half;
     width: 100%;
     min-height: $button-height;
@@ -320,6 +319,7 @@
     color: $button-color--inverse;
     font-family: inherit;
     font-size: $font-size;
+    cursor: pointer;
 
     &:hover {
       border: 1px solid $button-color--hover;
@@ -377,10 +377,10 @@
     border: none;
     border-radius: $border-radius;
     background-color: $background-color;
-    cursor: pointer;
     padding: $cap-spacing $side-spacing--half;
     text-align: unset;
     text-decoration: none;
+    cursor: pointer;
 
     &:hover,
     &:focus {
@@ -431,13 +431,13 @@
     border: 1px solid $border-color--input;
     border-radius: 0;
     background: url($select_caret) no-repeat right center $background-color;
-    cursor: pointer;
     padding: 0 0.5em;
     width: 100%;
     height: $button-height;
     color: $font-color;
     font-family: inherit;
     font-size: 0.85em;
+    cursor: pointer;
 
     &[disabled] {
       cursor: auto;
@@ -482,12 +482,12 @@
   .esri-widget__loader-animation {
     display: block;
     transform: translateZ(0);
+    animation: esri-rotate 1250ms infinite linear;
     border: 0.15em solid transparent;
     border-radius: 100%;
     border-color: rgba($font-color, 0.8) $border-color $border-color $border-color;
     width: 1em;
     height: 1em;
-    animation: esri-rotate 1250ms infinite linear;
     font-size: $spinning-loader-size;
   }
 
@@ -503,7 +503,6 @@
     transition: background-color 125ms ease-in-out;
     margin: 0;
     background-color: $background-color;
-    cursor: pointer;
     padding: 0;
     width: $button-width;
     height: $button-height;
@@ -511,6 +510,7 @@
     text-align: center;
     color: $interactive-font-color;
     font-size: $font-size;
+    cursor: pointer;
 
     // Make Calcite widget button's default background match all other widget
     // buttons, unless a custom appearance was specified