@esri/calcite-components 1.5.0-next.9 → 1.5.1-next.0

package/dist/collection/components/input/input.js

@@ -1,20 +1,20 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.9
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.1-next.0
  */
-import { h, Host } from "@stencil/core";
-import { getElementDir, getSlotted, isPrimaryPointerButton, setRequestedIcon } from "../../utils/dom";
-import { connectForm, disconnectForm, HiddenFormInputSlot, submitForm } from "../../utils/form";
-import { connectInteractive, disconnectInteractive, updateHostInteraction } from "../../utils/interactive";
+import { h, Host, } from "@stencil/core";
+import { getElementDir, getSlotted, isPrimaryPointerButton, setRequestedIcon, } from "../../utils/dom";
+import { connectForm, disconnectForm, HiddenFormInputSlot, submitForm, } from "../../utils/form";
+import { connectInteractive, disconnectInteractive, updateHostInteraction, } from "../../utils/interactive";
 import { numberKeys } from "../../utils/key";
 import { connectLabel, disconnectLabel, getLabelText } from "../../utils/label";
-import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
-import { connectLocalized, defaultNumberingSystem, disconnectLocalized, numberStringFormatter } from "../../utils/locale";
-import { BigDecimal, isValidNumber, parseNumberString, sanitizeNumberString } from "../../utils/number";
+import { componentFocusable, setComponentLoaded, setUpLoadableComponent, } from "../../utils/loadable";
+import { connectLocalized, disconnectLocalized, numberStringFormatter, } from "../../utils/locale";
+import { addLocalizedTrailingDecimalZeros, BigDecimal, isValidNumber, parseNumberString, sanitizeNumberString, } from "../../utils/number";
 import { createObserver } from "../../utils/observers";
 import { CSS_UTILITY } from "../../utils/resources";
