chore: update for 4.30

README.md

@@ -2,8 +2,9 @@
 
 This repository is used as a reference for the [ArcGIS Maps SDK for JavaScript](https://developers.arcgis.com/javascript/) widget styles documentation.
 
-If you are starting a new project, we recommend using [@arcgis/core](https://developers.arcgis.com/javascript/latest/es-modules/) ES modules.
+If you are starting a new project, we recommend using a local build with components or @arcgis/core. See the [Get started with npm](https://developers.arcgis.com/javascript/latest/get-started-npm/) guide topic for more information.
 
+**Looking for 3.x?** The ArcGIS for JavaScript 3.x has been retired. See the [retirement announcement](https://www.esri.com/arcgis-blog/products/js-api-arcgis/developers/arcgis-api-for-javascript-version-3-x-retirement/) for more information.
 
 ## Requirements
 

assets/esri/themes/base/widgets/_BasemapLayerList.scss

@@ -15,6 +15,22 @@
     margin-inline-start: 0.25rem;
   }
 
+  .esri-basemap-layer-list__item-catalog-icon {
+    margin-inline-end: 0;
+  }
+
+  .esri-basemap-layer-list__item-action-image {
+    @include layerListActionImage();
+  }
+
+  .esri-basemap-layer-list__action-menu .esri-basemap-layer-list__action-group {
+    display: none;
+  }
+
+  .esri-basemap-layer-list__action-menu[open] .esri-basemap-layer-list__action-group {
+    display: flex;
+  }
+
   .esri-basemap-layer-list__visible-icon {
     visibility: hidden;
   }
@@ -27,7 +43,7 @@
     }
   }
 
-  .esri-basemap-layer-list__item--invisible-at-scale {
+  .esri-basemap-layer-list__item--invisible {
     color: $interactive-font-color--disabled;
   }
 

assets/esri/themes/base/widgets/_BuildingDisciplinesTree.scss

@@ -41,6 +41,12 @@
     padding-bottom: $side-spacing--quarter;
     font-size: $font-size;
     font-weight: $font-weight--light;
+
+    span {
+      min-width: 0;
+      word-break: break-word;
+      text-wrap: pretty;
+    }
   }
 
   .#{$collapse-toggle} {

assets/esri/themes/base/widgets/_CatalogLayerList.scss

@@ -0,0 +1,103 @@
+@mixin catalogLayerList() {
+  .esri-catalog-layer-list {
+    display: flex;
+  }
+
+  .esri-catalog-layer-list__filter-no-results {
+    @include layerListFilterNoResults();
+  }
+
+  .esri-catalog-layer-list__item {
+    --calcite-list-item-spacing-indent: 2rem;
+    --calcite-list-item-icon-center: 8.5px;
+  }
+
+  .esri-catalog-layer-list__item-temporary-icon {
+    margin-inline-start: 0.25rem;
+  }
+
+  .esri-catalog-layer-list__item-table-icon {
+    margin-inline-end: 0;
+  }
+
+  .esri-catalog-layer-list__item-action-image {
+    @include layerListActionImage();
+  }
+
+  .esri-catalog-layer-list__action-menu .esri-catalog-layer-list__action-group {
+    display: none;
+  }
+
+  .esri-catalog-layer-list__action-menu[open] .esri-catalog-layer-list__action-group {
+    display: flex;
+  }
+
+  .esri-catalog-layer-list__visible-icon {
+    visibility: hidden;
+  }
+
+  .esri-catalog-layer-list__item--active:hover,
+  .esri-catalog-layer-list__item--active:focus,
+  .esri-catalog-layer-list__item--active:focus-within {
+    > .esri-catalog-layer-list__visible-toggle > .esri-catalog-layer-list__visible-icon {
+      visibility: visible;
+    }
+  }
+
+  .esri-catalog-layer-list__item--invisible {
+    color: $interactive-font-color--disabled;
+  }
+
+  .esri-catalog-layer-list__status-indicator {
+    @include layerListStatusIndicator();
+  }
+
+  .esri-catalog-layer-list__publishing {
+    @include layerListPublishingIndicator();
+
+    transform-origin: var(--calcite-list-item-icon-center) var(--calcite-list-item-icon-center);
+    animation: esri-catalog-layer-list__publishing-anim 2s normal infinite;
+  }
+
+  .esri-catalog-layer-list__updating {
+    @include layerListUpdatingIndicator();
+
+    animation: esri-catalog-layer-list__updating-anim 2s normal infinite;
+  }
+
+  .esri-catalog-layer-list__connection-status {
+    @include layerListConnectionStatus();
+  }
+
+  .esri-catalog-layer-list__connection-status--connected {
+    color: $connection-connected;
+  }
+
+  .esri-catalog-layer-list__item-content {
+    @include layerListItemContent();
+  }
+
+  .esri-catalog-layer-list__item-content-bottom {
+    @include layerListContentBottom();
+  }
+
+  .esri-catalog-layer-list__item-content-bottom .esri-legend__service {
+    @include layerListLegend();
+  }
+
+  .esri-catalog-layer-list__item-message {
+    @include layerListContentBottom();
+  }
+
+  @keyframes esri-catalog-layer-list__updating-anim {
+    @include layerListUpdating();
+  }
+
+  @keyframes esri-catalog-layer-list__publishing-anim {
+    @include layerListPublishing();
+  }
+}
+
+@if $include_CatalogLayerList == true {
+  @include catalogLayerList();
+}

assets/esri/themes/base/widgets/_ColorPicker.scss

@@ -49,24 +49,7 @@
     }
 
     &__popover {
-      @include defaultBoxShadow();
-
-      background: var(--calcite-color-foreground-1); //  match color picker background
-      width: 272px; // calcite-color-picker may not render immediately, so we make sure we have the right width right away.
-      max-height: 70vh;
-      overflow: hidden auto;
-    }
-
-    &__opacity-slider-container {
-      padding: $cap-spacing $side-spacing;
-    }
-
-    &__opacity-slider {
-      margin-inline: 8px; // Align slider handles
-    }
-
-    &__calcite-color-picker {
-      --calcite-color-border-1: transparent;
+      --calcite-color-border-1: none;
     }
   }
 }

