fix(slider): rename highlightPlacement to fillPlacement

packages/calcite-components/src/components.d.ts

@@ -3382,6 +3382,11 @@ export namespace Components {
         "label": string;
     }
     interface CalcitePagination {
+        /**
+          * Set a specified page as active.
+          * @param page
+         */
+        "goTo": (page: number | "start" | "end") => Promise<void>;
         /**
           * When `true`, number values are displayed with a group separator corresponding to the language and country format.
          */
@@ -4185,6 +4190,10 @@ export namespace Components {
           * When `true`, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled": boolean;
+        /**
+          * Used to configure where the fill is placed along the slider track in relation to the value handle.  Range mode will always display the fill between the min and max handles.
+         */
+        "fillPlacement": "start" | "none" | "end";
         /**
           * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
@@ -4197,10 +4206,6 @@ export namespace Components {
           * When `true`, indicates a histogram is present.
          */
         "hasHistogram": boolean;
-        /**
-          * Used to configure where the fill is placed along the slider track in relation to the value handle.  Range mode will always display the fill between the min and max handles.
-         */
-        "highlightPlacement": "start" | "none" | "end";
         /**
           * A list of the histogram's x,y coordinates within the component's `min` and `max`. Displays above the component's track.
           * @see [DataSeries](https://github.com/Esri/calcite-design-system/blob/main/src/components/graph/interfaces.ts#L5)
@@ -11765,6 +11770,10 @@ declare namespace LocalJSX {
           * When `true`, interaction is prevented and the component is displayed with lower opacity.
          */
         "disabled"?: boolean;
+        /**
+          * Used to configure where the fill is placed along the slider track in relation to the value handle.  Range mode will always display the fill between the min and max handles.
+         */
+        "fillPlacement"?: "start" | "none" | "end";
         /**
           * The `id` of the form that will be associated with the component.  When not set, the component will be associated with its ancestor form element, if any.
          */
@@ -11777,10 +11786,6 @@ declare namespace LocalJSX {
           * When `true`, indicates a histogram is present.
          */
         "hasHistogram"?: boolean;
-        /**
-          * Used to configure where the fill is placed along the slider track in relation to the value handle.  Range mode will always display the fill between the min and max handles.
-         */
-        "highlightPlacement"?: "start" | "none" | "end";
         /**
           * A list of the histogram's x,y coordinates within the component's `min` and `max`. Displays above the component's track.
           * @see [DataSeries](https://github.com/Esri/calcite-design-system/blob/main/src/components/graph/interfaces.ts#L5)

packages/calcite-components/src/components/slider/slider.e2e.ts

@@ -29,6 +29,10 @@ describe("calcite-slider", () => {
         propertyName: "hasHistogram",
         defaultValue: false,
       },
+      {
+        propertyName: "fillPlacement",
+        defaultValue: "start",
+      },
       {
         propertyName: "labelFormatter",
         defaultValue: undefined,

packages/calcite-components/src/components/slider/slider.tsx

@@ -77,6 +77,13 @@ export class Slider
   /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
   @Prop({ reflect: true }) disabled = false;
 
+  /**
+   * Used to configure where the fill is placed along the slider track in relation to the value handle.
+   *
+   * Range mode will always display the fill between the min and max handles.
+   */
+  @Prop({ reflect: true }) fillPlacement: "start" | "none" | "end" = "start";
+
   /**
    * The `id` of the form that will be associated with the component.
    *
@@ -92,13 +99,6 @@ export class Slider
   /** When `true`, indicates a histogram is present. */
   @Prop({ reflect: true, mutable: true }) hasHistogram = false;
 
-  /**
-   * Used to configure where the fill is placed along the slider track in relation to the value handle.
-   *
-   * Range mode will always display the fill between the min and max handles.
-   */
-  @Prop({ reflect: true }) highlightPlacement: "start" | "none" | "end" = "start";
-
   /**
    * A list of the histogram's x,y coordinates within the component's `min` and `max`. Displays above the component's track.
    *
@@ -296,14 +296,14 @@ export class Slider
         mirror,
       });
 
-    const { highlightPlacement } = this;
+    const { fillPlacement } = this;
     const trackRangePlacementStyles =
-      highlightPlacement === "none"
+      fillPlacement === "none"
         ? {
             left: `unset`,
             right: `unset`,
           }
-        : highlightPlacement === "end"
+        : fillPlacement === "end"
           ? {
               left: `${mirror ? minInterval : maxInterval}%`,
               right: `${mirror ? maxInterval : minInterval}%`,