@esri/calcite-components 1.0.0-beta.68 → 1.0.0-beta.69

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

@@ -297,8 +297,8 @@ export class CalciteAlert {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Close\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Close\""
           }],
         "text": "string to override English close text"
       },
@@ -391,8 +391,8 @@ export class CalciteAlert {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Fired to sync queue when opened or closed"
       },
@@ -409,8 +409,8 @@ export class CalciteAlert {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Fired when an alert is added to dom - used to receive initial queue"
       },

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

@@ -237,8 +237,8 @@ calcite-handle {
 
 .title {
   margin: 0;
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
   padding-top: 0;
   padding-bottom: 0;
 }

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

@@ -258,8 +258,8 @@ export class CalciteBlock {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Loading\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Loading\""
           }],
         "text": "string to override English loading text"
       },
@@ -279,8 +279,8 @@ export class CalciteBlock {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Options\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Options\""
           }],
         "text": "Text string used for the actions menu"
       },

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

@@ -344,8 +344,8 @@ export class CalciteButton {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Loading\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Loading\""
           }],
         "text": "string to override English loading text"
       },
@@ -417,8 +417,8 @@ export class CalciteButton {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\u2013 this property is no longer needed if placed inside a form.",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "\u2013 this property is no longer needed if placed inside a form."
           }],
         "text": "The form ID to associate with the component"
       },

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

@@ -95,8 +95,8 @@ export class CalciteCard {
   }
   renderCheckbox() {
     const checkboxLabel = this.selected ? this.intlDeselect : this.intlSelect;
-    return (h("label", { "aria-label": checkboxLabel, class: CSS.checkboxWrapper, onClick: this.cardSelectClick, onKeyDown: this.cardSelectKeyDown, title: checkboxLabel },
-      h("calcite-checkbox", { checked: this.selected })));
+    return (h("calcite-label", { class: CSS.checkboxWrapper, onClick: this.cardSelectClick, onKeyDown: this.cardSelectKeyDown },
+      h("calcite-checkbox", { checked: this.selected, label: checkboxLabel })));
   }
   renderHeader() {
     const title = this.el.querySelector(`[slot=${SLOTS.title}]`);
@@ -189,8 +189,8 @@ export class CalciteCard {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Loading\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Loading\""
           }],
         "text": "string to override English loading text"
       },
@@ -210,8 +210,8 @@ export class CalciteCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Select\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Select\""
           }],
         "text": "string to override English select text for checkbox when selectable is true"
       },
@@ -231,8 +231,8 @@ export class CalciteCard {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Deselect\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Deselect\""
           }],
         "text": "string to override English deselect text for checkbox when selectable is true"
       },

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

@@ -236,8 +236,8 @@ export class CalciteCheckbox {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "The hovered state of the checkbox."
       },
@@ -275,8 +275,8 @@ export class CalciteCheckbox {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "The label of the checkbox input"
       },
@@ -353,8 +353,8 @@ export class CalciteCheckbox {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Emitted when the checkbox is blurred"
       },
@@ -386,8 +386,8 @@ export class CalciteCheckbox {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Emitted when the checkbox is focused"
       },

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

@@ -164,8 +164,8 @@ export class CalciteChip {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Close\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Close\""
           }],
         "text": "Aria label for the \"x\" button"
       },

package/dist/collection/components/calcite-color-picker/calcite-color-picker.js

