@esri/calcite-components 1.0.0-beta.82 → 1.0.0-beta.85

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.82
+ * v1.0.0-beta.85
  */
 import { Component, Element, Event, h, Prop, Listen, Watch, State, Method } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -53,7 +53,8 @@ export class TileSelect {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    this.input.setFocus();
+    var _a;
+    (_a = this.input) === null || _a === void 0 ? void 0 : _a.setFocus();
   }
   //--------------------------------------------------------------------------
   //

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

@@ -1,6 +1,6 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.82
+ * v1.0.0-beta.85
  */
 export {};

package/dist/collection/components/tile-select-group/tile-select-group.css

@@ -83,8 +83,8 @@
   flex-wrap: wrap;
 }
 :host ::slotted(calcite-tile-select) {
-  margin-right: 1px;
   margin-bottom: 1px;
+  margin-inline-end: 1px;
 }
 
 :host([layout=vertical]) {

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.82
+ * v1.0.0-beta.85
  */
 import { Component, h, Prop, Element } from "@stencil/core";
 import { updateHostInteraction } from "../../utils/interactive";

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.82
+ * v1.0.0-beta.85
  */
 export const CSS = {
   button: "button",

package/dist/collection/components/time-picker/time-picker.css

@@ -109,7 +109,7 @@
   justify-content: center;
   background-color: var(--calcite-ui-foreground-1);
 }
-.time-picker .button:hover, .time-picker .button:focus {
+.time-picker .button:hover,  .time-picker .button:focus {
   background-color: var(--calcite-ui-foreground-2);
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -143,7 +143,7 @@
 .time-picker .input:hover {
   box-shadow: inset 0 0 0 2px var(--calcite-ui-foreground-2);
 }
-.time-picker .input:focus, .time-picker .input:hover:focus {
+.time-picker .input:focus,  .time-picker .input:hover:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
   box-shadow: inset 0 0 0 2px var(--calcite-ui-brand);
@@ -151,7 +151,8 @@
 .time-picker.scale-s {
   font-size: var(--calcite-font-size--1);
 }
-.time-picker.scale-s .button, .time-picker.scale-s .input {
+.time-picker.scale-s .button, 
+.time-picker.scale-s .input {
   padding-left: 0.75rem;
   padding-right: 0.75rem;
   padding-top: 0.25rem;
@@ -163,7 +164,8 @@
 .time-picker.scale-m {
   font-size: var(--calcite-font-size-0);
 }
-.time-picker.scale-m .button, .time-picker.scale-m .input {
+.time-picker.scale-m .button, 
+.time-picker.scale-m .input {
   padding-left: 1rem;
   padding-right: 1rem;
   padding-top: 0.5rem;
@@ -175,7 +177,8 @@
 .time-picker.scale-l {
   font-size: var(--calcite-font-size-1);
 }
-.time-picker.scale-l .button, .time-picker.scale-l .input {
+.time-picker.scale-l .button, 
+.time-picker.scale-l .input {
   padding-left: 1.25rem;
   padding-right: 1.25rem;
   padding-top: 0.75rem;

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.82
+ * v1.0.0-beta.85
  */
 import { Component, Element, h, Prop, Event, Watch, State, Listen, Method } from "@stencil/core";
 import { isActivationKey, numberKeys } from "../../utils/key";
@@ -18,56 +18,81 @@ export class TimePicker {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** aria-label for the hour input
+    /**
+     * aria-label for the hour input
+     *
      * @default "Hour"
      */
     this.intlHour = TEXT.hour;
-    /** aria-label for the hour down button
+    /**
+     * aria-label for the hour down button
+     *
      * @default "Decrease hour"
      */
     this.intlHourDown = TEXT.hourDown;
-    /** aria-label for the hour up button
+    /**
+     * aria-label for the hour up button
+     *
      * @default "Increase hour"
      */
     this.intlHourUp = TEXT.hourUp;
-    /** aria-label for the meridiem (am/pm) input
+    /**
+     * aria-label for the meridiem (am/pm) input
+     *
      * @default "AM/PM"
      */
     this.intlMeridiem = TEXT.meridiem;
-    /** aria-label for the meridiem (am/pm) down button
+    /**
+     * aria-label for the meridiem (am/pm) down button
+     *
      * @default "Decrease AM/PM"
      */
     this.intlMeridiemDown = TEXT.meridiemDown;
-    /** aria-label for the meridiem (am/pm) up button
+    /**
+     * aria-label for the meridiem (am/pm) up button
+     *
      * @default "Increase AM/PM"
      */
     this.intlMeridiemUp = TEXT.meridiemUp;
-    /** aria-label for the minute input
+    /**
+     * aria-label for the minute input
+     *
      * @default "Minute"
      */
     this.intlMinute = TEXT.minute;
-    /** aria-label for the minute down button
+    /**
+     * aria-label for the minute down button
+     *
      * @default "Decrease minute"
      */
     this.intlMinuteDown = TEXT.minuteDown;
-    /** aria-label for the minute up button
+    /**
+     * aria-label for the minute up button
+     *
      * @default "Increase minute"
      */
     this.intlMinuteUp = TEXT.minuteUp;
-    /** aria-label for the second input
+    /**
+     * aria-label for the second input
+     *
      * @default "Second"
      */
     this.intlSecond = TEXT.second;
-    /** aria-label for the second down button
+    /**
+     * aria-label for the second down button
+     *
      * @default "Decrease second"
      */
     this.intlSecondDown = TEXT.secondDown;
-    /** aria-label for the second up button
+    /**
+     * aria-label for the second up button
+     *
      * @default "Increase second"
      */
     this.intlSecondUp = TEXT.secondUp;
     /**
      * BCP 47 language tag for desired language and country format
+     *
      * @internal
      */
     this.locale = document.documentElement.lang || navigator.language || "en";
@@ -365,7 +390,7 @@ export class TimePicker {
         this.value = null;
       }
       if (emit) {
-        this.calciteTimePickerChange.emit();
+        this.calciteInternalTimePickerChange.emit();
       }
     };
     this.setValuePart = (key, value, emit = true) => {
@@ -404,7 +429,7 @@ export class TimePicker {
         ? ((_a = localizeTimeStringToParts(this.value, this.locale)) === null || _a === void 0 ? void 0 : _a.localizedMeridiem) || null
         : localizeTimePart(this.meridiem, "meridiem", this.locale);
       if (emit) {
-        this.calciteTimePickerChange.emit();
+        this.calciteInternalTimePickerChange.emit();
       }
     };
   }
@@ -421,10 +446,10 @@ export class TimePicker {
   //
   //--------------------------------------------------------------------------
   hostBlurHandler() {
-    this.calciteTimePickerBlur.emit();
+    this.calciteInternalTimePickerBlur.emit();
   }
   hostFocusHandler() {
-    this.calciteTimePickerFocus.emit();
+    this.calciteInternalTimePickerFocus.emit();
   }
   keyDownHandler(event) {
     const key = event.key;
@@ -480,7 +505,11 @@ export class TimePicker {
   //  Public Methods
   //
   //--------------------------------------------------------------------------
-  /** Sets focus on the component. */
+  /**
+   * Sets focus on the component.
+   *
+   * @param target
+   */
   async setFocus(target) {
     var _a;
     (_a = this[`${target || "hour"}El`]) === null || _a === void 0 ? void 0 : _a.focus();
@@ -962,8 +991,8 @@ export class TimePicker {
     "showSecond": {}
   }; }
   static get events() { return [{
-      "method": "calciteTimePickerBlur",
-      "name": "calciteTimePickerBlur",
+      "method": "calciteInternalTimePickerBlur",
+      "name": "calciteInternalTimePickerBlur",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -980,8 +1009,8 @@ export class TimePicker {
         "references": {}
       }
     }, {
-      "method": "calciteTimePickerChange",
-      "name": "calciteTimePickerChange",
+      "method": "calciteInternalTimePickerChange",
+      "name": "calciteInternalTimePickerChange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -998,8 +1027,8 @@ export class TimePicker {
         "references": {}
       }
     }, {
-      "method": "calciteTimePickerFocus",
-      "name": "calciteTimePickerFocus",
+      "method": "calciteInternalTimePickerFocus",
+      "name": "calciteInternalTimePickerFocus",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -1021,7 +1050,10 @@ export class TimePicker {
       "complexType": {
         "signature": "(target: TimePart) => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "target"
+              }],
             "text": ""
           }],
         "references": {
@@ -1037,7 +1069,10 @@ export class TimePicker {
       },
       "docs": {
         "text": "Sets focus on the component.",
-        "tags": []
+        "tags": [{
+            "name": "param",
+            "text": "target"
+          }]
       }
     }
   }; }

package/dist/collection/components/tip/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.82
+ * v1.0.0-beta.85
  */
 import { HEADING_LEVEL as PARENT_HEADING_LEVEL } from "../tip-manager/resources";
 export const CSS = {

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

@@ -101,7 +101,8 @@
   padding: 1rem;
 }
 
-:host([dismissed]), :host([dismissed]) .container {
+:host([dismissed]), 
+:host([dismissed]) .container {
   display: none;
 }
 
@@ -147,7 +148,8 @@ h3.heading {
   line-height: 1.25rem;
 }
 
-h4.heading, h5.heading {
+h4.heading, 
+h5.heading {
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }
@@ -187,9 +189,7 @@ h4.heading, h5.heading {
 }
 
 ::slotted(a) {
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
   color: var(--calcite-ui-brand);
 }
 

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.82
+ * v1.0.0-beta.85
  */
 import { Component, Element, Event, Prop, h, Fragment } from "@stencil/core";
 import { CSS, ICONS, SLOTS, TEXT, HEADING_LEVEL } from "./resources";

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.82
+ * v1.0.0-beta.85
  */
 import { Component, Prop, h } from "@stencil/core";
 /**

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.82
+ * v1.0.0-beta.85
  */
 export const CSS = {
   header: "header",

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

@@ -139,7 +139,8 @@ h3.heading {
   line-height: 1.25rem;
 }
 
-h4.heading, h5.heading {
+h4.heading, 
+h5.heading {
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
 }
@@ -165,9 +166,7 @@ h4.heading, h5.heading {
 .container {
   position: relative;
   overflow: hidden;
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
   min-height: 150px;
 }
 .container:focus {
@@ -181,9 +180,7 @@ h4.heading, h5.heading {
   align-items: flex-start;
   justify-content: center;
   overflow: auto;
-  outline-offset: 0;
   outline-color: transparent;
-  transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
   animation-name: none;
   animation-duration: var(--calcite-animation-timing);
   height: var(--calcite-tip-manager-height);

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.82
+ * v1.0.0-beta.85
  */
 import { Component, Element, Event, Method, Prop, State, Watch, h } from "@stencil/core";
 import { CSS, ICONS, TEXT, HEADING_LEVEL } from "./resources";

package/dist/collection/components/tooltip/TooltipManager.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.82
+ * v1.0.0-beta.85
  */
 import { TOOLTIP_DELAY_MS } from "./resources";
 export default class TooltipManager {
@@ -40,7 +40,11 @@ export default class TooltipManager {
       this.hoverEvent(event, false);
     };
     this.clickHandler = (event) => {
-      this.clickedTooltip = this.queryTooltip(event.composedPath());
+      const clickedTooltip = this.queryTooltip(event.composedPath());
+      this.clickedTooltip = clickedTooltip;
+      if (clickedTooltip === null || clickedTooltip === void 0 ? void 0 : clickedTooltip.closeOnClick) {
+        this.toggleTooltip(clickedTooltip, false);
+      }
     };
     this.focusShow = (event) => {
       this.focusEvent(event, true);
@@ -82,7 +86,7 @@ export default class TooltipManager {
     document.addEventListener("mouseover", this.mouseEnterShow, { capture: true });
     document.addEventListener("mouseout", this.mouseLeaveHide, { capture: true });
     document.addEventListener("pointerdown", this.clickHandler, { capture: true });
-    document.addEventListener("focusin", this.focusShow), { capture: true };
+    document.addEventListener("focusin", this.focusShow, { capture: true });
     document.addEventListener("focusout", this.blurHide, { capture: true });
   }
   removeListeners() {

package/dist/collection/components/tooltip/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.82
+ * v1.0.0-beta.85
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/tooltip/tooltip.css

@@ -123,6 +123,11 @@
   opacity: 0;
 }
 
+:host([calcite-hydrated-hidden]) {
+  visibility: hidden !important;
+  pointer-events: none;
+}
+
 .arrow,
 .arrow::before {
   position: absolute;
@@ -158,9 +163,6 @@
 
 .container {
   position: relative;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
   overflow: hidden;
   border-radius: 0.25rem;
   background-color: var(--calcite-ui-foreground-1);
@@ -174,6 +176,7 @@
   color: var(--calcite-ui-text-1);
   max-width: 20rem;
   max-height: 20rem;
+  text-align: start;
 }
 
 .calcite-popper-anim {

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.82
+ * v1.0.0-beta.85
  */
 import { Component, Element, Host, Method, Prop, State, Watch, h } from "@stencil/core";
 import { CSS, ARIA_DESCRIBED_BY } from "./resources";
@@ -15,23 +15,32 @@ const manager = new TooltipManager();
  */
 export class Tooltip {
   constructor() {
+    // --------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    // --------------------------------------------------------------------------
+    /** Closes the component when the `referenceElement` is clicked. */
+    this.closeOnClick = false;
     /**
-     * Offset the position of the tooltip away from the reference element.
+     * Offset the position of the component away from the `referenceElement`.
+     *
      * @default 6
      */
     this.offsetDistance = defaultOffsetDistance;
     /**
-     * Offset the position of the tooltip along the reference element.
+     * Offset the position of the component along the `referenceElement`.
      */
     this.offsetSkidding = 0;
     /**
-     * Display and position the component.
+     * When true, the component is open.
      */
     this.open = false;
-    /** Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value. */
+    /** Describes the positioning type to use for the overlaid content. If the `referenceElement` is in a fixed container, use the "fixed" value. */
     this.overlayPositioning = "absolute";
     /**
-     * Determines where the component will be positioned relative to the referenceElement.
+     * Determines where the component will be positioned relative to the `referenceElement`.
+     *
      * @see [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)
      */
     this.placement = "auto";
@@ -62,7 +71,9 @@ export class Tooltip {
         return;
       }
       const id = this.getId();
-      effectiveReferenceElement.setAttribute(ARIA_DESCRIBED_BY, id);
+      if ("setAttribute" in effectiveReferenceElement) {
+        effectiveReferenceElement.setAttribute(ARIA_DESCRIBED_BY, id);
+      }
       manager.registerElement(effectiveReferenceElement, this.el);
     };
     this.removeReferences = () => {
@@ -70,7 +81,9 @@ export class Tooltip {
       if (!effectiveReferenceElement) {
         return;
       }
-      effectiveReferenceElement.removeAttribute(ARIA_DESCRIBED_BY);
+      if ("removeAttribute" in effectiveReferenceElement) {
+        effectiveReferenceElement.removeAttribute(ARIA_DESCRIBED_BY);
+      }
       manager.unregisterElement(effectiveReferenceElement);
     };
   }
@@ -178,7 +191,7 @@ export class Tooltip {
     const { effectiveReferenceElement, label, open } = this;
     const displayed = effectiveReferenceElement && open;
     const hidden = !displayed;
-    return (h(Host, { "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "calcite-hydrated-hidden": hidden, id: this.getId(), role: "tooltip" },
+    return (h(Host, { "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "aria-live": "polite", "calcite-hydrated-hidden": hidden, id: this.getId(), role: "tooltip" },
       h("div", { class: {
           [PopperCSS.animation]: true,
           [PopperCSS.animationActive]: displayed
@@ -196,6 +209,24 @@ export class Tooltip {
     "$": ["tooltip.css"]
   }; }
   static get properties() { return {
+    "closeOnClick": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Closes the component when the `referenceElement` is clicked."
+      },
+      "attribute": "close-on-click",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "label": {
       "type": "string",
       "mutable": false,
@@ -208,7 +239,7 @@ export class Tooltip {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Accessible name for the component"
+        "text": "Accessible name for the component."
       },
       "attribute": "label",
       "reflect": false
@@ -228,7 +259,7 @@ export class Tooltip {
             "name": "default",
             "text": "6"
           }],
-        "text": "Offset the position of the tooltip away from the reference element."
+        "text": "Offset the position of the component away from the `referenceElement`."
       },
       "attribute": "offset-distance",
       "reflect": true,
@@ -246,7 +277,7 @@ export class Tooltip {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Offset the position of the tooltip along the reference element."
+        "text": "Offset the position of the component along the `referenceElement`."
       },
       "attribute": "offset-skidding",
       "reflect": true,
@@ -264,7 +295,7 @@ export class Tooltip {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Display and position the component."
+        "text": "When true, the component is open."
       },
       "attribute": "open",
       "reflect": true,
@@ -287,7 +318,7 @@ export class Tooltip {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Describes the type of positioning to use for the overlaid content. If your element is in a fixed container, use the 'fixed' value."
+        "text": "Describes the positioning type to use for the overlaid content. If the `referenceElement` is in a fixed container, use the \"fixed\" value."
       },
       "attribute": "overlay-positioning",
       "reflect": false,
@@ -313,7 +344,7 @@ export class Tooltip {
             "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."
+        "text": "Determines where the component will be positioned relative to the `referenceElement`."
       },
       "attribute": "placement",
       "reflect": true,
@@ -323,11 +354,12 @@ export class Tooltip {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "HTMLElement | string",
-        "resolved": "HTMLElement | string",
+        "original": "ReferenceElement | string",
+        "resolved": "Element | string | ({ getBoundingClientRect: () => ClientRect | DOMRect; contextElement?: Element; })",
         "references": {
-          "HTMLElement": {
-            "location": "global"
+          "ReferenceElement": {
+            "location": "import",
+            "path": "../../utils/popper"
           }
         }
       },
@@ -335,7 +367,7 @@ export class Tooltip {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Reference HTMLElement used to position this component according to the placement property. As a convenience, a string ID of the reference element can be used. However, setting this property to use an HTMLElement is preferred so that the component does not need to query the DOM for the referenceElement."
+        "text": "The `referenceElement` to position the component according to its \"placement\" value. Setting to the `HTMLElement` is preferred so the component does not need to query the DOM for the `referenceElement`. However, a string ID of the reference element can be used."
       },
       "attribute": "reference-element",
       "reflect": false