@esri/calcite-components 1.0.0-beta.77 → 1.0.0-beta.80

package/dist/collection/components/tab-title/tab-title.css

@@ -129,11 +129,20 @@
 
 :host([disabled]) {
   pointer-events: none;
+  cursor: default;
+  -webkit-user-select: none;
+          user-select: none;
+  opacity: var(--calcite-ui-opacity-disabled);
 }
 :host([disabled]) span, :host([disabled]) a {
   pointer-events: none;
   opacity: 0.5;
 }
+:host([disabled]) ::slotted([calcite-hydrated][disabled]),
+:host([disabled]) [calcite-hydrated][disabled] {
+  /* prevent opacity stacking */
+  opacity: 1;
+}
 
 :host([scale=s]) {
   margin-inline-end: 1rem;

package/dist/collection/components/tab-title/tab-title.js

@@ -6,6 +6,7 @@ import { Component, Prop, Event, Listen, Element, Method, h, Host, State, Build,
 import { guid } from "../../utils/guid";
 import { getElementProp, getElementDir } from "../../utils/dom";
 import { createObserver } from "../../utils/observers";
+import { updateHostInteraction } from "../../utils/interactive";
 /**
  * @slot - A slot for adding text.
  */
@@ -82,12 +83,11 @@ export class TabTitle {
   }
   render() {
     const id = this.el.id || this.guid;
-    const Tag = this.disabled ? "span" : "a";
     const showSideBorders = this.bordered && !this.disabled && this.layout !== "center";
     const iconStartEl = (h("calcite-icon", { class: "calcite-tab-title--icon icon-start", flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
     const iconEndEl = (h("calcite-icon", { class: "calcite-tab-title--icon icon-end", flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
-    return (h(Host, { "aria-controls": this.controls, "aria-expanded": this.active.toString(), id: id, role: "tab", tabindex: this.disabled ? "-1" : "0" },
-      h(Tag, { class: {
+    return (h(Host, { "aria-controls": this.controls, "aria-expanded": this.active.toString(), id: id, role: "tab" },
+      h("a", { class: {
           container: true,
           "container--has-text": this.hasText
         }, style: showSideBorders && { width: `${this.parentTabNavEl.indicatorWidth}px` } },
@@ -98,13 +98,16 @@ export class TabTitle {
   async componentDidLoad() {
     this.calciteTabTitleRegister.emit(await this.getTabIdentifier());
   }
+  componentDidRender() {
+    updateHostInteraction(this, true);
+  }
   //--------------------------------------------------------------------------
   //
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
   tabChangeHandler(event) {
-    if (this.parentTabNavEl === event.target) {
+    if (event.composedPath().includes(this.parentTabNavEl)) {
       if (this.tab) {
         this.active = this.tab === event.detail.tab;
       }
@@ -408,7 +411,7 @@ export class TabTitle {
       "docs": {
         "tags": [{
             "name": "see",
-            "text": " [TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tab/interfaces.ts#L1)"
+            "text": "[TabChangeEventDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tab/interfaces.ts#L1)"
           }],
         "text": "Fires when a specific tab is activated (`event.details`)"
       },

package/dist/collection/components/tile/tile.css

@@ -174,9 +174,25 @@
   padding: 0px;
 }
 
+:host([icon][heading]:not([description])) .icon {
+  display: flex;
+  justify-content: center;
+}
+:host([icon][heading]:not([description])) .large-visual {
+  text-align: center;
+}
+
 :host([disabled]) {
-  opacity: var(--calcite-ui-opacity-disabled);
   pointer-events: none;
+  cursor: default;
+  -webkit-user-select: none;
+          user-select: none;
+  opacity: var(--calcite-ui-opacity-disabled);
+}
+:host([disabled]) ::slotted([calcite-hydrated][disabled]),
+:host([disabled]) [calcite-hydrated][disabled] {
+  /* prevent opacity stacking */
+  opacity: 1;
 }
 
 :host(:hover) .heading, :host([active]) .heading {

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

@@ -6,6 +6,7 @@ import { Component, Element, Fragment, h, Prop } from "@stencil/core";
 import { SLOTS } from "./resources";
 import { getSlotted } from "../../utils/dom";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent } from "../../utils/conditionalSlot";
+import { updateHostInteraction } from "../../utils/interactive";
 /**
  * @slot content-start - A slot for adding non-actionable elements before the tile content.
  * @slot content-end - A slot for adding non-actionable elements after the tile content.
@@ -44,6 +45,9 @@ export class Tile {
   disconnectedCallback() {
     disconnectConditionalSlotComponent(this);
   }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
   // --------------------------------------------------------------------------
   //
   //  Render Methods

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

@@ -174,6 +174,14 @@
 }
 
 :host([disabled]) {
-  opacity: var(--calcite-ui-opacity-disabled);
   pointer-events: none;
+  cursor: default;
+  -webkit-user-select: none;
+          user-select: none;
+  opacity: var(--calcite-ui-opacity-disabled);
+}
+:host([disabled]) ::slotted([calcite-hydrated][disabled]),
+:host([disabled]) [calcite-hydrated][disabled] {
+  /* prevent opacity stacking */
+  opacity: 1;
 }

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

@@ -5,6 +5,7 @@
 import { Component, Element, Event, h, Prop, Listen, Watch, State, Method } from "@stencil/core";
 import { guid } from "../../utils/guid";
 import { CSS } from "./resources";
+import { updateHostInteraction } from "../../utils/interactive";
 /**
  * @slot - A slot for adding custom content.
  */
@@ -129,6 +130,9 @@ export class TileSelect {
   disconnectedCallback() {
     this.input.parentNode.removeChild(this.input);
   }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
   // --------------------------------------------------------------------------
   //
   //  Render Methods

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

@@ -89,4 +89,17 @@
 
 :host([layout=vertical]) {
   flex-direction: column;
+}
+
+:host([disabled]) {
+  pointer-events: none;
+  cursor: default;
+  -webkit-user-select: none;
+          user-select: none;
+  opacity: var(--calcite-ui-opacity-disabled);
+}
+:host([disabled]) ::slotted([calcite-hydrated][disabled]),
+:host([disabled]) [calcite-hydrated][disabled] {
+  /* prevent opacity stacking */
+  opacity: 1;
 }

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

@@ -2,7 +2,8 @@
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
  */
-import { Component, h, Prop } from "@stencil/core";
+import { Component, h, Prop, Element } from "@stencil/core";
+import { updateHostInteraction } from "../../utils/interactive";
 /**
  * @slot - A slot for adding `calcite-tile-select`s.
  */
@@ -13,9 +14,19 @@ export class TileSelectGroup {
     //  Properties
     //
     //--------------------------------------------------------------------------
+    /** The disabled state of the tile select. */
+    this.disabled = false;
     /** Tiles by default move horizontally, stacking with each row, vertical allows single-column layouts */
     this.layout = "horizontal";
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
   render() {
     return h("slot", null);
   }
@@ -28,6 +39,24 @@ export class TileSelectGroup {
     "$": ["tile-select-group.css"]
   }; }
   static get properties() { return {
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The disabled state of the tile select."
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "layout": {
       "type": "string",
       "mutable": false,
@@ -52,4 +81,5 @@ export class TileSelectGroup {
       "defaultValue": "\"horizontal\""
     }
   }; }
+  static get elementRef() { return "el"; }
 }

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

@@ -28,7 +28,8 @@ export const CSS = {
   "scale-s": "scale-s",
   "scale-m": "scale-m",
   "scale-l": "scale-l",
-  timePicker: "time-picker"
+  timePicker: "time-picker",
+  meridiemStart: "meridiem--start"
 };
 export const TEXT = {
   hour: "Hour",

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

@@ -99,6 +99,9 @@
   display: flex;
   flex-direction: column;
 }
+.time-picker .meridiem--start {
+  order: -1;
+}
 .time-picker .button {
   display: inline-flex;
   cursor: pointer;

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

@@ -5,7 +5,7 @@
 import { Component, Element, h, Prop, Event, Watch, State, Listen, Method } from "@stencil/core";
 import { isActivationKey, numberKeys } from "../../utils/key";
 import { isValidNumber } from "../../utils/number";
-import { formatTimePart, maxTenthForMinuteAndSecond, getMeridiem, isValidTime, localizeTimeStringToParts, parseTimeString, localizeTimePart, getLocaleHourCycle } from "../../utils/time";
+import { formatTimePart, maxTenthForMinuteAndSecond, getMeridiem, isValidTime, localizeTimeStringToParts, parseTimeString, localizeTimePart, getLocaleHourCycle, getTimeParts } from "../../utils/time";
 import { CSS, TEXT } from "./resources";
 function capitalize(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
@@ -345,6 +345,8 @@ export class TimePicker {
         if (localizedMeridiem) {
           this.localizedMeridiem = localizedMeridiem;
           this.meridiem = getMeridiem(this.hour);
+          const formatParts = getTimeParts(value, this.locale);
+          this.meridiemOrder = this.getMeridiemOrder(formatParts);
         }
       }
       else {
@@ -499,6 +501,16 @@ export class TimePicker {
     }
     return isActivationKey(key);
   }
+  getMeridiemOrder(formatParts) {
+    const isRTLKind = this.locale === "ar" || this.locale === "he";
+    if (formatParts && !isRTLKind) {
+      const index = formatParts.findIndex((parts) => {
+        return parts.value === this.localizedMeridiem;
+      });
+      return index;
+    }
+    return 0;
+  }
   // --------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -575,7 +587,10 @@ export class TimePicker {
           }, onClick: this.decrementSecond, onKeyDown: this.secondDownButtonKeyDownHandler, role: "button", tabIndex: -1 },
           h("calcite-icon", { icon: "chevron-down", scale: iconScale })))),
       this.localizedSecondSuffix && (h("span", { class: CSS.delimiter }, this.localizedSecondSuffix)),
-      showMeridiem && (h("div", { class: CSS.column, role: "group" },
+      showMeridiem && (h("div", { class: {
+          [CSS.column]: true,
+          [CSS.meridiemStart]: this.meridiemOrder === 0
+        }, role: "group" },
         h("span", { "aria-label": this.intlMeridiemUp, class: {
             [CSS.button]: true,
             [CSS.buttonMeridiemUp]: true,

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

@@ -118,6 +118,11 @@
   transform: translate(0);
 }
 
+:host([data-popper-placement][data-popper-reference-hidden]) {
+  pointer-events: none;
+  opacity: 0;
+}
+
 .arrow,
 .arrow::before {
   position: absolute;

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

@@ -147,7 +147,11 @@ export class Tooltip {
         offset: [offsetSkidding, offsetDistance]
       }
     };
-    return [arrowModifier, offsetModifier];
+    const eventListenerModifier = {
+      name: "eventListeners",
+      enabled: this.open
+    };
+    return [arrowModifier, offsetModifier, eventListenerModifier];
   }
   createPopper() {
     this.destroyPopper();
@@ -310,7 +314,7 @@ export class Tooltip {
       "docs": {
         "tags": [{
             "name": "see",
-            "text": " [PopperPlacement](https://github.com/Esri/calcite-components/blob/master/src/utils/popper.ts#L25)"
+            "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."
       },

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

@@ -79,5 +79,6 @@
 }
 
 :host {
+  position: relative;
   display: block;
 }

package/dist/collection/components/tree/tree.js

@@ -42,8 +42,10 @@ export class Tree {
     this.child = !!parent;
   }
   render() {
-    return (h(Host, { "aria-multiselectable": (this.selectionMode === TreeSelectionMode.Multi ||
-        this.selectionMode === TreeSelectionMode.MultiChildren).toString(), role: !this.child ? "tree" : undefined, tabIndex: this.getRootTabIndex() },
+    return (h(Host, { "aria-multiselectable": this.child
+        ? undefined
+        : (this.selectionMode === TreeSelectionMode.Multi ||
+          this.selectionMode === TreeSelectionMode.MultiChildren).toString(), role: !this.child ? "tree" : undefined, tabIndex: this.getRootTabIndex() },
       h("slot", null)));
   }
   //--------------------------------------------------------------------------
@@ -143,6 +145,61 @@ export class Tree {
       selected: nodeListToArray(this.el.querySelectorAll("calcite-tree-item")).filter((i) => i.selected)
     });
   }
+  keyDownHandler(event) {
+    var _a;
+    const root = this.el.closest("calcite-tree:not([child])");
+    const target = event.target;
+    if (root === this.el && target.tagName === "CALCITE-TREE-ITEM" && this.el.contains(target)) {
+      switch (event.key) {
+        case "ArrowDown":
+          const next = target.nextElementSibling;
+          if (next && next.matches("calcite-tree-item")) {
+            next.focus();
+            event.preventDefault();
+          }
+          break;
+        case "ArrowLeft":
+          // When focus is on an open node, closes the node.
+          if (target.hasChildren && target.expanded) {
+            target.expanded = false;
+            event.preventDefault();
+            break;
+          }
+          // When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.
+          const parentItem = target.parentElement.closest("calcite-tree-item");
+          if (parentItem && (!target.hasChildren || target.expanded === false)) {
+            parentItem.focus();
+            event.preventDefault();
+            break;
+          }
+          // When focus is on a root node that is also either an end node or a closed node, does nothing.
+          break;
+        case "ArrowRight":
+          if (!target.hasChildren) {
+            break;
+          }
+          if (target.expanded && document.activeElement === target) {
+            // When focus is on an open node, moves focus to the first child node.
+            (_a = target.querySelector("calcite-tree-item")) === null || _a === void 0 ? void 0 : _a.focus();
+            event.preventDefault();
+          }
+          else {
+            // When focus is on a closed node, opens the node; focus does not move.
+            target.expanded = true;
+            event.preventDefault();
+          }
+          // When focus is on an end node, does nothing.
+          break;
+        case "ArrowUp":
+          const previous = target.previousElementSibling;
+          if (previous && previous.matches("calcite-tree-item")) {
+            previous.focus();
+            event.preventDefault();
+          }
+          break;
+      }
+    }
+  }
   updateAncestorTree(e) {
     const item = e.target;
     const children = item.querySelectorAll("calcite-tree-item");
@@ -298,7 +355,7 @@ export class Tree {
             "text": "\"single\""
           }, {
             "name": "see",
-            "text": " [TreeSelectionMode](https://github.com/Esri/calcite-components/blob/master/src/components/tree/interfaces.ts#L5)"
+            "text": "[TreeSelectionMode](https://github.com/Esri/calcite-components/blob/master/src/components/tree/interfaces.ts#L5)"
           }],
         "text": "Customize how tree selection works (single, multi, children, multi-children, ancestors)"
       },
@@ -316,7 +373,7 @@ export class Tree {
       "docs": {
         "tags": [{
             "name": "see",
-            "text": " [TreeSelectDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tree/interfaces.ts#L1)"
+            "text": "[TreeSelectDetail](https://github.com/Esri/calcite-components/blob/master/src/components/tree/interfaces.ts#L1)"
           }],
         "text": "Emitted when user selects/deselects tree items. An object including an array of selected items will be passed in the event's `detail` property."
       },
@@ -356,5 +413,11 @@ export class Tree {
       "target": undefined,
       "capture": false,
       "passive": false
+    }, {
+      "name": "keydown",
+      "method": "keyDownHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
     }]; }
 }

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

@@ -32,12 +32,6 @@ export class TreeItem {
     this.iconClickHandler = (event) => {
       event.stopPropagation();
       this.expanded = !this.expanded;
-      if (this.selectionMode !== TreeSelectionMode.Ancestors) {
-        this.calciteTreeItemSelect.emit({
-          modifyCurrentSelection: this.isSelectionMultiLike,
-          forceToggle: true
-        });
-      }
     };
     this.childrenClickHandler = (event) => event.stopPropagation();
     //--------------------------------------------------------------------------
@@ -180,7 +174,6 @@ export class TreeItem {
           forceToggle: false
         });
         e.preventDefault();
-        e.stopPropagation();
         break;
       case "Enter":
         // activates a node, i.e., performs its default action. For parent nodes, one possible default action is to open or close the node. In single-select trees where selection does not follow focus (see note below), the default action is typically to select the focused node.
@@ -196,52 +189,6 @@ export class TreeItem {
           });
         }
         e.preventDefault();
-        e.stopPropagation();
-        break;
-      case "ArrowLeft":
-        // When focus is on an open node, closes the node.
-        if (this.hasChildren && this.expanded) {
-          this.expanded = false;
-          e.preventDefault();
-          e.stopPropagation();
-          break;
-        }
-        // When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.
-        const parentItem = this.parentTreeItem;
-        if (parentItem && (!this.hasChildren || this.expanded === false)) {
-          parentItem.focus();
-          e.preventDefault();
-          e.stopPropagation();
-          break;
-        }
-        // When focus is on a root node that is also either an end node or a closed node, does nothing.
-        break;
-      case "ArrowRight":
-        // When focus is on a closed node, opens the node; focus does not move.
-        if (this.hasChildren && this.expanded === false) {
-          this.expanded = true;
-          e.preventDefault();
-          e.stopPropagation();
-          break;
-        }
-        // When focus is on a open node, moves focus to the first child node.
-        if (this.hasChildren && this.expanded) {
-          this.el.querySelector("calcite-tree-item").focus();
-          break;
-        }
-        // When focus is on an end node, does nothing.
-        break;
-      case "ArrowUp":
-        const previous = this.el.previousElementSibling;
-        if (previous && previous.matches("calcite-tree-item")) {
-          previous.focus();
-        }
-        break;
-      case "ArrowDown":
-        const next = this.el.nextElementSibling;
-        if (next && next.matches("calcite-tree-item")) {
-          next.focus();
-        }
         break;
       case "Home":
         root = this.el.closest("calcite-tree:not([child])");

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

@@ -94,6 +94,19 @@
   box-sizing: border-box;
 }
 
+:host([disabled]) {
+  pointer-events: none;
+  cursor: default;
+  -webkit-user-select: none;
+          user-select: none;
+  opacity: var(--calcite-ui-opacity-disabled);
+}
+:host([disabled]) ::slotted([calcite-hydrated][disabled]),
+:host([disabled]) [calcite-hydrated][disabled] {
+  /* prevent opacity stacking */
+  opacity: 1;
+}
+
 calcite-value-list-item:last-of-type {
   --tw-shadow: 0 0 #0000;
   --tw-shadow-colored: 0 0 #0000;

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

@@ -5,10 +5,10 @@
 import Sortable from "sortablejs";
 import { Component, Element, Event, h, Listen, Method, Prop, State } from "@stencil/core";
 import { CSS, ICON_TYPES } from "./resources";
-import { calciteListItemChangeHandler, calciteListItemValueChangeHandler, cleanUpObserver, deselectSiblingItems, deselectRemovedItems, getItemData, handleFilter, initialize, initializeObserver, keyDownHandler, mutationObserverCallback, removeItem, selectSiblings, setFocus, setUpItems } from "../pick-list/shared-list-logic";
+import { calciteListFocusOutHandler, calciteListItemChangeHandler, calciteListItemValueChangeHandler, cleanUpObserver, deselectSiblingItems, deselectRemovedItems, getItemData, handleFilter, initialize, initializeObserver, keyDownHandler, mutationObserverCallback, removeItem, selectSiblings, setFocus, setUpItems, moveItemIndex } from "../pick-list/shared-list-logic";
 import List from "../pick-list/shared-list-render";
-import { getRoundRobinIndex } from "../../utils/array";
 import { createObserver } from "../../utils/observers";
+import { updateHostInteraction } from "../../utils/interactive";
 /**
  * @slot - A slot for adding `calcite-value-list-item` elements. Items are displayed as a vertical list.
  * @slot menu-actions - A slot for adding a button + menu combo for performing actions like sorting.
@@ -82,9 +82,7 @@ export class ValueList {
       }
       event.preventDefault();
       const { el } = this;
-      const moveOffset = event.key === "ArrowDown" ? 1 : -1;
-      const currentIndex = items.indexOf(item);
-      const nextIndex = getRoundRobinIndex(currentIndex + moveOffset, items.length);
+      const nextIndex = moveItemIndex(this, item, event.key === "ArrowUp" ? "up" : "down");
       if (nextIndex === items.length - 1) {
         el.appendChild(item);
       }
@@ -113,10 +111,16 @@ export class ValueList {
   componentDidLoad() {
     this.setUpDragAndDrop();
   }
+  componentDidRender() {
+    updateHostInteraction(this);
+  }
   disconnectedCallback() {
     cleanUpObserver.call(this);
     this.cleanUpDragAndDrop();
   }
+  calciteListFocusOutHandler(event) {
+    calciteListFocusOutHandler.call(this, event);
+  }
   calciteListItemRemoveHandler(event) {
     removeItem.call(this, event);
   }
@@ -439,6 +443,12 @@ export class ValueList {
   }; }
   static get elementRef() { return "el"; }
   static get listeners() { return [{
+      "name": "focusout",
+      "method": "calciteListFocusOutHandler",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
       "name": "calciteListItemRemove",
       "method": "calciteListItemRemoveHandler",
       "target": undefined,

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

@@ -140,4 +140,17 @@ calcite-pick-list-item {
 }
 .handle calcite-icon {
   color: inherit;
+}
+
+:host([disabled]) {
+  pointer-events: none;
+  cursor: default;
+  -webkit-user-select: none;
+          user-select: none;
+  opacity: var(--calcite-ui-opacity-disabled);
+}
+:host([disabled]) ::slotted([calcite-hydrated][disabled]),
+:host([disabled]) [calcite-hydrated][disabled] {
+  /* prevent opacity stacking */
+  opacity: 1;
 }

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

@@ -10,6 +10,7 @@ import { ICONS, SLOTS } from "./resources";
 import { SLOTS as PICK_LIST_SLOTS } from "../pick-list-item/resources";
 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.
@@ -76,6 +77,9 @@ export class ValueListItem {
   disconnectedCallback() {
     disconnectConditionalSlotComponent(this);
   }
+  componentDidRender() {
+    updateHostInteraction(this, this.el.closest("calcite-value-list") ? "managed" : false);
+  }
   // --------------------------------------------------------------------------
   //
   //  Public Methods
@@ -164,7 +168,7 @@ export class ValueListItem {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "When true, the item cannot be clicked and is visually muted"
@@ -251,7 +255,7 @@ export class ValueListItem {
       "docs": {
         "tags": [{
             "name": "see",
-            "text": " [ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/pick-list/resources.ts#L5)"
+            "text": "[ICON_TYPES](https://github.com/Esri/calcite-components/blob/master/src/components/pick-list/resources.ts#L5)"
           }],
         "text": "Determines the icon SVG symbol that will be shown. Options are circle, square, grip or null."
       },