-import { connectMessages, disconnectMessages, setUpMessages, updateMessages } from "../../utils/t9n";
+import { connectMessages, disconnectMessages, setUpMessages, updateMessages, } from "../../utils/t9n";
 import { CSS, INPUT_TYPE_ICONS, SLOTS } from "./resources";
 /**
  * @slot action - A slot for positioning a `calcite-button` next to the component.
@@ -50,7 +50,7 @@ export class Input {
         committing: true,
         nativeEvent,
         origin: "user",
-        value: ""
+        value: "",
       });
     };
     this.emitChangeIfUserModified = () => {
@@ -87,7 +87,7 @@ export class Input {
       this.setValue({
         nativeEvent,
         origin: "user",
-        value: nativeEvent.target.value
+        value: nativeEvent.target.value,
       });
     };
     this.inputKeyDownHandler = (event) => {
@@ -106,7 +106,7 @@ export class Input {
       numberStringFormatter.numberFormatOptions = {
         locale: this.effectiveLocale,
         numberingSystem: this.numberingSystem,
-        useGrouping: this.groupSeparator
+        useGrouping: this.groupSeparator,
       };
       const delocalizedValue = numberStringFormatter.delocalize(value);
       if (nativeEvent.inputType === "insertFromPaste") {
@@ -116,7 +116,7 @@ export class Input {
         this.setValue({
           nativeEvent,
           origin: "user",
-          value: parseNumberString(delocalizedValue)
+          value: parseNumberString(delocalizedValue),
         });
         this.childNumberEl.value = this.localizedValue;
       }
@@ -124,7 +124,7 @@ export class Input {
         this.setValue({
           nativeEvent,
           origin: "user",
-          value: delocalizedValue
+          value: delocalizedValue,
         });
       }
     };
@@ -150,7 +150,7 @@ export class Input {
         "Delete",
         "Enter",
         "Escape",
-        "Tab"
+        "Tab",
       ];
       if (event.altKey || event.ctrlKey || event.metaKey) {
         return;
@@ -165,7 +165,7 @@ export class Input {
       numberStringFormatter.numberFormatOptions = {
         locale: this.effectiveLocale,
         numberingSystem: this.numberingSystem,
-        useGrouping: this.groupSeparator
+        useGrouping: this.groupSeparator,
       };
       if (event.key === numberStringFormatter.decimal) {
         if (!this.value && !this.childNumberEl.value) {
@@ -230,7 +230,7 @@ export class Input {
       if (event.target.name === this.name) {
         this.setValue({
           value: event.target.value,
-          origin: "direct"
+          origin: "direct",
         });
       }
       event.stopPropagation();
@@ -256,7 +256,7 @@ export class Input {
     this.setPreviousValue = (value) => {
       this.previousValue = this.normalizeValue(value);
     };
-    this.setValue = ({ committing = false, nativeEvent, origin, previousValue, value }) => {
+    this.setValue = ({ committing = false, nativeEvent, origin, previousValue, value, }) => {
       this.setPreviousValue(previousValue ?? this.value);
       this.previousValueOrigin = origin;
       if (this.type === "number") {
@@ -264,21 +264,25 @@ export class Input {
           locale: this.effectiveLocale,
           numberingSystem: this.numberingSystem,
           useGrouping: this.groupSeparator,
-          signDisplay: "never"
+          signDisplay: "never",
         };
-        const sanitizedValue = sanitizeNumberString(
-        // no need to delocalize a string that ia already in latn numerals
-        (this.numberingSystem && this.numberingSystem !== "latn") ||
-          defaultNumberingSystem !== "latn"
-          ? numberStringFormatter.delocalize(value)
-          : value);
+        const isValueDeleted = this.previousValue?.length > value.length || this.value?.length > value.length;
+        const hasTrailingDecimalSeparator = value.charAt(value.length - 1) === ".";
+        const sanitizedValue = hasTrailingDecimalSeparator && isValueDeleted ? value : sanitizeNumberString(value);
         const newValue = value && !sanitizedValue
           ? isValidNumber(this.previousValue)
             ? this.previousValue
             : ""
           : sanitizedValue;
-        const newLocalizedValue = numberStringFormatter.localize(newValue);
-        this.localizedValue = newLocalizedValue;
+        let newLocalizedValue = numberStringFormatter.localize(newValue);
+        if (origin !== "connected" && !hasTrailingDecimalSeparator) {
+          newLocalizedValue = addLocalizedTrailingDecimalZeros(newLocalizedValue, newValue, numberStringFormatter);
+        }
+        // adds localized trailing decimal separator
+        this.localizedValue =
+          hasTrailingDecimalSeparator && isValueDeleted
+            ? `${newLocalizedValue}${numberStringFormatter.decimal}`
+            : newLocalizedValue;
         this.userChangedValue = origin === "user" && this.value !== newValue;
         // don't sanitize the start of negative/decimal numbers, but
         // don't set value to an invalid number
@@ -378,7 +382,7 @@ export class Input {
             ? isValidNumber(newValue)
               ? newValue
               : this.previousValue || ""
-            : newValue
+            : newValue,
       });
       this.warnAboutInvalidNumberValue(newValue);
     }
@@ -417,7 +421,7 @@ export class Input {
       this.warnAboutInvalidNumberValue(this.value);
       this.setValue({
         origin: "connected",
-        value: isValidNumber(this.value) ? this.value : ""
+        value: isValidNumber(this.value) ? this.value : "",
       });
     }
     this.mutationObserver?.observe(this.el, { childList: true });
@@ -448,7 +452,7 @@ export class Input {
     if (this.type === "number" && property === "value" && newValue && !isValidNumber(newValue)) {
       this.setValue({
         origin: "reset",
-        value: oldValue
+        value: oldValue,
       });
       return false;
     }
@@ -464,7 +468,7 @@ export class Input {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    await componentLoaded(this);
+    await componentFocusable(this);
     if (this.type === "number") {
       this.childNumberEl?.focus();
     }
@@ -481,17 +485,6 @@ export class Input {
       this.childEl?.select();
     }
   }
-  // TODO: refactor so we don't need to sync the internals in color-picker
-  // https://github.com/Esri/calcite-components/issues/6100
-  /** @internal */
-  async internalSyncChildElValue() {
-    if (this.type === "number") {
-      this.childNumberEl.value = this.value;
-    }
-    else {
-      this.childEl.value = this.value;
-    }
-  }
   onLabelClick() {
     this.setFocus();
   }
