@esri/solutions-components 0.10.9 → 0.10.11

package/dist/esm/calcite-input-time-picker.entry.js

@@ -3,25 +3,24 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-export { I as calcite_input_time_picker } from './calcite-input-time-picker-48568b36.js';
-import './index-e3f04fa1.js';
-import './form-9827fc54.js';
-import './dom-982585e7.js';
-import './guid-5c959cfd.js';
-import './resources-3bc82696.js';
-import './interactive-1d03c7ff.js';
-import './browser-8c71dd57.js';
-import './key-7f394a98.js';
-import './label-38802319.js';
-import './component-e3f05da5.js';
-import './loadable-869378d9.js';
-import './locale-53748f98.js';
-import './observers-0f4a5f9e.js';
-import './focusTrapComponent-2dc61826.js';
-import './config-6d8fa5c8.js';
-import './time-2996215a.js';
-import './math-dbb62ccf.js';
-import './t9n-5371b7ab.js';
-import './openCloseComponent-f118bfc5.js';
-import './Validation-8ddc15e3.js';
-import './input-bf439d4b.js';
+export { I as calcite_input_time_picker } from './calcite-input-time-picker-60dbdc25.js';
+import './index-b793d9aa.js';
+import './form-ba965042.js';
+import './dom-b5c50286.js';
+import './guid-4c746a7f.js';
+import './resources-defbb49f.js';
+import './interactive-742ba555.js';
+import './browser-552eb2d0.js';
+import './key-58898f0a.js';
+import './label-0b82858a.js';
+import './component-c2c32481.js';
+import './loadable-73f289b6.js';
+import './locale-21e40b0c.js';
+import './observers-e2484555.js';
+import './focusTrapComponent-6ec0f681.js';
+import './config-2fa7bb77.js';
+import './time-a215e415.js';
+import './math-8c04292e.js';
+import './t9n-2fb3af62.js';
+import './Validation-63949b7d.js';
+import './input-d11f5ac8.js';

package/dist/esm/calcite-input-time-zone.entry.js