@@ -140,9 +140,9 @@ export class CalciteColorPicker {
      * @see [ColorValue](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-color-picker/interfaces.ts#L10)
      */
     this.value = defaultValue;
-    this.colorUpdateLocked = false;
     this.colorFieldAndSliderHovered = false;
     this.hueThumbState = "idle";
+    this.internalColorUpdateContext = null;
     this.mode = CSSColorMode.HEX;
     this.shiftKeyChannelAdjustment = 0;
     this.sliderThumbState = "idle";
@@ -452,7 +452,7 @@ export class CalciteColorPicker {
     this.drawColorFieldAndSlider();
     this.updateChannelsFromColor(color);
     this.previousColor = oldColor;
-    if (this.colorUpdateLocked) {
+    if (this.internalColorUpdateContext) {
       return;
     }
     this.value = this.toValue(color);
@@ -479,7 +479,10 @@ export class CalciteColorPicker {
       this.setMode(nextMode);
     }
     const dragging = this.sliderThumbState === "drag" || this.hueThumbState === "drag";
-    if (this.colorUpdateLocked) {
+    if (this.internalColorUpdateContext) {
+      if (this.internalColorUpdateContext === "initial") {
+        return;
+      }
       this.calciteColorPickerInput.emit();
       if (!dragging) {
         this.calciteColorPickerChange.emit();
@@ -550,15 +553,15 @@ export class CalciteColorPicker {
   }
   connectedCallback() {
     const { allowEmpty, color, format, value } = this;
-    const valueIsNoColor = allowEmpty && !value;
+    const willSetNoColor = allowEmpty && !value;
     const parsedMode = parseMode(value);
-    const valueIsCompatible = (format === "auto" && parsedMode) || format === parsedMode;
-    const initialColor = valueIsNoColor ? null : valueIsCompatible ? Color(value) : color;
+    const valueIsCompatible = willSetNoColor || (format === "auto" && parsedMode) || format === parsedMode;
+    const initialColor = willSetNoColor ? null : valueIsCompatible ? Color(value) : color;
     if (!valueIsCompatible) {
       this.showIncompatibleColorWarning(value, format);
     }
     this.setMode(format);
-    this.internalColorSet(initialColor, false);
+    this.internalColorSet(initialColor, false, "initial");
     this.updateDimensions(this.scale);
   }
   disconnectedCallback() {
@@ -644,14 +647,14 @@ export class CalciteColorPicker {
     }
     return "none";
   }
-  internalColorSet(color, skipEqual = true) {
+  internalColorSet(color, skipEqual = true, context = "internal") {
     if (skipEqual && colorEqual(color, this.color)) {
       return;
     }
-    this.colorUpdateLocked = true;
+    this.internalColorUpdateContext = context;
     this.color = color;
     this.value = this.toValue(color);
-    this.colorUpdateLocked = false;
+    this.internalColorUpdateContext = null;
   }
   toValue(color, format = this.mode) {
     if (!color) {
@@ -850,8 +853,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Internal prop for advanced use-cases."
       },
@@ -874,8 +877,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"auto\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"auto\""
           }],
         "text": "The format of the value property.\n\nWhen \"auto\", the format will be inferred from `value` when set."
       },
@@ -949,8 +952,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"B\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"B\""
           }],
         "text": "Label used for the blue channel"
       },
@@ -970,8 +973,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Blue\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Blue\""
           }],
         "text": "Label used for the blue channel description"
       },
@@ -991,8 +994,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Delete color\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Delete color\""
           }],
         "text": "Label used for the delete color button."
       },
@@ -1012,8 +1015,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"G\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"G\""
           }],
         "text": "Label used for the green channel"
       },
@@ -1033,8 +1036,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Green\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Green\""
           }],
         "text": "Label used for the green channel description"
       },
@@ -1054,8 +1057,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"H\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"H\""
           }],
         "text": "Label used for the hue channel"
       },
@@ -1075,8 +1078,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"HSV\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"HSV\""
           }],
         "text": "Label used for the HSV mode"
       },
@@ -1096,8 +1099,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Hex\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Hex\""
           }],
         "text": "Label used for the hex input"
       },
@@ -1117,8 +1120,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Hue\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Hue\""
           }],
         "text": "Label used for the hue channel description"
       },
@@ -1138,8 +1141,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"No color\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"No color\""
           }],
         "text": "Label used for the hex input when there is no color selected."
       },
@@ -1159,8 +1162,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"R\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"R\""
           }],
         "text": "Label used for the red channel"
       },
@@ -1180,8 +1183,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Red\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Red\""
           }],
         "text": "Label used for the red channel description"
       },
@@ -1201,8 +1204,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"RGB\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"RGB\""
           }],
         "text": "Label used for the RGB mode"
       },
@@ -1222,8 +1225,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"S\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"S\""
           }],
         "text": "Label used for the saturation channel"
       },
@@ -1243,8 +1246,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Saturation\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Saturation\""
           }],
         "text": "Label used for the saturation channel description"
       },
@@ -1264,8 +1267,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Save color\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Save color\""
           }],
         "text": "Label used for the save color button."
       },
@@ -1285,8 +1288,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Saved\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Saved\""
           }],
         "text": "Label used for the saved colors section"
       },
@@ -1306,8 +1309,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"V\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"V\""
           }],
         "text": "Label used for the value channel"
       },
@@ -1327,8 +1330,8 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Value\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Value\""
           }],
         "text": "Label used for the"
       },
