npm - @esri/calcite-components - Versions diffs - 1.7.0-next.0 → 1.7.0-next.10 - Mend

@esri/calcite-components 1.7.0-next.0 → 1.7.0-next.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1158) hide show

package/dist/cjs/calcite-combobox_3.cjs.entry.js CHANGED Viewed

@@ -1,29 +1,29 @@
 /*!
  * 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.7.0-next.0
+ * v1.7.0-next.10
  */
 'use strict';
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-170040b3.js');
-const filter = require('./filter-d178922e.js');
-const dom = require('./dom-882e8adf.js');
-const floatingUi = require('./floating-ui-05afc335.js');
-const form = require('./form-7ec8012f.js');
-const guid = require('./guid-26de9cda.js');
-const interactive = require('./interactive-f7aec39c.js');
-const label = require('./label-1abe1847.js');
-const loadable = require('./loadable-8ad0def8.js');
-const locale = require('./locale-b39d68ba.js');
-const observers = require('./observers-e391d71f.js');
-const openCloseComponent = require('./openCloseComponent-6424e4e3.js');
-const t9n = require('./t9n-51db37e2.js');
-const debounce = require('./debounce-ba742625.js');
-const conditionalSlot = require('./conditionalSlot-0b2eec9f.js');
-require('./resources-e4c8601b.js');
-require('./key-8df4992e.js');
+const index = require('./index-62e7a1ed.js');
+const filter = require('./filter-412ceb5c.js');
+const dom = require('./dom-ee5ca278.js');
+const floatingUi = require('./floating-ui-e3b6e217.js');
+const form = require('./form-45f1afe2.js');
+const guid = require('./guid-7fc7cda4.js');
+const interactive = require('./interactive-8b00018f.js');
+const label = require('./label-190c0cf9.js');
+const loadable = require('./loadable-3bb56575.js');
+const locale = require('./locale-1985d401.js');
+const observers = require('./observers-1c054b2b.js');
+const openCloseComponent = require('./openCloseComponent-27ac60fc.js');
+const t9n = require('./t9n-80f42485.js');
+const debounce = require('./debounce-fd13f3e3.js');
+const conditionalSlot = require('./conditionalSlot-9d498271.js');
+require('./resources-3a9a1d47.js');
+require('./key-d451a368.js');
 const ComboboxItem$1 = "CALCITE-COMBOBOX-ITEM";
 const ComboboxItemGroup$1 = "CALCITE-COMBOBOX-ITEM-GROUP";
@@ -51,18 +51,21 @@ function getDepth(element) {
   const result = document.evaluate("ancestor::calcite-combobox-item | ancestor::calcite-combobox-item-group", element, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);
   return result.snapshotLength;
 }
+function isSingleLike(selectionMode) {
+  return selectionMode.includes("single");
+}
 const CSS$2 = {
   button: "x-button",
 };
 function XButton({ disabled, key, label, onClick, ref, scale, }) {
   return (index.h("button", { "aria-label": label, class: CSS$2.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 },
     index.h("calcite-icon", { icon: "x", scale: scale === "l" ? "m" : "s" })));
 }
-const comboboxCss = ":host([disabled]){cursor:default;-webkit-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;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;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;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;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;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$1;
 const itemUidPrefix = "combobox-item-";
@@ -267,7 +270,7 @@ const Combobox = class {
       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 = "";
         }
@@ -338,6 +341,10 @@ const Combobox = class {
       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();
       }
