@esri/solutions-components 0.6.15 → 0.6.16

package/dist/components/combobox.js

@@ -16,7 +16,7 @@ import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { c as createObserver } from './observers.js';
 import { o as onToggleOpenCloseComponent } from './openCloseComponent.js';
 import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n.js';
-import { C as ComboboxChildSelector, g as getItemAncestors, a as getItemChildren, h as hasActiveChildren, b as ComboboxItem, c as ComboboxItemGroup, d as CSS$1 } from './utils2.js';
+import { i as isSingleLike, C as ComboboxChildSelector, g as getItemAncestors, a as getItemChildren, h as hasActiveChildren, b as ComboboxItem, c as ComboboxItemGroup, d as CSS$1 } from './utils2.js';
 import { d as defineCustomElement$2 } from './chip.js';
 import { d as defineCustomElement$1 } from './icon.js';
 import { d as debounce } from './debounce.js';
@@ -24,18 +24,18 @@ import { d as debounce } from './debounce.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1
+ * v1.8.0
  */
 const CSS = {
   button: "x-button",
 };
 function XButton({ disabled, key, label, onClick, ref, scale, }) {
   return (h("button", { "aria-label": label, class: CSS.button, disabled: disabled, key: key, onClick: onClick, tabIndex: -1, type: "button",
-    // eslint-disable-next-line react/jsx-sort-props
+    // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
     ref: ref }, h("calcite-icon", { icon: "x", scale: scale === "l" ? "m" : "s" })));
 }
 
