@esri/calcite-components 1.0.0-beta.63 → 1.0.0-beta.67

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

@@ -1,5 +1,3 @@
-@charset "UTF-8";
-
 /* mixins & extensions */
 
 @keyframes in {
@@ -87,41 +85,16 @@
 }
 
 :host {
+  --calcite-tree-indicator: var(--calcite-ui-border-1);
+  --calcite-tree-indicator-active: var(--calcite-ui-brand);
+  --calcite-tree-text: var(--calcite-ui-text-3);
+  --calcite-tree-text-active: var(--calcite-ui-text-1);
   display: block;
-  color: var(--calcite-tree-text);
   cursor: pointer;
-  outline: none;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
   max-width: 100%;
-  --calcite-tree-text: var(--calcite-ui-text-2);
-  --calcite-tree-text: var(--calcite-ui-text-1);
-  --calcite-tree-text: var(--calcite-ui-text-1);
-  --calcite-tree-chevron: var(--calcite-ui-border-1);
-  --calcite-tree-chevron-hover: var(--calcite-ui-text-3);
-  --calcite-tree-vertical-padding: 0.375rem;
-  --calcite-tree-indicator: var(--calcite-ui-border-1);
-  --calcite-tree-indicator-active: var(--calcite-ui-brand);
-  --calcite-tree-indicator-first-start: 0.1rem;
-  --calcite-tree-indicator-first-end: auto;
-  --calcite-tree-indicator-distance-start: 0.15rem;
-  --calcite-tree-indicator-distance-end: auto;
-  --calcite-tree-icon-edge-distance-start: -0.2rem;
-  --calcite-tree-icon-edge-distance-end: 0;
-  --calcite-tree-icon-content-distance-start: 0.375rem;
-  --calcite-tree-icon-content-distance-end: 0;
-  --calcite-tree-indent-start: 1.4rem;
-  --calcite-tree-indent-end: 0;
-  --calcite-tree-children-indent-start: 0.25rem;
-  --calcite-tree-children-indent-end: 0;
-  --calcite-tree-children-padding-start: 1rem;
-  --calcite-tree-children-padding-end: 0;
-  --calcite-tree-checkbox-padding-start: 0;
-  --calcite-tree-checkbox-padding-end: 0.5rem;
-  --calcite-tree-line-position-start: 0.05rem;
-  --calcite-tree-line-position-end: 0;
-  --calcite-tree-parent-line-position-start: -0.95rem;
-  --calcite-tree-parent-line-position-end: 0;
-  --calcite-tree-line-width: 1px;
-  --calcite-tree-hover-line-width: 3px;
+  color: var(--calcite-tree-text);
 }
 
 :host([scale=s]) {
@@ -130,77 +103,46 @@
   --calcite-tree-padding-y: 0.25rem;
 }
 
+:host([scale=s]) .node-container .checkbox {
+  margin-inline-start: 1.5rem;
+}
+
 :host([scale=m]) {
   font-size: var(--calcite-font-size--1);
   line-height: 1rem;
   --calcite-tree-padding-y: 0.5rem;
 }
 
+:host([scale=m]) .node-container .checkbox {
+  margin-inline-start: 2rem;
+}
+
 :host([scale=l]) {
   font-size: var(--calcite-font-size-0);
   line-height: 1.25rem;
   --calcite-tree-padding-y: 0.75rem;
 }
 