@@ -516,13 +509,13 @@ export class Input {
       committing: true,
       nativeEvent,
       origin: "user",
-      value: finalValue
+      value: finalValue,
     });
   }
   onFormReset() {
     this.setValue({
       origin: "reset",
-      value: this.defaultValue
+      value: this.defaultValue,
     });
   }
   syncHiddenFormInput(input) {
@@ -578,11 +571,11 @@ export class Input {
     const isHorizontalNumberButton = this.numberButtonType === "horizontal";
     const numberButtonsHorizontalUp = (h("button", { "aria-hidden": "true", class: {
         [CSS.numberButtonItem]: true,
-        [CSS.buttonItemHorizontal]: isHorizontalNumberButton
+        [CSS.buttonItemHorizontal]: isHorizontalNumberButton,
       }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onPointerDown: this.numberButtonPointerDownHandler, onPointerOut: this.numberButtonPointerUpAndOutHandler, onPointerUp: this.numberButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { icon: "chevron-up", scale: this.scale === "l" ? "m" : "s" })));
     const numberButtonsHorizontalDown = (h("button", { "aria-hidden": "true", class: {
         [CSS.numberButtonItem]: true,
-        [CSS.buttonItemHorizontal]: isHorizontalNumberButton
+        [CSS.buttonItemHorizontal]: isHorizontalNumberButton,
       }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.numberButtonPointerDownHandler, onPointerOut: this.numberButtonPointerUpAndOutHandler, onPointerUp: this.numberButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { icon: "chevron-down", scale: this.scale === "l" ? "m" : "s" })));
     const numberButtonsVertical = (h("div", { class: CSS.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
     const prefixText = h("div", { class: CSS.prefix }, this.prefixText);
@@ -594,11 +587,11 @@ export class Input {
       ? [
         h(this.childElType, { accept: this.accept, "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: this.autofocus ? true : null, class: {
             [CSS.editingEnabled]: this.editingEnabled,
-            [CSS.inlineChild]: !!this.inlineEditableEl
+            [CSS.inlineChild]: !!this.inlineEditableEl,
           }, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.enterKeyHint, inputMode: this.inputMode, max: this.maxString, maxLength: this.maxLength, min: this.minString, minLength: this.minLength, multiple: this.multiple, name: this.name, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler, onFocus: this.inputFocusHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeyDownHandler, onKeyUp: this.inputKeyUpHandler, pattern: this.pattern, placeholder: this.placeholder || "", readOnly: this.readOnly, required: this.required ? true : null, step: this.step, tabIndex: this.disabled || (this.inlineEditableEl && !this.editingEnabled) ? -1 : null, type: this.type, value: this.value,
           // eslint-disable-next-line react/jsx-sort-props
           ref: this.setChildElRef }),
-        this.isTextarea ? (h("div", { class: CSS.resizeIconWrapper }, h("calcite-icon", { icon: "chevron-down", scale: this.scale === "l" ? "m" : "s" }))) : null
+        this.isTextarea ? (h("div", { class: CSS.resizeIconWrapper }, h("calcite-icon", { icon: "chevron-down", scale: this.scale === "l" ? "m" : "s" }))) : null,
       ]
       : null;
     return (h(Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h("div", { class: { [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly
@@ -1517,25 +1510,6 @@ export class Input {
           "text": "Selects the text of the component's `value`.",
           "tags": []
         }
-      },
-      "internalSyncChildElValue": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": [{
-              "name": "internal",
-              "text": undefined
-            }]
-        }
       }
     };
   }

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.9
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.1-next.0
  */
 export const CSS = {
   loader: "loader",
@@ -17,7 +17,7 @@ export const CSS = {
   inputWrapper: "wrapper",
   actionWrapper: "action-wrapper",
   resizeIconWrapper: "resize-icon-wrapper",
-  numberButtonItem: "number-button-item"
+  numberButtonItem: "number-button-item",
 };
 export const INPUT_TYPE_ICONS = {
   tel: "phone",
@@ -25,8 +25,8 @@ export const INPUT_TYPE_ICONS = {
   email: "email-address",
   date: "calendar",
   time: "clock",
-  search: "search"
+  search: "search",
 };
 export const SLOTS = {
-  action: "action"
+  action: "action",
 };

package/dist/collection/components/input-date-picker/assets/input-date-picker/t9n/index.d.ts

@@ -1,3 +1,4 @@
 export type InputDatePickerMessages = {
   chooseDate: string;
+  dateFormat: string;
 };

package/dist/collection/components/input-date-picker/assets/input-date-picker/t9n/messages.json

@@ -1,3 +1,4 @@
 {
-  "chooseDate": "Choose date"
+  "chooseDate": "Choose date",
+  "dateFormat": "Date Format:"
 }

package/dist/collection/components/input-date-picker/assets/input-date-picker/t9n/messages_en.json

@@ -1,3 +1,4 @@
 {
-  "chooseDate": "Choose date"
+  "chooseDate": "Choose date",
+  "dateFormat": "Date Format:"
 }

package/dist/collection/components/input-date-picker/input-date-picker.css

@@ -1,105 +1,4 @@
 /* mixins & extensions */
-@keyframes in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-@keyframes in-down {
-  0% {
-    opacity: 0;
-    transform: translate3D(0, -5px, 0);
-  }
-  100% {
-    opacity: 1;
-    transform: translate3D(0, 0, 0);
-  }
-}
-@keyframes in-up {
-  0% {
-    opacity: 0;
-    transform: translate3D(0, 5px, 0);
-  }
-  100% {
-    opacity: 1;
-    transform: translate3D(0, 0, 0);
-  }
-}
-@keyframes in-right {
-  0% {
-    opacity: 0;
-    transform: translate3D(-5px, 0, 0);
-  }
-  100% {
-    opacity: 1;
-    transform: translate3D(0, 0, 0);
-  }
-}
-@keyframes in-left {
-  0% {
-    opacity: 0;
-    transform: translate3D(5px, 0, 0);
-  }
-  100% {
-    opacity: 1;
-    transform: translate3D(0, 0, 0);
-  }
-}
-@keyframes in-scale {
-  0% {
-    opacity: 0;
-    transform: scale3D(0.95, 0.95, 1);
-  }
-  100% {
-    opacity: 1;
-    transform: scale3D(1, 1, 1);
-  }
-}
-:root {
-  --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor));
-  --calcite-internal-duration-factor: var(--calcite-duration-factor, 1);
-  --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor));
-  --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor));
-  --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor));
-}
-
-.calcite-animate {
-  opacity: 0;
-  animation-fill-mode: both;
-  animation-duration: var(--calcite-animation-timing);
-}
-
-.calcite-animate__in {
-  animation-name: in;
-}
-
-.calcite-animate__in-down {
-  animation-name: in-down;
-}
-
-.calcite-animate__in-up {
-  animation-name: in-up;
-}
-
-.calcite-animate__in-right {
-  animation-name: in-right;
-}
-
-.calcite-animate__in-left {
-  animation-name: in-left;
-}
-
-.calcite-animate__in-scale {
-  animation-name: in-scale;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  :root {
-    --calcite-internal-duration-factor: 0.01;
-  }
-}
 /* helper to properly scale internal durations */
 /**
 * Currently only used in Checkbox.
@@ -120,15 +19,6 @@
   --calcite-footer-min-height: 3rem;
 }
 
-:root {
-  --calcite-floating-ui-transition: var(--calcite-animation-timing);
-  --calcite-floating-ui-z-index: var(--calcite-app-z-index-dropdown);
-}
-
-:host([hidden]) {
-  display: none;
-}
-
 :host([disabled]) {
   cursor: default;
   -webkit-user-select: none;
@@ -345,4 +235,24 @@
   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;
 }

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

@@ -1,23 +1,23 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.5.0-next.9
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v1.5.1-next.0
  */
