@esri/calcite-components 1.0.0-next.290 → 1.0.0-next.294

package/dist/collection/components/calcite-pagination/calcite-pagination.js

@@ -232,8 +232,8 @@ export class CalcitePagination {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Next\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Next\""
           }],
         "text": "Used as an accessible label (aria-label) for the next button"
       },
@@ -253,8 +253,8 @@ export class CalcitePagination {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Previous\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Previous\""
           }],
         "text": "Used as an accessible label (aria-label) of the previous button"
       },
@@ -294,8 +294,8 @@ export class CalcitePagination {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": "use calcitePaginationChange instead",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "use calcitePaginationChange instead"
           }],
         "text": "Emitted whenever the selected page changes."
       },
@@ -316,8 +316,8 @@ export class CalcitePagination {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": " [CalcitePaginationDetail](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-pagination/calcite-pagination.tsx#L18)",
-            "name": "see"
+            "name": "see",
+            "text": " [CalcitePaginationDetail](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-pagination/calcite-pagination.tsx#L18)"
           }],
         "text": "Emitted whenever the selected page changes."
       },

package/dist/collection/components/calcite-panel/calcite-panel.css

@@ -233,10 +233,14 @@ h5.heading {
 }
 
 .header-content {
-  display: block;
   overflow: hidden;
   margin-right: auto;
-  padding: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
 }
 
 .header-content .heading,

package/dist/collection/components/calcite-pick-list-item/calcite-pick-list-item.js

@@ -224,8 +224,8 @@ export class CalcitePickListItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "When true, the item cannot be selected by user interaction.",
-            "name": "internal"
+            "name": "internal",
+            "text": "When true, the item cannot be selected by user interaction."
           }],
         "text": ""
       },
@@ -250,8 +250,8 @@ export class CalcitePickListItem {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": " [ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-pick-list/resources.ts#L5)",
-            "name": "see"
+            "name": "see",
+            "text": " [ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-pick-list/resources.ts#L5)"
           }],
         "text": "Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null."
       },
@@ -343,8 +343,8 @@ export class CalcitePickListItem {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Remove\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Remove\""
           }],
         "text": "Used as an accessible label (aria-label) for the \"remove item\" action. Only applicable if removable is true."
       },
@@ -412,8 +412,8 @@ export class CalcitePickListItem {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Emitted whenever the the item's label, description, value or metadata properties are modified."
       },
@@ -430,8 +430,8 @@ export class CalcitePickListItem {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Emitted whenever the the item's value property is modified."
       },

package/dist/collection/components/calcite-popover/calcite-popover.js

@@ -158,7 +158,7 @@ export class CalcitePopover {
     const { popper, el, placement } = this;
     const modifiers = this.getModifiers();
     popper
-      ? updatePopper({
+      ? await updatePopper({
         el,
         modifiers,
         placement,
@@ -295,8 +295,8 @@ export class CalcitePopover {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "use dismissible instead.",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "use dismissible instead."
           }],
         "text": "Display a close button within the Popover."
       },
@@ -446,8 +446,8 @@ export class CalcitePopover {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "6",
-            "name": "default"
+            "name": "default",
+            "text": "6"
           }],
         "text": "Offset the position of the popover away from the reference element."
       },
@@ -531,8 +531,8 @@ export class CalcitePopover {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": " [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)",
-            "name": "see"
+            "name": "see",
+            "text": " [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)"
           }],
         "text": "Determines where the component will be positioned relative to the referenceElement."
       },
@@ -573,8 +573,8 @@ export class CalcitePopover {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Close\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Close\""
           }],
         "text": "Text for close button."
       },

package/dist/collection/components/calcite-popover-manager/calcite-popover-manager.js

@@ -86,8 +86,8 @@ export class CalcitePopoverManager {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "`[data-calcite-popover-reference]`",
-            "name": "default"
+            "name": "default",
+            "text": "`[data-calcite-popover-reference]`"
           }],
         "text": "CSS Selector to match reference elements for popovers. Reference elements will be identified by this selector in order to open their associated popover."
       },

package/dist/collection/components/calcite-radio/calcite-radio.js

@@ -94,8 +94,8 @@ export class CalciteRadio {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "The focused state of the radio."
       },
@@ -133,8 +133,8 @@ export class CalciteRadio {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "The hovered state of the radio."
       },

package/dist/collection/components/calcite-radio-button/calcite-radio-button.js

