@esri/calcite-components 1.0.0-beta.83 → 1.0.0-beta.86

package/dist/collection/components/pick-list-item/pick-list-item.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.83
+ * v1.0.0-beta.86
  */
 import { Component, Element, Event, Fragment, h, Method, Prop, Watch } from "@stencil/core";
 import { CSS, ICONS, SLOTS, TEXT } from "./resources";
@@ -10,17 +10,17 @@ import { getSlotted, toAriaBoolean } from "../../utils/dom";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 import { updateHostInteraction } from "../../utils/interactive";
 /**
- * @slot actions-end - a slot for adding actions or content to the end side of the item.
- * @slot actions-start - a slot for adding actions or content to the start side of the item.
+ * @slot actions-end - A slot for adding actions or content to the end side of the component.
+ * @slot actions-start - A slot for adding actions or content to the start side of the component.
  */
 export class PickListItem {
   constructor() {
     /**
-     * When true, the item cannot be clicked and is visually muted.
+     * When true, interaction is prevented and the component is displayed with lower opacity.
      */
     this.disabled = false;
     /**
-     * When false, the item cannot be deselected by user interaction.
+     * When false, the component cannot be deselected by user interaction.
      */
     this.disableDeselect = false;
     /**
@@ -34,15 +34,15 @@ export class PickListItem {
      */
     this.icon = null;
     /**
-     * Set this to true to display a remove action that removes the item from the list.
+     * When true, displays a remove action that removes the item from the list.
      */
     this.removable = false;
     /**
-     * Set this to true to pre-select an item. Toggles when an item is checked/unchecked.
+     * When true, selects an item. Toggles when an item is checked/unchecked.
      */
     this.selected = false;
     /**
-     * Used as an accessible label (aria-label) for the "remove item" action. Only applicable if removable is true.
+     * Accessible name for the component's remove button. Only applicable if removable is "true".
      *
      * @default "Remove"
      */
@@ -113,7 +113,7 @@ export class PickListItem {
   //
   // --------------------------------------------------------------------------
   /**
-   * Used to toggle the selection state. By default this won't trigger an event.
+   * Toggles the selection state. By default this won't trigger an event.
    * The first argument allows the value to be coerced, rather than swapping values.
    *
    * @param coerce
@@ -189,7 +189,7 @@ export class PickListItem {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "An optional description for this item.  This will appear below the label text."
+        "text": "A description for the component that displays below the label text."
       },
       "attribute": "description",
       "reflect": true
@@ -206,7 +206,7 @@ export class PickListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, the item cannot be clicked and is visually muted."
+        "text": "When true, interaction is prevented and the component is displayed with lower opacity."
       },
       "attribute": "disabled",
       "reflect": true,
@@ -224,7 +224,7 @@ export class PickListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When false, the item cannot be deselected by user interaction."
+        "text": "When false, the component cannot be deselected by user interaction."
       },
       "attribute": "disable-deselect",
       "reflect": false,
@@ -289,7 +289,7 @@ export class PickListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The main label for this item. This will appear next to the icon."
+        "text": "Label and accessible name for the component. Appears next to the icon."
       },
       "attribute": "label",
       "reflect": true
@@ -310,7 +310,7 @@ export class PickListItem {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Used to provide additional metadata to an item, primarily used when the parent list has a filter."
+        "text": "Provides additional metadata to the component. Primary use is for a filter on the parent list."
       }
     },
     "removable": {
@@ -325,7 +325,7 @@ export class PickListItem {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Set this to true to display a remove action that removes the item from the list."
+        "text": "When true, displays a remove action that removes the item from the list."
       },
       "attribute": "removable",
       "reflect": true,
@@ -343,7 +343,7 @@ export class PickListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Set this to true to pre-select an item. Toggles when an item is checked/unchecked."
+        "text": "When true, selects an item. Toggles when an item is checked/unchecked."
       },
       "attribute": "selected",
       "reflect": true,
@@ -364,7 +364,7 @@ export class PickListItem {
             "name": "default",
             "text": "\"Remove\""
           }],
-        "text": "Used as an accessible label (aria-label) for the \"remove item\" action. Only applicable if removable is true."
+        "text": "Accessible name for the component's remove button. Only applicable if removable is \"true\"."
       },
       "attribute": "intl-remove",
       "reflect": true,
@@ -382,7 +382,7 @@ export class PickListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The item's associated value."
+        "text": "The component's value."
       },
       "attribute": "value",
       "reflect": false
@@ -396,7 +396,7 @@ export class PickListItem {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted whenever the item is selected or unselected."
+        "text": "Fires when the component is selected or unselected."
       },
       "complexType": {
         "original": "{\n    item: HTMLCalcitePickListItemElement;\n    value: any;\n    selected: boolean;\n    shiftPressed: boolean;\n  }",
@@ -415,7 +415,7 @@ export class PickListItem {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted whenever the remove button is pressed."
+        "text": "Fires when the remove button is pressed."
       },
       "complexType": {
         "original": "void",
@@ -433,7 +433,7 @@ export class PickListItem {
             "name": "internal",
             "text": undefined
           }],
-        "text": "Emitted whenever the the item's label, description, value or metadata properties are modified."
+        "text": "Emits when the the component's label, description, value, or metadata properties are modified."
       },
       "complexType": {
         "original": "void",
@@ -451,7 +451,7 @@ export class PickListItem {
             "name": "internal",
             "text": undefined
           }],
-        "text": "Emitted whenever the the item's value property is modified."
+        "text": "Emits when the the component's value property is modified."
       },
       "complexType": {
         "original": "{\n    oldValue: any;\n    newValue: any;\n  }",
@@ -478,7 +478,7 @@ export class PickListItem {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "Used to toggle the selection state. By default this won't trigger an event.\nThe first argument allows the value to be coerced, rather than swapping values.",
+        "text": "Toggles the selection state. By default this won't trigger an event.\nThe first argument allows the value to be coerced, rather than swapping values.",
         "tags": [{
             "name": "param",
             "text": "coerce"

package/dist/collection/components/pick-list-item/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.83
+ * v1.0.0-beta.86
  */
 export const CSS = {
   actions: "actions",

package/dist/collection/components/popover/PopoverManager.js

@@ -1,9 +1,8 @@
 /*!
  * 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.83
+ * v1.0.0-beta.86
  */
-import { queryElementsRoots } from "../../utils/dom";
 export default class PopoverManager {
   constructor() {
     // --------------------------------------------------------------------------
@@ -11,7 +10,7 @@ export default class PopoverManager {
     //  Private Properties
     //
     // --------------------------------------------------------------------------
-    this.registeredElements = new WeakMap();
+    this.registeredElements = new Map();
     this.registeredElementCount = 0;
     // --------------------------------------------------------------------------
     //
@@ -30,7 +29,7 @@ export default class PopoverManager {
         popover.toggle();
         return;
       }
-      queryElementsRoots(event.target, "calcite-popover")
+      Array.from(this.registeredElements.values())
         .filter((popover) => popover.autoClose && popover.open && !composedPath.includes(popover))
         .forEach((popover) => popover.toggle(false));
     };

package/dist/collection/components/popover/popover.css

@@ -244,6 +244,7 @@
   border-end-end-radius: 0.25rem;
 }
 
-::slotted(calcite-panel), ::slotted(calcite-flow) {
+::slotted(calcite-panel), 
+::slotted(calcite-flow) {
   height: 100%;
 }

package/dist/collection/components/popover/popover.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.83
+ * v1.0.0-beta.86
  */
 import { Component, Element, Event, forceUpdate, Host, Method, Prop, State, Watch, h } from "@stencil/core";
 import { CSS, ARIA_CONTROLS, ARIA_EXPANDED, HEADING_LEVEL, TEXT, defaultPopoverPlacement } from "./resources";
@@ -22,55 +22,59 @@ export class Popover {
     //
     // --------------------------------------------------------------------------
     /**
-     * Automatically closes any currently open popovers when clicking outside of a popover.
+     * When true and clicking outside of the component, automatically closes open `calcite-popover`s.
      */
     this.autoClose = false;
     /**
-     * Display a close button within the Popover.
+     * When true, a close button is added to the component.
      *
      * @deprecated use dismissible instead.
      */
     this.closeButton = false;
     /**
-     * Display a close button within the Popover.
+     * When true, a close button is added to the component.
+     *
+     * @deprecated use closable instead
      */
     this.dismissible = false;
+    /** When true, display a close button within the Popover */
+    this.closable = false;
     /**
-     * Prevents flipping the popover's placement when it starts to overlap its reference element.
+     * When true, prevents flipping the component's placement when overlapping its `referenceElement`.
      */
     this.disableFlip = false;
     /**
-     * Removes the caret pointer.
+     * When true, removes the caret pointer.
      */
     this.disablePointer = false;
     /**
-     * Offset the position of the popover away from the reference element.
+     * Offsets the position of the popover away from the `referenceElement`.
      *
      * @default 6
      */
     this.offsetDistance = defaultOffsetDistance;
     /**
-     * Offset the position of the popover along the reference element.
+     * Offsets the position of the popover along the `referenceElement`.
      */
     this.offsetSkidding = 0;
     /**
-     * Display and position the component.
+     * When true, displays and positions the component.
      */
     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 element 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 = defaultPopoverPlacement;
     /**
-     * Disables automatically toggling a popover when its referenceElement has been triggered. This property can be set to true to manage when a popover is open.
+     * When true, disables automatically toggling the component when its `referenceElement` has been triggered. This property can be set to "true" to manage when a popover is open.
      */
     this.triggerDisabled = false;
     /**
-     * Text for close button.
+     * Accessible name for the component's close button.
      *
      * @default "Close"
      */
@@ -215,7 +219,7 @@ export class Popover {
     (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
   }
   /**
-   * Toggles the popover's open property.
+   * Toggles the component's open property.
    *
    * @param value
    */
@@ -286,8 +290,8 @@ export class Popover {
   //
   // --------------------------------------------------------------------------
   renderCloseButton() {
-    const { dismissible, closeButton, intlClose, heading } = this;
-    return dismissible || closeButton ? (h("div", { class: CSS.closeButtonContainer },
+    const { dismissible, closeButton, intlClose, heading, closable } = this;
+    return closable || dismissible || closeButton ? (h("div", { class: CSS.closeButtonContainer },
       h("calcite-action", { class: CSS.closeButton, onClick: this.hide, ref: (closeButtonEl) => (this.closeButtonEl = closeButtonEl), scale: heading ? "s" : "m", text: intlClose },
         h("calcite-icon", { icon: "x", scale: heading ? "s" : "m" })))) : null;
   }
@@ -303,7 +307,7 @@ export class Popover {
     const displayed = effectiveReferenceElement && open;
     const hidden = !displayed;
     const arrowNode = !disablePointer ? (h("div", { class: CSS.arrow, ref: (arrowEl) => (this.arrowEl = arrowEl) })) : null;
-    return (h(Host, { "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "calcite-hydrated-hidden": hidden, id: this.getId(), role: "dialog" },
+    return (h(Host, { "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "aria-live": "polite", "calcite-hydrated-hidden": hidden, id: this.getId(), role: "dialog" },
       h("div", { class: {
           [PopperCSS.animation]: true,
           [PopperCSS.animationActive]: displayed
@@ -339,7 +343,7 @@ export class Popover {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Automatically closes any currently open popovers when clicking outside of a popover."
+        "text": "When true and clicking outside of the component, automatically closes open `calcite-popover`s."
       },
       "attribute": "auto-close",
       "reflect": true,
@@ -360,7 +364,7 @@ export class Popover {
             "name": "deprecated",
             "text": "use dismissible instead."
           }],
-        "text": "Display a close button within the Popover."
+        "text": "When true, a close button is added to the component."
       },
       "attribute": "close-button",
       "reflect": true,
@@ -377,13 +381,34 @@ export class Popover {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
-        "text": "Display a close button within the Popover."
+        "tags": [{
+            "name": "deprecated",
+            "text": "use closable instead"
+          }],
+        "text": "When true, a close button is added to the component."
       },
       "attribute": "dismissible",
       "reflect": true,
       "defaultValue": "false"
     },
+    "closable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "When true, display a close button within the Popover"
+      },
+      "attribute": "closable",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "disableFlip": {
       "type": "boolean",
       "mutable": false,
@@ -396,7 +421,7 @@ export class Popover {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Prevents flipping the popover's placement when it starts to overlap its reference element."
+        "text": "When true, prevents flipping the component's placement when overlapping its `referenceElement`."
       },
       "attribute": "disable-flip",
       "reflect": true,
@@ -414,7 +439,7 @@ export class Popover {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Removes the caret pointer."
+        "text": "When true, removes the caret pointer."
       },
       "attribute": "disable-pointer",
       "reflect": true,
@@ -452,7 +477,7 @@ export class Popover {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Heading text."
+        "text": "The component header text."
       },
       "attribute": "heading",
       "reflect": false
@@ -474,7 +499,7 @@ export class Popover {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Number at which section headings should start for this component."
+        "text": "Specifies the number at which section headings should start."
       },
       "attribute": "heading-level",
       "reflect": false
@@ -491,7 +516,7 @@ export class Popover {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Accessible name for the component"
+        "text": "Accessible name for the component."
       },
       "attribute": "label",
       "reflect": false
@@ -511,7 +536,7 @@ export class Popover {
             "name": "default",
             "text": "6"
           }],
-        "text": "Offset the position of the popover away from the reference element."
+        "text": "Offsets the position of the popover away from the `referenceElement`."
       },
       "attribute": "offset-distance",
       "reflect": true,
@@ -529,7 +554,7 @@ export class Popover {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Offset the position of the popover along the reference element."
+        "text": "Offsets the position of the popover along the `referenceElement`."
       },
       "attribute": "offset-skidding",
       "reflect": true,
@@ -547,7 +572,7 @@ export class Popover {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Display and position the component."
+        "text": "When true, displays and positions the component."
       },
       "attribute": "open",
       "reflect": true,
@@ -570,7 +595,7 @@ export class Popover {
       "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 element is in a fixed container, use the \"fixed\" value."
       },
       "attribute": "overlay-positioning",
       "reflect": false,
@@ -596,7 +621,7 @@ export class Popover {
             "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,
@@ -619,7 +644,7 @@ export class Popover {
       "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` used to position the component according to its \"placement\" value. Setting to an `HTMLElement` is preferred so the component does not need to query the DOM. However, a string `id` of the reference element can also be used."
       },
       "attribute": "reference-element",
       "reflect": false
@@ -636,7 +661,7 @@ export class Popover {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Disables automatically toggling a popover when its referenceElement has been triggered. This property can be set to true to manage when a popover is open."
+        "text": "When true, disables automatically toggling the component when its `referenceElement` has been triggered. This property can be set to \"true\" to manage when a popover is open."
       },
       "attribute": "trigger-disabled",
       "reflect": true,
@@ -657,7 +682,7 @@ export class Popover {
             "name": "default",
             "text": "\"Close\""
           }],
-        "text": "Text for close button."
+        "text": "Accessible name for the component's close button."
       },
       "attribute": "intl-close",
       "reflect": false,
@@ -675,7 +700,7 @@ export class Popover {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fired when the popover is closed"
+        "text": "Fired when the component is closed."
       },
       "complexType": {
         "original": "any",
@@ -690,7 +715,7 @@ export class Popover {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fired when the popover is opened"
+        "text": "Fired when the component is opened."
       },
       "complexType": {
         "original": "any",
@@ -758,7 +783,7 @@ export class Popover {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "Toggles the popover's open property.",
+        "text": "Toggles the component's open property.",
         "tags": [{
             "name": "param",
             "text": "value"

package/dist/collection/components/popover/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.83
+ * v1.0.0-beta.86
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/popover-manager/popover-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.83
+ * v1.0.0-beta.86
  */
 import { Component, h, Prop, Element, Watch } from "@stencil/core";
 import { createObserver } from "../../utils/observers";

package/dist/collection/components/progress/progress.css

@@ -84,7 +84,8 @@
   width: 100%;
 }
 
-.track, .bar {
+.track, 
+.bar {
   position: absolute;
   top: 0px;
   height: 2px;

package/dist/collection/components/progress/progress.js

@@ -1,16 +1,16 @@
 /*!
  * 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.83
+ * v1.0.0-beta.86
  */
 import { Component, Element, h, Prop } from "@stencil/core";
 export class Progress {
   constructor() {
-    /** Use indeterminate if finding actual progress value is impossible */
+    /** Use indeterminate if finding actual progress value is impossible. */
     this.type = "determinate";
-    /** Fraction completed, in the range of 0 - 1.0 */
+    /** The component's progress value, with a range of 0.0 - 1.0. */
     this.value = 0;
-    /** For indeterminate progress bars, reverse the animation direction */
+    /** When true and for indeterminate progress bars, reverses the animation direction. */
     this.reversed = false;
   }
   render() {
@@ -46,7 +46,7 @@ export class Progress {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Use indeterminate if finding actual progress value is impossible"
+        "text": "Use indeterminate if finding actual progress value is impossible."
       },
       "attribute": "type",
       "reflect": false,
@@ -64,7 +64,7 @@ export class Progress {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Fraction completed, in the range of 0 - 1.0"
+        "text": "The component's progress value, with a range of 0.0 - 1.0."
       },
       "attribute": "value",
       "reflect": false,
@@ -82,7 +82,7 @@ export class Progress {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Label for the progress indicator"
+        "text": "Accessible name for the component."
       },
       "attribute": "label",
       "reflect": false
@@ -99,7 +99,7 @@ export class Progress {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Text to display for the progress indicator"
+        "text": "Text that displays under the component's indicator."
       },
       "attribute": "text",
       "reflect": false
@@ -116,7 +116,7 @@ export class Progress {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "For indeterminate progress bars, reverse the animation direction"
+        "text": "When true and for indeterminate progress bars, reverses the animation direction."
       },
       "attribute": "reversed",
       "reflect": false,

package/dist/collection/components/radio-button/radio-button.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.83
+ * v1.0.0-beta.86
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";

package/dist/collection/components/radio-button/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.83
+ * v1.0.0-beta.86
  */
 export const CSS = {
   container: "container"