@arcgis/core 4.33.0-next.20250504 → 4.33.0-next.20250506

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

@@ -7,7 +7,7 @@
     display: flex;
     position: relative;
     flex-direction: column;
-    gap: $cap-spacing;
+    gap: var(--calcite-spacing-xxl);
     padding: var(--esri-widget-padding);
     width: $width;
     overflow: hidden;
@@ -31,15 +31,15 @@
 
       &__indicator {
         display: flex;
-        gap: $side-spacing--eighth;
+        gap: var(--calcite-spacing-px);
         align-items: center;
         justify-content: center;
-        margin-bottom: $cap-spacing--half;
+        margin-bottom: var(--calcite-spacing-xs);
       }
     }
 
     &__date-picker-container:not(:first-of-type) {
-      margin-top: $cap-spacing;
+      margin-top: var(--calcite-spacing-md);
     }
 
     &__date-picker {
@@ -50,10 +50,9 @@
     &__visualization {
       display: flex;
       flex-direction: column;
-      margin-top: $cap-spacing;
 
       &__select {
-        margin-bottom: $cap-spacing;
+        margin-bottom: var(--calcite-spacing-md);
       }
 
       &__config--hidden {
@@ -64,17 +63,15 @@
     &__threshold-config,
     &__duration-config,
     &__discrete-config {
+      --calcite-label-margin-bottom: 0;
+
       display: flex;
       flex-direction: column;
-      gap: $cap-spacing;
+      gap: var(--calcite-spacing-md);
 
       calcite-label {
         display: block;
 
-        // Don't make the labels full width so that one can't click in white space to focus elements.
-        width: max-content;
-        max-width: 100%;
-
         // Labels shouldn't really be focusable, but we had to make the color
         // picker label focusable with tabindex=-1 (not tabbable). Without it,
         // Safari does not include the label in FocusEvent.relatedTarget which
@@ -96,7 +93,6 @@
         // Fit slider content since default API slider doesn't do it for us.
         padding-top: $slider-thumb-size;
         padding-bottom: 25px;
-        padding-inline: $slider-thumb-size;
 
         .esri-slider__label,
         .esri-slider__tick-label {
@@ -117,6 +113,30 @@
           background: $border-color--active;
         }
       }
+
+      &__discrete-block {
+        --calcite-label-margin-bottom: 0;
+
+        display: flex;
+        flex-direction: column;
+      }
+
+      &__discrete-label {
+        opacity: var(--calcite-opacity-disabled);
+        margin-bottom: var(--calcite-spacing-xs);
+        width: 100%;
+        font-weight: $font-weight--medium;
+
+        &.expanded {
+          opacity: inherit;
+        }
+      }
+
+      /* nested discrete config inside threshold config */
+      .esri-shadow-cast__discrete-config {
+        gap: var(--calcite-spacing-xs);
+        padding: 0 var(--calcite-spacing-xs);
+      }
     }
 
     &__duration-config {
@@ -140,9 +160,9 @@
 
         // center horizontally and place it above the mouse pointer
         transform: translate(-50%, -100%);
-        margin-top: -$tooltip-arrow-size - $cap-spacing--third;
+        margin-top: -$tooltip-arrow-size - var(--calcite-spacing-xxs);
         background: $background-color;
-        padding: $cap-spacing--half $side-spacing--half;
+        padding: var(--calcite-spacing-xs) var(--calcite-spacing-sm);
         width: max-content;
 
         // Tooltip arrow