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

package/dist/collection/components/chip/chip.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.81
+ * v1.0.0-beta.82
  */
 import { Component, h, Prop, Event, Element, Method } from "@stencil/core";
 import { getSlotted } from "../../utils/dom";
@@ -73,13 +73,13 @@ export class Chip {
   renderChipImage() {
     const { el } = this;
     const hasChipImage = getSlotted(el, SLOTS.image);
-    return hasChipImage ? (h("div", { class: CSS.chipImageContainer, key: "image" },
+    return hasChipImage ? (h("div", { class: CSS.imageContainer, key: "image" },
       h("slot", { name: SLOTS.image }))) : null;
   }
   render() {
-    const iconEl = (h("calcite-icon", { class: CSS.calciteChipIcon, flipRtl: this.iconFlipRtl, icon: this.icon, scale: "s" }));
+    const iconEl = (h("calcite-icon", { class: CSS.chipIcon, flipRtl: this.iconFlipRtl, icon: this.icon, scale: "s" }));
     const closeButton = (h("button", { "aria-describedby": this.guid, "aria-label": this.dismissLabel, class: CSS.close, onClick: this.closeClickHandler, ref: (el) => (this.closeButton = el) },
-      h("calcite-icon", { icon: ICONS.close, scale: "s" })));
+      h("calcite-icon", { class: CSS.closeIcon, icon: ICONS.close, scale: "s" })));
     return (h("div", { class: "container" },
       this.renderChipImage(),
       this.icon ? iconEl : null,

package/dist/collection/components/chip/interfaces.js

@@ -1,6 +1,6 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.82
  */
 export {};

package/dist/collection/components/chip/resources.js

@@ -1,13 +1,14 @@
 /*!
  * 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.81
+ * v1.0.0-beta.82
  */
 export const CSS = {
   title: "title",
   close: "close",
-  chipImageContainer: "chip-image-container",
-  calciteChipIcon: "calcite-chip--icon"
+  imageContainer: "image-container",
+  chipIcon: "chip-icon",
+  closeIcon: "close-icon"
 };
 export const TEXT = {
   close: "Close"

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

@@ -180,22 +180,15 @@
 .scope {
   pointer-events: none;
   position: absolute;
-  margin-bottom: 0px;
-  margin-right: 0px;
-  height: 0.5rem;
-  width: 0.5rem;
-  padding: 0px;
   font-size: var(--calcite-font-size--1);
   outline-offset: 0;
   outline-color: transparent;
   transition: outline-offset 100ms ease-in-out, outline-color 100ms ease-in-out;
-  margin-top: -0.25rem;
-  margin-left: -0.25rem;
-  outline-offset: 10px;
+  outline-offset: 14px;
 }
 .scope:focus {
   outline: 2px solid var(--calcite-ui-brand);
-  outline-offset: 12px;
+  outline-offset: 16px;
 }
 
 .color-field-and-slider {

package/dist/collection/components/color-picker/color-picker.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.81
+ * v1.0.0-beta.82
  */
 import { Component, Element, Event, h, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import Color from "color";
@@ -409,7 +409,7 @@ export class ColorPicker {
         /* the channel container is ltr, so we apply the host's direction */
         this.renderChannel(channel, index, channelLabels[index], channelAriaLabels[index], direction)))));
     };
-    this.renderChannel = (value, index, label, ariaLabel, direction) => (h("calcite-input", { class: CSS.channel, "data-channel-index": index, dir: direction, label: ariaLabel, numberButtonType: "none", onCalciteInputChange: this.handleChannelChange, onCalciteInputInput: this.handleChannelInput, prefixText: label, scale: this.scale === "l" ? "m" : "s", type: "number", value: value === null || value === void 0 ? void 0 : value.toString() }));
+    this.renderChannel = (value, index, label, ariaLabel, direction) => (h("calcite-input", { class: CSS.channel, "data-channel-index": index, dir: direction, label: ariaLabel, numberButtonType: "none", onCalciteInputChange: this.handleChannelChange, onCalciteInputInput: this.handleChannelInput, onKeyDown: this.handleKeyDown, prefixText: label, scale: this.scale === "l" ? "m" : "s", type: "number", value: value === null || value === void 0 ? void 0 : value.toString() }));
     this.deleteColor = () => {
       const colorToDelete = this.color.hex();
       const inStorage = this.savedColors.indexOf(colorToDelete) > -1;
@@ -629,6 +629,11 @@ export class ColorPicker {
   //  Private Methods
   //
   //--------------------------------------------------------------------------
+  handleKeyDown(event) {
+    if (event.key === "Enter") {
+      event.preventDefault();
+    }
+  }
   showIncompatibleColorWarning(value, format) {
     console.warn(`ignoring color value (${value}) as it is not compatible with the current format (${format})`);
   }

package/dist/collection/components/color-picker/interfaces.js

@@ -1,6 +1,6 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.82
  */
 export {};

package/dist/collection/components/color-picker/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.81
+ * v1.0.0-beta.82
  */
 import Color from "color";
 export const CSS = {

package/dist/collection/components/color-picker/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.81
+ * v1.0.0-beta.82
  */
 export function rgbToHex(color) {
   const { r, g, b } = color;

package/dist/collection/components/color-picker-hex-input/color-picker-hex-input.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.81
+ * v1.0.0-beta.82
  */
 import { Component, Element, Event, h, Listen, Method, Prop, State, Watch } from "@stencil/core";
 import { hexChar, isLonghandHex, isValidHex, normalizeHex, rgbToHex } from "../color-picker/utils";
@@ -127,7 +127,7 @@ export class ColorPickerHexInput {
     const { intlHex, value } = this;
     const hexInputValue = this.formatForInternalInput(value);
     return (h("div", { class: CSS.container },
-      h("calcite-input", { class: CSS.input, label: intlHex, maxLength: 6, onCalciteInputBlur: this.onCalciteInputBlur, onCalciteInputChange: this.onInputChange, prefixText: "#", ref: this.storeInputRef, scale: this.scale, value: hexInputValue }),
+      h("calcite-input", { class: CSS.input, label: intlHex, maxLength: 6, onCalciteInputBlur: this.onCalciteInputBlur, onCalciteInputChange: this.onInputChange, onKeyDown: this.handleKeyDown, prefixText: "#", ref: this.storeInputRef, scale: this.scale, value: hexInputValue }),
       hexInputValue ? (h("calcite-color-picker-swatch", { active: true, class: CSS.preview, color: `#${hexInputValue}`, scale: this.scale })) : null));
   }
   //--------------------------------------------------------------------------
@@ -175,6 +175,11 @@ export class ColorPickerHexInput {
   nudgeRGBChannels(color, amount) {
     return Color.rgb(color.array().map((channel) => channel + amount));
   }
+  handleKeyDown(event) {
+    if (event.key === "Enter") {
+      event.preventDefault();
+    }
+  }
   static get is() { return "calcite-color-picker-hex-input"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {

package/dist/collection/components/color-picker-hex-input/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.81
+ * v1.0.0-beta.82
  */
 export const CSS = {
   container: "container",

package/dist/collection/components/color-picker-swatch/color-picker-swatch.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.81
+ * v1.0.0-beta.82
  */
 import { Component, Element, h, Prop, Watch } from "@stencil/core";
 import Color from "color";

package/dist/collection/components/color-picker-swatch/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.81
+ * v1.0.0-beta.82
  */
 export const CSS = {
   swatch: "swatch",

package/dist/collection/components/combobox/combobox.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.81
+ * v1.0.0-beta.82
  */
 import { Component, h, Prop, State, Listen, Event, Element, Method, Watch, Host } from "@stencil/core";
 import { filter } from "../../utils/filter";
@@ -11,9 +11,10 @@ import { guid } from "../../utils/guid";
 import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup, TEXT } from "./resources";
 import { getItemAncestors, getItemChildren, hasActiveChildren } from "./utils";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
-import { afterConnectDefaultValueSet, connectForm, disconnectForm, HiddenFormInputSlot } from "../../utils/form";
+import { afterConnectDefaultValueSet, connectForm, disconnectForm, HiddenFormInputSlot, submitForm } from "../../utils/form";
 import { createObserver } from "../../utils/observers";
 import { updateHostInteraction } from "../../utils/interactive";
+import { toAriaBoolean } from "../../utils/dom";
 const isGroup = (el) => el.tagName === ComboboxItemGroup;
 const itemUidPrefix = "combobox-item-";
 const chipUidPrefix = "combobox-chip-";
@@ -86,7 +87,7 @@ export class Combobox {
         : null;
     };
     this.getValue = () => {
-      const items = this.selectedItems.map((item) => item === null || item === void 0 ? void 0 : item.value.toString());
+      const items = this.selectedItems.map((item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.value) === null || _a === void 0 ? void 0 : _a.toString(); });
       return (items === null || items === void 0 ? void 0 : items.length) ? (items.length > 1 ? items : items[0]) : "";
     };
     this.onLabelClick = () => {
@@ -169,6 +170,9 @@ export class Combobox {
           else if (this.allowCustomValues && this.text) {
             this.addCustomChip(this.text, true);
           }
+          else if (!event.defaultPrevented) {
+            submitForm(this);
+          }
           break;
         case "Delete":
         case "Backspace":
@@ -260,7 +264,7 @@ export class Combobox {
       const find = (item, filteredData) => item &&
         filteredData.some(({ label, value }) => {
           if (isGroup(item)) {
-            return value === item.label || value === item.label;
+            return value === item.label;
           }
           return (value === item.textLabel ||
             value === item.value ||
@@ -370,6 +374,8 @@ export class Combobox {
       return;
     }
     const target = event.target;
+    const newIndex = this.visibleItems.indexOf(target);
+    this.updateActiveItemIndex(newIndex);
     this.toggleSelection(target, target.selected);
   }
   //--------------------------------------------------------------------------
@@ -587,8 +593,7 @@ export class Combobox {
     return this.items.map((item) => ({
       constant: item.constant,
       value: item.value,
-      label: item.textLabel,
-      guid: item.guid
+      label: item.textLabel
     }));
   }
   getNeedsIcon() {
@@ -741,7 +746,7 @@ export class Combobox {
         }, disabled: disabled, id: `${inputUidPrefix}${guid}`, key: "input", onBlur: this.comboboxBlurHandler, onFocus: this.comboboxFocusHandler, onInput: this.inputHandler, placeholder: placeholder, ref: (el) => (this.textInput = el), type: "text" })));
   }
   renderListBoxOptions() {
-    return this.visibleItems.map((item) => (h("li", { "aria-selected": (!!item.selected).toString(), id: item.guid ? `${itemUidPrefix}${item.guid}` : null, role: "option", tabindex: "-1" }, item.textLabel)));
+    return this.visibleItems.map((item) => (h("li", { "aria-selected": toAriaBoolean(item.selected), id: item.guid ? `${itemUidPrefix}${item.guid}` : null, role: "option", tabindex: "-1" }, item.textLabel)));
   }
   renderPopperContainer() {
     const { active, setMenuEl, setListContainerEl } = this;
@@ -770,7 +775,7 @@ export class Combobox {
     const { active, guid, label } = this;
     const single = this.selectionMode === "single";
     return (h(Host, { onKeyDown: this.keydownHandler },
-      h("div", { "aria-autocomplete": "list", "aria-expanded": active.toString(), "aria-haspopup": "listbox", "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-owns": `${listboxUidPrefix}${guid}`, class: {
+      h("div", { "aria-autocomplete": "list", "aria-expanded": toAriaBoolean(active), "aria-haspopup": "listbox", "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-owns": `${listboxUidPrefix}${guid}`, class: {
           wrapper: true,
           "wrapper--single": single || !this.selectedItems.length,
           "wrapper--active": active

package/dist/collection/components/combobox/interfaces.js

@@ -1,6 +1,6 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.82
  */
 export {};

package/dist/collection/components/combobox/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.81
+ * v1.0.0-beta.82
  */
 export const ComboboxItem = "CALCITE-COMBOBOX-ITEM";
 export const ComboboxItemGroup = "CALCITE-COMBOBOX-ITEM-GROUP";
@@ -9,3 +9,7 @@ export const ComboboxChildSelector = `${ComboboxItem}, ${ComboboxItemGroup}`;
 export const TEXT = {
   removeTag: "Remove tag"
 };
+export const CSS = {
+  labelActive: "label--active",
+  labelSelected: "label--selected"
+};

package/dist/collection/components/combobox/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.81
+ * v1.0.0-beta.82
  */
 import { nodeListToArray } from "../../utils/dom";
 import { ComboboxChildSelector } from "./resources";

package/dist/collection/components/combobox-item/combobox-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.81
+ * v1.0.0-beta.82
  */
 import { Component, Element, Event, Host, Method, Prop, h, Watch } from "@stencil/core";
 import { getElementProp, getSlotted } from "../../utils/dom";

package/dist/collection/components/combobox-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.81
+ * v1.0.0-beta.82
  */
 export const CSS = {
   icon: "icon",

package/dist/collection/components/combobox-item-group/combobox-item-group.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.82
  */
 import { Component, Prop, h, Element } from "@stencil/core";
 import { CSS } from "./resources";

package/dist/collection/components/combobox-item-group/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.81
+ * v1.0.0-beta.82
  */
 export const CSS = {
   list: "list",

package/dist/collection/components/date-picker/date-picker.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.81
+ * v1.0.0-beta.82
  */
 import { Component, h, Prop, Event, Element, Host, State, Watch, Build } from "@stencil/core";
 import { getLocaleData } from "./utils";
@@ -228,10 +228,14 @@ export class DatePicker {
     this.activeStartDate = startDate;
   }
   onMinChanged(min) {
-    this.minAsDate = dateFromISO(min);
+    if (min) {
+      this.minAsDate = dateFromISO(min);
+    }
   }
   onMaxChanged(max) {
-    this.maxAsDate = dateFromISO(max);
+    if (max) {
+      this.maxAsDate = dateFromISO(max);
+    }
   }
   // --------------------------------------------------------------------------
   //

package/dist/collection/components/date-picker/interfaces.js

@@ -1,6 +1,6 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.82
  */
 export {};

package/dist/collection/components/date-picker/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.81
+ * v1.0.0-beta.82
  */
 export const HEADING_LEVEL = 2;
 export const TEXT = {

package/dist/collection/components/date-picker/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.81
+ * v1.0.0-beta.82
  */
 import { getAssetPath } from "@stencil/core";
 import { locales } from "../../utils/locale";

package/dist/collection/components/date-picker-day/date-picker-day.css

@@ -421,8 +421,6 @@
   }
   :host([selected]) .day {
     border-radius: 0px;
-  }
-  :host([selected]) .day {
     background-color: highlight;
   }
 

package/dist/collection/components/date-picker-day/date-picker-day.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.81
+ * v1.0.0-beta.82
  */
 import { Component, Element, Prop, Host, Event, Listen, h } from "@stencil/core";
 import { getElementDir } from "../../utils/dom";

package/dist/collection/components/date-picker-month/date-picker-month.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.81
+ * v1.0.0-beta.82
  */
 import { Component, Element, Prop, Host, Event, h, Listen } from "@stencil/core";
 import { inRange, sameDate, dateFromRange } from "../../utils/date";
@@ -156,7 +156,7 @@ export class DatePickerMonth {
     if (day - 6 === startOfWeek) {
       return days;
     }
-    for (let i = lastDate.getDay(); i >= startOfWeek; i--) {
+    for (let i = Math.abs(lastDate.getDay() - startOfWeek); i >= 0; i--) {
       days.push(date - i);
     }
     return days;

package/dist/collection/components/date-picker-month-header/date-picker-month-header.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.81
+ * v1.0.0-beta.82
  */
 import { Component, Element, Prop, Event, h, State, Watch, Fragment } from "@stencil/core";
 import { dateFromRange, nextMonth, prevMonth, localizeNumber, parseNumber, getOrder } from "../../utils/date";

package/dist/collection/components/dropdown/dropdown.js

@@ -1,10 +1,10 @@
 /*!
  * 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.81
+ * v1.0.0-beta.82
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop, Watch } from "@stencil/core";
-import { focusElement, getSlotted } from "../../utils/dom";
+import { focusElement, toAriaBoolean } from "../../utils/dom";
 import { createPopper, CSS as PopperCSS, updatePopper, popperMenuComputedPlacements, defaultMenuPlacement, filterComputedPlacements } from "../../utils/popper";
 import { SLOTS } from "./resources";
 import { createObserver } from "../../utils/observers";
@@ -54,6 +54,7 @@ export class Dropdown {
     /** specify the width of dropdown, defaults to m */
     this.width = "m";
     this.items = [];
+    this.groups = [];
     this.activeTransitionProp = "visibility";
     this.mutationObserver = createObserver("mutation", () => this.updateItems());
     this.resizeObserver = createObserver("resize", () => this.setMaxScrollerHeight());
@@ -68,12 +69,26 @@ export class Dropdown {
         ? filterComputedPlacements(flipPlacements, el)
         : null;
     };
+    this.updateTriggers = (event) => {
+      this.triggers = event.target.assignedElements({
+        flatten: true
+      });
+      this.reposition();
+    };
     this.updateItems = () => {
+      this.items = this.groups
+        .map((group) => Array.from(group === null || group === void 0 ? void 0 : group.querySelectorAll("calcite-dropdown-item")))
+        .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);
       this.updateSelectedItems();
-      this.triggers = getSlotted(this.el, "dropdown-trigger", { all: true });
-      this.items = Array.from(this.el.querySelectorAll("calcite-dropdown-item"));
       this.reposition();
     };
+    this.updateGroups = (event) => {
+      const groups = event.target
+        .assignedElements({ flatten: true })
+        .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-dropdown-group"));
+      this.groups = groups;
+      this.updateItems();
+    };
     this.setMaxScrollerHeight = () => {
       const { active, scrollerEl } = this;
       if (!scrollerEl || !active) {
@@ -163,7 +178,6 @@ export class Dropdown {
     var _a;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
     this.createPopper();
-    this.updateItems();
     this.setFilteredPlacements();
   }
   componentDidLoad() {
@@ -182,15 +196,15 @@ export class Dropdown {
     const { active } = this;
     return (h(Host, null,
       h("div", { class: "calcite-dropdown-trigger-container", onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl },
-        h("slot", { "aria-expanded": active.toString(), "aria-haspopup": "true", name: SLOTS.dropdownTrigger })),
-      h("div", { "aria-hidden": (!active).toString(), class: "calcite-dropdown-wrapper", ref: this.setMenuEl },
+        h("slot", { "aria-expanded": toAriaBoolean(active), "aria-haspopup": "true", name: SLOTS.dropdownTrigger, onSlotchange: this.updateTriggers })),
+      h("div", { "aria-hidden": toAriaBoolean(!active), class: "calcite-dropdown-wrapper", ref: this.setMenuEl },
         h("div", { class: {
             ["calcite-dropdown-content"]: true,
             [PopperCSS.animation]: true,
             [PopperCSS.animationActive]: active
           }, onTransitionEnd: this.transitionEnd, ref: this.setScrollerEl },
           h("div", { hidden: !this.active },
-            h("slot", null))))));
+            h("slot", { onSlotchange: this.updateGroups }))))));
   }
   //--------------------------------------------------------------------------
   //
@@ -315,16 +329,14 @@ export class Dropdown {
     this.popper = null;
   }
   updateSelectedItems() {
-    const items = Array.from(this.el.querySelectorAll("calcite-dropdown-item"));
-    this.selectedItems = items.filter((item) => item.active);
+    this.selectedItems = this.items.filter((item) => item.active);
   }
   getMaxScrollerHeight() {
-    const groups = Array.from(this.el.querySelectorAll("calcite-dropdown-group"));
     const { maxItems } = this;
     let itemsToProcess = 0;
     let maxScrollerHeight = 0;
     let groupHeaderHeight;
-    groups.forEach((group) => {
+    this.groups.forEach((group) => {
       if (maxItems > 0 && itemsToProcess < maxItems) {
         Array.from(group.children).forEach((item, index) => {
           if (index === 0) {

package/dist/collection/components/dropdown/interfaces.js

@@ -1,6 +1,6 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.82
  */
 export {};

package/dist/collection/components/dropdown/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.81
+ * v1.0.0-beta.82
  */
 export const SLOTS = {
   dropdownTrigger: "dropdown-trigger"

package/dist/collection/components/dropdown-group/dropdown-group.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.82
  */
 import { Component, Element, Event, h, Host, Listen, Prop } from "@stencil/core";
 import { getElementProp } from "../../utils/dom";

package/dist/collection/components/dropdown-group/interfaces.js

@@ -1,6 +1,6 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-beta.81
+ * v1.0.0-beta.82
  */
 export {};

package/dist/collection/components/dropdown-group/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.81
+ * v1.0.0-beta.82
  */
 export const CSS = {
   containerSmall: "container--s",

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

@@ -1,10 +1,10 @@
 /*!
  * 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.81
+ * v1.0.0-beta.82
  */
 import { Component, Element, Event, h, Host, Listen, Method, Prop } from "@stencil/core";
-import { getElementProp } from "../../utils/dom";
+import { getElementProp, toAriaBoolean } from "../../utils/dom";
 import { CSS } from "./resources";
 /**
  * @slot - A slot for adding text.
@@ -60,7 +60,7 @@ export class DropdownItem {
         : this.selectionMode === "multi"
           ? "menuitemcheckbox"
           : "menuitem";
-    const itemAria = this.selectionMode !== "none" ? this.active.toString() : null;
+    const itemAria = this.selectionMode !== "none" ? toAriaBoolean(this.active) : null;
     return (h(Host, { "aria-checked": itemAria, role: itemRole, tabindex: "0" },
       h("div", { class: {
           container: true,