@esri/calcite-components 2.8.0-next.3 → 2.8.0-next.4

package/dist/components/input-text.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.0-next.3
+ * v2.8.0-next.4
  */
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client/index.js';
 import { g as getSlotted, o as setRequestedIcon, a as getElementDir } from './dom.js';
@@ -316,18 +316,18 @@ const InputText = /*@__PURE__*/ proxyCustomElement(class InputText extends HTMLE
     // --------------------------------------------------------------------------
     render() {
         const dir = getElementDir(this.el);
-        const loader = (h("div", { key: '657cee410f3c5285eef6e0be59ce21eea00612bf', class: CSS.loader }, h("calcite-progress", { key: 'bae0d36725ea820a2822cd6bc6c17f074d1a0c74', label: this.messages.loading, type: "indeterminate" })));
-        const inputClearButton = (h("button", { key: 'adc31a642bc75d36110bd6ba93161ee9a5144d19', "aria-label": this.messages.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputTextValue, tabIndex: -1, type: "button" }, h("calcite-icon", { key: 'a35a5d106cedab1bb643225974a0a9b445461f87', icon: "x", scale: getIconScale(this.scale) })));
-        const iconEl = (h("calcite-icon", { key: 'ecf3f792fd30ba0addfab534ba6d160792abec7c', class: CSS.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: getIconScale(this.scale) }));
-        const prefixText = h("div", { key: '34b2290afee53e3ae86dd91c5fe3802360622712', class: CSS.prefix }, this.prefixText);
-        const suffixText = h("div", { key: 'f3afc21a0b09fc4c80568af27333c0eadedb811a', class: CSS.suffix }, this.suffixText);
-        const childEl = (h("input", { key: 'dc3d7a4e23b277b76ca5dcbf04a8b3a5072e0144', "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: this.el.autofocus ? true : null, class: {
+        const loader = (h("div", { key: '61d78ae82eff28d3ea21992ea2224f071e19e30f', class: CSS.loader }, h("calcite-progress", { key: '83e6c24320bc3586afba345141f56f3463743ff2', label: this.messages.loading, type: "indeterminate" })));
+        const inputClearButton = (h("button", { key: '99573258bc035806f2f657a42afcf2e657e9fbc9', "aria-label": this.messages.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputTextValue, tabIndex: -1, type: "button" }, h("calcite-icon", { key: '40496c7d19884943040d8977d5724dab558afa4c', icon: "x", scale: getIconScale(this.scale) })));
+        const iconEl = (h("calcite-icon", { key: 'ae1e83ec3677d84d028269055db09ed94c711285', class: CSS.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: getIconScale(this.scale) }));
+        const prefixText = h("div", { key: '65e89ea49f8d2120d075d04c8708a0b7c7a89156', class: CSS.prefix }, this.prefixText);
+        const suffixText = h("div", { key: '18691614ab923147352eef58eb09ebb9a4a5288e', class: CSS.suffix }, this.suffixText);
+        const childEl = (h("input", { key: '437f4e3a12d0ac69a8c20267fd5711e0a0649578', "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: this.el.autofocus ? true : null, class: {
                 [CSS.editingEnabled]: this.editingEnabled,
                 [CSS.inlineChild]: !!this.inlineEditableEl,
             }, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.el.enterKeyHint, inputMode: this.el.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 (h(Host, { key: 'd81096fdfee8fd008257d4896728700f6fa4d3dc', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { key: 'b1d2b55c232618522202d4e56681b80cb1f515de', disabled: this.disabled }, h("div", { key: 'ff62f7725fef0f2f71bb40513100772bc42a6adf', class: { [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.prefixText ? prefixText : null, h("div", { key: '20da4b96760af258a0eed300451961a6d24f5285', class: CSS.wrapper }, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), h("div", { key: '499cc6f51f84e3066a2795fd04deec447407b63b', class: CSS.actionWrapper }, h("slot", { key: 'cbe38f9cd8a85ae3d76a521f9cf0b61adee14b13', name: SLOTS.action })), this.suffixText ? suffixText : null, h(HiddenFormInputSlot, { key: '34642abc7d3ba939b01addcc20f95d85add08e6a', component: this })), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+        return (h(Host, { key: '4055669e4cbee4eff0868c89f87ca27731241e8a', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { key: '638eefd7cbf9b7c0d1a990a6c5e6ca5db2ca1e94', disabled: this.disabled }, h("div", { key: '29051c1c308871dd534d27a998e95bd4a730eb94', class: { [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.prefixText ? prefixText : null, h("div", { key: 'f0d1e2c47c4c4a7f41b24c0375d402bb9c0d4715', class: CSS.wrapper }, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), h("div", { key: '0c0d8408badd385e9ce23454d0f4dd063eebb9c6', class: CSS.actionWrapper }, h("slot", { key: 'c83c632d089e6f20047e1d37d3ae157f24bf76f7', name: SLOTS.action })), this.suffixText ? suffixText : null, h(HiddenFormInputSlot, { key: '06101c54e4631c6892e55d900696e2389d8fd7ed', component: this })), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }

package/dist/components/input.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.0-next.3
+ * v2.8.0-next.4
  */
 /**
  * Exported for testing purposes only

package/dist/components/input2.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.0-next.3
+ * v2.8.0-next.4
  */
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client/index.js';
 import { g as getSlotted, w as isPrimaryPointerButton, o as setRequestedIcon, a as getElementDir } from './dom.js';
@@ -618,21 +618,21 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
     // --------------------------------------------------------------------------
     render() {
         const dir = getElementDir(this.el);
-        const loader = (h("div", { key: 'd5bd52a75c742aae69853f4f1875e6800917ac73', class: CSS.loader }, h("calcite-progress", { key: '3180343a6ed442ff4689ad0e4cb43b5de546a260', label: this.messages.loading, type: "indeterminate" })));
-        const inputClearButton = (h("button", { key: '8e9b50d37f8393de49bb39b743baf4e0066d765a', "aria-label": this.messages.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, h("calcite-icon", { key: '3eef23c9bb49ad2a014ecd935d42dd376d4964b0', icon: "x", scale: getIconScale(this.scale) })));
-        const iconEl = (h("calcite-icon", { key: 'c8978a17f8ae7b1b150c9bb63fe676125a039e43', class: CSS.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: getIconScale(this.scale) }));
+        const loader = (h("div", { key: '1892eebc8d8dd902ed63f79ce8c71e6e77b376fa', class: CSS.loader }, h("calcite-progress", { key: 'e6c2660e8772c2fe601aa9bee9973859ff8fe38f', label: this.messages.loading, type: "indeterminate" })));
+        const inputClearButton = (h("button", { key: '47c2ee0650897ba558fea7df1dd22be544908b7c', "aria-label": this.messages.clear, class: CSS.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, h("calcite-icon", { key: '116101be68cbdf447da98142cd38ae66109a5a31', icon: "x", scale: getIconScale(this.scale) })));
+        const iconEl = (h("calcite-icon", { key: '1b90c820fd08c0c21b4420f26b42462f4998bcde', class: CSS.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: getIconScale(this.scale) }));
         const isHorizontalNumberButton = this.numberButtonType === "horizontal";
-        const numberButtonsHorizontalUp = (h("button", { key: 'bab7e944699da87ed3b6fc99e4b647e46a9da31c', "aria-hidden": "true", class: {
+        const numberButtonsHorizontalUp = (h("button", { key: '4bb3eee49b701e67c5ca34319d284d522e3b7d16', "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: 'fb91ff81caab9a285416edc63ba8ed864a0d01ea', icon: "chevron-up", scale: getIconScale(this.scale) })));
-        const numberButtonsHorizontalDown = (h("button", { key: '1665b6607290f024a6065c8516f8b197f1bbc301', "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: 'f32a71952490bf1342f8f91c53a97306611af35f', icon: "chevron-up", scale: getIconScale(this.scale) })));
+        const numberButtonsHorizontalDown = (h("button", { key: '7d652abea8d17a0bb1fd922620e48ded89b4ab83', "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: '841a058dab719c9a48d44bdbd03e88fa8407d0c7', icon: "chevron-down", scale: getIconScale(this.scale) })));
-        const numberButtonsVertical = (h("div", { key: 'ec94fb40040f4a541ce0964a2edfc85f3e6a1bcd', class: CSS.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
-        const prefixText = h("div", { key: 'cfe99f0165464507f4503622ff97180106b6a892', class: CSS.prefix }, this.prefixText);
-        const suffixText = h("div", { key: '0547ed8b6d1c9bbeb358fd57626db75f7eb51853', 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: 'fa07ec8eb8840ea181e480d2036ea138b4973e3e', icon: "chevron-down", scale: getIconScale(this.scale) })));
+        const numberButtonsVertical = (h("div", { key: 'a27528f940f4098939f84366828803e16585413d', class: CSS.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
+        const prefixText = h("div", { key: 'c215bd9bca4ba67b1d232e6e8b77ef33f966792b', class: CSS.prefix }, this.prefixText);
+        const suffixText = h("div", { key: 'f1d0d0194e78bd882b7d9bf28abfb2dd2f3b8b82', class: CSS.suffix }, this.suffixText);
         const localeNumberInput = this.type === "number" ? (h("input", { accept: this.accept, "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, inputMode: this.el.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, 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 })) : null;
@@ -647,13 +647,13 @@ const Input = /*@__PURE__*/ proxyCustomElement(class Input extends HTMLElement {
                 this.isTextarea ? (h("div", { class: CSS.resizeIconWrapper }, h("calcite-icon", { icon: "chevron-down", scale: getIconScale(this.scale) }))) : null,
             ]
             : null;
-        return (h(Host, { key: 'bdc60ec47af4f1d24813c12ca2ed298ef0a1dd9a', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { key: '9a367b7480e967a8ec6eb21831f1074c9278e4bf', disabled: this.disabled }, h("div", { key: '74b5497d267298ff91cf985458dfa5724bd916b2', class: { [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly
+        return (h(Host, { key: '94e61d516cd5dd0618e16b8af2990c91b5216d2b', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, h(InteractiveContainer, { key: 'e7d5fcd71415d537a8baafe2b76b538de2824327', disabled: this.disabled }, h("div", { key: '3cfc6e84d1cd4b3a85f5e1080445f817dc6b1143', class: { [CSS.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly
             ? numberButtonsHorizontalDown
-            : null, this.prefixText ? prefixText : null, h("div", { key: '4deb9ca75ef31084c81ccd413cf316c9aa0416fd', class: CSS.wrapper }, localeNumberInput, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), h("div", { key: '3ffca40137a7329e3393721317a5dd6313ca9170', class: CSS.actionWrapper }, h("slot", { key: '4d1c802466fea529746b0af1eb61a0e6edec29dd', name: SLOTS.action })), this.type === "number" && this.numberButtonType === "vertical" && !this.readOnly
+            : null, this.prefixText ? prefixText : null, h("div", { key: '044e3dfb9a266df99b9d47314ebdc87129f0f5c8', class: CSS.wrapper }, localeNumberInput, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), h("div", { key: '3a482be3885eaddb5db53051e7feb4efd63ac993', class: CSS.actionWrapper }, h("slot", { key: '5d6b3061c43b671de1beffdaed30b6da2a495f32', 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: '5d6a81be555e89c342174dcfd0e1a3751e600d0f', 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: '359e6e901f53e84438d62a044dfaceb030864cec', component: this })), this.validationMessage && this.status === "invalid" ? (h(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return this; }

package/dist/components/interactive.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.0-next.3
+ * v2.8.0-next.4
  */
 import { Build, h } from '@stencil/core/internal/client/index.js';
 

package/dist/components/it-ch.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.0-next.3
+ * v2.8.0-next.4
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/it.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.0-next.3
+ * v2.8.0-next.4
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/ja.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.0-next.3
+ * v2.8.0-next.4
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/key.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.0-next.3
+ * v2.8.0-next.4
  */
 function isActivationKey(key) {
     return key === "Enter" || key === " ";

package/dist/components/ko.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.0-next.3
+ * v2.8.0-next.4
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/label.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.0-next.3
+ * v2.8.0-next.4
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client/index.js';
 import { a as associateExplicitLabelToUnlabeledComponent, l as labelConnectedEvent, b as labelDisconnectedEvent } from './label2.js';
@@ -49,7 +49,7 @@ const Label = /*@__PURE__*/ proxyCustomElement(class Label extends HTMLElement {
         document.dispatchEvent(new CustomEvent(labelDisconnectedEvent));
     }
     render() {
-        return (h(Host, { key: '597b3bd64b3ae8f663937895a4e80a013b99332d', onClick: this.labelClickHandler }, h("div", { key: 'effb146f2bb9a7f6d5b25c7848b595401f6f398f', class: CSS.container }, h("slot", { key: '59facab849337e37bb3be7ffb4bc122d7f99f22a' }))));
+        return (h(Host, { key: 'b0ed1651d1b2e1c6a5c17a546275b02f5bf0bcc7', onClick: this.labelClickHandler }, h("div", { key: '542bca643668250e182f5ca3503ff197ff00c46f', class: CSS.container }, h("slot", { key: '19b3e5d3fe20b74808e4a693041fa3ac0f8b65b2' }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/label2.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.0-next.3
+ * v2.8.0-next.4
  */
 import { u as isBefore, q as queryElementRoots, c as closestElementCrossShadowBoundary } from './dom.js';
 import { c as componentOnReady } from './component.js';

package/dist/components/link.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.0-next.3
+ * v2.8.0-next.4
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client/index.js';
 import { a as getElementDir, e as focusElement } from './dom.js';
@@ -65,19 +65,19 @@ const Link = /*@__PURE__*/ proxyCustomElement(class Link extends HTMLElement {
         const { download, el } = this;
         const dir = getElementDir(el);
         const childElType = this.href ? "a" : "span";
-        const iconStartEl = (h("calcite-icon", { key: 'a37f7efcc5a24ffed0c3979260004329be8715ca', class: "calcite-link--icon icon-start", flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
-        const iconEndEl = (h("calcite-icon", { key: 'bbdf3678c8c05262fd42d573d368c97657b4f1b1', class: "calcite-link--icon icon-end", flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: "s" }));
+        const iconStartEl = (h("calcite-icon", { key: 'c76dd8746b6bdd7c557621344e614e91735b8773', class: "calcite-link--icon icon-start", flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: "s" }));
+        const iconEndEl = (h("calcite-icon", { key: '20f51a11989d13a668cc343de016633a423a62d6', 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: '0e8d8899a9ddaae8ef55fdbadd9bb562a96d3306', role: "presentation" }, h(InteractiveContainer, { key: '0eed4e99a2c1e062e7362bbfa4149d4f202c0d67', disabled: this.disabled }, h(Tag, { key: '5eb9b5ca6725bd5be2040ce9167b374818838f28', class: { [CSS_UTILITY.rtl]: dir === "rtl" },
+        return (h(Host, { key: '970efc9a2b9888d4b111822e8aef44c4eda4d9c2', role: "presentation" }, h(InteractiveContainer, { key: '63c99f96cbf8407aba331e98846fe2c29e423fc0', disabled: this.disabled }, h(Tag, { key: '9295872abdef00a6c6dfa2815ce1d0d4e2d127fc', 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, rel: Tag === "a" && this.rel, role: role, tabIndex: tabIndex, target: Tag === "a" && this.target,
             // 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.storeTagRef }, this.iconStart ? iconStartEl : null, h("slot", { key: '14f6a55f8216e83ae465137003eae0f6bb264115' }), this.iconEnd ? iconEndEl : null))));
+            ref: this.storeTagRef }, this.iconStart ? iconStartEl : null, h("slot", { key: '701d67c273740889a0f05b319ec330599ef27180' }), this.iconEnd ? iconEndEl : null))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/components/loadable.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.0-next.3
+ * v2.8.0-next.4
  */
 import { Build, forceUpdate } from '@stencil/core/internal/client/index.js';
 

package/dist/components/loader.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.0-next.3
+ * v2.8.0-next.4
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client/index.js';
 import { g as guid } from './guid.js';
@@ -46,7 +46,7 @@ const Loader = /*@__PURE__*/ proxyCustomElement(class Loader extends HTMLElement
         };
         const svgAttributes = { r: radius, cx: size / 2, cy: size / 2 };
         const determinateStyle = { "stroke-dasharray": `${progress} ${remaining}` };
-        return (h(Host, { key: '2237d3c2c04969411ce382b3eb1cbfc9ddafc7d6', "aria-label": label, id: id, role: "progressbar", ...(isDeterminate ? hostAttributes : {}) }, h("div", { key: 'a85ba92a64cea11c0534a90e4a9eb4b08b7068aa', class: "loader__svgs" }, h("svg", { key: '3b139e5e379fdabe265ce85b7f1564b20c35504b', "aria-hidden": "true", class: "loader__svg loader__svg--1", viewBox: viewbox }, h("circle", { key: '3306812eee146637950332331d5d2f3278155749', ...svgAttributes })), h("svg", { key: '45ef8bfa717ebddb5c3f7b8c049788f6ca29a428', "aria-hidden": "true", class: "loader__svg loader__svg--2", viewBox: viewbox }, h("circle", { key: '7146c5924ff08534d5f19184ea44f3069759b5fb', ...svgAttributes })), h("svg", { key: '6d68d7b2182a5942470503c6b14821ca6d9e0d95', "aria-hidden": "true", class: "loader__svg loader__svg--3", viewBox: viewbox, ...(isDeterminate ? { style: determinateStyle } : {}) }, h("circle", { key: '9a397e8a7140eeeadd2868a6d7fa3871016ca841', ...svgAttributes }))), text && h("div", { class: "loader__text" }, text), isDeterminate && h("div", { class: "loader__percentage" }, value)));
+        return (h(Host, { key: '843111b97c2b32e8eb45feb1531f893082f88420', "aria-label": label, id: id, role: "progressbar", ...(isDeterminate ? hostAttributes : {}) }, h("div", { key: '302c31251c12f0aa638001f3b2b4bc2de520846f', class: "loader__svgs" }, h("svg", { key: 'b2df48177602fc8a3e0384ea612a03b5f42c479b', "aria-hidden": "true", class: "loader__svg loader__svg--1", viewBox: viewbox }, h("circle", { key: 'adddcdacadb5d917d598804b12fb71d0cf12f3db', ...svgAttributes })), h("svg", { key: 'f37e662325059622cbb008b5dfdd9dc29259cc2a', "aria-hidden": "true", class: "loader__svg loader__svg--2", viewBox: viewbox }, h("circle", { key: '20941437c04c8030c53b0789b44c24ff626791ec', ...svgAttributes })), h("svg", { key: 'f0511395e5edbee33f40ece4fbbe033754c65baf', "aria-hidden": "true", class: "loader__svg loader__svg--3", viewBox: viewbox, ...(isDeterminate ? { style: determinateStyle } : {}) }, h("circle", { key: '9a84b202bd9bfc04d7e83a9c4a35a2cb65ce083f', ...svgAttributes }))), text && h("div", { key: '0805240dd342671a7cc28137493bc7f2d0c6c3f8', class: "loader__text" }, text), isDeterminate && h("div", { key: '2ac7f911990e10dff4d28f1dac1cd7386c54c5db', class: "loader__percentage" }, value)));
     }
     //--------------------------------------------------------------------------
     //

package/dist/components/loader.js.map

@@ -1 +1 @@
-{"file":"loader.js","mappings":";;;;;;;;AAAA,MAAM,SAAS,GAAG,q5LAAq5L,CAAC;AACx6L,4BAAe,SAAS;;MCQX,MAAM;;;;;sBAQiB,KAAK;;qBAMC,GAAG;;qBAW3B,CAAC;oBAGF,EAAE;;;;;;;IAQjB,MAAM;QACJ,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAE7D,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,IAAI,EAAE,CAAC;QAC3B,MAAM,WAAW,GAAG,IAAI,CAAC;QACzB,MAAM,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QACtE,MAAM,MAAM,GAAG,IAAI,GAAG,WAAW,CAAC;QAClC,MAAM,OAAO,GAAG,OAAO,IAAI,IAAI,IAAI,EAAE,CAAC;QACtC,MAAM,aAAa,GAAG,IAAI,KAAK,aAAa,CAAC;QAC7C,MAAM,aAAa,GAAG,CAAC,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;QAC3C,MAAM,QAAQ,GAAG,CAAC,KAAK,GAAG,GAAG,IAAI,aAAa,CAAC;QAC/C,MAAM,SAAS,GAAG,aAAa,GAAG,QAAQ,CAAC;QAC3C,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACnC,MAAM,cAAc,GAAG;YACrB,eAAe,EAAE,QAAQ;YACzB,eAAe,EAAE,CAAC;YAClB,eAAe,EAAE,GAAG;YACpB,QAAQ,EAAE,QAAQ,KAAK,GAAG;SAC3B,CAAC;QACF,MAAM,aAAa,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,GAAG,CAAC,EAAE,EAAE,EAAE,IAAI,GAAG,CAAC,EAAE,CAAC;QAChE,MAAM,gBAAgB,GAAG,EAAE,kBAAkB,EAAE,GAAG,QAAQ,IAAI,SAAS,EAAE,EAAE,CAAC;QAC5E,QACE,EAAC,IAAI,mEACS,KAAK,EACjB,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,aAAa,MACb,aAAa,GAAG,cAAc,GAAG,EAAE,CAAC,IAEzC,4DAAK,KAAK,EAAC,cAAc,IACvB,2EAAiB,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAE,OAAO,IACzE,kEAAY,aAAa,GAAI,CACzB,EACN,2EAAiB,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAE,OAAO,IACzE,kEAAY,aAAa,GAAI,CACzB,EACN,2EACc,MAAM,EAClB,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAE,OAAO,MACX,aAAa,GAAG,EAAE,KAAK,EAAE,gBAAgB,EAAE,GAAG,EAAE,CAAC,IAEtD,kEAAY,aAAa,GAAI,CACzB,CACF,EACL,IAAI,IAAI,WAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAO,EAC9C,aAAa,IAAI,WAAK,KAAK,EAAC,oBAAoB,IAAE,KAAK,CAAO,CAC1D,EACP;KACH;;;;;;;;;;;IAqBO,OAAO,CAAC,KAAa;QAC3B,OAAO;YACL,CAAC,EAAE,EAAE;YACL,CAAC,EAAE,EAAE;YACL,CAAC,EAAE,EAAE;SACN,CAAC,KAAK,CAAC,CAAC;KACV;IAEO,aAAa,CAAC,KAAa;QACjC,OAAO;YACL,CAAC,EAAE,EAAE;YACL,CAAC,EAAE,EAAE;YACL,CAAC,EAAE,EAAE;SACN,CAAC,KAAK,CAAC,CAAC;KACV;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/loader/loader.scss?tag=calcite-loader&encapsulation=shadow","src/components/loader/loader.tsx"],"sourcesContent":["/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-loader-font-size: Specifies the font size of the loading percentage when type is `\"determinate\"`.\n * @prop --calcite-loader-size: The width and height of a non-inline loader.\n * @prop --calcite-loader-size-inline: The width and height of an inline loader\n * @prop --calcite-loader-padding : Specifies the padding of the loader.\n */\n\n@import \"../../assets/styles/animation\";\n\n$stroke-width: 3;\n$loader-scale: 54;\n$loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159;\n\n@media (prefers-reduced-motion: reduce) {\n  :root {\n    --calcite-internal-duration-factor: 0;\n  }\n}\n\n:host {\n  @apply relative mx-auto hidden items-center justify-center opacity-100;\n  min-block-size: var(--calcite-loader-size);\n  font-size: var(--calcite-loader-font-size);\n  stroke: var(--calcite-color-brand);\n  stroke-width: $stroke-width;\n  fill: none;\n  transform: scale(1, 1);\n  animation: loader-color-shift scaleDuration(--calcite-internal-animation-timing-slow, 2) alternate-reverse infinite\n    linear;\n  padding-block: var(--calcite-loader-padding, theme(\"spacing.16\"));\n  will-change: contents;\n}\n\n:host([scale=\"s\"]) {\n  --calcite-loader-font-size: theme(\"fontSize.n2\");\n  --calcite-loader-size: theme(\"spacing.8\");\n  --calcite-loader-size-inline: theme(\"spacing.3\");\n}\n\n:host([scale=\"m\"]) {\n  --calcite-loader-font-size: theme(\"fontSize.0\");\n  --calcite-loader-size: theme(\"spacing.16\");\n  --calcite-loader-size-inline: theme(\"spacing.4\");\n}\n\n:host([scale=\"l\"]) {\n  --calcite-loader-font-size: theme(\"fontSize.2\");\n  --calcite-loader-size: theme(\"spacing.24\");\n  --calcite-loader-size-inline: theme(\"spacing.6\");\n}\n\n:host([no-padding]) {\n  @apply py-0;\n}\n\n:host {\n  @apply flex;\n}\n\n.loader__text {\n  @apply text-n2h\n  text-color-1\n  block\n  text-center;\n  margin-block-start: calc(var(--calcite-loader-size) + theme(\"spacing.6\"));\n}\n\n.loader__percentage {\n  @apply text-color-1 absolute block text-center;\n  font-size: var(--calcite-loader-font-size);\n  inline-size: var(--calcite-loader-size);\n  inset-inline-start: 50%;\n  margin-inline-start: calc(var(--calcite-loader-size) / 2 * -1);\n  line-height: 0.25;\n  transform: scale(1, 1);\n}\n\n.loader__svgs {\n  @apply absolute overflow-visible opacity-100;\n  inline-size: var(--calcite-loader-size);\n  block-size: var(--calcite-loader-size);\n  inset-inline-start: 50%;\n  margin-inline-start: calc(var(--calcite-loader-size) / 2 * -1);\n  animation-iteration-count: infinite;\n  animation-timing-function: linear;\n  animation-duration: scaleDuration(--calcite-internal-animation-timing-slow, 6.66);\n  animation-name: loader-clockwise;\n}\n\n.loader__svg {\n  @apply absolute top-0 origin-center overflow-visible;\n  inset-inline-start: 0;\n  inline-size: var(--calcite-loader-size);\n  block-size: var(--calcite-loader-size);\n  animation-iteration-count: infinite;\n  animation-timing-function: linear;\n\n  &--1 {\n    animation-name: loader-offset-1;\n  }\n  &--2 {\n    animation-name: loader-offset-2;\n  }\n  &--3 {\n    animation-name: loader-offset-3;\n  }\n}\n\n:host([type=\"determinate\"]) {\n  @apply animate-none;\n  stroke: var(--calcite-color-border-3);\n  .loader__svgs {\n    @apply animate-none;\n  }\n  .loader__svg--3 {\n    @apply animate-none;\n    stroke: var(--calcite-color-brand);\n    stroke-dasharray: $loader-circumference;\n    transform: rotate(-90deg);\n    transition: all var(--calcite-internal-animation-timing-fast) linear;\n  }\n}\n\n:host([inline]) {\n  @apply relative m-0 animate-none stroke-current stroke-2 py-0;\n  block-size: var(--calcite-loader-size-inline);\n  min-block-size: var(--calcite-loader-size-inline);\n  inline-size: var(--calcite-loader-size-inline);\n  margin-inline-end: calc(var(--calcite-loader-size-inline) * 0.5);\n  vertical-align: calc(var(--calcite-loader-size-inline) * -1 * 0.2);\n}\n\n:host([inline]) .loader__svgs {\n  @apply top-0 m-0;\n  inset-inline-start: 0;\n  inline-size: var(--calcite-loader-size-inline);\n  block-size: var(--calcite-loader-size-inline);\n}\n\n:host([inline]) .loader__svg {\n  inline-size: var(--calcite-loader-size-inline);\n  block-size: var(--calcite-loader-size-inline);\n}\n\n:host([complete]) {\n  @apply opacity-0;\n  transform: scale(0.75, 0.75);\n  transform-origin: center;\n  transition:\n    opacity var(--calcite-internal-animation-timing-medium) linear 1000ms,\n    transform var(--calcite-internal-animation-timing-medium) linear 1000ms;\n}\n\n:host([complete]) .loader__svgs {\n  @apply opacity-0;\n  transform: scale(0.75, 0.75);\n  transform-origin: center;\n  transition:\n    opacity calc(180ms * var(--calcite-internal-duration-factor)) linear 800ms,\n    transform calc(180ms * var(--calcite-internal-duration-factor)) linear 800ms;\n}\n\n:host([complete]) .loader__percentage {\n  color: theme(\"colors.brand\");\n  transform: scale(1.05, 1.05);\n  transform-origin: center;\n  transition:\n    color var(--calcite-internal-animation-timing-medium) linear,\n    transform var(--calcite-internal-animation-timing-medium) linear;\n}\n\n/**\n  Segment variables\n  - i         index (1-3)\n  - size      length of the segment (0 - 100)\n  - growth    how much the segment grows during the animation\n              (size + growth should not exceed 100)\n  - duration  how long the segment takes to rotate 360° (seconds)\n*/\n@mixin generateSegment($i, $size, $growth, $duration) {\n  $circumference: calc($loader-circumference / $loader-scale) * 100;\n  $length: ($size * 0.01) * $circumference;\n  $end: $length + ($growth * 0.01) * $circumference;\n\n  .loader__svg--#{$i} {\n    stroke-dasharray: $length $circumference - $end;\n    animation-duration: $duration;\n  }\n  @keyframes loader-offset-#{$i} {\n    0% {\n      stroke-dasharray: $length $circumference - $length;\n      stroke-dashoffset: 0;\n    }\n    50% {\n      stroke-dasharray: $end $circumference - $end;\n      stroke-dashoffset: -$circumference * 0.5 - ($length - $end) * 0.5;\n    }\n    100% {\n      stroke-dasharray: $length $circumference - $length;\n      stroke-dashoffset: -$circumference;\n    }\n  }\n}\n\n@include generateSegment(1, 10, 40, scaleDuration(--calcite-internal-animation-timing-slow, 4.8));\n@include generateSegment(2, 20, 30, scaleDuration(--calcite-internal-animation-timing-slow, 6.4));\n@include generateSegment(3, 05, 45, scaleDuration(--calcite-internal-animation-timing-slow, 7.734));\n\n@keyframes loader-color-shift {\n  0% {\n    stroke: var(--calcite-color-brand);\n  }\n  33% {\n    stroke: var(--calcite-color-brand-press);\n  }\n  66% {\n    stroke: var(--calcite-color-brand-hover);\n  }\n  100% {\n    stroke: var(--calcite-color-brand);\n  }\n}\n\n@keyframes loader-clockwise {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@include base-component();\n","import { Component, Element, h, Host, Prop, VNode } from \"@stencil/core\";\nimport { guid } from \"../../utils/guid\";\nimport { Scale } from \"../interfaces\";\n\n@Component({\n  tag: \"calcite-loader\",\n  styleUrl: \"loader.scss\",\n  shadow: true,\n})\nexport class Loader {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, displays smaller and appears to the left of the text. */\n  @Prop({ reflect: true }) inline = false;\n\n  /** Accessible name for the component. */\n  @Prop() label!: string;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /**\n   * Specifies the component type.\n   *\n   * Use `\"indeterminate\"` if finding actual progress value is impossible.\n   *\n   */\n  @Prop({ reflect: true }) type: \"indeterminate\" | \"determinate\";\n\n  /** The component's value. Valid only for `\"determinate\"` indicators. Percent complete of 100. */\n  @Prop() value = 0;\n\n  /** Text that displays under the component's indicator. */\n  @Prop() text = \"\";\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  render(): VNode {\n    const { el, inline, label, scale, text, type, value } = this;\n\n    const id = el.id || guid();\n    const radiusRatio = 0.45;\n    const size = inline ? this.getInlineSize(scale) : this.getSize(scale);\n    const radius = size * radiusRatio;\n    const viewbox = `0 0 ${size} ${size}`;\n    const isDeterminate = type === \"determinate\";\n    const circumference = 2 * radius * Math.PI;\n    const progress = (value / 100) * circumference;\n    const remaining = circumference - progress;\n    const valueNow = Math.floor(value);\n    const hostAttributes = {\n      \"aria-valuenow\": valueNow,\n      \"aria-valuemin\": 0,\n      \"aria-valuemax\": 100,\n      complete: valueNow === 100,\n    };\n    const svgAttributes = { r: radius, cx: size / 2, cy: size / 2 };\n    const determinateStyle = { \"stroke-dasharray\": `${progress} ${remaining}` };\n    return (\n      <Host\n        aria-label={label}\n        id={id}\n        role=\"progressbar\"\n        {...(isDeterminate ? hostAttributes : {})}\n      >\n        <div class=\"loader__svgs\">\n          <svg aria-hidden=\"true\" class=\"loader__svg loader__svg--1\" viewBox={viewbox}>\n            <circle {...svgAttributes} />\n          </svg>\n          <svg aria-hidden=\"true\" class=\"loader__svg loader__svg--2\" viewBox={viewbox}>\n            <circle {...svgAttributes} />\n          </svg>\n          <svg\n            aria-hidden=\"true\"\n            class=\"loader__svg loader__svg--3\"\n            viewBox={viewbox}\n            {...(isDeterminate ? { style: determinateStyle } : {})}\n          >\n            <circle {...svgAttributes} />\n          </svg>\n        </div>\n        {text && <div class=\"loader__text\">{text}</div>}\n        {isDeterminate && <div class=\"loader__percentage\">{value}</div>}\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteLoaderElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Return the proper sizes based on the scale property\n   *\n   * @param scale\n   */\n  private getSize(scale: string) {\n    return {\n      s: 32,\n      m: 56,\n      l: 80,\n    }[scale];\n  }\n\n  private getInlineSize(scale: string) {\n    return {\n      s: 12,\n      m: 16,\n      l: 20,\n    }[scale];\n  }\n}\n"],"version":3}
+{"file":"loader.js","mappings":";;;;;;;;AAAA,MAAM,SAAS,GAAG,q5LAAq5L,CAAC;AACx6L,4BAAe,SAAS;;MCQX,MAAM;;;;;sBAQiB,KAAK;;qBAMC,GAAG;;qBAW3B,CAAC;oBAGF,EAAE;;;;;;;IAQjB,MAAM;QACJ,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;QAE7D,MAAM,EAAE,GAAG,EAAE,CAAC,EAAE,IAAI,IAAI,EAAE,CAAC;QAC3B,MAAM,WAAW,GAAG,IAAI,CAAC;QACzB,MAAM,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QACtE,MAAM,MAAM,GAAG,IAAI,GAAG,WAAW,CAAC;QAClC,MAAM,OAAO,GAAG,OAAO,IAAI,IAAI,IAAI,EAAE,CAAC;QACtC,MAAM,aAAa,GAAG,IAAI,KAAK,aAAa,CAAC;QAC7C,MAAM,aAAa,GAAG,CAAC,GAAG,MAAM,GAAG,IAAI,CAAC,EAAE,CAAC;QAC3C,MAAM,QAAQ,GAAG,CAAC,KAAK,GAAG,GAAG,IAAI,aAAa,CAAC;QAC/C,MAAM,SAAS,GAAG,aAAa,GAAG,QAAQ,CAAC;QAC3C,MAAM,QAAQ,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;QACnC,MAAM,cAAc,GAAG;YACrB,eAAe,EAAE,QAAQ;YACzB,eAAe,EAAE,CAAC;YAClB,eAAe,EAAE,GAAG;YACpB,QAAQ,EAAE,QAAQ,KAAK,GAAG;SAC3B,CAAC;QACF,MAAM,aAAa,GAAG,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,IAAI,GAAG,CAAC,EAAE,EAAE,EAAE,IAAI,GAAG,CAAC,EAAE,CAAC;QAChE,MAAM,gBAAgB,GAAG,EAAE,kBAAkB,EAAE,GAAG,QAAQ,IAAI,SAAS,EAAE,EAAE,CAAC;QAC5E,QACE,EAAC,IAAI,mEACS,KAAK,EACjB,EAAE,EAAE,EAAE,EACN,IAAI,EAAC,aAAa,MACb,aAAa,GAAG,cAAc,GAAG,EAAE,CAAC,IAEzC,4DAAK,KAAK,EAAC,cAAc,IACvB,2EAAiB,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAE,OAAO,IACzE,kEAAY,aAAa,GAAI,CACzB,EACN,2EAAiB,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAE,OAAO,IACzE,kEAAY,aAAa,GAAI,CACzB,EACN,2EACc,MAAM,EAClB,KAAK,EAAC,4BAA4B,EAClC,OAAO,EAAE,OAAO,MACX,aAAa,GAAG,EAAE,KAAK,EAAE,gBAAgB,EAAE,GAAG,EAAE,CAAC,IAEtD,kEAAY,aAAa,GAAI,CACzB,CACF,EACL,IAAI,IAAI,4DAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAO,EAC9C,aAAa,IAAI,4DAAK,KAAK,EAAC,oBAAoB,IAAE,KAAK,CAAO,CAC1D,EACP;KACH;;;;;;;;;;;IAqBO,OAAO,CAAC,KAAa;QAC3B,OAAO;YACL,CAAC,EAAE,EAAE;YACL,CAAC,EAAE,EAAE;YACL,CAAC,EAAE,EAAE;SACN,CAAC,KAAK,CAAC,CAAC;KACV;IAEO,aAAa,CAAC,KAAa;QACjC,OAAO;YACL,CAAC,EAAE,EAAE;YACL,CAAC,EAAE,EAAE;YACL,CAAC,EAAE,EAAE;SACN,CAAC,KAAK,CAAC,CAAC;KACV;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/loader/loader.scss?tag=calcite-loader&encapsulation=shadow","src/components/loader/loader.tsx"],"sourcesContent":["/**\n * CSS Custom Properties\n *\n * These properties can be overridden using the component's tag as selector.\n *\n * @prop --calcite-loader-font-size: Specifies the font size of the loading percentage when type is `\"determinate\"`.\n * @prop --calcite-loader-size: The width and height of a non-inline loader.\n * @prop --calcite-loader-size-inline: The width and height of an inline loader\n * @prop --calcite-loader-padding : Specifies the padding of the loader.\n */\n\n@import \"../../assets/styles/animation\";\n\n$stroke-width: 3;\n$loader-scale: 54;\n$loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159;\n\n@media (prefers-reduced-motion: reduce) {\n  :root {\n    --calcite-internal-duration-factor: 0;\n  }\n}\n\n:host {\n  @apply relative mx-auto hidden items-center justify-center opacity-100;\n  min-block-size: var(--calcite-loader-size);\n  font-size: var(--calcite-loader-font-size);\n  stroke: var(--calcite-color-brand);\n  stroke-width: $stroke-width;\n  fill: none;\n  transform: scale(1, 1);\n  animation: loader-color-shift scaleDuration(--calcite-internal-animation-timing-slow, 2) alternate-reverse infinite\n    linear;\n  padding-block: var(--calcite-loader-padding, theme(\"spacing.16\"));\n  will-change: contents;\n}\n\n:host([scale=\"s\"]) {\n  --calcite-loader-font-size: theme(\"fontSize.n2\");\n  --calcite-loader-size: theme(\"spacing.8\");\n  --calcite-loader-size-inline: theme(\"spacing.3\");\n}\n\n:host([scale=\"m\"]) {\n  --calcite-loader-font-size: theme(\"fontSize.0\");\n  --calcite-loader-size: theme(\"spacing.16\");\n  --calcite-loader-size-inline: theme(\"spacing.4\");\n}\n\n:host([scale=\"l\"]) {\n  --calcite-loader-font-size: theme(\"fontSize.2\");\n  --calcite-loader-size: theme(\"spacing.24\");\n  --calcite-loader-size-inline: theme(\"spacing.6\");\n}\n\n:host([no-padding]) {\n  @apply py-0;\n}\n\n:host {\n  @apply flex;\n}\n\n.loader__text {\n  @apply text-n2h\n  text-color-1\n  block\n  text-center;\n  margin-block-start: calc(var(--calcite-loader-size) + theme(\"spacing.6\"));\n}\n\n.loader__percentage {\n  @apply text-color-1 absolute block text-center;\n  font-size: var(--calcite-loader-font-size);\n  inline-size: var(--calcite-loader-size);\n  inset-inline-start: 50%;\n  margin-inline-start: calc(var(--calcite-loader-size) / 2 * -1);\n  line-height: 0.25;\n  transform: scale(1, 1);\n}\n\n.loader__svgs {\n  @apply absolute overflow-visible opacity-100;\n  inline-size: var(--calcite-loader-size);\n  block-size: var(--calcite-loader-size);\n  inset-inline-start: 50%;\n  margin-inline-start: calc(var(--calcite-loader-size) / 2 * -1);\n  animation-iteration-count: infinite;\n  animation-timing-function: linear;\n  animation-duration: scaleDuration(--calcite-internal-animation-timing-slow, 6.66);\n  animation-name: loader-clockwise;\n}\n\n.loader__svg {\n  @apply absolute top-0 origin-center overflow-visible;\n  inset-inline-start: 0;\n  inline-size: var(--calcite-loader-size);\n  block-size: var(--calcite-loader-size);\n  animation-iteration-count: infinite;\n  animation-timing-function: linear;\n\n  &--1 {\n    animation-name: loader-offset-1;\n  }\n  &--2 {\n    animation-name: loader-offset-2;\n  }\n  &--3 {\n    animation-name: loader-offset-3;\n  }\n}\n\n:host([type=\"determinate\"]) {\n  @apply animate-none;\n  stroke: var(--calcite-color-border-3);\n  .loader__svgs {\n    @apply animate-none;\n  }\n  .loader__svg--3 {\n    @apply animate-none;\n    stroke: var(--calcite-color-brand);\n    stroke-dasharray: $loader-circumference;\n    transform: rotate(-90deg);\n    transition: all var(--calcite-internal-animation-timing-fast) linear;\n  }\n}\n\n:host([inline]) {\n  @apply relative m-0 animate-none stroke-current stroke-2 py-0;\n  block-size: var(--calcite-loader-size-inline);\n  min-block-size: var(--calcite-loader-size-inline);\n  inline-size: var(--calcite-loader-size-inline);\n  margin-inline-end: calc(var(--calcite-loader-size-inline) * 0.5);\n  vertical-align: calc(var(--calcite-loader-size-inline) * -1 * 0.2);\n}\n\n:host([inline]) .loader__svgs {\n  @apply top-0 m-0;\n  inset-inline-start: 0;\n  inline-size: var(--calcite-loader-size-inline);\n  block-size: var(--calcite-loader-size-inline);\n}\n\n:host([inline]) .loader__svg {\n  inline-size: var(--calcite-loader-size-inline);\n  block-size: var(--calcite-loader-size-inline);\n}\n\n:host([complete]) {\n  @apply opacity-0;\n  transform: scale(0.75, 0.75);\n  transform-origin: center;\n  transition:\n    opacity var(--calcite-internal-animation-timing-medium) linear 1000ms,\n    transform var(--calcite-internal-animation-timing-medium) linear 1000ms;\n}\n\n:host([complete]) .loader__svgs {\n  @apply opacity-0;\n  transform: scale(0.75, 0.75);\n  transform-origin: center;\n  transition:\n    opacity calc(180ms * var(--calcite-internal-duration-factor)) linear 800ms,\n    transform calc(180ms * var(--calcite-internal-duration-factor)) linear 800ms;\n}\n\n:host([complete]) .loader__percentage {\n  color: theme(\"colors.brand\");\n  transform: scale(1.05, 1.05);\n  transform-origin: center;\n  transition:\n    color var(--calcite-internal-animation-timing-medium) linear,\n    transform var(--calcite-internal-animation-timing-medium) linear;\n}\n\n/**\n  Segment variables\n  - i         index (1-3)\n  - size      length of the segment (0 - 100)\n  - growth    how much the segment grows during the animation\n              (size + growth should not exceed 100)\n  - duration  how long the segment takes to rotate 360° (seconds)\n*/\n@mixin generateSegment($i, $size, $growth, $duration) {\n  $circumference: calc($loader-circumference / $loader-scale) * 100;\n  $length: ($size * 0.01) * $circumference;\n  $end: $length + ($growth * 0.01) * $circumference;\n\n  .loader__svg--#{$i} {\n    stroke-dasharray: $length $circumference - $end;\n    animation-duration: $duration;\n  }\n  @keyframes loader-offset-#{$i} {\n    0% {\n      stroke-dasharray: $length $circumference - $length;\n      stroke-dashoffset: 0;\n    }\n    50% {\n      stroke-dasharray: $end $circumference - $end;\n      stroke-dashoffset: -$circumference * 0.5 - ($length - $end) * 0.5;\n    }\n    100% {\n      stroke-dasharray: $length $circumference - $length;\n      stroke-dashoffset: -$circumference;\n    }\n  }\n}\n\n@include generateSegment(1, 10, 40, scaleDuration(--calcite-internal-animation-timing-slow, 4.8));\n@include generateSegment(2, 20, 30, scaleDuration(--calcite-internal-animation-timing-slow, 6.4));\n@include generateSegment(3, 05, 45, scaleDuration(--calcite-internal-animation-timing-slow, 7.734));\n\n@keyframes loader-color-shift {\n  0% {\n    stroke: var(--calcite-color-brand);\n  }\n  33% {\n    stroke: var(--calcite-color-brand-press);\n  }\n  66% {\n    stroke: var(--calcite-color-brand-hover);\n  }\n  100% {\n    stroke: var(--calcite-color-brand);\n  }\n}\n\n@keyframes loader-clockwise {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@include base-component();\n","import { Component, Element, h, Host, Prop, VNode } from \"@stencil/core\";\nimport { guid } from \"../../utils/guid\";\nimport { Scale } from \"../interfaces\";\n\n@Component({\n  tag: \"calcite-loader\",\n  styleUrl: \"loader.scss\",\n  shadow: true,\n})\nexport class Loader {\n  //--------------------------------------------------------------------------\n  //\n  //  Properties\n  //\n  //--------------------------------------------------------------------------\n\n  /** When `true`, displays smaller and appears to the left of the text. */\n  @Prop({ reflect: true }) inline = false;\n\n  /** Accessible name for the component. */\n  @Prop() label!: string;\n\n  /** Specifies the size of the component. */\n  @Prop({ reflect: true }) scale: Scale = \"m\";\n\n  /**\n   * Specifies the component type.\n   *\n   * Use `\"indeterminate\"` if finding actual progress value is impossible.\n   *\n   */\n  @Prop({ reflect: true }) type: \"indeterminate\" | \"determinate\";\n\n  /** The component's value. Valid only for `\"determinate\"` indicators. Percent complete of 100. */\n  @Prop() value = 0;\n\n  /** Text that displays under the component's indicator. */\n  @Prop() text = \"\";\n\n  //--------------------------------------------------------------------------\n  //\n  //  Lifecycle\n  //\n  //--------------------------------------------------------------------------\n\n  render(): VNode {\n    const { el, inline, label, scale, text, type, value } = this;\n\n    const id = el.id || guid();\n    const radiusRatio = 0.45;\n    const size = inline ? this.getInlineSize(scale) : this.getSize(scale);\n    const radius = size * radiusRatio;\n    const viewbox = `0 0 ${size} ${size}`;\n    const isDeterminate = type === \"determinate\";\n    const circumference = 2 * radius * Math.PI;\n    const progress = (value / 100) * circumference;\n    const remaining = circumference - progress;\n    const valueNow = Math.floor(value);\n    const hostAttributes = {\n      \"aria-valuenow\": valueNow,\n      \"aria-valuemin\": 0,\n      \"aria-valuemax\": 100,\n      complete: valueNow === 100,\n    };\n    const svgAttributes = { r: radius, cx: size / 2, cy: size / 2 };\n    const determinateStyle = { \"stroke-dasharray\": `${progress} ${remaining}` };\n    return (\n      <Host\n        aria-label={label}\n        id={id}\n        role=\"progressbar\"\n        {...(isDeterminate ? hostAttributes : {})}\n      >\n        <div class=\"loader__svgs\">\n          <svg aria-hidden=\"true\" class=\"loader__svg loader__svg--1\" viewBox={viewbox}>\n            <circle {...svgAttributes} />\n          </svg>\n          <svg aria-hidden=\"true\" class=\"loader__svg loader__svg--2\" viewBox={viewbox}>\n            <circle {...svgAttributes} />\n          </svg>\n          <svg\n            aria-hidden=\"true\"\n            class=\"loader__svg loader__svg--3\"\n            viewBox={viewbox}\n            {...(isDeterminate ? { style: determinateStyle } : {})}\n          >\n            <circle {...svgAttributes} />\n          </svg>\n        </div>\n        {text && <div class=\"loader__text\">{text}</div>}\n        {isDeterminate && <div class=\"loader__percentage\">{value}</div>}\n      </Host>\n    );\n  }\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Properties\n  //\n  //--------------------------------------------------------------------------\n\n  @Element() el: HTMLCalciteLoaderElement;\n\n  //--------------------------------------------------------------------------\n  //\n  //  Private Methods\n  //\n  //--------------------------------------------------------------------------\n\n  /**\n   * Return the proper sizes based on the scale property\n   *\n   * @param scale\n   */\n  private getSize(scale: string) {\n    return {\n      s: 32,\n      m: 56,\n      l: 80,\n    }[scale];\n  }\n\n  private getInlineSize(scale: string) {\n    return {\n      s: 12,\n      m: 16,\n      l: 20,\n    }[scale];\n  }\n}\n"],"version":3}

package/dist/components/locale.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.0-next.3
+ * v2.8.0-next.4
  */
 import { b as containsCrossShadowBoundary, c as closestElementCrossShadowBoundary } from './dom.js';
 import { n as numberKeys } from './key.js';

package/dist/components/lt.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.0-next.3
+ * v2.8.0-next.4
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/lv.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.0-next.3
+ * v2.8.0-next.4
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/math.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.0-next.3
+ * v2.8.0-next.4
  */
 const clamp = (value, min, max) => Math.max(min, Math.min(value, max));
 const decimalNumberRegex = new RegExp(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);

package/dist/components/menu.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.0-next.3
+ * v2.8.0-next.4
  */
 import { proxyCustomElement, HTMLElement, forceUpdate, h, Host } from '@stencil/core/internal/client/index.js';
 import { s as slotChangeGetAssignedElements, v as focusElementInGroup, e as focusElement } from './dom.js';
@@ -162,7 +162,7 @@ const CalciteMenu = /*@__PURE__*/ proxyCustomElement(class CalciteMenu extends H
     //
     // --------------------------------------------------------------------------
     render() {
-        return (h(Host, { key: 'cc7a5ce88dda2c73e193e084b08c348560ba3fb7' }, h("ul", { key: '5d61828e68d006b56d7bb06d929df234104881b9', "aria-label": this.label, role: this.getEffectiveRole() }, h("slot", { key: '37a6dd7d672b57f03a996013dbcccfed896619ee', onSlotchange: this.handleMenuSlotChange }))));
+        return (h(Host, { key: '416e3251be537d07855efa74766406401b1788b0' }, h("ul", { key: 'b8c3702c713924d106a79d50cf68e83235c3974f', "aria-label": this.label, role: this.getEffectiveRole() }, h("slot", { key: '89aeabff8b5f7d9b6e2987118f3b7a60887be8cd', onSlotchange: this.handleMenuSlotChange }))));
     }
     static get delegatesFocus() { return true; }
     static get assetsDirs() { return ["assets"]; }

package/dist/components/mk.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.0-next.3
+ * v2.8.0-next.4
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/nb.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.0-next.3
+ * v2.8.0-next.4
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/nl.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.0-next.3
+ * v2.8.0-next.4
  */
 import { d as dayjs } from './calcite-input-time-picker.js';
 

package/dist/components/observers.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.0-next.3
+ * v2.8.0-next.4
  */
 import { Build } from '@stencil/core/internal/client/index.js';
 

package/dist/components/openCloseComponent.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.0-next.3
+ * v2.8.0-next.4
  */
 import { readTask } from '@stencil/core/internal/client/index.js';
 

package/dist/components/pagination.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.0-next.3
+ * v2.8.0-next.4
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client/index.js';
 import { s as setUpLoadableComponent, a as setComponentLoaded, c as componentFocusable } from './loadable.js';
@@ -13,7 +13,7 @@ import { d as defineCustomElement$1 } from './icon.js';
 
 /**
  * Do not edit directly
- * Generated on Tue, 16 Apr 2024 18:22:18 GMT
+ * Generated on Thu, 18 Apr 2024 19:56:11 GMT
  */
 const calciteContainerSizeWidthXxs = {"min":"0","max":"320px"}; // Small handheld devices and mini-windows
 const calciteContainerSizeWidthXs = {"min":"321px","max":"476px"}; // Handheld devices
@@ -330,7 +330,7 @@ const Pagination = /*@__PURE__*/ proxyCustomElement(class Pagination extends HTM
             }, disabled: disabled, key: "last-button", onClick: this.lastClicked }, h("calcite-icon", { flipRtl: true, icon: ICONS.last, scale: getIconScale(this.scale) }))) : null;
     }
     render() {
-        return (h(Fragment, { key: '33e48a317f4a70274309498cf5094a946552ea83' }, this.renderFirstChevron(), this.renderPreviousChevron(), this.renderItems(), this.renderNextChevron(), this.renderLastChevron()));
+        return (h(Fragment, { key: 'bdfa9609ab0d5a495be3de8a7d61c31bc98cb172' }, this.renderFirstChevron(), this.renderPreviousChevron(), this.renderItems(), this.renderNextChevron(), this.renderLastChevron()));
     }
     static get delegatesFocus() { return true; }
     static get assetsDirs() { return ["assets"]; }