@esri/calcite-components 1.9.2 → 1.9.3-next.1

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.
- * v1.9.2
+ * v1.9.3-next.1
  */
 'use strict';
 
@@ -6985,6 +6985,10 @@ function isBefore(a, b) {
   return children.indexOf(a) < children.indexOf(b);
 }
 
+function getIconScale(componentScale) {
+  return componentScale === "l" ? "m" : "s";
+}
+
 const SLOTS$z = {
   actionsStart: "actions-start",
   actionsEnd: "actions-end",
@@ -7066,8 +7070,8 @@ class AccordionItem {
   render() {
     const { iconFlipRtl } = this;
     const dir = getElementDir(this.el);
-    const iconStartEl = this.iconStart ? (hAsync("calcite-icon", { class: CSS$1d.iconStart, flipRtl: iconFlipRtl === "both" || iconFlipRtl === "start", icon: this.iconStart, key: "icon-start", scale: this.scale === "l" ? "m" : "s" })) : null;
-    const iconEndEl = this.iconEnd ? (hAsync("calcite-icon", { class: CSS$1d.iconEnd, flipRtl: iconFlipRtl === "both" || iconFlipRtl === "end", icon: this.iconEnd, key: "icon-end", scale: this.scale === "l" ? "m" : "s" })) : null;
+    const iconStartEl = this.iconStart ? (hAsync("calcite-icon", { class: CSS$1d.iconStart, flipRtl: iconFlipRtl === "both" || iconFlipRtl === "start", icon: this.iconStart, key: "icon-start", scale: getIconScale(this.scale) })) : null;
+    const iconEndEl = this.iconEnd ? (hAsync("calcite-icon", { class: CSS$1d.iconEnd, flipRtl: iconFlipRtl === "both" || iconFlipRtl === "end", icon: this.iconEnd, key: "icon-end", scale: getIconScale(this.scale) })) : null;
     const { description } = this;
     return (hAsync(Host, null, hAsync("div", { class: {
         [`icon-position--${this.iconPosition}`]: true,
@@ -7078,7 +7082,7 @@ class AccordionItem {
           ? "caretDown"
           : this.expanded
             ? "minus"
-            : "plus", scale: this.scale === "l" ? "m" : "s" })), this.renderActionsEnd()), hAsync("section", { "aria-labelledby": IDS$2.sectionToggle, class: CSS$1d.content, id: IDS$2.section }, hAsync("slot", null)))));
+            : "plus", scale: getIconScale(this.scale) })), this.renderActionsEnd()), hAsync("section", { "aria-labelledby": IDS$2.sectionToggle, class: CSS$1d.content, id: IDS$2.section }, hAsync("slot", null)))));
   }
   //--------------------------------------------------------------------------
   //
