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

package/dist/collection/components/action-pad/action-pad.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, Host, Prop, Watch, h, Method } from "@stencil/core";
 import { ExpandToggle, toggleChildActionText } from "../functional/ExpandToggle";
@@ -9,8 +9,8 @@ import { focusElement, getSlotted } from "../../utils/dom";
 import { CSS, TEXT, SLOTS } from "./resources";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
- * @slot - A slot for adding `calcite-action`s to the action pad.
- * @slot expand-tooltip - Used to set the tooltip for the expand toggle.
+ * @slot - A slot for adding `calcite-action`s to the component.
+ * @slot expand-tooltip - Used to set the `calcite-tooltip` for the expand toggle.
  */
 export class ActionPad {
   constructor() {
@@ -20,15 +20,15 @@ export class ActionPad {
     //
     // --------------------------------------------------------------------------
     /**
-     * When set to true, the expand-toggling behavior will be disabled.
+     * When true, the expand-toggling behavior is disabled.
      */
     this.expandDisabled = false;
     /**
-     * Indicates whether widget is expanded.
+     * When true, the component is expanded.
      */
     this.expanded = false;
     /**
-     * Indicates the horizontal or vertical layout of the component.
+     * Indicates the layout of the component.
      */
     this.layout = "vertical";
     // --------------------------------------------------------------------------
@@ -83,11 +83,12 @@ export class ActionPad {
    * @param focusId
    */
   async setFocus(focusId) {
+    var _a;
     if (focusId === "expand-toggle") {
       await focusElement(this.expandToggleEl);
       return;
     }
-    this.el.focus();
+    (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
   }
   // --------------------------------------------------------------------------
   //
@@ -131,7 +132,7 @@ export class ActionPad {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When set to true, the expand-toggling behavior will be disabled."
+        "text": "When true, the expand-toggling behavior is disabled."
       },
       "attribute": "expand-disabled",
       "reflect": true,
@@ -149,7 +150,7 @@ export class ActionPad {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Indicates whether widget is expanded."
+        "text": "When true, the component is expanded."
       },
       "attribute": "expanded",
       "reflect": true,
@@ -172,7 +173,7 @@ export class ActionPad {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Indicates the horizontal or vertical layout of the component."
+        "text": "Indicates the layout of the component."
       },
       "attribute": "layout",
       "reflect": true,
@@ -190,7 +191,7 @@ export class ActionPad {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Updates the label of the expand icon when the component is not expanded."
+        "text": "Specifies the label of the expand icon when the component is collapsed."
       },
       "attribute": "intl-expand",
       "reflect": false
@@ -207,7 +208,7 @@ export class ActionPad {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Updates the label of the collapse icon when the component is expanded."
+        "text": "Specifies the label of the collapse icon when the component is expanded."
       },
       "attribute": "intl-collapse",
       "reflect": false
@@ -229,7 +230,7 @@ export class ActionPad {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Arranges the component depending on the elements 'dir' property."
+        "text": "Arranges the component depending on the element's `dir` property."
       },
       "attribute": "position",
       "reflect": true
@@ -251,7 +252,7 @@ export class ActionPad {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Specifies the size of the expand action."
+        "text": "Specifies the size of the expand `calcite-action`."
       },
       "attribute": "scale",
       "reflect": true
@@ -265,7 +266,7 @@ export class ActionPad {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emitted when expanded has been toggled."
+        "text": "Emits when the `expanded` property is toggled."
       },
       "complexType": {
         "original": "any",

package/dist/collection/components/action-pad/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 = {
   actionGroupBottom: "action-group--bottom",

package/dist/collection/components/alert/alert.css

@@ -83,22 +83,25 @@
 *
 * These properties can be overridden using the component's tag as selector.
 *
-* @prop --calcite-alert-width: the width of the alert
+* @prop --calcite-alert-width: Specifies the width of the component.
 */
 :host([scale=s]) {
   --calcite-alert-width: 40em;
   --calcite-alert-spacing-token-small: 0.5rem;
   --calcite-alert-spacing-token-large: 0.75rem;
 }
-:host([scale=s]) slot[name=title]::slotted(*), :host([scale=s]) *::slotted([slot=title]) {
+:host([scale=s]) slot[name=title]::slotted(*), 
+:host([scale=s]) *::slotted([slot=title]) {
   font-size: var(--calcite-font-size--1);
   line-height: 1.375;
 }
-:host([scale=s]) slot[name=message]::slotted(*), :host([scale=s]) *::slotted([slot=message]) {
+:host([scale=s]) slot[name=message]::slotted(*), 
+:host([scale=s]) *::slotted([slot=message]) {
   font-size: var(--calcite-font-size--2);
   line-height: 1.375;
 }
-:host([scale=s]) slot[name=link]::slotted(*), :host([scale=s]) *::slotted([slot=link]) {
+:host([scale=s]) slot[name=link]::slotted(*), 
+:host([scale=s]) *::slotted([slot=link]) {
   font-size: var(--calcite-font-size--2);
   line-height: 1.375;
 }
@@ -118,15 +121,18 @@
   --calcite-alert-spacing-token-small: 0.75rem;
   --calcite-alert-spacing-token-large: 1rem;
 }
-:host([scale=m]) slot[name=title]::slotted(*), :host([scale=m]) *::slotted([slot=title]) {
+:host([scale=m]) slot[name=title]::slotted(*), 
+:host([scale=m]) *::slotted([slot=title]) {
   font-size: var(--calcite-font-size-0);
   line-height: 1.375;
 }
-:host([scale=m]) slot[name=message]::slotted(*), :host([scale=m]) *::slotted([slot=message]) {
+:host([scale=m]) slot[name=message]::slotted(*), 
+:host([scale=m]) *::slotted([slot=message]) {
   font-size: var(--calcite-font-size--1);
   line-height: 1.375;
 }
-:host([scale=m]) slot[name=link]::slotted(*), :host([scale=m]) *::slotted([slot=link]) {
+:host([scale=m]) slot[name=link]::slotted(*), 
+:host([scale=m]) *::slotted([slot=link]) {
   font-size: var(--calcite-font-size--1);
   line-height: 1.375;
 }
@@ -143,16 +149,19 @@
   --calcite-alert-spacing-token-small: 1rem;
   --calcite-alert-spacing-token-large: 1.25rem;
 }
-:host([scale=l]) slot[name=title]::slotted(*), :host([scale=l]) *::slotted([slot=title]) {
+:host([scale=l]) slot[name=title]::slotted(*), 
+:host([scale=l]) *::slotted([slot=title]) {
   margin-bottom: 0.25rem;
   font-size: var(--calcite-font-size-1);
   line-height: 1.375;
 }
-:host([scale=l]) slot[name=message]::slotted(*), :host([scale=l]) *::slotted([slot=message]) {
+:host([scale=l]) slot[name=message]::slotted(*), 
+:host([scale=l]) *::slotted([slot=message]) {
   font-size: var(--calcite-font-size-0);
   line-height: 1.375;
 }
-:host([scale=l]) slot[name=link]::slotted(*), :host([scale=l]) *::slotted([slot=link]) {
+:host([scale=l]) slot[name=link]::slotted(*), 
+:host([scale=l]) *::slotted([slot=link]) {
   font-size: var(--calcite-font-size-0);
   line-height: 1.375;
 }
@@ -249,14 +258,16 @@
   transform: translate3d(0, var(--calcite-alert-edge-distance), inherit);
 }
 
-slot[name=title]::slotted(*), *::slotted([slot=title]) {
+slot[name=title]::slotted(*), 
+*::slotted([slot=title]) {
   font-size: var(--calcite-font-size-0);
   line-height: 1.375;
   font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-ui-text-1);
 }
 
-slot[name=message]::slotted(*), *::slotted([slot=message]) {
+slot[name=message]::slotted(*), 
+*::slotted([slot=message]) {
   margin: 0px;
   display: inline;
   font-size: var(--calcite-font-size--1);
@@ -266,7 +277,8 @@ slot[name=message]::slotted(*), *::slotted([slot=message]) {
   margin-inline-end: 0.5rem;
 }
 
-slot[name=link]::slotted(*), *::slotted([slot=link]) {
+slot[name=link]::slotted(*), 
+*::slotted([slot=link]) {
   display: inline-flex;
   color: var(--calcite-ui-text-link);
 }
@@ -319,7 +331,7 @@ slot[name=link]::slotted(*), *::slotted([slot=link]) {
   outline-offset: 2px;
   border-end-end-radius: var(--calcite-border-radius);
 }
-.alert-close:hover, .alert-close:focus {
+.alert-close:hover,  .alert-close:focus {
   background-color: var(--calcite-ui-foreground-2);
   color: var(--calcite-ui-text-1);
 }

package/dist/collection/components/alert/alert.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, State, Watch } from "@stencil/core";
 import { getSlotted, setRequestedIcon, toAriaBoolean } from "../../utils/dom";
@@ -12,9 +12,9 @@ import { StatusIcons } from "./interfaces";
  * at the bottom of the page. Multiple opened alerts will be added to a queue, allowing users to dismiss them in the order they are provided.
  */
 /**
- * @slot title - Title of the alert (optional)
- * @slot message - Main text of the alert
- * @slot link - Optional action to take from the alert (undo, try again, link to page, etc.)
+ * @slot title - A slot for optionally adding a title to the component.
+ * @slot message - A slot for adding main text to the component.
+ * @slot link - A slot for optionally adding an action to take from the alert (undo, try again, link to page, etc.)
  */
 export class Alert {
   constructor() {
@@ -23,23 +23,23 @@ export class Alert {
     //  Properties
     //
     //---------------------------------------------------------------------------
-    /** Is the alert currently active or not */
+    /** When true, the component is active. */
     this.active = false;
-    /** Close the alert automatically (recommended for passive, non-blocking alerts) */
+    /** When true, the component closes automatically (recommended for passive, non-blocking alerts). */
     this.autoDismiss = false;
-    /** Duration of autoDismiss (only used with `autoDismiss`) */
+    /** Specifies the duration before the component automatically closes (only use with `autoDismiss`). */
     this.autoDismissDuration = this.autoDismiss ? "medium" : null;
-    /** Color for the alert (will apply to top border and icon) */
+    /** Specifies the color for the component (will apply to top border and icon). */
     this.color = "blue";
     /**
-     * string to override English close text
+     * Specifies the text label for the close button.
      *
      * @default "Close"
      */
     this.intlClose = TEXT.intlClose;
-    /** specify the placement of the alert */
+    /** Specifies the placement of the component */
     this.placement = "bottom";
-    /** specify the scale of the alert, defaults to m */
+    /** Specifies the size of the component. */
     this.scale = "m";
     //--------------------------------------------------------------------------
     //
@@ -52,10 +52,14 @@ export class Alert {
     this.queueLength = 0;
     /** is the alert queued */
     this.queued = false;
+    this.setContainerDiv = (el) => {
+      this.containerDiv = el;
+      this.containerDiv.addEventListener("transitionrun", this.transitionRunHandler);
+    };
     this.autoDismissTimeoutId = null;
     this.trackTimer = Date.now();
     this.activeTransitionProp = "opacity";
-    /** close and emit the closed alert and the queue */
+    /** close and emit calciteInternalAlertSync event with the updated queue payload */
     this.closeAlert = () => {
       this.autoDismissTimeoutId = null;
       this.queued = false;
@@ -64,17 +68,18 @@ export class Alert {
       this.determineActiveAlert();
       this.calciteInternalAlertSync.emit({ queue: this.queue });
     };
+    /* *
+    - `transitionrun` fires when the transition is created at the start of any delay and is not cancellable once started.
+    - if there is no transition delay, both `transitionrun` and `transitionstart` are fired at the same time.
+    */
+    this.transitionRunHandler = (event) => {
+      if (event.propertyName === this.activeTransitionProp) {
+        this.active ? this.emitOpenCloseEvent("beforeOpen") : this.emitOpenCloseEvent("beforeClose");
+      }
+    };
     this.transitionEnd = (event) => {
       if (event.propertyName === this.activeTransitionProp) {
-        this.active
-          ? this.calciteAlertOpen.emit({
-            el: this.el,
-            queue: this.queue
-          })
-          : this.calciteAlertClose.emit({
-            el: this.el,
-            queue: this.queue
-          });
+        this.active ? this.emitOpenCloseEvent("open") : this.emitOpenCloseEvent("close");
       }
     };
   }
@@ -111,6 +116,9 @@ export class Alert {
   }
   disconnectedCallback() {
     window.clearTimeout(this.autoDismissTimeoutId);
+    if (this.containerDiv) {
+      this.containerDiv.removeEventListener("transitionrun", this.transitionRunHandler);
+    }
   }
   render() {
     const closeButton = (h("button", { "aria-label": this.intlClose, class: "alert-close", onClick: this.closeAlert, ref: (el) => (this.closeButton = el), type: "button" },
@@ -126,7 +134,7 @@ export class Alert {
           container: true,
           queued,
           [placement]: true
-        }, onTransitionEnd: this.transitionEnd },
+        }, onTransitionEnd: this.transitionEnd, ref: this.setContainerDiv },
         requestedIcon ? (h("div", { class: "alert-icon" },
           h("calcite-icon", { icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null,
         h("div", { class: "alert-content" },
@@ -146,7 +154,7 @@ export class Alert {
     this.determineActiveAlert();
     event.stopPropagation();
   }
-  // when an alert is first registered, trigger a queue sync to get queue
+  // when an alert is first registered, trigger a queue sync
   alertRegister() {
     if (this.active && !this.queue.includes(this.el)) {
       this.queued = true;
@@ -192,11 +200,25 @@ export class Alert {
       return;
     }
   }
-  /** emit the opened alert and the queue */
+  /** remove queued class after animation completes */
   openAlert() {
     window.clearTimeout(this.queueTimeout);
     this.queueTimeout = window.setTimeout(() => (this.queued = false), 300);
   }
+  emitOpenCloseEvent(componentVisibilityState) {
+    const payload = {
+      el: this.el,
+      queue: this.queue
+    };
+    const emitComponentState = {
+      beforeOpen: () => this.calciteAlertBeforeOpen.emit(payload),
+      open: () => this.calciteAlertOpen.emit(payload),
+      beforeClose: () => this.calciteAlertBeforeClose.emit(payload),
+      close: () => this.calciteAlertClose.emit(payload)
+    };
+    (emitComponentState[componentVisibilityState] ||
+      emitComponentState["The component state is unknown."])();
+  }
   static get is() { return "calcite-alert"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
@@ -218,7 +240,7 @@ export class Alert {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Is the alert currently active or not"
+        "text": "When true, the component is active."
       },
       "attribute": "active",
       "reflect": true,
@@ -236,7 +258,7 @@ export class Alert {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Close the alert automatically (recommended for passive, non-blocking alerts)"
+        "text": "When true, the component closes automatically (recommended for passive, non-blocking alerts)."
       },
       "attribute": "auto-dismiss",
       "reflect": false,
@@ -259,7 +281,7 @@ export class Alert {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Duration of autoDismiss (only used with `autoDismiss`)"
+        "text": "Specifies the duration before the component automatically closes (only use with `autoDismiss`)."
       },
       "attribute": "auto-dismiss-duration",
       "reflect": true,
@@ -282,7 +304,7 @@ export class Alert {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Color for the alert (will apply to top border and icon)"
+        "text": "Specifies the color for the component (will apply to top border and icon)."
       },
       "attribute": "color",
       "reflect": true,
@@ -300,7 +322,7 @@ export class Alert {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "when used as a boolean set to true, show a default recommended icon. You can\nalso pass a calcite-ui-icon name to this prop to display a requested icon"
+        "text": "When true, shows a default recommended icon. Alternatively,\npass a Calcite UI Icon name to display a specific icon."
       },
       "attribute": "icon",
       "reflect": true
@@ -320,7 +342,7 @@ export class Alert {
             "name": "default",
             "text": "\"Close\""
           }],
-        "text": "string to override English close text"
+        "text": "Specifies the text label for the close button."
       },
       "attribute": "intl-close",
       "reflect": false,
@@ -338,7 +360,7 @@ export class Alert {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Accessible name for the component"
+        "text": "Specifies an accessible name for the component."
       },
       "attribute": "label",
       "reflect": false
@@ -360,7 +382,7 @@ export class Alert {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "specify the placement of the alert"
+        "text": "Specifies the placement of the component"
       },
       "attribute": "placement",
       "reflect": false,
@@ -383,7 +405,7 @@ export class Alert {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "specify the scale of the alert, defaults to m"
+        "text": "Specifies the size of the component."
       },
       "attribute": "scale",
       "reflect": true,
@@ -397,6 +419,25 @@ export class Alert {
     "requestedIcon": {}
   }; }
   static get events() { return [{
+      "method": "calciteAlertBeforeClose",
+      "name": "calciteAlertBeforeClose",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{\n    el: HTMLCalciteAlertElement;\n    queue: HTMLCalciteAlertElement[];\n  }",
+        "resolved": "{ el: HTMLCalciteAlertElement; queue: HTMLCalciteAlertElement[]; }",
+        "references": {
+          "HTMLCalciteAlertElement": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
       "method": "calciteAlertClose",
       "name": "calciteAlertClose",
       "bubbles": true,
@@ -404,12 +445,35 @@ export class Alert {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fired when an alert is closed"
+        "text": ""
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        "original": "{\n    el: HTMLCalciteAlertElement;\n    queue: HTMLCalciteAlertElement[];\n  }",
+        "resolved": "{ el: HTMLCalciteAlertElement; queue: HTMLCalciteAlertElement[]; }",
+        "references": {
+          "HTMLCalciteAlertElement": {
+            "location": "global"
+          }
+        }
+      }
+    }, {
+      "method": "calciteAlertBeforeOpen",
+      "name": "calciteAlertBeforeOpen",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "{\n    el: HTMLCalciteAlertElement;\n    queue: HTMLCalciteAlertElement[];\n  }",
+        "resolved": "{ el: HTMLCalciteAlertElement; queue: HTMLCalciteAlertElement[]; }",
+        "references": {
+          "HTMLCalciteAlertElement": {
+            "location": "global"
+          }
+        }
       }
     }, {
       "method": "calciteAlertOpen",
@@ -419,12 +483,16 @@ export class Alert {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Fired when an alert is opened"
+        "text": ""
       },
       "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        "original": "{\n    el: HTMLCalciteAlertElement;\n    queue: HTMLCalciteAlertElement[];\n  }",
+        "resolved": "{ el: HTMLCalciteAlertElement; queue: HTMLCalciteAlertElement[]; }",
+        "references": {
+          "HTMLCalciteAlertElement": {
+            "location": "global"
+          }
+        }
       }
     }, {
       "method": "calciteInternalAlertSync",
@@ -437,7 +505,7 @@ export class Alert {
             "name": "internal",
             "text": undefined
           }],
-        "text": "Fired to sync queue when opened or closed"
+        "text": "Fires to sync queue when opened or closed."
       },
       "complexType": {
         "original": "any",
@@ -455,7 +523,7 @@ export class Alert {
             "name": "internal",
             "text": undefined
           }],
-        "text": "Fired when an alert is added to dom - used to receive initial queue"
+        "text": "Fires when the component is added to DOM - used to receive initial queue."
       },
       "complexType": {
         "original": "any",

package/dist/collection/components/alert/interfaces.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 var StatusIcons;
 (function (StatusIcons) {

package/dist/collection/components/alert/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 TEXT = {
   intlClose: "Close"
@@ -16,3 +16,6 @@ export const SLOTS = {
   message: "message",
   link: "link"
 };
+export const CSS = {
+  container: "container"
+};

package/dist/collection/components/avatar/avatar.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, h, Prop, State } from "@stencil/core";
 import { isValidHex } from "../color-picker/utils";
@@ -14,7 +14,7 @@ export class Avatar {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** specify the scale of the avatar, defaults to m */
+    /** Specifies the size of the component. */
     this.scale = "m";
     //--------------------------------------------------------------------------
     //
@@ -105,7 +105,7 @@ export class Avatar {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "specify the scale of the avatar, defaults to m"
+        "text": "Specifies the size of the component."
       },
       "attribute": "scale",
       "reflect": true,
@@ -123,7 +123,7 @@ export class Avatar {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "src to an image (remember to add a token if the user is private)"
+        "text": "Specifies the `src` to an image (remember to add a token if the user is private)."
       },
       "attribute": "thumbnail",
       "reflect": false
@@ -140,7 +140,7 @@ export class Avatar {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "full name of the user"
+        "text": "Specifies the full name of the user."
       },
       "attribute": "full-name",
       "reflect": false
@@ -157,7 +157,7 @@ export class Avatar {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "user name"
+        "text": "Specifies the username of the user."
       },
       "attribute": "username",
       "reflect": false
@@ -174,7 +174,7 @@ export class Avatar {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "unique id for user"
+        "text": "Specifies the unique id of the user."
       },
       "attribute": "user-id",
       "reflect": false

package/dist/collection/components/avatar/utils.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 { hexToRGB } from "../color-picker/utils";
 /**