-import { Build, h, Host } from "@stencil/core";
-import { dateFromISO, dateFromLocalizedString, dateFromRange, datePartsFromLocalizedString, dateToISO, inRange } from "../../utils/date";
+import { Build, h, Host, } from "@stencil/core";
+import { dateFromISO, dateFromLocalizedString, dateFromRange, datePartsFromLocalizedString, dateToISO, inRange, } from "../../utils/date";
 import { toAriaBoolean } from "../../utils/dom";
-import { connectFloatingUI, defaultMenuPlacement, disconnectFloatingUI, filterComputedPlacements, FloatingCSS, reposition } from "../../utils/floating-ui";
-import { connectForm, disconnectForm, HiddenFormInputSlot, submitForm } from "../../utils/form";
-import { connectInteractive, disconnectInteractive, updateHostInteraction } from "../../utils/interactive";
+import { connectFloatingUI, defaultMenuPlacement, disconnectFloatingUI, filterComputedPlacements, FloatingCSS, reposition, } from "../../utils/floating-ui";
+import { connectForm, disconnectForm, HiddenFormInputSlot, submitForm, } from "../../utils/form";
+import { connectInteractive, disconnectInteractive, updateHostInteraction, } from "../../utils/interactive";
 import { numberKeys } from "../../utils/key";
 import { connectLabel, disconnectLabel } from "../../utils/label";
