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

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.82
+ * v1.0.0-beta.85
  */
 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,47 +22,56 @@ 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.
      */
     this.dismissible = 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;
-    /** Text for close button.
+    /**
+     * 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;
+    /**
+     * Accessible name for the component's close button.
+     *
      * @default "Close"
      */
     this.intlClose = TEXT.close;
@@ -99,7 +108,9 @@ export class Popover {
       if (!effectiveReferenceElement) {
         return;
       }
-      effectiveReferenceElement.setAttribute(ARIA_EXPANDED, toAriaBoolean(open));
+      if ("setAttribute" in effectiveReferenceElement) {
+        effectiveReferenceElement.setAttribute(ARIA_EXPANDED, toAriaBoolean(open));
+      }
     };
     this.addReferences = () => {
       const { effectiveReferenceElement } = this;
@@ -107,7 +118,9 @@ export class Popover {
         return;
       }
       const id = this.getId();
-      effectiveReferenceElement.setAttribute(ARIA_CONTROLS, id);
+      if ("setAttribute" in effectiveReferenceElement) {
+        effectiveReferenceElement.setAttribute(ARIA_CONTROLS, id);
+      }
       manager.registerElement(effectiveReferenceElement, this.el);
       this.setExpandedAttr();
     };
@@ -116,8 +129,10 @@ export class Popover {
       if (!effectiveReferenceElement) {
         return;
       }
-      effectiveReferenceElement.removeAttribute(ARIA_CONTROLS);
-      effectiveReferenceElement.removeAttribute(ARIA_EXPANDED);
+      if ("removeAttribute" in effectiveReferenceElement) {
+        effectiveReferenceElement.removeAttribute(ARIA_CONTROLS);
+        effectiveReferenceElement.removeAttribute(ARIA_EXPANDED);
+      }
       manager.unregisterElement(effectiveReferenceElement);
     };
     this.hide = () => {
@@ -184,7 +199,11 @@ export class Popover {
       })
       : this.createPopper();
   }
-  /** Sets focus on the component. */
+  /**
+   * Sets focus on the component.
+   *
+   * @param focusId
+   */
   async setFocus(focusId) {
     var _a;
     const { closeButtonEl } = this;
@@ -195,7 +214,11 @@ 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
+   */
   async toggle(value = !this.open) {
     this.open = value;
   }
@@ -263,10 +286,10 @@ export class Popover {
   //
   // --------------------------------------------------------------------------
   renderCloseButton() {
-    const { dismissible, closeButton, intlClose } = this;
+    const { dismissible, closeButton, intlClose, heading } = this;
     return dismissible || closeButton ? (h("div", { class: CSS.closeButtonContainer },
-      h("calcite-action", { class: CSS.closeButton, onClick: this.hide, ref: (closeButtonEl) => (this.closeButtonEl = closeButtonEl), text: intlClose },
-        h("calcite-icon", { icon: "x", scale: "m" })))) : null;
+      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;
   }
   renderHeader() {
     const { heading, headingLevel } = this;
@@ -280,7 +303,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
@@ -316,7 +339,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,
@@ -337,7 +360,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,
@@ -355,7 +378,7 @@ export class Popover {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Display a close button within the Popover."
+        "text": "When true, a close button is added to the component."
       },
       "attribute": "dismissible",
       "reflect": true,
@@ -373,7 +396,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,
@@ -391,7 +414,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,
@@ -429,7 +452,7 @@ export class Popover {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Heading text."
+        "text": "The component header text."
       },
       "attribute": "heading",
       "reflect": false
@@ -451,7 +474,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
@@ -468,7 +491,7 @@ export class Popover {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Accessible name for the component"
+        "text": "Accessible name for the component."
       },
       "attribute": "label",
       "reflect": false
@@ -488,7 +511,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,
@@ -506,7 +529,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,
@@ -524,7 +547,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,
@@ -547,7 +570,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,
@@ -573,7 +596,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,
@@ -583,11 +606,12 @@ export class Popover {
       "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"
           }
         }
       },
@@ -595,11 +619,29 @@ 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
     },