@@ -56,21 +56,6 @@ export class CalciteRadioButton {
     this.clickHandler = () => {
       this.toggle();
     };
-    this.onLabelClick = (event) => {
-      if (!this.disabled && !this.hidden) {
-        this.uncheckOtherRadioButtonsInGroup();
-        const label = event.currentTarget;
-        const radioButton = label.for
-          ? this.rootNode.querySelector(`calcite-radio-button[id="${label.for}"]`)
-          : label.querySelector(`calcite-radio-button[name="${this.name}"]`);
-        if (radioButton) {
-          radioButton.checked = true;
-          radioButton.focused = true;
-        }
-        this.calciteRadioButtonChange.emit();
-        this.setFocus();
-      }
-    };
     this.setInputEl = (el) => {
       this.inputEl = el;
     };
@@ -142,6 +127,21 @@ export class CalciteRadioButton {
   async setFocus() {
     focusElement(this.inputEl);
   }
+  onLabelClick(event) {
+    if (!this.disabled && !this.hidden) {
+      this.uncheckOtherRadioButtonsInGroup();
+      const label = event.currentTarget;
+      const radioButton = label.for
+        ? this.rootNode.querySelector(`calcite-radio-button[id="${label.for}"]`)
+        : label.querySelector(`calcite-radio-button[name="${this.name}"]`);
+      if (radioButton) {
+        radioButton.checked = true;
+        radioButton.focused = true;
+      }
+      this.calciteRadioButtonChange.emit();
+      this.setFocus();
+    }
+  }
   checkLastRadioButton() {
     const radioButtons = Array.from(this.rootNode.querySelectorAll("calcite-radio-button")).filter((radioButton) => radioButton.name === this.name);
     const checkedRadioButtons = radioButtons.filter((radioButton) => radioButton.checked);
@@ -289,8 +289,8 @@ export class CalciteRadioButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "The focused state of the radio button."
       },
@@ -345,8 +345,8 @@ export class CalciteRadioButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "The hovered state of the radio button."
       },
@@ -366,8 +366,8 @@ export class CalciteRadioButton {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "The label of the radio input"
       },
@@ -458,8 +458,8 @@ export class CalciteRadioButton {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Fires when the radio button is blurred."
       },
@@ -491,8 +491,8 @@ export class CalciteRadioButton {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Fires when the checked property changes.  This is an internal event used for styling purposes only.\nUse calciteRadioButtonChange or calciteRadioButtonGroupChange for responding to changes in the checked value for forms."
       },
@@ -509,8 +509,8 @@ export class CalciteRadioButton {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Fires when the radio button is focused."
       },

package/dist/collection/components/calcite-radio-group/calcite-radio-group.js

@@ -42,14 +42,6 @@ export class CalciteRadioGroup {
       this.el.appendChild(input);
       return input;
     })();
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    this.onLabelClick = () => {
-      this.setFocus();
-    };
   }
   handleNameChange(value) {
     this.hiddenInput.name = value;
@@ -167,6 +159,14 @@ export class CalciteRadioGroup {
     var _a;
     (_a = (this.selectedItem || this.getItems()[0])) === null || _a === void 0 ? void 0 : _a.focus();
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  onLabelClick() {
+    this.setFocus();
+  }
   getItems() {
     return this.el.querySelectorAll("calcite-radio-group-item");
   }

package/dist/collection/components/calcite-radio-group-item/calcite-radio-group-item.css

@@ -100,7 +100,7 @@
   pointer-events: none;
   align-items: center;
   margin: 0.125rem;
-  transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out;
+  transition: background-color 0.1s ease-in-out, border-color 0.1s ease-in-out, color 0.1s ease-in-out;
 }
 
 .label--horizontal {
@@ -177,10 +177,6 @@
   display: inline-flex;
   position: relative;
   margin: 0;
-  transition-property: all;
-  transition-duration: 150ms;
-  transition-timing-function: ease-in-out;
-  transition-delay: 0s;
   line-height: inherit;
 }
 

package/dist/collection/components/calcite-radio-group-item/calcite-radio-group-item.js

@@ -207,8 +207,8 @@ export class CalciteRadioGroupItem {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Fires when the item has been selected."
       },

package/dist/collection/components/calcite-rating/calcite-rating.js

@@ -33,14 +33,6 @@ export class CalciteRating {
      * @default "Stars: ${num}"
      */
     this.intlStars = TEXT.stars;
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    this.onLabelClick = () => {
-      this.setFocus();
-    };
     this.guid = `calcite-ratings-${guid()}`;
   }
   //--------------------------------------------------------------------------
@@ -103,6 +95,14 @@ export class CalciteRating {
           count.toString(),
           ")"))) : null));
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  onLabelClick() {
+    this.setFocus();
+  }
   updateValue(value) {
     this.value = value;
     this.calciteRatingChange.emit({ value });
@@ -266,8 +266,8 @@ export class CalciteRating {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Rating\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Rating\""
           }],
         "text": "Localized string for \"Rating\" (used for aria label)"
       },
@@ -287,8 +287,8 @@ export class CalciteRating {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Stars: ${num}\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Stars: ${num}\""
           }],
         "text": "Localized string for labelling each star, `${num}` in the string will be replaced by the number"
       },

