@esri/calcite-components 1.0.0-next.422 → 1.0.0-next.425

package/dist/cjs/calcite-graph_2.cjs.entry.js

@@ -205,6 +205,9 @@ Graph.style = graphCss;
 
 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 {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
@@ -245,13 +248,12 @@ const Slider = class {
     /** 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.guid()}`;
-    this.isRange = false;
     this.activeProp = "value";
     this.minMaxValueRange = null;
     this.minValueDragRange = null;
@@ -261,7 +263,7 @@ const Slider = class {
       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;
@@ -307,12 +309,20 @@ const Slider = class {
   histogramWatcher(newHistogram) {
     this.hasHistogram = !!newHistogram;
   }
+  valueHandler() {
+    this.setMinMaxFromValue();
+  }
+  minMaxValueHandler() {
+    this.setValueFromMinMax();
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
+    this.setMinMaxFromValue();
+    this.setValueFromMinMax();
     label.connectLabel(this);
     form.connectForm(this);
   }
@@ -322,11 +332,12 @@ const Slider = class {
     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);
+    }
     form.afterConnectDefaultValueSet(this, this.value);
-    if (this.snap) {
+    if (this.snap && !isRange(this.value)) {
       this.value = this.getClosestStep(this.value);
     }
     if (this.histogram) {
@@ -336,9 +347,9 @@ const Slider = class {
   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();
         }
       }
@@ -348,50 +359,50 @@ const Slider = class {
   }
   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 = (index.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 = (index.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 }, index.h("div", { class: "handle" })));
-    const labeledHandle = (index.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 = (index.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 }, index.h("span", { "aria-hidden": "true", class: "handle__label handle__label--value" }, value ? value.toLocaleString() : value), index.h("span", { "aria-hidden": "true", class: "handle__label handle__label--value static" }, value ? value.toLocaleString() : value), index.h("span", { "aria-hidden": "true", class: "handle__label handle__label--value transformed" }, value ? value.toLocaleString() : value), index.h("div", { class: "handle" })));
-    const histogramLabeledHandle = (index.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 = (index.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 }, index.h("div", { class: "handle" }), index.h("span", { "aria-hidden": "true", class: "handle__label handle__label--value" }, value ? value.toLocaleString() : value), index.h("span", { "aria-hidden": "true", class: "handle__label handle__label--value static" }, value ? value.toLocaleString() : value), index.h("span", { "aria-hidden": "true", class: "handle__label handle__label--value transformed" }, value ? value.toLocaleString() : value)));
-    const preciseHandle = (index.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 = (index.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 }, index.h("div", { class: "handle" }), index.h("div", { class: "handle-extension" })));
-    const histogramPreciseHandle = (index.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 = (index.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 }, index.h("div", { class: "handle-extension" }), index.h("div", { class: "handle" })));
-    const labeledPreciseHandle = (index.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 = (index.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 }, index.h("span", { "aria-hidden": "true", class: "handle__label handle__label--value" }, value ? value.toLocaleString() : value), index.h("span", { "aria-hidden": "true", class: "handle__label handle__label--value static" }, value ? value.toLocaleString() : value), index.h("span", { "aria-hidden": "true", class: "handle__label handle__label--value transformed" }, value ? value.toLocaleString() : value), index.h("div", { class: "handle" }), index.h("div", { class: "handle-extension" })));
-    const histogramLabeledPreciseHandle = (index.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 = (index.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,
@@ -426,14 +437,14 @@ const Slider = class {
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: () => this.dragStart("minValue"), ref: (el) => (this.minHandle = el), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0 }, index.h("div", { class: "handle-extension" }), index.h("div", { class: "handle" }), index.h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue" }, this.minValue && this.minValue.toLocaleString()), index.h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue static" }, this.minValue && this.minValue.toLocaleString()), index.h("span", { "aria-hidden": "true", class: "handle__label handle__label--minValue transformed" }, this.minValue && this.minValue.toLocaleString())));
     return (index.h(index.Host, { id: id, onTouchStart: this.handleTouchStart }, index.h("div", { class: {
         ["container"]: true,
-        ["container--range"]: this.isRange,
+        ["container--range"]: valueIsRange,
         [`scale--${this.scale}`]: true
       } }, this.renderGraph(), index.h("div", { class: "track", ref: this.storeTrackRef }, index.h("div", { class: "track__range", onPointerDown: () => this.dragStart("minMaxValue"), style: {
         left: `${mirror ? 100 - maxInterval : minInterval}%`,
         right: `${mirror ? minInterval : 100 - maxInterval}%`
       } }), index.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;
       }
@@ -444,23 +455,24 @@ const Slider = class {
           left: mirror ? "" : tickOffset,
           right: mirror ? tickOffset : ""
         } }, this.renderTickLabel(tick)));
-    }))), index.h("div", { class: "thumb-container" }, !this.precise && !this.labelHandles && this.isRange && minHandle, !this.hasHistogram &&
+    }))), index.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, index.h(form.HiddenFormInputSlot, { component: this })))));
   }
   renderGraph() {
-    return this.histogram ? (index.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 ? (index.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 = (index.h("span", { class: {
@@ -468,26 +480,26 @@ const Slider = class {
         "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;
@@ -571,7 +583,7 @@ const Slider = class {
     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";
@@ -607,6 +619,19 @@ const Slider = class {
   //  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();
   }
@@ -614,7 +639,7 @@ const Slider = class {
     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));
@@ -827,19 +852,20 @@ const Slider = class {
    * 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) {
@@ -916,7 +942,10 @@ const Slider = class {
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {
-    "histogram": ["histogramWatcher"]
+    "histogram": ["histogramWatcher"],
+    "value": ["valueHandler"],
+    "minValue": ["minMaxValueHandler"],
+    "maxValue": ["minMaxValueHandler"]
   }; }
 };
 Slider.style = sliderCss;

package/dist/cjs/calcite-tab_4.cjs.entry.js

@@ -24,14 +24,6 @@ const Tab = class {
     this.active = false;
     /** @internal Parent tabs component scale value */
     this.scale = "m";
-    //--------------------------------------------------------------------------
-    //
-    //  Private State/Props
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * @internal
-     */
     this.guid = `calcite-tab-title-${guid.guid()}`;
   }
   //--------------------------------------------------------------------------
@@ -43,12 +35,15 @@ const Tab = class {
     const id = this.el.id || this.guid;
     return (index.h(index.Host, { "aria-expanded": this.active.toString(), "aria-labelledby": this.labeledBy, id: id, role: "tabpanel" }, index.h("section", null, index.h("slot", null))));
   }
+  connectedCallback() {
+    this.parentTabsEl = this.el.closest("calcite-tabs");
+  }
   componentDidLoad() {
     this.calciteTabRegister.emit();
   }
   componentWillRender() {
     var _a;
-    this.scale = (_a = this.el.closest("calcite-tabs")) === null || _a === void 0 ? void 0 : _a.scale;
+    this.scale = (_a = this.parentTabsEl) === null || _a === void 0 ? void 0 : _a.scale;
   }
   disconnectedCallback() {
     var _a;
@@ -63,10 +58,13 @@ const Tab = class {
   //
   //--------------------------------------------------------------------------
   tabChangeHandler(event) {
+    const targetTabsEl = event
+      .composedPath()
+      .find((el) => el.tagName === "CALCITE-TABS");
     // to allow `<calcite-tabs>` to be nested we need to make sure this
-    // `calciteTabChange` event was actually fired from a title that is a
-    // child of the `<calcite-tabs>` that is the a parent of this tab.
-    if (!event.composedPath().includes(this.el.closest("calcite-tabs"))) {
+    // `calciteTabChange` event was actually fired from a within the same
+    // `<calcite-tabs>` that is the a parent of this tab.
+    if (targetTabsEl !== this.parentTabsEl) {
       return;
     }
     if (this.tab) {
@@ -153,6 +151,9 @@ const TabNav = class {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  connectedCallback() {
+    this.parentTabsEl = this.el.closest("calcite-tabs");
+  }
   componentWillLoad() {
     const storageKey = `calcite-tab-nav-${this.storageId}`;
     if (localStorage && this.storageId && localStorage.getItem(storageKey)) {
@@ -164,11 +165,11 @@ const TabNav = class {
     }
   }
   componentWillRender() {
-    var _a, _b, _c, _d;
-    this.layout = (_a = this.el.closest("calcite-tabs")) === null || _a === void 0 ? void 0 : _a.layout;
-    this.position = (_b = this.el.closest("calcite-tabs")) === null || _b === void 0 ? void 0 : _b.position;
-    this.scale = (_c = this.el.closest("calcite-tabs")) === null || _c === void 0 ? void 0 : _c.scale;
-    this.bordered = (_d = this.el.closest("calcite-tabs")) === null || _d === void 0 ? void 0 : _d.bordered;
+    const { parentTabsEl } = this;
+    this.layout = parentTabsEl === null || parentTabsEl === void 0 ? void 0 : parentTabsEl.layout;
+    this.position = parentTabsEl === null || parentTabsEl === void 0 ? void 0 : parentTabsEl.position;
+    this.scale = parentTabsEl === null || parentTabsEl === void 0 ? void 0 : parentTabsEl.scale;
+    this.bordered = parentTabsEl === null || parentTabsEl === void 0 ? void 0 : parentTabsEl.bordered;
     // fix issue with active tab-title not lining up with blue indicator
     if (this.selectedTabEl) {
       this.updateOffsetPosition();
@@ -309,9 +310,6 @@ const TabTitle = class {
     this.mutationObserver = observers.createObserver("mutation", () => this.updateHasText());
     /** determine if there is slotted text for styling purposes */
     this.hasText = false;
-    /**
-     * @internal
-     */
     this.guid = `calcite-tab-title-${guid.guid()}`;
   }
   activeTabChanged() {
@@ -380,15 +378,19 @@ const TabTitle = class {
   //
   //--------------------------------------------------------------------------
   tabChangeHandler(event) {
-    if (event.composedPath().includes(this.parentTabNavEl)) {
-      if (this.tab) {
-        this.active = this.tab === event.detail.tab;
-      }
-      else {
-        this.getTabIndex().then((index) => {
-          this.active = index === event.detail.tab;
-        });
-      }
+    const targetTabsEl = event
+      .composedPath()
+      .find((el) => el.tagName === "CALCITE-TABS");
+    if (targetTabsEl !== this.parentTabsEl) {
+      return;
+    }
+    if (this.tab) {
+      this.active = this.tab === event.detail.tab;
+    }
+    else {
+      this.getTabIndex().then((index) => {
+        this.active = index === event.detail.tab;
+      });
     }
   }
   onClick() {
@@ -504,14 +506,12 @@ const Tabs = class {
     //
     //--------------------------------------------------------------------------
     /**
-     * @internal
      *
      * Stores an array of ids of `<calcite-tab-titles>`s to match up ARIA
      * attributes.
      */
     this.titles = [];
     /**
-     * @internal
      *
      * Stores an array of ids of `<calcite-tab>`s to match up ARIA attributes.
      */
@@ -573,7 +573,6 @@ const Tabs = class {
   //
   //--------------------------------------------------------------------------
   /**
-   * @internal
    *
    * Matches up elements from the internal `tabs` and `titles` to automatically
    * update the ARIA attributes and link `<calcite-tab>` and

package/dist/collection/components/date-picker-month-header/date-picker-month-header.js

@@ -16,20 +16,23 @@ export class DatePickerMonthHeader {
      * 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);
@@ -91,7 +94,7 @@ export class DatePickerMonthHeader {
           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 }),
+            }, 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)))),
@@ -105,27 +108,32 @@ export class DatePickerMonthHeader {
     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);
     }
   }
   static get is() { return "calcite-date-picker-month-header"; }