@esri/solutions-components 0.6.14 → 0.6.16

package/dist/components/calcite-block.js

@@ -5,8 +5,7 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as connectConditionalSlotComponent, d as disconnectConditionalSlotComponent } from './conditionalSlot.js';
-import { j as focusFirstTabbable, a as getSlotted, t as toAriaBoolean } from './dom.js';
-import { g as guid } from './guid.js';
+import { k as focusFirstTabbable, a as getSlotted, t as toAriaBoolean } from './dom.js';
 import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive.js';
 import { c as connectLocalized, d as disconnectLocalized } from './locale2.js';
 import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n.js';
@@ -23,25 +22,30 @@ import { d as defineCustomElement$2 } from './scrim.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 IDS = {
+  content: "content",
+  toggle: "toggle",
+  header: "header",
+};
 const CSS = {
+  button: "button",
   container: "container",
   content: "content",
+  controlContainer: "control-container",
+  description: "description",
+  header: "header",
   headerContainer: "header-container",
+  heading: "heading",
   icon: "icon",
+  invalid: "invalid",
   statusIcon: "status-icon",
+  summary: "summary",
+  title: "title",
   toggle: "toggle",
   toggleIcon: "toggle-icon",
-  title: "title",
-  heading: "heading",
-  header: "header",
-  button: "button",
-  summary: "summary",
-  description: "description",
-  controlContainer: "control-container",
   valid: "valid",
-  invalid: "invalid",
 };
 const SLOTS = {
   icon: "icon",
@@ -63,7 +67,6 @@ const Block = /*@__PURE__*/ proxyCustomElement(class Block extends HTMLElement {
     this.__registerHost();
     this.__attachShadow();
     this.calciteBlockToggle = createEvent(this, "calciteBlockToggle", 6);
-    this.guid = guid();
     // --------------------------------------------------------------------------
     //
     //  Private Methods
@@ -159,17 +162,14 @@ const Block = /*@__PURE__*/ proxyCustomElement(class Block extends HTMLElement {
   render() {
     const { collapsible, el, loading, open, messages } = this;
     const toggleLabel = open ? messages.collapse : messages.expand;
-    const headerContent = (h("header", { class: CSS.header }, this.renderIcon(), this.renderTitle()));
+    const headerContent = (h("header", { class: CSS.header, id: IDS.header }, this.renderIcon(), this.renderTitle()));
     const hasControl = !!getSlotted(el, SLOTS.control);
     const hasMenuActions = !!getSlotted(el, SLOTS.headerMenuActions);
     const collapseIcon = open ? ICONS.opened : ICONS.closed;
-    const { guid } = this;
-    const regionId = `${guid}-region`;
-    const buttonId = `${guid}-button`;
-    const headerNode = (h("div", { class: CSS.headerContainer }, this.dragHandle ? h("calcite-handle", null) : null, collapsible ? (h("button", { "aria-controls": regionId, "aria-expanded": collapsible ? toAriaBoolean(open) : null, "aria-label": toggleLabel, class: CSS.toggle, id: buttonId, onClick: this.onHeaderClick, title: toggleLabel }, headerContent, !hasControl && !hasMenuActions ? (h("calcite-icon", { "aria-hidden": "true", class: CSS.toggleIcon, icon: collapseIcon, scale: "s" })) : null)) : (headerContent), hasControl ? (h("div", { class: CSS.controlContainer }, h("slot", { name: SLOTS.control }))) : null, hasMenuActions ? (h("calcite-action-menu", { label: messages.options }, h("slot", { name: SLOTS.headerMenuActions }))) : null));
+    const headerNode = (h("div", { class: CSS.headerContainer }, this.dragHandle ? h("calcite-handle", null) : null, collapsible ? (h("button", { "aria-controls": IDS.content, "aria-describedby": IDS.header, "aria-expanded": collapsible ? toAriaBoolean(open) : null, class: CSS.toggle, id: IDS.toggle, onClick: this.onHeaderClick, title: toggleLabel }, headerContent, !hasControl && !hasMenuActions ? (h("calcite-icon", { "aria-hidden": "true", class: CSS.toggleIcon, icon: collapseIcon, scale: "s" })) : null)) : (headerContent), hasControl ? (h("div", { class: CSS.controlContainer }, h("slot", { name: SLOTS.control }))) : null, hasMenuActions ? (h("calcite-action-menu", { label: messages.options }, h("slot", { name: SLOTS.headerMenuActions }))) : null));
     return (h(Host, null, h("article", { "aria-busy": toAriaBoolean(loading), class: {
         [CSS.container]: true,
-      } }, headerNode, h("section", { "aria-expanded": toAriaBoolean(open), "aria-labelledby": buttonId, class: CSS.content, hidden: !open, id: regionId }, this.renderScrim()))));
+      } }, headerNode, h("section", { "aria-labelledby": IDS.toggle, class: CSS.content, hidden: !open, id: IDS.content }, this.renderScrim()))));
   }
   static get assetsDirs() { return ["assets"]; }
   get el() { return this; }

