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

package/dist/collection/components/tree-item/tree-item.css

@@ -83,8 +83,6 @@
   max-width: 100%;
   cursor: pointer;
   color: var(--calcite-ui-text-3);
-  outline: 2px solid transparent;
-  outline-offset: 2px;
 }
 
 :host([calcite-hydrated-hidden]) {
@@ -176,13 +174,12 @@
 }
 
 :host(:focus) {
+  outline: 2px solid transparent;
   outline: 2px solid var(--calcite-ui-brand);
   outline-offset: -2px;
 }
 
 .checkbox {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
   line-height: 0;
 }
 
@@ -192,6 +189,11 @@
   align-items: center;
 }
 
+.checkbox:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
 .children-container {
   position: relative;
   height: 0px;
@@ -214,21 +216,31 @@
   align-items: center;
   padding: var(--calcite-tree-padding-y) 0;
 }
-.node-container .checkmark, .node-container .bullet-point {
+.node-container .checkmark, 
+.node-container .bullet-point {
   opacity: 0;
   transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;
   color: var(--calcite-ui-border-1);
 }
 
-.node-container:hover .checkmark, .node-container:hover .bullet-point, :host([selected]) .node-container:hover .checkmark, :host([selected]) .node-container:hover .bullet-point, :host(:focus) .node-container .checkmark, :host(:focus) .node-container .bullet-point {
+.node-container:hover .checkmark, 
+.node-container:hover .bullet-point, 
+:host([selected]) .node-container:hover .checkmark, 
+:host([selected]) .node-container:hover .bullet-point, 
+:host(:focus) .node-container .checkmark, 
+:host(:focus) .node-container .bullet-point {
   opacity: 1;
 }
 
-:host([selected]) > .node-container, :host([selected]) > .node-container:hover {
+:host([selected]) > .node-container, 
+:host([selected]) > .node-container:hover {
   font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-ui-text-1);
 }
-:host([selected]) > .node-container .bullet-point, :host([selected]) > .node-container .checkmark, :host([selected]) > .node-container:hover .bullet-point, :host([selected]) > .node-container:hover .checkmark {
+:host([selected]) > .node-container .bullet-point, 
+:host([selected]) > .node-container .checkmark, 
+:host([selected]) > .node-container:hover .bullet-point, 
+:host([selected]) > .node-container:hover .checkmark {
   opacity: 1;
   color: var(--calcite-ui-brand);
 }
@@ -247,7 +259,8 @@
   margin-inline-start: 0;
 }
 
-:host([has-children]) > .node-container .bullet-point, :host([has-children]) > .node-container .checkmark {
+:host([has-children]) > .node-container .bullet-point, 
+:host([has-children]) > .node-container .checkmark {
   display: none;
 }
 

package/dist/collection/components/tree-item/tree-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, Prop, Host, Event, Listen, Watch, h } from "@stencil/core";
 import { TreeSelectionMode } from "../tree/interfaces";
@@ -10,7 +10,7 @@ import { CSS, SLOTS, ICONS } from "./resources";
 import { CSS_UTILITY } from "../../utils/resources";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
 /**
- * @slot - A slot for adding content to the item.
+ * @slot - A slot for adding the component's content.
  * @slot children - A slot for adding nested `calcite-tree` elements.
  */
 export class TreeItem {
@@ -20,9 +20,9 @@ export class TreeItem {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** Selected state of the item. */
+    /** When true, the component is selected. */
     this.selected = false;
-    /** Expanded state of the item. */
+    /** When true, the component is expanded. */
     this.expanded = false;
     /**
      * @internal
@@ -200,7 +200,7 @@ export class TreeItem {
       case "Home":
         root = this.el.closest("calcite-tree:not([child])");
         const firstNode = root.querySelector("calcite-tree-item");
-        firstNode.focus();
+        firstNode === null || firstNode === void 0 ? void 0 : firstNode.focus();
         break;
       case "End":
         root = this.el.closest("calcite-tree:not([child])");
@@ -210,7 +210,7 @@ export class TreeItem {
           currentNode = currentTree.children[root.children.length - 1];
           currentTree = nodeListToArray(currentNode.children).find((e) => e.matches("calcite-tree"));
         }
-        currentNode.focus();
+        currentNode === null || currentNode === void 0 ? void 0 : currentNode.focus();
         break;
     }
   }
@@ -235,7 +235,7 @@ export class TreeItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Selected state of the item."
+        "text": "When true, the component is selected."
       },
       "attribute": "selected",
       "reflect": true,
@@ -253,7 +253,7 @@ export class TreeItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Expanded state of the item."
+        "text": "When true, the component is expanded."
       },
       "attribute": "expanded",
       "reflect": true,

package/dist/collection/components/value-list/interfaces.js

@@ -0,0 +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.86
+ */
+export {};

package/dist/collection/components/value-list/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/value-list/utils.js

@@ -0,0 +1,49 @@
+/*!
+ * 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.86
+ */
+import { getItemIndex } from "../pick-list/shared-list-logic";
+export function getScreenReaderText(item, status, valueList) {
+  const { items, intlDragHandleIdle, intlDragHandleActive, intlDragHandleChange, intlDragHandleCommit } = valueList;
+  const total = items.length;
+  const position = getItemIndex(valueList, item) + 1;
+  if (status === "idle") {
+    const idleText = intlDragHandleIdle
+      ? replacePlaceholders(intlDragHandleIdle, item.label, position, total)
+      : `${item.label}, press space and use arrow keys to reorder content. Current position ${position} of ${total}.`;
+    return idleText;
+  }
+  else if (status === "active") {
+    const activeText = intlDragHandleActive
+      ? replacePlaceholders(intlDragHandleActive, item.label, position, total)
+      : `Reordering ${item.label}, current position ${position} of ${total}.`;
+    return activeText;
+  }
+  else if (status === "change") {
+    const changeText = intlDragHandleChange
+      ? replacePlaceholders(intlDragHandleChange, item.label, position, total)
+      : `${item.label}, new position ${position} of ${total}. Press space to confirm.`;
+    return changeText;
+  }
+  else {
+    const commitText = intlDragHandleCommit
+      ? replacePlaceholders(intlDragHandleCommit, item.label, position, total)
+      : `${item.label}, current position ${position} of ${total}.`;
+    return commitText;
+  }
+}
+export function getHandleAndItemElement(event) {
+  const handle = event
+    .composedPath()
+    .find((item) => { var _a; return ((_a = item.dataset) === null || _a === void 0 ? void 0 : _a.jsHandle) !== undefined; });
+  const item = event
+    .composedPath()
+    .find((item) => { var _a; return ((_a = item.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "calcite-value-list-item"; });
+  return { handle, item };
+}
+export function replacePlaceholders(text, label, position, total) {
+  const replacePosition = text.replace("${position}", position.toString());
+  const replaceLabel = replacePosition.replace("${item.label}", label);
+  return replaceLabel.replace("${total}", total.toString());
+}

package/dist/collection/components/value-list/value-list.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 Sortable from "sortablejs";
 import { Component, Element, Event, h, Listen, Method, Prop, State } from "@stencil/core";
@@ -10,6 +10,7 @@ import { calciteListFocusOutHandler, calciteListItemChangeHandler, calciteIntern
 import List from "../pick-list/shared-list-render";
 import { createObserver } from "../../utils/observers";
 import { updateHostInteraction } from "../../utils/interactive";
+import { getHandleAndItemElement, getScreenReaderText } from "./utils";
 /**
  * @slot - A slot for adding `calcite-value-list-item` elements. List items are displayed as a vertical list.
  * @slot menu-actions - A slot for adding a button and menu combination for performing actions, such as sorting.
@@ -22,30 +23,30 @@ export class ValueList {
     //
     // --------------------------------------------------------------------------
     /**
-     * When true, prevents user interaction. This state shows list items grayed out and with lower opacity.
+     * When true, interaction is prevented and the component is displayed with lower opacity.
      */
     this.disabled = false;
     /**
-     * When true, list items are sortable via a draggable button.
+     * When true, `calcite-value-list-item`s are sortable via a draggable button.
      */
     this.dragEnabled = false;
     /**
-     * When true, an input appears at the top of the list that can be used by end users to filter list items.
+     * When true, an input appears at the top of the component that can be used by end users to filter list items.
      */
     this.filterEnabled = false;
     /**
-     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     * When true, a busy indicator is displayed.
      */
     this.loading = false;
     /**
      * Similar to standard radio buttons and checkboxes.
-     * When true, a user can select multiple list items at a time.
-     * When false, only a single list item can be selected at a time,
-     * and selecting a new list item will deselect any other selected list items.
+     * When true, a user can select multiple `calcite-value-list-item`s at a time.
+     * When false, only a single `calcite-value-list-item` can be selected at a time,
+     * and a new selection will deselect previous selections.
      */
     this.multiple = false;
     /**
-     * When true and single-selection is enabled, the selection changes when navigating list items via the keyboard.
+     * When true and single-selection is enabled, the selection changes when navigating `calcite-value-list-item`s via keyboard.
      */
     this.selectionFollowsFocus = false;
     // --------------------------------------------------------------------------
@@ -66,18 +67,18 @@ export class ValueList {
     this.handleFilter = handleFilter.bind(this);
     this.getItemData = getItemData.bind(this);
     this.keyDownHandler = (event) => {
-      const handleElement = event
-        .composedPath()
-        .find((item) => { var _a; return ((_a = item.dataset) === null || _a === void 0 ? void 0 : _a.jsHandle) !== undefined; });
-      const item = event
-        .composedPath()
-        .find((item) => { var _a; return ((_a = item.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "calcite-value-list-item"; });
-      // Only trigger keyboard sorting when the internal drag handle is focused and activated
-      if (!handleElement || !item.handleActivated) {
+      const { handle, item } = getHandleAndItemElement(event);
+      if (handle && !item.handleActivated && event.key === " ") {
+        this.updateScreenReaderText(getScreenReaderText(item, "commit", this));
+      }
+      if (!handle || !item.handleActivated) {
         keyDownHandler.call(this, event);
         return;
       }
       const { items } = this;
+      if (event.key === " ") {
+        this.updateScreenReaderText(getScreenReaderText(item, "active", this));
+      }
       if ((event.key !== "ArrowUp" && event.key !== "ArrowDown") || items.length <= 1) {
         return;
       }
@@ -96,8 +97,18 @@ export class ValueList {
       }
       this.items = this.getItems();
       this.calciteListOrderChange.emit(this.items.map(({ value }) => value));
-      requestAnimationFrame(() => handleElement.focus());
+      requestAnimationFrame(() => handle === null || handle === void 0 ? void 0 : handle.focus());
       item.handleActivated = true;
+      this.updateHandleAriaLabel(handle, getScreenReaderText(item, "change", this));
+    };
+    this.storeAssistiveEl = (el) => {
+      this.assistiveTextEl = el;
+    };
+    this.handleFocusIn = (event) => {
+      const { handle, item } = getHandleAndItemElement(event);
+      if (!(item === null || item === void 0 ? void 0 : item.handleActivated) && item && handle) {
+        this.updateHandleAriaLabel(handle, getScreenReaderText(item, "idle", this));
+      }
     };
   }
   // --------------------------------------------------------------------------
@@ -174,6 +185,11 @@ export class ValueList {
     (_a = this.sortable) === null || _a === void 0 ? void 0 : _a.destroy();
     this.sortable = null;
   }
+  handleBlur() {
+    if (this.dragEnabled) {
+      this.updateScreenReaderText("");
+    }
+  }
   // --------------------------------------------------------------------------
   //
   //  Public Methods
@@ -203,8 +219,14 @@ export class ValueList {
     }
     return type;
   }
+  updateScreenReaderText(text) {
+    this.assistiveTextEl.textContent = text;
+  }
+  updateHandleAriaLabel(handleElement, text) {
+    handleElement.ariaLabel = text;
+  }
   render() {
-    return h(List, { onKeyDown: this.keyDownHandler, props: this });
+    return (h(List, { onBlur: this.handleBlur, onFocusin: this.handleFocusIn, onKeyDown: this.keyDownHandler, props: this }));
   }
   static get is() { return "calcite-value-list"; }
   static get encapsulation() { return "shadow"; }
@@ -227,7 +249,7 @@ export class ValueList {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, prevents user interaction. This state shows list items grayed out and with lower opacity."
+        "text": "When true, interaction is prevented and the component is displayed with lower opacity."
       },
       "attribute": "disabled",
       "reflect": true,
@@ -245,7 +267,7 @@ export class ValueList {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, list items are sortable via a draggable button."
+        "text": "When true, `calcite-value-list-item`s are sortable via a draggable button."
       },
       "attribute": "drag-enabled",
       "reflect": true,
@@ -263,7 +285,7 @@ export class ValueList {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, an input appears at the top of the list that can be used by end users to filter list items."
+        "text": "When true, an input appears at the top of the component that can be used by end users to filter list items."
       },
       "attribute": "filter-enabled",
       "reflect": true,
@@ -298,7 +320,7 @@ export class ValueList {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "The list's group identifier.\n\nTo drag elements from one list into another, both lists must have the same group value."
+        "text": "The component's group identifier.\n\nTo drag elements from one list into another, both lists must have the same group value."
       },
       "attribute": "group",
       "reflect": false
@@ -315,7 +337,7 @@ export class ValueList {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, content is waiting to be loaded. This state shows a busy indicator."
+        "text": "When true, a busy indicator is displayed."
       },
       "attribute": "loading",
       "reflect": true,
@@ -333,7 +355,7 @@ export class ValueList {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Similar to standard radio buttons and checkboxes.\nWhen true, a user can select multiple list items at a time.\nWhen false, only a single list item can be selected at a time,\nand selecting a new list item will deselect any other selected list items."
+        "text": "Similar to standard radio buttons and checkboxes.\nWhen true, a user can select multiple `calcite-value-list-item`s at a time.\nWhen false, only a single `calcite-value-list-item` can be selected at a time,\nand a new selection will deselect previous selections."
       },
       "attribute": "multiple",
       "reflect": true,
@@ -351,11 +373,79 @@ export class ValueList {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true and single-selection is enabled, the selection changes when navigating list items via the keyboard."
+        "text": "When true and single-selection is enabled, the selection changes when navigating `calcite-value-list-item`s via keyboard."
       },
       "attribute": "selection-follows-focus",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "intlDragHandleIdle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "When \"drag-enabled\" is true and active, specifies accessible context to the `calcite-value-list-item`'s initial position.\n\nUse ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`."
+      },
+      "attribute": "intl-drag-handle-idle",
+      "reflect": false
+    },
+    "intlDragHandleActive": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "When \"drag-enabled\" is true and active, specifies accessible context to the component.\n\nUse ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`."
+      },
+      "attribute": "intl-drag-handle-active",
+      "reflect": false
+    },
+    "intlDragHandleChange": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "When \"drag-enabled\" is true and active, specifies accessible context to the `calcite-value-list-item`'s new position.\n\nUse ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`."
+      },
+      "attribute": "intl-drag-handle-change",
+      "reflect": false
+    },
+    "intlDragHandleCommit": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "When \"drag-enabled\" is true and active, specifies accessible context to the `calcite-value-list-item`'s current position after commit.\n\nUse ${position} of ${total} as placeholder for displaying indices and ${item.label} as placeholder for displaying label of `calcite-value-list-item`."
+      },
+      "attribute": "intl-drag-handle-commit",
+      "reflect": false
     }
   }; }
   static get states() { return {

package/dist/collection/components/value-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 ICONS = {
   drag: "drag"

package/dist/collection/components/value-list-item/value-list-item.css

@@ -103,7 +103,8 @@ calcite-pick-list-item {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-:host([active]), :host([selected]) {
+:host([active]), 
+:host([selected]) {
   --tw-shadow: 0 0 0 1px var(--calcite-ui-brand);
   --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

package/dist/collection/components/value-list-item/value-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, h, Host, Listen, Method, Prop } from "@stencil/core";
 import { ICON_TYPES } from "../pick-list/resources";
@@ -9,17 +9,17 @@ import { guid } from "../../utils/guid";
 import { CSS } from "../pick-list-item/resources";
 import { ICONS, SLOTS } from "./resources";
 import { SLOTS as PICK_LIST_SLOTS } from "../pick-list-item/resources";
-import { getSlotted, toAriaBoolean } from "../../utils/dom";
+import { getSlotted } 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 ValueListItem {
   constructor() {
     /**
-     * When true, the list item cannot be clicked and is visually muted.
+     * When true, interaction is prevented and the component is displayed with lower opacity.
      */
     this.disabled = false;
     /**
@@ -27,7 +27,7 @@ export class ValueListItem {
      */
     this.disableDeselect = false;
     /**
-     * When true, prevents the content of the list item from user interaction.
+     * When true, prevents the content of the component from user interaction.
      */
     this.nonInteractive = false;
     /**
@@ -41,11 +41,11 @@ export class ValueListItem {
      */
     this.icon = null;
     /**
-     * When true, adds an action to remove the list item.
+     * When true, adds an action to remove the component.
      */
     this.removable = false;
     /**
-     * When true, preselects the list item. Toggles when an item is checked/unchecked.
+     * When true, the component is selected.
      */
     this.selected = false;
     this.pickListItem = null;
@@ -123,7 +123,7 @@ export class ValueListItem {
   renderHandle() {
     const { icon } = this;
     if (icon === ICON_TYPES.grip) {
-      return (h("span", { "aria-pressed": toAriaBoolean(this.handleActivated), class: {
+      return (h("span", { class: {
           [CSS.handle]: true,
           [CSS.handleActivated]: this.handleActivated
         }, "data-js-handle": true, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, role: "button", tabindex: "0" },
@@ -158,7 +158,7 @@ export class ValueListItem {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "An optional description for the list item that displays below the label text."
+        "text": "A description for the component that displays below the label text."
       },
       "attribute": "description",
       "reflect": true
@@ -175,7 +175,7 @@ export class ValueListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, the list 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,
@@ -214,7 +214,7 @@ export class ValueListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, prevents the content of the list item from user interaction."
+        "text": "When true, prevents the content of the component from user interaction."
       },
       "attribute": "non-interactive",
       "reflect": true,
@@ -279,7 +279,7 @@ export class ValueListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The main label for the list item. Appears next to the icon."
+        "text": "Label and accessible name for the component. Appears next to the icon."
       },
       "attribute": "label",
       "reflect": true
@@ -300,7 +300,7 @@ export class ValueListItem {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Provides additional metadata to a list item. Primary use is for a filter on the parent list."
+        "text": "Provides additional metadata to the component. Primary use is for a filter on the parent list."
       }
     },
     "removable": {
@@ -315,7 +315,7 @@ export class ValueListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, adds an action to remove the list item."
+        "text": "When true, adds an action to remove the component."
       },
       "attribute": "removable",
       "reflect": true,
@@ -333,7 +333,7 @@ export class ValueListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "When true, preselects the list item. Toggles when an item is checked/unchecked."
+        "text": "When true, the component is selected."
       },
       "attribute": "selected",
       "reflect": true,
@@ -351,7 +351,7 @@ export class ValueListItem {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The list item's associated value."
+        "text": "The component's value."
       },
       "attribute": "value",
       "reflect": false
@@ -365,7 +365,7 @@ export class ValueListItem {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emits when the remove button is pressed."
+        "text": "Fires when the remove button is pressed."
       },
       "complexType": {
         "original": "void",

package/dist/collection/utils/array.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 function getRoundRobinIndex(index, total) {
   return (index + total) % total;

package/dist/collection/utils/conditionalSlot.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 { forceUpdate } from "@stencil/core";
 import { createObserver } from "./observers";

package/dist/collection/utils/date.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
  */
 /**
  * Check if date is within a min and max