@esri/calcite-components 1.0.0-beta.63 → 1.0.0-beta.67

package/dist/collection/components/calcite-tab-title/calcite-tab-title.js

@@ -3,6 +3,10 @@ import { guid } from "../../utils/guid";
 import { getElementDir, getElementProp } from "../../utils/dom";
 import { getKey } from "../../utils/key";
 import { CSS_UTILITY } from "../../utils/resources";
+import { createObserver } from "../../utils/observers";
+/**
+ * @slot - A slot for adding text.
+ */
 export class CalciteTabTitle {
   constructor() {
     //--------------------------------------------------------------------------
@@ -16,6 +20,13 @@ export class CalciteTabTitle {
     this.disabled = false;
     /** @internal Parent tabs component bordered value */
     this.bordered = false;
+    //--------------------------------------------------------------------------
+    //
+    //  Private State/Props
+    //
+    //--------------------------------------------------------------------------
+    /** watches for changing text content **/
+    this.mutationObserver = createObserver("mutation", () => this.updateHasText());
     /** determine if there is slotted text for styling purposes */
     this.hasText = false;
     /**
@@ -39,10 +50,10 @@ export class CalciteTabTitle {
     this.parentTabsEl = this.el.closest("calcite-tabs");
   }
   disconnectedCallback() {
-    var _a;
-    this.observer.disconnect();
+    var _a, _b;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     // Dispatching to body in order to be listened by other elements that are still connected to the DOM.
-    (_a = document.body) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent("calciteTabTitleUnregister", {
+    (_b = document.body) === null || _b === void 0 ? void 0 : _b.dispatchEvent(new CustomEvent("calciteTabTitleUnregister", {
       detail: this.el
     }));
   }
@@ -159,12 +170,8 @@ export class CalciteTabTitle {
     this.hasText = this.el.textContent.trim().length > 0;
   }
   setupTextContentObserver() {
-    if (Build.isBrowser) {
-      this.observer = new MutationObserver(() => {
-        this.updateHasText();
-      });
-      this.observer.observe(this.el, { childList: true, subtree: true });
-    }
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
   }
   emitActiveTab() {
     if (!this.disabled) {
@@ -358,7 +365,7 @@ export class CalciteTabTitle {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [{
             "text": "Parent tabs component bordered value",

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

@@ -1,7 +1,8 @@
 import { Component, Prop, h, Element, Listen, State, Fragment } from "@stencil/core";
 import { SLOTS } from "./resources";
 /**
- * @slot tab-nav - a slot for adding a tab navigation component
+ * @slot - A slot for adding `calcite-tab`s.
+ * @slot tab-nav - A slot for adding a tab navigation component.
  */
 export class CalciteTabs {
   constructor() {
@@ -237,7 +238,7 @@ export class CalciteTabs {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "Optionally enable tabs to appear like a folder-style menu when its layout is \"inline\""

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

@@ -113,6 +113,15 @@
   padding: 0;
 }
 
+:host([icon][heading]:not([description])) .icon {
+  display: flex;
+  justify-content: center;
+}
+
+:host([icon][heading]:not([description])) .large-visual {
+  text-align: center;
+}
+
 :host([disabled]) {
   opacity: var(--calcite-ui-opacity-disabled);
   pointer-events: none;

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

@@ -7,6 +7,13 @@ import { getSlotted } from "../../utils/dom";
  */
 export class CalciteTile {
   constructor() {
+    //--------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    //--------------------------------------------------------------------------
+    /** The active state of the tile. */
+    this.active = false;
     /**
      * When true, prevents interaction.
      */
@@ -15,7 +22,7 @@ export class CalciteTile {
     this.embed = false;
     /**
      * The focused state of the tile.
-     * @private
+     * @internal
      */
     this.focused = false;
     /** The hidden state of the tile. */
@@ -68,13 +75,14 @@ export class CalciteTile {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "The active state of the tile."
       },
       "attribute": "active",
-      "reflect": true
+      "reflect": true,
+      "defaultValue": "false"
     },
     "description": {
       "type": "string",
@@ -142,7 +150,7 @@ export class CalciteTile {
       "docs": {
         "tags": [{
             "text": undefined,
-            "name": "private"
+            "name": "internal"
           }],
         "text": "The focused state of the tile."
       },

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

@@ -1,7 +1,10 @@
-import { Component, Element, h, Prop, Listen, Watch, State, Method } from "@stencil/core";
+import { Component, Element, Event, h, Prop, Listen, Watch, State, Method } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";
 import { CSS_UTILITY } from "../../utils/resources";
 import { guid } from "../../utils/guid";
+/**
+ * @slot - A slot for adding custom content.
+ */
 export class CalciteTileSelect {
   constructor() {
     //--------------------------------------------------------------------------
@@ -45,6 +48,7 @@ export class CalciteTileSelect {
   //  Public Methods
   //
   //--------------------------------------------------------------------------
+  /** Sets focus on the component. */
   async setFocus() {
     this.input.setFocus();
   }
@@ -53,30 +57,42 @@ export class CalciteTileSelect {
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
-  calciteCheckboxChangeEvent(event) {
+  checkboxChangeHandler(event) {
     const checkbox = event.target;
     if (checkbox === this.input) {
       this.checked = checkbox.checked;
     }
+    event.stopPropagation();
+    this.calciteTileSelectChange.emit();
   }
-  calciteCheckboxFocusedChangeEvent(event) {
+  checkboxFocusHandler(event) {
     const checkbox = event.target;
     if (checkbox === this.input) {
       this.focused = event.detail;
     }
+    event.stopPropagation();
   }
-  calciteRadioButtonCheckedChangeEvent(event) {
+  radioButtonChangeHandler(event) {
     const radioButton = event.target;
     if (radioButton === this.input) {
       this.checked = radioButton.checked;
     }
     event.stopPropagation();
+    this.calciteTileSelectChange.emit();
   }
-  calciteRadioButtonFocusedChangeEvent(event) {
+  radioButtonCheckedChangeHandler(event) {
+    const radioButton = event.target;
+    if (radioButton === this.input) {
+      this.checked = radioButton.checked;
+    }
+    event.stopPropagation();
+  }
+  radioButtonFocusHandler(event) {
     const radioButton = event.target;
     if (radioButton === this.input) {
       this.focused = radioButton.focused;
     }
+    event.stopPropagation();
   }
   click(event) {
     const target = event.target;
@@ -384,6 +400,22 @@ export class CalciteTileSelect {
   static get states() { return {
     "focused": {}
   }; }
+  static get events() { return [{
+      "method": "calciteTileSelectChange",
+      "name": "calciteTileSelectChange",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emits a custom change event.  For checkboxes, it emits when the checkbox is checked or unchecked.  For radios it only emits when it is checked."
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
   static get methods() { return {
     "setFocus": {
       "complexType": {
@@ -397,7 +429,7 @@ export class CalciteTileSelect {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }
@@ -412,25 +444,31 @@ export class CalciteTileSelect {
     }]; }
   static get listeners() { return [{
       "name": "calciteCheckboxChange",
-      "method": "calciteCheckboxChangeEvent",
+      "method": "checkboxChangeHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "calciteInternalCheckboxFocus",
+      "method": "checkboxFocusHandler",
       "target": undefined,
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteCheckboxFocusedChange",
-      "method": "calciteCheckboxFocusedChangeEvent",
+      "name": "calciteRadioButtonChange",
+      "method": "radioButtonChangeHandler",
       "target": undefined,
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteRadioButtonCheckedChange",
-      "method": "calciteRadioButtonCheckedChangeEvent",
+      "name": "calciteInternalRadioButtonCheckedChange",
+      "method": "radioButtonCheckedChangeHandler",
       "target": undefined,
       "capture": false,
       "passive": false
     }, {
-      "name": "calciteRadioButtonFocusedChange",
-      "method": "calciteRadioButtonFocusedChangeEvent",
+      "name": "calciteInternalRadioButtonFocus",
+      "method": "radioButtonFocusHandler",
       "target": undefined,
       "capture": false,
       "passive": false

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

@@ -1,4 +1,7 @@
 import { Component, h, Prop } from "@stencil/core";
+/**
+ * @slot - A slot for adding `calcite-tile-select`s.
+ */
 export class CalciteTileSelectGroup {
   constructor() {
     //--------------------------------------------------------------------------

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

@@ -96,12 +96,7 @@ export class CalciteTimePicker {
       let newValue;
       if (isValidNumber(this[key])) {
         const valueAsNumber = parseInt(this[key]);
-        if (valueAsNumber === 0) {
-          newValue = 59;
-        }
-        else {
-          newValue = valueAsNumber - 1;
-        }
+        newValue = valueAsNumber === 0 ? 59 : valueAsNumber - 1;
       }
       else {
         newValue = 59;
@@ -130,12 +125,10 @@ export class CalciteTimePicker {
         if (isValidNumber(this.hour)) {
           switch (this.hourDisplayFormat) {
             case "12":
-              if (this.hour === "01" && keyAsNumber >= 0 && keyAsNumber <= 2) {
-                newHour = `1${keyAsNumber}`;
-              }
-              else {
-                newHour = keyAsNumber;
-              }
+              newHour =
+                this.hour === "01" && keyAsNumber >= 0 && keyAsNumber <= 2
+                  ? `1${keyAsNumber}`
+                  : keyAsNumber;
               break;
             case "24":
               if (this.hour === "01") {
@@ -255,12 +248,10 @@ export class CalciteTimePicker {
         let newMinute;
         if (isValidNumber(this.minute) && this.minute.startsWith("0")) {
           const minuteAsNumber = parseInt(this.minute);
-          if (minuteAsNumber > maxTenthForMinuteAndSecond) {
-            newMinute = keyAsNumber;
-          }
-          else {
-            newMinute = `${minuteAsNumber}${keyAsNumber}`;
-          }
+          newMinute =
+            minuteAsNumber > maxTenthForMinuteAndSecond
+              ? keyAsNumber
+              : `${minuteAsNumber}${keyAsNumber}`;
         }
         else {
           newMinute = keyAsNumber;
@@ -305,12 +296,10 @@ export class CalciteTimePicker {
         let newSecond;
         if (isValidNumber(this.second) && this.second.startsWith("0")) {
           const secondAsNumber = parseInt(this.second);
-          if (secondAsNumber > maxTenthForMinuteAndSecond) {
-            newSecond = keyAsNumber;
-          }
-          else {
-            newSecond = `${secondAsNumber}${keyAsNumber}`;
-          }
+          newSecond =
+            secondAsNumber > maxTenthForMinuteAndSecond
+              ? keyAsNumber
+              : `${secondAsNumber}${keyAsNumber}`;
         }
         else {
           newSecond = keyAsNumber;
@@ -463,6 +452,7 @@ export class CalciteTimePicker {
   //  Public Methods
   //
   //--------------------------------------------------------------------------
+  /** Sets focus on the component. */
   async setFocus(target) {
     var _a;
     (_a = this[`${target || "hour"}El`]) === null || _a === void 0 ? void 0 : _a.focus();
@@ -1063,7 +1053,7 @@ export class CalciteTimePicker {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }

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

@@ -125,38 +125,41 @@
   margin: 0;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  align-content: space-between;
   color: var(--calcite-ui-text-2);
-  fill: var(--calcite-ui-text-2);
+  fill: ;
 }
 
 .heading {
-  padding: 0;
-  margin: 0;
   font-weight: var(--calcite-font-weight-medium);
-  line-height: 1.5;
+  margin: 0;
+  padding: 0;
 }
 
 .header .heading {
-  flex: 1 0 auto;
-  padding: var(--calcite-spacing-half) var(--calcite-spacing-half);
+  flex: 1 1 auto;
+  padding: 0.5rem;
 }
 
 h1.heading {
   font-size: var(--calcite-font-size-2);
+  line-height: 1.5rem;
 }
 
 h2.heading {
   font-size: var(--calcite-font-size-1);
+  line-height: 1.5rem;
 }
 
 h3.heading {
   font-size: var(--calcite-font-size-0);
+  line-height: 1.25rem;
 }
 
 h4.heading,
 h5.heading {
   font-size: var(--calcite-font-size--1);
+  line-height: 1rem;
 }
 
 .header {

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

@@ -3,6 +3,7 @@ import { CSS, ICONS, SLOTS, TEXT, HEADING_LEVEL } from "./resources";
 import { getSlotted } from "../../utils/dom";
 import { CalciteHeading, constrainHeadingLevel } from "../functional/CalciteHeading";
 /**
+ * @slot - A slot for adding text and a hyperlink.
  * @slot thumbnail - A slot for adding an HTML image element to the tip.
  */
 export class CalciteTip {
@@ -20,6 +21,10 @@ export class CalciteTip {
      * Indicates whether the tip can be dismissed.
      */
     this.nonDismissible = false;
+    /**
+     * The selected state of the tip if it is being used inside a `calcite-tip-manager`.
+     */
+    this.selected = false;
     // --------------------------------------------------------------------------
     //
     //  Private Methods
@@ -163,13 +168,14 @@ export class CalciteTip {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "The selected state of the tip if it is being used inside a `calcite-tip-manager`."
       },
       "attribute": "selected",
-      "reflect": true
+      "reflect": true,
+      "defaultValue": "false"
     },
     "intlClose": {
       "type": "string",

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

@@ -1,4 +1,7 @@
 import { Component, Prop, h } from "@stencil/core";
+/**
+ * @slot - A slot for adding `calcite-tip`s.
+ */
 export class CalciteTipGroup {
   render() {
     return h("slot", null);

package/dist/collection/components/calcite-tip-manager/calcite-tip-manager.css

@@ -117,38 +117,41 @@
   margin: 0;
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  align-content: space-between;
   color: var(--calcite-ui-text-2);
-  fill: var(--calcite-ui-text-2);
+  fill: ;
 }
 
 .heading {
-  padding: 0;
-  margin: 0;
   font-weight: var(--calcite-font-weight-medium);
-  line-height: 1.5;
+  margin: 0;
+  padding: 0;
 }
 
 .header .heading {
-  flex: 1 0 auto;
-  padding: var(--calcite-spacing-half) var(--calcite-spacing-half);
+  flex: 1 1 auto;
+  padding: 0.5rem;
 }
 
 h1.heading {
   font-size: var(--calcite-font-size-2);
+  line-height: 1.5rem;
 }
 
 h2.heading {
   font-size: var(--calcite-font-size-1);
+  line-height: 1.5rem;
 }
 
 h3.heading {
   font-size: var(--calcite-font-size-0);
+  line-height: 1.25rem;
 }
 
 h4.heading,
 h5.heading {
   font-size: var(--calcite-font-size--1);
+  line-height: 1rem;
 }
 
 .header {
@@ -162,11 +165,12 @@ h5.heading {
   padding-bottom: 0;
 }
 
-h2.heading {
+.header h2.heading {
   font-weight: var(--calcite-font-weight-bold);
   color: var(--calcite-ui-text-1);
   font-size: var(--calcite-font-size-1);
   line-height: 1.5rem;
+  padding: 0;
 }
 
 .container {

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

@@ -2,6 +2,7 @@ import { Component, Element, Event, Method, Prop, State, Watch, h } from "@stenc
 import { CSS, ICONS, TEXT, HEADING_LEVEL } from "./resources";
 import { getElementDir } from "../../utils/dom";
 import { CalciteHeading } from "../functional/CalciteHeading";
+import { createObserver } from "../../utils/observers";
 /**
  * @slot - A slot for adding `calcite-tip`s.
  */
@@ -16,7 +17,7 @@ export class CalciteTipManager {
      * Alternate text for closing the `calcite-tip-manager`.
      */
     this.closed = false;
-    this.observer = new MutationObserver(() => this.setUpTips());
+    this.mutationObserver = createObserver("mutation", () => this.setUpTips());
     this.hideTipManager = () => {
       this.closed = true;
       this.calciteTipManagerToggle.emit();
@@ -68,22 +69,26 @@ export class CalciteTipManager {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
+    var _a;
     this.setUpTips();
-    this.observer.observe(this.el, { childList: true, subtree: true });
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
   }
   disconnectedCallback() {
-    this.observer.disconnect();
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
   }
   // --------------------------------------------------------------------------
   //
   //  Public Methods
   //
   // --------------------------------------------------------------------------
+  /** Selects the next tip to display */
   async nextTip() {
     this.direction = "advancing";
     const nextIndex = this.selectedIndex + 1;
     this.selectedIndex = (nextIndex + this.total) % this.total;
   }
+  /** Selects the previous tip to display */
   async previousTip() {
     this.direction = "retreating";
     const previousIndex = this.selectedIndex - 1;
@@ -146,7 +151,8 @@ export class CalciteTipManager {
     return (h("section", { "aria-hidden": closed.toString(), class: CSS.container, hidden: closed, onKeyUp: this.tipManagerKeyUpHandler, ref: this.storeContainerRef, tabIndex: 0 },
       h("header", { class: CSS.header },
         h(CalciteHeading, { class: CSS.heading, level: headingLevel || HEADING_LEVEL }, groupTitle),
-        h("calcite-action", { class: CSS.close, icon: ICONS.close, onClick: this.hideTipManager, scale: "m", text: closeLabel })),
+        h("calcite-action", { class: CSS.close, onClick: this.hideTipManager, scale: "m", text: closeLabel },
+          h("calcite-icon", { icon: ICONS.close, scale: "m" }))),
       h("div", { class: {
           [CSS.tipContainer]: true,
           [CSS.tipContainerAdvancing]: !closed && direction === "advancing",
@@ -326,7 +332,7 @@ export class CalciteTipManager {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Selects the next tip to display",
         "tags": []
       }
     },
@@ -342,7 +348,7 @@ export class CalciteTipManager {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Selects the previous tip to display",
         "tags": []
       }
     }

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

@@ -3,6 +3,9 @@ import { CSS, TOOLTIP_REFERENCE, ARIA_DESCRIBED_BY } from "./resources";
 import { guid } from "../../utils/guid";
 import { defaultOffsetDistance, createPopper, updatePopper, CSS as PopperCSS } from "../../utils/popper";
 import { queryElementRoots } from "../../utils/dom";
+/**
+ * @slot - A slot for adding text.
+ */
 export class CalciteTooltip {
   constructor() {
     /**
@@ -105,6 +108,7 @@ export class CalciteTooltip {
   //  Public Methods
   //
   // --------------------------------------------------------------------------
+  /** Updates the position of the component. */
   async reposition() {
     const { popper, el, placement } = this;
     const modifiers = this.getModifiers();
@@ -348,7 +352,7 @@ export class CalciteTooltip {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Updates the position of the component.",
         "tags": []
       }
     }

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

@@ -2,7 +2,7 @@ import { Component, Element, Prop, Host, Event, Listen, h } from "@stencil/core"
 import { focusElement, nodeListToArray } from "../../utils/dom";
 import { TreeSelectionMode } from "./interfaces";
 /**
- * @slot children - a slot for adding child components, commonly calcite-tree-item
+ * @slot - A slot for `calcite-tree-item` elements.
  */
 export class CalciteTree {
   constructor() {