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

package/dist/collection/components/combobox/combobox.css

@@ -83,7 +83,8 @@
   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;
+  --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;
@@ -93,7 +94,8 @@
   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;
+  --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;
@@ -103,7 +105,8 @@
   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;
+  --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;
@@ -180,8 +183,8 @@
 }
 
 .input--single {
-  margin-block: 0px;
   padding: 0px;
+  margin-block: var(--calcite-internal-combobox-input-margin-block);
 }
 
 .wrapper--active .input-single {
@@ -203,6 +206,7 @@
 .input-wrap {
   display: flex;
   flex-grow: 1;
+  align-items: center;
 }
 
 .input-wrap--single {

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.1
+ * v1.7.0-next.10
  */
 import { h, Host, } from "@stencil/core";
 import { debounce } from "lodash-es";
@@ -18,7 +18,7 @@ import { createObserver } from "../../utils/observers";
 import { onToggleOpenCloseComponent } from "../../utils/openCloseComponent";
 import { connectMessages, disconnectMessages, setUpMessages, updateMessages, } from "../../utils/t9n";
 import { ComboboxChildSelector, ComboboxItem, ComboboxItemGroup, CSS } from "./resources";
-import { getItemAncestors, getItemChildren, hasActiveChildren } from "./utils";
+import { getItemAncestors, getItemChildren, hasActiveChildren, isSingleLike } from "./utils";
 import { XButton, CSS as XButtonCSS } from "../functional/XButton";
 const isGroup = (el) => el.tagName === ComboboxItemGroup;
 const itemUidPrefix = "combobox-item-";
@@ -218,7 +218,7 @@ export class Combobox {
       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 = "";
         }
@@ -289,6 +289,10 @@ export class Combobox {
       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();
       }
@@ -375,6 +379,9 @@ export class Combobox {
   overlayPositioningHandler() {
     this.reposition(true);
   }
+  handlePropsChange() {
+    this.updateItems();
+  }
   valueHandler(value) {
     if (!this.internalValueChangeFlag) {
       const items = this.getItems();
@@ -459,12 +466,13 @@ export class Combobox {
     connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
+    connectLabel(this);
+    connectForm(this);
     this.internalValueChangeFlag = true;
     this.value = this.getValue();
     this.internalValueChangeFlag = false;
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
-    connectLabel(this);
-    connectForm(this);
+    this.updateItems();
     this.setFilteredPlacements();
     this.reposition(true);
     if (this.open) {
@@ -658,7 +666,7 @@ export class Combobox {
     }));
   }
   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) {
@@ -761,7 +769,7 @@ export class Combobox {
     }
   }
   isMulti() {
-    return this.selectionMode !== "single";
+    return this.selectionMode !== "single" && this.selectionMode !== "single-persist";
   }
   //--------------------------------------------------------------------------
   //
@@ -783,7 +791,7 @@ export class Combobox {
   }
   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: {
@@ -799,7 +807,7 @@ export class Combobox {
         "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() {
@@ -816,16 +824,16 @@ export class Combobox {
         "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?.icon;
-    const singleSelectionMode = selectionMode === "single";
+    const singleSelectionMode = isSingleLike(selectionMode);
     const iconAtStart = !this.open && selectedItem
       ? !!selectedIcon && singleSelectionMode
       : !!this.placeholderIcon && (!selectedItem || singleSelectionMode);
@@ -837,14 +845,14 @@ export class Combobox {
   }
   render() {
     const { guid, label, open } = this;
-    const single = this.selectionMode === "single";
+    const single = isSingleLike(this.selectionMode);
     const isClearable = !this.clearDisabled && this.value?.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 is() { return "calcite-combobox"; }
@@ -1102,8 +1110,8 @@ export class Combobox {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "Extract<\n    \"single\" | \"ancestors\" | \"multiple\",\n    SelectionMode\n  >",
-          "resolved": "\"ancestors\" | \"multiple\" | \"single\"",
+          "original": "Extract<\n    \"single\" | \"single-persist\" | \"ancestors\" | \"multiple\",\n    SelectionMode\n  >",
+          "resolved": "\"ancestors\" | \"multiple\" | \"single\" | \"single-persist\"",
           "references": {
             "Extract": {
               "location": "global"
@@ -1118,7 +1126,7 @@ export class Combobox {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "specify the selection mode\n- multiple: allow any number of selected items (default)\n- single: only one selection)\n- ancestors: like multiple, but show ancestors of selected items as selected, only deepest children shown in chips"
+          "text": "Specifies the selection mode:\n- \"multiple\" allows any number of selected items (default),\n- \"single\" allows only one selection,\n- \"single-persist\" allow and require one open item,\n- \"ancestors\" is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips."
         },
         "attribute": "selection-mode",
         "reflect": true,
@@ -1459,6 +1467,12 @@ export class Combobox {
       }, {
         "propName": "overlayPositioning",
         "methodName": "overlayPositioningHandler"
+      }, {
+        "propName": "selectionMode",
+        "methodName": "handlePropsChange"
+      }, {
+        "propName": "scale",
+        "methodName": "handlePropsChange"
       }, {
         "propName": "value",
         "methodName": "valueHandler"

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.1
+ * v1.7.0-next.10
  */
 export const ComboboxItem = "CALCITE-COMBOBOX-ITEM";
 export const ComboboxItemGroup = "CALCITE-COMBOBOX-ITEM-GROUP";

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.1
+ * v1.7.0-next.10
  */
 import { nodeListToArray } from "../../utils/dom";
 import { ComboboxChildSelector } from "./resources";
@@ -28,3 +28,6 @@ export 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;
 }
+export function isSingleLike(selectionMode) {
+  return selectionMode.includes("single");
+}

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

@@ -1,22 +1,20 @@
 /*!
  * 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.1
+ * v1.7.0-next.10
  */
 import { h, Host, } from "@stencil/core";
 import { connectConditionalSlotComponent, disconnectConditionalSlotComponent, } from "../../utils/conditionalSlot";
-import { getElementProp, getSlotted } from "../../utils/dom";
+import { getSlotted } from "../../utils/dom";
 import { guid } from "../../utils/guid";
 import { connectInteractive, disconnectInteractive, updateHostInteraction, } from "../../utils/interactive";
-import { getAncestors, getDepth } from "../combobox/utils";
+import { getAncestors, getDepth, isSingleLike } from "../combobox/utils";
 import { CSS } from "./resources";
 /**
  * @slot - A slot for adding nested `calcite-combobox-item`s.
  */
 export class ComboboxItem {
   constructor() {
-    /** Specifies the scale of the combobox-item controlled by parent, defaults to m */
-    this.scale = "m";
     this.itemClickHandler = (event) => {
       event.preventDefault();
       this.toggleSelected();
@@ -31,6 +29,8 @@ export class ComboboxItem {
     this.textLabel = undefined;
     this.value = undefined;
     this.filterDisabled = undefined;
+    this.selectionMode = "multiple";
+    this.scale = "m";
   }
   selectedWatchHandler() {
     this.calciteComboboxItemChange.emit();
@@ -42,7 +42,6 @@ export class ComboboxItem {
   // --------------------------------------------------------------------------
   connectedCallback() {
     this.ancestors = getAncestors(this.el);
-    this.scale = getElementProp(this.el, "scale", this.scale);
     connectConditionalSlotComponent(this);
     connectInteractive(this);
   }
@@ -59,7 +58,8 @@ export class ComboboxItem {
   //
   // --------------------------------------------------------------------------
   toggleSelected() {
-    if (this.disabled) {
+    const isSinglePersistSelect = this.selectionMode === "single-persist";
+    if (this.disabled || (isSinglePersistSelect && this.selected)) {
       return;
     }
     this.selected = !this.selected;
@@ -94,7 +94,7 @@ export class ComboboxItem {
     return null;
   }
   render() {
-    const isSingleSelect = 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;
@@ -298,6 +298,61 @@ export class ComboboxItem {
         },
         "attribute": "filter-disabled",
         "reflect": true
+      },
+      "selectionMode": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Extract<\n    \"single\" | \"single-persist\" | \"ancestors\" | \"multiple\",\n    SelectionMode\n  >",
+          "resolved": "\"ancestors\" | \"multiple\" | \"single\" | \"single-persist\"",
+          "references": {
+            "Extract": {
+              "location": "global"
+            },
+            "SelectionMode": {
+              "location": "import",
+              "path": "../interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Specifies the selection mode:\n- \"multiple\" allows any number of selected items (default),\n- \"single\" allows only one selection,\n- \"single-persist\" allow and require one open item,\n- \"ancestors\" is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips."
+        },
+        "attribute": "selection-mode",
+        "reflect": true,
+        "defaultValue": "\"multiple\""
+      },
+      "scale": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Scale",
+          "resolved": "\"l\" | \"m\" | \"s\"",
+          "references": {
+            "Scale": {
+              "location": "import",
+              "path": "../interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Specifies the size of the component inherited from the `calcite-combobox`, defaults to `m`."
+        },
+        "attribute": "scale",
+        "reflect": false,
+        "defaultValue": "\"m\""
       }
     };
   }

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.1
+ * v1.7.0-next.10
  */
 export const CSS = {
   icon: "icon",

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

@@ -1,10 +1,9 @@
 /*!
  * 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.1
+ * v1.7.0-next.10
  */
 import { h } from "@stencil/core";
-import { getElementProp } from "../../utils/dom";
 import { guid } from "../../utils/guid";
 import { getAncestors, getDepth } from "../combobox/utils";
 import { CSS } from "./resources";
@@ -14,10 +13,10 @@ import { CSS } from "./resources";
 export class ComboboxItemGroup {
   constructor() {
     this.guid = guid();
-    this.scale = "m";
     this.afterEmptyGroup = false;
     this.ancestors = undefined;
     this.label = undefined;
+    this.scale = "m";
   }
   // --------------------------------------------------------------------------
   //
@@ -26,7 +25,6 @@ export class ComboboxItemGroup {
   // --------------------------------------------------------------------------
   connectedCallback() {
     this.ancestors = getAncestors(this.el);
-    this.scale = getElementProp(this.el, "scale", this.scale);
   }
   // --------------------------------------------------------------------------
   //
@@ -109,6 +107,32 @@ export class ComboboxItemGroup {
         },
         "attribute": "label",
         "reflect": false
+      },
+      "scale": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Scale",
+          "resolved": "\"l\" | \"m\" | \"s\"",
+          "references": {
+            "Scale": {
+              "location": "import",
+              "path": "../interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [{
+              "name": "internal",
+              "text": undefined
+            }],
+          "text": "Specifies the size of the component inherited from the `calcite-combobox`, defaults to `m`."
+        },
+        "attribute": "scale",
+        "reflect": false,
+        "defaultValue": "\"m\""
       }
     };
   }

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.1
+ * v1.7.0-next.10
  */
 export const CSS = {
   list: "list",

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.1
+ * v1.7.0-next.10
  */
 import { Build, h, Host, } from "@stencil/core";
 import { dateFromISO, dateFromRange, dateToISO, getDaysDiff, setEndOfDay, } from "../../utils/date";

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.1
+ * v1.7.0-next.10
  */
 export const HEADING_LEVEL = 2;
 export const DATE_PICKER_FORMAT_OPTIONS = { dateStyle: "full" };

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.1
+ * v1.7.0-next.10
  */
 import { getAssetPath } from "@stencil/core";
 import { dateFromISO } from "../../utils/date";

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.1
+ * v1.7.0-next.10
  */
 import { h, Host, } from "@stencil/core";
 import { dateToISO } from "../../utils/date";

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.1
+ * v1.7.0-next.10
  */
 import { h, Host, } from "@stencil/core";
 import { dateFromRange, inRange, sameDate } from "../../utils/date";
@@ -298,7 +298,7 @@ export class DatePickerMonth {
         "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/collection/components/date-picker-month-header/date-picker-month-header.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.1
+ * v1.7.0-next.10
  */
 import { Fragment, h, } from "@stencil/core";
 import { dateFromRange, parseCalendarYear, getOrder, nextMonth, prevMonth, formatCalendarYear, } from "../../utils/date";
@@ -119,7 +119,7 @@ export class DatePickerMonthHeader {
         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/collection/components/date-picker-month-header/resources.js

@@ -1,7 +1,7 @@
 /*!
  * 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.1
+ * v1.7.0-next.10
  */
 export const CSS = {
   header: "header",