@@ -8123,10 +8127,9 @@ class Action {
   }
   renderIconContainer() {
     const { loading, icon, scale, el, iconFlipRtl } = this;
-    const iconScale = scale === "l" ? "m" : "s";
     const loaderScale = scale === "l" ? "l" : "m";
     const calciteLoaderNode = loading ? (hAsync("calcite-loader", { inline: true, label: this.messages.loading, scale: loaderScale })) : null;
-    const calciteIconNode = icon ? (hAsync("calcite-icon", { flipRtl: iconFlipRtl, icon: icon, scale: iconScale })) : null;
+    const calciteIconNode = icon ? (hAsync("calcite-icon", { flipRtl: iconFlipRtl, icon: icon, scale: getIconScale(this.scale) })) : null;
     const iconNode = calciteLoaderNode || calciteIconNode;
     const hasIconToDisplay = iconNode || el.children?.length;
     const slotContainerNode = (hAsync("div", { class: {
@@ -10701,7 +10704,7 @@ class Alert {
   renderCloseButton() {
     return (hAsync("button", { "aria-label": this.messages.close, class: CSS$17.close, key: "close", onClick: this.closeAlert, type: "button",
       // 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: (el) => (this.closeButton = el) }, hAsync("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
+      ref: (el) => (this.closeButton = el) }, hAsync("calcite-icon", { icon: "x", scale: getIconScale(this.scale) })));
   }
   renderQueueCount() {
     const queueNumber = this.queueLength > 2 ? this.queueLength - 1 : 1;
@@ -10715,7 +10718,7 @@ class Alert {
     return (hAsync("div", { class: CSS$17.actionsEnd }, hAsync("slot", { name: SLOTS$t.actionsEnd, onSlotchange: this.actionsEndSlotChangeHandler })));
   }
   renderIcon(icon) {
-    return (hAsync("div", { class: CSS$17.icon }, hAsync("calcite-icon", { flipRtl: this.iconFlipRtl, icon: icon, scale: this.scale === "l" ? "m" : "s" })));
+    return (hAsync("div", { class: CSS$17.icon }, hAsync("calcite-icon", { flipRtl: this.iconFlipRtl, icon: icon, scale: getIconScale(this.scale) })));
   }
   // when an alert is opened or closed, update queue and determine active alert
   alertSync(event) {
@@ -12152,8 +12155,8 @@ class Button {
     const Tag = childElType;
     const loaderNode = this.hasLoader ? (hAsync("div", { class: CSS$14.buttonLoader }, hAsync("calcite-loader", { class: this.loading ? CSS$14.loadingIn : CSS$14.loadingOut, inline: true, label: this.messages.loading, scale: this.scale === "l" ? "m" : "s" }))) : null;
     const noStartEndIcons = !this.iconStart && !this.iconEnd;
-    const iconStartEl = (hAsync("calcite-icon", { class: { [CSS$14.icon]: true, [CSS$14.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: this.scale === "l" ? "m" : "s" }));
-    const iconEndEl = (hAsync("calcite-icon", { class: { [CSS$14.icon]: true, [CSS$14.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: this.scale === "l" ? "m" : "s" }));
+    const iconStartEl = (hAsync("calcite-icon", { class: { [CSS$14.icon]: true, [CSS$14.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: getIconScale(this.scale) }));
+    const iconEndEl = (hAsync("calcite-icon", { class: { [CSS$14.icon]: true, [CSS$14.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: getIconScale(this.scale) }));
     const contentEl = (hAsync("span", { class: CSS$14.content, ref: (el) => (this.contentEl = el) }, hAsync("slot", null)));
     return (hAsync(Tag, { "aria-label": !this.loading ? getLabelText(this) : this.messages.loading, "aria-live": "polite", class: {
         [CSS$14.buttonPadding]: noStartEndIcons,
@@ -13498,15 +13501,15 @@ class Chip {
     return (hAsync("div", { class: {
         [CSS$_.selectIcon]: true,
         [CSS$_.selectIconActive]: this.selectionMode === "multiple" || this.selected,
-      } }, hAsync("calcite-icon", { icon: icon, scale: this.scale === "l" ? "m" : "s" })));
+      } }, hAsync("calcite-icon", { icon: icon, scale: getIconScale(this.scale) })));
   }
   renderCloseButton() {
     return (hAsync("button", { "aria-label": this.messages.dismissLabel, class: CSS$_.close, onClick: this.close, onKeyDown: this.closeButtonKeyDownHandler, tabIndex: this.disabled ? -1 : 0,
       // 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: (el) => (this.closeButtonEl = el) }, hAsync("calcite-icon", { icon: ICONS$e.close, scale: this.scale === "l" ? "m" : "s" })));
+      ref: (el) => (this.closeButtonEl = el) }, hAsync("calcite-icon", { icon: ICONS$e.close, scale: getIconScale(this.scale) })));
   }
   renderIcon() {
-    return (hAsync("calcite-icon", { class: CSS$_.chipIcon, flipRtl: this.iconFlipRtl, icon: this.icon, scale: this.scale === "l" ? "m" : "s" }));
+    return (hAsync("calcite-icon", { class: CSS$_.chipIcon, flipRtl: this.iconFlipRtl, icon: this.icon, scale: getIconScale(this.scale) }));
   }
   render() {
     const disableInteraction = this.disabled || (!this.disabled && !this.interactive);
@@ -18883,24 +18886,22 @@ function getEffectivePlacement(floatingEl, placement) {
  *
  * Note: this is not needed for components that use `calcite-popover`.
  *
- * @param component
- * @param options
- * @param options.referenceEl
- * @param options.floatingEl
- * @param options.overlayPositioning
- * @param options.placement
- * @param options.flipDisabled
- * @param options.flipPlacements
- * @param options.offsetDistance
- * @param options.offsetSkidding
- * @param options.arrowEl
- * @param options.type
- * @param delayed
+ * @param component - A floating-ui component.
+ * @param options - Reposition parameters.
+ * @param options.referenceEl - The `referenceElement` used to position the component according to its `placement` value.
+ * @param options.floatingEl - The `floatingElement` containing the floating ui.
+ * @param options.overlayPositioning - type of positioning to use for the overlaid content.
+ * @param options.placement - Determines where the component will be positioned relative to the `referenceElement`.
+ * @param options.flipDisabled - Prevents flipping the component's placement when overlapping its `referenceElement`.
+ * @param options.flipPlacements - Defines the available placements that can be used when a flip occurs.
+ * @param options.offsetDistance - Offsets the position of the popover away from the `referenceElement`.
+ * @param options.offsetSkidding - Offsets the position of the component along the `referenceElement`.
+ * @param options.arrowEl - A customizable arrow element.
+ * @param options.type - The type of floating UI.
+ * @param delayed - Reposition the component after a delay.
+ * @returns {Promise<void>}
  */
 async function reposition(component, options, delayed = false) {
-  if (!component.open) {
-    return;
-  }
   const positionFunction = delayed ? getDebouncedReposition(component) : positionFloatingUI;
   return positionFunction(component, options);
 }
@@ -18932,9 +18933,9 @@ const componentToDebouncedRepositionMap = new WeakMap();
 /**
  * Helper to set up floating element interactions on connectedCallback.
  *
- * @param component
- * @param referenceEl
- * @param floatingEl
+ * @param component - A floating-ui component.
+ * @param referenceEl - The `referenceElement` used to position the component according to its `placement` value.
+ * @param floatingEl - The `floatingElement` containing the floating ui.
  */
 function connectFloatingUI(component, referenceEl, floatingEl) {
   if (!floatingEl || !referenceEl) {
@@ -18960,9 +18961,9 @@ function connectFloatingUI(component, referenceEl, floatingEl) {
 /**
  * Helper to tear down floating element interactions on disconnectedCallback.
  *
- * @param component
- * @param referenceEl
- * @param floatingEl
+ * @param component - A floating-ui component.
+ * @param referenceEl - The `referenceElement` used to position the component according to its `placement` value.
+ * @param floatingEl - The `floatingElement` containing the floating ui.
  */
 function disconnectFloatingUI(component, referenceEl, floatingEl) {
   if (!floatingEl || !referenceEl) {
@@ -20003,7 +20004,7 @@ class ComboboxItem {
         [CSS$U.custom]: !!this.icon,
         [CSS$U.iconActive]: this.icon && this.selected,
         [CSS$U.iconIndent]: true,
-      }, flipRtl: this.iconFlipRtl, icon: this.icon || iconPath, key: "icon", scale: this.scale === "l" ? "m" : "s" })) : null;
+      }, flipRtl: this.iconFlipRtl, icon: this.icon || iconPath, key: "icon", scale: getIconScale(this.scale) })) : null;
   }
   renderSelectIndicator(showDot, iconPath) {
     return showDot ? (hAsync("span", { class: {
@@ -20014,7 +20015,7 @@ class ComboboxItem {
         [CSS$U.icon]: true,
         [CSS$U.iconActive]: this.selected,
         [CSS$U.iconIndent]: true,
-      }, flipRtl: this.iconFlipRtl, icon: iconPath, key: "indicator", scale: this.scale === "l" ? "m" : "s" }));
+      }, flipRtl: this.iconFlipRtl, icon: iconPath, key: "indicator", scale: getIconScale(this.scale) }));
   }
   renderChildren() {
     if (getSlotted(this.el)) {
@@ -21406,16 +21407,15 @@ class DatePickerMonthHeader {
     const { months, unitOrder } = localeData;
     const localizedMonth = (months.wide || months.narrow || months.abbreviated)[activeMonth];
     const localizedYear = this.formatCalendarYear(activeDate.getFullYear());
-    const iconScale = this.scale === "l" ? "m" : "s";
     const order = getOrder(unitOrder);
     const reverse = order.indexOf("y") < order.indexOf("m");
     const suffix = localeData.year?.suffix;
-    return (hAsync(Fragment, null, hAsync("a", { "aria-disabled": `${this.prevMonthDate.getMonth() === activeMonth}`, "aria-label": messages.prevMonth, class: CSS$S.chevron, href: "#", onClick: this.prevMonthClick, onKeyDown: this.prevMonthKeydown, role: "button", tabindex: this.prevMonthDate.getMonth() === activeMonth ? -1 : 0 }, hAsync("calcite-icon", { "flip-rtl": true, icon: ICON.chevronLeft, scale: iconScale })), hAsync("div", { class: { text: true, [CSS$S.textReverse]: reverse } }, hAsync(Heading, { class: CSS$S.month, level: this.headingLevel }, localizedMonth), hAsync("span", { class: CSS$S.yearWrap }, hAsync("input", { "aria-label": messages.year, class: {
+    return (hAsync(Fragment, null, hAsync("a", { "aria-disabled": `${this.prevMonthDate.getMonth() === activeMonth}`, "aria-label": messages.prevMonth, class: CSS$S.chevron, href: "#", onClick: this.prevMonthClick, onKeyDown: this.prevMonthKeydown, role: "button", tabindex: this.prevMonthDate.getMonth() === activeMonth ? -1 : 0 }, hAsync("calcite-icon", { "flip-rtl": true, icon: ICON.chevronLeft, scale: getIconScale(this.scale) })), hAsync("div", { class: { text: true, [CSS$S.textReverse]: reverse } }, hAsync(Heading, { class: CSS$S.month, level: this.headingLevel }, localizedMonth), hAsync("span", { class: CSS$S.yearWrap }, hAsync("input", { "aria-label": messages.year, class: {
         year: true,
         [CSS$S.yearSuffix]: !!suffix,
       }, inputmode: "numeric", maxlength: "4", minlength: "1", onChange: this.onYearChange, onInput: this.onYearInput, onKeyDown: this.onYearKey, pattern: "\\d*", type: "text", value: localizedYear,
       // 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: (el) => (this.yearInput = el) }), suffix && hAsync("span", { class: CSS$S.suffix }, suffix))), hAsync("a", { "aria-disabled": `${this.nextMonthDate.getMonth() === activeMonth}`, "aria-label": messages.nextMonth, class: CSS$S.chevron, href: "#", onClick: this.nextMonthClick, onKeyDown: this.nextMonthKeydown, role: "button", tabindex: this.nextMonthDate.getMonth() === activeMonth ? -1 : 0 }, hAsync("calcite-icon", { "flip-rtl": true, icon: ICON.chevronRight, scale: iconScale }))));
+      ref: (el) => (this.yearInput = el) }), suffix && hAsync("span", { class: CSS$S.suffix }, suffix))), hAsync("a", { "aria-disabled": `${this.nextMonthDate.getMonth() === activeMonth}`, "aria-label": messages.nextMonth, class: CSS$S.chevron, href: "#", onClick: this.nextMonthClick, onKeyDown: this.nextMonthKeydown, role: "button", tabindex: this.nextMonthDate.getMonth() === activeMonth ? -1 : 0 }, hAsync("calcite-icon", { "flip-rtl": true, icon: ICON.chevronRight, scale: getIconScale(this.scale) }))));
   }
   setNextPrevMonthDates() {
     if (!this.activeDate) {
@@ -22064,9 +22064,9 @@ class DropdownItem {
   }
   render() {
     const { href, selectionMode, label, iconFlipRtl, scale } = this;
-    const iconStartEl = (hAsync("calcite-icon", { class: CSS$R.iconStart, flipRtl: iconFlipRtl === "start" || iconFlipRtl === "both", icon: this.iconStart, scale: scale === "l" ? "m" : "s" }));
+    const iconStartEl = (hAsync("calcite-icon", { class: CSS$R.iconStart, flipRtl: iconFlipRtl === "start" || iconFlipRtl === "both", icon: this.iconStart, scale: getIconScale(this.scale) }));
     const contentNode = (hAsync("span", { class: CSS$R.itemContent }, hAsync("slot", null)));
-    const iconEndEl = (hAsync("calcite-icon", { class: CSS$R.iconEnd, flipRtl: iconFlipRtl === "end" || iconFlipRtl === "both", icon: this.iconEnd, scale: scale === "l" ? "m" : "s" }));
+    const iconEndEl = (hAsync("calcite-icon", { class: CSS$R.iconEnd, flipRtl: iconFlipRtl === "end" || iconFlipRtl === "both", icon: this.iconEnd, scale: getIconScale(this.scale) }));
     const slottedContent = this.iconStart && this.iconEnd
       ? [iconStartEl, contentNode, iconEndEl]
       : this.iconStart
@@ -22092,7 +22092,7 @@ class DropdownItem {
         [CSS$R.containerMulti]: selectionMode === "multiple",
         [CSS$R.containerSingle]: selectionMode === "single",
         [CSS$R.containerNone]: selectionMode === "none",
-      } }, selectionMode !== "none" ? (hAsync("calcite-icon", { class: CSS$R.icon, icon: selectionMode === "multiple" ? "check" : "bullet-point", scale: scale === "l" ? "m" : "s" })) : null, contentEl)));
+      } }, selectionMode !== "none" ? (hAsync("calcite-icon", { class: CSS$R.icon, icon: selectionMode === "multiple" ? "check" : "bullet-point", scale: getIconScale(this.scale) })) : null, contentEl)));
   }
   //--------------------------------------------------------------------------
   //
@@ -24158,17 +24158,17 @@ class Input {
   render() {
     const dir = getElementDir(this.el);
     const loader = (hAsync("div", { class: CSS$I.loader }, hAsync("calcite-progress", { label: this.messages.loading, type: "indeterminate" })));
-    const inputClearButton = (hAsync("button", { "aria-label": this.messages.clear, class: CSS$I.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
-    const iconEl = (hAsync("calcite-icon", { class: CSS$I.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: this.scale === "l" ? "m" : "s" }));
+    const inputClearButton = (hAsync("button", { "aria-label": this.messages.clear, class: CSS$I.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { icon: "x", scale: getIconScale(this.scale) })));
+    const iconEl = (hAsync("calcite-icon", { class: CSS$I.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: getIconScale(this.scale) }));
     const isHorizontalNumberButton = this.numberButtonType === "horizontal";
     const numberButtonsHorizontalUp = (hAsync("button", { "aria-hidden": "true", class: {
         [CSS$I.numberButtonItem]: true,
         [CSS$I.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", { icon: "chevron-up", scale: this.scale === "l" ? "m" : "s" })));
+      }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onPointerDown: this.numberButtonPointerDownHandler, onPointerOut: this.numberButtonPointerUpAndOutHandler, onPointerUp: this.numberButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { icon: "chevron-up", scale: getIconScale(this.scale) })));
     const numberButtonsHorizontalDown = (hAsync("button", { "aria-hidden": "true", class: {
         [CSS$I.numberButtonItem]: true,
         [CSS$I.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", { icon: "chevron-down", scale: this.scale === "l" ? "m" : "s" })));
+      }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.numberButtonPointerDownHandler, onPointerOut: this.numberButtonPointerUpAndOutHandler, onPointerUp: this.numberButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { icon: "chevron-down", scale: getIconScale(this.scale) })));
     const numberButtonsVertical = (hAsync("div", { class: CSS$I.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
     const prefixText = hAsync("div", { class: CSS$I.prefix }, this.prefixText);
     const suffixText = hAsync("div", { class: CSS$I.suffix }, this.suffixText);
@@ -24183,7 +24183,7 @@ class Input {
           }, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.enterKeyHint, inputMode: this.inputMode, max: this.maxString, maxLength: this.maxLength, min: this.minString, minLength: this.minLength, multiple: this.multiple, name: this.name, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler, onFocus: this.inputFocusHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeyDownHandler, onKeyUp: this.inputKeyUpHandler, pattern: this.pattern, placeholder: this.placeholder || "", readOnly: this.readOnly, required: this.required ? true : null, step: this.step, tabIndex: this.disabled || (this.inlineEditableEl && !this.editingEnabled) ? -1 : null, type: this.type, value: this.value,
           // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
           ref: this.setChildElRef }),
-        this.isTextarea ? (hAsync("div", { class: CSS$I.resizeIconWrapper }, hAsync("calcite-icon", { icon: "chevron-down", scale: this.scale === "l" ? "m" : "s" }))) : null,
+        this.isTextarea ? (hAsync("div", { class: CSS$I.resizeIconWrapper }, hAsync("calcite-icon", { icon: "chevron-down", scale: getIconScale(this.scale) }))) : null,
       ]
       : null;
     return (hAsync(Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, hAsync("div", { class: { [CSS$I.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly
@@ -24271,30 +24271,30 @@ const CSS$H = {
 };
 
 /*!
-* focus-trap 7.5.2
+* focus-trap 7.5.3
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
 */
 
-function ownKeys$1(object, enumerableOnly) {
-  var keys = Object.keys(object);
+function ownKeys$1(e, r) {
+  var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
-  }
-  return keys;
-}
-function _objectSpread2$1(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) {
-      _defineProperty$1(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
+  }
+  return t;
+}
+function _objectSpread2$1(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys$1(Object(t), !0).forEach(function (r) {
+      _defineProperty$1(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
     });
   }
-  return target;
+  return e;
 }
 function _defineProperty$1(obj, key, value) {
   key = _toPropertyKey(key);
@@ -25089,14 +25089,14 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
       state.active = true;
       state.paused = false;
       state.nodeFocusedBeforeActivation = doc.activeElement;
-      onActivate === null || onActivate === void 0 ? void 0 : onActivate();
+      onActivate === null || onActivate === void 0 || onActivate();
       var finishActivation = function finishActivation() {
         if (checkCanFocusTrap) {
           updateTabbableNodes();
         }
         addListeners();
         updateObservedNodes();
-        onPostActivate === null || onPostActivate === void 0 ? void 0 : onPostActivate();
+        onPostActivate === null || onPostActivate === void 0 || onPostActivate();
       };
       if (checkCanFocusTrap) {
         checkCanFocusTrap(state.containers.concat()).then(finishActivation, finishActivation);
@@ -25125,13 +25125,13 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
       var onPostDeactivate = getOption(options, 'onPostDeactivate');
       var checkCanReturnFocus = getOption(options, 'checkCanReturnFocus');
       var returnFocus = getOption(options, 'returnFocus', 'returnFocusOnDeactivate');
-      onDeactivate === null || onDeactivate === void 0 ? void 0 : onDeactivate();
+      onDeactivate === null || onDeactivate === void 0 || onDeactivate();
       var finishDeactivation = function finishDeactivation() {
         delay(function () {
           if (returnFocus) {
             tryFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation));
           }
-          onPostDeactivate === null || onPostDeactivate === void 0 ? void 0 : onPostDeactivate();
+          onPostDeactivate === null || onPostDeactivate === void 0 || onPostDeactivate();
         });
       };
       if (returnFocus && checkCanReturnFocus) {
@@ -25148,10 +25148,10 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
       var onPause = getOption(pauseOptions, 'onPause');
       var onPostPause = getOption(pauseOptions, 'onPostPause');
       state.paused = true;
-      onPause === null || onPause === void 0 ? void 0 : onPause();
+      onPause === null || onPause === void 0 || onPause();
       removeListeners();
       updateObservedNodes();
-      onPostPause === null || onPostPause === void 0 ? void 0 : onPostPause();
+      onPostPause === null || onPostPause === void 0 || onPostPause();
       return this;
     },
     unpause: function unpause(unpauseOptions) {
@@ -25161,11 +25161,11 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
       var onUnpause = getOption(unpauseOptions, 'onUnpause');
       var onPostUnpause = getOption(unpauseOptions, 'onPostUnpause');
       state.paused = false;
-      onUnpause === null || onUnpause === void 0 ? void 0 : onUnpause();
+      onUnpause === null || onUnpause === void 0 || onUnpause();
       updateTabbableNodes();
       addListeners();
       updateObservedNodes();
-      onPostUnpause === null || onPostUnpause === void 0 ? void 0 : onPostUnpause();
+      onPostUnpause === null || onPostUnpause === void 0 || onPostUnpause();
       return this;
     },
     updateContainerElements: function updateContainerElements(containerElements) {
@@ -25745,7 +25745,7 @@ class InputDatePicker {
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setTransitionEl }, hAsync("calcite-date-picker", { activeDate: this.datePickerActiveDate, activeRange: this.focusedInput, headingLevel: this.headingLevel, max: this.max, maxAsDate: this.maxAsDate, messageOverrides: this.messageOverrides, min: this.min, minAsDate: this.minAsDate, numberingSystem: numberingSystem, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, tabIndex: this.open ? undefined : -1, valueAsDate: this.valueAsDate,
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-      ref: this.setDatePickerRef }))), this.range && this.layout === "horizontal" && (hAsync("div", { class: "horizontal-arrow-container" }, hAsync("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: this.scale === "l" ? "m" : "s" }))), this.range && this.layout === "vertical" && this.scale !== "s" && (hAsync("div", { class: "vertical-arrow-container" }, hAsync("calcite-icon", { icon: "arrow-down", scale: this.scale === "l" ? "m" : "s" }))), this.range && (hAsync("div", { class: "input-wrapper", onClick: this.onInputWrapperClick,
+      ref: this.setDatePickerRef }))), this.range && this.layout === "horizontal" && (hAsync("div", { class: "horizontal-arrow-container" }, hAsync("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: getIconScale(this.scale) }))), this.range && this.layout === "vertical" && this.scale !== "s" && (hAsync("div", { class: "vertical-arrow-container" }, hAsync("calcite-icon", { icon: "arrow-down", scale: getIconScale(this.scale) }))), this.range && (hAsync("div", { class: "input-wrapper", onClick: this.onInputWrapperClick,
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setEndWrapper }, hAsync("calcite-input", { "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", class: {
         input: true,
@@ -26537,17 +26537,17 @@ class InputNumber {
   render() {
     const dir = getElementDir(this.el);
     const loader = (hAsync("div", { class: CSS$G.loader }, hAsync("calcite-progress", { label: this.messages.loading, type: "indeterminate" })));
-    const inputClearButton = (hAsync("button", { "aria-label": this.messages.clear, class: CSS$G.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
-    const iconEl = (hAsync("calcite-icon", { class: CSS$G.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: this.scale === "l" ? "m" : "s" }));
+    const inputClearButton = (hAsync("button", { "aria-label": this.messages.clear, class: CSS$G.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { icon: "x", scale: getIconScale(this.scale) })));
+    const iconEl = (hAsync("calcite-icon", { class: CSS$G.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: getIconScale(this.scale) }));
     const isHorizontalNumberButton = this.numberButtonType === "horizontal";
     const numberButtonsHorizontalUp = (hAsync("button", { "aria-hidden": "true", class: {
         [CSS$G.numberButtonItem]: true,
         [CSS$G.buttonItemHorizontal]: isHorizontalNumberButton,
-      }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerUpAndOutHandler, onPointerUp: this.nudgeButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { icon: "chevron-up", scale: this.scale === "l" ? "m" : "s" })));
+      }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerUpAndOutHandler, onPointerUp: this.nudgeButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { icon: "chevron-up", scale: getIconScale(this.scale) })));
     const numberButtonsHorizontalDown = (hAsync("button", { "aria-hidden": "true", class: {
         [CSS$G.numberButtonItem]: true,
         [CSS$G.buttonItemHorizontal]: isHorizontalNumberButton,
-      }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerUpAndOutHandler, onPointerUp: this.nudgeButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { icon: "chevron-down", scale: this.scale === "l" ? "m" : "s" })));
+      }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerUpAndOutHandler, onPointerUp: this.nudgeButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { icon: "chevron-down", scale: getIconScale(this.scale) })));
     const numberButtonsVertical = (hAsync("div", { class: CSS$G.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
     const prefixText = hAsync("div", { class: CSS$G.prefix }, this.prefixText);
     const suffixText = hAsync("div", { class: CSS$G.suffix }, this.suffixText);
@@ -26925,8 +26925,8 @@ class InputText {
   render() {
     const dir = getElementDir(this.el);
     const loader = (hAsync("div", { class: CSS$F.loader }, hAsync("calcite-progress", { label: this.messages.loading, type: "indeterminate" })));
-    const inputClearButton = (hAsync("button", { "aria-label": this.messages.clear, class: CSS$F.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputTextValue, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
-    const iconEl = (hAsync("calcite-icon", { class: CSS$F.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: this.scale === "l" ? "m" : "s" }));
+    const inputClearButton = (hAsync("button", { "aria-label": this.messages.clear, class: CSS$F.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputTextValue, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { icon: "x", scale: getIconScale(this.scale) })));
+    const iconEl = (hAsync("calcite-icon", { class: CSS$F.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: getIconScale(this.scale) }));
     const prefixText = hAsync("div", { class: CSS$F.prefix }, this.prefixText);
     const suffixText = hAsync("div", { class: CSS$F.suffix }, this.suffixText);
     const childEl = (hAsync("input", { "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: this.autofocus ? true : null, class: {
@@ -33268,7 +33268,7 @@ class List$1 {
   }; }
 }
 
-const listItemCss = "/*!@:host([disabled])*/[disabled].sc-calcite-list-item-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-list-item-h *.sc-calcite-list-item,.sc-calcite-list-item-h[disabled] .sc-calcite-list-item-s>*{pointer-events:none}/*!@:host*/.sc-calcite-list-item-h{display:flex;flex-direction:column;--calcite-list-item-icon-color:var(--calcite-ui-brand);--calcite-list-item-spacing-indent:1rem}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-list-item-h[disabled] .sc-calcite-list-item-s>[calcite-hydrated][disabled],[disabled].sc-calcite-list-item-h [calcite-hydrated][disabled].sc-calcite-list-item{opacity:1}/*!@.container*/.container.sc-calcite-list-item{box-sizing:border-box;display:flex;flex:1 1 0%;background-color:var(--calcite-ui-foreground-1);font-family:var(--calcite-sans-family);padding-inline-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier))}/*!@.container **/.container.sc-calcite-list-item *.sc-calcite-list-item{box-sizing:border-box}/*!@.container:hover*/.container.sc-calcite-list-item:hover{cursor:pointer;background-color:var(--calcite-ui-foreground-2)}/*!@.container--border-selected*/.container--border-selected.sc-calcite-list-item{border-inline-start:4px solid var(--calcite-ui-brand)}/*!@.container--border-unselected*/.container--border-unselected.sc-calcite-list-item{border-inline-start:4px solid transparent}/*!@.nested-container*/.nested-container.sc-calcite-list-item{display:flex;flex-direction:column;background-color:var(--calcite-ui-foreground-1)}/*!@.nested-container--hidden*/.nested-container--hidden.sc-calcite-list-item{display:none}/*!@.content-container*/.content-container.sc-calcite-list-item{display:flex;flex:1 1 auto;align-items:stretch;padding:0px;font-family:var(--calcite-sans-family);font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-2)}/*!@tr,\ntd*/tr.sc-calcite-list-item,td.sc-calcite-list-item{outline-color:transparent}/*!@tr:focus,\ntd:focus*/tr.sc-calcite-list-item:focus,td.sc-calcite-list-item:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}/*!@.content,\n.custom-content*/.content.sc-calcite-list-item,.custom-content.sc-calcite-list-item{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;padding-inline:0.75rem;padding-block:0.5rem;font-size:var(--calcite-font-size--2);line-height:1.375}/*!@.label,\n.description*/.label.sc-calcite-list-item,.description.sc-calcite-list-item{font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal);word-wrap:break-word;word-break:break-word}/*!@.label:only-child,\n.description:only-child*/.label.sc-calcite-list-item:only-child,.description.sc-calcite-list-item:only-child{margin:0px;padding-block:0.25rem}/*!@.label*/.label.sc-calcite-list-item{color:var(--calcite-ui-text-1)}/*!@.description*/.description.sc-calcite-list-item{margin-block-start:0.125rem;color:var(--calcite-ui-text-3)}/*!@.content-start*/.content-start.sc-calcite-list-item{justify-content:flex-start}/*!@.content-end*/.content-end.sc-calcite-list-item{justify-content:flex-end}/*!@.content-start,\n.content-end*/.content-start.sc-calcite-list-item,.content-end.sc-calcite-list-item{flex:1 1 auto}/*!@.content-container--has-center-content .content-start,\n.content-container--has-center-content .content-end*/.content-container--has-center-content.sc-calcite-list-item .content-start.sc-calcite-list-item,.content-container--has-center-content.sc-calcite-list-item .content-end.sc-calcite-list-item{flex:0 1 auto}/*!@.selection-container*/.selection-container.sc-calcite-list-item{display:flex;padding-inline:0.75rem;color:var(--calcite-list-item-icon-color)}/*!@.actions-start,\n.actions-end,\n.content-start,\n.content-end,\n.selection-container,\n.drag-container,\n.open-container*/.actions-start.sc-calcite-list-item,.actions-end.sc-calcite-list-item,.content-start.sc-calcite-list-item,.content-end.sc-calcite-list-item,.selection-container.sc-calcite-list-item,.drag-container.sc-calcite-list-item,.open-container.sc-calcite-list-item{display:flex;align-items:center}/*!@.open-container,\n.selection-container*/.open-container.sc-calcite-list-item,.selection-container.sc-calcite-list-item{cursor:pointer}/*!@.content-start ::slotted(calcite-icon),\n.content-end ::slotted(calcite-icon)*/.content-start .sc-calcite-list-item-s>calcite-icon,.content-end .sc-calcite-list-item-s>calcite-icon{margin-inline:0.75rem;align-self:center}/*!@.actions-start ::slotted(calcite-action),\n.actions-end ::slotted(calcite-action)*/.actions-start .sc-calcite-list-item-s>calcite-action,.actions-end .sc-calcite-list-item-s>calcite-action{align-self:stretch;color:inherit}/*!@::slotted(calcite-list-item)*/.sc-calcite-list-item-s>calcite-list-item{border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}/*!@:host([hidden])*/[hidden].sc-calcite-list-item-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-list-item{display:none}";
+const listItemCss = "/*!@:host([disabled])*/[disabled].sc-calcite-list-item-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-list-item-h *.sc-calcite-list-item,.sc-calcite-list-item-h[disabled] .sc-calcite-list-item-s>*{pointer-events:none}/*!@:host*/.sc-calcite-list-item-h{display:flex;flex-direction:column;--calcite-list-item-icon-color:var(--calcite-ui-brand);--calcite-list-item-spacing-indent:1rem}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-list-item-h[disabled] .sc-calcite-list-item-s>[calcite-hydrated][disabled],[disabled].sc-calcite-list-item-h [calcite-hydrated][disabled].sc-calcite-list-item{opacity:1}/*!@.container*/.container.sc-calcite-list-item{box-sizing:border-box;display:flex;flex:1 1 0%;background-color:var(--calcite-ui-foreground-1);font-family:var(--calcite-sans-family);padding-inline-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier))}/*!@.container **/.container.sc-calcite-list-item *.sc-calcite-list-item{box-sizing:border-box}/*!@.container:hover*/.container.sc-calcite-list-item:hover{cursor:pointer;background-color:var(--calcite-ui-foreground-2)}/*!@.container:active*/.container.sc-calcite-list-item:active{background-color:var(--calcite-ui-foreground-1)}/*!@.container--border-selected*/.container--border-selected.sc-calcite-list-item{border-inline-start:4px solid var(--calcite-ui-brand)}/*!@.container--border-unselected*/.container--border-unselected.sc-calcite-list-item{border-inline-start:4px solid transparent}/*!@.nested-container*/.nested-container.sc-calcite-list-item{display:flex;flex-direction:column;background-color:var(--calcite-ui-foreground-1)}/*!@.nested-container--hidden*/.nested-container--hidden.sc-calcite-list-item{display:none}/*!@.content-container*/.content-container.sc-calcite-list-item{display:flex;flex:1 1 auto;align-items:stretch;padding:0px;font-family:var(--calcite-sans-family);font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-2)}/*!@tr,\ntd*/tr.sc-calcite-list-item,td.sc-calcite-list-item{outline-color:transparent}/*!@tr:focus,\ntd:focus*/tr.sc-calcite-list-item:focus,td.sc-calcite-list-item:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}/*!@.content,\n.custom-content*/.content.sc-calcite-list-item,.custom-content.sc-calcite-list-item{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;padding-inline:0.75rem;padding-block:0.5rem;font-size:var(--calcite-font-size--2);line-height:1.375}/*!@.label,\n.description*/.label.sc-calcite-list-item,.description.sc-calcite-list-item{font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal);word-wrap:break-word;word-break:break-word}/*!@.label:only-child,\n.description:only-child*/.label.sc-calcite-list-item:only-child,.description.sc-calcite-list-item:only-child{margin:0px;padding-block:0.25rem}/*!@.label*/.label.sc-calcite-list-item{color:var(--calcite-ui-text-1)}/*!@.description*/.description.sc-calcite-list-item{margin-block-start:0.125rem;color:var(--calcite-ui-text-3)}/*!@.content-start*/.content-start.sc-calcite-list-item{justify-content:flex-start}/*!@.content-end*/.content-end.sc-calcite-list-item{justify-content:flex-end}/*!@.content-start,\n.content-end*/.content-start.sc-calcite-list-item,.content-end.sc-calcite-list-item{flex:1 1 auto}/*!@.content-container--has-center-content .content-start,\n.content-container--has-center-content .content-end*/.content-container--has-center-content.sc-calcite-list-item .content-start.sc-calcite-list-item,.content-container--has-center-content.sc-calcite-list-item .content-end.sc-calcite-list-item{flex:0 1 auto}/*!@.selection-container*/.selection-container.sc-calcite-list-item{display:flex;padding-inline:0.75rem;color:var(--calcite-list-item-icon-color)}/*!@.actions-start,\n.actions-end,\n.content-start,\n.content-end,\n.selection-container,\n.drag-container,\n.open-container*/.actions-start.sc-calcite-list-item,.actions-end.sc-calcite-list-item,.content-start.sc-calcite-list-item,.content-end.sc-calcite-list-item,.selection-container.sc-calcite-list-item,.drag-container.sc-calcite-list-item,.open-container.sc-calcite-list-item{display:flex;align-items:center}/*!@.open-container,\n.selection-container*/.open-container.sc-calcite-list-item,.selection-container.sc-calcite-list-item{cursor:pointer}/*!@.content-start ::slotted(calcite-icon),\n.content-end ::slotted(calcite-icon)*/.content-start .sc-calcite-list-item-s>calcite-icon,.content-end .sc-calcite-list-item-s>calcite-icon{margin-inline:0.75rem;align-self:center}/*!@.actions-start ::slotted(calcite-action),\n.actions-end ::slotted(calcite-action)*/.actions-start .sc-calcite-list-item-s>calcite-action,.actions-end .sc-calcite-list-item-s>calcite-action{align-self:stretch;color:inherit}/*!@::slotted(calcite-list-item)*/.sc-calcite-list-item-s>calcite-list-item{border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}/*!@:host([hidden])*/[hidden].sc-calcite-list-item-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-list-item{display:none}";
 
 const focusMap = new Map();
 const listSelector = "calcite-list";
@@ -34391,7 +34391,7 @@ class Modal {
   renderCloseButton() {
     return !this.closeButtonDisabled ? (hAsync("button", { "aria-label": this.messages.close, class: CSS$w.close, key: "button", onClick: this.handleCloseClick, title: this.messages.close,
       // 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: (el) => (this.closeButtonEl = el) }, hAsync("calcite-icon", { icon: ICONS$7.close, scale: this.scale === "s" ? "s" : this.scale === "m" ? "m" : this.scale === "l" ? "l" : null }))) : null;
+      ref: (el) => (this.closeButtonEl = el) }, hAsync("calcite-icon", { icon: ICONS$7.close, scale: getIconScale(this.scale) }))) : null;
   }
   renderStyle() {
     if (!this.fullscreen && (this.cssWidth || this.cssHeight)) {
@@ -34672,11 +34672,11 @@ class Notice {
     const { el } = this;
     const closeButton = (hAsync("button", { "aria-label": this.messages.close, class: CSS$v.close, onClick: this.close,
       // 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: (el) => (this.closeButton = el) }, hAsync("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
+      ref: (el) => (this.closeButton = el) }, hAsync("calcite-icon", { icon: "x", scale: getIconScale(this.scale) })));
     const hasActionEnd = getSlotted(el, SLOTS$e.actionsEnd);
     return (hAsync("div", { class: CSS$v.container,
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-      ref: this.setTransitionEl }, this.requestedIcon ? (hAsync("div", { class: CSS$v.icon }, hAsync("calcite-icon", { flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, hAsync("div", { class: CSS$v.content }, hAsync("slot", { name: SLOTS$e.title }), hAsync("slot", { name: SLOTS$e.message }), hAsync("slot", { name: SLOTS$e.link })), hasActionEnd ? (hAsync("div", { class: CSS$v.actionsEnd }, hAsync("slot", { name: SLOTS$e.actionsEnd }))) : null, this.closable ? closeButton : null));
+      ref: this.setTransitionEl }, this.requestedIcon ? (hAsync("div", { class: CSS$v.icon }, hAsync("calcite-icon", { flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: getIconScale(this.scale) }))) : null, hAsync("div", { class: CSS$v.content }, hAsync("slot", { name: SLOTS$e.title }), hAsync("slot", { name: SLOTS$e.message }), hAsync("slot", { name: SLOTS$e.link })), hasActionEnd ? (hAsync("div", { class: CSS$v.actionsEnd }, hAsync("slot", { name: SLOTS$e.actionsEnd }))) : null, this.closable ? closeButton : null));
   }
   //--------------------------------------------------------------------------
   //
@@ -35108,17 +35108,16 @@ class Pagination {
       }, onClick: this.handlePageClick, value: start }, displayedPage));
   }
   render() {
-    const { totalItems, pageSize, startItem, messages, scale } = this;
+    const { totalItems, pageSize, startItem, messages } = this;
     const prevDisabled = pageSize === 1 ? startItem <= pageSize : startItem < pageSize;
     const nextDisabled = pageSize === 1 ? startItem + pageSize > totalItems : startItem + pageSize > totalItems;
-    const iconScale = scale === "l" ? "m" : "s";
     return (hAsync(Fragment, null, hAsync("button", { "aria-label": messages.previous, class: {
         [CSS$u.previous]: true,
         [CSS$u.disabled]: prevDisabled,
-      }, disabled: prevDisabled, onClick: this.previousClicked }, hAsync("calcite-icon", { flipRtl: true, icon: ICONS$6.previous, scale: iconScale })), this.renderItems(), hAsync("button", { "aria-label": messages.next, class: {
+      }, disabled: prevDisabled, onClick: this.previousClicked }, hAsync("calcite-icon", { flipRtl: true, icon: ICONS$6.previous, scale: getIconScale(this.scale) })), this.renderItems(), hAsync("button", { "aria-label": messages.next, class: {
         [CSS$u.next]: true,
         [CSS$u.disabled]: nextDisabled,
-      }, disabled: nextDisabled, onClick: this.nextClicked }, hAsync("calcite-icon", { flipRtl: true, icon: ICONS$6.next, scale: iconScale }))));
+      }, disabled: nextDisabled, onClick: this.nextClicked }, hAsync("calcite-icon", { flipRtl: true, icon: ICONS$6.next, scale: getIconScale(this.scale) }))));
   }
   static get delegatesFocus() { return true; }
   static get assetsDirs() { return ["assets"]; }
@@ -36602,7 +36601,7 @@ class Popover {
     const { messages, closable } = this;
     return closable ? (hAsync("div", { class: CSS$q.closeButtonContainer, key: CSS$q.closeButtonContainer }, hAsync("calcite-action", { appearance: "transparent", class: CSS$q.closeButton, onClick: this.hide, scale: this.scale, text: messages.close,
       // 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: (closeButtonEl) => (this.closeButtonEl = closeButtonEl) }, hAsync("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : this.scale })))) : null;
+      ref: (closeButtonEl) => (this.closeButtonEl = closeButtonEl) }, hAsync("calcite-icon", { icon: "x", scale: getIconScale(this.scale) })))) : null;
   }
   renderHeader() {
     const { heading, headingLevel } = this;
@@ -38018,7 +38017,7 @@ class Select {
   //
   //--------------------------------------------------------------------------
   renderChevron() {
-    return (hAsync("div", { class: CSS$l.iconContainer }, hAsync("calcite-icon", { class: CSS$l.icon, icon: "chevron-down", scale: this.scale === "l" ? "m" : "s" })));
+    return (hAsync("div", { class: CSS$l.iconContainer }, hAsync("calcite-icon", { class: CSS$l.icon, icon: "chevron-down", scale: getIconScale(this.scale) })));
   }
   render() {
     return (hAsync(Fragment, null, hAsync("select", { "aria-label": getLabelText(this), class: CSS$l.select, disabled: this.disabled, onChange: this.handleInternalSelectChange,
@@ -41201,8 +41200,8 @@ class TabTitle {
   render() {
     const { el, closed } = this;
     const id = el.id || this.guid;
-    const iconStartEl = (hAsync("calcite-icon", { class: { [CSS$c.titleIcon]: true, [CSS$c.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: this.scale === "l" ? "m" : "s" }));
-    const iconEndEl = (hAsync("calcite-icon", { class: { [CSS$c.titleIcon]: true, [CSS$c.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: this.scale === "l" ? "m" : "s" }));
+    const iconStartEl = (hAsync("calcite-icon", { class: { [CSS$c.titleIcon]: true, [CSS$c.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: getIconScale(this.scale) }));
+    const iconEndEl = (hAsync("calcite-icon", { class: { [CSS$c.titleIcon]: true, [CSS$c.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: getIconScale(this.scale) }));
     return (hAsync(Host, { "aria-controls": this.controls, "aria-selected": toAriaBoolean(this.selected), id: id, role: "tab", tabIndex: this.selected ? 0 : -1 }, hAsync("div", { class: {
         container: true,
         [CSS$c.iconPresent]: !!this.iconStart || !!this.iconEnd,
@@ -41214,7 +41213,7 @@ class TabTitle {
     const { closable, messages } = this;
     return closable ? (hAsync("button", { "aria-label": messages.close, class: CSS$c.closeButton, disabled: false, key: CSS$c.closeButton, onClick: this.closeClickHandler, title: messages.close, type: "button",
       // 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: (el) => (this.closeButtonEl = el) }, hAsync("calcite-icon", { icon: ICONS$4.close, scale: this.scale === "l" ? "m" : "s" }))) : null;
+      ref: (el) => (this.closeButtonEl = el) }, hAsync("calcite-icon", { icon: ICONS$4.close, scale: getIconScale(this.scale) }))) : null;
   }
   async componentDidLoad() {
     this.calciteInternalTabTitleRegister.emit(await this.getTabIdentifier());
@@ -41971,7 +41970,7 @@ class TableHeader {
         [CSS$9.multipleSelectionCell]: this.selectionMode === "multiple",
       }, colSpan: this.colSpan, role: "columnheader", rowSpan: this.rowSpan, scope: scope, tabIndex: 0,
       // 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: (el) => (this.containerEl = el) }, this.heading && hAsync("div", { class: CSS$9.heading }, this.heading), this.description && hAsync("div", { class: CSS$9.description }, this.description), this.selectionCell && this.selectionMode === "multiple" && (hAsync("calcite-icon", { class: { [CSS$9.active]: allSelected }, icon: selectionIcon, scale: this.scale === "l" ? "m" : "s" })), (this.selectionCell || this.numberCell) && (hAsync("span", { "aria-hidden": true, "aria-live": "polite", class: CSS$9.assistiveText }, this.screenReaderText)))));
+      ref: (el) => (this.containerEl = el) }, this.heading && hAsync("div", { class: CSS$9.heading }, this.heading), this.description && hAsync("div", { class: CSS$9.description }, this.description), this.selectionCell && this.selectionMode === "multiple" && (hAsync("calcite-icon", { class: { [CSS$9.active]: allSelected }, icon: selectionIcon, scale: getIconScale(this.scale) })), (this.selectionCell || this.numberCell) && (hAsync("span", { "aria-hidden": true, "aria-live": "polite", class: CSS$9.assistiveText }, this.screenReaderText)))));
   }
   static get assetsDirs() { return ["assets"]; }
   get el() { return getElement(this); }
@@ -42209,7 +42208,7 @@ class TableRow {
         : this.selected
           ? "circle-f"
           : "circle";
-    return hAsync("calcite-icon", { icon: icon, scale: this.scale === "l" ? "m" : "s" });
+    return hAsync("calcite-icon", { icon: icon, scale: getIconScale(this.scale) });
   }
   renderSelectableCell() {
     return this.rowType === "head" ? (hAsync("calcite-table-header", { alignment: "center", bodyRowCount: this.bodyRowCount, key: "selection-head", onClick: this.selectionMode === "multiple" && this.handleSelectionOfRow, onKeyDown: this.selectionMode === "multiple" && this.handleKeyboardSelection, selectedRowCount: this.selectedRowCount, selectedRowCountLocalized: this.selectedRowCountLocalized, selectionCell: true, selectionMode: this.selectionMode })) : this.rowType === "body" ? (hAsync("calcite-table-cell", { alignment: "center", key: "selection-body", onClick: this.handleSelectionOfRow, onKeyDown: this.handleKeyboardSelection, parentRowIsSelected: this.selected, parentRowPositionLocalized: this.positionSectionLocalized, selectionCell: true }, this.renderSelectionIcon())) : (hAsync("calcite-table-cell", { alignment: "center", key: "selection-foot", selectionCell: true }));
@@ -43740,7 +43739,7 @@ class TimePicker {
   // --------------------------------------------------------------------------
   render() {
     const hourIsNumber = isValidNumber(this.hour);
-    const iconScale = this.scale === "s" || this.scale === "m" ? "s" : "m";
+    const iconScale = getIconScale(this.scale);
     const minuteIsNumber = isValidNumber(this.minute);
     const secondIsNumber = isValidNumber(this.second);
     const fractionalSecondIsNumber = isValidNumber(this.fractionalSecond);
@@ -45120,7 +45119,7 @@ class TreeItem {
     const chevron = this.hasChildren ? (hAsync("calcite-icon", { class: {
         [CSS$2.chevron]: true,
         [CSS_UTILITY.rtl]: rtl,
-      }, "data-test-id": "icon", icon: ICONS$1.chevronRight, onClick: this.iconClickHandler, scale: this.scale === "l" ? "m" : "s" })) : null;
+      }, "data-test-id": "icon", icon: ICONS$1.chevronRight, onClick: this.iconClickHandler, scale: getIconScale(this.scale) })) : null;
     const defaultSlotNode = hAsync("slot", { key: "default-slot" });
     const checkbox = this.selectionMode === "ancestors" ? (hAsync("label", { class: CSS$2.checkboxLabel, key: "checkbox-label" }, hAsync("calcite-checkbox", { checked: this.selected, class: CSS$2.checkbox, "data-test-id": "checkbox", indeterminate: this.hasChildren && this.indeterminate, scale: this.scale, tabIndex: -1 }), defaultSlotNode)) : null;
     const selectedIcon = showBulletPoint
@@ -45134,12 +45133,12 @@ class TreeItem {
         [CSS$2.bulletPointIcon]: selectedIcon === ICONS$1.bulletPoint,
         [CSS$2.checkmarkIcon]: selectedIcon === ICONS$1.checkmark,
         [CSS_UTILITY.rtl]: rtl,
-      }, icon: selectedIcon, scale: this.scale === "l" ? "m" : "s" })) : null;
+      }, icon: selectedIcon, scale: getIconScale(this.scale) })) : null;
     const hidden = !(this.parentExpanded || this.depth === 1);
     const isExpanded = this.updateAfterInitialRender && this.expanded;
     const { hasEndActions } = this;
     const slotNode = (hAsync("slot", { key: "actionsEndSlot", name: SLOTS$1.actionsEnd, onSlotchange: this.actionsEndSlotChangeHandler }));
-    const iconStartEl = (hAsync("calcite-icon", { class: CSS$2.iconStart, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: this.scale === "l" ? "m" : "s" }));
+    const iconStartEl = (hAsync("calcite-icon", { class: CSS$2.iconStart, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: getIconScale(this.scale) }));
     return (hAsync(Host, { "aria-expanded": this.hasChildren ? toAriaBoolean(isExpanded) : undefined, "aria-hidden": toAriaBoolean(hidden), "aria-selected": this.selected ? "true" : showCheckmark ? "false" : undefined, "calcite-hydrated-hidden": hidden, role: "treeitem" }, hAsync("div", { class: { [CSS$2.itemExpanded]: isExpanded } }, hAsync("div", { class: CSS$2.nodeAndActionsContainer }, hAsync("div", { class: {
         [CSS$2.nodeContainer]: true,
         [CSS_UTILITY.rtl]: rtl,