@esri/calcite-components 3.3.0-next.99 → 3.3.0

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.3.0-next.99 */
+v3.3.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, nothing, html } from "lit";
 import { createRef, ref } from "lit-html/directives/ref.js";
@@ -28,10 +28,9 @@ const ICONS = {
 class InlineEditable extends LitElement {
   constructor() {
     super();
-    this.cancelEditingButton = createRef();
-    this.confirmEditingButton = createRef();
+    this.cancelEditingButtonRef = createRef();
     this._editingEnabled = false;
-    this.enableEditingButton = createRef();
+    this.enableEditingButtonRef = createRef();
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
     this.controls = false;
@@ -62,9 +61,7 @@ class InlineEditable extends LitElement {
     }
   }
   async setFocus(options) {
-    return this.focusSetter(() => {
-      return this.inputElement;
-    }, options);
+    return this.focusSetter(() => this.inputEl, options);
   }
   connectedCallback() {
     super.connectedCallback();
@@ -86,13 +83,13 @@ class InlineEditable extends LitElement {
     return this.editingEnabled && this.controls;
   }
   disabledWatcher(disabled) {
-    if (this.inputElement) {
-      this.inputElement.disabled = disabled;
+    if (this.inputEl) {
+      this.inputEl.disabled = disabled;
     }
   }
   editingEnabledWatcher(newValue, oldValue) {
-    if (this.inputElement) {
-      this.inputElement.editingEnabled = newValue;
+    if (this.inputEl) {
+      this.inputEl.editingEnabled = newValue;
     }
     if (!newValue && !!oldValue) {
       this.shouldEmitCancel = true;
@@ -105,7 +102,7 @@ class InlineEditable extends LitElement {
   }
   async handleDefaultSlotChange(event) {
     const inputElement = slotChangeGetAssignedElements(event).filter((el) => el.matches("calcite-input"))[0];
-    this.inputElement = inputElement;
+    this.inputEl = inputElement;
     if (!inputElement) {
       return;
     }
@@ -113,31 +110,31 @@ class InlineEditable extends LitElement {
     inputElement.editingEnabled = this.editingEnabled;
     inputElement.disabled = this.disabled;
     inputElement.label = inputElement.label || getLabelText(this);
-    this.scale = this.scale || this.inputElement?.scale || "m";
+    this.scale = this.scale || this.inputEl?.scale || "m";
   }
   onLabelClick() {
     this.setFocus();
   }
   enableEditing() {
-    this.valuePriorToEditing = this.inputElement?.value;
+    this.valuePriorToEditing = this.inputEl?.value;
     this.editingEnabled = true;
-    this.inputElement?.setFocus();
+    this.inputEl?.setFocus();
     this.calciteInternalInlineEditableEnableEditingChange.emit();
   }
   disableEditing() {
     this.editingEnabled = false;
   }
   cancelEditing() {
-    if (this.inputElement) {
-      this.inputElement.value = this.valuePriorToEditing;
+    if (this.inputEl) {
+      this.inputEl.value = this.valuePriorToEditing;
     }
     this.disableEditing();
-    this.enableEditingButton.value?.setFocus();
+    this.enableEditingButtonRef.value?.setFocus();
     if (!this.editingEnabled && !!this.shouldEmitCancel) {
       this.calciteInlineEditableEditCancel.emit();
     }
   }
-  async escapeKeyHandler(event) {
+  escapeKeyHandler(event) {
     if (event.defaultPrevented) {
       return;
     }
@@ -146,13 +143,13 @@ class InlineEditable extends LitElement {
       this.cancelEditing();
     }
     if (event.key === "Tab" && this.shouldShowControls) {
-      if (!event.shiftKey && event.target === this.inputElement) {
+      if (!event.shiftKey && event.target === this.inputEl) {
         event.preventDefault();
-        this.cancelEditingButton.value.setFocus();
+        this.cancelEditingButtonRef.value.setFocus();
       }
-      if (!!event.shiftKey && event.target === this.cancelEditingButton.value) {
+      if (!!event.shiftKey && event.target === this.cancelEditingButtonRef.value) {
         event.preventDefault();
-        this.inputElement?.setFocus();
+        this.inputEl?.setFocus();
       }
     }
   }
@@ -160,8 +157,8 @@ class InlineEditable extends LitElement {
     event.preventDefault();
     this.cancelEditing();
   }
-  async enableEditingHandler(event) {
-    if (this.disabled || event.target !== this.enableEditingButton.value && event.target !== this.inputElement) {
+  enableEditingHandler(event) {
+    if (this.disabled || event.target !== this.enableEditingButtonRef.value && event.target !== this.inputEl) {
       return;
     }
     event.preventDefault();
@@ -177,7 +174,7 @@ class InlineEditable extends LitElement {
         this.loading = true;
         await this.afterConfirm();
         this.disableEditing();
-        this.enableEditingButton.value.setFocus();
+        this.enableEditingButtonRef.value?.setFocus();
       }
     } catch {
     } finally {
@@ -188,9 +185,9 @@ class InlineEditable extends LitElement {
     return InteractiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap(CSS.wrapper)} @click=${this.enableEditingHandler} @keydown=${this.escapeKeyHandler}><div class=${safeClassMap(CSS.inputWrapper)}><slot @slotchange=${this.handleDefaultSlotChange}></slot></div><div class=${safeClassMap(CSS.controlsWrapper)}><calcite-button appearance=transparent class=${safeClassMap(CSS.enableEditingButton)} .disabled=${this.disabled} .iconStart=${ICONS.pencil} kind=neutral .label=${this.messages.enableEditing} @click=${this.enableEditingHandler} .scale=${this.scale} style=${safeStyleMap({
       opacity: this.editingEnabled ? "0" : "1",
       width: this.editingEnabled ? "0" : "inherit"
-    })} title=${this.messages.enableEditing ?? nothing} type=button ${ref(this.enableEditingButton)}></calcite-button>${this.shouldShowControls && [
-      html`<div class=${safeClassMap(CSS.cancelEditingButtonWrapper)}><calcite-button appearance=transparent class=${safeClassMap(CSS.cancelEditingButton)} .disabled=${this.disabled} .iconStart=${ICONS.close} kind=neutral .label=${this.messages.cancelEditing} @click=${this.cancelEditingHandler} .scale=${this.scale} title=${this.messages.cancelEditing ?? nothing} type=button ${ref(this.cancelEditingButton)}></calcite-button></div>`,
-      html`<calcite-button appearance=solid class=${safeClassMap(CSS.confirmChangesButton)} .disabled=${this.disabled} .iconStart=${ICONS.check} kind=brand .label=${this.messages.confirmChanges} .loading=${this.loading} @click=${this.confirmChangesHandler} .scale=${this.scale} title=${this.messages.confirmChanges ?? nothing} type=button ${ref(this.confirmEditingButton)}></calcite-button>`
+    })} title=${this.messages.enableEditing ?? nothing} type=button ${ref(this.enableEditingButtonRef)}></calcite-button>${this.shouldShowControls && [
+      html`<div class=${safeClassMap(CSS.cancelEditingButtonWrapper)}><calcite-button appearance=transparent class=${safeClassMap(CSS.cancelEditingButton)} .disabled=${this.disabled} .iconStart=${ICONS.close} kind=neutral .label=${this.messages.cancelEditing} @click=${this.cancelEditingHandler} .scale=${this.scale} title=${this.messages.cancelEditing ?? nothing} type=button ${ref(this.cancelEditingButtonRef)}></calcite-button></div>`,
+      html`<calcite-button appearance=solid class=${safeClassMap(CSS.confirmChangesButton)} .disabled=${this.disabled} .iconStart=${ICONS.check} kind=brand .label=${this.messages.confirmChanges} .loading=${this.loading} @click=${this.confirmChangesHandler} .scale=${this.scale} title=${this.messages.confirmChanges ?? nothing} type=button></calcite-button>`
     ] || ""}</div></div>` });
   }
 }

package/dist/components/calcite-input/customElement.js

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.3.0-next.99 */
+v3.3.0 */
 import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { live } from "lit/directives/live.js";
 import { keyed } from "lit/directives/keyed.js";
@@ -65,10 +65,12 @@ const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-fo
 class Input extends LitElement {
   constructor() {
     super();
-    this.actionWrapperEl = createRef();
+    this.actionWrapperRef = createRef();
     this.attributeWatch = useWatchAttributes(["autofocus", "enterkeyhint", "inputmode", "spellcheck"], this.handleGlobalAttributesChanged);
+    this.childRef = createRef();
     this.childElType = "input";
-    this.inputWrapperEl = createRef();
+    this.childNumberRef = createRef();
+    this.inputWrapperRef = createRef();
     this.onHiddenFormInputInput = (event) => {
       if (event.target.name === this.name) {
         this.setValue({
@@ -143,16 +145,11 @@ class Input extends LitElement {
     }
   }
   async selectText() {
-    if (this.type === "number") {
-      this.childNumberEl?.select();
-    } else {
-      this.childEl?.select();
-    }
+    const selectTarget = this.type === "number" ? this.childNumberRef : this.childRef;
+    selectTarget.value?.select();
   }
   async setFocus(options) {
-    return this.focusSetter(() => {
-      return this.type === "number" ? this.childNumberEl : this.childEl;
-    }, options);
+    return this.focusSetter(() => this.type === "number" ? this.childNumberRef.value : this.childRef.value, options);
   }
   connectedCallback() {
     super.connectedCallback();
@@ -289,7 +286,7 @@ class Input extends LitElement {
       return;
     }
     const composedPath = event.composedPath();
-    if (!composedPath.includes(this.inputWrapperEl.value) || composedPath.includes(this.actionWrapperEl.value)) {
+    if (!composedPath.includes(this.inputWrapperRef.value) || composedPath.includes(this.actionWrapperRef.value)) {
       return;
     }
     this.setFocus();
@@ -302,7 +299,7 @@ class Input extends LitElement {
       return;
     }
     if (this.type === "file") {
-      this.files = this.childEl.files;
+      this.files = this.childRef.value.files;
     }
     this.setValue({
       nativeEvent,
@@ -341,7 +338,7 @@ class Input extends LitElement {
         origin: "user",
         value: parseNumberString(delocalizedValue)
       });
-      this.childNumberEl.value = this.displayedValue;
+      this.childNumberRef.value.value = this.displayedValue;
     } else {
       this.setValue({
         nativeEvent,
@@ -396,26 +393,26 @@ class Input extends LitElement {
       useGrouping: this.groupSeparator
     };
     if (event.key === numberStringFormatter.decimal) {
-      if (!this.value && !this.childNumberEl.value) {
+      if (!this.value && !this.childNumberRef.value.value) {
         return;
       }
-      if (this.value && this.childNumberEl.value.indexOf(numberStringFormatter.decimal) === -1) {
+      if (this.value && this.childNumberRef.value.value.indexOf(numberStringFormatter.decimal) === -1) {
         return;
       }
     }
     if (/[eE]/.test(event.key)) {
-      if (!this.value && !this.childNumberEl.value) {
+      if (!this.value && !this.childNumberRef.value.value) {
         return;
       }
-      if (this.value && !/[eE]/.test(this.childNumberEl.value)) {
+      if (this.value && !/[eE]/.test(this.childNumberRef.value.value)) {
         return;
       }
     }
     if (event.key === "-") {
-      if (!this.value && !this.childNumberEl.value) {
+      if (!this.value && !this.childNumberRef.value.value) {
         return;
       }
-      if (this.value && this.childNumberEl.value.split("-").length <= 2) {
+      if (this.value && this.childNumberRef.value.value.split("-").length <= 2) {
         return;
       }
     }
@@ -457,17 +454,10 @@ class Input extends LitElement {
   syncHiddenFormInput(input) {
     syncHiddenFormInput(this.type, this, input);
   }
-  setChildElRef(el) {
-    this.childEl = el;
-  }
-  setChildNumberElRef(el) {
-    this.childNumberEl = el;
-  }
   setInputValue(newInputValue) {
-    if (this.type === "number" && this.childNumberEl) {
-      this.childNumberEl.value = newInputValue;
-    } else if (this.childEl) {
-      this.childEl.value = newInputValue;
+    const target = this.type === "number" ? this.childNumberRef : this.childRef;
+    if (target.value) {
+      target.value.value = newInputValue;
     }
   }
   setPreviousEmittedValue(value) {
@@ -546,18 +536,21 @@ class Input extends LitElement {
     const autofocus = this.el.autofocus;
     const enterKeyHint = this.el.enterKeyHint;
     const inputMode = this.el.inputMode;
-    const localeNumberInput = this.type === "number" ? keyed("localized-input", html`<input accept=${this.accept ?? nothing} aria-errormessage=${IDS.validationMessage} .ariaInvalid=${this.status === "invalid"} .ariaLabel=${getLabelText(this)} autocomplete=${this.autocomplete ?? nothing} .autofocus=${autofocus} value=${this.defaultValue ?? nothing} .disabled=${this.disabled ? true : null} enterkeyhint=${enterKeyHint ?? nothing} inputmode=${inputMode ?? nothing} maxlength=${this.maxLength ?? nothing} minlength=${this.minLength ?? nothing} .multiple=${this.multiple} name=${nothing} @blur=${this.inputBlurHandler} @focus=${this.inputFocusHandler} @input=${this.inputNumberInputHandler} @keydown=${this.inputNumberKeyDownHandler} @keyup=${this.inputKeyUpHandler} pattern=${this.pattern ?? nothing} placeholder=${(this.placeholder || "") ?? nothing} .readOnly=${this.readOnly} .required=${this.required} type=text .value=${live(this.displayedValue ?? "")} ${ref(this.setChildNumberElRef)}>`) : null;
+    const localeNumberInput = this.type === "number" ? keyed("localized-input", html`<input accept=${this.accept ?? nothing} aria-errormessage=${IDS.validationMessage} .ariaInvalid=${this.status === "invalid"} .ariaLabel=${getLabelText(this)} autocomplete=${this.autocomplete ?? nothing} .autofocus=${autofocus} value=${this.defaultValue ?? nothing} .disabled=${this.disabled ? true : null} enterkeyhint=${enterKeyHint ?? nothing} inputmode=${inputMode ?? nothing} maxlength=${this.maxLength ?? nothing} minlength=${this.minLength ?? nothing} .multiple=${this.multiple} name=${nothing} @blur=${this.inputBlurHandler} @focus=${this.inputFocusHandler} @input=${this.inputNumberInputHandler} @keydown=${this.inputNumberKeyDownHandler} @keyup=${this.inputKeyUpHandler} pattern=${this.pattern ?? nothing} placeholder=${(this.placeholder || "") ?? nothing} .readOnly=${this.readOnly} .required=${this.required} type=text .value=${live(this.displayedValue ?? "")} ${ref(this.childNumberRef)}>`) : null;
     const DynamicHtmlTag = this.childElType === "input" ? literal`input` : literal`textarea`;
     const childEl = this.type !== "number" ? html$1`<${DynamicHtmlTag} accept=${this.accept ?? nothing} aria-errormessage=${IDS.validationMessage} .ariaInvalid=${this.status === "invalid"} .ariaLabel=${getLabelText(this)} autocomplete=${this.autocomplete ?? nothing} .autofocus=${autofocus} class=${safeClassMap({
       [CSS.editingEnabled]: this.editingEnabled,
       [CSS.inlineChild]: !!this.inlineEditableEl
-    })} .defaultValue=${this.defaultValue ?? ""} .disabled=${this.disabled ? true : null} enterkeyhint=${enterKeyHint ?? nothing} inputmode=${inputMode ?? nothing} max=${this.maxString ?? nothing} maxlength=${this.maxLength ?? nothing} min=${this.minString ?? nothing} minlength=${this.minLength ?? nothing} .multiple=${this.multiple} name=${this.name ?? nothing} @blur=${this.inputBlurHandler} @focus=${this.inputFocusHandler} @input=${this.inputInputHandler} @keydown=${this.inputKeyDownHandler} @keyup=${this.inputKeyUpHandler} pattern=${this.pattern ?? nothing} placeholder=${(this.placeholder || "") ?? nothing} .readOnly=${this.readOnly} .required=${this.required ? true : null} spellcheck=${this.el.spellcheck ?? nothing} step=${this.step ?? nothing} tabindex=${(this.disabled || this.inlineEditableEl && !this.editingEnabled ? -1 : null) ?? nothing} type=${this.type ?? nothing} .value=${live(this.value ?? "")} ${ref(this.setChildElRef)}></${DynamicHtmlTag}>` : null;
+    })} .defaultValue=${this.defaultValue ?? ""} .disabled=${this.disabled ? true : null} enterkeyhint=${enterKeyHint ?? nothing} inputmode=${inputMode ?? nothing} max=${this.maxString ?? nothing} maxlength=${this.maxLength ?? nothing} min=${this.minString ?? nothing} minlength=${this.minLength ?? nothing} .multiple=${this.multiple} name=${this.name ?? nothing} @blur=${this.inputBlurHandler} @focus=${this.inputFocusHandler} @input=${this.inputInputHandler} @keydown=${this.inputKeyDownHandler} @keyup=${this.inputKeyUpHandler} pattern=${this.pattern ?? nothing} placeholder=${(this.placeholder || "") ?? nothing} .readOnly=${this.readOnly} .required=${this.required ? true : null} spellcheck=${this.el.spellcheck ?? nothing} step=${this.step ?? nothing} tabindex=${(this.disabled || this.inlineEditableEl && !this.editingEnabled ? -1 : null) ?? nothing} type=${this.type ?? nothing} .value=${live(this.value ?? "")} ${ref(
+      this.childRef
+      /* using unknown to workaround Lumina dynamic ref type issue */
+    )}></${DynamicHtmlTag}>` : null;
     return InteractiveContainer({ disabled: this.disabled, children: html`${this.labelText && InternalLabel({ labelText: this.labelText, onClick: this.onLabelClick, required: this.required, tooltipText: this.messages.required }) || ""}<div class=${safeClassMap({
       [CSS.inputWrapper]: true,
       [CSS_UTILITY.rtl]: dir === "rtl",
       [CSS.hasSuffix]: this.suffixText,
       [CSS.hasPrefix]: this.prefixText
-    })} ${ref(this.inputWrapperEl)}>${this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly ? numberButtonsHorizontalDown : null}${this.prefixText ? prefixText : null}<div class=${safeClassMap(CSS.wrapper)}>${localeNumberInput}${childEl}${this.isClearable ? inputClearButton : null}${this.requestedIcon ? iconEl : null}${this.loading ? loader : null}</div><div class=${safeClassMap(CSS.actionWrapper)} ${ref(this.actionWrapperEl)}><slot name=${SLOTS.action}></slot></div>${this.type === "number" && this.numberButtonType === "vertical" && !this.readOnly ? numberButtonsVertical : null}${this.suffixText ? suffixText : null}${this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly ? numberButtonsHorizontalUp : null}${HiddenFormInputSlot({ component: this })}</div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
+    })} ${ref(this.inputWrapperRef)}>${this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly ? numberButtonsHorizontalDown : null}${this.prefixText ? prefixText : null}<div class=${safeClassMap(CSS.wrapper)}>${localeNumberInput}${childEl}${this.isClearable ? inputClearButton : null}${this.requestedIcon ? iconEl : null}${this.loading ? loader : null}</div><div class=${safeClassMap(CSS.actionWrapper)} ${ref(this.actionWrapperRef)}><slot name=${SLOTS.action}></slot></div>${this.type === "number" && this.numberButtonType === "vertical" && !this.readOnly ? numberButtonsVertical : null}${this.suffixText ? suffixText : null}${this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly ? numberButtonsHorizontalUp : null}${HiddenFormInputSlot({ component: this })}</div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
   }
 }
 customElement("calcite-input", Input);

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

@@ -1,9 +1,9 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.3.0-next.99 */
+v3.3.0 */
 import { c as customElement } from "../../chunks/runtime.js";
-import { ref } from "lit/directives/ref.js";
 import { css, isServer, nothing, html } from "lit";
+import { createRef, ref } from "lit-html/directives/ref.js";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
 import { u as useFocusTrap } from "../../chunks/useFocusTrap.js";
 import { d as datePartsFromISO, a as dateFromISO, b as dateFromRange, c as dateToISO, e as datePartsFromLocalizedString, f as dateFromLocalizedString, i as inRange } from "../../chunks/date.js";
@@ -22,7 +22,7 @@ import { V as Validation } from "../../chunks/Validation.js";
 import { s as syncHiddenFormInput } from "../../chunks/input.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host{--calcite-icon-size: 1rem;--calcite-spacing-eighth: .125rem;--calcite-spacing-quarter: .25rem;--calcite-spacing-half: .5rem;--calcite-spacing-three-quarters: .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;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:inline-block;width:100%;overflow:visible;vertical-align:top;box-shadow:var(--calcite-input-date-picker-shadow, var(--calcite-shadow-none))}:host .menu-container .calcite-floating-ui-anim{position:relative;transition-duration:var(--calcite-floating-ui-transition);transition-property:inset-block-start,left,opacity,display;transition-behavior:allow-discrete;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}:host .menu-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}:host .menu-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}:host .menu-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}:host .menu-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}:host .menu-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{:host .menu-container[data-placement] .calcite-floating-ui-anim--active{opacity:0}}:host([scale=s]){--calcite-internal-date-picker-toggle-spacing: var(--calcite-spacing-sm);--calcite-internal-input-text-input-padding-inline-end: calc(var(--calcite-internal-date-picker-toggle-spacing) + var(--calcite-spacing-lg))}:host([scale=m]){--calcite-internal-date-picker-toggle-spacing: var(--calcite-spacing-md);--calcite-internal-input-text-input-padding-inline-end: calc(var(--calcite-internal-date-picker-toggle-spacing) + var(--calcite-spacing-xxl))}:host([scale=l]){--calcite-internal-date-picker-toggle-spacing: var(--calcite-spacing-lg);--calcite-internal-input-text-input-padding-inline-end: calc(var(--calcite-internal-date-picker-toggle-spacing) + var(--calcite-spacing-xxxl))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.calendar-wrapper{box-shadow:var(--calcite-input-date-picker-calendar-shadow, var(--calcite-shadow-none));transform:translateZ(0)}.input-wrapper{position:relative}.input-wrapper .chevron-icon{color:var(--calcite-input-date-picker-actions-icon-color, var(--calcite-color-text-3))}.input-wrapper:focus-within .chevron-icon,.input-wrapper:active .chevron-icon,.input-wrapper:hover .chevron-icon{color:var(--calcite-input-date-picker-actions-icon-color-hover, var(--calcite-color-text-1))}.input-wrapper:focus-within~.input-wrapper .chevron-icon,.input-wrapper:active~.input-wrapper .chevron-icon,.input-wrapper:hover~.input-wrapper .chevron-icon{color:var(--calcite-input-date-picker-actions-icon-color-hover, var(--calcite-color-text-1))}.toggle-icon{position:absolute;display:flex;cursor:pointer;align-items:center;inset-inline-end:0;inset-block:0;padding-inline:var(--calcite-internal-date-picker-toggle-spacing)}:host([range]) .container{display:flex}:host([range]) .input-container{display:flex;flex:1 1 auto}:host([range]) .input-wrapper{flex:1 1 auto}.divider-container{display:flex;align-items:stretch;border-width:1px;border-left-width:0px;border-right-width:0px;border-style:solid;background-color:var(--calcite-input-date-picker-background-color, var(--calcite-color-foreground-1));border-color:var(--calcite-input-date-picker-border-color, var(--calcite-color-border-input))}:host([layout=horizontal]) .divider-container{inline-size:var(--calcite-spacing-px)}.divider{display:inline-block;margin-block:var(--calcite-spacing-xxs);background-color:var(--calcite-input-date-picker-divider-color, var(--calcite-color-border-2));inline-size:var(--calcite-spacing-px)}:host([layout=vertical]) .divider-container{height:1px;width:100%;border-top-width:0px;border-bottom-width:0px;border-left-width:1px;border-right-width:0px;padding-inline:var(--calcite-spacing-md)}:host([layout=vertical]) .divider-container .divider{margin-top:0;margin-bottom:0;height:1px;width:100%}:host([range][layout=vertical]) .input-wrapper{width:100%}:host([range][layout=vertical]) .input-container{flex-direction:column;align-items:flex-start}.menu-container{--calcite-floating-ui-z-index: var(--calcite-z-index-dropdown);inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0;z-index:var(--calcite-floating-ui-z-index)}@starting-style{.menu-container{opacity:0;inset-block-start:0;left:0}}.menu-container .calcite-floating-ui-anim{position:relative;transition-duration:var(--calcite-floating-ui-transition);transition-property:inset-block-start,left,opacity,display;transition-behavior:allow-discrete;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.menu-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.menu-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.menu-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}.menu-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.menu-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{.menu-container[data-placement] .calcite-floating-ui-anim--active{opacity:0}}.input .calcite-input__wrapper{margin-top:0}.vertical-chevron-container{display:flex;align-items:center;border-width:1px;border-left-width:0px;border-style:solid;padding-inline:var(--calcite-spacing-md);background-color:var(--calcite-input-date-picker-background-color, var(--calcite-color-foreground-1));border-color:var(--calcite-input-date-picker-border-color, var(--calcite-color-border-input))}.vertical-chevron-container calcite-icon{color:var(--calcite-input-date-picker-actions-icon-color, var(--calcite-color-text-3))}.vertical-chevron-container calcite-icon:hover{color:var(--calcite-input-date-picker-actions-icon-color-hover, var(--calcite-color-text-1))}:host([range][layout=vertical][scale=s]) .vertical-chevron-container,:host([range][layout=vertical][scale=s]) .divider-container{padding-inline:var(--calcite-spacing-sm)}:host([range][layout=vertical][scale=l]) .vertical-chevron-container,:host([range][layout=vertical][scale=l]) .divider-container{padding-inline:var(--calcite-spacing-lg)}.container:focus-within .vertical-chevron-container calcite-icon,.container:active .vertical-chevron-container calcite-icon,.container:hover .vertical-chevron-container calcite-icon{color:var(--calcite-input-date-picker-actions-icon-color-hover, var(--calcite-color-text-1))}.input{--calcite-input-background-color: var(--calcite-input-date-picker-background-color);--calcite-input-border-color: var(--calcite-input-date-picker-border-color);--calcite-input-corner-radius: var(--calcite-input-date-picker-corner-radius);--calcite-input-shadow: var(--calcite-input-date-picker-shadow);--calcite-input-icon-color: var(--calcite-input-date-picker-icon-color);--calcite-input-icon-color-hover: var(--calcite-input-date-picker-icon-color-hover);--calcite-input-text-color: var(--calcite-input-date-picker-text-color);--calcite-input-placeholder-text-color: var(--calcite-input-date-picker-placeholder-text-color)}calcite-date-picker{--calcite-date-picker-border-color: var(--calcite-input-date-picker-calendar-border-color);--calcite-date-picker-corner-radius: var(--calcite-input-date-picker-calendar-corner-radius);--calcite-date-picker-range-calendar-divider-color: var(--calcite-input-date-picker-calendar-range-divider-color);--calcite-date-picker-week-header-text-color: var(--calcite-input-date-picker-calendar-text-color);--calcite-date-picker-header-action-background-color: var( --calcite-input-date-picker-calendar-actions-background-color );--calcite-date-picker-header-action-background-color-hover: var( --calcite-input-date-picker-calendar-actions-background-color-hover );--calcite-date-picker-header-action-background-color-press: var( --calcite-input-date-picker-calendar-actions-background-color-press );--calcite-date-picker-header-action-text-color: var(--calcite-input-date-picker-calendar-actions-text-color);--calcite-date-picker-header-action-text-color-press: var( --calcite-input-date-picker-calendar-actions-text-color-press );--calcite-date-picker-year-text-color: var(--calcite-input-date-picker-calendar-text-color);--calcite-date-picker-month-select-text-color: var(--calcite-input-date-picker-calendar-month-select-text-color);--calcite-date-picker-month-select-icon-color: var(--calcite-input-date-picker-calendar-icon-color);--calcite-date-picker-month-select-icon-color-hover: var(--calcite-input-date-picker-calendar-icon-color-hover);--calcite-date-picker-day-background-color: var(--calcite-input-date-picker-calendar-day-background-color);--calcite-date-picker-day-background-color-hover: var( --calcite-input-date-picker-calendar-day-background-color-hover );--calcite-date-picker-day-background-color-selected: var( --calcite-input-date-picker-calendar-selected-background-color );--calcite-date-picker-day-text-color: var(--calcite-input-date-picker-calendar-day-text-color);--calcite-date-picker-day-text-color-hover: var(--calcite-input-date-picker-calendar-day-text-color-hover);--calcite-date-picker-day-text-color-selected: var(--calcite-input-date-picker-calendar-day-text-color-selected);--calcite-date-picker-current-day-text-color: var(--calcite-input-date-picker-calendar-day-current-text-color);--calcite-date-picker-day-range-text-color: var(--calcite-input-date-picker-calendar-day-range-text-color);--calcite-date-picker-day-range-background-color: var(--calcite-input-date-picker-calendar-selected-background-color);--calcite-date-picker-day-outside-range-background-color-hover: var( --calcite-input-date-picker-calendar-day-outside-range-background-color-hover );--calcite-date-picker-day-outside-range-text-color-hover: var( --calcite-input-date-picker-calendar-day-outside-range-text-color-hover )}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::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;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host{--calcite-icon-size: 1rem;--calcite-spacing-eighth: .125rem;--calcite-spacing-quarter: .25rem;--calcite-spacing-half: .5rem;--calcite-spacing-three-quarters: .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;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host .menu-container .calcite-floating-ui-anim{position:relative;transition-duration:var(--calcite-floating-ui-transition);transition-property:inset-block-start,left,opacity,display;transition-behavior:allow-discrete;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}:host .menu-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}:host .menu-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}:host .menu-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}:host .menu-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}:host .menu-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{:host .menu-container[data-placement] .calcite-floating-ui-anim--active{opacity:0}}:host{position:relative;display:inline-block;width:100%;overflow:visible;vertical-align:top;box-shadow:var(--calcite-input-date-picker-shadow, var(--calcite-shadow-none))}:host([scale=s]){--calcite-internal-date-picker-toggle-spacing: var(--calcite-spacing-sm);--calcite-internal-input-text-input-padding-inline-end: calc(var(--calcite-internal-date-picker-toggle-spacing) + var(--calcite-spacing-lg))}:host([scale=m]){--calcite-internal-date-picker-toggle-spacing: var(--calcite-spacing-md);--calcite-internal-input-text-input-padding-inline-end: calc(var(--calcite-internal-date-picker-toggle-spacing) + var(--calcite-spacing-xxl))}:host([scale=l]){--calcite-internal-date-picker-toggle-spacing: var(--calcite-spacing-lg);--calcite-internal-input-text-input-padding-inline-end: calc(var(--calcite-internal-date-picker-toggle-spacing) + var(--calcite-spacing-xxxl))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.calendar-wrapper{box-shadow:var(--calcite-input-date-picker-calendar-shadow, var(--calcite-shadow-none));transform:translateZ(0)}.input-wrapper{position:relative}.input-wrapper .chevron-icon{color:var(--calcite-input-date-picker-actions-icon-color, var(--calcite-color-text-3))}.input-wrapper:focus-within .chevron-icon,.input-wrapper:active .chevron-icon,.input-wrapper:hover .chevron-icon{color:var(--calcite-input-date-picker-actions-icon-color-hover, var(--calcite-color-text-1))}.input-wrapper:focus-within~.input-wrapper .chevron-icon,.input-wrapper:active~.input-wrapper .chevron-icon,.input-wrapper:hover~.input-wrapper .chevron-icon{color:var(--calcite-input-date-picker-actions-icon-color-hover, var(--calcite-color-text-1))}.toggle-icon{position:absolute;display:flex;cursor:pointer;align-items:center;inset-inline-end:0;inset-block:0;padding-inline:var(--calcite-internal-date-picker-toggle-spacing)}:host([range]) .container{display:flex}:host([range]) .input-container{display:flex;flex:1 1 auto}:host([range]) .input-wrapper{flex:1 1 auto}.divider-container{display:flex;align-items:stretch;border-width:1px;border-left-width:0px;border-right-width:0px;border-style:solid;background-color:var(--calcite-input-date-picker-background-color, var(--calcite-color-foreground-1));border-color:var(--calcite-input-date-picker-border-color, var(--calcite-color-border-input))}:host([layout=horizontal]) .divider-container{inline-size:var(--calcite-spacing-px)}.divider{display:inline-block;margin-block:var(--calcite-spacing-xxs);background-color:var(--calcite-input-date-picker-divider-color, var(--calcite-color-border-2));inline-size:var(--calcite-spacing-px)}:host([layout=vertical]) .divider-container{height:1px;width:100%;border-top-width:0px;border-bottom-width:0px;border-left-width:1px;border-right-width:0px;padding-inline:var(--calcite-spacing-md)}:host([layout=vertical]) .divider-container .divider{margin-top:0;margin-bottom:0;height:1px;width:100%}:host([range][layout=vertical]) .input-wrapper{width:100%}:host([range][layout=vertical]) .input-container{flex-direction:column;align-items:flex-start}.menu-container{--calcite-floating-ui-z-index: var(--calcite-z-index-dropdown);inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0;z-index:var(--calcite-floating-ui-z-index)}@starting-style{.menu-container{opacity:0;inset-block-start:0;left:0}}.menu-container .calcite-floating-ui-anim{position:relative;transition-duration:var(--calcite-floating-ui-transition);transition-property:inset-block-start,left,opacity,display;transition-behavior:allow-discrete;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.menu-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.menu-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.menu-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}.menu-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.menu-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{.menu-container[data-placement] .calcite-floating-ui-anim--active{opacity:0}}.input .calcite-input__wrapper{margin-top:0}.vertical-chevron-container{display:flex;align-items:center;border-width:1px;border-left-width:0px;border-style:solid;padding-inline:var(--calcite-spacing-md);background-color:var(--calcite-input-date-picker-background-color, var(--calcite-color-foreground-1));border-color:var(--calcite-input-date-picker-border-color, var(--calcite-color-border-input))}.vertical-chevron-container calcite-icon{color:var(--calcite-input-date-picker-actions-icon-color, var(--calcite-color-text-3))}.vertical-chevron-container calcite-icon:hover{color:var(--calcite-input-date-picker-actions-icon-color-hover, var(--calcite-color-text-1))}:host([range][layout=vertical][scale=s]) .vertical-chevron-container,:host([range][layout=vertical][scale=s]) .divider-container{padding-inline:var(--calcite-spacing-sm)}:host([range][layout=vertical][scale=l]) .vertical-chevron-container,:host([range][layout=vertical][scale=l]) .divider-container{padding-inline:var(--calcite-spacing-lg)}.container:focus-within .vertical-chevron-container calcite-icon,.container:active .vertical-chevron-container calcite-icon,.container:hover .vertical-chevron-container calcite-icon{color:var(--calcite-input-date-picker-actions-icon-color-hover, var(--calcite-color-text-1))}.input{--calcite-input-background-color: var(--calcite-input-date-picker-background-color);--calcite-input-border-color: var(--calcite-input-date-picker-border-color);--calcite-input-corner-radius: var(--calcite-input-date-picker-corner-radius);--calcite-input-shadow: var(--calcite-input-date-picker-shadow);--calcite-input-icon-color: var(--calcite-input-date-picker-icon-color);--calcite-input-icon-color-hover: var(--calcite-input-date-picker-icon-color-hover);--calcite-input-text-color: var(--calcite-input-date-picker-text-color);--calcite-input-placeholder-text-color: var(--calcite-input-date-picker-placeholder-text-color)}calcite-date-picker{--calcite-date-picker-border-color: var(--calcite-input-date-picker-calendar-border-color);--calcite-date-picker-corner-radius: var(--calcite-input-date-picker-calendar-corner-radius);--calcite-date-picker-range-calendar-divider-color: var(--calcite-input-date-picker-calendar-range-divider-color);--calcite-date-picker-week-header-text-color: var(--calcite-input-date-picker-calendar-text-color);--calcite-date-picker-header-action-background-color: var( --calcite-input-date-picker-calendar-actions-background-color );--calcite-date-picker-header-action-background-color-hover: var( --calcite-input-date-picker-calendar-actions-background-color-hover );--calcite-date-picker-header-action-background-color-press: var( --calcite-input-date-picker-calendar-actions-background-color-press );--calcite-date-picker-header-action-text-color: var(--calcite-input-date-picker-calendar-actions-text-color);--calcite-date-picker-header-action-text-color-press: var( --calcite-input-date-picker-calendar-actions-text-color-press );--calcite-date-picker-year-text-color: var(--calcite-input-date-picker-calendar-text-color);--calcite-date-picker-month-select-text-color: var(--calcite-input-date-picker-calendar-month-select-text-color);--calcite-date-picker-month-select-icon-color: var(--calcite-input-date-picker-calendar-icon-color);--calcite-date-picker-month-select-icon-color-hover: var(--calcite-input-date-picker-calendar-icon-color-hover);--calcite-date-picker-day-background-color: var(--calcite-input-date-picker-calendar-day-background-color);--calcite-date-picker-day-background-color-hover: var( --calcite-input-date-picker-calendar-day-background-color-hover );--calcite-date-picker-day-background-color-selected: var( --calcite-input-date-picker-calendar-selected-background-color );--calcite-date-picker-day-text-color: var(--calcite-input-date-picker-calendar-day-text-color);--calcite-date-picker-day-text-color-hover: var(--calcite-input-date-picker-calendar-day-text-color-hover);--calcite-date-picker-day-text-color-selected: var(--calcite-input-date-picker-calendar-day-text-color-selected);--calcite-date-picker-current-day-text-color: var(--calcite-input-date-picker-calendar-day-current-text-color);--calcite-date-picker-day-range-text-color: var(--calcite-input-date-picker-calendar-day-range-text-color);--calcite-date-picker-day-range-background-color: var(--calcite-input-date-picker-calendar-selected-background-color);--calcite-date-picker-day-outside-range-background-color-hover: var( --calcite-input-date-picker-calendar-day-outside-range-background-color-hover );--calcite-date-picker-day-outside-range-text-color-hover: var( --calcite-input-date-picker-calendar-day-outside-range-text-color-hover )}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::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;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}:host([hidden]){display:none}[hidden]{display:none}`;
 const CSS = {
   assistiveText: "assistive-text",
   calendarWrapper: "calendar-wrapper",
@@ -73,6 +73,7 @@ class InputDatePicker extends LitElement {
     super();
     this.commonDateSeparators = [".", "-", "/"];
     this.dialogId = IDS.dialog(guid());
+    this.endInputRef = createRef();
     this.focusOnOpen = false;
     this.focusTrap = useFocusTrap({
       triggerProp: "open",
@@ -96,6 +97,7 @@ class InputDatePicker extends LitElement {
     this.transitionProp = "opacity";
     this.placeholderTextId = IDS.placeholder(guid());
     this.rangeStartValueChangedByUser = false;
+    this.startInputRef = createRef();
     this.userChangedValue = false;
     this._value = "";
     this.valueAsDateChangedExternally = false;
@@ -152,7 +154,7 @@ class InputDatePicker extends LitElement {
   }
   set value(value) {
     const valueChanged = value !== this._value;
-    const invalidValueCleared = value === "" && (this.startInput?.value !== "" || this.endInput?.value !== "");
+    const invalidValueCleared = value === "" && (this.startInputRef.value?.value !== "" || this.endInputRef.value?.value !== "");
     if (valueChanged || invalidValueCleared) {
       this._value = value;
       this.valueWatcher(value);
@@ -170,9 +172,7 @@ class InputDatePicker extends LitElement {
     }, delayed);
   }
   async setFocus(options) {
-    return this.focusSetter(() => {
-      return this.el;
-    }, options);
+    return this.focusSetter(() => this.el, options);
   }
   connectedCallback() {
     super.connectedCallback();
@@ -351,14 +351,14 @@ class InputDatePicker extends LitElement {
     this.currentOpenInput = this.focusedInput;
   }
   onInputWrapperClick(event) {
-    const { range, endInput, startInput, currentOpenInput } = this;
+    const { range, endInputRef, startInputRef, currentOpenInput } = this;
     const currentTarget = event.currentTarget;
     const position = currentTarget.getAttribute("data-position");
     const path = event.composedPath();
     const wasToggleClicked = path.find((el) => el.classList?.contains(CSS.toggleIcon));
     if (wasToggleClicked) {
-      const targetInput = position === "start" ? startInput : endInput;
-      targetInput.setFocus();
+      const targetInput = position === "start" ? startInputRef : endInputRef;
+      targetInput.value.setFocus();
     }
     if (!range || !this.open || currentOpenInput === position) {
       this.open = !this.open;
@@ -397,20 +397,13 @@ class InputDatePicker extends LitElement {
   syncHiddenFormInput(input) {
     syncHiddenFormInput("date", this, input);
   }
-  setStartInput(el) {
-    this.startInput = el;
-  }
-  setEndInput(el) {
-    this.endInput = el;
-  }
   blurHandler() {
     this.open = false;
   }
   commitValue() {
     const { focusedInput, value } = this;
-    const focusedInputName = `${focusedInput}Input`;
-    const focusedInputValue = this[focusedInputName].value;
-    const date = dateFromLocalizedString(focusedInputValue, this.localeData);
+    const focusedInputRef = this.getInputRef(focusedInput);
+    const date = dateFromLocalizedString(focusedInputRef.value.value, this.localeData);
     const dateAsISO = dateToISO(date);
     const valueIsArray = Array.isArray(value);
     if (this.range) {
@@ -458,9 +451,9 @@ class InputDatePicker extends LitElement {
       event.preventDefault();
       this.commitValue();
       if (this.shouldFocusRangeEnd()) {
-        this.endInput?.setFocus();
+        this.endInputRef.value?.setFocus();
       } else if (this.shouldFocusRangeStart()) {
-        this.startInput?.setFocus();
+        this.startInputRef.value?.setFocus();
       }
       if (submitForm(this)) {
         this.restoreInputFocus(true);
@@ -524,12 +517,12 @@ class InputDatePicker extends LitElement {
   shouldFocusRangeStart() {
     const startValue = this.value[0];
     const endValue = this.value[1];
-    return !!(endValue && !startValue && this.focusedInput === "end" && this.startInput);
+    return !!(endValue && !startValue && this.focusedInput === "end" && this.startInputRef);
   }
   shouldFocusRangeEnd() {
     const startValue = this.value[0];
     const endValue = this.value[1];
-    return !!(startValue && !endValue && this.focusedInput === "start" && this.endInput);
+    return !!(startValue && !endValue && this.focusedInput === "start" && this.endInputRef);
   }
   handleDateRangeChange(event) {
     if (!this.range) {
@@ -543,7 +536,7 @@ class InputDatePicker extends LitElement {
   }
   restoreInputFocus(isDatePickerClosed = false) {
     if (!this.range) {
-      this.startInput.setFocus();
+      this.startInputRef.value.setFocus();
       this.open = false;
       return;
     }
@@ -568,12 +561,15 @@ class InputDatePicker extends LitElement {
     this.setInputValue((date && this.dateTimeFormat.format(date)) ?? "", "start");
     this.setInputValue((this.range && endDate && this.dateTimeFormat.format(endDate)) ?? "", "end");
   }
+  getInputRef(input = "start") {
+    return input === "start" ? this.startInputRef : this.endInputRef;
+  }
   setInputValue(newValue, input = "start") {
-    const inputEl = this[`${input}Input`];
-    if (!inputEl) {
+    const inputRef = this.getInputRef(input);
+    if (!inputRef.value) {
       return;
     }
-    inputEl.value = newValue;
+    inputRef.value.value = newValue;
   }
   setRangeValue(valueAsDate) {
     if (!this.range) {
@@ -651,8 +647,8 @@ class InputDatePicker extends LitElement {
     return `${normalizedYear}-${month}-${day}`;
   }
   focusInput() {
-    const focusedInput = this.focusedInput === "start" ? this.startInput : this.endInput;
-    focusedInput.setFocus();
+    const focusedInput = this.focusedInput === "start" ? this.startInputRef : this.endInputRef;
+    focusedInput.value.setFocus();
   }
   render() {
     const { disabled, messages: { _lang: effectiveLocale }, messages, numberingSystem, readOnly } = this;
@@ -665,7 +661,7 @@ class InputDatePicker extends LitElement {
       [CSS.input]: true,
       [CSS.inputNoBottomBorder]: this.layout === "vertical" && this.range,
       [CSS.inputNoRightBorder]: this.range
-    })} .disabled=${disabled} .icon=${ICONS.calendar} .label=${this.range ? this.messages.startDate : this.messages.date} @calciteInputTextInput=${this.calciteInternalInputInputHandler} @calciteInternalInputTextBlur=${this.calciteInternalInputBlurHandler} @calciteInternalInputTextFocus=${this.startInputFocus} .placeholder=${this.localeData?.placeholder} .readOnly=${readOnly} role=combobox .scale=${this.scale} .status=${this.status} ${ref(this.setStartInput)}></calcite-input-text>${!this.readOnly && !this.range && this.renderToggleIcon(this.open && this.focusedInput === "start") || ""}<span aria-hidden=true class=${safeClassMap(CSS.assistiveText)} id=${this.placeholderTextId ?? nothing}>${messages.dateFormat.replace("{format}", this.localeData?.placeholder)}</span></div><div .ariaHidden=${!this.open} .ariaLabel=${messages.chooseDate} aria-live=polite aria-modal=true class=${safeClassMap(CSS.menu)} id=${this.dialogId ?? nothing} role=dialog ${ref(this.setFloatingEl)}><div class=${safeClassMap({
+    })} .disabled=${disabled} .icon=${ICONS.calendar} .label=${this.range ? this.messages.startDate : this.messages.date} @calciteInputTextInput=${this.calciteInternalInputInputHandler} @calciteInternalInputTextBlur=${this.calciteInternalInputBlurHandler} @calciteInternalInputTextFocus=${this.startInputFocus} .placeholder=${this.localeData?.placeholder} .readOnly=${readOnly} role=combobox .scale=${this.scale} .status=${this.status} ${ref(this.startInputRef)}></calcite-input-text>${!this.readOnly && !this.range && this.renderToggleIcon(this.open && this.focusedInput === "start") || ""}<span aria-hidden=true class=${safeClassMap(CSS.assistiveText)} id=${this.placeholderTextId ?? nothing}>${messages.dateFormat.replace("{format}", this.localeData?.placeholder)}</span></div><div .ariaHidden=${!this.open} .ariaLabel=${messages.chooseDate} aria-live=polite aria-modal=true class=${safeClassMap(CSS.menu)} id=${this.dialogId ?? nothing} role=dialog ${ref(this.setFloatingEl)}><div class=${safeClassMap({
       [CSS.calendarWrapper]: true,
       [FloatingCSS.animation]: true,
       [FloatingCSS.animationActive]: this.open
@@ -674,7 +670,7 @@ class InputDatePicker extends LitElement {
       [CSS.inputNoTopBorder]: this.layout === "vertical" && this.range,
       [CSS.inputNoLeftBorder]: this.layout === "horizontal" && this.range,
       [CSS.inputNoRightBorder]: this.layout === "vertical" && this.range
-    })} .disabled=${disabled} .icon=${ICONS.calendar} .label=${this.messages.endDate} @calciteInputTextInput=${this.calciteInternalInputInputHandler} @calciteInternalInputTextBlur=${this.calciteInternalInputBlurHandler} @calciteInternalInputTextFocus=${this.endInputFocus} .placeholder=${this.localeData?.placeholder} .readOnly=${readOnly} role=combobox .scale=${this.scale} .status=${this.status} ${ref(this.setEndInput)}></calcite-input-text>${!this.readOnly && this.layout === "horizontal" && this.renderToggleIcon(this.open) || ""}</div>` || ""}</div>${this.range && this.layout === "vertical" && html`<div class=${safeClassMap(CSS.verticalChevronContainer)}><calcite-icon .icon=${this.open ? ICONS.chevronUp : ICONS.chevronDown} .scale=${getIconScale(this.scale)}></calcite-icon></div>` || ""}</div>${HiddenFormInputSlot({ component: this })}${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
+    })} .disabled=${disabled} .icon=${ICONS.calendar} .label=${this.messages.endDate} @calciteInputTextInput=${this.calciteInternalInputInputHandler} @calciteInternalInputTextBlur=${this.calciteInternalInputBlurHandler} @calciteInternalInputTextFocus=${this.endInputFocus} .placeholder=${this.localeData?.placeholder} .readOnly=${readOnly} role=combobox .scale=${this.scale} .status=${this.status} ${ref(this.endInputRef)}></calcite-input-text>${!this.readOnly && this.layout === "horizontal" && this.renderToggleIcon(this.open) || ""}</div>` || ""}</div>${this.range && this.layout === "vertical" && html`<div class=${safeClassMap(CSS.verticalChevronContainer)}><calcite-icon .icon=${this.open ? ICONS.chevronUp : ICONS.chevronDown} .scale=${getIconScale(this.scale)}></calcite-icon></div>` || ""}</div>${HiddenFormInputSlot({ component: this })}${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
   }
   renderToggleIcon(open) {
     return html`<span class=${safeClassMap(CSS.toggleIcon)} tabindex=-1><calcite-icon class=${safeClassMap(CSS.chevronIcon)} .icon=${open ? ICONS.chevronUp : ICONS.chevronDown} .scale=${getIconScale(this.scale)}></calcite-icon></span>`;

package/dist/components/calcite-input-message/customElement.js

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.3.0-next.99 */
+v3.3.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, stringOrBoolean, setAttribute, safeClassMap } from "@arcgis/lumina";