+    "triggerDisabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "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,
+      "defaultValue": "false"
+    },
     "intlClose": {
       "type": "string",
       "mutable": false,
@@ -615,7 +657,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,
@@ -633,7 +675,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",
@@ -648,7 +690,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",
@@ -677,7 +719,10 @@ export class Popover {
       "complexType": {
         "signature": "(focusId?: \"close-button\") => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "focusId"
+              }],
             "text": ""
           }],
         "references": {
@@ -689,14 +734,20 @@ export class Popover {
       },
       "docs": {
         "text": "Sets focus on the component.",
-        "tags": []
+        "tags": [{
+            "name": "param",
+            "text": "focusId"
+          }]
       }
     },
     "toggle": {
       "complexType": {
         "signature": "(value?: boolean) => Promise<void>",
         "parameters": [{
-            "tags": [],
+            "tags": [{
+                "name": "param",
+                "text": "value"
+              }],
             "text": ""
           }],
         "references": {
@@ -707,8 +758,11 @@ export class Popover {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "Toggles the popover's open property.",
-        "tags": []
+        "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.82
+ * v1.0.0-beta.85
  */
 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.82
+ * v1.0.0-beta.85
  */
 import { Component, h, Prop, Element, Watch } from "@stencil/core";
 import { createObserver } from "../../utils/observers";
@@ -19,6 +19,7 @@ export class PopoverManager {
     // --------------------------------------------------------------------------
     /**
      * CSS Selector to match reference elements for popovers. Reference elements will be identified by this selector in order to open their associated popover.
+     *
      * @default `[data-calcite-popover-reference]`
      */
     this.selector = "[data-calcite-popover-reference]";

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.82
+ * v1.0.0-beta.85
  */
 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.css

@@ -91,9 +91,8 @@
   cursor: pointer;
   border-radius: 9999px;
   background-color: var(--calcite-ui-foreground-1);
-  transition-property: all;
-  transition-duration: 150ms;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  outline-color: transparent;
+  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   box-shadow: inset 0 0 0 1px var(--calcite-ui-border-input);
 }
 
@@ -102,6 +101,11 @@
   box-shadow: inset 0 0 0 2px var(--calcite-ui-brand);
 }
 
+:host([focused]) .radio {
+  outline: 2px solid var(--calcite-ui-brand);
+  outline-offset: 2px;
+}
+
 :host([disabled]) {
   pointer-events: none;
   cursor: default;
@@ -147,7 +151,7 @@
 }
 
 :host([scale=s][focused][checked]:not([disabled])) .radio {
-  box-shadow: inset 0 0 0 4px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);
+  box-shadow: inset 0 0 0 4px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1);
 }
 
 :host([scale=m][checked]) .radio,
@@ -156,7 +160,7 @@
 }
 
 :host([scale=m][focused][checked]:not([disabled])) .radio {
-  box-shadow: inset 0 0 0 5px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);
+  box-shadow: inset 0 0 0 5px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1);
 }
 
 :host([scale=l][checked]) .radio,
@@ -165,7 +169,7 @@
 }
 
 :host([scale=l][focused][checked]:not([disabled])) .radio {
-  box-shadow: inset 0 0 0 6px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1), 0 0 0 4px var(--calcite-ui-brand);
+  box-shadow: inset 0 0 0 6px var(--calcite-ui-brand), 0 0 0 2px var(--calcite-ui-foreground-1);
 }
 
 @media (forced-colors: active) {

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.82
+ * v1.0.0-beta.85
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
 import { guid } from "../../utils/guid";
@@ -24,6 +24,7 @@ export class RadioButton {
     this.disabled = false;
     /**
      * The focused state of the radio button.
+     *
      * @internal
      */
     this.focused = false;
@@ -31,6 +32,7 @@ export class RadioButton {
     this.hidden = false;
     /**
      * The hovered state of the radio button.
+     *
      * @internal
      */
     this.hovered = false;
@@ -59,6 +61,7 @@ export class RadioButton {
       }
       this.uncheckAllRadioButtonsInGroup();
       this.checked = true;
+      this.focused = true;
       this.calciteRadioButtonChange.emit();
       this.setFocus();
     };

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.82
+ * v1.0.0-beta.85
  */
 export const CSS = {
   container: "container"

package/dist/collection/components/radio-button-group/radio-button-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, Host, h, Element, Prop, Watch, Event, Listen } from "@stencil/core";
 import { createObserver } from "../../utils/observers";

package/dist/collection/components/radio-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/radio-group/radio-group.css

@@ -119,7 +119,8 @@
   justify-content: flex-start;
 }
 
-::slotted(calcite-radio-group-item[checked]), ::slotted(calcite-radio-group-item:focus) {
+::slotted(calcite-radio-group-item[checked]), 
+::slotted(calcite-radio-group-item:focus) {
   z-index: 0;
 }