-const comboboxCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([scale=s]) .x-button{inline-size:1rem;block-size:1rem}:host([scale=m]) .x-button{inline-size:1.5rem;block-size:1.5rem}:host([scale=l]) .x-button{inline-size:2rem;block-size:2rem}.x-button{margin:0px;display:flex;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;align-content:center;align-items:center;justify-content:center;align-self:center;border-width:2px;background-color:transparent;color:var(--calcite-ui-text-3);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-radius:50%;border-color:transparent;background-color:var(--calcite-ui-foreground-2)}.x-button:active,.x-button:hover{color:var(--calcite-ui-text-1);background-color:var(--calcite-ui-foreground-3)}.x-button:active{border-style:solid;border-color:var(--calcite-ui-brand)}.x-button calcite-icon{color:inherit}:host([scale=s]){font-size:var(--calcite-font-size--2);--calcite-combobox-item-spacing-unit-l:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-input-height:1.5rem}:host([scale=s]) .x-button{margin-inline-end:0.5rem}:host([scale=m]){font-size:var(--calcite-font-size--1);--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.5rem;--calcite-combobox-input-height:2rem}:host([scale=m]) .x-button{margin-inline-end:0.75rem}:host([scale=l]){font-size:var(--calcite-font-size-0);--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.75rem;--calcite-combobox-input-height:2.75rem}:host([scale=l]) .x-button{margin-inline-end:1rem}.wrapper{display:flex;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-1);outline-color:transparent;padding-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);padding-inline:var(--calcite-combobox-item-spacing-unit-l)}:host(:focus-within) .wrapper,.wrapper--active{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}.wrapper--single{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l);cursor:pointer;flex-wrap:nowrap}.grid-input{display:flex;flex-grow:1;flex-wrap:wrap;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px}.input{flex-grow:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-style:none;background-color:transparent;padding:0px;font-family:inherit;color:var(--calcite-ui-text-1);font-size:inherit;block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height);min-inline-size:120px;margin-block-end:var(--calcite-combobox-item-spacing-unit-s)}.input:focus{outline:2px solid transparent;outline-offset:2px}.input--transparent{opacity:0}.input--single{margin-block:0px;padding:0px}.wrapper--active .input-single{cursor:text}.input--hidden{pointer-events:none;inline-size:0px;min-inline-size:0px;opacity:0}.input--icon{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.input-wrap{display:flex;flex-grow:1}.input-wrap--single{flex:1 1 0%;overflow:hidden}.label{pointer-events:none;display:flex;max-inline-size:100%;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px;font-weight:var(--calcite-font-weight-normal);block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height)}.label--icon{padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.icon-end,.icon-start{display:flex;inline-size:1rem;cursor:pointer;align-items:center}.icon-end{flex:none}.floating-ui-container{--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown);display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index);visibility:hidden}.floating-ui-container .calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-app-z-index);border-radius:0.25rem}.floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim{transform:translateY(-5px)}.floating-ui-container[data-placement^=top] .calcite-floating-ui-anim{transform:translateY(5px)}.floating-ui-container[data-placement^=left] .calcite-floating-ui-anim{transform:translateX(5px)}.floating-ui-container[data-placement^=right] .calcite-floating-ui-anim{transform:translateX(-5px)}.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;transform:translate(0)}.floating-ui-container--active{visibility:visible}@media (forced-colors: active){.wrapper,.floating-ui-container--active{border:1px solid canvasText}}.screen-readers-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.list-container{max-block-size:45vh;overflow-y:auto;background-color:var(--calcite-ui-foreground-1);inline-size:var(--calcite-dropdown-width)}.list{margin:0px;display:block;padding:0px}.list--hide{block-size:0px;overflow:hidden}.chip{margin-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);margin-inline:0 var(--calcite-combobox-item-spacing-unit-s);max-inline-size:100%}.chip--active{background-color:var(--calcite-ui-foreground-3)}.item{display:block}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}::slotted(calcite-combobox-item-group:not(:first-child)){padding-block-start:var(--calcite-combobox-item-spacing-unit-l)}";
+const comboboxCss = ":host([disabled]){cursor:default;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:block}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([scale=s]) .x-button{inline-size:1rem;block-size:1rem}:host([scale=m]) .x-button{inline-size:1.5rem;block-size:1.5rem}:host([scale=l]) .x-button{inline-size:2rem;block-size:2rem}.x-button{margin:0px;display:flex;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;align-content:center;align-items:center;justify-content:center;align-self:center;border-width:2px;background-color:transparent;color:var(--calcite-ui-text-3);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-radius:50%;border-color:transparent;background-color:var(--calcite-ui-foreground-2)}.x-button:active,.x-button:hover{color:var(--calcite-ui-text-1);background-color:var(--calcite-ui-foreground-3)}.x-button:active{border-style:solid;border-color:var(--calcite-ui-brand)}.x-button calcite-icon{color:inherit}:host([scale=s]){font-size:var(--calcite-font-size--2);--calcite-combobox-item-spacing-unit-l:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-input-height:1rem;--calcite-internal-combobox-input-margin-block:calc(0.25rem - 1px)}:host([scale=s]) .x-button{margin-inline-end:0.5rem}:host([scale=m]){font-size:var(--calcite-font-size--1);--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.5rem;--calcite-combobox-input-height:1rem;--calcite-internal-combobox-input-margin-block:calc(0.5rem - 1px)}:host([scale=m]) .x-button{margin-inline-end:0.75rem}:host([scale=l]){font-size:var(--calcite-font-size-0);--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.75rem;--calcite-combobox-input-height:1.5rem;--calcite-internal-combobox-input-margin-block:calc(0.625rem - 1px)}:host([scale=l]) .x-button{margin-inline-end:1rem}.wrapper{display:flex;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-1);outline-color:transparent;padding-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);padding-inline:var(--calcite-combobox-item-spacing-unit-l)}:host(:focus-within) .wrapper,.wrapper--active{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}.wrapper--single{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l);cursor:pointer;flex-wrap:nowrap}.grid-input{display:flex;flex-grow:1;flex-wrap:wrap;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px}.input{flex-grow:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-style:none;background-color:transparent;padding:0px;font-family:inherit;color:var(--calcite-ui-text-1);font-size:inherit;block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height);min-inline-size:120px;margin-block-end:var(--calcite-combobox-item-spacing-unit-s)}.input:focus{outline:2px solid transparent;outline-offset:2px}.input--transparent{opacity:0}.input--single{padding:0px;margin-block:var(--calcite-internal-combobox-input-margin-block)}.wrapper--active .input-single{cursor:text}.input--hidden{pointer-events:none;inline-size:0px;min-inline-size:0px;opacity:0}.input--icon{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.input-wrap{display:flex;flex-grow:1;align-items:center}.input-wrap--single{flex:1 1 0%;overflow:hidden}.label{pointer-events:none;display:flex;max-inline-size:100%;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px;font-weight:var(--calcite-font-weight-normal);block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height)}.label--icon{padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.icon-end,.icon-start{display:flex;inline-size:1rem;cursor:pointer;align-items:center}.icon-end{flex:none}.floating-ui-container{--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown);display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index);visibility:hidden}.floating-ui-container .calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-app-z-index);border-radius:0.25rem}.floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim{transform:translateY(-5px)}.floating-ui-container[data-placement^=top] .calcite-floating-ui-anim{transform:translateY(5px)}.floating-ui-container[data-placement^=left] .calcite-floating-ui-anim{transform:translateX(5px)}.floating-ui-container[data-placement^=right] .calcite-floating-ui-anim{transform:translateX(-5px)}.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;transform:translate(0)}.floating-ui-container--active{visibility:visible}@media (forced-colors: active){.wrapper,.floating-ui-container--active{border:1px solid canvasText}}.screen-readers-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.list-container{max-block-size:45vh;overflow-y:auto;background-color:var(--calcite-ui-foreground-1);inline-size:var(--calcite-dropdown-width)}.list{margin:0px;display:block;padding:0px}.list--hide{block-size:0px;overflow:hidden}.chip{margin-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);margin-inline:0 var(--calcite-combobox-item-spacing-unit-s);max-inline-size:100%}.chip--active{background-color:var(--calcite-ui-foreground-3)}.item{display:block}::slotted(input[slot=hidden-form-input]){margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}:host([hidden]){display:none}[hidden]{display:none}::slotted(calcite-combobox-item-group:not(:first-child)){padding-block-start:var(--calcite-combobox-item-spacing-unit-l)}";
 
 const isGroup = (el) => el.tagName === ComboboxItemGroup;
 const itemUidPrefix = "combobox-item-";