package/dist/collection/components/calcite-scrim/calcite-scrim.js

@@ -60,8 +60,8 @@ export class CalciteScrim {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Loading\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Loading\""
           }],
         "text": "string to override English loading text"
       },

package/dist/collection/components/calcite-select/calcite-select.js

@@ -43,14 +43,6 @@ export class CalciteSelect {
       this.selectFromNativeOption(selected);
       requestAnimationFrame(() => this.emitChangeEvent());
     };
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    this.onLabelClick = () => {
-      this.setFocus();
-    };
     this.populateInternalSelect = () => {
       const optionsAndGroups = Array.from(this.el.children);
       this.clearInternalSelect();
@@ -106,6 +98,14 @@ export class CalciteSelect {
       this.deselectAllExcept(optionOrGroup);
     }
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  onLabelClick() {
+    this.setFocus();
+  }
   updateNativeElement(optionOrGroup, nativeOptionOrGroup) {
     nativeOptionOrGroup.disabled = optionOrGroup.disabled;
     nativeOptionOrGroup.label = optionOrGroup.label;
@@ -265,8 +265,8 @@ export class CalciteSelect {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "readonly"
+            "name": "readonly",
+            "text": undefined
           }],
         "text": "The currently selected option."
       }

package/dist/collection/components/calcite-slider/calcite-slider.css

@@ -152,8 +152,7 @@
 }
 
 .thumb .handle__label {
-  font-size: 0.75rem;
-  line-height: 1.5;
+  font-size: var(--calcite-font-size--2);
   font-weight: 500;
   line-height: 1;
   color: var(--calcite-ui-text-2);
@@ -368,8 +367,7 @@
 
 .tick__label {
   position: absolute;
-  font-size: 0.75rem;
-  line-height: 1.5;
+  font-size: var(--calcite-font-size--2);
   font-weight: 500;
   color: var(--calcite-ui-text-2);
   width: 4em;

package/dist/collection/components/calcite-slider/calcite-slider.js

@@ -48,14 +48,6 @@ export class CalciteSlider {
     this.minValueDragRange = null;
     this.maxValueDragRange = null;
     this.tickValues = [];
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    this.onLabelClick = () => {
-      this.setFocus();
-    };
     this.dragUpdate = (event) => {
       event.preventDefault();
       if (this.dragProp) {
@@ -304,7 +296,7 @@ export class CalciteSlider {
   }
   renderGraph() {
     return this.histogram ? (h("div", { class: "graph" },
-      h("calcite-graph", { colorStops: this.histogramStops, data: this.histogram, "data-style": "slider-histogram", height: 48, highlightMax: this.isRange ? this.maxValue : this.value, highlightMin: this.isRange ? this.minValue : this.min, width: 300 }))) : null;
+      h("calcite-graph", { colorStops: this.histogramStops, data: this.histogram, "data-style": "slider-histogram", height: 48, highlightMax: this.isRange ? this.maxValue : this.value, highlightMin: this.isRange ? this.minValue : this.min, max: this.max, min: this.min, width: 300 }))) : null;
   }
   renderTickLabel(tick) {
     const isMinTickLabel = tick === this.min;
@@ -313,7 +305,7 @@ export class CalciteSlider {
         tick__label: true,
         "tick__label--min": isMinTickLabel,
         "tick__label--max": isMaxTickLabel
-      } }, tick.toLocaleString()));
+      } }, Math.min(tick, this.max).toLocaleString()));
     if (this.labelTicks && !this.hasHistogram && !this.isRange) {
       return tickLabel;
     }
@@ -447,6 +439,14 @@ export class CalciteSlider {
     const handle = this.minHandle ? this.minHandle : this.maxHandle;
     handle.focus();
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  onLabelClick() {
+    this.setFocus();
+  }
   shouldMirror() {
     return this.mirrored && !this.hasHistogram;
   }
@@ -1132,8 +1132,8 @@ export class CalciteSlider {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": "use calciteSliderInput instead",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "use calciteSliderInput instead"
           }],
         "text": "Fires on all updates to the slider.\n:warning: Will be fired frequently during drag. If you are performing any\nexpensive operations consider using a debounce or throttle to avoid\nlocking up the main thread."
       },

package/dist/collection/components/calcite-split-button/calcite-split-button.js

@@ -144,8 +144,8 @@ export class CalciteSplitButton {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Is the dropdown currently active or not"
       },

package/dist/collection/components/calcite-stepper/calcite-stepper.js

@@ -317,8 +317,8 @@ export class CalciteStepper {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": ""
       }
@@ -332,8 +332,8 @@ export class CalciteStepper {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "This event fires when the active stepper item has changed."
       },