@esri/calcite-components 2.8.1 → 2.8.3

package/dist/extras/vscode-data.json

@@ -443,6 +443,12 @@
             {
               "name": "left-end"
             },
+            {
+              "name": "leading"
+            },
+            {
+              "name": "trailing"
+            },
             {
               "name": "auto-start"
             },
@@ -452,18 +458,12 @@
             {
               "name": "leading-start"
             },
-            {
-              "name": "leading"
-            },
             {
               "name": "leading-end"
             },
             {
               "name": "trailing-end"
             },
-            {
-              "name": "trailing"
-            },
             {
               "name": "trailing-start"
             }
@@ -2512,6 +2512,10 @@
           "name": "autocomplete",
           "description": "Specifies the type of content to autocomplete, for use in forms.\nRead the native attribute's documentation on MDN for more info."
         },
+        {
+          "name": "autofocus",
+          "description": "Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726"
+        },
         {
           "name": "clearable",
           "description": "When `true`, a clear button is displayed when the component has a value. The clear button shows by default for `\"search\"`, `\"time\"`, and `\"date\"` types, and will not display for the `\"textarea\"` type."
@@ -2961,6 +2965,10 @@
           "name": "autocomplete",
           "description": "Specifies the type of content to autocomplete, for use in forms.\nRead the native attribute's documentation on MDN for more info."
         },
+        {
+          "name": "autofocus",
+          "description": "Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726"
+        },
         {
           "name": "clearable",
           "description": "When `true`, a clear button is displayed when the component has a value."
@@ -3143,6 +3151,10 @@
           "name": "autocomplete",
           "description": "Specifies the type of content to autocomplete, for use in forms.\nRead the native attribute's documentation on MDN for more info."
         },