@@ -242,7 +242,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
       if (this.allowCustomValues && this.text.trim().length) {
         this.addCustomChip(this.text);
       }
-      if (this.selectionMode === "single") {
+      if (isSingleLike(this.selectionMode)) {
         if (this.textInput) {
           this.textInput.value = "";
         }
@@ -313,6 +313,10 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
       this.selectedItems = this.getSelectedItems();
       this.filteredItems = this.getFilteredItems();
       this.needsIcon = this.getNeedsIcon();
+      this.items.forEach((item) => {
+        item.selectionMode = this.selectionMode;
+        item.scale = this.scale;
+      });
       if (!this.allowCustomValues) {
         this.setMaxScrollerHeight();
       }
@@ -400,6 +404,9 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
   overlayPositioningHandler() {
     this.reposition(true);
   }
+  handlePropsChange() {
+    this.updateItems();
+  }
   valueHandler(value) {
     if (!this.internalValueChangeFlag) {
       const items = this.getItems();
@@ -486,12 +493,13 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
     connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
+    connectLabel(this);
+    connectForm(this);
     this.internalValueChangeFlag = true;
     this.value = this.getValue();
     this.internalValueChangeFlag = false;
     (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
-    connectLabel(this);
-    connectForm(this);
+    this.updateItems();
     this.setFilteredPlacements();
     this.reposition(true);
     if (this.open) {
@@ -612,7 +620,8 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
     return [...this.groupItems, ...this.items];
   }
   toggleSelection(item, value = !item.selected) {
-    if (!item) {
+    if (!item ||
+      (this.selectionMode === "single-persist" && item.selected && item.value === this.value)) {
       return;
     }
     if (this.isMulti()) {
@@ -686,7 +695,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
     }));
   }
   getNeedsIcon() {
-    return this.selectionMode === "single" && this.items.some((item) => item.icon);
+    return isSingleLike(this.selectionMode) && this.items.some((item) => item.icon);
   }
   resetText() {
     if (this.textInput) {
@@ -790,7 +799,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
     }
   }
   isMulti() {
-    return this.selectionMode !== "single";
+    return !isSingleLike(this.selectionMode);
   }
   //--------------------------------------------------------------------------
   //
@@ -812,7 +821,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
   }
   renderInput() {
     const { guid, disabled, placeholder, selectionMode, selectedItems, open } = this;
-    const single = selectionMode === "single";
+    const single = isSingleLike(selectionMode);
     const selectedItem = selectedItems[0];
     const showLabel = !open && single && !!selectedItem;
     return (h("span", { class: {
@@ -828,7 +837,7 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
         "input--hidden": showLabel,
         "input--icon": !!this.placeholderIcon,
       }, disabled: disabled, id: `${inputUidPrefix}${guid}`, key: "input", onBlur: this.comboboxBlurHandler, onFocus: this.comboboxFocusHandler, onInput: this.inputHandler, placeholder: placeholder, type: "text",
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.textInput = el) })));
   }
   renderListBoxOptions() {
@@ -845,16 +854,16 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
         "floating-ui-container": true,
         "floating-ui-container--active": open,
       },
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: setFloatingEl }, h("div", { class: classes,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: setContainerEl }, h("ul", { class: { list: true, "list--hide": !open } }, h("slot", null)))));
   }
   renderIconStart() {
     const { selectedItems, placeholderIcon, selectionMode, placeholderIconFlipRtl } = this;
     const selectedItem = selectedItems[0];
     const selectedIcon = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon;
-    const singleSelectionMode = selectionMode === "single";
+    const singleSelectionMode = isSingleLike(selectionMode);
     const iconAtStart = !this.open && selectedItem
       ? !!selectedIcon && singleSelectionMode
       : !!this.placeholderIcon && (!selectedItem || singleSelectionMode);
@@ -867,14 +876,14 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
   render() {
     var _a;
     const { guid, label, open } = this;
-    const single = this.selectionMode === "single";
+    const single = isSingleLike(this.selectionMode);
     const isClearable = !this.clearDisabled && ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) > 0;
     return (h(Host, { onClick: this.comboboxFocusHandler }, h("div", { "aria-autocomplete": "list", "aria-controls": `${listboxUidPrefix}${guid}`, "aria-expanded": toAriaBoolean(open), "aria-haspopup": "listbox", "aria-label": getLabelText(this), "aria-live": "polite", "aria-owns": `${listboxUidPrefix}${guid}`, class: {
         wrapper: true,
         "wrapper--single": single || !this.selectedItems.length,
         "wrapper--active": open,
       }, onClick: this.clickHandler, onKeyDown: this.keyDownHandler, role: "combobox",
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setReferenceEl }, h("div", { class: "grid-input" }, this.renderIconStart(), !single && this.renderChips(), h("label", { class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label), this.renderInput()), isClearable ? (h(XButton, { disabled: this.disabled, key: "close-button", label: this.messages.clear, scale: this.scale })) : null, this.renderIconEnd()), h("ul", { "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-multiselectable": "true", class: "screen-readers-only", id: `${listboxUidPrefix}${guid}`, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()), this.renderFloatingUIContainer(), h(HiddenFormInputSlot, { component: this })));
   }
   static get assetsDirs() { return ["assets"]; }
@@ -884,6 +893,8 @@ const Combobox = /*@__PURE__*/ proxyCustomElement(class Combobox extends HTMLEle
     "disabled": ["handleDisabledChange"],
     "maxItems": ["maxItemsHandler"],
     "overlayPositioning": ["overlayPositioningHandler"],
+    "selectionMode": ["handlePropsChange"],
+    "scale": ["handlePropsChange"],
     "value": ["valueHandler"],
     "messageOverrides": ["onMessagesChange"],
     "flipPlacements": ["flipPlacementsHandler"],

package/dist/components/conditionalSlot.js

@@ -9,7 +9,7 @@ import { c as createObserver } from './observers.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1
+ * v1.8.0
  */
 const observed = new Set();
 let mutationObserver;

package/dist/components/crowdsource-manager.js

@@ -288,7 +288,9 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
    */
   _getPopupExpandNode() {
     const icon = this._expandPopup ? "chevrons-down" : "chevrons-up";
-    return (h("div", { class: "height-49-px calcite-mode-dark" }, h("calcite-panel", null, h("div", { class: "display-flex align-items-center", slot: "header-content" }, h("calcite-icon", { class: "padding-inline-end-75", icon: "information", scale: "s" }), h("div", null, this._translations.information)), h("calcite-action", { class: "height-49-px", icon: icon, onClick: () => this._togglePopup(), slot: "header-actions-end" }))));
+    const id = "expand-popup";
+    const tooltip = this._expandPopup ? this._translations.collapsePopup : this._translations.expandPopup;
+    return (h("div", { class: "height-49-px calcite-mode-dark" }, h("calcite-panel", null, h("div", { class: "display-flex align-items-center", slot: "header-content" }, h("calcite-icon", { class: "padding-inline-end-75", icon: "information", scale: "s" }), h("div", null, this._translations.information)), h("calcite-action", { class: "height-49-px", icon: icon, id: id, onClick: () => this._togglePopup(), slot: "header-actions-end" }), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": id }, h("span", null, tooltip)))));
   }
   /**
    * Toggle the popup information

package/dist/components/date-picker-month-header.js

@@ -14,7 +14,7 @@ import { d as defineCustomElement$1 } from './icon.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1
+ * v1.8.0
  */
 const CSS = {
   header: "header",
@@ -142,7 +142,7 @@ const DatePickerMonthHeader = /*@__PURE__*/ proxyCustomElement(class DatePickerM
         year: true,
         [CSS.yearSuffix]: !!suffix,
       }, inputmode: "numeric", maxlength: "4", minlength: "1", onChange: this.onYearChange, onInput: this.onYearInput, onKeyDown: this.onYearKey, pattern: "\\d*", type: "text", value: localizedYear,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.yearInput = el) }), suffix && h("span", { class: CSS.suffix }, suffix))), h("a", { "aria-disabled": `${this.nextMonthDate.getMonth() === activeMonth}`, "aria-label": messages.nextMonth, class: CSS.chevron, href: "#", onClick: this.nextMonthClick, onKeyDown: this.nextMonthKeydown, role: "button", tabindex: this.nextMonthDate.getMonth() === activeMonth ? -1 : 0 }, h("calcite-icon", { "flip-rtl": true, icon: ICON.chevronRight, scale: iconScale }))));
   }
   setNextPrevMonthDates() {

package/dist/components/date-picker-month.js

@@ -310,7 +310,7 @@ const DatePickerMonth = /*@__PURE__*/ proxyCustomElement(class DatePickerMonth e
         "focused--start": isFocusedOnStart,
         "focused--end": !isFocusedOnStart,
       }, currentMonth: currentMonth, dateTimeFormat: this.dateTimeFormat, day: day, disabled: !inRange(date, this.min, this.max), endOfRange: this.isEndOfRange(date), highlighted: this.betweenSelectedRange(date), onCalciteDaySelect: this.daySelect, onCalciteInternalDayHover: this.dayHover, range: !!this.startDate && !!this.endDate && !sameDate(this.startDate, this.endDate), rangeEdge: dayInWeek === 0 ? "start" : dayInWeek === 6 ? "end" : undefined, rangeHover: this.isRangeHover(date), scale: this.scale, selected: this.isSelected(date), startOfRange: this.isStartOfRange(date), value: date,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => {
         // when moving via keyboard, focus must be updated on active date
         if (ref && active && this.activeFocus) {

package/dist/components/date-picker.js

@@ -16,7 +16,7 @@ import { d as defineCustomElement$1 } from './icon.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1
+ * v1.8.0
  */
 const HEADING_LEVEL = 2;
 const DATE_PICKER_FORMAT_OPTIONS = { dateStyle: "full" };
@@ -24,7 +24,7 @@ const DATE_PICKER_FORMAT_OPTIONS = { dateStyle: "full" };
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1
+ * v1.8.0
  */
 /**
  * CLDR cache.

package/dist/components/date.js

@@ -8,7 +8,7 @@ import { n as numberStringFormatter } from './locale2.js';
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1
+ * v1.8.0
  */
 /**
  * Check if date is within a min and max
@@ -141,6 +141,16 @@ function dateToISO(date) {
   }
   return "";
 }
+/**
+ * Retrieve day, month, and year strings from a ISO string (YYYY-mm-dd)
+ *
+ * @param string
+ * @param isoDate
+ */
+function datePartsFromISO(isoDate) {
+  const dateParts = isoDate.split("-");
+  return { day: dateParts[2], month: dateParts[1], year: dateParts[0] };
+}
 /**
  * Check if two dates are the same day, month, year
  *
@@ -232,4 +242,4 @@ function setEndOfDay(date) {
   return date;
 }
 
-export { dateToISO as a, dateFromRange as b, sameDate as c, dateFromISO as d, getOrder as e, formatCalendarYear as f, getDaysDiff as g, parseCalendarYear as h, inRange as i, datePartsFromLocalizedString as j, dateFromLocalizedString as k, nextMonth as n, prevMonth as p, setEndOfDay as s };
+export { dateToISO as a, dateFromRange as b, sameDate as c, dateFromISO as d, getOrder as e, formatCalendarYear as f, getDaysDiff as g, parseCalendarYear as h, inRange as i, datePartsFromISO as j, datePartsFromLocalizedString as k, dateFromLocalizedString as l, nextMonth as n, prevMonth as p, setEndOfDay as s };

package/dist/components/dom.js

@@ -578,7 +578,7 @@ var isFocusable = function isFocusable(node, options) {
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1
+ * v1.8.0
  */
 /**
  * The default `focus-trap/tabbable` options.
@@ -1013,5 +1013,20 @@ const focusElementInGroup = (elements, currentElement, destination, cycle = true
   focusElement(focusTarget);
   return focusTarget;
 };
+/**
+ * This helper determines if an element is before another element in the DOM.
+ *
+ * @param a the reference element to compare
+ * @param b the element to compare against
+ *
+ * @returns true when a is before b in the DOM
+ */
+function isBefore(a, b) {
+  if (a.parentNode !== b.parentNode) {
+    return false;
+  }
+  const children = Array.from(a.parentNode.children);
+  return children.indexOf(a) < children.indexOf(b);
+}
 
-export { getShadowRootNode as A, getRootNode as B, getSlotted as a, intersects as b, closestElementCrossShadowBoundary as c, containsCrossShadowBoundary as d, slotChangeGetAssignedElements as e, focusElement as f, getElementDir as g, slotChangeHasAssignedElement as h, isPrimaryPointerButton as i, focusFirstTabbable as j, tabbable as k, focusable as l, isTabbable as m, getTabIndex as n, isFocusable as o, tabbableOptions as p, queryElementRoots as q, getModeName as r, setRequestedIcon as s, toAriaBoolean as t, slotChangeHasContent as u, focusElementInGroup as v, nodeListToArray as w, filterDirectChildren as x, getElementProp as y, ensureId as z };
+export { ensureId as A, getShadowRootNode as B, getSlotted as a, intersects as b, closestElementCrossShadowBoundary as c, isBefore as d, containsCrossShadowBoundary as e, focusElement as f, getElementDir as g, slotChangeGetAssignedElements as h, isPrimaryPointerButton as i, slotChangeHasAssignedElement as j, focusFirstTabbable as k, tabbable as l, focusable as m, isTabbable as n, getTabIndex as o, isFocusable as p, queryElementRoots as q, tabbableOptions as r, setRequestedIcon as s, toAriaBoolean as t, getModeName as u, slotChangeHasContent as v, focusElementInGroup as w, nodeListToArray as x, filterDirectChildren as y, getElementProp as z };

package/dist/components/dropdown-group.js

@@ -4,18 +4,8 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { y as getElementProp } from './dom.js';
-
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1
- */
-const CSS = {
-  containerSmall: "container--s",
-  containerMedium: "container--m",
-  containerLarge: "container--l",
-};
+import { c as createObserver } from './observers.js';
+import { C as CSS } from './resources3.js';
 
 const dropdownGroupCss = ":host{position:relative;display:block}.container{text-align:start}.container--s{font-size:var(--calcite-font-size--2);line-height:1rem}.container--s .dropdown-title{padding:0.5rem}.container--m{font-size:var(--calcite-font-size--1);line-height:1rem}.container--m .dropdown-title{padding:0.75rem}.container--l{font-size:var(--calcite-font-size-0);line-height:1.25rem}.container--l .dropdown-title{padding:1rem}.dropdown-title{margin-block-end:-1px;display:block;cursor:default;overflow-wrap:break-word;border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);font-weight:var(--calcite-font-weight-bold);color:var(--calcite-ui-text-2)}.dropdown-separator{display:block;block-size:1px;background-color:var(--calcite-ui-border-3)}:host([hidden]){display:none}[hidden]{display:none}";
 
@@ -25,28 +15,35 @@ const DropdownGroup = /*@__PURE__*/ proxyCustomElement(class DropdownGroup exten
     this.__registerHost();
     this.__attachShadow();
     this.calciteInternalDropdownItemChange = createEvent(this, "calciteInternalDropdownItemChange", 6);
+    this.updateItems = () => {
+      Array.from(this.el.querySelectorAll("calcite-dropdown-item")).forEach((item) => (item.selectionMode = this.selectionMode));
+    };
+    this.mutationObserver = createObserver("mutation", () => this.updateItems());
     this.groupTitle = undefined;
+    this.scale = "m";
     this.selectionMode = "single";
-    this.scale = undefined;
+  }
+  handlePropsChange() {
+    this.updateItems();
   }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  connectedCallback() {
+    this.updateItems();
+  }
   componentWillLoad() {
     this.groupPosition = this.getGroupPosition();
   }
   render() {
-    const scale = this.scale || getElementProp(this.el, "scale", "m");
     const groupTitle = this.groupTitle ? (h("span", { "aria-hidden": "true", class: "dropdown-title" }, this.groupTitle)) : null;
     const dropdownSeparator = this.groupPosition > 0 ? h("div", { class: "dropdown-separator", role: "separator" }) : null;
     return (h(Host, { "aria-label": this.groupTitle, role: "group" }, h("div", { class: {
-        container: true,
-        [CSS.containerSmall]: scale === "s",
-        [CSS.containerMedium]: scale === "m",
-        [CSS.containerLarge]: scale === "l",
-      }, title: this.groupTitle }, dropdownSeparator, groupTitle, h("slot", null))));
+        [CSS.container]: true,
+        [`${CSS.container}--${this.scale}`]: true,
+      } }, dropdownSeparator, groupTitle, h("slot", null))));
   }
   //--------------------------------------------------------------------------
   //