-:host([lines]) {
-  --calcite-tree-line: var(--calcite-ui-border-3);
-  --calcite-tree-line-hover: var(--calcite-ui-border-1);
+:host([scale=l]) .node-container .checkbox {
+  margin-inline-start: 2.5rem;
 }
 
-:host([lines]) .calcite-tree-node:before {
-  display: none;
+:host([lines]) {
+  --calcite-tree-line: var(--calcite-ui-border-2);
+  --calcite-tree-line-hover: var(--calcite-ui-border-1);
 }
 
-:host(:not([lines])) .calcite-tree-node:after {
+:host(:not([lines])) .node-container:after {
   display: none;
 }
 
-:host([scale=s]) {
-  --calcite-tree-hover-line-width: 2px;
-  --calcite-tree-vertical-padding: 0.1875rem;
-  --calcite-tree-children-indent-start: 0rem;
-  --calcite-tree-children-padding-start: 0.8rem;
-  --calcite-tree-line-position-start: 0.3rem;
-  --calcite-tree-parent-line-position-start: -0.5rem;
-}
-
-:host .calcite--rtl {
-  --calcite-tree-indicator-first-start: 0;
-  --calcite-tree-indicator-first-end: 0.1rem;
-  --calcite-tree-indicator-distance-start: auto;
-  --calcite-tree-indicator-distance-end: 0.15rem;
-  --calcite-tree-icon-edge-distance-start: auto;
-  --calcite-tree-icon-edge-distance-end: -0.2rem;
-  --calcite-tree-icon-content-distance-start: 0;
-  --calcite-tree-icon-content-distance-end: 0.375rem;
-  --calcite-tree-indent-start: 0;
-  --calcite-tree-indent-end: 1.4rem;
-  --calcite-tree-children-indent-start: 0;
-  --calcite-tree-children-indent-end: 0.25rem;
-  --calcite-tree-children-padding-start: 0;
-  --calcite-tree-children-padding-end: 1rem;
-  --calcite-tree-checkbox-padding-start: 0.5rem;
-  --calcite-tree-checkbox-padding-end: 0;
-  --calcite-tree-line-position-start: 0;
-  --calcite-tree-line-position-end: 0.05rem;
-  --calcite-tree-parent-line-position-start: 0;
-  --calcite-tree-parent-line-position-end: -0.95rem;
-}
-
-:host .calcite--rtl[scale=s] {
-  --calcite-tree-children-indent-end: 0rem;
-  --calcite-tree-children-padding-end: 0.8rem;
-  --calcite-tree-line-position-end: 0.3rem;
-  --calcite-tree-parent-line-position-end: -0.5rem;
-}
-
 ::slotted(*) {
-  color: inherit;
-  text-decoration: none !important;
   word-wrap: break-word;
   overflow-wrap: break-word;
   min-width: 0;
   max-width: 100%;
+  color: inherit;
+  text-decoration: none !important;
 }
 
 ::slotted(*):hover {
@@ -223,217 +165,172 @@
   outline-offset: -2px;
 }
 
-.calcite-tree-checkbox {
+.checkbox {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
   line-height: 0;
-  padding-left: var(--calcite-tree-checkbox-padding-start);
-  padding-right: var(--calcite-tree-checkbox-padding-end);
-  outline: none;
 }
 
-.calcite-tree-label {
+.checkbox-label {
   display: flex;
   align-items: center;
   pointer-events: none;
 }
 
-.calcite-tree-children {
-  z-index: 1;
-  margin-left: var(--calcite-tree-children-indent-start);
-  margin-right: var(--calcite-tree-children-indent-end);
-  padding-left: var(--calcite-tree-children-padding-start);
-  padding-right: var(--calcite-tree-children-padding-end);
+.children-container {
   position: relative;
+  overflow: hidden;
+  height: 0;
+  margin-inline-start: 1.25rem;
+  margin-inline-end: 1.25rem;
   transform: scaleY(0);
   opacity: 0;
-  overflow: hidden;
   transition: 0.15s cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity 0.15s cubic-bezier(0.215, 0.44, 0.42, 0.88), all 0.15s ease-in-out;
-  height: 0;
   transform-origin: top;
 }
 
-.calcite-tree-children:after {
-  transition: all 150ms ease-in-out;
-  content: "";
-  height: 100%;
-  width: var(--calcite-tree-line-width);
-  background: var(--calcite-tree-line);
-  left: var(--calcite-tree-line-position-start);
-  right: var(--calcite-tree-line-position-end);
+.children-container:after {
+  transition-property: all;
+  transition-duration: 150ms;
+  transition-timing-function: ease-in-out;
+  transition-delay: 0s;
+  transition-property: background-color, border-color, color, fill, stroke;
   top: 0;
   position: absolute;
+  width: 1px;
+  height: 96%;
+  content: "";
+  background-color: var(--calcite-tree-line);
+  z-index: -1;
 }
 
-:host([expanded]) > .calcite-tree-children {
+:host([expanded]) > .children-container {
   transform: scaleY(1);
   opacity: 1;
   height: auto;
 }
 
-:host([has-children]) .calcite-tree-children:hover:after,
-:host([has-children]) .calcite-tree-children:focus:after {
-  background: var(--calcite-tree-line-hover);
-}
-
-.calcite-tree-node {
+.node-container {
   display: flex;
   align-items: center;
-  padding: var(--calcite-tree-padding-y) 0;
-  padding-left: var(--calcite-tree-indent-start);
-  padding-right: var(--calcite-tree-indent-end);
   position: relative;
+  padding: var(--calcite-tree-padding-y) 0;
 }
 
-.calcite-tree-node:before {
-  content: "•";
-  position: absolute;
-  left: var(--calcite-tree-indicator-distance-start);
-  right: var(--calcite-tree-indicator-distance-end);
-  opacity: 0;
-  color: var(--calcite-tree-indicator);
-  transition: all 150ms ease-in-out;
-}
-
-.calcite-tree-node:after {
-  transition: all 150ms ease-in-out;
-  content: "";
-  height: 100%;
-  width: var(--calcite-tree-line-width);
-  background: var(--calcite-tree-line);
-  left: var(--calcite-tree-parent-line-position-start);
-  right: var(--calcite-tree-parent-line-position-end);
-  top: 0;
-  position: absolute;
-}
-
-:host([depth="1"]) > .calcite-tree-node:after {
-  display: none;
-}
-
-.calcite-tree-node[data-selection-mode=ancestors]:before {
-  display: none;
-}
-
-:host([has-children]) > .calcite-tree-node {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-:host([has-children]) > .calcite-tree-node:before {
-  display: none;
-}
-
-:host([depth="1"]) > .calcite-tree-node:before,
-:host([depth="1"]) > .calcite-tree-children:before {
-  left: var(--calcite-tree-indicator-first-start);
-  right: var(--calcite-tree-indicator-first-end);
+.node-container .checkmark,
+.node-container .bullet-point {
+  margin-inline-start: var(--calcite-tree-padding-y);
+  margin-inline-end: var(--calcite-tree-padding-y);
 }
 
-.calcite-tree-node:hover:before,
-:host([selected]) .calcite-tree-node:hover:before,
-:host(:focus) .calcite-tree-node:before {
-  opacity: 1;
+.node-container .checkbox {
+  margin-inline-end: var(--calcite-tree-padding-y);
 }
 
-.calcite-tree-node:hover:after,
-:host([selected]) .calcite-tree-node:hover:after,
-:host(:focus) .calcite-tree-node:after {
-  width: var(--calcite-tree-hover-line-width);
-  background: var(--calcite-tree-line-hover);
-  z-index: 2;
+.node-container .checkmark,
+.node-container .bullet-point {
+  transition-property: all;
+  transition-duration: 150ms;
+  transition-timing-function: ease-in-out;
+  transition-delay: 0s;
+  opacity: 0;
+  color: var(--calcite-tree-indicator);
 }
 
-.calcite-tree-node:hover ::slotted(*),
-:host([selected]) .calcite-tree-node:hover ::slotted(*),
-:host(:focus) .calcite-tree-node ::slotted(*) {
+.node-container:hover ::slotted(*),
+:host([selected]) .node-container:hover ::slotted(*),
+:host(:focus) .node-container ::slotted(*) {
   color: var(--calcite-tree-text-hover);
 }
 
-.calcite-tree-node:hover .calcite-tree-chevron,
-:host([selected]) .calcite-tree-node:hover .calcite-tree-chevron,
-:host(:focus) .calcite-tree-node .calcite-tree-chevron {
-  fill: var(--calcite-tree-chevron-hover);
-}
-
-.calcite-tree-node:hover .calcite-tree-indicator,
-:host([selected]) .calcite-tree-node:hover .calcite-tree-indicator,
-:host(:focus) .calcite-tree-node .calcite-tree-indicator {
-  fill: var(--calcite-tree-indicator-hover);
+.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]) > .calcite-tree-node,
-:host([selected]) > .calcite-tree-node:hover {
+:host([selected]) > .node-container,
+:host([selected]) > .node-container:hover {
   color: var(--calcite-tree-text-active);
-  font-weight: 500;
+  font-weight: var(--calcite-font-weight-medium);
 }
 
-:host([selected]) > .calcite-tree-node:before,
-:host([selected]) > .calcite-tree-node:hover:before {
+: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-tree-indicator-active);
+  color: var(--calcite-ui-brand);
 }
 
-:host([selected]) > .calcite-tree-node:after,
-:host([selected]) > .calcite-tree-node:hover:after {
-  background: var(--calcite-ui-brand);
-  width: var(--calcite-tree-hover-line-width);
-  z-index: 2;
+:host(:not([has-children]))[scale=s] > .node-container[data-selection-mode=ancestors] .checkbox {
+  padding-inline-start: 1.25rem;
 }
 
-:host([selected]) > .calcite-tree-node ::slotted(*),
-:host([selected]) > .calcite-tree-node:hover ::slotted(*) {
-  color: var(--calcite-tree-text-active);
+:host(:not([has-children]))[scale=m] > .node-container[data-selection-mode=ancestors] .checkbox {
+  padding-inline-start: 1.5rem;
 }
 
-:host([has-children][expanded]) > .calcite-tree-node {
-  color: var(--calcite-tree-text-active);
-  font-weight: 500;
+:host(:not([has-children]))[scale=l] > .node-container[data-selection-mode=ancestors] .checkbox {
+  padding-inline-start: 1.75rem;
 }
 
-:host([has-children][expanded]) > .calcite-tree-node:after {
-  background: var(--calcite-ui-brand);
+:host([has-children]) > .node-container[data-selection-mode=ancestors] .checkbox {
+  margin-inline-start: 0;
 }
 
-:host([has-children][expanded]) > .calcite-tree-node:before {
-  opacity: 1;
-  color: var(--calcite-tree-indicator-active);
+:host([has-children]) > .node-container .bullet-point,
+:host([has-children]) > .node-container .checkmark {
+  display: none;
 }
 
-:host([has-children][expanded]) > .calcite-tree-node ::slotted(*) {
+:host([has-children][expanded]:not([selected])) > .node-container ::slotted(*) {
+  font-weight: var(--calcite-font-weight-medium);
   color: var(--calcite-tree-text-active);
 }
 
-:host([has-children][expanded][selected]) > .calcite-tree-node:after {
-  background: var(--calcite-ui-brand);
-  width: var(--calcite-tree-hover-line-width);
-  z-index: 2;
+:host([has-children][selected]) > .node-container[data-selection-mode=children], :host([has-children][selected]) > .node-container[data-selection-mode=multi-children] {
+  color: var(--calcite-tree-indicator-active);
 }
 
-.calcite-tree-chevron {
-  transition: all 150ms ease-in-out;
-  flex: 0 0 auto;
+.chevron {
+  transition-property: all;
+  transition-duration: 150ms;
+  transition-timing-function: ease-in-out;
+  transition-delay: 0s;
   position: relative;
   align-self: center;
-  left: var(--calcite-tree-icon-edge-distance-start);
-  right: var(--calcite-tree-icon-edge-distance-end);
-  margin-right: var(--calcite-tree-icon-content-distance-start);
-  margin-left: var(--calcite-tree-icon-content-distance-end);
+  flex: 0 0 auto;
+  margin-inline-start: var(--calcite-tree-padding-y);
+  margin-inline-end: var(--calcite-tree-padding-y);
   transform: rotate(0deg);
-  fill: var(--calcite-tree-chevron);
+  color: var(--calcite-tree-text);
 }
 
-.calcite--rtl .calcite-tree-chevron {
+.calcite--rtl .chevron {
   transform: rotate(180deg);
 }
 
-:host(:hover) .calcite-tree-chevron, :host(:focus) .calcite-tree-chevron {
-  fill: var(--calcite-tree-chevron-hover);
-  stroke: var(--calcite-tree-chevron-hover);
-  stroke-width: 0.75;
+:host([expanded]) > .node-container > .chevron {
+  transform: rotate(90deg);
 }
 
-:host([expanded]) > .calcite-tree-node > .calcite-tree-chevron {
-  transform: rotate(90deg);
-  fill: var(--calcite-ui-brand);
-  stroke-width: 0.75;
-  stroke: var(--calcite-ui-brand);
+:host([scale=s]) > .node-container .checkbox {
+  margin-inline-end: 0.5rem;
+}
+
+:host([scale=m]) > .node-container .checkbox {
+  margin-inline-end: 0.75rem;
+}
+
+:host([scale=l]) > .node-container .checkbox {
+  margin-inline-end: 1rem;
+}
+
+:host([selected]) .checkmark,
+:host([selected]) .bullet-point {
+  color: var(--calcite-tree-indicator-active);
 }

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

@@ -4,6 +4,10 @@ import { nodeListToArray, getElementDir, filterDirectChildren, getSlotted } from
 import { getKey } from "../../utils/key";
 import { CSS, SLOTS, ICONS } from "./resources";
 import { CSS_UTILITY } from "../../utils/resources";
+/**
+ * @slot - A slot for adding content to the item.
+ * @slot children - A slot for adding nested `calcite-tree` elements.
+ */
 export class CalciteTreeItem {
   constructor() {
     //--------------------------------------------------------------------------
@@ -32,6 +36,23 @@ export class CalciteTreeItem {
       }
     };
     this.childrenClickHandler = (event) => event.stopPropagation();
+    //--------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    //--------------------------------------------------------------------------
+    this.updateAncestorTree = () => {
+      if (this.selected && this.selectionMode === TreeSelectionMode.Ancestors) {
+        const ancestors = [];
+        let parent = this.el.parentElement.closest("calcite-tree-item");
+        while (parent) {
+          ancestors.push(parent);
+          parent = parent.parentElement.closest("calcite-tree-item");
+        }
+        ancestors.forEach((item) => (item.indeterminate = true));
+        return;
+      }
+    };
   }
   expandedHandler(newValue) {
     const items = getSlotted(this.el, "children", {
@@ -70,27 +91,40 @@ export class CalciteTreeItem {
       }
     }
   }
+  componentDidLoad() {
+    this.updateAncestorTree();
+  }
   render() {
     const rtl = getElementDir(this.el) === "rtl";
-    const icon = this.hasChildren ? (h("calcite-icon", { class: {
+    const showBulletPoint = this.selectionMode === TreeSelectionMode.Single ||
+      this.selectionMode === TreeSelectionMode.Children;
+    const showCheckmark = this.selectionMode === TreeSelectionMode.Multi ||
+      this.selectionMode === TreeSelectionMode.MultiChildren;
+    const chevron = this.hasChildren ? (h("calcite-icon", { class: {
         [CSS.chevron]: true,
         [CSS_UTILITY.rtl]: rtl
       }, "data-test-id": "icon", icon: ICONS.chevronRight, onClick: this.iconClickHandler, scale: "s" })) : null;
     const checkbox = this.selectionMode === TreeSelectionMode.Ancestors ? (h("label", { class: CSS.checkboxLabel },
       h("calcite-checkbox", { checked: this.selected, class: CSS.checkbox, "data-test-id": "checkbox", indeterminate: this.hasChildren && this.indeterminate, scale: this.scale, tabIndex: -1 }),
       h("slot", null))) : null;
+    const selectedIcon = showBulletPoint
+      ? ICONS.bulletPoint
+      : showCheckmark
+        ? ICONS.checkmark
+        : null;
+    const bulletOrCheckIcon = selectedIcon ? (h("calcite-icon", { class: {
+        [CSS.bulletPointIcon]: selectedIcon === ICONS.bulletPoint,
+        [CSS.checkmarkIcon]: selectedIcon === ICONS.checkmark,
+        [CSS_UTILITY.rtl]: rtl
+      }, icon: selectedIcon, scale: "s" })) : null;
     const hidden = !(this.parentExpanded || this.depth === 1);
-    return (h(Host, { "aria-expanded": this.hasChildren ? this.expanded.toString() : undefined, "aria-hidden": hidden.toString(), "aria-selected": this.selected
-        ? "true"
-        : this.selectionMode === TreeSelectionMode.Multi ||
-          this.selectionMode === TreeSelectionMode.MultiChildren
-          ? "false"
-          : undefined, "calcite-hydrated-hidden": hidden, role: "treeitem", tabindex: this.parentExpanded || this.depth === 1 ? "0" : "-1" },
+    return (h(Host, { "aria-expanded": this.hasChildren ? this.expanded.toString() : undefined, "aria-hidden": hidden.toString(), "aria-selected": this.selected ? "true" : showCheckmark ? "false" : undefined, "calcite-hydrated-hidden": hidden, role: "treeitem", tabindex: this.parentExpanded || this.depth === 1 ? "0" : "-1" },
       h("div", { class: {
           [CSS.nodeContainer]: true,
           [CSS_UTILITY.rtl]: rtl
         }, "data-selection-mode": this.selectionMode, ref: (el) => (this.defaultSlotWrapper = el) },
-        icon,
+        chevron,
+        bulletOrCheckIcon,
         checkbox ? checkbox : h("slot", null)),
       h("div", { class: {
           [CSS.childrenContainer]: true,

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

@@ -1,13 +1,17 @@
 export const CSS = {
-  checkboxLabel: "calcite-tree-label",
-  checkbox: "calcite-tree-checkbox",
-  chevron: "calcite-tree-chevron",
-  nodeContainer: "calcite-tree-node",
-  childrenContainer: "calcite-tree-children"
+  checkboxLabel: "checkbox-label",
+  checkbox: "checkbox",
+  chevron: "chevron",
+  nodeContainer: "node-container",
+  childrenContainer: "children-container",
+  bulletPointIcon: "bullet-point",
+  checkmarkIcon: "checkmark"
 };
 export const SLOTS = {
   children: "children"
 };
 export const ICONS = {
+  bulletPoint: "bullet-point",
+  checkmark: "check",
   chevronRight: "chevron-right"
 };

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

@@ -76,18 +76,6 @@
 * Currently only used in Checkbox.
 */
 
-:host {
-  /* Base ":host" styles for the component */
-  box-sizing: border-box;
-  background-color: var(--calcite-ui-foreground-1);
-  color: var(--calcite-ui-text-2);
-  font-size: var(--calcite-font-size--1);
-}
-
-:host * {
-  box-sizing: border-box;
-}
-
 :root {
   --calcite-popper-transition: 150ms ease-in-out;
 }
@@ -98,12 +86,19 @@
 
 :host {
   align-items: stretch;
+  box-sizing: border-box;
   background-color: transparent;
   display: flex;
   flex-direction: column;
   position: relative;
   flex-shrink: 0;
   flex-grow: 0;
+  color: var(--calcite-ui-text-2);
+  font-size: var(--calcite-font-size--1);
+}
+
+:host * {
+  box-sizing: border-box;
 }
 
 calcite-value-list-item:last-of-type {

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

@@ -4,8 +4,9 @@ import { CSS, ICON_TYPES } from "./resources";
 import { calciteListItemChangeHandler, calciteListItemValueChangeHandler, cleanUpObserver, deselectSiblingItems, getItemData, handleFilter, initialize, initializeObserver, keyDownHandler, mutationObserverCallback, removeItem, selectSiblings, setFocus, setUpItems } from "../calcite-pick-list/shared-list-logic";
 import List from "../calcite-pick-list/shared-list-render";
 import { getRoundRobinIndex } from "../../utils/array";
+import { createObserver } from "../../utils/observers";
 /**
- * @slot - A slot for adding `calcite-pick-list-item` elements or `calcite-pick-list-group` elements. Items are displayed as a vertical list.
+ * @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.
  */
 export class CalciteValueList {
@@ -50,7 +51,7 @@ export class CalciteValueList {
     this.selectedValues = new Map();
     this.dataForFilter = [];
     this.lastSelectedItem = null;
-    this.observer = new MutationObserver(mutationObserverCallback.bind(this));
+    this.mutationObserver = createObserver("mutation", mutationObserverCallback.bind(this));
     this.setFilterEl = (el) => {
       this.filterEl = el;
     };
@@ -161,9 +162,11 @@ export class CalciteValueList {
   //  Public Methods
   //
   // --------------------------------------------------------------------------
+  /** Returns the currently selected items */
   async getSelectedItems() {
     return this.selectedValues;
   }
+  /** Sets focus on the component. */
   async setFocus(focusId) {
     return setFocus.call(this, focusId);
   }
@@ -388,7 +391,7 @@ export class CalciteValueList {
         "return": "Promise<Map<string, HTMLCalciteValueListItemElement>>"
       },
       "docs": {
-        "text": "",
+        "text": "Returns the currently selected items",
         "tags": []
       }
     },
@@ -411,7 +414,7 @@ export class CalciteValueList {
         "return": "Promise<void>"
       },
       "docs": {
-        "text": "",
+        "text": "Sets focus on the component.",
         "tags": []
       }
     }