+        {
+          "name": "autofocus",
+          "description": "Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726"
+        },
         {
           "name": "clearable",
           "description": "When `true`, a clear button is displayed when the component has a value."
@@ -3348,6 +3360,12 @@
             {
               "name": "left-end"
             },
+            {
+              "name": "leading"
+            },
+            {
+              "name": "trailing"
+            },
             {
               "name": "auto-start"
             },
@@ -3357,18 +3375,12 @@
             {
               "name": "leading-start"
             },
-            {
-              "name": "leading"
-            },
             {
               "name": "leading-end"
             },
             {
               "name": "trailing-end"
             },
-            {
-              "name": "trailing"
-            },
             {
               "name": "trailing-start"
             }
@@ -4716,6 +4728,12 @@
             {
               "name": "left-end"
             },
+            {
+              "name": "leading"
+            },
+            {
+              "name": "trailing"
+            },
             {
               "name": "auto-start"
             },
@@ -4725,18 +4743,12 @@
             {
               "name": "leading-start"
             },
-            {
-              "name": "leading"
-            },
             {
               "name": "leading-end"
             },
             {
               "name": "trailing-end"
             },
-            {
-              "name": "trailing"
-            },
             {
               "name": "trailing-start"
             }
@@ -6893,6 +6905,12 @@
             {
               "name": "left-end"
             },
+            {
+              "name": "leading"
+            },
+            {
+              "name": "trailing"
+            },
             {
               "name": "auto-start"
             },
@@ -6902,18 +6920,12 @@
             {
               "name": "leading-start"
             },
-            {
-              "name": "leading"
-            },
             {
               "name": "leading-end"
             },
             {
               "name": "trailing-end"
             },
-            {
-              "name": "trailing"
-            },
             {
               "name": "trailing-start"
             }

package/dist/loader/cdn.js

@@ -1,7 +1,7 @@
 /*!
  * 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.1
+ * v2.8.3
  */
 module.exports = require('../cjs/loader.cjs.js');
 module.exports.applyPolyfills = function() { return Promise.resolve() };

package/dist/loader/index.cjs.js

@@ -1,7 +1,7 @@
 /*!
  * 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.1
+ * v2.8.3
  */
 module.exports = require('../cjs/loader.cjs.js');
 module.exports.applyPolyfills = function() { return Promise.resolve() };

package/dist/loader/index.es2017.js

@@ -1,7 +1,7 @@
 /*!
  * 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.1
+ * v2.8.3
  */
 export * from '../esm/polyfills/index.js';
 export * from '../esm/loader.js';

package/dist/loader/index.js

@@ -1,7 +1,7 @@
 /*!
  * 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.1
+ * v2.8.3
  */
 (function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
 export * from '../esm/polyfills/index.js';

package/dist/stencil.config.js

@@ -1,7 +1,7 @@
 /*!
  * 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.1
+ * v2.8.3
  */
 import { postcss } from "@stencil-community/postcss";
 import { sass } from "@stencil/sass";

package/dist/support/formatting.js

@@ -1,7 +1,7 @@
 /*!
  * 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.1
+ * v2.8.3
  */
 import dedent from "dedent";
 export function html(strings, ...placeholders) {

package/dist/support/preact.js

@@ -1,7 +1,7 @@
 /*!
  * 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.1
+ * v2.8.3
  */
 import { join } from "path";
 export const generatePreactTypes = async (config, compilerCtx, buildCtx) => {

package/dist/tailwind.config.js

@@ -1,7 +1,7 @@
 /*!
  * 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.1
+ * v2.8.3
  */
 import calcitePreset from "./calcite-preset";
 export default {

package/dist/types/components/combobox/combobox.d.ts

@@ -138,7 +138,7 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
      * When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.
      */
     readOnly: boolean;
-    documentClickHandler(event: PointerEvent): void;
+    documentClickHandler(event: PointerEvent): Promise<void>;
     calciteComboboxItemChangeHandler(event: CustomEvent<HTMLCalciteComboboxItemElement>): void;
     /**
      * Updates the position of the component.

package/dist/types/components/input/input.d.ts

@@ -19,7 +19,7 @@ export declare class Input implements LabelableComponent, FormComponent, Interac
     /**
      * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726
      *
-     * @internal
+     * @ignore
      */
     autofocus: boolean;
     /**

package/dist/types/components/input-number/input-number.d.ts

@@ -19,7 +19,7 @@ export declare class InputNumber implements LabelableComponent, FormComponent, I
     /**
      * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726
      *
-     * @internal
+     * @ignore
      */
     autofocus: boolean;
     /**

package/dist/types/components/input-text/input-text.d.ts

@@ -18,7 +18,7 @@ export declare class InputText implements LabelableComponent, FormComponent, Int
     /**
      * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726
      *
-     * @internal
+     * @ignore
      */
     autofocus: boolean;
     /**

package/dist/types/components.d.ts

@@ -2036,6 +2036,7 @@ export namespace Components {
         "autocomplete": string;
         /**
           * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726
+          * @ignore
          */
         "autofocus": boolean;
         /**
@@ -2380,6 +2381,7 @@ export namespace Components {
         "autocomplete": string;
         /**
           * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726
+          * @ignore
          */
         "autofocus": boolean;
         /**
@@ -2552,6 +2554,7 @@ export namespace Components {
         "autocomplete": string;
         /**
           * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726
+          * @ignore
          */
         "autofocus": boolean;
         /**
@@ -9545,6 +9548,11 @@ declare namespace LocalJSX {
           * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
          */
         "autocomplete"?: string;
+        /**
+          * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726
+          * @ignore
+         */
+        "autofocus"?: boolean;
         /**
           * When `true`, a clear button is displayed when the component has a value. The clear button shows by default for `"search"`, `"time"`, and `"date"` types, and will not display for the `"textarea"` type.
          */
@@ -9873,6 +9881,11 @@ declare namespace LocalJSX {
           * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
          */
         "autocomplete"?: string;
+        /**
+          * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726
+          * @ignore
+         */
+        "autofocus"?: boolean;
         /**
           * When `true`, a clear button is displayed when the component has a value.
          */
@@ -10022,6 +10035,11 @@ declare namespace LocalJSX {
           * @mdn [step](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
          */
         "autocomplete"?: string;
+        /**
+          * Adds global prop, missing from Stencil's `HTMLElement` type, see https://github.com/ionic-team/stencil/issues/5726
+          * @ignore
+         */
+        "autofocus"?: boolean;
         /**
           * When `true`, a clear button is displayed when the component has a value.
          */

package/dist/types/home/runner/work/calcite-design-system/calcite-design-system/packages/calcite-components/.stencil/stencil.config.d.ts

@@ -0,0 +1,3 @@
+import { Config } from "../../../../../../../../stencil-public-runtime";
+export declare const create: () => Config;
+export declare const config: Config;

package/hydrate/index.js

@@ -1,7 +1,7 @@
 /*!
  * 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.1
+ * v2.8.3
  */
 'use strict';
 
@@ -24561,7 +24561,7 @@ class ColorPickerSwatch {
 
 /**
  * Do not edit directly
- * Generated on Tue, 14 May 2024 19:22:53 GMT
+ * Generated on Tue, 21 May 2024 03:53:48 GMT
  */
 const calciteSize24 = "24px";
 const calciteSize32 = "32px";
@@ -24719,12 +24719,21 @@ function getPaddingObject(padding) {
   };
 }
 function rectToClientRect(rect) {
+  const {
+    x,
+    y,
+    width,
+    height
+  } = rect;
   return {
-    ...rect,
-    top: rect.y,
-    left: rect.x,
-    right: rect.x + rect.width,
-    bottom: rect.y + rect.height
+    width,
+    height,
+    top: y,
+    left: x,
+    right: x + width,
+    bottom: y + height,
+    x,
+    y
   };
 }
 
@@ -24913,9 +24922,10 @@ async function detectOverflow(state, options) {
     strategy
   }));
   const rect = elementContext === 'floating' ? {
-    ...rects.floating,
     x,
-    y
+    y,
+    width: rects.floating.width,
+    height: rects.floating.height
   } : rects.reference;
   const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
   const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
@@ -25324,6 +25334,8 @@ async function convertValueToCoords(state, options) {
   const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
   const crossAxisMulti = rtl && isVertical ? -1 : 1;
   const rawValue = evaluate(options, state);
+
+  // eslint-disable-next-line prefer-const
   let {
     mainAxis,
     crossAxis,
@@ -25522,9 +25534,8 @@ function getContainingBlock(element) {
   while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
     if (isContainingBlock(currentNode)) {
       return currentNode;
-    } else {
-      currentNode = getParentNode(currentNode);
     }
+    currentNode = getParentNode(currentNode);
   }
   return null;
 }
@@ -26888,14 +26899,11 @@ class Combobox {
     //  Event Listeners
     //
     //--------------------------------------------------------------------------
-    documentClickHandler(event) {
-        if (this.disabled) {
-            return;
-        }
-        const composedPath = event.composedPath();
-        if (composedPath.includes(this.el) || composedPath.includes(this.referenceEl)) {
+    async documentClickHandler(event) {
+        if (this.disabled || event.composedPath().includes(this.el)) {
             return;
         }
+        await componentOnReady(this.el);
         if (!this.allowCustomValues && this.textInput.value) {
             this.clearInputValue();
             this.filterItems("");
@@ -27465,7 +27473,7 @@ class Combobox {
         const singleSelectionDisplay = selectionDisplay === "single";
         const fitSelectionDisplay = !singleSelectionMode && selectionDisplay === "fit";
         const isClearable = !this.clearDisabled && this.value?.length > 0;
-        return (hAsync(Host, { key: 'd7bb6fbd99d46d6baacd027bf67d440156aa8235', onClick: this.comboboxFocusHandler }, hAsync(InteractiveContainer, { key: 'f0e960f155ffed736782818874432e49aec7da43', disabled: this.disabled }, hAsync("div", { key: '5b69d59411f589c99d1087ffc9d2f34a02ce4abf', "aria-live": "polite", class: {
+        return (hAsync(Host, { key: '7cbc53f168cbff2b02f98f3fdc1c1849e43d966c', onClick: this.comboboxFocusHandler }, hAsync(InteractiveContainer, { key: '2256c21d984b0780dcfcc274c180378db1ae4ce4', disabled: this.disabled }, hAsync("div", { key: 'adee2918800c29dd2db682eb7a91817d01a48d43', "aria-live": "polite", class: {
                 wrapper: true,
                 "wrapper--single": singleSelectionMode || !this.selectedItems.length,
                 "wrapper--active": open,
@@ -27483,7 +27491,7 @@ class Combobox {
             this.renderSelectedIndicatorChipCompact(),
             this.renderAllSelectedIndicatorChip(),
             this.renderAllSelectedIndicatorChipCompact(),
-        ], hAsync("label", { key: '9b9988f68638cbf4b5379e815dd9ed88b5b83430', class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label), this.renderInput()), !readOnly && isClearable ? (hAsync(XButton, { disabled: this.disabled, key: "close-button", label: this.messages.clear, scale: this.scale })) : null, !readOnly && this.renderChevronIcon()), hAsync("ul", { key: 'e52aae918a2ad75c1f84e6761d4651a59397e5f7', "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-multiselectable": "true", class: "screen-readers-only", id: `${listboxUidPrefix}${guid}`, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()), this.renderFloatingUIContainer(), hAsync(HiddenFormInputSlot, { key: 'feb9c678d698e149bc58b0aed458dee9d6fb8115', component: this }), this.validationMessage && this.status === "invalid" ? (hAsync(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+        ], hAsync("label", { key: '05f82237cd70af6687626bc890db45d3255efe96', class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label), this.renderInput()), !readOnly && isClearable ? (hAsync(XButton, { disabled: this.disabled, key: "close-button", label: this.messages.clear, scale: this.scale })) : null, !readOnly && this.renderChevronIcon()), hAsync("ul", { key: 'e3355bc4a28ae9e5b6ef22f01c662ab84860f758', "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-multiselectable": "true", class: "screen-readers-only", id: `${listboxUidPrefix}${guid}`, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()), this.renderFloatingUIContainer(), hAsync(HiddenFormInputSlot, { key: '57a1996e58728b2d1d4aedf73cd2b925920d2144', component: this }), this.validationMessage && this.status === "invalid" ? (hAsync(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
@@ -31935,21 +31943,21 @@ class Input {
     // --------------------------------------------------------------------------
     render() {
         const dir = getElementDir(this.el);
-        const loader = (hAsync("div", { key: '1884ffeed7fcf0bfde46093ff9f46493816f0055', class: CSS$R.loader }, hAsync("calcite-progress", { key: 'b0750b82c21c0cb3c493b303efe11ed9b612f615', label: this.messages.loading, type: "indeterminate" })));
-        const inputClearButton = (hAsync("button", { key: '3a62ed45c9f2bee09604123b190f95c083a8a695', "aria-label": this.messages.clear, class: CSS$R.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { key: '90b32c8ffbbe2374061e7b30435a9305c7fb4ba1', icon: "x", scale: getIconScale(this.scale) })));
-        const iconEl = (hAsync("calcite-icon", { key: 'd1444a28cae517a598ea419ef6dc598e216c6d66', class: CSS$R.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: getIconScale(this.scale) }));
+        const loader = (hAsync("div", { key: 'b8611c67559682fd64ded80a0beddbd052f6fe2f', class: CSS$R.loader }, hAsync("calcite-progress", { key: '84c686cba5249dae749bb44955e9a213cbed4943', label: this.messages.loading, type: "indeterminate" })));
+        const inputClearButton = (hAsync("button", { key: 'a87ff81e4d8c269d2a223c773f7d5c0fb0216690', "aria-label": this.messages.clear, class: CSS$R.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { key: '2f88616c3cc07201c049d25ee032bd819d1f14f1', icon: "x", scale: getIconScale(this.scale) })));
+        const iconEl = (hAsync("calcite-icon", { key: '536bc3560e1cb98bc9ec48c88396bf947b5ec341', class: CSS$R.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: getIconScale(this.scale) }));
         const isHorizontalNumberButton = this.numberButtonType === "horizontal";
-        const numberButtonsHorizontalUp = (hAsync("button", { key: '166277b8246c54c107f9a83c09d2d50c010befe1', "aria-hidden": "true", class: {
+        const numberButtonsHorizontalUp = (hAsync("button", { key: 'f1aa09c7c05fbc66df54e8e655f2fbad0e8b962c', "aria-hidden": "true", class: {
                 [CSS$R.numberButtonItem]: true,
                 [CSS$R.buttonItemHorizontal]: isHorizontalNumberButton,
-            }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onPointerDown: this.numberButtonPointerDownHandler, onPointerOut: this.numberButtonPointerUpAndOutHandler, onPointerUp: this.numberButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { key: 'f75bc0589ec77e573261b36deee28c04c0741261', icon: "chevron-up", scale: getIconScale(this.scale) })));
-        const numberButtonsHorizontalDown = (hAsync("button", { key: '25987f1ae2515635ebd39262f39b44ccfa0c796b', "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" }, hAsync("calcite-icon", { key: '12b3fd28215d661525be63f614411287aa08e0fb', icon: "chevron-up", scale: getIconScale(this.scale) })));
+        const numberButtonsHorizontalDown = (hAsync("button", { key: '3e57ba83119f351060ed012fe4332a56dfd991d4', "aria-hidden": "true", class: {
                 [CSS$R.numberButtonItem]: true,
                 [CSS$R.buttonItemHorizontal]: isHorizontalNumberButton,
-            }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.numberButtonPointerDownHandler, onPointerOut: this.numberButtonPointerUpAndOutHandler, onPointerUp: this.numberButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { key: '908fc536cfe9454e0beb197389f6da3a79289a3c', icon: "chevron-down", scale: getIconScale(this.scale) })));
-        const numberButtonsVertical = (hAsync("div", { key: '2341b183f27f4b58ddcc420b92550e49dd969785', class: CSS$R.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
-        const prefixText = hAsync("div", { key: '1c77b20fb24235a8aa5257738c3054d69174cfa0', class: CSS$R.prefix }, this.prefixText);
-        const suffixText = hAsync("div", { key: 'df73cf568077b6142335dfd1e733861cf4c5674b', class: CSS$R.suffix }, this.suffixText);
+            }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.numberButtonPointerDownHandler, onPointerOut: this.numberButtonPointerUpAndOutHandler, onPointerUp: this.numberButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { key: 'daf34d239d12e945aa623ed5b36e8d17e9a2e5d6', icon: "chevron-down", scale: getIconScale(this.scale) })));
+        const numberButtonsVertical = (hAsync("div", { key: '7301bb025d47c2137cfed412c1fb576fed9a2095', class: CSS$R.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
+        const prefixText = hAsync("div", { key: '11dc889ef37e67ee0f0f73e54b7ce27eef7d88be', class: CSS$R.prefix }, this.prefixText);
+        const suffixText = hAsync("div", { key: 'ddb9a1f7ebae815d2cf0d3c79ba3703f244c1c84', class: CSS$R.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");
@@ -31967,13 +31975,13 @@ class Input {
                 this.isTextarea ? (hAsync("div", { class: CSS$R.resizeIconWrapper }, hAsync("calcite-icon", { icon: "chevron-down", scale: getIconScale(this.scale) }))) : null,
             ]
             : null;
-        return (hAsync(Host, { key: 'f53bbe522d4f2fcb0e1f37d42232b5064b1a698b', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, hAsync(InteractiveContainer, { key: '9005fd3873aa7357e70761b5273276fe89ef9926', disabled: this.disabled }, hAsync("div", { key: '605663ee739b9a691f3e52a3240564832278a383', class: { [CSS$R.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly
+        return (hAsync(Host, { key: 'd85f76e488d456eb0a7c2ae9bc7daf195463409a', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, hAsync(InteractiveContainer, { key: '3289a4cad3353bf744476144c493b25b2fd21e55', disabled: this.disabled }, hAsync("div", { key: '70c56455cf02bff933428c63499a4c05d49849e7', class: { [CSS$R.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly
             ? numberButtonsHorizontalDown
-            : null, this.prefixText ? prefixText : null, hAsync("div", { key: '1976b94364a2af1d4806e04ff9cdefba4ad9be0d', class: CSS$R.wrapper }, localeNumberInput, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), hAsync("div", { key: '0f7edfae9afda2d256cb110cc32d0145b177374d', class: CSS$R.actionWrapper }, hAsync("slot", { key: 'b319611c3dec08757e16009fa48459013c5cc9c6', name: SLOTS$l.action })), this.type === "number" && this.numberButtonType === "vertical" && !this.readOnly
+            : null, this.prefixText ? prefixText : null, hAsync("div", { key: 'a6d9a32e41dd867c9f2284a16c55188c3d8024c7', class: CSS$R.wrapper }, localeNumberInput, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), hAsync("div", { key: 'dff205b764e3f8818a3ff8b2e68fbad387aab0b1', class: CSS$R.actionWrapper }, hAsync("slot", { key: '1d10788964cace3ea9f87db3b67f1d51a174218d', name: SLOTS$l.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, hAsync(HiddenFormInputSlot, { key: '94fe9aa1975d21023b7d572724472d4ce9580618', component: this })), this.validationMessage && this.status === "invalid" ? (hAsync(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+            : null, hAsync(HiddenFormInputSlot, { key: 'f551976332e2fb77ed861b2d744e67939e88c211', component: this })), this.validationMessage && this.status === "invalid" ? (hAsync(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
@@ -34425,29 +34433,29 @@ class InputNumber {
     // --------------------------------------------------------------------------
     render() {
         const dir = getElementDir(this.el);
-        const loader = (hAsync("div", { key: 'd3abc6524b00871ffeffe5171a89bcc353233d6f', class: CSS$P.loader }, hAsync("calcite-progress", { key: '34f27e211f9350d039c98025d14e9f892c6889b1', label: this.messages.loading, type: "indeterminate" })));
-        const inputClearButton = (hAsync("button", { key: '69be5ed912fe252d1114d1669f5384f2fff36985', "aria-label": this.messages.clear, class: CSS$P.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { key: 'e6bccd77006324a927bfed9e6f1bc85203218a76', icon: "x", scale: getIconScale(this.scale) })));
-        const iconEl = (hAsync("calcite-icon", { key: 'f6a6df5e037ec3cc285914781f0ca933b715457a', class: CSS$P.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: getIconScale(this.scale) }));
+        const loader = (hAsync("div", { key: 'fab2666adcf8baf1fc6580cb287668f171f0afbb', class: CSS$P.loader }, hAsync("calcite-progress", { key: '03c73149b1548ad5b02e28ed9111fe07ec4742e2', label: this.messages.loading, type: "indeterminate" })));
+        const inputClearButton = (hAsync("button", { key: '235835dd4bc67454ae87548fd69f596b203e0014', "aria-label": this.messages.clear, class: CSS$P.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { key: '1255f76c49bb9c0cc26f3cfbf948471d904f709e', icon: "x", scale: getIconScale(this.scale) })));
+        const iconEl = (hAsync("calcite-icon", { key: 'c08a14c7003e586f1b7a17e01c35c722455e7276', class: CSS$P.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: getIconScale(this.scale) }));
         const isHorizontalNumberButton = this.numberButtonType === "horizontal";
-        const numberButtonsHorizontalUp = (hAsync("button", { key: '9fa39d70a263f45b278fcc659bff7bb580a76476', "aria-hidden": "true", class: {
+        const numberButtonsHorizontalUp = (hAsync("button", { key: 'cc75dbe00e2b3f892070dd7be2ac3c9f4b56cf28', "aria-hidden": "true", class: {
                 [CSS$P.numberButtonItem]: true,
                 [CSS$P.buttonItemHorizontal]: isHorizontalNumberButton,
-            }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerOutHandler, onPointerUp: this.nudgeButtonPointerUpHandler, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { key: 'a9501d854f142a011fb20b3f047d101468a1f0f1', icon: "chevron-up", scale: getIconScale(this.scale) })));
-        const numberButtonsHorizontalDown = (hAsync("button", { key: '3009cd2f9754a0d4e7b3ec6d119e84616fda412f', "aria-hidden": "true", class: {
+            }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerOutHandler, onPointerUp: this.nudgeButtonPointerUpHandler, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { key: '1713a9e47e2713ecfb65e9957b8da94ad090dad2', icon: "chevron-up", scale: getIconScale(this.scale) })));
+        const numberButtonsHorizontalDown = (hAsync("button", { key: '7c82850c77354a92bfa48d5f85cb0f5fa2f066d7', "aria-hidden": "true", class: {
                 [CSS$P.numberButtonItem]: true,
                 [CSS$P.buttonItemHorizontal]: isHorizontalNumberButton,
-            }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerOutHandler, onPointerUp: this.nudgeButtonPointerUpHandler, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { key: 'e2e482cc27c44425f563c1fb4fc2bc3a51475b8c', icon: "chevron-down", scale: getIconScale(this.scale) })));
-        const numberButtonsVertical = (hAsync("div", { key: 'dce41157e536fed2194176d8a58b47e0a723d5c2', class: CSS$P.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
-        const prefixText = hAsync("div", { key: '403b46f76746d51cb2f5c638c706f8988a57d80b', class: CSS$P.prefix }, this.prefixText);
-        const suffixText = hAsync("div", { key: '8c1c73d41f7d8ee21013975afc5cf1a791ff56f3', class: CSS$P.suffix }, this.suffixText);
+            }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerOutHandler, onPointerUp: this.nudgeButtonPointerUpHandler, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { key: 'a155879a7bfcdb4534334d5534f5a837562e0688', icon: "chevron-down", scale: getIconScale(this.scale) })));
+        const numberButtonsVertical = (hAsync("div", { key: '25e3626b8915e798fe5dd8ecc44289c515565a81', class: CSS$P.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
+        const prefixText = hAsync("div", { key: '6fe6cdc9b0ce6d39c177047a91ff312a24a99a96', class: CSS$P.prefix }, this.prefixText);
+        const suffixText = hAsync("div", { key: '849efbf098bc6da8afa1de6c445f17e0d4dc1aa2', class: CSS$P.suffix }, this.suffixText);
         const childEl = (hAsync("input", { "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: this.el.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.el.enterKeyHint || this.el.getAttribute("enterkeyhint"), inputMode: this.el.inputMode || this.el.getAttribute("inputmode"), key: "localized-input", maxLength: this.maxLength, minLength: this.minLength, name: undefined, onBlur: this.inputNumberBlurHandler, onFocus: this.inputNumberFocusHandler, onInput: this.inputNumberInputHandler, onKeyDown: this.inputNumberKeyDownHandler, onKeyUp: this.inputNumberKeyUpHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, type: "text", value: this.displayedValue,
             // 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.setChildNumberElRef }));
-        return (hAsync(Host, { key: 'd7e489f5a4a33c09463ce30007f5dd4ba8114126', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, hAsync(InteractiveContainer, { key: '3e27f271dac91c3713db46e64df9e6e086d30334', disabled: this.disabled }, hAsync("div", { key: '19f0b5c951b5d5b7c5f8ac2c1e35f304688c44ed', class: { [CSS$P.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.numberButtonType === "horizontal" && !this.readOnly
+        return (hAsync(Host, { key: '2c6939b012ccd0fa9f27bf13bb765c35d1752cec', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, hAsync(InteractiveContainer, { key: 'b1bdb7fe28d7b89b7b08188c3dd65000720b616a', disabled: this.disabled }, hAsync("div", { key: 'd7f11dcadb05026dcb5e197608703d4a53404075', class: { [CSS$P.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.numberButtonType === "horizontal" && !this.readOnly
             ? numberButtonsHorizontalDown
-            : null, this.prefixText ? prefixText : null, hAsync("div", { key: '6fa6e7bd01a1ccf2b8757b5edaa89f92438d1ccf', class: CSS$P.wrapper }, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), hAsync("div", { key: '1c784a042c260c3f9b6d69c831e87bc94fda3abc', class: CSS$P.actionWrapper }, hAsync("slot", { key: '60dd4b13dac3af10a16e075aab405d425e22dac6', name: SLOTS$k.action })), this.numberButtonType === "vertical" && !this.readOnly ? numberButtonsVertical : null, this.suffixText ? suffixText : null, this.numberButtonType === "horizontal" && !this.readOnly
+            : null, this.prefixText ? prefixText : null, hAsync("div", { key: 'd9e1a655f0078ad7e3a3227cbc70e906d66e0a49', class: CSS$P.wrapper }, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), hAsync("div", { key: '25dfa18491488c5448adfefe87ba3f69c7930c1a', class: CSS$P.actionWrapper }, hAsync("slot", { key: '500f1b272811d6c4c003afb40f5d7c0a0a222355', name: SLOTS$k.action })), this.numberButtonType === "vertical" && !this.readOnly ? numberButtonsVertical : null, this.suffixText ? suffixText : null, this.numberButtonType === "horizontal" && !this.readOnly
             ? numberButtonsHorizontalUp
-            : null, hAsync(HiddenFormInputSlot, { key: 'bb3e5e6ad1d012de66d9e9e757acc02661345e90', component: this })), this.validationMessage && this.status === "invalid" ? (hAsync(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+            : null, hAsync(HiddenFormInputSlot, { key: '9b3e051eadfff57ed9f4dd14cb3e50c1830b560b', component: this })), this.validationMessage && this.status === "invalid" ? (hAsync(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
@@ -34830,18 +34838,18 @@ class InputText {
     // --------------------------------------------------------------------------
     render() {
         const dir = getElementDir(this.el);
-        const loader = (hAsync("div", { key: '9bf7accea25a80536640e26229a3b15c244469b2', class: CSS$O.loader }, hAsync("calcite-progress", { key: '40f9404404852960d03545a9fe3d22405e9c5803', label: this.messages.loading, type: "indeterminate" })));
-        const inputClearButton = (hAsync("button", { key: 'f72a9549511b7a9e5a68eeec3aaf3708f5ae9a41', "aria-label": this.messages.clear, class: CSS$O.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputTextValue, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { key: '8171336455d3aa4ed71005059977a380b23b63e6', icon: "x", scale: getIconScale(this.scale) })));
-        const iconEl = (hAsync("calcite-icon", { key: 'ba54d6b6d8859f19dd0fbe28982e1f8008b77cb1', class: CSS$O.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: getIconScale(this.scale) }));
-        const prefixText = hAsync("div", { key: 'a3c072c6020009b9ff0d781c882cf1fcf22c93a0', class: CSS$O.prefix }, this.prefixText);
-        const suffixText = hAsync("div", { key: '7af8bf81f8639e33630f1af5a71665e78914e405', class: CSS$O.suffix }, this.suffixText);
-        const childEl = (hAsync("input", { key: '677840d6230500325a9989d889b150d0e942469f', "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: this.el.autofocus ? true : null, class: {
+        const loader = (hAsync("div", { key: '3ec4d8fc6ae7436c6086ad86720f1c72d9de48dd', class: CSS$O.loader }, hAsync("calcite-progress", { key: '67595008bf888677b7d5d7c87552e1a50f4150aa', label: this.messages.loading, type: "indeterminate" })));
+        const inputClearButton = (hAsync("button", { key: 'bcecf1bbde5f7f4e406c1ab5086eea1acba8cb9c', "aria-label": this.messages.clear, class: CSS$O.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputTextValue, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { key: 'cd3290a3f64344e5cfe6b16dd1ffff1251499ad3', icon: "x", scale: getIconScale(this.scale) })));
+        const iconEl = (hAsync("calcite-icon", { key: '8fe4f4cb00f59dac67ef7c7b9b48e5126cf38e31', class: CSS$O.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: getIconScale(this.scale) }));
+        const prefixText = hAsync("div", { key: 'dced1c574af69b545b8110601378cb469a116094', class: CSS$O.prefix }, this.prefixText);
+        const suffixText = hAsync("div", { key: '91a3117072c6c0ef67df4c8784b1e81a002dbe73', class: CSS$O.suffix }, this.suffixText);
+        const childEl = (hAsync("input", { key: '0c365313279ee7bd6ec9f5f9776262ea849e0402', "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: this.el.autofocus ? true : null, class: {
                 [CSS$O.editingEnabled]: this.editingEnabled,
                 [CSS$O.inlineChild]: !!this.inlineEditableEl,
             }, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.el.enterKeyHint || this.el.getAttribute("enterkeyhint"), inputMode: this.el.inputMode || this.el.getAttribute("inputmode"), maxLength: this.maxLength, minLength: this.minLength, name: this.name, onBlur: this.inputTextBlurHandler, onFocus: this.inputTextFocusHandler, onInput: this.inputTextInputHandler, onKeyDown: this.inputTextKeyDownHandler, pattern: this.pattern, placeholder: this.placeholder || "", readOnly: this.readOnly, required: this.required ? true : null, tabIndex: this.disabled || (this.inlineEditableEl && !this.editingEnabled) ? -1 : null, type: "text", value: this.value,
             // 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.setChildElRef }));
-        return (hAsync(Host, { key: 'b4fb33c97e159eaceebaca886bed2517ebceb534', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, hAsync(InteractiveContainer, { key: 'e6c8ea23fb5d10f16446337689731791c3650dde', disabled: this.disabled }, hAsync("div", { key: 'cbfee045082d14c61eb571f5f5180ddf65149a05', class: { [CSS$O.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.prefixText ? prefixText : null, hAsync("div", { key: 'dc73dae622744b6c53d5ca9c52e58083610dae05', class: CSS$O.wrapper }, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), hAsync("div", { key: 'a92553cf6aa9cab3fd61bfe88dab31ddfbf244d1', class: CSS$O.actionWrapper }, hAsync("slot", { key: 'dd1044de7b51640a4de02e9b33f01a05321c8ca6', name: SLOTS$j.action })), this.suffixText ? suffixText : null, hAsync(HiddenFormInputSlot, { key: '5694dc63f0b96e111820b583b368de84d821ce79', component: this })), this.validationMessage && this.status === "invalid" ? (hAsync(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+        return (hAsync(Host, { key: '16c5db61c7b866dbc617430a72da693c678088af', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, hAsync(InteractiveContainer, { key: 'a645d05104fd36be24d3b1c4a3f96ffe18742da5', disabled: this.disabled }, hAsync("div", { key: '6e51fa8c007842480459eeb1669fb48500908a31', class: { [CSS$O.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.prefixText ? prefixText : null, hAsync("div", { key: 'c5e8d14f2f707e26c5f9d4bca5c3b17e6d2d3a00', class: CSS$O.wrapper }, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), hAsync("div", { key: '3bc807289e5f477e96b191f858512ab6fe6bc6f2', class: CSS$O.actionWrapper }, hAsync("slot", { key: 'bbcfcd54de5bcd90560109835b766f7747563951', name: SLOTS$j.action })), this.suffixText ? suffixText : null, hAsync(HiddenFormInputSlot, { key: 'ad29ed06d9124d489d2825599d0697a8c37fcd7b', component: this })), this.validationMessage && this.status === "invalid" ? (hAsync(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
@@ -42659,7 +42667,7 @@ class OptionGroup {
 
 /**
  * Do not edit directly
- * Generated on Tue, 14 May 2024 19:22:54 GMT
+ * Generated on Tue, 21 May 2024 03:53:50 GMT
  */
 const calciteContainerSizeWidthXxs = {"min":"0","max":"320px"}; // Small handheld devices and mini-windows
 const calciteContainerSizeWidthXs = {"min":"321px","max":"476px"}; // Handheld devices