assets/esri/themes/base/widgets/_CoordinateConversion.scss

@@ -55,26 +55,6 @@
     background-color: $background-color--hover;
   }
 
-  .esri-coordinate-conversion__button {
-    border-color: $interactive-font-color;
-    background-color: $background-color;
-    width: auto;
-    min-width: 30%;
-    max-width: 50%;
-    color: $interactive-font-color;
-  }
-
-  .esri-coordinate-conversion__convert-button-span {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .esri-coordinate-conversion__button:hover {
-    border-color: $interactive-font-color;
-    background-color: $interactive-font-color;
-    color: $background-color;
-  }
-
   .esri-coordinate-conversion__input-group {
     display: flex;
     align-items: center;
@@ -89,18 +69,12 @@
   }
 
   .esri-coordinate-conversion .esri-coordinate-conversion__input-coordinate[type="text"] {
+    flex: 1;
     margin: 0;
-    border: 1px solid $border-color;
-    padding: 0 0.5em;
-    width: 100%;
     height: 2em;
     font-size: $font-size--small;
   }
 
-  .esri-coordinate-conversion__input-coordinate--rejected {
-    text-decoration: underline red;
-  }
-
   .esri-coordinate-conversion__settings {
     display: flex;
     flex-direction: column;
@@ -161,9 +135,7 @@
   }
 
   .esri-coordinate-conversion__pattern-input {
-    padding: 4px;
     width: 100%;
-    height: $button-height;
   }
 
   .esri-coordinate-conversion__tools {
@@ -173,21 +145,12 @@
     padding: 0;
   }
 
-  .esri-coordinate-conversion__select-primary {
-    margin: 0;
-    padding: 0 2.5em 0 0.5em;
-    width: auto;
-    font-size: inherit;
+  .esri-coordinate-conversion__select-row {
+    text-align-last: center;
   }
 
-  .esri-coordinate-conversion__select-row {
-    flex: 0 0 75px;
-    margin: 0;
-    background: $background-color;
-    padding: 0 0.5em;
-    height: 2em;
+  .esri-coordinate-conversion__input-select {
     text-align-last: center;
-    font-size: inherit;
   }
 
   .esri-coordinate-conversion__conversions-view {
@@ -233,16 +196,6 @@
     .esri-widget__heading {
       margin: 0 auto;
     }
-
-    .esri-coordinate-conversion__back-button {
-      position: absolute;
-      margin-inline-start: 0;
-      background-color: $background-color--offset;
-
-      &:hover {
-        background-color: $background-color;
-      }
-    }
   }
 
   .esri-coordinate-conversion__popup {

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

@@ -36,21 +36,11 @@
       justify-content: space-between;
     }
 
-    .esri-date-picker,
+    &__date-picker,
     &__season-picker {
       flex-grow: 1;
     }
 
-    .esri-date-picker__calendar-toggle {
-      height: 32px;
-      font-size: $font-size--small;
-    }
-
-    &__container--disabled .esri-date-picker {
-      opacity: $opacity--disabled;
-      pointer-events: none;
-    }
-
     &__play-pause-button {
       flex: 0;
     }
@@ -75,7 +65,7 @@
     }
 
     .esri-slider.esri-slider--horizontal {
-      z-index: 1;
+      z-index: 2; // Ensure the timezone popover stays on top of the date picker (which has a z-index=1) - #60677
 
       .esri-slider-with-dropdown__box {
         display: flex;
@@ -102,10 +92,6 @@
           font-variant-numeric: tabular-nums;
         }
 
-        .esri-slider__tick-label {
-          line-height: 1em;
-        }
-
         .esri-slider__label-input {
           display: inline-block;
         }

assets/esri/themes/base/widgets/_Directions.scss

@@ -10,6 +10,8 @@
   }
 
   .esri-directions__panel-content {
+    display: flex;
+    flex-flow: column;
     padding: $cap-spacing 0;
   }
 
@@ -33,10 +35,14 @@
   .esri-directions__travel-modes,
   .esri-directions__departure-time {
     display: flex;
-    flex-direction: column;
     align-items: center;
     padding-inline: $side-spacing;
-    width: 100%;
+  }
+
+  .esri-directions__travel-modes .esri-select,
+  .esri-directions__departure-time .esri-select {
+    flex: 1 0 auto;
+    width: auto;
   }
 
   .esri-directions__panel-content--sign-in,
@@ -87,7 +93,6 @@
 
     display: flex;
     flex-direction: column;
-    width: 100%;
   }
 
   .esri-directions__departure-date-time-pickers {
@@ -435,7 +440,6 @@
       align-items: center;
       margin-top: 12px;
       padding-inline: 15px;
-      width: 100%;
     }
 
     &__save-buttons,

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

@@ -156,6 +156,7 @@
       flex-direction: row;
       border-bottom: var(--divider-border);
       background-color: var(--calcite-color-foreground-1);
+      overflow-wrap: anywhere;
     }
 
     &__settings {
@@ -173,6 +174,10 @@
       margin-bottom: $cap-spacing;
     }
 
+    .esri-snapping-controls__layer-list {
+      max-height: 220px;
+    }
+
     // ---------------------------------------------------------------------------------------------
     // Panel Content
     // ---------------------------------------------------------------------------------------------