@@ -3,25 +3,34 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-e3f04fa1.js';
-import { c as connectLabel, d as disconnectLabel } from './label-38802319.js';
-import { u as updateHostInteraction, I as InteractiveContainer } from './interactive-1d03c7ff.js';
-import { a as getDateTimeFormat, c as connectLocalized, d as disconnectLocalized } from './locale-53748f98.js';
-import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n-5371b7ab.js';
-import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-869378d9.js';
-import { c as connectForm, d as disconnectForm, a as afterConnectDefaultValueSet, H as HiddenFormInputSlot } from './form-9827fc54.js';
-import './dom-982585e7.js';
-import './guid-5c959cfd.js';
-import './resources-3bc82696.js';
-import './component-e3f05da5.js';
-import './browser-8c71dd57.js';
-import './key-7f394a98.js';
-import './observers-0f4a5f9e.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b793d9aa.js';
+import { c as connectLabel, d as disconnectLabel } from './label-0b82858a.js';
+import { u as updateHostInteraction, I as InteractiveContainer } from './interactive-742ba555.js';
+import { a as getDateTimeFormat, c as connectLocalized, d as disconnectLocalized } from './locale-21e40b0c.js';
+import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n-2fb3af62.js';
+import { c as componentFocusable, s as setUpLoadableComponent, a as setComponentLoaded } from './loadable-73f289b6.js';
+import { c as connectForm, d as disconnectForm, a as afterConnectDefaultValueSet, H as HiddenFormInputSlot } from './form-ba965042.js';
+import './dom-b5c50286.js';
+import './guid-4c746a7f.js';
+import './resources-defbb49f.js';
+import './component-c2c32481.js';
+import './browser-552eb2d0.js';
+import './key-58898f0a.js';
+import './observers-e2484555.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.1
+ * v2.12.0
+ */
+const CSS = {
+    offset: "offset",
+};
+
+/*!
+ * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+ * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+ * v2.12.0
  */
 const hourToMinutes = 60;
 const timeZoneNameBlockList = [
@@ -65,83 +74,114 @@ function getUserTimeZoneName() {
     const dateFormatter = new Intl.DateTimeFormat();
     return dateFormatter.resolvedOptions().timeZone;
 }
-/**
- * The lazy-loaded timezone-groups lib to be used across instances.
- */
-let timeZoneGroups;
 async function createTimeZoneItems(locale, messages, mode, referenceDate, standardTime) {
+    if (mode === "name") {
+        const { groupByName } = await import('./index-f8c935d6.js');
+        const groups = await groupByName();
+        return groups
+            .map(({ label: timeZone }) => {
+            const label = toUserFriendlyName(timeZone);
+            const value = timeZone;
+            return {
+                label,
+                value,
+                filterValue: timeZone,
+            };
+        })
+            .filter((group) => !!group)
+            .sort();
+    }
+    const effectiveLocale = standardTime === "user"
+        ? locale
+        : // we use locales that will always yield a short offset that matches `standardTime`
+            standardTime === "utc"
+                ? "fr"
+                : "en-GB";
     const referenceDateInMs = referenceDate.getTime();
-    const timeZoneNames = Intl.supportedValuesOf("timeZone");
-    if (mode === "offset") {
-        if (!timeZoneGroups) {
-            timeZoneGroups = Promise.all([
-                import('./index-d8ff08ed.js'),
-                import('./index-5110a27a.js'),
-            ]);
-        }
-        return timeZoneGroups.then(async ([{ groupTimeZones }, { DateEngine }]) => {
-            const timeZoneGroups = await groupTimeZones({
-                dateEngine: new DateEngine(),
-                groupDateRange: 1,
-                startDate: new Date(referenceDateInMs).toISOString(),
-            });
-            const listFormatter = new Intl.ListFormat(locale, { style: "long", type: "conjunction" });
-            // we remove blocked entries from tzs and adjust label indices accordingly
-            timeZoneGroups.forEach((group) => {
-                const indexOffsets = [];
-                let removedSoFar = 0;
-                group.tzs.forEach((tz, index) => {
-                    if (timeZoneNameBlockList.includes(tz)) {
-                        removedSoFar++;
-                    }
-                    indexOffsets[index] = removedSoFar;
-                });
-                group.tzs = group.tzs.filter((tz) => !timeZoneNameBlockList.includes(tz));
-                group.labelTzIndices = group.labelTzIndices
-                    .map((index) => index - indexOffsets[index])
-                    .filter((index) => index >= 0 && index < group.tzs.length);
-            });
-            const effectiveLocale = standardTime === "user"
-                ? locale
-                : // we use locales that will always yield a short offset that matches `standardTime`
-                    standardTime === "utc"
-                        ? "fr"
-                        : "en-GB";
-            return timeZoneGroups
-                .map(({ labelTzIndices, tzs }) => {
-                const groupRepTz = tzs[0];
-                const decimalOffset = timeZoneOffsetToDecimal(getTimeZoneShortOffset(groupRepTz, effectiveLocale, referenceDateInMs));
-                const value = toOffsetValue(groupRepTz, referenceDateInMs);
-                const tzLabels = labelTzIndices.map((index) => {
-                    const timeZone = tzs[index];
-                    const timeZoneLabel = messages[timeZone];
-                    return (timeZoneLabel ||
-                        // get city token
-                        timeZone.split("/").pop());
-                });
-                const label = createTimeZoneOffsetLabel(messages, decimalOffset, listFormatter.format(tzLabels));
-                return {
-                    label,
-                    value,
-                    filterValue: tzs.map((tz) => toUserFriendlyName(tz)),
-                };
-            })
-                .filter((group) => !!group)
-                .sort((groupA, groupB) => groupA.value - groupB.value);
-        });
+    if (mode === "region") {
+        const [{ groupByRegion }, { getCountry }] = await Promise.all([
+            import('./index-f5d562b1.js'),
+            import('./country-2d5661ee.js'),
+        ]);
+        const groups = await groupByRegion();
+        return groups
+            .map(({ label: region, tzs }) => {
+            return {
+                label: region,
+                items: tzs.map((timeZone) => {
+                    const decimalOffset = timeZoneOffsetToDecimal(getTimeZoneShortOffset(timeZone, effectiveLocale, referenceDateInMs));
+                    return {
+                        label: getTimeZoneLabel(timeZone, messages),
+                        value: timeZone,
+                        filterValue: toUserFriendlyName(timeZone),
+                        metadata: {
+                            offset: decimalOffset,
+                            country: getCountry(timeZone),
+                        },
+                    };
+                }),
+            };
+        })
+            .sort((groupA, groupB) => groupA.label.localeCompare(groupB.label));
     }
-    return timeZoneNames
-        .map((timeZone) => {
-        const label = toUserFriendlyName(timeZone);
-        const value = timeZone;
+    const [{ groupByOffset }, { DateEngine }] = await Promise.all([
+        import('./index-ad182a71.js'),
+        import('./index-87ec7c0a.js'),
+    ]);
+    const groups = await groupByOffset({
+        dateEngine: new DateEngine(),
+        groupDateRange: 1,
+        startDate: new Date(referenceDateInMs).toISOString(),
+    });
+    const listFormatter = new Intl.ListFormat(locale, { style: "long", type: "conjunction" });
+    // we remove blocked entries from tzs and adjust label indices accordingly
+    groups.forEach((group) => {
+        const indexOffsets = [];
+        let removedSoFar = 0;
+        group.tzs.forEach((tz, index) => {
+            if (timeZoneNameBlockList.includes(tz)) {
+                removedSoFar++;
+            }
+            indexOffsets[index] = removedSoFar;
+        });
+        group.tzs = group.tzs.filter((tz) => !timeZoneNameBlockList.includes(tz));
+        group.labelTzIdx = group.labelTzIdx
+            .map((index) => index - indexOffsets[index])
+            .filter((index) => index >= 0 && index < group.tzs.length);
+    });
+    return groups
+        .map(({ labelTzIdx, tzs }) => {
+        const groupRepTz = tzs[0];
+        const decimalOffset = timeZoneOffsetToDecimal(getTimeZoneShortOffset(groupRepTz, effectiveLocale, referenceDateInMs));
+        const value = toOffsetValue(groupRepTz, referenceDateInMs);
+        const tzLabels = labelTzIdx.map((index) => getTimeZoneLabel(tzs[index], messages));
+        const label = createTimeZoneOffsetLabel(messages, decimalOffset, listFormatter.format(tzLabels));
         return {
             label,
             value,
-            filterValue: timeZone,
+            filterValue: tzs.map((tz) => toUserFriendlyName(tz)),
         };
     })
         .filter((group) => !!group)
-        .sort();
+        .sort((groupA, groupB) => groupA.value - groupB.value);
+}
+function getTimeZoneLabel(timeZone, messages) {
+    return messages[timeZone] || getCity(timeZone);
+}
+function getSelectedRegionTimeZoneLabel(city, country, messages) {
+    const template = messages.timeZoneRegionLabel;
+    return template.replace("{city}", city).replace("{country}", getMessageOrKeyFallback(messages, country));
+}
+function getMessageOrKeyFallback(messages, key) {
+    return messages[key] || key;
+}
+/**
+ * Exported for testing purposes only
+ *
+ * @internal
+ */
+function getCity(timeZone) {
+    return timeZone.split("/").pop();
 }
 /**
  * Exported for testing purposes only
@@ -159,15 +199,21 @@ function getTimeZoneShortOffset(timeZone, locale, referenceDateInMs = Date.now()
     const parts = dateTimeFormat.formatToParts(referenceDateInMs);
     return parts.find(({ type }) => type === "timeZoneName").value;
 }
+function isGroup(item) {
+    return item.items !== undefined;
+}
+function flattenTimeZoneItems(timeZoneItems) {
+    return isGroup(timeZoneItems[0]) ? timeZoneItems.flatMap((item) => item.items) : timeZoneItems;
+}
 function findTimeZoneItemByProp(timeZoneItems, prop, valueToMatch) {
     return valueToMatch == null
         ? null
-        : timeZoneItems.find((item) => 
+        : flattenTimeZoneItems(timeZoneItems).find((item) => 
         // intentional == to match string to number
         item[prop] == valueToMatch);
 }
 
-const inputTimeZoneCss = ":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{display:block}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}::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}";
+const inputTimeZoneCss = ":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{display:block}.offset{white-space:nowrap}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}::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}";
 const CalciteInputTimeZoneStyle0 = inputTimeZoneCss;
 
 const InputTimeZone = class {
@@ -183,10 +229,12 @@ const InputTimeZone = class {
         };
         this.onComboboxBeforeClose = (event) => {
             event.stopPropagation();
+            this.overrideSelectedLabelForRegion(false);
             this.calciteInputTimeZoneBeforeClose.emit();
         };
         this.onComboboxBeforeOpen = (event) => {
             event.stopPropagation();
+            this.overrideSelectedLabelForRegion(true);
             this.calciteInputTimeZoneBeforeOpen.emit();
         };
         this.onComboboxChange = (event) => {
@@ -293,6 +341,21 @@ const InputTimeZone = class {
     onLabelClick() {
         this.setFocus();
     }
+    /**
+     * Helps override the selected item's label for region mode outside of item rendering logic to avoid flickering text change
+     *
+     * @param open
+     * @private
+     */
+    overrideSelectedLabelForRegion(open) {
+        if (this.mode !== "region" || !this.selectedTimeZoneItem) {
+            return;
+        }
+        const { label, metadata } = this.selectedTimeZoneItem;
+        this.comboboxEl.selectedItems[0].textLabel = open
+            ? label
+            : getSelectedRegionTimeZoneLabel(label, metadata.country, this.messages);
+    }
     findTimeZoneItem(value) {
         return findTimeZoneItemByProp(this.timeZoneItems, "value", value);
     }
@@ -349,16 +412,34 @@ const InputTimeZone = class {
     }
     componentDidLoad() {
         setComponentLoaded(this);
+        this.overrideSelectedLabelForRegion(this.open);
     }
     componentDidRender() {
         updateHostInteraction(this);
     }
     render() {
-        return (h(Host, { key: 'dad642e8f2094c402f24c65422463ca875627fa9' }, h(InteractiveContainer, { key: 'c452b27815cc331bf2475233f21463a08726f797', disabled: this.disabled }, h("calcite-combobox", { key: '70ce16ff8302b6dea19767b9cf00dd735d9019dd', clearDisabled: !this.clearable, disabled: this.disabled, label: this.messages.chooseTimeZone, lang: this.effectiveLocale, maxItems: this.maxItems, onCalciteComboboxBeforeClose: this.onComboboxBeforeClose, onCalciteComboboxBeforeOpen: this.onComboboxBeforeOpen, onCalciteComboboxChange: this.onComboboxChange, onCalciteComboboxClose: this.onComboboxClose, onCalciteComboboxOpen: this.onComboboxOpen, open: this.open, overlayPositioning: this.overlayPositioning, placeholder: this.mode === "name" ? this.messages.namePlaceholder : this.messages.offsetPlaceholder, readOnly: this.readOnly, ref: this.setComboboxRef, scale: this.scale, selectionMode: this.clearable ? "single" : "single-persist", status: this.status, "validation-icon": this.validationIcon, "validation-message": this.validationMessage }, this.timeZoneItems.map((group) => {
+        return (h(Host, { key: '812212005676701893065226cd3594995779c332' }, h(InteractiveContainer, { key: '5c2ddca0fa6198a055ea78b3039a8239973cc4a4', disabled: this.disabled }, h("calcite-combobox", { key: 'ab33d3ebd756d1841870b516a7d174f8f3d20f13', clearDisabled: !this.clearable, disabled: this.disabled, label: this.messages.chooseTimeZone, lang: this.effectiveLocale, maxItems: this.maxItems, onCalciteComboboxBeforeClose: this.onComboboxBeforeClose, onCalciteComboboxBeforeOpen: this.onComboboxBeforeOpen, onCalciteComboboxChange: this.onComboboxChange, onCalciteComboboxClose: this.onComboboxClose, onCalciteComboboxOpen: this.onComboboxOpen, open: this.open, overlayPositioning: this.overlayPositioning, placeholder: this.mode === "name"
+                ? this.messages.namePlaceholder
+                : this.mode === "offset"
+                    ? this.messages.offsetPlaceholder
+                    : this.messages.regionPlaceholder, placeholderIcon: "search", readOnly: this.readOnly, ref: this.setComboboxRef, scale: this.scale, selectionMode: this.clearable ? "single" : "single-persist", status: this.status, "validation-icon": this.validationIcon, "validation-message": this.validationMessage }, this.renderItems()), h(HiddenFormInputSlot, { key: '850e92f46d459fd7599183613151ab5d2b75ead6', component: this }))));
+    }
+    renderItems() {
+        if (this.mode === "region") {
+            return this.renderRegionItems();
+        }
+        return this.timeZoneItems.map((group) => {
             const selected = this.selectedTimeZoneItem === group;
             const { label, value } = group;
             return (h("calcite-combobox-item", { "data-value": value, key: label, selected: selected, textLabel: label, value: `${group.filterValue}` }));
-        })), h(HiddenFormInputSlot, { key: 'd8d6cdaffb68c5cb0ed57abd922ad4b84e26de5d', component: this }))));
+        });
+    }
+    renderRegionItems() {
+        return this.timeZoneItems.flatMap(({ label, items }) => (h("calcite-combobox-item-group", { key: label, label: getMessageOrKeyFallback(this.messages, label) }, items.map((item) => {
+            const selected = this.selectedTimeZoneItem === item;
+            const { label, value } = item;
+            return (h("calcite-combobox-item", { "data-value": value, description: getMessageOrKeyFallback(this.messages, item.metadata.country), key: label, metadata: item.metadata, selected: selected, textLabel: label, value: `${item.filterValue}` }, h("span", { class: CSS.offset, slot: "content-end" }, item.metadata.offset)));
+        }))));
     }
     static get delegatesFocus() { return true; }
     static get assetsDirs() { return ["assets"]; }

package/dist/esm/calcite-input_2.entry.js

@@ -3,27 +3,27 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-e3f04fa1.js';
-import { g as getSlotted, i as isPrimaryPointerButton, z as setRequestedIcon, a as getElementDir } from './dom-982585e7.js';
-import { s as submitForm, c as connectForm, i as internalHiddenInputInputEvent, d as disconnectForm, H as HiddenFormInputSlot } from './form-9827fc54.js';
-import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive-1d03c7ff.js';
-import { n as numberKeys } from './key-7f394a98.js';
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-38802319.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-869378d9.js';
-import { n as numberStringFormatter, i as isValidNumber, p as parseNumberString, s as sanitizeNumberString, e as addLocalizedTrailingDecimalZeros, c as connectLocalized, d as disconnectLocalized, B as BigDecimal } from './locale-53748f98.js';
-import { c as createObserver } from './observers-0f4a5f9e.js';
-import { C as CSS_UTILITY } from './resources-3bc82696.js';
-import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n-5371b7ab.js';
-import { g as getIconScale } from './component-e3f05da5.js';
-import { V as Validation } from './Validation-8ddc15e3.js';
-import { s as syncHiddenFormInput } from './input-bf439d4b.js';
-import './guid-5c959cfd.js';
-import './browser-8c71dd57.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-b793d9aa.js';
+import { i as isPrimaryPointerButton, z as setRequestedIcon, g as getSlotted, a as getElementDir, t as toAriaBoolean } from './dom-b5c50286.js';
+import { s as submitForm, c as connectForm, i as internalHiddenInputInputEvent, d as disconnectForm, H as HiddenFormInputSlot } from './form-ba965042.js';
+import { c as connectInteractive, d as disconnectInteractive, u as updateHostInteraction, I as InteractiveContainer } from './interactive-742ba555.js';
+import { n as numberKeys } from './key-58898f0a.js';
+import { c as connectLabel, d as disconnectLabel, g as getLabelText } from './label-0b82858a.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-73f289b6.js';
+import { n as numberStringFormatter, i as isValidNumber, p as parseNumberString, s as sanitizeNumberString, e as addLocalizedTrailingDecimalZeros, c as connectLocalized, d as disconnectLocalized, B as BigDecimal } from './locale-21e40b0c.js';
+import { c as createObserver } from './observers-e2484555.js';
+import { C as CSS_UTILITY } from './resources-defbb49f.js';
+import { u as updateMessages, c as connectMessages, d as disconnectMessages, s as setUpMessages } from './t9n-2fb3af62.js';
+import { g as getIconScale } from './component-c2c32481.js';
+import { V as Validation } from './Validation-63949b7d.js';
+import { s as syncHiddenFormInput } from './input-d11f5ac8.js';
+import './guid-4c746a7f.js';
+import './browser-552eb2d0.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.1
+ * v2.12.0
  */
 const CSS = {
     loader: "loader",
@@ -41,6 +41,9 @@ const CSS = {
     resizeIconWrapper: "resize-icon-wrapper",
     numberButtonItem: "number-button-item",
 };
+const IDS = {
+    validationMessage: "inputValidationMessage",
+};
 const INPUT_TYPE_ICONS = {
     tel: "phone",
     password: "lock",
@@ -110,10 +113,12 @@ const Input = class {
             if (this.disabled) {
                 return;
             }
-            const slottedActionEl = getSlotted(this.el, "action");
-            if (event.target !== slottedActionEl) {
-                this.setFocus();
+            const composedPath = event.composedPath();
+            if (!composedPath.includes(this.inputWrapperEl) ||
+                composedPath.includes(this.actionWrapperEl)) {
+                return;
             }
+            this.setFocus();
         };
         this.inputFocusHandler = () => {
             this.calciteInternalInputFocus.emit();
@@ -636,41 +641,41 @@ const Input = class {
     // --------------------------------------------------------------------------
     render() {
         const dir = getElementDir(this.el);
-        const loader = (h("div", { key: '84c0bd7785985b5d3188bfcba054120fd32687be', class: CSS.loader }, h("calcite-progress", { key: '7f9df66f96b36087177fd8a82dd44f8a216a3a02', label: this.messages.loading, type: "indeterminate" })));
-        const inputClearButton = (h("button", { key: '320a27ded0752938ef6eb824e2fdf23de510e9fc', "aria-label": this.messages.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, h("calcite-icon", { key: '800e1cc87d8f4c8e915c01f74b4fd551c5daed4b', icon: "x", scale: getIconScale(this.scale) })));
-        const iconEl = (h("calcite-icon", { key: 'd22e551c7f109a1bc59670a766e6020887793346', class: CSS.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: getIconScale(this.scale) }));
+        const loader = (h("div", { key: 'f71fbad6f1d4ac025dd2ebd801883cde41f90bb3', class: CSS.loader }, h("calcite-progress", { key: 'f4a7dccfba5c4a39cb7d9d1bc7b215e85bbdfddc', label: this.messages.loading, type: "indeterminate" })));
+        const inputClearButton = (h("button", { key: '1b2b470eedcd68f0af1e026fea1b8ded87949b0f', "aria-label": this.messages.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, h("calcite-icon", { key: 'b34987e78276f18a361856b949ff110770d9e8b8', icon: "x", scale: getIconScale(this.scale) })));
+        const iconEl = (h("calcite-icon", { key: 'e9d94d4380bbe82d693007638a772b3f3e19538e', class: CSS.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: getIconScale(this.scale) }));
         const isHorizontalNumberButton = this.numberButtonType === "horizontal";
-        const numberButtonsHorizontalUp = (h("button", { key: 'd481136fc775193bdbd5a74634ed32a4964da0af', "aria-hidden": "true", class: {
+        const numberButtonsHorizontalUp = (h("button", { key: '4b57571f699841ab5c465b29b4d677ffd68ca9ef', "aria-hidden": "true", class: {
                 [CSS.numberButtonItem]: true,
                 [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", { key: 'fc7d8f85747204cdba07c794cb8b645477f7ab49', icon: "chevron-up", scale: getIconScale(this.scale) })));
-        const numberButtonsHorizontalDown = (h("button", { key: '0b70f6228a37975997fc7e6f060aed85709eb992', "aria-hidden": "true", class: {
+            }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onPointerDown: this.numberButtonPointerDownHandler, onPointerOut: this.numberButtonPointerUpAndOutHandler, onPointerUp: this.numberButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { key: '750d67b79ad8c3dfdb7bec8e38efe0f6b150af23', icon: "chevron-up", scale: getIconScale(this.scale) })));
+        const numberButtonsHorizontalDown = (h("button", { key: '6cff7df4c63e5c0388244dad1d185d6b6661d5a5', "aria-hidden": "true", class: {
                 [CSS.numberButtonItem]: true,
                 [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", { key: '22335c3ef4d615b4938b8ea1c2bc375eec65fd1b', icon: "chevron-down", scale: getIconScale(this.scale) })));
-        const numberButtonsVertical = (h("div", { key: 'd588f6413ab8cb2ee9bb25b7fa6c1ae436c09727', class: CSS.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
-        const prefixText = h("div", { key: 'd653764ca74047a6b1c5a8526e1de5b5ebec2f95', class: CSS.prefix }, this.prefixText);
-        const suffixText = h("div", { key: 'a6d815022a67a216ecbf6a98476dd9c84f393031', class: CSS.suffix }, this.suffixText);
+            }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.numberButtonPointerDownHandler, onPointerOut: this.numberButtonPointerUpAndOutHandler, onPointerUp: this.numberButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, h("calcite-icon", { key: 'd0dd3b76e18a8c61d02da733f115e945ce67d3e4', icon: "chevron-down", scale: getIconScale(this.scale) })));
+        const numberButtonsVertical = (h("div", { key: 'b13c18cd510876510499b305f2fec5fe21b3d5c9', class: CSS.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
+        const prefixText = h("div", { key: 'c6c1fb7f76df5c032b4f56ccf25589cf7aa6afa5', class: CSS.prefix }, this.prefixText);
+        const suffixText = h("div", { key: 'bcfbdaa2e2f0eb409e21ea79661c7fee51284565', class: CSS.suffix }, this.suffixText);
         const autofocus = this.el.autofocus || this.el.hasAttribute("autofocus") ? true : null;
         const enterKeyHint = this.el.enterKeyHint || this.el.getAttribute("enterkeyhint");
         const inputMode = this.el.inputMode || this.el.getAttribute("inputmode");
-        const localeNumberInput = this.type === "number" ? (h("input", { accept: this.accept, "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: autofocus, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: enterKeyHint, inputMode: inputMode, key: "localized-input", maxLength: this.maxLength, minLength: this.minLength, multiple: this.multiple, name: undefined, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputNumberInputHandler, onKeyDown: this.inputNumberKeyDownHandler, onKeyUp: this.inputKeyUpHandler, pattern: this.pattern, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildNumberElRef, type: "text", value: this.displayedValue })) : null;
+        const localeNumberInput = this.type === "number" ? (h("input", { accept: this.accept, "aria-errormessage": IDS.validationMessage, "aria-invalid": toAriaBoolean(this.status === "invalid"), "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: autofocus, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: enterKeyHint, inputMode: inputMode, key: "localized-input", maxLength: this.maxLength, minLength: this.minLength, multiple: this.multiple, name: undefined, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputNumberInputHandler, onKeyDown: this.inputNumberKeyDownHandler, onKeyUp: this.inputKeyUpHandler, pattern: this.pattern, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildNumberElRef, type: "text", value: this.displayedValue })) : null;
         const childEl = this.type !== "number"
             ? [
-                h(this.childElType, { accept: this.accept, "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: autofocus, class: {
+                h(this.childElType, { accept: this.accept, "aria-errormessage": IDS.validationMessage, "aria-invalid": toAriaBoolean(this.status === "invalid"), "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: autofocus, class: {
                         [CSS.editingEnabled]: this.editingEnabled,
                         [CSS.inlineChild]: !!this.inlineEditableEl,
                     }, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: enterKeyHint, inputMode: 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, ref: this.setChildElRef, required: this.required ? true : null, step: this.step, tabIndex: this.disabled || (this.inlineEditableEl && !this.editingEnabled) ? -1 : null, type: this.type, value: this.value }),
                 this.isTextarea ? (h("div", { class: CSS.resizeIconWrapper }, h("calcite-icon", { icon: "chevron-down", scale: getIconScale(this.scale) }))) : null,
             ]
             : null;
-        return (h(Host, { key: '8315bd55591b2d846d69d6070571a17e0030d5c7', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { key: 'af0643a63ad73a63a4cac7fda338f47cdd890bdd', disabled: this.disabled }, h("div", { key: 'b92bfabff6dfc6115c0f289cc7c7b788862f2054', class: { [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly
+        return (h(Host, { key: '198e766a57555d29b9e9d44f5a0f10c567e76580', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { key: '1edb87a044afe283f7d0f05634140c95eedea38d', disabled: this.disabled }, h("div", { key: 'e85d3459d2a562f9e31ae6a30a778eb6d13e7893', class: { [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" }, ref: (el) => (this.inputWrapperEl = el) }, this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly
             ? numberButtonsHorizontalDown
-            : null, this.prefixText ? prefixText : null, h("div", { key: '99b9ced0f2b9ee174b5c87603fd7cc6742d6da8e', class: CSS.wrapper }, localeNumberInput, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), h("div", { key: '86159febefcb1d62d05b2c15f7ffb5cec2810e69', class: CSS.actionWrapper }, h("slot", { key: '4e58925d61432853348fb86c9b1fea217ee6f45b', name: SLOTS.action })), this.type === "number" && this.numberButtonType === "vertical" && !this.readOnly
+            : null, this.prefixText ? prefixText : null, h("div", { key: '75535abc2ee1295fa510dd872dadea8074bcc3d5', class: CSS.wrapper }, localeNumberInput, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), h("div", { key: 'dbdc59f5e4e35e5704e54ddebf67bef0e3a88956', class: CSS.actionWrapper, ref: (el) => (this.actionWrapperEl = el) }, h("slot", { key: '33a1ad6b9e45aeeb8586fe615b41eaa2590660c1', name: SLOTS.action })), this.type === "number" && this.numberButtonType === "vertical" && !this.readOnly
             ? numberButtonsVertical
             : null, this.suffixText ? suffixText : null, this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly
             ? numberButtonsHorizontalUp
-            : null, h(HiddenFormInputSlot, { key: '24d8b7e1f68d438177e528c244b341b02ef7d5a0', component: this })), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+            : null, h(HiddenFormInputSlot, { key: '36b79e21780048c535ad95ac4e2ad7ab9b3c91e2', component: this })), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
@@ -706,7 +711,7 @@ const Progress = class {
         const isDeterminate = this.type === "determinate";
         const barStyles = isDeterminate ? { width: `${this.value * 100}%` } : {};
         const dir = getElementDir(this.el);
-        return (h("div", { key: '5d06cbdb88ab78d7219ed5360aeb54713d24b7e6', "aria-label": this.label || this.text, "aria-valuemax": 1, "aria-valuemin": 0, "aria-valuenow": this.value, role: "progressbar" }, h("div", { key: '9adc549e8ea4f516eb6df4bac52e33e903c61978', class: "track" }, h("div", { key: '57c31717d7f2c7e13782faa4a46060e3d583aad2', class: {
+        return (h("div", { key: 'e8fa0a71d84cf7af5c16fb1d68691488cb9f28b8', "aria-label": this.label || this.text, "aria-valuemax": 1, "aria-valuemin": 0, "aria-valuenow": this.value, role: "progressbar" }, h("div", { key: 'd779cb380c3aedc8499ce91f6ec935ebc58c3b39', class: "track" }, h("div", { key: '88b61799e4c0e15eb9c3493448cf2704fa481e6c', class: {
                 bar: true,
                 indeterminate: this.type === "indeterminate",
                 [CSS_UTILITY.rtl]: dir === "rtl",

package/dist/esm/calcite-label.entry.js

@@ -3,17 +3,17 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-e3f04fa1.js';
-import { a as associateExplicitLabelToUnlabeledComponent, l as labelConnectedEvent, b as labelDisconnectedEvent } from './label-38802319.js';
-import './dom-982585e7.js';
-import './guid-5c959cfd.js';
-import './resources-3bc82696.js';
-import './component-e3f05da5.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b793d9aa.js';
+import { a as associateExplicitLabelToUnlabeledComponent, l as labelConnectedEvent, b as labelDisconnectedEvent } from './label-0b82858a.js';
+import './dom-b5c50286.js';
+import './guid-4c746a7f.js';
+import './resources-defbb49f.js';
+import './component-c2c32481.js';
 
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
- * v2.11.1
+ * v2.12.0
  */
 const CSS = {
     container: "container",
@@ -32,6 +32,9 @@ const Label = class {
         //
         //--------------------------------------------------------------------------
         this.labelClickHandler = (event) => {
+            if (window.getSelection()?.type === "Range") {
+                return;
+            }
             this.calciteInternalLabelClick.emit({
                 sourceEvent: event,
             });
@@ -56,7 +59,7 @@ const Label = class {
         document.dispatchEvent(new CustomEvent(labelDisconnectedEvent));
     }
     render() {
-        return (h(Host, { key: '41b0e79fa4984972606fb6c73a9940413f8f863a', onClick: this.labelClickHandler }, h("div", { key: '21adb621d9944f95bdf632c0717f9debdc844865', class: CSS.container }, h("slot", { key: 'cea575ac40565f9aff87e8ad36653b785f758224' }))));
+        return (h(Host, { key: '739ed848a243f79c054a6f54053c51f9242894d3', onClick: this.labelClickHandler }, h("div", { key: '8120cfb138e2400638a63a11e734fad32116bc4a', class: CSS.container }, h("slot", { key: 'b46b9328d7b02ed9e959d8db45e4fdb9711e969a' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/calcite-link.entry.js

@@ -3,13 +3,13 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-e3f04fa1.js';
-import { a as getElementDir, e as focusElement } from './dom-982585e7.js';
-import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive-1d03c7ff.js';
-import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-869378d9.js';
-import { C as CSS_UTILITY } from './resources-3bc82696.js';
-import './guid-5c959cfd.js';
-import './browser-8c71dd57.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-b793d9aa.js';
+import { a as getElementDir, e as focusElement } from './dom-b5c50286.js';
+import { c as connectInteractive, u as updateHostInteraction, d as disconnectInteractive, I as InteractiveContainer } from './interactive-742ba555.js';
+import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable-73f289b6.js';
+import { C as CSS_UTILITY } from './resources-defbb49f.js';
+import './guid-4c746a7f.js';
+import './browser-552eb2d0.js';
 
 const linkCss = ":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{display:inline}:host a,:host span{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:0px;border-style:none;font-family:inherit;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;text-decoration:none;line-height:inherit;font-size:inherit;-webkit-appearance:none}:host a:hover,:host span:hover{text-decoration:none}:host a,:host span{outline-color:transparent}:host a:focus,:host span:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}calcite-icon{inline-size:1em;block-size:1em;min-inline-size:unset;min-block-size:unset}.calcite-link--icon{vertical-align:middle;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-block-start:-0.25em}:host .calcite-link--icon.icon-start{margin-inline-end:0.5rem}:host .calcite-link--icon.icon-end{margin-inline-start:0.5rem}:host span,:host a{position:relative;display:inline;border-style:none;background-color:transparent;padding:0px;color:var(--calcite-color-text-link);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;line-height:inherit;white-space:initial;background-image:linear-gradient(currentColor, currentColor), linear-gradient(var(--calcite-color-brand-underline), var(--calcite-color-brand-underline));background-position-x:0%, 100%;background-position-y:min(1.5em, 100%);background-repeat:no-repeat, no-repeat;background-size:0% 1px, 100% 1px}:host span:hover,:host span:focus,:host a:hover,:host a:focus{background-size:100% 1px, 100% 1px}:host span:active,:host a:active{background-size:100% 2px, 100% 2px}:host span.calcite--rtl,:host a.calcite--rtl{background-position:100% 100%, 100% 100%}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}";
 const CalciteLinkStyle0 = linkCss;
@@ -64,17 +64,17 @@ const Link = class {
         const { download, el } = this;
         const dir = getElementDir(el);
         const childElType = this.href ? "a" : "span";
-        const iconStartEl = (h("calcite-icon", { key: '901c80bf0ce7cb55fd322a1e8feb698a30d0f953', class: "calcite-link--icon icon-start", flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
-        const iconEndEl = (h("calcite-icon", { key: 'a7749d95babda99b7f7a3d4792ecbf69409d03c5', class: "calcite-link--icon icon-end", flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
+        const iconStartEl = (h("calcite-icon", { key: '98cdfc979033eb5e339557d4d1a2143c9db9481d', class: "calcite-link--icon icon-start", flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
+        const iconEndEl = (h("calcite-icon", { key: 'df0cfff6b187899330ec32a74132ca9d6ccb71f6', class: "calcite-link--icon icon-end", flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
         const Tag = childElType;
         const role = childElType === "span" ? "link" : null;
         const tabIndex = childElType === "span" ? 0 : null;
-        return (h(Host, { key: '58d423e9f5c1bec3135f26c08610ea00d7470d40', role: "presentation" }, h(InteractiveContainer, { key: '41e5cf76b18008ccbd0757a090cdf8b705c5121c', disabled: this.disabled }, h(Tag, { key: '3afbc9c30a4b3ca87361c31f2c0f7b41f0f7b229', class: { [CSS_UTILITY.rtl]: dir === "rtl" },
+        return (h(Host, { key: 'e0db07bcdf54a1558d2ee5f7d72dc6b3c9b7b4fc', role: "presentation" }, h(InteractiveContainer, { key: '84e1d20ffe03e7776560fa3f3bcc51a0e17c39ca', disabled: this.disabled }, h(Tag, { key: '3d37687afd90675d8aab80bce396e765d81b580e', class: { [CSS_UTILITY.rtl]: dir === "rtl" },
             /*
           When the 'download' property of type 'boolean | string' is set to true, the value is "".
           This works around that issue for now.
           */
-            download: Tag === "a" && (download === "" || download) ? download : null, href: Tag === "a" && this.href, onClick: this.childElClickHandler, ref: this.storeTagRef, rel: Tag === "a" && this.rel, role: role, tabIndex: tabIndex, target: Tag === "a" && this.target }, this.iconStart ? iconStartEl : null, h("slot", { key: 'd4c009ba0573c23d7de329e51ad424f008e9b3e3' }), this.iconEnd ? iconEndEl : null))));
+            download: Tag === "a" && (download === "" || download) ? download : null, href: Tag === "a" && this.href, onClick: this.childElClickHandler, ref: this.storeTagRef, rel: Tag === "a" && this.rel, role: role, tabIndex: tabIndex, target: Tag === "a" && this.target }, this.iconStart ? iconStartEl : null, h("slot", { key: '14a04fe0a03318cfa130744530bff8d68450c317' }), this.iconEnd ? iconEndEl : null))));
     }
     //--------------------------------------------------------------------------
     //