@esri/calcite-components 1.0.0-next.421 → 1.0.0-next.424

package/dist/custom-elements/index.js

@@ -11445,20 +11445,23 @@ const DatePickerMonthHeader = class extends HTMLElement$1 {
      * Increment year on UP/DOWN keys
      */
     this.onYearKey = (e) => {
-      const year = e.target.value;
+      const localizedYear = e.target.value;
       switch (e.key) {
         case "ArrowDown":
           e.preventDefault();
-          this.setYear(year, -1);
+          this.setYear({ localizedYear, offset: -1 });
           break;
         case "ArrowUp":
           e.preventDefault();
-          this.setYear(year, 1);
+          this.setYear({ localizedYear, offset: 1 });
           break;
       }
     };
-    this.yearChanged = (event) => {
-      this.setYear(event.target.value);
+    this.onYearChange = (event) => {
+      this.setYear({ localizedYear: event.target.value });
+    };
+    this.onYearInput = (event) => {
+      this.setYear({ localizedYear: event.target.value, commit: false });
     };
     this.prevMonthClick = (e) => {
       this.handleArrowClick(e, this.prevMonthDate);
@@ -11514,7 +11517,7 @@ const DatePickerMonthHeader = class extends HTMLElement$1 {
     return (h(Fragment, null, h("a", { "aria-disabled": (this.prevMonthDate.getMonth() === activeMonth).toString(), "aria-label": this.intlPrevMonth, class: "chevron", href: "#", onClick: this.prevMonthClick, onKeyDown: this.prevMonthKeydown, role: "button", tabindex: this.prevMonthDate.getMonth() === activeMonth ? -1 : 0 }, h("calcite-icon", { "flip-rtl": true, icon: "chevron-left", scale: iconScale })), h("div", { class: { text: true, "text--reverse": reverse } }, h(Heading, { class: "month", level: this.headingLevel }, localizedMonth), h("span", { class: "year-wrap" }, h("input", { "aria-label": this.intlYear, class: {
         year: true,
         "year--suffix": !!suffix
-      }, inputmode: "numeric", maxlength: "4", minlength: "1", onInput: this.yearChanged, onKeyDown: this.onYearKey, pattern: "\\d*", ref: (el) => (this.yearInput = el), type: "text", value: localizedYear }), suffix && (h("span", { class: "suffix" }, h("span", { "aria-hidden": "true", class: "suffix__invisible" }, localizedYear), " " + suffix)))), h("a", { "aria-disabled": (this.nextMonthDate.getMonth() === activeMonth).toString(), "aria-label": this.intlNextMonth, class: "chevron", href: "#", onClick: this.nextMonthClick, onKeyDown: this.nextMonthKeydown, role: "button", tabindex: this.nextMonthDate.getMonth() === activeMonth ? -1 : 0 }, h("calcite-icon", { "flip-rtl": true, icon: "chevron-right", scale: iconScale }))));
+      }, inputmode: "numeric", maxlength: "4", minlength: "1", onChange: this.onYearChange, onInput: this.onYearInput, onKeyDown: this.onYearKey, pattern: "\\d*", ref: (el) => (this.yearInput = el), type: "text", value: localizedYear }), suffix && (h("span", { class: "suffix" }, h("span", { "aria-hidden": "true", class: "suffix__invisible" }, localizedYear), " " + suffix)))), h("a", { "aria-disabled": (this.nextMonthDate.getMonth() === activeMonth).toString(), "aria-label": this.intlNextMonth, class: "chevron", href: "#", onClick: this.nextMonthClick, onKeyDown: this.nextMonthKeydown, role: "button", tabindex: this.nextMonthDate.getMonth() === activeMonth ? -1 : 0 }, h("calcite-icon", { "flip-rtl": true, icon: "chevron-right", scale: iconScale }))));
   }
   setNextPrevMonthDates() {
     if (!this.activeDate) {
@@ -11523,27 +11526,32 @@ const DatePickerMonthHeader = class extends HTMLElement$1 {
     this.nextMonthDate = dateFromRange(nextMonth(this.activeDate), this.min, this.max);
     this.prevMonthDate = dateFromRange(prevMonth(this.activeDate), this.min, this.max);
   }
-  /**
-   * Parse localized year string from input,
-   * set to active if in range
-   */
-  setYear(localizedYear, increment = 0) {
-    const { min, max, activeDate, localeData, yearInput } = this;
+  getInRangeDate({ localizedYear, offset = 0 }) {
+    const { min, max, activeDate, localeData } = this;
     const parsedYear = parseNumber(localizedYear, localeData);
     const length = parsedYear.toString().length;
-    const year = isNaN(parsedYear) ? false : parsedYear + increment;
+    const year = isNaN(parsedYear) ? false : parsedYear + offset;
     const inRange = year && (!min || min.getFullYear() <= year) && (!max || max.getFullYear() >= year);
-    // if you've supplied a year and it's in range, update active date
+    // if you've supplied a year and it's in range
     if (year && inRange && length === localizedYear.length) {
       const nextDate = new Date(activeDate);
       nextDate.setFullYear(year);
-      const inRangeDate = dateFromRange(nextDate, min, max);
+      return dateFromRange(nextDate, min, max);
+    }
+  }
+  /**
+   * Parse localized year string from input,
+   * set to active if in range
+   */
+  setYear({ localizedYear, commit = true, offset = 0 }) {
+    const { yearInput, activeDate, localeData } = this;
+    const inRangeDate = this.getInRangeDate({ localizedYear, offset });
+    // if you've supplied a year and it's in range, update active date
+    if (inRangeDate) {
       this.calciteDatePickerSelect.emit(inRangeDate);
-      yearInput.value = localizeNumber(inRangeDate.getFullYear(), localeData);
     }
-    else {
-      // leave the current active date and clean up garbage input
-      yearInput.value = localizeNumber(activeDate.getFullYear(), localeData);
+    if (commit) {
+      yearInput.value = localizeNumber((inRangeDate || activeDate).getFullYear(), localeData);
     }
   }
   get el() { return this; }
@@ -13707,7 +13715,7 @@ const Input = class extends HTMLElement$1 {
   static get style() { return inputCss; }
 };
 
-const inputDatePickerCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:host{--calcite-icon-size:1rem;--calcite-spacing-eighth:0.125rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{position:relative;display:inline-block;width:100%;overflow:visible;vertical-align:top;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.calendar-picker-wrapper{position:static;width:100%;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.input-wrapper{position:relative}:host([range]) .input-container{display:-ms-flexbox;display:flex}:host([range]) .input-wrapper{-ms-flex:1 1 auto;flex:1 1 auto}:host([range]) .horizontal-arrow-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border-width:1px;border-left-width:0px;border-right-width:0px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-background);padding-top:0px;padding-bottom:0px;padding-left:0.25rem;padding-right:0.25rem}:host([range][layout=vertical]) .input-wrapper{width:100%}:host([range][layout=vertical]) .input-container{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}:host([range][layout=vertical]) .calendar-picker-wrapper--end{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}:host([range][layout=vertical]) .vertical-arrow-container{top:1.5rem;position:absolute;left:0px;z-index:10;margin-left:1px;margin-right:1px;background-color:var(--calcite-ui-foreground-1);padding-left:0.625rem;padding-right:0.625rem}:host([scale=s][range]:not([layout=vertical])) .calendar-picker-wrapper{width:216px}:host([scale=m][range]:not([layout=vertical])) .calendar-picker-wrapper{width:286px}:host([scale=l][range]:not([layout=vertical])) .calendar-picker-wrapper{width:398px}.menu-container{display:block;position:absolute;z-index:900;-webkit-transform:scale(0);transform:scale(0);visibility:hidden;pointer-events:none}.menu-container .calcite-popper-anim{position:relative;z-index:1;-webkit-transition:var(--calcite-popper-transition);transition:var(--calcite-popper-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);border-radius:0.25rem}.menu-container[data-popper-placement^=bottom] .calcite-popper-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}.menu-container[data-popper-placement^=top] .calcite-popper-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}.menu-container[data-popper-placement^=left] .calcite-popper-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}.menu-container[data-popper-placement^=right] .calcite-popper-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}.menu-container[data-popper-placement] .calcite-popper-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}.menu-container--active .menu-container .calcite-popper-anim{position:relative;z-index:1;-webkit-transition:var(--calcite-popper-transition);transition:var(--calcite-popper-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);border-radius:0.25rem}.menu-container--active .menu-container[data-popper-placement^=bottom] .calcite-popper-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}.menu-container--active .menu-container[data-popper-placement^=top] .calcite-popper-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}.menu-container--active .menu-container[data-popper-placement^=left] .calcite-popper-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}.menu-container--active .menu-container[data-popper-placement^=right] .calcite-popper-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}.menu-container--active .menu-container[data-popper-placement] .calcite-popper-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}.input .calcite-input__wrapper{margin-top:0px}:host([range][layout=vertical][scale=m]) .vertical-arrow-container{top:1.5rem;padding-left:0.75rem}:host([range][layout=vertical][scale=m]) .vertical-arrow-container calcite-icon{height:0.75rem;width:0.75rem;min-width:0px}:host([range][layout=vertical][scale=l]) .vertical-arrow-container{top:2.25rem;padding-left:0.875rem;padding-right:0.875rem}:host([range][layout=vertical][active]) .vertical-arrow-container{display:none}::slotted(input[slot=hidden-form-input]){bottom:0 !important;left:0 !important;margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;right:0 !important;top:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
+const inputDatePickerCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:host{--calcite-icon-size:1rem;--calcite-spacing-eighth:0.125rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{position:relative;display:inline-block;width:100%;overflow:visible;vertical-align:top;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.calendar-picker-wrapper{position:static;width:100%;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.input-wrapper{position:relative}:host([range]) .input-container{display:-ms-flexbox;display:flex}:host([range]) .input-wrapper{-ms-flex:1 1 auto;flex:1 1 auto}:host([range]) .horizontal-arrow-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;border-width:1px;border-left-width:0px;border-right-width:0px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-background);padding-top:0px;padding-bottom:0px;padding-left:0.25rem;padding-right:0.25rem}:host([range][layout=vertical]) .input-wrapper{width:100%}:host([range][layout=vertical]) .input-container{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}:host([range][layout=vertical]) .calendar-picker-wrapper--end{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}:host([range][layout=vertical]) .vertical-arrow-container{top:1.5rem;position:absolute;left:0px;z-index:10;margin-left:1px;margin-right:1px;background-color:var(--calcite-ui-foreground-1);padding-left:0.625rem;padding-right:0.625rem}:host([scale=s][range]:not([layout=vertical])) .calendar-picker-wrapper{width:216px}:host([scale=m][range]:not([layout=vertical])) .calendar-picker-wrapper{width:286px}:host([scale=l][range]:not([layout=vertical])) .calendar-picker-wrapper{width:398px}.menu-container{display:block;position:absolute;z-index:900;-webkit-transform:scale(0);transform:scale(0);visibility:hidden;pointer-events:none}.menu-container .calcite-popper-anim{position:relative;z-index:1;-webkit-transition:var(--calcite-popper-transition);transition:var(--calcite-popper-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);border-radius:0.25rem}.menu-container[data-popper-placement^=bottom] .calcite-popper-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}.menu-container[data-popper-placement^=top] .calcite-popper-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}.menu-container[data-popper-placement^=left] .calcite-popper-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}.menu-container[data-popper-placement^=right] .calcite-popper-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}.menu-container[data-popper-placement] .calcite-popper-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}:host([active]) .menu-container{pointer-events:initial;visibility:visible}.menu-container--active .menu-container .calcite-popper-anim{position:relative;z-index:1;-webkit-transition:var(--calcite-popper-transition);transition:var(--calcite-popper-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);border-radius:0.25rem}.menu-container--active .menu-container[data-popper-placement^=bottom] .calcite-popper-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}.menu-container--active .menu-container[data-popper-placement^=top] .calcite-popper-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}.menu-container--active .menu-container[data-popper-placement^=left] .calcite-popper-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}.menu-container--active .menu-container[data-popper-placement^=right] .calcite-popper-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}.menu-container--active .menu-container[data-popper-placement] .calcite-popper-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}.input .calcite-input__wrapper{margin-top:0px}:host([range][layout=vertical][scale=m]) .vertical-arrow-container{top:1.5rem;padding-left:0.75rem}:host([range][layout=vertical][scale=m]) .vertical-arrow-container calcite-icon{height:0.75rem;width:0.75rem;min-width:0px}:host([range][layout=vertical][scale=l]) .vertical-arrow-container{top:2.25rem;padding-left:0.875rem;padding-right:0.875rem}:host([range][layout=vertical][active]) .vertical-arrow-container{display:none}::slotted(input[slot=hidden-form-input]){bottom:0 !important;left:0 !important;margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;right:0 !important;top:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
 
 const InputDatePicker = class extends HTMLElement$1 {
   constructor() {
@@ -13746,6 +13754,11 @@ const InputDatePicker = class extends HTMLElement$1 {
     this.locale = document.documentElement.lang || "en";
     /** specify the scale of the date picker */
     this.scale = "m";
+    /**
+     * Determines where the date-picker component will be positioned relative to the input.
+     * @default "bottom-leading"
+     */
+    this.placement = defaultMenuPlacement;
     /** Range mode activation */
     this.range = false;
     /**
@@ -13898,13 +13911,13 @@ const InputDatePicker = class extends HTMLElement$1 {
   }
   /** Updates the position of the component. */
   async reposition() {
-    const { popper, menuEl } = this;
+    const { placement, popper, menuEl } = this;
     const modifiers = this.getModifiers();
     popper
       ? await updatePopper({
         el: menuEl,
         modifiers,
-        placement: defaultMenuPlacement,
+        placement,
         popper
       })
       : this.createPopper();
@@ -14008,7 +14021,7 @@ const InputDatePicker = class extends HTMLElement$1 {
   }
   createPopper() {
     this.destroyPopper();
-    const { menuEl, referenceEl, overlayPositioning } = this;
+    const { menuEl, placement, referenceEl, overlayPositioning } = this;
     if (!menuEl || !referenceEl) {
       return;
     }
@@ -14017,7 +14030,7 @@ const InputDatePicker = class extends HTMLElement$1 {
       el: menuEl,
       modifiers,
       overlayPositioning,
-      placement: defaultMenuPlacement,
+      placement,
       referenceEl
     });
   }
@@ -14440,6 +14453,11 @@ const InputTimePicker = class extends HTMLElement$1 {
     this.required = false;
     /** The scale (size) of the time input */
     this.scale = "m";
+    /**
+     * Determines where the popover will be positioned relative to the input.
+     * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)
+     */
+    this.placement = "auto";
     /** number (seconds) that specifies the granularity that the value must adhere to */
     this.step = 60;
     /** The selected time in UTC (always 24-hour format) */
@@ -14613,7 +14631,7 @@ const InputTimePicker = class extends HTMLElement$1 {
   // --------------------------------------------------------------------------
   render() {
     const popoverId = `${this.referenceElementId}-popover`;
-    return (h(Host, null, h("div", { "aria-controls": popoverId, "aria-haspopup": "dialog", "aria-label": this.name, "aria-owns": popoverId, id: this.referenceElementId, role: "combobox" }, h("calcite-input", { disabled: this.disabled, icon: "clock", label: getLabelText(this), onCalciteInputBlur: this.calciteInputBlurHandler, onCalciteInputFocus: this.calciteInputFocusHandler, onCalciteInputInput: this.calciteInputInputHandler, ref: this.setCalciteInputEl, scale: this.scale, step: this.step })), h("calcite-popover", { id: popoverId, label: "Time Picker", open: this.active, referenceElement: this.referenceElementId }, h("calcite-time-picker", { intlHour: this.intlHour, intlHourDown: this.intlHourDown, intlHourUp: this.intlHourUp, intlMeridiem: this.intlMeridiem, intlMeridiemDown: this.intlMeridiemDown, intlMeridiemUp: this.intlMeridiemUp, intlMinute: this.intlMinute, intlMinuteDown: this.intlMinuteDown, intlMinuteUp: this.intlMinuteUp, intlSecond: this.intlSecond, intlSecondDown: this.intlSecondDown, intlSecondUp: this.intlSecondUp, lang: this.locale, onCalciteTimePickerChange: this.timePickerChangeHandler, ref: this.setCalciteTimePickerEl, scale: this.scale, step: this.step, value: this.value })), h(HiddenFormInputSlot, { component: this })));
+    return (h(Host, null, h("div", { "aria-controls": popoverId, "aria-haspopup": "dialog", "aria-label": this.name, "aria-owns": popoverId, id: this.referenceElementId, role: "combobox" }, h("calcite-input", { disabled: this.disabled, icon: "clock", label: getLabelText(this), onCalciteInputBlur: this.calciteInputBlurHandler, onCalciteInputFocus: this.calciteInputFocusHandler, onCalciteInputInput: this.calciteInputInputHandler, ref: this.setCalciteInputEl, scale: this.scale, step: this.step })), h("calcite-popover", { id: popoverId, label: "Time Picker", open: this.active, placement: this.placement, referenceElement: this.referenceElementId }, h("calcite-time-picker", { intlHour: this.intlHour, intlHourDown: this.intlHourDown, intlHourUp: this.intlHourUp, intlMeridiem: this.intlMeridiem, intlMeridiemDown: this.intlMeridiemDown, intlMeridiemUp: this.intlMeridiemUp, intlMinute: this.intlMinute, intlMinuteDown: this.intlMinuteDown, intlMinuteUp: this.intlMinuteUp, intlSecond: this.intlSecond, intlSecondDown: this.intlSecondDown, intlSecondUp: this.intlSecondUp, lang: this.locale, onCalciteTimePickerChange: this.timePickerChangeHandler, ref: this.setCalciteTimePickerEl, scale: this.scale, step: this.step, value: this.value })), h(HiddenFormInputSlot, { component: this })));
   }
   get el() { return this; }
   static get watchers() { return {
@@ -18468,6 +18486,9 @@ const ShellPanel = class extends HTMLElement$1 {
 
 const sliderCss = "@charset \"UTF-8\";@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}.calcite-animate{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-popper-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}.scale--s{--calcite-slider-handle-size:10px;--calcite-slider-handle-extension-height:6.5px;--calcite-slider-container-font-size:var(--calcite-font-size--3)}.scale--s .handle__label,.scale--s .tick__label{line-height:.75rem}.scale--m{--calcite-slider-handle-size:14px;--calcite-slider-handle-extension-height:8px;--calcite-slider-container-font-size:var(--calcite-font-size--2)}.scale--m .handle__label,.scale--m .tick__label{line-height:1rem}.scale--l{--calcite-slider-handle-size:16px;--calcite-slider-handle-extension-height:10.5px;--calcite-slider-container-font-size:var(--calcite-font-size--1)}.scale--l .handle__label,.scale--l .tick__label{line-height:1rem}.handle__label,.tick__label{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-2);font-size:var(--calcite-slider-container-font-size)}:host{display:block}.container{position:relative;display:block;padding:calc(var(--calcite-slider-handle-size) * 0.5);margin:calc(var(--calcite-slider-handle-size) * 0.5) 0;--calcite-slider-full-handle-height:calc(\n    var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height)\n  )}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) .track__range,:host([disabled]) .tick--active{background-color:var(--calcite-ui-text-3)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-6px}.scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-8px}.scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-9px}:host([precise]:not([has-histogram])) .container .thumb--value{--calcite-slider-thumb-y-offset:calc(var(--calcite-slider-full-handle-height) * -1)}.thumb-container{position:relative;max-width:100%}.thumb{--calcite-slider-thumb-x-offset:calc(var(--calcite-slider-handle-size) * 0.5);position:absolute;margin:0px;display:-ms-flexbox;display:flex;cursor:pointer;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;border-style:none;background-color:transparent;padding:0px;font-family:inherit;outline:2px solid transparent;outline-offset:2px;-webkit-transform:translate(var(--calcite-slider-thumb-x-offset), var(--calcite-slider-thumb-y-offset));transform:translate(var(--calcite-slider-thumb-x-offset), var(--calcite-slider-thumb-y-offset))}.thumb .handle__label.static,.thumb .handle__label.transformed{position:absolute;top:0px;bottom:0px;opacity:0}.thumb .handle__label.hyphen::after{content:\"—\";display:inline-block;width:1em}.thumb .handle__label.hyphen--wrap{display:-ms-flexbox;display:flex}.thumb .handle{-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:9999px;background-color:var(--calcite-ui-foreground-1);outline-offset:0;outline-color:transparent;-webkit-transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;transition:outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;height:var(--calcite-slider-handle-size);width:var(--calcite-slider-handle-size);-webkit-box-shadow:0 0 0 2px var(--calcite-ui-text-3) inset;box-shadow:0 0 0 2px var(--calcite-ui-text-3) inset;-webkit-transition:border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, -webkit-box-shadow var(--calcite-animation-timing) ease;transition:border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, -webkit-box-shadow var(--calcite-animation-timing) ease;transition:border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, box-shadow var(--calcite-animation-timing) ease;transition:border var(--calcite-internal-animation-timing-medium) ease, background-color var(--calcite-internal-animation-timing-medium) ease, box-shadow var(--calcite-animation-timing) ease, -webkit-box-shadow var(--calcite-animation-timing) ease}.thumb .handle-extension{width:0.125rem;height:var(--calcite-slider-handle-extension-height);background-color:var(--calcite-ui-text-3)}.thumb:hover .handle{-webkit-box-shadow:0 0 0 3px var(--calcite-ui-brand) inset;box-shadow:0 0 0 3px var(--calcite-ui-brand) inset}.thumb:hover .handle-extension{background-color:var(--calcite-ui-brand)}.thumb:focus .handle{outline:2px solid var(--calcite-ui-brand);outline-offset:2px}.thumb:focus .handle-extension{background-color:var(--calcite-ui-brand)}.thumb.thumb--minValue{-webkit-transform:translate(calc(var(--calcite-slider-thumb-x-offset) * -1), var(--calcite-slider-thumb-y-offset));transform:translate(calc(var(--calcite-slider-thumb-x-offset) * -1), var(--calcite-slider-thumb-y-offset))}.thumb.thumb--precise{--calcite-slider-thumb-y-offset:-2px}:host([label-handles]) .thumb{--calcite-slider-thumb-x-offset:50%}:host([label-handles]):host(:not([has-histogram])) .scale--s .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-23px}:host([label-handles]):host(:not([has-histogram])) .scale--m .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-30px}:host([label-handles]):host(:not([has-histogram])) .scale--l .thumb:not(.thumb--precise){--calcite-slider-thumb-y-offset:-32px}:host([has-histogram][label-handles]) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--minValue.thumb--precise .handle__label{margin-top:0.5em}:host(:not([has-histogram]):not([precise])) .handle__label,:host([label-handles]:not([has-histogram])) .thumb--value .handle__label{margin-bottom:0.5em}:host([label-handles][precise]):host(:not([has-histogram])) .scale--s .thumb--value{--calcite-slider-thumb-y-offset:-33px}:host([label-handles][precise]):host(:not([has-histogram])) .scale--m .thumb--value{--calcite-slider-thumb-y-offset:-44px}:host([label-handles][precise]):host(:not([has-histogram])) .scale--l .thumb--value{--calcite-slider-thumb-y-offset:-49px}.thumb:focus .handle,.thumb--active .handle{background-color:var(--calcite-ui-brand);-webkit-box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 8px 0 rgba(0, 0, 0, 0.16)}.thumb:hover.thumb--precise:after,.thumb:focus.thumb--precise:after,.thumb--active.thumb--precise:after{background-color:var(--calcite-ui-brand)}.track{position:relative;height:0.125rem;border-radius:0px;background-color:var(--calcite-ui-border-2);-webkit-transition:all var(--calcite-internal-animation-timing-medium) ease-in;transition:all var(--calcite-internal-animation-timing-medium) ease-in}.track__range{position:absolute;top:0px;height:0.125rem;background-color:var(--calcite-ui-brand)}.container--range .track__range:hover{cursor:ew-resize}.container--range .track__range:after{position:absolute;width:100%;content:\"\";top:calc(var(--calcite-slider-full-handle-height) * 0.5 * -1);height:calc(var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height))}.tick{position:absolute;height:0.25rem;width:0.125rem;border-width:1px;border-style:solid;background-color:var(--calcite-ui-border-input);border-color:var(--calcite-ui-foreground-1);top:-2px;pointer-events:none;-webkit-margin-start:calc(-1 * 0.125rem);margin-inline-start:calc(-1 * 0.125rem)}.tick--active{background-color:var(--calcite-ui-brand)}.tick__label{pointer-events:none;margin-top:0.875rem;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}.tick__label--min{-webkit-transition:opacity var(--calcite-animation-timing);transition:opacity var(--calcite-animation-timing)}.tick__label--max{-webkit-transition:opacity var(--calcite-internal-animation-timing-fast);transition:opacity var(--calcite-internal-animation-timing-fast)}:host([has-histogram][label-handles]) .tick__label--min,:host([has-histogram][label-handles]) .tick__label--max,:host([has-histogram][precise]) .tick__label--min,:host([has-histogram][precise]) .tick__label--max{font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-3)}.graph{color:var(--calcite-ui-foreground-3);height:48px}:host([label-ticks][ticks]) .container{padding-bottom:calc(0.875rem + var(--calcite-slider-container-font-size))}:host([has-histogram]):host([precise][label-handles]) .container{padding-bottom:calc(var(--calcite-slider-full-handle-height) + 1em)}:host([has-histogram]):host([label-handles]:not([precise])) .container{padding-bottom:calc(var(--calcite-slider-handle-size) * 0.5 + 1em)}:host([has-histogram]):host([precise]:not([label-handles])) .container{padding-bottom:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container{padding-top:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([precise]:not([label-handles])) .container--range{padding-bottom:var(--calcite-slider-full-handle-height)}:host(:not([has-histogram])):host([label-handles]:not([precise])) .container{padding-top:calc(var(--calcite-slider-full-handle-height) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container{padding-top:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}:host(:not([has-histogram])):host([label-handles][precise]) .container--range{padding-bottom:calc(var(--calcite-slider-full-handle-height) + var(--calcite-slider-container-font-size) + 4px)}::slotted(input[slot=hidden-form-input]){bottom:0 !important;left:0 !important;margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;right:0 !important;top:0 !important;-webkit-transform:none !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
 
+function isRange(value) {
+  return Array.isArray(value);
+}
 const Slider = class extends HTMLElement$1 {
   constructor() {
     super();
@@ -18510,13 +18531,12 @@ const Slider = class extends HTMLElement$1 {
     /** Interval to move on up/down keys */
     this.step = 1;
     /** Currently selected number (if single select) */
-    this.value = null;
+    this.value = 0;
     /**
      * Specify the scale of the slider, defaults to m
      */
     this.scale = "m";
     this.guid = `calcite-slider-${guid()}`;
-    this.isRange = false;
     this.activeProp = "value";
     this.minMaxValueRange = null;
     this.minValueDragRange = null;
@@ -18526,7 +18546,7 @@ const Slider = class extends HTMLElement$1 {
       event.preventDefault();
       if (this.dragProp) {
         const value = this.translate(event.clientX || event.pageX);
-        if (this.isRange && this.dragProp === "minMaxValue") {
+        if (isRange(this.value) && this.dragProp === "minMaxValue") {
           if (this.minValueDragRange && this.maxValueDragRange && this.minMaxValueRange) {
             const newMinValue = value - this.minValueDragRange;
             const newMaxValue = value + this.maxValueDragRange;
@@ -18572,12 +18592,20 @@ const Slider = class extends HTMLElement$1 {
   histogramWatcher(newHistogram) {
     this.hasHistogram = !!newHistogram;
   }
+  valueHandler() {
+    this.setMinMaxFromValue();
+  }
+  minMaxValueHandler() {
+    this.setValueFromMinMax();
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    this.setMinMaxFromValue();
+    this.setValueFromMinMax();
     connectLabel(this);
     connectForm(this);
   }
@@ -18587,11 +18615,12 @@ const Slider = class extends HTMLElement$1 {
     this.removeDragListeners();
   }
   componentWillLoad() {
-    this.isRange = !!(this.maxValue || this.maxValue === 0);
     this.tickValues = this.generateTickValues();
-    this.value = this.clamp(this.value);
+    if (!isRange(this.value)) {
+      this.value = this.clamp(this.value);
+    }
     afterConnectDefaultValueSet(this, this.value);
-    if (this.snap) {
+    if (this.snap && !isRange(this.value)) {
       this.value = this.getClosestStep(this.value);
     }
     if (this.histogram) {
@@ -18601,9 +18630,9 @@ const Slider = class extends HTMLElement$1 {
   componentDidRender() {
     if (this.labelHandles) {
       this.adjustHostObscuredHandleLabel("value");
-      if (this.isRange) {
+      if (isRange(this.value)) {
         this.adjustHostObscuredHandleLabel("minValue");
-        if (!(this.precise && this.isRange && !this.hasHistogram)) {
+        if (!(this.precise && !this.hasHistogram)) {
           this.hyphenateCollidingRangeHandleLabels();
         }
       }
@@ -18613,50 +18642,50 @@ const Slider = class extends HTMLElement$1 {
   }
   render() {
     const id = this.el.id || this.guid;
+    const maxProp = isRange(this.value) ? "maxValue" : "value";
+    const value = isRange(this.value) ? this.maxValue : this.value;
     const min = this.minValue || this.min;
-    const max = this.maxValue || this.value;
-    const maxProp = this.isRange ? "maxValue" : "value";
-    const value = this[maxProp];
     const useMinValue = this.shouldUseMinValue();
     const minInterval = this.getUnitInterval(useMinValue ? this.minValue : min) * 100;
-    const maxInterval = this.getUnitInterval(max) * 100;
+    const maxInterval = this.getUnitInterval(value) * 100;
     const mirror = this.shouldMirror();
     const leftThumbOffset = `${mirror ? 100 - minInterval : minInterval}%`;
     const rightThumbOffset = `${mirror ? maxInterval : 100 - maxInterval}%`;
-    const handle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
+    const valueIsRange = isRange(this.value);
+    const handle = (h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
         thumb: true,
         "thumb--value": true,
         "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 }, h("div", { class: "handle" })));
-    const labeledHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
+    const labeledHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
         thumb: true,
         "thumb--value": true,
         "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 }, h("span", { "aria-hidden": "true", class: "handle__label handle__label--value" }, value ? value.toLocaleString() : value), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value static" }, value ? value.toLocaleString() : value), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value transformed" }, value ? value.toLocaleString() : value), h("div", { class: "handle" })));
-    const histogramLabeledHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
+    const histogramLabeledHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
         thumb: true,
         "thumb--value": true,
         "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 }, h("div", { class: "handle" }), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value" }, value ? value.toLocaleString() : value), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value static" }, value ? value.toLocaleString() : value), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value transformed" }, value ? value.toLocaleString() : value)));
-    const preciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
+    const preciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
         thumb: true,
         "thumb--value": true,
         "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
         "thumb--precise": true
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 }, h("div", { class: "handle" }), h("div", { class: "handle-extension" })));
-    const histogramPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
+    const histogramPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
         thumb: true,
         "thumb--value": true,
         "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
         "thumb--precise": true
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 }, h("div", { class: "handle-extension" }), h("div", { class: "handle" })));
-    const labeledPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
+    const labeledPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
         thumb: true,
         "thumb--value": true,
         "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
         "thumb--precise": true
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: () => this.dragStart(maxProp), ref: (el) => (this.maxHandle = el), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0 }, h("span", { "aria-hidden": "true", class: "handle__label handle__label--value" }, value ? value.toLocaleString() : value), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value static" }, value ? value.toLocaleString() : value), h("span", { "aria-hidden": "true", class: "handle__label handle__label--value transformed" }, value ? value.toLocaleString() : value), h("div", { class: "handle" }), h("div", { class: "handle-extension" })));
-    const histogramLabeledPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": this.isRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
+    const histogramLabeledPreciseHandle = (h("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
         thumb: true,
         "thumb--value": true,
         "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
@@ -18691,14 +18720,14 @@ const Slider = class extends HTMLElement$1 {
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: () => this.dragStart("minValue"), ref: (el) => (this.minHandle = el), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0 }, h("div", { class: "handle-extension" }), h("div", { class: "handle" }), h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue" }, this.minValue && this.minValue.toLocaleString()), h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue static" }, this.minValue && this.minValue.toLocaleString()), h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue transformed" }, this.minValue && this.minValue.toLocaleString())));
     return (h(Host, { id: id, onTouchStart: this.handleTouchStart }, h("div", { class: {
         ["container"]: true,
-        ["container--range"]: this.isRange,
+        ["container--range"]: valueIsRange,
         [`scale--${this.scale}`]: true
       } }, this.renderGraph(), h("div", { class: "track", ref: this.storeTrackRef }, h("div", { class: "track__range", onPointerDown: () => this.dragStart("minMaxValue"), style: {
         left: `${mirror ? 100 - maxInterval : minInterval}%`,
         right: `${mirror ? minInterval : 100 - maxInterval}%`
       } }), h("div", { class: "ticks" }, this.tickValues.map((tick) => {
       const tickOffset = `${this.getUnitInterval(tick) * 100}%`;
-      let activeTicks = tick >= min && tick <= max;
+      let activeTicks = tick >= min && tick <= value;
       if (useMinValue) {
         activeTicks = tick >= this.minValue && tick <= this.maxValue;
       }
@@ -18709,23 +18738,24 @@ const Slider = class extends HTMLElement$1 {
           left: mirror ? "" : tickOffset,
           right: mirror ? tickOffset : ""
         } }, this.renderTickLabel(tick)));
-    }))), h("div", { class: "thumb-container" }, !this.precise && !this.labelHandles && this.isRange && minHandle, !this.hasHistogram &&
+    }))), h("div", { class: "thumb-container" }, !this.precise && !this.labelHandles && valueIsRange && minHandle, !this.hasHistogram &&
       !this.precise &&
       this.labelHandles &&
-      this.isRange &&
-      minLabeledHandle, this.precise && !this.labelHandles && this.isRange && minPreciseHandle, this.precise && this.labelHandles && this.isRange && minLabeledPreciseHandle, this.hasHistogram &&
+      valueIsRange &&
+      minLabeledHandle, this.precise && !this.labelHandles && valueIsRange && minPreciseHandle, this.precise && this.labelHandles && valueIsRange && minLabeledPreciseHandle, this.hasHistogram &&
       !this.precise &&
       this.labelHandles &&
-      this.isRange &&
+      valueIsRange &&
       minHistogramLabeledHandle, !this.precise && !this.labelHandles && handle, !this.hasHistogram && !this.precise && this.labelHandles && labeledHandle, !this.hasHistogram && this.precise && !this.labelHandles && preciseHandle, this.hasHistogram && this.precise && !this.labelHandles && histogramPreciseHandle, !this.hasHistogram && this.precise && this.labelHandles && labeledPreciseHandle, this.hasHistogram && !this.precise && this.labelHandles && histogramLabeledHandle, this.hasHistogram &&
       this.precise &&
       this.labelHandles &&
       histogramLabeledPreciseHandle, h(HiddenFormInputSlot, { component: this })))));
   }
   renderGraph() {
-    return this.histogram ? (h("calcite-graph", { class: "graph", colorStops: this.histogramStops, data: this.histogram, highlightMax: this.isRange ? this.maxValue : this.value, highlightMin: this.isRange ? this.minValue : this.min, max: this.max, min: this.min })) : null;
+    return this.histogram ? (h("calcite-graph", { class: "graph", colorStops: this.histogramStops, data: this.histogram, highlightMax: isRange(this.value) ? this.maxValue : this.value, highlightMin: isRange(this.value) ? this.minValue : this.min, max: this.max, min: this.min })) : null;
   }
   renderTickLabel(tick) {
+    const valueIsRange = isRange(this.value);
     const isMinTickLabel = tick === this.min;
     const isMaxTickLabel = tick === this.max;
     const tickLabel = (h("span", { class: {
@@ -18733,26 +18763,26 @@ const Slider = class extends HTMLElement$1 {
         "tick__label--min": isMinTickLabel,
         "tick__label--max": isMaxTickLabel
       } }, tick.toLocaleString()));
-    if (this.labelTicks && !this.hasHistogram && !this.isRange) {
+    if (this.labelTicks && !this.hasHistogram && !valueIsRange) {
       return tickLabel;
     }
     if (this.labelTicks &&
       !this.hasHistogram &&
-      this.isRange &&
+      valueIsRange &&
       !this.precise &&
       !this.labelHandles) {
       return tickLabel;
     }
     if (this.labelTicks &&
       !this.hasHistogram &&
-      this.isRange &&
+      valueIsRange &&
       !this.precise &&
       this.labelHandles) {
       return tickLabel;
     }
     if (this.labelTicks &&
       !this.hasHistogram &&
-      this.isRange &&
+      valueIsRange &&
       this.precise &&
       (isMinTickLabel || isMaxTickLabel)) {
       return tickLabel;
@@ -18836,7 +18866,7 @@ const Slider = class extends HTMLElement$1 {
     const x = event.clientX || event.pageX;
     const position = this.translate(x);
     let prop = "value";
-    if (this.isRange) {
+    if (isRange(this.value)) {
       const inRange = position >= this.minValue && position <= this.maxValue;
       if (inRange && this.lastDragProp === "minMaxValue") {
         prop = "minMaxValue";
@@ -18872,6 +18902,19 @@ const Slider = class extends HTMLElement$1 {
   //  Private Methods
   //
   //--------------------------------------------------------------------------
+  setValueFromMinMax() {
+    const { minValue, maxValue } = this;
+    if (typeof minValue === "number" && typeof maxValue === "number") {
+      this.value = [minValue, maxValue];
+    }
+  }
+  setMinMaxFromValue() {
+    const { value } = this;
+    if (isRange(value)) {
+      this.minValue = value[0];
+      this.maxValue = value[1];
+    }
+  }
   onLabelClick() {
     this.setFocus();
   }
@@ -18879,7 +18922,7 @@ const Slider = class extends HTMLElement$1 {
     return this.mirrored && !this.hasHistogram;
   }
   shouldUseMinValue() {
-    if (!this.isRange) {
+    if (!isRange(this.value)) {
       return false;
     }
     return ((this.hasHistogram && this.maxValue === 0) || (!this.hasHistogram && this.minValue === 0));
@@ -19092,19 +19135,20 @@ const Slider = class extends HTMLElement$1 {
    * Hides bounding tick labels that are obscured by either handle.
    */
   hideObscuredBoundingTickLabels() {
-    if (!this.hasHistogram && !this.isRange && !this.labelHandles && !this.precise) {
+    const valueIsRange = isRange(this.value);
+    if (!this.hasHistogram && !valueIsRange && !this.labelHandles && !this.precise) {
       return;
     }
-    if (!this.hasHistogram && !this.isRange && this.labelHandles && !this.precise) {
+    if (!this.hasHistogram && !valueIsRange && this.labelHandles && !this.precise) {
       return;
     }
-    if (!this.hasHistogram && !this.isRange && !this.labelHandles && this.precise) {
+    if (!this.hasHistogram && !valueIsRange && !this.labelHandles && this.precise) {
       return;
     }
-    if (!this.hasHistogram && !this.isRange && this.labelHandles && this.precise) {
+    if (!this.hasHistogram && !valueIsRange && this.labelHandles && this.precise) {
       return;
     }
-    if (!this.hasHistogram && this.isRange && !this.precise) {
+    if (!this.hasHistogram && valueIsRange && !this.precise) {
       return;
     }
     if (this.hasHistogram && !this.precise && !this.labelHandles) {
@@ -19181,7 +19225,10 @@ const Slider = class extends HTMLElement$1 {
   }
   get el() { return this; }
   static get watchers() { return {
-    "histogram": ["histogramWatcher"]
+    "histogram": ["histogramWatcher"],
+    "value": ["valueHandler"],
+    "minValue": ["minMaxValueHandler"],
+    "maxValue": ["minMaxValueHandler"]
   }; }
   static get style() { return sliderCss; }
 };
@@ -25957,9 +26004,9 @@ const CalciteHandle = /*@__PURE__*/proxyCustomElement(Handle, [1,"calcite-handle
 const CalciteIcon = /*@__PURE__*/proxyCustomElement(Icon, [1,"calcite-icon",{"icon":[513],"flipRtl":[516,"flip-rtl"],"scale":[513],"textLabel":[1,"text-label"],"pathData":[32],"visible":[32]}]);
 const CalciteInlineEditable = /*@__PURE__*/proxyCustomElement(InlineEditable, [1,"calcite-inline-editable",{"disabled":[516],"editingEnabled":[1540,"editing-enabled"],"loading":[1540],"controls":[516],"intlEnableEditing":[513,"intl-enable-editing"],"intlCancelEditing":[513,"intl-cancel-editing"],"intlConfirmChanges":[513,"intl-confirm-changes"],"scale":[1537],"afterConfirm":[16]},[[0,"calciteInputBlur","blurHandler"]]]);
 const CalciteInput = /*@__PURE__*/proxyCustomElement(Input, [1,"calcite-input",{"alignment":[513],"autofocus":[4],"clearable":[516],"disabled":[516],"groupSeparator":[4,"group-separator"],"hidden":[4],"icon":[520],"intlLoading":[1,"intl-loading"],"iconFlipRtl":[516,"icon-flip-rtl"],"label":[1],"loading":[516],"locale":[1],"localeFormat":[4,"locale-format"],"max":[514],"min":[514],"maxlength":[514],"maxLength":[514,"max-length"],"minLength":[514,"min-length"],"name":[513],"numberButtonType":[513,"number-button-type"],"placeholder":[1],"prefixText":[1,"prefix-text"],"readOnly":[4,"read-only"],"required":[4],"scale":[1537],"status":[1537],"step":[520],"suffixText":[1,"suffix-text"],"editingEnabled":[1540,"editing-enabled"],"type":[513],"value":[1025],"localizedValue":[32]}]);
-const CalciteInputDatePicker = /*@__PURE__*/proxyCustomElement(InputDatePicker, [1,"calcite-input-date-picker",{"disabled":[516],"value":[1025],"flipPlacements":[16],"headingLevel":[2,"heading-level"],"valueAsDate":[1040],"startAsDate":[1040],"endAsDate":[1040],"minAsDate":[1040],"maxAsDate":[1040],"min":[1025],"max":[1025],"active":[1540],"name":[1],"intlPrevMonth":[1,"intl-prev-month"],"intlNextMonth":[1,"intl-next-month"],"intlYear":[1,"intl-year"],"locale":[1],"scale":[513],"range":[516],"required":[516],"start":[1025],"end":[1025],"overlayPositioning":[1,"overlay-positioning"],"proximitySelectionDisabled":[4,"proximity-selection-disabled"],"layout":[513],"focusedInput":[32],"localeData":[32]},[[0,"calciteDatePickerChange","handleDateOrRangeChange"],[0,"calciteDatePickerRangeChange","handleDateOrRangeChange"],[0,"calciteDaySelect","calciteDaySelectHandler"]]]);
+const CalciteInputDatePicker = /*@__PURE__*/proxyCustomElement(InputDatePicker, [1,"calcite-input-date-picker",{"disabled":[516],"value":[1025],"flipPlacements":[16],"headingLevel":[2,"heading-level"],"valueAsDate":[1040],"startAsDate":[1040],"endAsDate":[1040],"minAsDate":[1040],"maxAsDate":[1040],"min":[1025],"max":[1025],"active":[1540],"name":[1],"intlPrevMonth":[1,"intl-prev-month"],"intlNextMonth":[1,"intl-next-month"],"intlYear":[1,"intl-year"],"locale":[1],"scale":[513],"placement":[513],"range":[516],"required":[516],"start":[1025],"end":[1025],"overlayPositioning":[1,"overlay-positioning"],"proximitySelectionDisabled":[4,"proximity-selection-disabled"],"layout":[513],"focusedInput":[32],"localeData":[32]},[[0,"calciteDatePickerChange","handleDateOrRangeChange"],[0,"calciteDatePickerRangeChange","handleDateOrRangeChange"],[0,"calciteDaySelect","calciteDaySelectHandler"]]]);
 const CalciteInputMessage = /*@__PURE__*/proxyCustomElement(InputMessage, [1,"calcite-input-message",{"active":[516],"icon":[520],"scale":[1537],"status":[1537],"type":[513]}]);
-const CalciteInputTimePicker = /*@__PURE__*/proxyCustomElement(InputTimePicker, [1,"calcite-input-time-picker",{"active":[1540],"disabled":[516],"intlHour":[1,"intl-hour"],"intlHourDown":[1,"intl-hour-down"],"intlHourUp":[1,"intl-hour-up"],"intlMeridiem":[1,"intl-meridiem"],"intlMeridiemDown":[1,"intl-meridiem-down"],"intlMeridiemUp":[1,"intl-meridiem-up"],"intlMinute":[1,"intl-minute"],"intlMinuteDown":[1,"intl-minute-down"],"intlMinuteUp":[1,"intl-minute-up"],"intlSecond":[1,"intl-second"],"intlSecondDown":[1,"intl-second-down"],"intlSecondUp":[1,"intl-second-up"],"locale":[1025,"lang"],"name":[1],"required":[516],"scale":[513],"step":[2],"value":[1025],"localizedValue":[32]},[[0,"click","clickHandler"],[0,"keyup","keyUpHandler"],[0,"calciteTimePickerBlur","timePickerBlurHandler"],[0,"calciteTimePickerFocus","timePickerFocusHandler"]]]);
+const CalciteInputTimePicker = /*@__PURE__*/proxyCustomElement(InputTimePicker, [1,"calcite-input-time-picker",{"active":[1540],"disabled":[516],"intlHour":[1,"intl-hour"],"intlHourDown":[1,"intl-hour-down"],"intlHourUp":[1,"intl-hour-up"],"intlMeridiem":[1,"intl-meridiem"],"intlMeridiemDown":[1,"intl-meridiem-down"],"intlMeridiemUp":[1,"intl-meridiem-up"],"intlMinute":[1,"intl-minute"],"intlMinuteDown":[1,"intl-minute-down"],"intlMinuteUp":[1,"intl-minute-up"],"intlSecond":[1,"intl-second"],"intlSecondDown":[1,"intl-second-down"],"intlSecondUp":[1,"intl-second-up"],"locale":[1025,"lang"],"name":[1],"required":[516],"scale":[513],"placement":[513],"step":[2],"value":[1025],"localizedValue":[32]},[[0,"click","clickHandler"],[0,"keyup","keyUpHandler"],[0,"calciteTimePickerBlur","timePickerBlurHandler"],[0,"calciteTimePickerFocus","timePickerFocusHandler"]]]);
 const CalciteLabel = /*@__PURE__*/proxyCustomElement(Label, [1,"calcite-label",{"alignment":[513],"status":[513],"for":[513],"scale":[513],"layout":[513],"disableSpacing":[4,"disable-spacing"],"disabled":[516]}]);
 const CalciteLink = /*@__PURE__*/proxyCustomElement(Link, [1,"calcite-link",{"disabled":[516],"download":[520],"href":[513],"iconEnd":[513,"icon-end"],"iconFlipRtl":[513,"icon-flip-rtl"],"iconStart":[513,"icon-start"],"rel":[1],"target":[1]}]);
 const CalciteList = /*@__PURE__*/proxyCustomElement(List$1, [1,"calcite-list",{"disabled":[516],"headingLevel":[2,"heading-level"]}]);