package/dist/components/calcite-card.js

@@ -15,7 +15,7 @@ import { d as defineCustomElement$2 } from './loader.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 = {
   container: "container",

package/dist/components/calcite-chip-group.js

@@ -4,7 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { v as focusElementInGroup, t as toAriaBoolean } from './dom.js';
+import { w as focusElementInGroup, t as toAriaBoolean } from './dom.js';
 import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction } from './interactive.js';
 import { c as createObserver } from './observers.js';
 import { a as setComponentLoaded, s as setUpLoadableComponent, c as componentFocusable } from './loadable.js';
@@ -36,8 +36,9 @@ const ChipGroup = /*@__PURE__*/ proxyCustomElement(class ChipGroup extends HTMLE
       this.setSelectedItems(false);
     };
     this.setSelectedItems = (emit, elToMatch) => {
+      var _a, _b;
       if (elToMatch) {
-        this.items.forEach((el) => {
+        (_a = this.items) === null || _a === void 0 ? void 0 : _a.forEach((el) => {
           const matchingEl = elToMatch === el;
           switch (this.selectionMode) {
             case "multiple":
@@ -54,7 +55,7 @@ const ChipGroup = /*@__PURE__*/ proxyCustomElement(class ChipGroup extends HTMLE
           }
         });
       }
-      this.selectedItems = this.items.filter((el) => el.selected);
+      this.selectedItems = (_b = this.items) === null || _b === void 0 ? void 0 : _b.filter((el) => el.selected);
       if (emit) {
         this.calciteChipGroupSelect.emit();
       }
@@ -98,8 +99,9 @@ const ChipGroup = /*@__PURE__*/ proxyCustomElement(class ChipGroup extends HTMLE
   //
   //--------------------------------------------------------------------------
   calciteInternalChipKeyEventListener(event) {
+    var _a;
     if (event.composedPath().includes(this.el)) {
-      const interactiveItems = this.items.filter((el) => !el.disabled);
+      const interactiveItems = (_a = this.items) === null || _a === void 0 ? void 0 : _a.filter((el) => !el.disabled);
       switch (event.detail.key) {
         case "ArrowRight":
           focusElementInGroup(interactiveItems, event.detail.target, "next");
@@ -117,19 +119,20 @@ const ChipGroup = /*@__PURE__*/ proxyCustomElement(class ChipGroup extends HTMLE
     }
   }
   calciteChipCloseListener(event) {
+    var _a, _b, _c, _d;
     const item = event.target;
-    if (this.items.includes(item)) {
-      if (this.items.indexOf(item) > 0) {
+    if ((_a = this.items) === null || _a === void 0 ? void 0 : _a.includes(item)) {
+      if (((_b = this.items) === null || _b === void 0 ? void 0 : _b.indexOf(item)) > 0) {
         focusElementInGroup(this.items, item, "previous");
       }
-      else if (this.items.indexOf(item) === 0) {
+      else if (((_c = this.items) === null || _c === void 0 ? void 0 : _c.indexOf(item)) === 0) {
         focusElementInGroup(this.items, item, "next");
       }
       else {
         focusElementInGroup(this.items, item, "first");
       }
     }
-    this.items = this.items.filter((el) => el !== item);
+    this.items = (_d = this.items) === null || _d === void 0 ? void 0 : _d.filter((el) => el !== item);
   }
   calciteChipSelectListener(event) {
     if (event.composedPath().includes(this.el)) {

package/dist/components/calcite-color-picker.js

@@ -328,6 +328,9 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
       this.drawHueSlider();
     };
     this.initOpacitySlider = (canvas) => {
+      if (!canvas) {
+        return;
+      }
       this.opacitySliderRenderingContext = canvas.getContext("2d");
       this.updateCanvasSize("opacity-slider");
       this.drawOpacitySlider();
@@ -393,8 +396,8 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
     this.updateChannelsFromColor(color);
     this.previousColor = oldColor;
   }
-  handleFormatChange(format) {
-    this.setMode(format);
+  handleFormatOrAlphaChannelChange() {
+    this.setMode(this.format);
     this.internalColorSet(this.color, false, "internal");
   }
   handleScaleChange(scale = "m") {
@@ -543,26 +546,26 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
     const [adjustedHueScopeLeft, adjustedHueScopeTop] = this.getAdjustedScopePosition(hueLeft, hueTop);
     const [adjustedOpacityScopeLeft, adjustedOpacityScopeTop] = this.getAdjustedScopePosition(opacityLeft, opacityTop);
     return (h("div", { class: CSS.container }, h("div", { class: CSS.controlAndScope }, h("canvas", { class: CSS.colorField, onPointerDown: this.handleColorFieldPointerDown,
-      // 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.initColorField }), h("div", { "aria-label": vertical ? messages.value : messages.saturation, "aria-valuemax": vertical ? HSV_LIMITS.v : HSV_LIMITS.s, "aria-valuemin": "0", "aria-valuenow": (vertical ? color === null || color === void 0 ? void 0 : color.saturationv() : color === null || color === void 0 ? void 0 : color.value()) || "0", class: { [CSS.scope]: true, [CSS.colorFieldScope]: true }, onKeyDown: this.handleColorFieldScopeKeyDown, role: "slider", style: {
         top: `${adjustedColorFieldScopeTop || 0}px`,
         left: `${adjustedColorFieldScopeLeft || 0}px`,
       }, tabindex: "0",
-      // 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.storeColorFieldScope })), h("div", { class: CSS.previewAndSliders }, h("calcite-color-picker-swatch", { class: CSS.preview, color: selectedColorInHex, scale: "l" }), h("div", { class: CSS.sliders }, h("div", { class: CSS.controlAndScope }, h("canvas", { class: { [CSS.slider]: true, [CSS.hueSlider]: true }, onPointerDown: this.handleHueSliderPointerDown,
-      // 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.initHueSlider }), h("div", { "aria-label": messages.hue, "aria-valuemax": HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": (color === null || color === void 0 ? void 0 : color.round().hue()) || DEFAULT_COLOR.round().hue(), class: { [CSS.scope]: true, [CSS.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, role: "slider", style: {
         top: `${adjustedHueScopeTop}px`,
         left: `${adjustedHueScopeLeft}px`,
       }, tabindex: "0",
-      // 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.storeHueScope })), alphaChannel ? (h("div", { class: CSS.controlAndScope }, h("canvas", { class: { [CSS.slider]: true, [CSS.opacitySlider]: true }, onPointerDown: this.handleOpacitySliderPointerDown,
-      // 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.initOpacitySlider }), h("div", { "aria-label": messages.opacity, "aria-valuemax": OPACITY_LIMITS.max, "aria-valuemin": OPACITY_LIMITS.min, "aria-valuenow": (color || DEFAULT_COLOR).round().alpha(), class: { [CSS.scope]: true, [CSS.opacityScope]: true }, onKeyDown: this.handleOpacityScopeKeyDown, role: "slider", style: {
         top: `${adjustedOpacityScopeTop}px`,
         left: `${adjustedOpacityScopeLeft}px`,
       }, tabindex: "0",
-      // 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.storeOpacityScope }))) : null)), noHex && noChannels ? null : (h("div", { class: {
         [CSS.controlSection]: true,
         [CSS.section]: true,
@@ -893,9 +896,9 @@ const ColorPicker = /*@__PURE__*/ proxyCustomElement(class ColorPicker extends H
   static get assetsDirs() { return ["assets"]; }
   get el() { return this; }
   static get watchers() { return {
-    "alphaChannel": ["handleAlphaChannelChange"],
+    "alphaChannel": ["handleAlphaChannelChange", "handleFormatOrAlphaChannelChange"],
     "color": ["handleColorChange"],
-    "format": ["handleFormatChange"],
+    "format": ["handleFormatOrAlphaChannelChange"],
     "scale": ["handleScaleChange"],
     "messageOverrides": ["onMessagesChange"],
     "value": ["handleValueChange"],

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

@@ -4,14 +4,13 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { y as getElementProp } from './dom.js';
 import { g as guid } from './guid.js';
 import { e as getAncestors, f as getDepth } from './utils2.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 = {
   list: "list",
@@ -27,10 +26,10 @@ const ComboboxItemGroup = /*@__PURE__*/ proxyCustomElement(class ComboboxItemGro
     this.__registerHost();
     this.__attachShadow();
     this.guid = guid();
-    this.scale = "m";
     this.afterEmptyGroup = false;
     this.ancestors = undefined;
     this.label = undefined;
+    this.scale = "m";
   }
   // --------------------------------------------------------------------------
   //
@@ -39,7 +38,6 @@ const ComboboxItemGroup = /*@__PURE__*/ proxyCustomElement(class ComboboxItemGro
   // --------------------------------------------------------------------------
   connectedCallback() {
     this.ancestors = getAncestors(this.el);
-    this.scale = getElementProp(this.el, "scale", this.scale);
   }
   // --------------------------------------------------------------------------
   //
@@ -56,7 +54,8 @@ const ComboboxItemGroup = /*@__PURE__*/ proxyCustomElement(class ComboboxItemGro
 }, [1, "calcite-combobox-item-group", {
     "afterEmptyGroup": [516, "after-empty-group"],
     "ancestors": [1040],
-    "label": [1]
+    "label": [1],
+    "scale": [1]
   }]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {

package/dist/components/calcite-fab.js

@@ -14,7 +14,7 @@ import { d as defineCustomElement$2 } from './loader.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: "button",
@@ -80,7 +80,7 @@ const Fab = /*@__PURE__*/ proxyCustomElement(class Fab extends HTMLElement {
     const { appearance, kind, disabled, loading, scale, textEnabled, icon, label, text, iconFlipRtl, } = this;
     const title = !textEnabled ? label || text || null : null;
     return (h("calcite-button", { appearance: appearance === "solid" ? "solid" : "outline-fill", class: CSS.button, disabled: disabled, iconFlipRtl: iconFlipRtl ? "start" : null, iconStart: icon, kind: kind, label: label, loading: loading, round: true, scale: scale, title: title, type: "button", width: "auto",
-      // 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: (buttonEl) => {
         this.buttonEl = buttonEl;
       } }, this.textEnabled ? this.text : null));

package/dist/components/calcite-flow-item.js

@@ -20,7 +20,7 @@ import { d as defineCustomElement$2 } from './scrim.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 = {
   backButton: "back-button",
@@ -163,13 +163,13 @@ const FlowItem = /*@__PURE__*/ proxyCustomElement(class FlowItem extends HTMLEle
     const label = messages.back;
     const icon = rtl ? ICONS.backRight : ICONS.backLeft;
     return showBackButton ? (h("calcite-action", { "aria-label": label, class: CSS.backButton, icon: icon, key: "flow-back-button", onClick: backButtonClick, scale: "s", slot: "header-actions-start", text: label, title: label,
-      // 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.setBackRef })) : null;
   }
   render() {
     const { closable, closed, description, disabled, heading, headingLevel, loading, menuOpen, messages, } = this;
     return (h(Host, null, h("calcite-panel", { closable: closable, closed: closed, description: description, disabled: disabled, heading: heading, headingLevel: headingLevel, loading: loading, menuOpen: menuOpen, messageOverrides: messages, onCalcitePanelClose: this.handlePanelClose, onCalcitePanelScroll: this.handlePanelScroll,
-      // 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.setContainerRef }, this.renderBackButton(), h("slot", { name: SLOTS.actionBar, slot: SLOTS$1.actionBar }), h("slot", { name: SLOTS.headerActionsStart, slot: SLOTS$1.headerActionsStart }), h("slot", { name: SLOTS.headerActionsEnd, slot: SLOTS$1.headerActionsEnd }), h("slot", { name: SLOTS.headerContent, slot: SLOTS$1.headerContent }), h("slot", { name: SLOTS.headerMenuActions, slot: SLOTS$1.headerMenuActions }), h("slot", { name: SLOTS.fab, slot: SLOTS$1.fab }), h("slot", { name: SLOTS.footerActions, slot: SLOTS$1.footerActions }), h("slot", { name: SLOTS.footer, slot: SLOTS$1.footer }), h("slot", null))));
   }
   static get assetsDirs() { return ["assets"]; }

package/dist/components/calcite-flow.js

@@ -10,7 +10,7 @@ import { c as componentFocusable, s as setUpLoadableComponent, a as setComponent
 /*!
  * 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 = {
   frame: "frame",
@@ -35,8 +35,8 @@ const Flow = /*@__PURE__*/ proxyCustomElement(class Flow extends HTMLElement {
       return newFlowItemCount < oldFlowItemCount ? "retreating" : "advancing";
     };
     this.updateFlowProps = () => {
-      const { el, items } = this;
-      const newItems = Array.from(el.querySelectorAll("calcite-flow-item")).filter((flowItem) => flowItem.closest("calcite-flow") === el);
+      const { customItemSelectors, el, items } = this;
+      const newItems = Array.from(el.querySelectorAll(`calcite-flow-item${customItemSelectors ? `,${customItemSelectors}` : ""}`)).filter((flowItem) => flowItem.closest("calcite-flow") === el);
       const oldItemCount = items.length;
       const newItemCount = newItems.length;
       const activeItem = newItems[newItemCount - 1];
@@ -57,6 +57,7 @@ const Flow = /*@__PURE__*/ proxyCustomElement(class Flow extends HTMLElement {
         this.flowDirection = flowDirection;
       }
     };
+    this.customItemSelectors = undefined;
     this.flowDirection = null;
     this.itemCount = 0;
     this.items = [];
@@ -78,7 +79,13 @@ const Flow = /*@__PURE__*/ proxyCustomElement(class Flow extends HTMLElement {
     const beforeBack = lastItem.beforeBack
       ? lastItem.beforeBack
       : () => Promise.resolve();
-    await beforeBack.call(lastItem);
+    try {
+      await beforeBack.call(lastItem);
+    }
+    catch (_error) {
+      // back prevented
+      return;
+    }
     lastItem.remove();
     return lastItem;
   }
@@ -137,6 +144,7 @@ const Flow = /*@__PURE__*/ proxyCustomElement(class Flow extends HTMLElement {
   get el() { return this; }
   static get style() { return flowCss; }
 }, [1, "calcite-flow", {
+    "customItemSelectors": [1, "custom-item-selectors"],
     "flowDirection": [32],
     "itemCount": [32],
     "items": [32],

package/dist/components/calcite-inline-editable.js

@@ -18,7 +18,7 @@ import { d as defineCustomElement$2 } from './loader.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 = {
   wrapper: "wrapper",
@@ -177,13 +177,13 @@ const InlineEditable = /*@__PURE__*/ proxyCustomElement(class InlineEditable ext
         opacity: this.editingEnabled ? "0" : "1",
         width: this.editingEnabled ? "0" : "inherit",
       }, 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: (el) => (this.enableEditingButton = el) }), this.shouldShowControls && [
       h("div", { class: CSS.cancelEditingButtonWrapper }, h("calcite-button", { appearance: "transparent", class: CSS.cancelEditingButton, disabled: this.disabled, iconStart: "x", kind: "neutral", label: this.messages.cancelEditing, onClick: this.cancelEditingHandler, scale: this.scale, 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: (el) => (this.cancelEditingButton = el) })),
       h("calcite-button", { appearance: "solid", class: CSS.confirmChangesButton, disabled: this.disabled, iconStart: "check", kind: "brand", label: this.messages.confirmChanges, loading: this.loading, onClick: this.confirmChangesHandler, scale: this.scale, 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: (el) => (this.confirmEditingButton = el) }),
     ])));
   }

package/dist/components/calcite-input-date-picker.js

@@ -4,7 +4,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host, Build } from '@stencil/core/internal/client';
-import { j as datePartsFromLocalizedString, k as dateFromLocalizedString, i as inRange, a as dateToISO, d as dateFromISO, b as dateFromRange } from './date.js';
+import { j as datePartsFromISO, k as datePartsFromLocalizedString, l as dateFromLocalizedString, i as inRange, a as dateToISO, d as dateFromISO, b as dateFromRange } from './date.js';
 import { t as toAriaBoolean } from './dom.js';
 import { f as filterComputedPlacements, c as connectFloatingUI, b as defaultMenuPlacement, r as reposition, a as disconnectFloatingUI, F as FloatingCSS } from './floating-ui.js';
 import { s as submitForm, c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from './form.js';
@@ -12,7 +12,7 @@ import { c as connectInteractive, d as disconnectInteractive, u as updateHostInt
 import { n as numberKeys } from './key.js';
 import { c as connectLabel, d as disconnectLabel } from './label.js';
 import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable.js';
-import { n as numberStringFormatter, c as connectLocalized, d as disconnectLocalized } from './locale2.js';
+import { n as numberStringFormatter, c as connectLocalized, d as disconnectLocalized, e as defaultNumberingSystem } from './locale2.js';
 import { o as onToggleOpenCloseComponent } from './openCloseComponent.js';
 import { g as getValueAsDateRange, a as getLocaleData, d as defineCustomElement$8 } from './date-picker.js';
 import { c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n.js';
@@ -28,7 +28,7 @@ import { d as defineCustomElement$2 } from './progress.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 = {
   assistiveText: "assistive-text",
@@ -37,6 +37,36 @@ const CSS = {
   toggleIcon: "toggle-icon",
 };
 
+/*!
+ * 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.8.0
+ */
+/**
+ * Specifies if an ISO string date (YYYY-MM-DD) has two digit year.
+ *
+ * @param {string} value
+ * @returns {boolean}
+ */
+function isTwoDigitYear(value) {
+  if (!value) {
+    return false;
+  }
+  const { year } = datePartsFromISO(value);
+  return Number(year) < 100;
+}
+/**
+ * Returns a normalized year to current century from a given two digit year number.
+ *
+ * @param {number} twoDigitYear
+ * @returns {string}
+ */
+function normalizeToCurrentCentury(twoDigitYear) {
+  const currentYear = new Date().getFullYear();
+  const normalizedYear = Math.floor(currentYear / 100) * 100 + twoDigitYear;
+  return normalizedYear;
+}
+
 const inputDatePickerCss = ":host{--calcite-icon-size:1rem;--calcite-spacing-eighth:0.125rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}: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:inline-block;inline-size:100%;overflow:visible;vertical-align:top;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host .menu-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}:host .menu-container[data-placement^=bottom] .calcite-floating-ui-anim{transform:translateY(-5px)}:host .menu-container[data-placement^=top] .calcite-floating-ui-anim{transform:translateY(5px)}:host .menu-container[data-placement^=left] .calcite-floating-ui-anim{transform:translateX(5px)}:host .menu-container[data-placement^=right] .calcite-floating-ui-anim{transform:translateX(-5px)}:host .menu-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;transform:translate(0)}:host([scale=s]){--calcite-toggle-spacing:0.5rem}:host([scale=m]){--calcite-toggle-spacing:0.75rem}:host([scale=l]){--calcite-toggle-spacing:1rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.calendar-picker-wrapper{position:static;inline-size:100%;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);transform:translate3d(0, 0, 0)}.input-wrapper{position:relative}.toggle-icon{position:absolute;display:flex;inline-size:1rem;cursor:pointer;align-items:center;inset-inline-end:0;inset-block:0;padding-inline:var(--calcite-toggle-spacing)}:host([range]) .input-container{display:flex}:host([range]) .input-wrapper{flex:1 1 auto}:host([range]) .horizontal-arrow-container{display:flex;align-items:center;border-width:1px;border-inline-start-width:0px;border-inline-end-width:0px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-background);padding-block:0px;padding-inline:0.25rem}:host([range][layout=vertical]) .input-wrapper{inline-size:100%}:host([range][layout=vertical]) .input-container{flex-direction:column;align-items:flex-start}:host([range][layout=vertical]) .calendar-picker-wrapper--end{transform:translate3d(0, 0, 0)}:host([range][layout=vertical]) .vertical-arrow-container{inset-block-start:1.5rem;position:absolute;z-index:var(--calcite-app-z-index);margin-inline:1px;background-color:var(--calcite-ui-foreground-1);padding-inline:0.625rem;inset-inline-start:0}:host([scale=s][range]:not([layout=vertical])) .calendar-picker-wrapper{inline-size:216px}:host([scale=m][range]:not([layout=vertical])) .calendar-picker-wrapper{inline-size:286px}:host([scale=l][range]:not([layout=vertical])) .calendar-picker-wrapper{inline-size:398px}.menu-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}.menu-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}.menu-container[data-placement^=bottom] .calcite-floating-ui-anim{transform:translateY(-5px)}.menu-container[data-placement^=top] .calcite-floating-ui-anim{transform:translateY(5px)}.menu-container[data-placement^=left] .calcite-floating-ui-anim{transform:translateX(5px)}.menu-container[data-placement^=right] .calcite-floating-ui-anim{transform:translateX(-5px)}.menu-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;transform:translate(0)}:host([open]) .menu-container{visibility:visible}.menu-container--active{visibility:visible}.input .calcite-input__wrapper{margin-block-start:0px}:host([range][layout=vertical][scale=m]) .vertical-arrow-container{inset-block-start:1.5rem;padding-inline-start:0.75rem}:host([range][layout=vertical][scale=m]) .vertical-arrow-container calcite-icon{block-size:0.75rem;inline-size:0.75rem;min-inline-size:0px}:host([range][layout=vertical][scale=l]) .vertical-arrow-container{inset-block-start:2.25rem;padding-inline:0.875rem}:host([range][layout=vertical][open]) .vertical-arrow-container{display:none}::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}.assistive-text{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}:host([hidden]){display:none}[hidden]{display:none}";
 
 const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class InputDatePicker extends HTMLElement {
@@ -207,9 +237,15 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class InputDatePicker e
       const oldValueIsArray = Array.isArray(oldValue);
       const valueIsArray = Array.isArray(valueAsDate);
       const newStartDate = valueIsArray ? valueAsDate[0] : null;
-      const newStartDateISO = valueIsArray ? dateToISO(newStartDate) : "";
+      let newStartDateISO = valueIsArray ? dateToISO(newStartDate) : "";
+      if (newStartDateISO) {
+        newStartDateISO = this.getNormalizedDate(newStartDateISO);
+      }
       const newEndDate = valueIsArray ? valueAsDate[1] : null;
-      const newEndDateISO = valueIsArray ? dateToISO(newEndDate) : "";
+      let newEndDateISO = valueIsArray ? dateToISO(newEndDate) : "";
+      if (newEndDateISO) {
+        newEndDateISO = this.getNormalizedDate(newEndDateISO);
+      }
       const newValue = newStartDateISO || newEndDateISO ? [newStartDateISO, newEndDateISO] : "";
       if (newValue === oldValue) {
         return;
@@ -235,7 +271,8 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class InputDatePicker e
         return;
       }
       const oldValue = this.value;
-      const newValue = dateToISO(value);
+      let newValue = dateToISO(value);
+      newValue = this.getNormalizedDate(newValue);
       if (newValue === oldValue) {
         return;
       }
@@ -483,31 +520,31 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class InputDatePicker e
       useGrouping: false,
     };
     return (h(Host, { onBlur: this.deactivate, onKeyDown: this.keyDownHandler }, this.localeData && (h("div", { class: "input-container" }, h("div", { class: "input-wrapper", onClick: this.onInputWrapperClick,
-      // 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.setStartWrapper }, h("calcite-input", { "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-describedby": this.placeholderTextId, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", class: `input ${this.layout === "vertical" && this.range ? `no-bottom-border` : ``}`, disabled: disabled, icon: "calendar", "number-button-type": "none", numberingSystem: numberingSystem, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.startInputFocus, onFocus: this.startEndInputFocus, placeholder: (_a = this.localeData) === null || _a === void 0 ? void 0 : _a.placeholder, readOnly: readOnly, role: "combobox", scale: this.scale, type: "text",
-      // eslint-disable-next-line react/jsx-sort-props
-      ref: this.setStartInput }), this.renderToggleIcon(this.open && this.focusedInput === "start"), h("span", { "aria-hidden": "true", class: CSS.assistiveText, id: this.placeholderTextId }, "Date Format: ", (_b = this.localeData) === null || _b === void 0 ? void 0 : _b.placeholder)), h("div", { "aria-hidden": toAriaBoolean(!this.open), "aria-label": messages.chooseDate, "aria-live": "polite", "aria-modal": "true", class: {
+      // 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.setStartInput }), !this.readOnly && this.renderToggleIcon(this.open && this.focusedInput === "start"), h("span", { "aria-hidden": "true", class: CSS.assistiveText, id: this.placeholderTextId }, "Date Format: ", (_b = this.localeData) === null || _b === void 0 ? void 0 : _b.placeholder)), h("div", { "aria-hidden": toAriaBoolean(!this.open), "aria-label": messages.chooseDate, "aria-live": "polite", "aria-modal": "true", class: {
         [CSS.menu]: true,
         [CSS.menuActive]: this.open,
       }, id: this.dialogId, role: "dialog",
-      // 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 }, h("div", { class: {
         ["calendar-picker-wrapper"]: true,
         ["calendar-picker-wrapper--end"]: this.focusedInput === "end",
         [FloatingCSS.animation]: true,
         [FloatingCSS.animationActive]: this.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: this.setTransitionEl }, h("calcite-date-picker", { activeDate: this.datePickerActiveDate, activeRange: this.focusedInput, headingLevel: this.headingLevel, max: this.max, maxAsDate: this.maxAsDate, messageOverrides: this.messageOverrides, min: this.min, minAsDate: this.minAsDate, numberingSystem: numberingSystem, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, tabIndex: this.open ? undefined : -1, valueAsDate: this.valueAsDate,
-      // 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.setDatePickerRef }))), this.range && this.layout === "horizontal" && (h("div", { class: "horizontal-arrow-container" }, h("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: this.scale === "l" ? "m" : "s" }))), this.range && this.layout === "vertical" && this.scale !== "s" && (h("div", { class: "vertical-arrow-container" }, h("calcite-icon", { icon: "arrow-down", scale: this.scale === "l" ? "m" : "s" }))), this.range && (h("div", { class: "input-wrapper", onClick: this.onInputWrapperClick,
-      // 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.setEndWrapper }, h("calcite-input", { "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", class: {
         input: true,
         "border-top-color-one": this.layout === "vertical" && this.range,
       }, disabled: disabled, icon: "calendar", "number-button-type": "none", numberingSystem: numberingSystem, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.endInputFocus, onFocus: this.startEndInputFocus, placeholder: (_c = this.localeData) === null || _c === void 0 ? void 0 : _c.placeholder, readOnly: readOnly, role: "combobox", scale: this.scale, type: "text",
-      // eslint-disable-next-line react/jsx-sort-props
-      ref: this.setEndInput }), this.renderToggleIcon(this.open && this.focusedInput === "end"))))), h(HiddenFormInputSlot, { component: this })));
+      // 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.setEndInput }), !this.readOnly && this.renderToggleIcon(this.open && this.focusedInput === "end"))))), h(HiddenFormInputSlot, { component: this })));
   }
   renderToggleIcon(open) {
     return (h("span", { class: CSS.toggleIcon }, h("calcite-icon", { icon: open ? "chevron-up" : "chevron-down", scale: "s" })));
@@ -630,14 +667,31 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class InputDatePicker e
     const endDate = this.range
       ? dateFromRange((Array.isArray(this.valueAsDate) && this.valueAsDate[1]) || undefined, this.minAsDate, this.maxAsDate)
       : null;
-    const localizedDate = date && this.formatNumerals(date.toLocaleDateString(this.effectiveLocale));
-    const localizedEndDate = endDate && this.formatNumerals(endDate.toLocaleDateString(this.effectiveLocale));
+    const formattingOptions = {
+      // we explicitly set numberingSystem to prevent the browser-inferred value
+      // see https://github.com/Esri/calcite-design-system/issues/3079#issuecomment-1168964195 for more info
+      numberingSystem: defaultNumberingSystem,
+    };
+    const localizedDate = date && this.formatNumerals(date.toLocaleDateString(this.effectiveLocale, formattingOptions));
+    const localizedEndDate = endDate &&
+      this.formatNumerals(endDate.toLocaleDateString(this.effectiveLocale, formattingOptions));
     this.setInputValue(localizedDate !== null && localizedDate !== void 0 ? localizedDate : "", "start");
     this.setInputValue((_a = (this.range && localizedEndDate)) !== null && _a !== void 0 ? _a : "", "end");
   }
   warnAboutInvalidValue(value) {
     console.warn(`The specified value "${value}" does not conform to the required format, "YYYY-MM-DD".`);
   }
+  getNormalizedDate(value) {
+    if (!value) {
+      return "";
+    }
+    if (!isTwoDigitYear(value)) {
+      return value;
+    }
+    const { day, month, year } = datePartsFromISO(value);
+    const normalizedYear = normalizeToCurrentCentury(Number(year));
+    return `${normalizedYear}-${month}-${day}`;
+  }
   static get delegatesFocus() { return true; }
   static get assetsDirs() { return ["assets"]; }
   get el() { return this; }