@esri/solutions-components 0.8.6-6.3 → 0.8.6

package/dist/components/info-card2.js

@@ -24,8 +24,7 @@ import { d as defineCustomElement$3 } from './tooltip.js';
 import { d as defineCustomElement$2 } from './delete-button2.js';
 import { d as defineCustomElement$1 } from './edit-card2.js';
 
-const infoCardCss = ":host{display:block;--calcite-label-margin-bottom:0}.padding-1-2{padding:0.5rem}.display-none{display:none !important}.display-flex{display:flex}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}.feature-node{position:relative !important}.feature-node .esri-features__footer{display:none !important}.button-container{justify-content:center;align-items:center}.top-border{border-top:1px solid var(--calcite-color-border-1)}.width-100{width:100%}.esri-features__container{padding:0.5rem !important;background-color:var(--calcite-color-foreground-1) !important;height:100% !important}.overflow-hidden{overflow:hidden}.height-40{height:40px}.end-border{border-inline-end:1px solid var(--calcite-color-border-1)}.font-bold{font-weight:bold}.visibility-hidden{visibility:hidden;height:0px}.padding-inline-start-1{padding-inline-start:1rem}.border-width-0{border-width:0px}.pagination-action{position:relative;left:3px}.pagination-count{color:var(--calcite-color-brand);border-bottom:1px solid var(--calcite-color-brand);font-weight:bold}";
-const InfoCardStyle0 = infoCardCss;
+const infoCardCss = ":host{display:block;--calcite-label-margin-bottom:0}.padding-1-2{padding:0.5rem}.display-none{display:none !important}.display-flex{display:flex}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}.feature-node .esri-features__footer{display:none !important}.button-container{justify-content:space-between;align-items:center}.top-border{border-top:1px solid var(--calcite-color-border-1)}.min-width-100{min-width:100px}.width-100{width:100%}.esri-features__container{padding:0.5rem !important;background-color:var(--calcite-color-foreground-1) !important;height:100% !important}.overflow-hidden{overflow:hidden}.height-40{height:40px}.end-border{border-inline-end:1px solid var(--calcite-color-border-1)}.font-bold{font-weight:bold}.visibility-hidden{visibility:hidden;height:0px}.padding-inline-start-1{padding-inline-start:1rem}.border-width-0{border-width:0px}";
 
 const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLElement {
     constructor() {
@@ -33,18 +32,13 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
         this.__registerHost();
         this.popupClosed = createEvent(this, "popupClosed", 7);
         this.selectionChanged = createEvent(this, "selectionChanged", 7);
-        /**
-         * string: unique id for the features node
-         */
-        this._featuresNodeId = 'features-node' + new Date().getMilliseconds().toString();
         this.graphics = undefined;
         this.isLoading = false;
         this.isMobile = undefined;
         this.mapView = undefined;
+        this.zoomAndScrollToSelected = undefined;
         this.allowEditing = true;
         this.highlightEnabled = true;
-        this.paginationEnabled = true;
-        this.position = 'absolute';
         this._alertOpen = false;
         this._count = "";
         this._editRecordOpen = false;
@@ -90,45 +84,6 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
     async getSelectedFeature() {
         return this._features.selectedFeature;
     }
-    /**
-     * Refresh the feature info
-     * @returns Promise when complete
-     */
-    async refresh() {
-        await this.setGraphics();
-    }
-    /**
-     * Go to the previous feature in the features widget
-     */
-    async back() {
-        this._features.previous();
-        this._count = this._getCount();
-    }
-    /**
-     * Go to the next feature in the features widget
-     */
-    async next() {
-        this._features.next();
-        this._count = this._getCount();
-    }
-    /**
-     * Toggle the visibility of the features list view
-     */
-    async toggleListView() {
-        this._showListView = !this._showListView;
-        const i = this._features.selectedFeatureIndex;
-        this._features.open({
-            features: this.graphics,
-            featureMenuOpen: this._showListView
-        });
-        this._features.selectedFeatureIndex = i;
-    }
-    /**
-     * update the current graphics to the features widget
-     */
-    async updateCurrentGraphic(selectedGraphic) {
-        this._features.selectedFeatureWidget.graphic = selectedGraphic;
-    }
     /**
      * Respond to and close the edit record display
      *
@@ -193,8 +148,8 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
         const id = (_d = (_c = this._features) === null || _c === void 0 ? void 0 : _c.selectedFeature) === null || _d === void 0 ? void 0 : _d.getObjectId();
         const ids = parseInt(id === null || id === void 0 ? void 0 : id.toString(), 10) > -1 ? [id] : [];
         const deleteEnabled = ((_e = this._layer) === null || _e === void 0 ? void 0 : _e.editingEnabled) && ((_h = (_g = (_f = this._layer) === null || _f === void 0 ? void 0 : _f.capabilities) === null || _g === void 0 ? void 0 : _g.operations) === null || _h === void 0 ? void 0 : _h.supportsDelete);
-        return (h(Host, { key: 'ac9c78b064154a666a50e7e8540f13bd541c4d37' }, h("calcite-shell", { key: 'e12b6fd8ac5f92282899edceb5818764fb543301', style: { position: this.position } }, this._getHeader(), h("calcite-loader", { key: 'e73db3c6f71cddf497cb20e1f59e9f1d8b1ecdd6', class: loadingClass, label: this._translations.fetchingData }), h("div", { key: 'ab1913d90206219978d425a45f312da3e73bcca8', class: "esri-widget feature-node " + featureNodeClass, id: this._featuresNodeId }), h("div", { key: '67242dfb2b219e71a135c88d9d5e2fd40b083226', class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
-            h("div", { key: '25ee3d9374a5ce97c4fcd672b1f78315d1294719', class: "display-flex top-border padding-1-2" }, h("calcite-button", { key: '840e3b4ae075fbfd7836f2757128e2cfe9f267e3', appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { key: '747436c3815e94976c2838777a26185c9cb7ab28', placement: "bottom", "reference-element": "solutions-edit" }, h("span", { key: 'd40dbe85eddaf99acc522f305960ce59c16a8b1f' }, this._translations.edit)), this.isMobile ? (h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), this.paginationEnabled && !nextBackDisabled && h("div", { key: '9a1b1e5d7e4432f6b2cd80f77a49f50b1910117f', class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { key: '9b6fd66023b514ff996107ade3af93415f1353f1' }, h("calcite-button", { key: '823bcbe1a3b592344972e6ef39fd5088ab6197fa', appearance: 'transparent', disabled: nextBackDisabled, iconStart: "chevron-left", id: "solutions-back", onClick: () => this._back(), width: "full" }), h("calcite-tooltip", { key: 'f547487c9eae179e0c65015a24432c936de2ceca', placement: "top", "reference-element": "solutions-back" }, h("span", { key: 'f6f352416103008acc20238efe7e7714fca8d05e' }, this._translations.back))), h("calcite-action", { key: '799e06b8af5df338b920ddc578fa349de469e786', class: 'pagination-action', onClick: () => this._toggleListView(), scale: "s", text: "", textEnabled: true }, h("span", { key: 'adee5b6b5149dbb4c1d6136c1314db89a04e8913', class: "pagination-count" }, this._count)), h("div", { key: '87f181c53ad1806a9831d01b54fdd51434a5a4c2' }, h("calcite-button", { key: 'a4612a6f0d9b6a9412e60022599cba536cd4f623', appearance: "transparent", disabled: nextBackDisabled, iconStart: "chevron-right", id: "solutions-next", onClick: () => this._next(), width: "full" }), h("calcite-tooltip", { key: '613849a34a568fe8df2abe8b1813070cb7a54633', placement: "top", "reference-element": "solutions-next" }, h("span", { key: '35a2e621ce4b3bccb2b859e961db1065d619b2d9' }, this._translations.next))))), h("edit-card", { key: 'a2054fc21fc09dbffc47e1a7617a4b91b29d26fd', class: editClass, graphicIndex: (_j = this._features) === null || _j === void 0 ? void 0 : _j.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { key: 'ec0fd6540b21987c80fe2035efa96d197c1e6cec', icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { key: '721a363423ec61a9645b003a7d53849137fe1b82', slot: "title" }, this._translations.editDisabled), h("div", { key: '143e9ff06f5363682e8b9e1976fdbfdd1b56f2a9', slot: "message" }, this._translations.enableEditing)))));
+        return (h(Host, null, h("calcite-shell", null, this._getHeader(), h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget feature-node " + featureNodeClass, id: "features-node" }), h("div", { class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
+            h("div", { class: "display-flex top-border padding-1-2" }, h("calcite-button", { appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, this._translations.edit)), this.isMobile ? (h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), !nextBackDisabled && h("div", { class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-back", onClick: () => this._back(), width: "full" }, this._translations.back), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-back" }, h("span", null, this._translations.back))), h("div", null, h("calcite-action", { icon: "list", onClick: () => this._toggleListView(), scale: "s", text: this._count, textEnabled: true })), h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-next", onClick: () => this._next(), width: "full" }, this._translations.next), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-next" }, h("span", null, this._translations.next))))), h("edit-card", { class: editClass, graphicIndex: (_j = this._features) === null || _j === void 0 ? void 0 : _j.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._translations.editDisabled), h("div", { slot: "message" }, this._translations.enableEditing)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -253,7 +208,7 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
             if (!this._features) {
                 this._features = new this.Features({
                     view: this.mapView,
-                    container: this._featuresNodeId,
+                    container: "features-node",
                     visibleElements: {
                         actionBar: false,
                         closeButton: false,
@@ -262,16 +217,17 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
                 });
                 this._features.viewModel.highlightEnabled = this.highlightEnabled;
                 this.reactiveUtils.watch(() => this._features.viewModel.featureMenuOpen, (isOpen) => {
-                    this._count = this._getCount();
                     if (!isOpen) {
                         this._showListView = isOpen;
                     }
                 });
-                this.reactiveUtils.watch(() => this._features.selectedFeatureIndex, (i) => {
-                    if (i > -1) {
-                        this.selectionChanged.emit({ selectedFeature: [this._features.selectedFeature], selectedFeatureIndex: this._features.selectedFeatureIndex });
-                    }
-                });
+                if (this.zoomAndScrollToSelected) {
+                    this.reactiveUtils.watch(() => this._features.selectedFeatureIndex, (i) => {
+                        if (i > -1) {
+                            this.selectionChanged.emit([this._features.selectedFeature]);
+                        }
+                    });
+                }
             }
             else {
                 this._features.view = this.mapView;
@@ -369,28 +325,22 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
         "isMobile": ["isMobileWatchHandler"],
         "mapView": ["mapViewWatchHandler"]
     }; }
-    static get style() { return InfoCardStyle0; }
+    static get style() { return infoCardCss; }
 }, [0, "info-card", {
         "graphics": [16],
         "isLoading": [4, "is-loading"],
         "isMobile": [4, "is-mobile"],
         "mapView": [16],
+        "zoomAndScrollToSelected": [4, "zoom-and-scroll-to-selected"],
         "allowEditing": [4, "allow-editing"],
         "highlightEnabled": [4, "highlight-enabled"],
-        "paginationEnabled": [4, "pagination-enabled"],
-        "position": [1],
         "_alertOpen": [32],
         "_count": [32],
         "_editRecordOpen": [32],
         "_mobileTitle": [32],
         "_showListView": [32],
         "_translations": [32],
-        "getSelectedFeature": [64],
-        "refresh": [64],
-        "back": [64],
-        "next": [64],
-        "toggleListView": [64],
-        "updateCurrentGraphic": [64]
+        "getSelectedFeature": [64]
     }, [[8, "closeEdit", "closeEdit"], [8, "layerSelectionChange", "layerSelectionChange"], [8, "refreshGraphics", "refreshGraphics"]], {
         "graphics": ["graphicsWatchHandler"],
         "isMobile": ["isMobileWatchHandler"],

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

@@ -14,7 +14,7 @@ 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, e as getSupportedNumberingSystem } from './locale2.js';
 import { o as onToggleOpenCloseComponent } from './openCloseComponent.js';
-import { d as defineCustomElement$7, g as getValueAsDateRange, a as getLocaleData } from './date-picker.js';
+import { g as getValueAsDateRange, a as getLocaleData, d as defineCustomElement$7 } from './date-picker.js';
 import { c as connectMessages, s as setUpMessages, d as disconnectMessages } from './t9n.js';
 import { c as connectFocusTrap, d as deactivateFocusTrap, a as activateFocusTrap } from './focusTrapComponent.js';
 import { g as guid } from './guid.js';
@@ -30,7 +30,28 @@ import { d as defineCustomElement$1 } 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.
- * v2.8.2
+ * v2.4.0
+ */
+const CSS = {
+    assistiveText: "assistive-text",
+    calendarWrapper: "calendar-wrapper",
+    calendarWrapperEnd: "calendar-wrapper--end",
+    horizontalArrowContainer: "horizontal-arrow-container",
+    inputBorderTopColorOne: "border-top-color-one",
+    inputContainer: "input-container",
+    inputNoBottomBorder: "no-bottom-border",
+    inputWrapper: "input-wrapper",
+    input: "input",
+    menu: "menu-container",
+    menuActive: "menu-container--active",
+    toggleIcon: "toggle-icon",
+    verticalArrowContainer: "vertical-arrow-container",
+};
+
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
+ * v2.4.0
  */
 /**
  * Specifies if an ISO string date (YYYY-MM-DD) has two digit year.
@@ -57,30 +78,7 @@ function normalizeToCurrentCentury(twoDigitYear) {
     return normalizedYear;
 }
 
-/*!
- * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
- * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v2.8.2
- */
-const CSS = {
-    assistiveText: "assistive-text",
-    calendarWrapper: "calendar-wrapper",
-    calendarWrapperEnd: "calendar-wrapper--end",
-    horizontalArrowContainer: "horizontal-arrow-container",
-    inputBorderTopColorOne: "border-top-color-one",
-    inputContainer: "input-container",
-    inputNoBottomBorder: "no-bottom-border",
-    inputWrapper: "input-wrapper",
-    input: "input",
-    menu: "menu-container",
-    menuActive: "menu-container--active",
-    toggleIcon: "toggle-icon",
-    verticalArrowContainer: "vertical-arrow-container",
-    chevronIcon: "chevron-icon",
-};
-
-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-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-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;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 1rem)}:host([scale=m]){--calcite-toggle-spacing:0.75rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 1.5rem)}:host([scale=l]){--calcite-toggle-spacing:1rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 2rem)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.calendar-wrapper{--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}.input-wrapper .chevron-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-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-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-color-border-input);background-color:var(--calcite-color-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-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-z-index);margin-inline:1px;background-color:var(--calcite-color-foreground-1);padding-inline:0.625rem;inset-inline-start:0}.menu-container{--calcite-floating-ui-z-index:var(--calcite-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-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}.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:0.5rem}:host([scale=s]) .validation-container{padding-block-start:0.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;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 CalciteInputDatePickerStyle0 = inputDatePickerCss;
+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-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-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;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 1rem)}:host([scale=m]){--calcite-toggle-spacing:0.75rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 1.5rem)}:host([scale=l]){--calcite-toggle-spacing:1rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 2rem)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.calendar-wrapper{--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;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-color-border-input);background-color:var(--calcite-color-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-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-z-index);margin-inline:1px;background-color:var(--calcite-color-foreground-1);padding-inline:0.625rem;inset-inline-start:0}.menu-container{--calcite-floating-ui-z-index:var(--calcite-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-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}.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:0.5rem}:host([scale=s]) .validation-container{padding-block-start:0.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;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 {
     constructor() {
@@ -163,7 +161,6 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class InputDatePicker e
                 return;
             }
             if (key === "Enter") {
-                event.preventDefault();
                 this.commitValue();
                 if (this.shouldFocusRangeEnd()) {
                     (_a = this.endInput) === null || _a === void 0 ? void 0 : _a.setFocus();
@@ -172,6 +169,7 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class InputDatePicker e
                     (_b = this.startInput) === null || _b === void 0 ? void 0 : _b.setFocus();
                 }
                 if (submitForm(this)) {
+                    event.preventDefault();
                     this.restoreInputFocus();
                 }
             }
@@ -338,19 +336,6 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class InputDatePicker e
         this.open = false;
         this.validationMessage = undefined;
         this.validationIcon = undefined;
-        this.validity = {
-            valid: false,
-            badInput: false,
-            customError: false,
-            patternMismatch: false,
-            rangeOverflow: false,
-            rangeUnderflow: false,
-            stepMismatch: false,
-            tooLong: false,
-            tooShort: false,
-            typeMismatch: false,
-            valueMissing: false,
-        };
         this.name = undefined;
         this.numberingSystem = undefined;
         this.scale = "m";
@@ -513,6 +498,7 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class InputDatePicker e
         connectForm(this);
         connectMessages(this);
         this.setFilteredPlacements();
+        this.reposition(true);
         numberStringFormatter.numberFormatOptions = {
             numberingSystem: this.numberingSystem,
             locale: this.effectiveLocale,
@@ -532,7 +518,7 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class InputDatePicker e
     componentDidLoad() {
         setComponentLoaded(this);
         this.localizeInputValues();
-        connectFloatingUI(this, this.referenceEl, this.floatingEl);
+        this.reposition(true);
     }
     disconnectedCallback() {
         deactivateFocusTrap(this);
@@ -554,42 +540,42 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class InputDatePicker e
             locale: effectiveLocale,
             useGrouping: false,
         };
-        return (h(Host, { key: 'fd558a11028d7d967811f2a1236d46e82d45161b', onBlur: this.blurHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { key: 'ebf90902c5f3056147f91ee4690e6e69ab452042', disabled: this.disabled }, this.localeData && (h("div", { key: '5e5cfbb9688e08aaf1e12b3527882ee3911d8e84', class: CSS.inputContainer }, h("div", { key: '63014b5695465c3a1b4fe54be6f036a1aa8393e8', class: CSS.inputWrapper, "data-position": "start", onClick: this.onInputWrapperClick, onPointerDown: this.onInputWrapperPointerDown,
+        return (h(Host, { onBlur: this.blurHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { disabled: this.disabled }, this.localeData && (h("div", { class: CSS.inputContainer }, h("div", { class: CSS.inputWrapper, "data-position": "start", onClick: this.onInputWrapperClick, onPointerDown: this.onInputWrapperPointerDown,
             // 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-text", { key: '5cfeff37fb1998954f4e17296f15fcf6b9ea10cd', "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-describedby": this.placeholderTextId, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", class: {
+            ref: this.setStartWrapper }, h("calcite-input-text", { "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-describedby": this.placeholderTextId, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", class: {
                 [CSS.input]: true,
                 [CSS.inputNoBottomBorder]: this.layout === "vertical" && this.range,
             }, disabled: disabled, icon: "calendar", onCalciteInputTextInput: this.calciteInternalInputInputHandler, onCalciteInternalInputTextBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputTextFocus: this.startInputFocus, placeholder: (_a = this.localeData) === null || _a === void 0 ? void 0 : _a.placeholder, readOnly: readOnly, role: "combobox", scale: this.scale, status: this.status,
             // 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", { key: 'f3a99326b0ee83dded0efcce2bacc2acca82741a', "aria-hidden": "true", class: CSS.assistiveText, id: this.placeholderTextId }, "Date Format: ", (_b = this.localeData) === null || _b === void 0 ? void 0 : _b.placeholder)), h("div", { key: '87d96dd359485c1c192f63f694365f6767346207', "aria-hidden": toAriaBoolean(!this.open), "aria-label": messages.chooseDate, "aria-live": "polite", "aria-modal": "true", class: {
+            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 -- 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", { key: '7bb0daff0e3017152b69a7bec09de23d96539749', class: {
+            ref: this.setFloatingEl }, h("div", { class: {
                 [CSS.calendarWrapper]: true,
                 [CSS.calendarWrapperEnd]: this.focusedInput === "end",
                 [FloatingCSS.animation]: true,
                 [FloatingCSS.animationActive]: this.open,
             },
             // 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", { key: 'e9a771765f104b79391396ead9d7e359aa0325cb', 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,
+            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 -- 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", { key: '61b5787f2990d8143bf62da9e33e1253ab196a47', class: CSS.horizontalArrowContainer }, h("calcite-icon", { key: 'c665d2196d7cc71535ae1e352729ad7c3eb606e6', flipRtl: true, icon: "arrow-right", scale: getIconScale(this.scale) }))), this.range && this.layout === "vertical" && this.scale !== "s" && (h("div", { key: '3b5b05e60ad4dc6e866f2a2e3b8da8427e0d8769', class: CSS.verticalArrowContainer }, h("calcite-icon", { key: '395db3f34af565b7403ce50a1455833a43a86463', icon: "arrow-down", scale: getIconScale(this.scale) }))), this.range && (h("div", { key: '596548166a4798cbd04ee76938a5a5e8ae2a9081', class: CSS.inputWrapper, "data-position": "end", onClick: this.onInputWrapperClick, onPointerDown: this.onInputWrapperPointerDown,
+            ref: this.setDatePickerRef }))), this.range && this.layout === "horizontal" && (h("div", { class: CSS.horizontalArrowContainer }, h("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: getIconScale(this.scale) }))), this.range && this.layout === "vertical" && this.scale !== "s" && (h("div", { class: CSS.verticalArrowContainer }, h("calcite-icon", { icon: "arrow-down", scale: getIconScale(this.scale) }))), this.range && (h("div", { class: CSS.inputWrapper, "data-position": "end", onClick: this.onInputWrapperClick, onPointerDown: this.onInputWrapperPointerDown,
             // 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-text", { key: '1d56b70f902730c20cd0d501d5ece75635bd503b', "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", class: {
+            ref: this.setEndWrapper }, h("calcite-input-text", { "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", class: {
                 [CSS.input]: true,
                 [CSS.inputBorderTopColorOne]: this.layout === "vertical" && this.range,
             }, disabled: disabled, icon: "calendar", onCalciteInputTextInput: this.calciteInternalInputInputHandler, onCalciteInternalInputTextBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputTextFocus: this.endInputFocus, placeholder: (_c = this.localeData) === null || _c === void 0 ? void 0 : _c.placeholder, readOnly: readOnly, role: "combobox", scale: this.scale, status: this.status,
             // 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, { key: '7f09766af52aaa2db452431301dfa55cd8af3a2e', component: this }), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+            this.renderToggleIcon(this.open && this.focusedInput === "end"))))), h(HiddenFormInputSlot, { component: this }), this.validationMessage ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     renderToggleIcon(open) {
         return (
         // we set tab index to -1 to prevent delegatesFocus from stealing focus before we can set it
-        h("span", { class: CSS.toggleIcon, tabIndex: -1 }, h("calcite-icon", { class: CSS.chevronIcon, icon: open ? "chevron-up" : "chevron-down", scale: getIconScale(this.scale) })));
+        h("span", { class: CSS.toggleIcon, tabIndex: -1 }, h("calcite-icon", { icon: open ? "chevron-up" : "chevron-down", scale: getIconScale(this.scale) })));
     }
     setReferenceEl() {
         const { focusedInput, layout, endWrapper, startWrapper } = this;
@@ -752,7 +738,7 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class InputDatePicker e
         "focusedInput": ["setReferenceEl"],
         "effectiveLocale": ["loadLocaleData"]
     }; }
-    static get style() { return CalciteInputDatePickerStyle0; }
+    static get style() { return inputDatePickerCss; }
 }, [17, "calcite-input-date-picker", {
         "disabled": [516],
         "focusTrapDisabled": [516, "focus-trap-disabled"],
@@ -771,7 +757,6 @@ const InputDatePicker = /*@__PURE__*/ proxyCustomElement(class InputDatePicker e
         "open": [1540],
         "validationMessage": [1, "validation-message"],
         "validationIcon": [520, "validation-icon"],
-        "validity": [1040],
         "name": [513],
         "numberingSystem": [513, "numbering-system"],
         "scale": [513],

package/dist/components/input-message.js

@@ -10,16 +10,16 @@ import { d as defineCustomElement$1 } from './icon.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.
- * v2.8.2
+ * v2.4.0
  */
-const StatusIconDefaults = {
-    valid: "check-circle",
-    invalid: "exclamation-mark-triangle",
-    idle: "information",
-};
+var StatusIconDefaults;
+(function (StatusIconDefaults) {
+    StatusIconDefaults["valid"] = "check-circle";
+    StatusIconDefaults["invalid"] = "exclamation-mark-triangle";
+    StatusIconDefaults["idle"] = "information";
+})(StatusIconDefaults || (StatusIconDefaults = {}));
 
-const inputMessageCss = ":host{box-sizing:border-box;display:flex;block-size:auto;inline-size:100%;align-items:center;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1);opacity:1;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;--calcite-input-message-spacing-value:0.25rem;margin-block-start:var(--calcite-input-message-spacing-value)}.calcite-input-message-icon{pointer-events:none;display:inline-flex;flex-shrink:0;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;margin-inline-end:0.5rem}:host([status=invalid]) .calcite-input-message-icon{color:var(--calcite-color-status-danger)}:host([status=warning]) .calcite-input-message-icon{color:var(--calcite-color-status-warning)}:host([status=valid]) .calcite-input-message-icon{color:var(--calcite-color-status-success)}:host([status=idle]) .calcite-input-message-icon{color:var(--calcite-color-brand)}:host([scale=s]){font-size:var(--calcite-font-size--3);line-height:0.75rem}:host([scale=m]){font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=l]){font-size:var(--calcite-font-size--1);line-height:1rem}:host([hidden]){display:none}[hidden]{display:none}";
-const CalciteInputMessageStyle0 = inputMessageCss;
+const inputMessageCss = ":host{box-sizing:border-box;display:flex;block-size:auto;inline-size:100%;align-items:center;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1);opacity:1;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;--calcite-input-message-spacing-value:0.25rem;margin-block-start:var(--calcite-input-message-spacing-value)}.calcite-input-message-icon{pointer-events:none;display:inline-flex;flex-shrink:0;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;margin-inline-end:0.5rem}:host([status=invalid]) .calcite-input-message-icon{color:var(--calcite-color-status-danger)}:host([status=warning]) .calcite-input-message-icon{color:var(--calcite-color-status-warning)}:host([status=valid]) .calcite-input-message-icon{color:var(--calcite-color-status-success)}:host([status=idle]) .calcite-input-message-icon{color:var(--calcite-color-brand)}:host([scale=s]){font-size:var(--calcite-font-size--3);line-height:0.75rem}:host([scale=m]){font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=l]){font-size:var(--calcite-font-size--1);line-height:1rem}:host([hidden]){display:none}[hidden]{display:none}";
 
 const InputMessage = /*@__PURE__*/ proxyCustomElement(class InputMessage extends HTMLElement {
     constructor() {
@@ -44,7 +44,7 @@ const InputMessage = /*@__PURE__*/ proxyCustomElement(class InputMessage extends
     }
     render() {
         const hidden = this.el.hidden;
-        return (h(Host, { key: '7d7329dbca2d5abb5a9b92dbee9767ba14488caa', "calcite-hydrated-hidden": hidden }, this.renderIcon(this.requestedIcon), h("slot", { key: '2fc037f47b40f25698cecdd52df9436da86ecfcf' })));
+        return (h(Host, { "calcite-hydrated-hidden": hidden }, this.renderIcon(this.requestedIcon), h("slot", null)));
     }
     //--------------------------------------------------------------------------
     //
@@ -61,7 +61,7 @@ const InputMessage = /*@__PURE__*/ proxyCustomElement(class InputMessage extends
         "status": ["handleIconEl"],
         "icon": ["handleIconEl"]
     }; }
-    static get style() { return CalciteInputMessageStyle0; }
+    static get style() { return inputMessageCss; }
 }, [1, "calcite-input-message", {
         "icon": [520],
         "iconFlipRtl": [516, "icon-flip-rtl"],