-import { componentLoaded, setComponentLoaded, setUpLoadableComponent } from "../../utils/loadable";
-import { connectLocalized, disconnectLocalized, numberStringFormatter } from "../../utils/locale";
-import { connectOpenCloseComponent, disconnectOpenCloseComponent } from "../../utils/openCloseComponent";
+import { componentFocusable, setComponentLoaded, setUpLoadableComponent, } from "../../utils/loadable";
+import { connectLocalized, disconnectLocalized, numberStringFormatter, } from "../../utils/locale";
+import { onToggleOpenCloseComponent } from "../../utils/openCloseComponent";
 import { getLocaleData, getValueAsDateRange } from "../date-picker/utils";
 import { CSS } from "./resources";
 import { connectMessages, disconnectMessages, setUpMessages } from "../../utils/t9n";
-import { activateFocusTrap, connectFocusTrap, deactivateFocusTrap } from "../../utils/focusTrapComponent";
+import { activateFocusTrap, connectFocusTrap, deactivateFocusTrap, } from "../../utils/focusTrapComponent";
 import { guid } from "../../utils/guid";
 export class InputDatePicker {
   constructor() {
@@ -45,6 +45,7 @@ export class InputDatePicker {
     this.userChangedValue = false;
     this.openTransitionProp = "opacity";
     this.valueAsDateChangedExternally = false;
+    this.placeholderTextId = `calcite-input-date-picker-placeholder-${guid()}`;
     //--------------------------------------------------------------------------
     //
     //  Private Methods
@@ -67,7 +68,6 @@ export class InputDatePicker {
     };
     this.setTransitionEl = (el) => {
       this.transitionEl = el;
-      connectOpenCloseComponent(this);
     };
     this.setStartInput = (el) => {
       this.startInput = el;
@@ -137,8 +137,8 @@ export class InputDatePicker {
         focusTrapEl: el,
         focusTrapOptions: {
           initialFocus: false,
-          setReturnFocus: false
-        }
+          setReturnFocus: false,
+        },
       });
     };
     /**
@@ -327,6 +327,7 @@ export class InputDatePicker {
     }
   }
   openHandler(value) {
+    onToggleOpenCloseComponent(this);
     if (this.disabled || this.readOnly) {
       this.open = false;
       return;
@@ -356,7 +357,7 @@ export class InputDatePicker {
   // --------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    await componentLoaded(this);
+    await componentFocusable(this);
     this.el.focus();
   }
   /**
@@ -372,7 +373,7 @@ export class InputDatePicker {
       overlayPositioning,
       placement,
       flipPlacements: filteredFlipPlacements,
-      type: "menu"
+      type: "menu",
     }, delayed);
   }
   // --------------------------------------------------------------------------
@@ -408,15 +409,17 @@ export class InputDatePicker {
     }
     connectLabel(this);
     connectForm(this);
-    connectOpenCloseComponent(this);
     connectMessages(this);
     this.setFilteredPlacements();
     this.reposition(true);
     numberStringFormatter.numberFormatOptions = {
       numberingSystem: this.numberingSystem,
       locale: this.effectiveLocale,
-      useGrouping: false
+      useGrouping: false,
     };
+    if (this.open) {
+      onToggleOpenCloseComponent(this);
+    }
   }
   async componentWillLoad() {
     setUpLoadableComponent(this);
@@ -435,7 +438,6 @@ export class InputDatePicker {
     disconnectLabel(this);
     disconnectForm(this);
     disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
-    disconnectOpenCloseComponent(this);
     disconnectLocalized(this);
     disconnectMessages(this);
   }
@@ -447,22 +449,22 @@ export class InputDatePicker {
     numberStringFormatter.numberFormatOptions = {
       numberingSystem,
       locale: effectiveLocale,
-      useGrouping: false
+      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
-      ref: this.setStartWrapper }, h("calcite-input", { "aria-autocomplete": "none", "aria-controls": this.dialogId, "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: this.localeData?.placeholder, readOnly: readOnly, role: "combobox", scale: this.scale, type: "text",
+      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: this.localeData?.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("div", { "aria-hidden": toAriaBoolean(!this.open), "aria-label": messages.chooseDate, "aria-live": "polite", "aria-modal": "true", class: {
+      ref: this.setStartInput }), this.renderToggleIcon(this.open && this.focusedInput === "start"), h("span", { "aria-hidden": "true", class: CSS.assistiveText, id: this.placeholderTextId }, "Date Format: ", this.localeData?.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
+        [CSS.menuActive]: this.open,
       }, id: this.dialogId, role: "dialog",
       // eslint-disable-next-line react/jsx-sort-props
       ref: this.setFloatingEl }, h("div", { class: {
         ["calendar-picker-wrapper"]: true,
         ["calendar-picker-wrapper--end"]: this.focusedInput === "end",
         [FloatingCSS.animation]: true,
-        [FloatingCSS.animationActive]: this.open
+        [FloatingCSS.animationActive]: this.open,
       },
       // eslint-disable-next-line react/jsx-sort-props
       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,
@@ -471,7 +473,7 @@ export class InputDatePicker {
       // eslint-disable-next-line react/jsx-sort-props
       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
+        "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: this.localeData?.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 })));
@@ -500,7 +502,7 @@ export class InputDatePicker {
           this.datePickerEl.setFocus();
           this.focusOnOpen = false;
         }
-      }
+      },
     });
     this.calciteInputDatePickerOpen.emit();
   }
@@ -530,14 +532,14 @@ export class InputDatePicker {
         if (date) {
           this.setRangeValue([
             focusedInput === "start" ? date : dateFromISO(value[0]),
-            focusedInput === "end" ? date : dateFromISO(value[1])
+            focusedInput === "end" ? date : dateFromISO(value[1]),
           ]);
           this.localizeInputValues();
         }
         else {
           this.setRangeValue([
             focusedInput === "end" && dateFromISO(value[0]),
-            focusedInput === "start" && dateFromISO(value[1])
+            focusedInput === "start" && dateFromISO(value[1]),
           ]);
         }
       }
@@ -545,7 +547,7 @@ export class InputDatePicker {
         if (date) {
           this.setRangeValue([
             focusedInput === "start" ? date : dateFromISO(value[0]),
-            focusedInput === "end" ? date : dateFromISO(value[1])
+            focusedInput === "end" ? date : dateFromISO(value[1]),
           ]);
           this.localizeInputValues();
         }
@@ -566,7 +568,7 @@ export class InputDatePicker {
     numberStringFormatter.numberFormatOptions = {
       numberingSystem: this.numberingSystem,
       locale: this.effectiveLocale,
-      useGrouping: false
+      useGrouping: false,
     };
     this.localeData = await getLocaleData(this.effectiveLocale);
     this.localizeInputValues();
@@ -778,7 +780,7 @@ export class InputDatePicker {
         "mutable": true,
         "complexType": {
           "original": "Partial<InputDatePickerMessages & DatePickerMessages>",
-          "resolved": "{ chooseDate?: string; nextMonth?: string; prevMonth?: string; year?: string; }",
+          "resolved": "{ chooseDate?: string; dateFormat?: string; nextMonth?: string; prevMonth?: string; year?: string; }",
           "references": {
             "Partial": {
               "location": "global"
@@ -805,7 +807,7 @@ export class InputDatePicker {
         "mutable": true,
         "complexType": {
           "original": "InputDatePickerMessages",
-          "resolved": "{ chooseDate: string; }",
+          "resolved": "{ chooseDate: string; dateFormat: string; }",
           "references": {
             "InputDatePickerMessages": {
               "location": "import",