@@ -1393,11 +1396,11 @@ export class CalciteColorPicker {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"#007ac2\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"#007ac2\""
           }, {
-            "text": " [ColorValue](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-color-picker/interfaces.ts#L10)",
-            "name": "see"
+            "name": "see",
+            "text": " [ColorValue](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-color-picker/interfaces.ts#L10)"
           }],
         "text": "The color value.\n\nThis value can be either a {@link https://developer.mozilla.org/en-US/docs/Web/CSS/color|CSS string}\na RGB, HSL or HSV object.\n\nThe type will be preserved as the color is updated."
       },

package/dist/collection/components/calcite-color-picker-hex-input/calcite-color-picker-hex-input.js

@@ -229,8 +229,8 @@ export class CalciteColorPickerHexInput {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"Hex\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Hex\""
           }],
         "text": "Label used for the hex input."
       },
@@ -250,8 +250,8 @@ export class CalciteColorPickerHexInput {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "\"No color\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"No color\""
           }],
         "text": "Label used for the hex input when there is no color selected."
       },

package/dist/collection/components/calcite-color-picker-swatch/calcite-color-picker-swatch.js

@@ -82,8 +82,8 @@ export class CalciteColorPickerSwatch {
       "optional": false,
       "docs": {
         "tags": [{
-            "text": "https ://developer.mozilla.org/en-US/docs/Web/CSS/color_value",
-            "name": "see"
+            "name": "see",
+            "text": "https://developer.mozilla.org/en-US/docs/Web/CSS/color_value"
           }],
         "text": "The color value."
       },

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

@@ -152,7 +152,10 @@ export class CalciteCombobox {
       }
       this.calciteComboboxChipDismiss.emit(event.detail);
     };
-    this.setFocusClick = () => {
+    this.setFocusClick = (event) => {
+      if (event.composedPath().some((node) => node.tagName === "CALCITE-CHIP")) {
+        return;
+      }
       this.setFocus();
     };
     this.setInactiveIfNotContained = (event) => {
@@ -293,7 +296,7 @@ export class CalciteCombobox {
     const { popper, menuEl } = this;
     const modifiers = this.getModifiers();
     popper
-      ? updatePopper({
+      ? await updatePopper({
         el: menuEl,
         modifiers,
         placement: ComboboxDefaultPlacement,
@@ -414,7 +417,6 @@ export class CalciteCombobox {
       this.emitCalciteLookupChange();
       this.emitComboboxChange();
       this.resetText();
-      this.textInput.focus();
       this.filterItems("");
     }
     else {
@@ -882,8 +884,8 @@ export class CalciteCombobox {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": "use calciteComboboxChange instead",
-            "name": "deprecated"
+            "name": "deprecated",
+            "text": "use calciteComboboxChange instead"
           }],
         "text": "Called when the selected items set changes"
       },
@@ -957,8 +959,8 @@ export class CalciteCombobox {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Fired when the combobox is opened"
       },
@@ -975,8 +977,8 @@ export class CalciteCombobox {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Fired when the combobox is closed"
       },

package/dist/collection/components/calcite-date-picker/calcite-date-picker.js

@@ -555,8 +555,8 @@ export class CalciteDatePicker {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Previous month\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Previous month\""
           }],
         "text": "Localized string for \"previous month\" (used for aria label)"
       },
@@ -576,8 +576,8 @@ export class CalciteDatePicker {
       "optional": true,
       "docs": {
         "tags": [{
-            "text": "\"Next month\"",
-            "name": "default"
+            "name": "default",
+            "text": "\"Next month\""
           }],
         "text": "Localized string for \"next month\" (used for aria label)"
       },
@@ -726,8 +726,8 @@ export class CalciteDatePicker {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": " [DateRangeChange](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-date-picker/interfaces.ts#L1)",
-            "name": "see"
+            "name": "see",
+            "text": " [DateRangeChange](https://github.com/Esri/calcite-components/blob/master/src/components/calcite-date-picker/interfaces.ts#L1)"
           }],
         "text": "Trigger calcite date change when a user changes the date range."
       },

package/dist/collection/components/calcite-date-picker-day/calcite-date-picker-day.js

@@ -336,8 +336,8 @@ export class CalciteDatePickerDay {
       "composed": true,
       "docs": {
         "tags": [{
-            "text": undefined,
-            "name": "internal"
+            "name": "internal",
+            "text": undefined
           }],
         "text": "Emitted when user hovers over a day"
       },