@@ -71,11 +68,14 @@ const DropdownGroup = /*@__PURE__*/ proxyCustomElement(class DropdownGroup exten
   }
   static get delegatesFocus() { return true; }
   get el() { return this; }
+  static get watchers() { return {
+    "selectionMode": ["handlePropsChange"]
+  }; }
   static get style() { return dropdownGroupCss; }
 }, [17, "calcite-dropdown-group", {
     "groupTitle": [513, "group-title"],
-    "selectionMode": [513, "selection-mode"],
-    "scale": [513]
+    "scale": [1],
+    "selectionMode": [513, "selection-mode"]
   }, [[0, "calciteInternalDropdownItemSelect", "updateActiveItemOnChange"]]]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {

package/dist/components/dropdown-item.js

@@ -4,30 +4,11 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { y as getElementProp, t as toAriaBoolean } from './dom.js';
+import { t as toAriaBoolean } from './dom.js';
+import { C as CSS } from './resources3.js';
 import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.6.1
- */
-const CSS = {
-  containerLink: "container--link",
-  containerSmall: "container--s",
-  containerMedium: "container--m",
-  containerLarge: "container--l",
-  containerMulti: "container--multi-selection",
-  containerSingle: "container--single-selection",
-  containerNone: "container--none-selection",
-  icon: "dropdown-item-icon",
-  iconEnd: "dropdown-item-icon-end",
-  iconStart: "dropdown-item-icon-start",
-  itemContent: "dropdown-item-content",
-  link: "dropdown-link",
-};
-
 const dropdownItemCss = ".container--s{padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;padding-inline-end:0.5rem;padding-inline-start:1.5rem}.container--m{padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem;padding-inline-end:0.75rem;padding-inline-start:2rem}.container--l{padding-block:0.625rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;padding-inline-end:1rem;padding-inline-start:2.5rem}.container--s.container--none-selection{padding-inline-start:0.25rem}.container--s.container--none-selection .dropdown-link{padding-inline-start:0px}.container--m.container--none-selection{padding-inline-start:0.5rem}.container--m.container--none-selection .dropdown-link{padding-inline-start:0px}.container--l.container--none-selection{padding-inline-start:0.75rem}.container--l.container--none-selection .dropdown-link{padding-inline-start:0px}:host{position:relative;display:flex;flex-grow:1;align-items:center}.container{position:relative;display:flex;flex-grow:1;cursor:pointer;align-items:center;color:var(--calcite-ui-text-3);-webkit-text-decoration-line:none;text-decoration-line:none;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);text-align:start}.dropdown-item-content{flex:1 1 auto;padding-block:0.125rem;padding-inline-end:auto;padding-inline-start:0.25rem}:host,.container--link a{outline-color:transparent}:host(:focus){outline:2px solid transparent;outline-offset:2px;outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}.container--link{padding:0px}.container--link a{position:relative;display:flex;flex-grow:1;cursor:pointer;align-items:center;color:var(--calcite-ui-text-3);-webkit-text-decoration-line:none;text-decoration-line:none;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.container--s .dropdown-link{padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;padding-inline-end:0.5rem;padding-inline-start:1.5rem}.container--m .dropdown-link{padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem;padding-inline-end:0.75rem;padding-inline-start:2rem}.container--l .dropdown-link{padding-block:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;padding-inline-end:1rem;padding-inline-start:2.5rem}:host(:hover) .container,:host(:active) .container{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1);-webkit-text-decoration-line:none;text-decoration-line:none}:host(:hover) .container--link .dropdown-link,:host(:active) .container--link .dropdown-link{color:var(--calcite-ui-text-1)}:host(:focus) .container{color:var(--calcite-ui-text-1);-webkit-text-decoration-line:none;text-decoration-line:none}:host(:active) .container{background-color:var(--calcite-ui-foreground-3)}:host(:hover) .container:before,:host(:active) .container:before,:host(:focus) .container:before{opacity:1}:host([selected]) .container:not(.container--none-selection),:host([selected]) .container--link .dropdown-link{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}:host([selected]) .container:not(.container--none-selection):before,:host([selected]) .container--link .dropdown-link:before{opacity:1;color:var(--calcite-ui-brand)}:host([selected]) .container:not(.container--none-selection) calcite-icon,:host([selected]) .container--link .dropdown-link calcite-icon{color:var(--calcite-ui-brand)}.container--multi-selection:before,.container--none-selection:before{display:none}.container--s:before{inset-inline-start:0.5rem}.container--m:before{inset-inline-start:0.75rem}.container--l:before{inset-inline-start:1rem}.dropdown-item-icon{position:absolute;opacity:0;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:scale(0.9)}.container--s .dropdown-item-icon{inset-inline-start:0.25rem}.container--m .dropdown-item-icon{inset-inline-start:0.5rem}.container--l .dropdown-item-icon{inset-inline-start:0.75rem}:host(:hover) .dropdown-item-icon{color:var(--calcite-ui-border-1);opacity:1}:host([selected]) .dropdown-item-icon{color:var(--calcite-ui-brand);opacity:1}.container--s .dropdown-item-icon-start{margin-inline-end:0.5rem;margin-inline-start:0.25rem}.container--s .dropdown-item-icon-end{margin-inline-start:0.5rem}.container--m .dropdown-item-icon-start{margin-inline-end:0.75rem;margin-inline-start:0.25rem}.container--m .dropdown-item-icon-end{margin-inline-start:0.75rem}.container--l .dropdown-item-icon-start{margin-inline-end:1rem;margin-inline-start:0.25rem}.container--l .dropdown-item-icon-end{margin-inline-start:1rem}:host([hidden]){display:none}[hidden]{display:none}";
 
 const DropdownItem = /*@__PURE__*/ proxyCustomElement(class DropdownItem extends HTMLElement {
@@ -39,8 +20,6 @@ const DropdownItem = /*@__PURE__*/ proxyCustomElement(class DropdownItem extends
     this.calciteInternalDropdownItemSelect = createEvent(this, "calciteInternalDropdownItemSelect", 6);
     this.calciteInternalDropdownItemKeyEvent = createEvent(this, "calciteInternalDropdownItemKeyEvent", 6);
     this.calciteInternalDropdownCloseRequest = createEvent(this, "calciteInternalDropdownCloseRequest", 6);
-    /** Specifies the scale of dropdown-item controlled by the parent, defaults to m */
-    this.scale = "m";
     this.selected = false;
     this.iconFlipRtl = undefined;
     this.iconStart = undefined;
@@ -49,6 +28,8 @@ const DropdownItem = /*@__PURE__*/ proxyCustomElement(class DropdownItem extends
     this.label = undefined;
     this.rel = undefined;
     this.target = undefined;
+    this.selectionMode = "single";
+    this.scale = "m";
   }
   //--------------------------------------------------------------------------
   //
@@ -77,8 +58,7 @@ const DropdownItem = /*@__PURE__*/ proxyCustomElement(class DropdownItem extends
     this.initialize();
   }
   render() {
-    const scale = getElementProp(this.el, "scale", this.scale);
-    const { href, selectionMode, label, iconFlipRtl } = this;
+    const { href, selectionMode, label, iconFlipRtl, scale } = this;
     const iconStartEl = (h("calcite-icon", { class: CSS.iconStart, flipRtl: iconFlipRtl === "start" || iconFlipRtl === "both", icon: this.iconStart, scale: scale === "l" ? "m" : "s" }));
     const contentNode = (h("span", { class: CSS.itemContent }, h("slot", null)));
     const iconEndEl = (h("calcite-icon", { class: CSS.iconEnd, flipRtl: iconFlipRtl === "end" || iconFlipRtl === "both", icon: this.iconEnd, scale: scale === "l" ? "m" : "s" }));
@@ -90,7 +70,7 @@ const DropdownItem = /*@__PURE__*/ proxyCustomElement(class DropdownItem extends
           ? [contentNode, iconEndEl]
           : contentNode;
     const contentEl = !href ? (slottedContent) : (h("a", { "aria-label": label, class: CSS.link, href: href, rel: this.rel, tabIndex: -1, target: this.target,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.childLink = el) }, slottedContent));
     const itemRole = href
       ? null
@@ -101,11 +81,9 @@ const DropdownItem = /*@__PURE__*/ proxyCustomElement(class DropdownItem extends
           : "menuitem";
     const itemAria = selectionMode !== "none" ? toAriaBoolean(this.selected) : null;
     return (h(Host, { "aria-checked": itemAria, "aria-label": !href ? label : "", role: itemRole, tabindex: "0" }, h("div", { class: {
-        container: true,
+        [CSS.container]: true,
         [CSS.containerLink]: !!href,
-        [CSS.containerSmall]: scale === "s",
-        [CSS.containerMedium]: scale === "m",
-        [CSS.containerLarge]: scale === "l",
+        [`${CSS.container}--${scale}`]: true,
         [CSS.containerMulti]: selectionMode === "multiple",
         [CSS.containerSingle]: selectionMode === "single",
         [CSS.containerNone]: selectionMode === "none",
@@ -160,7 +138,6 @@ const DropdownItem = /*@__PURE__*/ proxyCustomElement(class DropdownItem extends
   //
   //--------------------------------------------------------------------------
   initialize() {
-    this.selectionMode = getElementProp(this.el, "selection-mode", "single");
     this.parentDropdownGroupEl = this.el.closest("calcite-dropdown-group");
     if (this.selectionMode === "none") {
       this.selected = false;
@@ -204,6 +181,8 @@ const DropdownItem = /*@__PURE__*/ proxyCustomElement(class DropdownItem extends
     "label": [1],
     "rel": [513],
     "target": [513],
+    "selectionMode": [1, "selection-mode"],
+    "scale": [1],
     "setFocus": [64]
   }, [[0, "click", "onClick"], [0, "keydown", "keyDownHandler"], [16, "calciteInternalDropdownItemChange", "updateActiveItemOnChange"]]]);
 function defineCustomElement() {