@@ -424,6 +431,9 @@ const Combobox = class {
   overlayPositioningHandler() {
     this.reposition(true);
   }
+  handlePropsChange() {
+    this.updateItems();
+  }
   valueHandler(value) {
     if (!this.internalValueChangeFlag) {
       const items = this.getItems();
@@ -508,12 +518,13 @@ const Combobox = class {
     interactive.connectInteractive(this);
     locale.connectLocalized(this);
     t9n.connectMessages(this);
+    label.connectLabel(this);
+    form.connectForm(this);
     this.internalValueChangeFlag = true;
     this.value = this.getValue();
     this.internalValueChangeFlag = false;
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
-    label.connectLabel(this);
-    form.connectForm(this);
+    this.updateItems();
     this.setFilteredPlacements();
     this.reposition(true);
     if (this.open) {
@@ -707,7 +718,7 @@ const Combobox = class {
     }));
   }
   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) {
@@ -810,7 +821,7 @@ const Combobox = class {
     }
   }
   isMulti() {
-    return this.selectionMode !== "single";
+    return this.selectionMode !== "single" && this.selectionMode !== "single-persist";
   }
   //--------------------------------------------------------------------------
   //
@@ -832,7 +843,7 @@ const Combobox = class {
   }
   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 (index.h("span", { class: {
@@ -848,7 +859,7 @@ const Combobox = class {
         "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() {
@@ -865,16 +876,16 @@ const Combobox = class {
         "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 }, index.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 }, index.h("ul", { class: { list: true, "list--hide": !open } }, index.h("slot", null)))));
   }
   renderIconStart() {
     const { selectedItems, placeholderIcon, selectionMode, placeholderIconFlipRtl } = this;
     const selectedItem = selectedItems[0];
     const selectedIcon = selectedItem?.icon;
-    const singleSelectionMode = selectionMode === "single";
+    const singleSelectionMode = isSingleLike(selectionMode);
     const iconAtStart = !this.open && selectedItem
       ? !!selectedIcon && singleSelectionMode
       : !!this.placeholderIcon && (!selectedItem || singleSelectionMode);
@@ -886,14 +897,14 @@ const Combobox = class {
   }
   render() {
     const { guid, label: label$1, open } = this;
-    const single = this.selectionMode === "single";
+    const single = isSingleLike(this.selectionMode);
     const isClearable = !this.clearDisabled && this.value?.length > 0;
     return (index.h(index.Host, { onClick: this.comboboxFocusHandler }, index.h("div", { "aria-autocomplete": "list", "aria-controls": `${listboxUidPrefix}${guid}`, "aria-expanded": dom.toAriaBoolean(open), "aria-haspopup": "listbox", "aria-label": 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 }, index.h("div", { class: "grid-input" }, this.renderIconStart(), !single && this.renderChips(), index.h("label", { class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label$1), this.renderInput()), isClearable ? (index.h(XButton, { disabled: this.disabled, key: "close-button", label: this.messages.clear, scale: this.scale })) : null, this.renderIconEnd()), index.h("ul", { "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-multiselectable": "true", class: "screen-readers-only", id: `${listboxUidPrefix}${guid}`, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()), this.renderFloatingUIContainer(), index.h(form.HiddenFormInputSlot, { component: this })));
   }
   static get assetsDirs() { return ["assets"]; }
@@ -903,6 +914,8 @@ const Combobox = class {
     "disabled": ["handleDisabledChange"],
     "maxItems": ["maxItemsHandler"],
     "overlayPositioning": ["overlayPositioningHandler"],
+    "selectionMode": ["handlePropsChange"],
+    "scale": ["handlePropsChange"],
     "value": ["valueHandler"],
     "messageOverrides": ["onMessagesChange"],
     "flipPlacements": ["flipPlacementsHandler"],
@@ -933,8 +946,6 @@ const ComboboxItem = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.calciteComboboxItemChange = index.createEvent(this, "calciteComboboxItemChange", 6);
-    /** Specifies the scale of the combobox-item controlled by parent, defaults to m */
-    this.scale = "m";
     this.itemClickHandler = (event) => {
       event.preventDefault();
       this.toggleSelected();
@@ -949,6 +960,8 @@ const ComboboxItem = class {
     this.textLabel = undefined;
     this.value = undefined;
     this.filterDisabled = undefined;
+    this.selectionMode = "multiple";
+    this.scale = "m";
   }
   selectedWatchHandler() {
     this.calciteComboboxItemChange.emit();
@@ -960,7 +973,6 @@ const ComboboxItem = class {
   // --------------------------------------------------------------------------
   connectedCallback() {
     this.ancestors = getAncestors(this.el);
-    this.scale = dom.getElementProp(this.el, "scale", this.scale);
     conditionalSlot.connectConditionalSlotComponent(this);
     interactive.connectInteractive(this);
   }
@@ -977,7 +989,8 @@ const ComboboxItem = class {
   //
   // --------------------------------------------------------------------------
   toggleSelected() {
-    if (this.disabled) {
+    const isSinglePersistSelect = this.selectionMode === "single-persist";
+    if (this.disabled || (isSinglePersistSelect && this.selected)) {
       return;
     }
     this.selected = !this.selected;
@@ -1012,7 +1025,7 @@ const ComboboxItem = class {
     return null;
   }
   render() {
-    const isSingleSelect = dom.getElementProp(this.el, "selection-mode", "multiple") === "single";
+    const isSingleSelect = isSingleLike(this.selectionMode);
     const showDot = isSingleSelect && !this.disabled;
     const defaultIcon = isSingleSelect ? "dot" : "check";
     const iconPath = this.disabled ? "circle-disallowed" : defaultIcon;
@@ -1044,10 +1057,10 @@ const ComboboxItemGroup = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.guid = guid.guid();
-    this.scale = "m";
     this.afterEmptyGroup = false;
     this.ancestors = undefined;
     this.label = undefined;
+    this.scale = "m";
   }
   // --------------------------------------------------------------------------
   //
@@ -1056,7 +1069,6 @@ const ComboboxItemGroup = class {
   // --------------------------------------------------------------------------
   connectedCallback() {
     this.ancestors = getAncestors(this.el);
-    this.scale = dom.getElementProp(this.el, "scale", this.scale);
   }
   // --------------------------------------------------------------------------
   //

package/dist/cjs/calcite-date-picker_4.cjs.entry.js CHANGED Viewed

@@ -1,24 +1,24 @@
 /*!
  * 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.7.0-next.0
+ * v1.7.0-next.10
  */
 'use strict';
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-170040b3.js');
-const utils = require('./utils-c41dca81.js');
-const loadable = require('./loadable-8ad0def8.js');
-const locale = require('./locale-b39d68ba.js');
-const t9n = require('./t9n-51db37e2.js');
-const dom = require('./dom-882e8adf.js');
-const interactive = require('./interactive-f7aec39c.js');
-const key = require('./key-8df4992e.js');
-const resources = require('./resources-e4c8601b.js');
-const Heading = require('./Heading-bae30ace.js');
-require('./observers-e391d71f.js');
-require('./guid-26de9cda.js');
+const index = require('./index-62e7a1ed.js');
+const utils = require('./utils-39c8eb71.js');
+const loadable = require('./loadable-3bb56575.js');
+const locale = require('./locale-1985d401.js');
+const t9n = require('./t9n-80f42485.js');
+const dom = require('./dom-ee5ca278.js');
+const interactive = require('./interactive-8b00018f.js');
+const key = require('./key-d451a368.js');
+const resources = require('./resources-3a9a1d47.js');
+const Heading = require('./Heading-6f9fbd67.js');
+require('./observers-1c054b2b.js');
+require('./guid-7fc7cda4.js');
 const HEADING_LEVEL = 2;
 const DATE_PICKER_FORMAT_OPTIONS = { dateStyle: "full" };
@@ -833,7 +833,7 @@ const DatePickerMonth = class {
         "focused--start": isFocusedOnStart,
         "focused--end": !isFocusedOnStart,
       }, currentMonth: currentMonth, dateTimeFormat: this.dateTimeFormat, day: day, disabled: !utils.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 && !utils.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) {
@@ -1001,7 +1001,7 @@ const DatePickerMonthHeader = class {
         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 && index.h("span", { class: CSS.suffix }, suffix))), index.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 }, index.h("calcite-icon", { "flip-rtl": true, icon: ICON.chevronRight, scale: iconScale }))));
   }
   setNextPrevMonthDates() {

package/dist/cjs/calcite-dropdown_3.cjs.entry.js CHANGED Viewed

@@ -1,23 +1,23 @@
 /*!
  * 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.7.0-next.0
+ * v1.7.0-next.10
  */
 'use strict';
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-170040b3.js');
-const dom = require('./dom-882e8adf.js');
-const floatingUi = require('./floating-ui-05afc335.js');
-const guid = require('./guid-26de9cda.js');
-const interactive = require('./interactive-f7aec39c.js');
-const key = require('./key-8df4992e.js');
-const loadable = require('./loadable-8ad0def8.js');
-const observers = require('./observers-e391d71f.js');
-const openCloseComponent = require('./openCloseComponent-6424e4e3.js');
-require('./resources-e4c8601b.js');
-require('./debounce-ba742625.js');
+const index = require('./index-62e7a1ed.js');
+const dom = require('./dom-ee5ca278.js');
+const floatingUi = require('./floating-ui-e3b6e217.js');
+const guid = require('./guid-7fc7cda4.js');
+const interactive = require('./interactive-8b00018f.js');
+const key = require('./key-d451a368.js');
+const loadable = require('./loadable-3bb56575.js');
+const observers = require('./observers-1c054b2b.js');
+const openCloseComponent = require('./openCloseComponent-27ac60fc.js');
+require('./resources-3a9a1d47.js');
+require('./debounce-fd13f3e3.js');
 const SLOTS = {
   dropdownTrigger: "trigger",
@@ -69,6 +69,7 @@ const Dropdown = class {
         .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);
       this.updateSelectedItems();
       this.reposition(true);
+      this.items.forEach((item) => (item.scale = this.scale));
     };
     this.updateGroups = (event) => {
       const groups = event.target
@@ -170,10 +171,10 @@ const Dropdown = class {
     this.maxItems = 0;
     this.overlayPositioning = "absolute";
     this.placement = floatingUi.defaultMenuPlacement;
-    this.scale = "m";
     this.selectedItems = [];
     this.type = "click";
     this.width = undefined;
+    this.scale = "m";
   }
   openHandler(value) {
     if (!this.disabled) {
@@ -203,6 +204,9 @@ const Dropdown = class {
   placementHandler() {
     this.reposition(true);
   }
+  handlePropsChange() {
+    this.updateItems();
+  }
   //--------------------------------------------------------------------------
   //
   //  Public Methods
@@ -227,6 +231,7 @@ const Dropdown = class {
       openCloseComponent.onToggleOpenCloseComponent(this);
     }
     interactive.connectInteractive(this);
+    this.updateItems();
   }
   componentWillLoad() {
     loadable.setUpLoadableComponent(this);
@@ -247,15 +252,15 @@ const Dropdown = class {
   render() {
     const { open, guid } = this;
     return (index.h(index.Host, null, index.h("div", { class: "calcite-trigger-container", id: `${guid}-menubutton`, onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler,
-      // 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 }, index.h("slot", { "aria-controls": `${guid}-menu`, "aria-expanded": dom.toAriaBoolean(open), "aria-haspopup": "menu", name: SLOTS.dropdownTrigger, onSlotchange: this.updateTriggers })), index.h("div", { "aria-hidden": dom.toAriaBoolean(!open), class: "calcite-dropdown-wrapper",
-      // 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.setFloatingEl }, index.h("div", { "aria-labelledby": `${guid}-menubutton`, class: {
         ["calcite-dropdown-content"]: true,
         [floatingUi.FloatingCSS.animation]: true,
         [floatingUi.FloatingCSS.animationActive]: open,
       }, id: `${guid}-menu`, role: "menu",
-      // 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.setScrollerAndTransitionEl }, index.h("slot", { onSlotchange: this.updateGroups })))));
   }
   //--------------------------------------------------------------------------
@@ -315,12 +320,8 @@ const Dropdown = class {
     const target = keyboardEvent.target;
     switch (keyboardEvent.key) {
       case "Tab":
-        if (this.items.indexOf(target) === this.items.length - 1 && !keyboardEvent.shiftKey) {
-          this.closeCalciteDropdown();
-        }
-        else if (this.items.indexOf(target) === 0 && keyboardEvent.shiftKey) {
-          this.closeCalciteDropdown();
-        }
+        this.open = false;
+        this.updateTabIndexOfItems(target);
         break;
       case "ArrowDown":
         dom.focusElementInGroup(this.items, target, "next");
@@ -400,6 +401,11 @@ const Dropdown = class {
       : item;
     dom.focusElement(target);
   }
+  updateTabIndexOfItems(target) {
+    this.items.forEach((item) => {
+      item.tabIndex = target !== item ? -1 : 0;
+    });
+  }
   static get delegatesFocus() { return true; }
   get el() { return index.getElement(this); }
   static get watchers() { return {
@@ -408,15 +414,23 @@ const Dropdown = class {
     "flipPlacements": ["flipPlacementsHandler"],
     "maxItems": ["maxItemsHandler"],
     "overlayPositioning": ["overlayPositioningHandler"],
-    "placement": ["placementHandler"]
+    "placement": ["placementHandler"],
+    "scale": ["handlePropsChange"]
   }; }
 };
 Dropdown.style = dropdownCss;
-const CSS$1 = {
-  containerSmall: "container--s",
-  containerMedium: "container--m",
-  containerLarge: "container--l",
+const CSS = {
+  container: "container",
+  containerLink: "container--link",
+  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 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}";
@@ -425,28 +439,35 @@ const DropdownGroup = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.calciteInternalDropdownItemChange = index.createEvent(this, "calciteInternalDropdownItemChange", 6);
+    this.updateItems = () => {
+      Array.from(this.el.querySelectorAll("calcite-dropdown-item")).forEach((item) => (item.selectionMode = this.selectionMode));
+    };
+    this.mutationObserver = observers.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 || dom.getElementProp(this.el, "scale", "m");
     const groupTitle = this.groupTitle ? (index.h("span", { "aria-hidden": "true", class: "dropdown-title" }, this.groupTitle)) : null;
     const dropdownSeparator = this.groupPosition > 0 ? index.h("div", { class: "dropdown-separator", role: "separator" }) : null;
     return (index.h(index.Host, { "aria-label": this.groupTitle, role: "group" }, index.h("div", { class: {
-        container: true,
-        [CSS$1.containerSmall]: scale === "s",
-        [CSS$1.containerMedium]: scale === "m",
-        [CSS$1.containerLarge]: scale === "l",
-      }, title: this.groupTitle }, dropdownSeparator, groupTitle, index.h("slot", null))));
+        [CSS.container]: true,
+        [`${CSS.container}--${this.scale}`]: true,
+      } }, dropdownSeparator, groupTitle, index.h("slot", null))));
   }
   //--------------------------------------------------------------------------
   //
@@ -471,24 +492,12 @@ const DropdownGroup = class {
   }
   static get delegatesFocus() { return true; }
   get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "selectionMode": ["handlePropsChange"]
+  }; }
 };
 DropdownGroup.style = dropdownGroupCss;
-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);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);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);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);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 = class {
@@ -498,8 +507,6 @@ const DropdownItem = class {
     this.calciteInternalDropdownItemSelect = index.createEvent(this, "calciteInternalDropdownItemSelect", 6);
     this.calciteInternalDropdownItemKeyEvent = index.createEvent(this, "calciteInternalDropdownItemKeyEvent", 6);
     this.calciteInternalDropdownCloseRequest = index.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;
@@ -508,6 +515,8 @@ const DropdownItem = class {
     this.label = undefined;
     this.rel = undefined;
     this.target = undefined;
+    this.selectionMode = "single";
+    this.scale = "m";
   }
   //--------------------------------------------------------------------------
   //
@@ -535,8 +544,7 @@ const DropdownItem = class {
     this.initialize();
   }
   render() {
-    const scale = dom.getElementProp(this.el, "scale", this.scale);
-    const { href, selectionMode, label, iconFlipRtl } = this;
+    const { href, selectionMode, label, iconFlipRtl, scale } = this;
     const iconStartEl = (index.h("calcite-icon", { class: CSS.iconStart, flipRtl: iconFlipRtl === "start" || iconFlipRtl === "both", icon: this.iconStart, scale: scale === "l" ? "m" : "s" }));
     const contentNode = (index.h("span", { class: CSS.itemContent }, index.h("slot", null)));
     const iconEndEl = (index.h("calcite-icon", { class: CSS.iconEnd, flipRtl: iconFlipRtl === "end" || iconFlipRtl === "both", icon: this.iconEnd, scale: scale === "l" ? "m" : "s" }));
@@ -548,7 +556,7 @@ const DropdownItem = class {
           ? [contentNode, iconEndEl]
           : contentNode;
     const contentEl = !href ? (slottedContent) : (index.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
@@ -559,11 +567,9 @@ const DropdownItem = class {
           : "menuitem";
     const itemAria = selectionMode !== "none" ? dom.toAriaBoolean(this.selected) : null;
     return (index.h(index.Host, { "aria-checked": itemAria, "aria-label": !href ? label : "", role: itemRole, tabindex: "0" }, index.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",
@@ -618,7 +624,6 @@ const DropdownItem = class {
   //
   //--------------------------------------------------------------------------
   initialize() {
-    this.selectionMode = dom.getElementProp(this.el, "selection-mode", "single");
     this.parentDropdownGroupEl = this.el.closest("calcite-dropdown-group");
     if (this.selectionMode === "none") {
       this.selected = false;