@esri/calcite-components 2.11.0 → 2.12.0-next.0

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/dev/LICENSE.md for details.
- * v2.11.0
+ * v2.12.0-next.0
  */
 'use strict';
 
@@ -3698,7 +3698,7 @@ const SLOTS$B = {
     actionsStart: "actions-start",
     actionsEnd: "actions-end",
 };
-const CSS$1v = {
+const CSS$1w = {
     icon: "icon",
     header: "header",
     headerContent: "header-content",
@@ -3776,28 +3776,28 @@ class AccordionItem {
     // --------------------------------------------------------------------------
     renderActionsStart() {
         const { el } = this;
-        return getSlotted(el, SLOTS$B.actionsStart) ? (hAsync("div", { class: CSS$1v.actionsStart }, hAsync("slot", { name: SLOTS$B.actionsStart }))) : null;
+        return getSlotted(el, SLOTS$B.actionsStart) ? (hAsync("div", { class: CSS$1w.actionsStart }, hAsync("slot", { name: SLOTS$B.actionsStart }))) : null;
     }
     renderActionsEnd() {
         const { el } = this;
-        return getSlotted(el, SLOTS$B.actionsEnd) ? (hAsync("div", { class: CSS$1v.actionsEnd }, hAsync("slot", { name: SLOTS$B.actionsEnd }))) : null;
+        return getSlotted(el, SLOTS$B.actionsEnd) ? (hAsync("div", { class: CSS$1w.actionsEnd }, hAsync("slot", { name: SLOTS$B.actionsEnd }))) : null;
     }
     render() {
         const { iconFlipRtl } = this;
         const dir = getElementDir(this.el);
-        const iconStartEl = this.iconStart ? (hAsync("calcite-icon", { class: CSS$1v.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$1v.iconEnd, flipRtl: iconFlipRtl === "both" || iconFlipRtl === "end", icon: this.iconEnd, key: "icon-end", scale: getIconScale(this.scale) })) : null;
+        const iconStartEl = this.iconStart ? (hAsync("calcite-icon", { class: CSS$1w.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$1w.iconEnd, flipRtl: iconFlipRtl === "both" || iconFlipRtl === "end", icon: this.iconEnd, key: "icon-end", scale: getIconScale(this.scale) })) : null;
         const { description } = this;
         return (hAsync(Host, { key: '18527273c81df1f250ff8d3f9a9853cb2b4c5f5f' }, hAsync("div", { key: 'ecd31555ed7a31f18409fa420be6ba539cb160fa', class: {
                 [`icon-position--${this.iconPosition}`]: true,
                 [`icon-type--${this.iconType}`]: true,
-            } }, hAsync("div", { key: '222623088454a1cfff9a742b325fee32cdf13bf1', class: { [CSS$1v.header]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.renderActionsStart(), hAsync("div", { key: '26a8f19277a0651504851933856d6a157977bdb5', "aria-controls": IDS$2.section, "aria-expanded": toAriaBoolean(this.expanded), class: CSS$1v.headerContent, id: IDS$2.sectionToggle, onClick: this.itemHeaderClickHandler, ref: this.storeHeaderEl, role: "button", tabindex: "0" }, hAsync("div", { key: 'bda17228e50ad405b556f41be6352afb1a06964c', class: CSS$1v.headerContainer }, iconStartEl, hAsync("div", { key: '74c4bb8f36d8e767fd467ed5fa377243743d5606', class: CSS$1v.headerText }, hAsync("span", { key: 'c9c1c7858768cb544b57cca07cb43c9e0f3d9baf', class: CSS$1v.heading }, this.heading), description ? hAsync("span", { class: CSS$1v.description }, description) : null), iconEndEl), hAsync("calcite-icon", { key: '94fdda4de57d6c30e1d32ec8c9455a62368bcd2c', class: CSS$1v.expandIcon, icon: this.iconType === "chevron"
+            } }, hAsync("div", { key: '222623088454a1cfff9a742b325fee32cdf13bf1', class: { [CSS$1w.header]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.renderActionsStart(), hAsync("div", { key: '26a8f19277a0651504851933856d6a157977bdb5', "aria-controls": IDS$2.section, "aria-expanded": toAriaBoolean(this.expanded), class: CSS$1w.headerContent, id: IDS$2.sectionToggle, onClick: this.itemHeaderClickHandler, ref: this.storeHeaderEl, role: "button", tabindex: "0" }, hAsync("div", { key: 'bda17228e50ad405b556f41be6352afb1a06964c', class: CSS$1w.headerContainer }, iconStartEl, hAsync("div", { key: '74c4bb8f36d8e767fd467ed5fa377243743d5606', class: CSS$1w.headerText }, hAsync("span", { key: 'c9c1c7858768cb544b57cca07cb43c9e0f3d9baf', class: CSS$1w.heading }, this.heading), description ? hAsync("span", { class: CSS$1w.description }, description) : null), iconEndEl), hAsync("calcite-icon", { key: '94fdda4de57d6c30e1d32ec8c9455a62368bcd2c', class: CSS$1w.expandIcon, icon: this.iconType === "chevron"
                 ? "chevronDown"
                 : this.iconType === "caret"
                     ? "caretDown"
                     : this.expanded
                         ? "minus"
-                        : "plus", scale: getIconScale(this.scale) })), this.renderActionsEnd()), hAsync("section", { key: '62114306b1fe8f1d6559a9ff92282ee55b84eee3', "aria-labelledby": IDS$2.sectionToggle, class: CSS$1v.content, id: IDS$2.section }, hAsync("slot", { key: '85f56b00daadd2ceca1234f1616cb9fbda8450d7' })))));
+                        : "plus", scale: getIconScale(this.scale) })), this.renderActionsEnd()), hAsync("section", { key: '62114306b1fe8f1d6559a9ff92282ee55b84eee3', "aria-labelledby": IDS$2.sectionToggle, class: CSS$1w.content, id: IDS$2.section }, hAsync("slot", { key: '85f56b00daadd2ceca1234f1616cb9fbda8450d7' })))));
     }
     //--------------------------------------------------------------------------
     //
@@ -4039,11 +4039,11 @@ function disconnectInteractive(component) {
     }
     restoreInteraction(component);
 }
-const CSS$1u = {
+const CSS$1v = {
     container: "interaction-container",
 };
 function InteractiveContainer({ disabled }, children) {
-    return (hAsync("div", { class: CSS$1u.container, inert: disabled }, ...children));
+    return (hAsync("div", { class: CSS$1v.container, inert: disabled }, ...children));
 }
 
 function isActivationKey(key) {
@@ -4648,7 +4648,7 @@ function defaultOnMessagesChange() {
     mergeMessages(this);
 }
 
-const CSS$1t = {
+const CSS$1u = {
     button: "button",
     buttonTextVisible: "button--text-visible",
     buttonCompact: "button--compact",
@@ -4763,27 +4763,27 @@ class Action {
     renderTextContainer() {
         const { text, textEnabled } = this;
         const textContainerClasses = {
-            [CSS$1t.textContainer]: true,
-            [CSS$1t.textContainerVisible]: textEnabled,
+            [CSS$1u.textContainer]: true,
+            [CSS$1u.textContainerVisible]: textEnabled,
         };
         return text ? (hAsync("div", { class: textContainerClasses, key: "text-container" }, text)) : null;
     }
     renderIndicatorText() {
         const { indicator, messages, indicatorId, buttonId } = this;
-        return (hAsync("div", { "aria-labelledby": buttonId, "aria-live": "polite", class: CSS$1t.indicatorText, id: indicatorId, role: "region" }, indicator ? messages.indicator : null));
+        return (hAsync("div", { "aria-labelledby": buttonId, "aria-live": "polite", class: CSS$1u.indicatorText, id: indicatorId, role: "region" }, indicator ? messages.indicator : null));
     }
     renderIconContainer() {
         const { loading, icon, scale, el, iconFlipRtl, indicator } = this;
         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", { class: { [CSS$1t.indicatorWithIcon]: indicator }, flipRtl: iconFlipRtl, icon: icon, scale: getIconScale(this.scale) })) : null;
+        const calciteIconNode = icon ? (hAsync("calcite-icon", { class: { [CSS$1u.indicatorWithIcon]: indicator }, flipRtl: iconFlipRtl, icon: icon, scale: getIconScale(this.scale) })) : null;
         const iconNode = calciteLoaderNode || calciteIconNode;
         const hasIconToDisplay = iconNode || el.children?.length;
         const slotContainerNode = (hAsync("div", { class: {
-                [CSS$1t.slotContainer]: true,
-                [CSS$1t.slotContainerHidden]: loading,
+                [CSS$1u.slotContainer]: true,
+                [CSS$1u.slotContainerHidden]: loading,
             } }, hAsync("slot", null)));
-        return hasIconToDisplay ? (hAsync("div", { "aria-hidden": "true", class: CSS$1t.iconContainer, key: "icon-container" }, iconNode, slotContainerNode)) : null;
+        return hasIconToDisplay ? (hAsync("div", { "aria-hidden": "true", class: CSS$1u.iconContainer, key: "icon-container" }, iconNode, slotContainerNode)) : null;
     }
     render() {
         const { active, compact, disabled, icon, loading, textEnabled, label, text, indicator, indicatorId, buttonId, messages, } = this;
@@ -4792,11 +4792,11 @@ class Action {
             ? `${labelFallback}${indicator ? ` (${messages.indicator})` : ""}`
             : "";
         const buttonClasses = {
-            [CSS$1t.button]: true,
-            [CSS$1t.buttonTextVisible]: textEnabled,
-            [CSS$1t.buttonCompact]: compact,
+            [CSS$1u.button]: true,
+            [CSS$1u.buttonTextVisible]: textEnabled,
+            [CSS$1u.buttonCompact]: compact,
         };
-        return (hAsync(Host, { key: '0e061330c72e61acb61e53d2d94e1478c03c8083' }, hAsync(InteractiveContainer, { key: 'd34028dbfeb72982aa3fe6847663b16672f3e6ea', disabled: disabled }, hAsync("button", { key: 'c05c642ffb09bb466c0c4d1be0b8aac79b2dcdff', "aria-busy": toAriaBoolean(loading), "aria-controls": indicator ? indicatorId : null, "aria-disabled": toAriaBoolean(disabled), "aria-label": ariaLabel, "aria-pressed": toAriaBoolean(active), class: buttonClasses, disabled: disabled, id: buttonId, ref: (buttonEl) => (this.buttonEl = buttonEl) }, this.renderIconContainer(), this.renderTextContainer(), !icon && indicator && hAsync("div", { class: CSS$1t.indicatorWithoutIcon, key: "indicator-no-icon" })), hAsync("slot", { key: '8ab8d03371d7cd7211e5ab1a083b9b7b9017db79', name: SLOTS$A.tooltip, onSlotchange: this.handleTooltipSlotChange }), this.renderIndicatorText())));
+        return (hAsync(Host, { key: '0e061330c72e61acb61e53d2d94e1478c03c8083' }, hAsync(InteractiveContainer, { key: 'd34028dbfeb72982aa3fe6847663b16672f3e6ea', disabled: disabled }, hAsync("button", { key: 'c05c642ffb09bb466c0c4d1be0b8aac79b2dcdff', "aria-busy": toAriaBoolean(loading), "aria-controls": indicator ? indicatorId : null, "aria-disabled": toAriaBoolean(disabled), "aria-label": ariaLabel, "aria-pressed": toAriaBoolean(active), class: buttonClasses, disabled: disabled, id: buttonId, ref: (buttonEl) => (this.buttonEl = buttonEl) }, this.renderIconContainer(), this.renderTextContainer(), !icon && indicator && hAsync("div", { class: CSS$1u.indicatorWithoutIcon, key: "indicator-no-icon" })), hAsync("slot", { key: '8ab8d03371d7cd7211e5ab1a083b9b7b9017db79', name: SLOTS$A.tooltip, onSlotchange: this.handleTooltipSlotChange }), this.renderIndicatorText())));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
@@ -6124,11 +6124,11 @@ const SLOTS$z = {
 const ICONS$n = {
     menu: "ellipsis",
 };
-const CSS$1s = {
+const CSS$1t = {
     container: "container",
 };
 
-const CSS$1r = {
+const CSS$1s = {
     menu: "menu",
     defaultTrigger: "default-trigger",
 };
@@ -6227,7 +6227,7 @@ const ExpandToggle = ({ expanded, expandText, collapseText, expandLabel, collaps
     return actionNode;
 };
 
-const CSS$1q = {
+const CSS$1r = {
     actionGroupEnd: "action-group--end",
 };
 const SLOTS$x = {
@@ -6433,7 +6433,7 @@ class ActionBar {
     renderBottomActionGroup() {
         const { expanded, expandDisabled, el, position, toggleExpand, scale, layout, messages, actionsEndGroupLabel, overlayPositioning, } = this;
         const expandToggleNode = !expandDisabled ? (hAsync(ExpandToggle, { collapseLabel: messages.collapseLabel, collapseText: messages.collapse, el: el, expandLabel: messages.expandLabel, expandText: messages.expand, expanded: expanded, position: position, ref: this.setExpandToggleRef, scale: scale, toggle: toggleExpand, tooltip: this.expandTooltip })) : null;
-        return (hAsync("calcite-action-group", { class: CSS$1q.actionGroupEnd, hidden: this.expandDisabled && !(this.hasActionsEnd || this.hasBottomActions), label: actionsEndGroupLabel, layout: layout, overlayPositioning: overlayPositioning, scale: scale }, hAsync("slot", { name: SLOTS$x.actionsEnd, onSlotchange: this.handleActionsEndSlotChange }), hAsync("slot", { name: SLOTS$x.bottomActions, onSlotchange: this.handleBottomActionsSlotChange }), hAsync("slot", { name: SLOTS$x.expandTooltip, onSlotchange: this.handleTooltipSlotChange }), expandToggleNode));
+        return (hAsync("calcite-action-group", { class: CSS$1r.actionGroupEnd, hidden: this.expandDisabled && !(this.hasActionsEnd || this.hasBottomActions), label: actionsEndGroupLabel, layout: layout, overlayPositioning: overlayPositioning, scale: scale }, hAsync("slot", { name: SLOTS$x.actionsEnd, onSlotchange: this.handleActionsEndSlotChange }), hAsync("slot", { name: SLOTS$x.bottomActions, onSlotchange: this.handleBottomActionsSlotChange }), hAsync("slot", { name: SLOTS$x.expandTooltip, onSlotchange: this.handleTooltipSlotChange }), expandToggleNode));
     }
     render() {
         return (hAsync(Host, { key: 'b0627d0daa2f500a979aaacc8981814284c437ad', onCalciteActionMenuOpen: this.actionMenuOpenHandler }, hAsync("slot", { key: 'b1831e21404b85f1632d47f280d0357f5897ebc7', onSlotchange: this.handleDefaultSlotChange }), this.renderBottomActionGroup()));
@@ -6563,7 +6563,7 @@ class ActionGroup {
         return (hAsync("calcite-action-menu", { expanded: expanded, flipPlacements: ["left", "right"], hidden: !hasMenuActions, label: messages.more, onCalciteActionMenuOpen: this.setMenuOpen, open: menuOpen, overlayPositioning: overlayPositioning, placement: layout === "horizontal" ? "bottom-start" : "leading-start", scale: scale }, hAsync("calcite-action", { icon: ICONS$n.menu, scale: scale, slot: SLOTS$y.trigger, text: messages.more, textEnabled: expanded }), hAsync("slot", { name: SLOTS$z.menuActions, onSlotchange: this.handleMenuActionsSlotChange }), hAsync("slot", { name: SLOTS$z.menuTooltip, slot: SLOTS$y.tooltip })));
     }
     render() {
-        return (hAsync("div", { key: '53e37d8cb8d51e6809c35b035483218ce2f43bff', "aria-label": this.label, class: CSS$1s.container, role: "group" }, hAsync("slot", { key: '967676dd0b0fec78f278da527f4695decf7fe47a' }), this.renderMenu()));
+        return (hAsync("div", { key: '53e37d8cb8d51e6809c35b035483218ce2f43bff', "aria-label": this.label, class: CSS$1t.container, role: "group" }, hAsync("slot", { key: '967676dd0b0fec78f278da527f4695decf7fe47a' }), this.renderMenu()));
     }
     static get delegatesFocus() { return true; }
     static get assetsDirs() { return ["assets"]; }
@@ -6855,14 +6855,14 @@ class ActionMenu {
     }
     renderMenuButton() {
         const { appearance, label, scale, expanded } = this;
-        const menuButtonSlot = (hAsync("slot", { name: SLOTS$y.trigger, onSlotchange: this.setMenuButtonEl }, hAsync("calcite-action", { appearance: appearance, class: CSS$1r.defaultTrigger, icon: ICONS$m.menu, ref: this.setDefaultMenuButtonEl, scale: scale, text: label, textEnabled: expanded })));
+        const menuButtonSlot = (hAsync("slot", { name: SLOTS$y.trigger, onSlotchange: this.setMenuButtonEl }, hAsync("calcite-action", { appearance: appearance, class: CSS$1s.defaultTrigger, icon: ICONS$m.menu, ref: this.setDefaultMenuButtonEl, scale: scale, text: label, textEnabled: expanded })));
         return menuButtonSlot;
     }
     renderMenuItems() {
         const { actionElements, activeMenuItemIndex, open, menuId, menuButtonEl, label, placement, overlayPositioning, flipPlacements, } = this;
         const activeAction = actionElements[activeMenuItemIndex];
         const activeDescendantId = activeAction?.id || null;
-        return (hAsync("calcite-popover", { autoClose: true, flipPlacements: flipPlacements, focusTrapDisabled: true, label: label, offsetDistance: 0, onCalcitePopoverClose: this.handlePopoverClose, onCalcitePopoverOpen: this.handlePopoverOpen, open: open, overlayPositioning: overlayPositioning, placement: placement, pointerDisabled: true, referenceElement: menuButtonEl }, hAsync("div", { "aria-activedescendant": activeDescendantId, "aria-labelledby": menuButtonEl?.id, class: CSS$1r.menu, id: menuId, onClick: this.handleCalciteActionClick, role: "menu", tabIndex: -1 }, hAsync("slot", { onSlotchange: this.handleDefaultSlotChange }))));
+        return (hAsync("calcite-popover", { autoClose: true, flipPlacements: flipPlacements, focusTrapDisabled: true, label: label, offsetDistance: 0, onCalcitePopoverClose: this.handlePopoverClose, onCalcitePopoverOpen: this.handlePopoverOpen, open: open, overlayPositioning: overlayPositioning, placement: placement, pointerDisabled: true, referenceElement: menuButtonEl }, hAsync("div", { "aria-activedescendant": activeDescendantId, "aria-labelledby": menuButtonEl?.id, class: CSS$1s.menu, id: menuId, onClick: this.handleCalciteActionClick, role: "menu", tabIndex: -1 }, hAsync("slot", { onSlotchange: this.handleDefaultSlotChange }))));
     }
     render() {
         return (hAsync(Fragment, { key: '9feaace5a0750686cc4ad4e7ac83859cc26a7a20' }, this.renderMenuButton(), this.renderMenuItems(), hAsync("slot", { key: 'ba73adb74c8c729467f300fd4ff33c7af23f2ad7', name: SLOTS$y.tooltip, onSlotchange: this.updateTooltip })));
@@ -6899,7 +6899,7 @@ class ActionMenu {
     }; }
 }
 
-const CSS$1p = {
+const CSS$1q = {
     actionGroupEnd: "action-group--end",
     container: "container",
 };
@@ -7024,10 +7024,10 @@ class ActionPad {
     renderBottomActionGroup() {
         const { expanded, expandDisabled, messages, el, position, toggleExpand, scale, layout, actionsEndGroupLabel, overlayPositioning, } = this;
         const expandToggleNode = !expandDisabled ? (hAsync(ExpandToggle, { collapseLabel: messages.collapseLabel, collapseText: messages.collapse, el: el, expandLabel: messages.expandLabel, expandText: messages.expand, expanded: expanded, position: position, ref: this.setExpandToggleRef, scale: scale, toggle: toggleExpand, tooltip: this.expandTooltip })) : null;
-        return expandToggleNode ? (hAsync("calcite-action-group", { class: CSS$1p.actionGroupEnd, label: actionsEndGroupLabel, layout: layout, overlayPositioning: overlayPositioning, scale: scale }, hAsync("slot", { name: SLOTS$w.expandTooltip, onSlotchange: this.handleTooltipSlotChange }), expandToggleNode)) : null;
+        return expandToggleNode ? (hAsync("calcite-action-group", { class: CSS$1q.actionGroupEnd, label: actionsEndGroupLabel, layout: layout, overlayPositioning: overlayPositioning, scale: scale }, hAsync("slot", { name: SLOTS$w.expandTooltip, onSlotchange: this.handleTooltipSlotChange }), expandToggleNode)) : null;
     }
     render() {
-        return (hAsync(Host, { key: '5bbd7e4402b9d4f0a319c7c8fe98ce20a9646d89', onCalciteActionMenuOpen: this.actionMenuOpenHandler }, hAsync("div", { key: '7757b0e8e4b47eacd05fd99a74d564ff855c157d', class: CSS$1p.container }, hAsync("slot", { key: '2d9e826255494320a4c374282fa8b0c59ed26ddd', onSlotchange: this.handleDefaultSlotChange }), this.renderBottomActionGroup())));
+        return (hAsync(Host, { key: '5bbd7e4402b9d4f0a319c7c8fe98ce20a9646d89', onCalciteActionMenuOpen: this.actionMenuOpenHandler }, hAsync("div", { key: '7757b0e8e4b47eacd05fd99a74d564ff855c157d', class: CSS$1q.container }, hAsync("slot", { key: '2d9e826255494320a4c374282fa8b0c59ed26ddd', onSlotchange: this.handleDefaultSlotChange }), this.renderBottomActionGroup())));
     }
     static get delegatesFocus() { return true; }
     static get assetsDirs() { return ["assets"]; }
@@ -7131,7 +7131,7 @@ const SLOTS$v = {
     message: "message",
     link: "link",
 };
-const CSS$1o = {
+const CSS$1p = {
     actionsEnd: "actions-end",
     close: "close",
     container: "container",
@@ -7319,29 +7319,29 @@ class Alert {
         const effectiveIcon = setRequestedIcon(KindIcons, this.icon, this.kind);
         const hasQueuedAlerts = this.queueLength > 1;
         return (hAsync(Host, { key: '169116d24d8bc100282c6338c2ed72168cba745e', "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "calcite-hydrated-hidden": hidden, role: role }, hAsync("div", { key: 'b2d44e2f889e37a0481c860c98c4f5067eb48c33', class: {
-                [CSS$1o.container]: true,
-                [CSS$1o.containerQueued]: queued,
-                [`${CSS$1o.container}--${placement}`]: true,
-                [CSS$1o.containerEmbedded]: this.embedded,
-                [CSS$1o.focused]: this.keyBoardFocus,
-            }, onPointerEnter: this.autoClose && this.autoCloseTimeoutId ? this.handleMouseOver : null, onPointerLeave: this.autoClose ? this.handleMouseLeave : null, ref: this.setTransitionEl }, effectiveIcon && this.renderIcon(effectiveIcon), hAsync("div", { key: 'add55405eff3b705b676338de5aa57b1606ccdab', class: CSS$1o.textContainer, onFocusin: this.autoClose && this.autoCloseTimeoutId ? this.handleKeyBoardFocus : null, onFocusout: this.autoClose ? this.handleKeyBoardBlur : null }, hAsync("slot", { key: '6dde08e89c9455c9f10f109d2a2c56a8c181a0ce', name: SLOTS$v.title }), hAsync("slot", { key: 'a5f7cdfa56988f5330c7d252c578863077cdffa8', name: SLOTS$v.message }), hAsync("slot", { key: 'e9efbead90aafecd3c955b353bdd7bf9c15a8240', name: SLOTS$v.link })), this.renderActionsEnd(), hasQueuedAlerts ? this.renderQueueCount() : null, this.renderCloseButton(), open && !queued && autoClose ? hAsync("div", { class: CSS$1o.dismissProgress }) : null)));
+                [CSS$1p.container]: true,
+                [CSS$1p.containerQueued]: queued,
+                [`${CSS$1p.container}--${placement}`]: true,
+                [CSS$1p.containerEmbedded]: this.embedded,
+                [CSS$1p.focused]: this.keyBoardFocus,
+            }, onPointerEnter: this.autoClose && this.autoCloseTimeoutId ? this.handleMouseOver : null, onPointerLeave: this.autoClose ? this.handleMouseLeave : null, ref: this.setTransitionEl }, effectiveIcon && this.renderIcon(effectiveIcon), hAsync("div", { key: 'add55405eff3b705b676338de5aa57b1606ccdab', class: CSS$1p.textContainer, onFocusin: this.autoClose && this.autoCloseTimeoutId ? this.handleKeyBoardFocus : null, onFocusout: this.autoClose ? this.handleKeyBoardBlur : null }, hAsync("slot", { key: '6dde08e89c9455c9f10f109d2a2c56a8c181a0ce', name: SLOTS$v.title }), hAsync("slot", { key: 'a5f7cdfa56988f5330c7d252c578863077cdffa8', name: SLOTS$v.message }), hAsync("slot", { key: 'e9efbead90aafecd3c955b353bdd7bf9c15a8240', name: SLOTS$v.link })), this.renderActionsEnd(), hasQueuedAlerts ? this.renderQueueCount() : null, this.renderCloseButton(), open && !queued && autoClose ? hAsync("div", { class: CSS$1p.dismissProgress }) : null)));
     }
     renderCloseButton() {
-        return (hAsync("button", { "aria-label": this.messages.close, class: CSS$1o.close, key: "close", onClick: this.closeAlert, onFocusin: this.autoClose ? this.handleKeyBoardFocus : null, onFocusout: this.autoClose ? this.handleKeyBoardBlur : null, ref: (el) => (this.closeButton = el), type: "button" }, hAsync("calcite-icon", { icon: "x", scale: getIconScale(this.scale) })));
+        return (hAsync("button", { "aria-label": this.messages.close, class: CSS$1p.close, key: "close", onClick: this.closeAlert, onFocusin: this.autoClose ? this.handleKeyBoardFocus : null, onFocusout: this.autoClose ? this.handleKeyBoardBlur : null, ref: (el) => (this.closeButton = el), type: "button" }, hAsync("calcite-icon", { icon: "x", scale: getIconScale(this.scale) })));
     }
     renderQueueCount() {
         const queueNumber = this.queueLength > 2 ? this.queueLength - 1 : 1;
         const queueText = this.numberStringFormatter.numberFormatter.format(queueNumber);
         return (hAsync("div", { class: {
-                [CSS$1o.queueCount]: true,
-                [CSS$1o.queueCountActive]: this.queueLength > 1,
+                [CSS$1p.queueCount]: true,
+                [CSS$1p.queueCountActive]: this.queueLength > 1,
             }, key: "queue-count" }, hAsync("calcite-chip", { scale: this.scale, value: queueText }, queueText)));
     }
     renderActionsEnd() {
-        return (hAsync("div", { class: CSS$1o.actionsEnd }, hAsync("slot", { name: SLOTS$v.actionsEnd, onSlotchange: this.actionsEndSlotChangeHandler })));
+        return (hAsync("div", { class: CSS$1p.actionsEnd }, hAsync("slot", { name: SLOTS$v.actionsEnd, onSlotchange: this.actionsEndSlotChangeHandler })));
     }
     renderIcon(icon) {
-        return (hAsync("div", { class: CSS$1o.icon }, hAsync("calcite-icon", { flipRtl: this.iconFlipRtl, icon: icon, scale: getIconScale(this.scale) })));
+        return (hAsync("div", { class: CSS$1p.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) {
@@ -9432,7 +9432,7 @@ var color = Color;
 
 var Color$1 = color;
 
-const CSS$1n = {
+const CSS$1o = {
     channel: "channel",
     channels: "channels",
     colorField: "color-field",
@@ -9734,7 +9734,7 @@ function getSliderWidth(activeDimensions, hasAlpha) {
     return width + previewWidthOffset;
 }
 
-const CSS$1m = {
+const CSS$1n = {
     thumbnail: "thumbnail",
     background: "background",
     initials: "initials",
@@ -9840,11 +9840,11 @@ class Avatar {
     //--------------------------------------------------------------------------
     determineContent() {
         if (this.thumbnail && !this.thumbnailFailedToLoad) {
-            return (hAsync("img", { alt: this.label || "", class: CSS$1m.thumbnail, onError: () => (this.thumbnailFailedToLoad = true), src: this.thumbnail }));
+            return (hAsync("img", { alt: this.label || "", class: CSS$1n.thumbnail, onError: () => (this.thumbnailFailedToLoad = true), src: this.thumbnail }));
         }
         const initials = this.generateInitials();
         const backgroundColor = this.generateFillColor();
-        return (hAsync("span", { "aria-label": this.label || this.fullName, class: CSS$1m.background, role: "figure", style: { backgroundColor } }, initials ? (hAsync("span", { "aria-hidden": "true", class: CSS$1m.initials }, initials)) : (hAsync("calcite-icon", { class: CSS$1m.icon, icon: "user", scale: this.scale }))));
+        return (hAsync("span", { "aria-label": this.label || this.fullName, class: CSS$1n.background, role: "figure", style: { backgroundColor } }, initials ? (hAsync("span", { "aria-hidden": "true", class: CSS$1n.initials }, initials)) : (hAsync("calcite-icon", { class: CSS$1n.icon, icon: "user", scale: this.scale }))));
     }
     /**
      * Generate a valid background color that is consistent and unique to this user
@@ -9914,7 +9914,7 @@ const IDS$1 = {
     toggle: "toggle",
     header: "header",
 };
-const CSS$1l = {
+const CSS$1m = {
     actionsEnd: "actions-end",
     button: "button",
     container: "container",
@@ -9924,6 +9924,7 @@ const CSS$1l = {
     description: "description",
     header: "header",
     headerContainer: "header-container",
+    headerHasText: "header--has-text",
     heading: "heading",
     icon: "icon",
     iconStart: "icon--start",
@@ -9951,7 +9952,7 @@ const ICONS$k = {
     invalid: "exclamation-mark-triangle",
 };
 
-const blockCss = "/*!@:host*/.sc-calcite-block-h{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}/*!@:host **/.sc-calcite-block-h *.sc-calcite-block{box-sizing:border-box}/*!@:host*/.sc-calcite-block-h{--calcite-icon-size:1rem;--calcite-spacing-eighth:0.125rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}/*!@:host([disabled])*/[disabled].sc-calcite-block-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-block-h *.sc-calcite-block,.sc-calcite-block-h[disabled].sc-calcite-block-s>*,.sc-calcite-block-h[disabled] .sc-calcite-block-s>*{pointer-events:none}/*!@:host*/.sc-calcite-block-h{display:flex;flex-shrink:0;flex-grow:0;flex-direction:column;border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);padding:0px;transition-property:margin;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-timing-function:cubic-bezier(0.215, 0.440, 0.420, 0.880);flex-basis:auto}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-block-h[disabled] .sc-calcite-block-s>[calcite-hydrated][disabled],[disabled].sc-calcite-block-h [calcite-hydrated][disabled].sc-calcite-block{opacity:1}/*!@.interaction-container*/.interaction-container.sc-calcite-block{display:contents}/*!@.header*/.header.sc-calcite-block{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-color-text-2);color:var(--calcite-color-text-2)}/*!@.heading*/.heading.sc-calcite-block{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}/*!@.header .heading*/.header.sc-calcite-block .heading.sc-calcite-block{flex:1 1 auto;padding:0.5rem}/*!@.header*/.header.sc-calcite-block{justify-content:flex-start}/*!@.header,\n.toggle*/.header.sc-calcite-block,.toggle.sc-calcite-block{grid-area:header}/*!@.header-container*/.header-container.sc-calcite-block{display:grid;align-items:stretch;grid-template:auto/auto 1fr auto auto;grid-template-areas:\"handle header control menu actions-end\";grid-column:header-start/actions-end;grid-row:1/2}/*!@.content-start,\n.icon,\n.icon--start,\n.icon--end*/.content-start.sc-calcite-block,.icon.sc-calcite-block,.icon--start.sc-calcite-block,.icon--end.sc-calcite-block{margin-inline-end:var(--calcite-spacing-md)}/*!@.icon calcite-loader*/.icon.sc-calcite-block calcite-loader.sc-calcite-block{margin-inline-end:var(--calcite-spacing-xxxs)}/*!@.icon--start,\n.icon--end*/.icon--start.sc-calcite-block,.icon--end.sc-calcite-block{color:var(--calcite-color-text-3)}/*!@.actions-end*/.actions-end.sc-calcite-block{grid-area:actions-end}/*!@.toggle*/.toggle.sc-calcite-block{margin:0px;display:flex;cursor:pointer;flex-wrap:nowrap;align-items:center;justify-content:space-between;border-style:none;padding:0px;font-family:var(--calcite-font-family);outline-color:transparent;text-align:initial;background-color:transparent}/*!@.toggle:hover*/.toggle.sc-calcite-block:hover{background-color:var(--calcite-color-foreground-2)}/*!@.toggle:focus*/.toggle.sc-calcite-block:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}/*!@calcite-loader[inline]*/calcite-loader[inline].sc-calcite-block{grid-area:control;align-self:center}/*!@calcite-handle*/calcite-handle.sc-calcite-block{grid-area:handle}/*!@.title*/.title.sc-calcite-block{margin:0px}/*!@.header .title .heading*/.header.sc-calcite-block .title.sc-calcite-block .heading.sc-calcite-block{padding:0px;font-size:var(--calcite-font-size--1);font-weight:var(--calcite-font-weight-medium);line-height:1.25;color:var(--calcite-color-text-2);transition-property:color;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);word-wrap:break-word;word-break:break-word}/*!@.description*/.description.sc-calcite-block{margin-block-start:0.125rem;padding:0px;font-size:var(--calcite-font-size--2);line-height:1.375;color:var(--calcite-color-text-3);word-wrap:break-word;word-break:break-word}/*!@.icon*/.icon.sc-calcite-block{display:flex}/*!@.status-icon.valid*/.status-icon.valid.sc-calcite-block{color:var(--calcite-color-status-success)}/*!@.status-icon.invalid*/.status-icon.invalid.sc-calcite-block{color:var(--calcite-color-status-danger)}@keyframes spin{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}/*!@.icon-end-container*/.icon-end-container.sc-calcite-block{display:flex;align-items:center;margin-inline-start:auto}/*!@.toggle-icon*/.toggle-icon.sc-calcite-block{align-self:center;justify-self:end;color:var(--calcite-color-text-3);transition-property:color;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-inline-end:var(--calcite-spacing-md)}/*!@.toggle:hover .toggle-icon*/.toggle.sc-calcite-block:hover .toggle-icon.sc-calcite-block{color:var(--calcite-color-text-1)}/*!@.container*/.container.sc-calcite-block{position:relative;display:flex;block-size:100%;flex-direction:column}/*!@.content*/.content.sc-calcite-block{position:relative;min-block-size:0px;flex:1 1 0%}@keyframes in{0%{opacity:0}100%{opacity:1}}/*!@.content*/.content.sc-calcite-block{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;padding-block:var(--calcite-block-padding, var(--calcite-spacing-sm));padding-inline:var(--calcite-block-padding, var(--calcite-spacing-md))}/*!@.content-start*/.content-start.sc-calcite-block{display:flex;align-items:center;color:var(--calcite-color-text-3)}/*!@.control-container*/.control-container.sc-calcite-block{margin:0px;display:flex;grid-area:control}/*!@calcite-action-menu*/calcite-action-menu.sc-calcite-block{grid-area:menu}/*!@.actions-end*/.actions-end.sc-calcite-block{display:flex;align-items:stretch}/*!@:host([open])*/[open].sc-calcite-block-h{margin-block:0.5rem}/*!@:host([open]) .header .title .heading*/[open].sc-calcite-block-h .header.sc-calcite-block .title.sc-calcite-block .heading.sc-calcite-block{color:var(--calcite-color-text-1)}/*!@:host([heading]) .header,\n:host([description]) .header*/[heading].sc-calcite-block-h .header.sc-calcite-block,[description].sc-calcite-block-h .header.sc-calcite-block{padding:var(--calcite-spacing-md)}/*!@:host([hidden])*/[hidden].sc-calcite-block-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-block{display:none}";
+const blockCss = "/*!@:host*/.sc-calcite-block-h{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}/*!@:host **/.sc-calcite-block-h *.sc-calcite-block{box-sizing:border-box}/*!@:host*/.sc-calcite-block-h{--calcite-icon-size:1rem;--calcite-spacing-eighth:0.125rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}/*!@:host([disabled])*/[disabled].sc-calcite-block-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-block-h *.sc-calcite-block,.sc-calcite-block-h[disabled].sc-calcite-block-s>*,.sc-calcite-block-h[disabled] .sc-calcite-block-s>*{pointer-events:none}/*!@:host*/.sc-calcite-block-h{display:flex;flex-shrink:0;flex-grow:0;flex-direction:column;border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);padding:0px;transition-property:margin;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-timing-function:cubic-bezier(0.215, 0.440, 0.420, 0.880);flex-basis:auto}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-block-h[disabled] .sc-calcite-block-s>[calcite-hydrated][disabled],[disabled].sc-calcite-block-h [calcite-hydrated][disabled].sc-calcite-block{opacity:1}/*!@.interaction-container*/.interaction-container.sc-calcite-block{display:contents}/*!@.header*/.header.sc-calcite-block{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-color-text-2);color:var(--calcite-color-text-2)}/*!@.heading*/.heading.sc-calcite-block{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}/*!@.header .heading*/.header.sc-calcite-block .heading.sc-calcite-block{flex:1 1 auto;padding:0.5rem}/*!@.header*/.header.sc-calcite-block{justify-content:flex-start}/*!@.header--has-text*/.header--has-text.sc-calcite-block{padding:var(--calcite-spacing-md)}/*!@.header,\n.toggle*/.header.sc-calcite-block,.toggle.sc-calcite-block{grid-area:header}/*!@.header-container*/.header-container.sc-calcite-block{display:grid;align-items:stretch;grid-template:auto/auto 1fr auto auto;grid-template-areas:\"handle header control menu actions-end\";grid-column:header-start/actions-end;grid-row:1/2}/*!@.content-start,\n.icon,\n.icon--start,\n.icon--end*/.content-start.sc-calcite-block,.icon.sc-calcite-block,.icon--start.sc-calcite-block,.icon--end.sc-calcite-block{margin-inline-end:var(--calcite-spacing-md)}/*!@.icon calcite-loader*/.icon.sc-calcite-block calcite-loader.sc-calcite-block{margin-inline-end:var(--calcite-spacing-xxxs)}/*!@.icon--start,\n.icon--end*/.icon--start.sc-calcite-block,.icon--end.sc-calcite-block{color:var(--calcite-color-text-3)}/*!@.actions-end*/.actions-end.sc-calcite-block{grid-area:actions-end}/*!@.toggle*/.toggle.sc-calcite-block{margin:0px;display:flex;cursor:pointer;flex-wrap:nowrap;align-items:center;justify-content:space-between;border-style:none;padding:0px;font-family:var(--calcite-font-family);outline-color:transparent;text-align:initial;background-color:transparent}/*!@.toggle:hover*/.toggle.sc-calcite-block:hover{background-color:var(--calcite-color-foreground-2)}/*!@.toggle:focus*/.toggle.sc-calcite-block:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}/*!@calcite-loader[inline]*/calcite-loader[inline].sc-calcite-block{grid-area:control;align-self:center}/*!@calcite-handle*/calcite-handle.sc-calcite-block{grid-area:handle}/*!@.title*/.title.sc-calcite-block{margin:0px}/*!@.header .title .heading*/.header.sc-calcite-block .title.sc-calcite-block .heading.sc-calcite-block{padding:0px;font-size:var(--calcite-font-size--1);font-weight:var(--calcite-font-weight-medium);line-height:1.25;color:var(--calcite-color-text-2);transition-property:color;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);word-wrap:break-word;word-break:break-word}/*!@.description*/.description.sc-calcite-block{margin-block-start:0.125rem;padding:0px;font-size:var(--calcite-font-size--2);line-height:1.375;color:var(--calcite-color-text-3);word-wrap:break-word;word-break:break-word}/*!@.icon*/.icon.sc-calcite-block{display:flex}/*!@.status-icon.valid*/.status-icon.valid.sc-calcite-block{color:var(--calcite-color-status-success)}/*!@.status-icon.invalid*/.status-icon.invalid.sc-calcite-block{color:var(--calcite-color-status-danger)}@keyframes spin{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}/*!@.icon-end-container*/.icon-end-container.sc-calcite-block{display:flex;align-items:center;margin-inline-start:auto}/*!@.toggle-icon*/.toggle-icon.sc-calcite-block{align-self:center;justify-self:end;color:var(--calcite-color-text-3);transition-property:color;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);margin-inline-end:var(--calcite-spacing-md)}/*!@.toggle:hover .toggle-icon*/.toggle.sc-calcite-block:hover .toggle-icon.sc-calcite-block{color:var(--calcite-color-text-1)}/*!@.container*/.container.sc-calcite-block{position:relative;display:flex;block-size:100%;flex-direction:column}/*!@.content*/.content.sc-calcite-block{position:relative;min-block-size:0px;flex:1 1 0%}@keyframes in{0%{opacity:0}100%{opacity:1}}/*!@.content*/.content.sc-calcite-block{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;padding-block:var(--calcite-block-padding, var(--calcite-spacing-sm));padding-inline:var(--calcite-block-padding, var(--calcite-spacing-md))}/*!@.content-start*/.content-start.sc-calcite-block{display:flex;align-items:center;color:var(--calcite-color-text-3)}/*!@.control-container*/.control-container.sc-calcite-block{margin:0px;display:flex;grid-area:control}/*!@calcite-action-menu*/calcite-action-menu.sc-calcite-block{grid-area:menu}/*!@.actions-end*/.actions-end.sc-calcite-block{display:flex;align-items:stretch}/*!@:host([open])*/[open].sc-calcite-block-h{margin-block:0.5rem}/*!@:host([open]) .header .title .heading*/[open].sc-calcite-block-h .header.sc-calcite-block .title.sc-calcite-block .heading.sc-calcite-block{color:var(--calcite-color-text-1)}/*!@:host([hidden])*/[hidden].sc-calcite-block-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-block{display:none}";
 var CalciteBlockStyle0 = blockCss;
 
 /**
@@ -10086,22 +10087,22 @@ class Block {
     renderLoaderStatusIcon() {
         const { loading, messages, status } = this;
         const hasSlottedIcon = !!getSlotted(this.el, SLOTS$u.icon);
-        return loading ? (hAsync("div", { class: CSS$1l.icon, key: "loader" }, hAsync("calcite-loader", { inline: true, label: messages.loading }))) : status ? (hAsync("div", { class: CSS$1l.icon, key: "status-icon" }, hAsync("calcite-icon", { class: {
-                [CSS$1l.statusIcon]: true,
-                [CSS$1l.valid]: status == "valid",
-                [CSS$1l.invalid]: status == "invalid",
-            }, icon: ICONS$k[status], scale: "s" }))) : hasSlottedIcon ? (hAsync("div", { class: CSS$1l.icon, key: "icon-slot" }, hAsync("slot", { key: "icon-slot", name: SLOTS$u.icon }))) : null;
+        return loading ? (hAsync("div", { class: CSS$1m.icon, key: "loader" }, hAsync("calcite-loader", { inline: true, label: messages.loading }))) : status ? (hAsync("div", { class: CSS$1m.icon, key: "status-icon" }, hAsync("calcite-icon", { class: {
+                [CSS$1m.statusIcon]: true,
+                [CSS$1m.valid]: status == "valid",
+                [CSS$1m.invalid]: status == "invalid",
+            }, icon: ICONS$k[status], scale: "s" }))) : hasSlottedIcon ? (hAsync("div", { class: CSS$1m.icon, key: "icon-slot" }, hAsync("slot", { key: "icon-slot", name: SLOTS$u.icon }))) : null;
     }
     renderActionsEnd() {
-        return (hAsync("div", { class: CSS$1l.actionsEnd }, hAsync("slot", { name: SLOTS$u.actionsEnd, onSlotchange: this.actionsEndSlotChangeHandler })));
+        return (hAsync("div", { class: CSS$1m.actionsEnd }, hAsync("slot", { name: SLOTS$u.actionsEnd, onSlotchange: this.actionsEndSlotChangeHandler })));
     }
     renderContentStart() {
         const { hasContentStart } = this;
-        return (hAsync("div", { class: CSS$1l.contentStart, hidden: !hasContentStart }, hAsync("slot", { name: SLOTS$u.contentStart, onSlotchange: this.handleContentStartSlotChange })));
+        return (hAsync("div", { class: CSS$1m.contentStart, hidden: !hasContentStart }, hAsync("slot", { name: SLOTS$u.contentStart, onSlotchange: this.handleContentStartSlotChange })));
     }
     renderTitle() {
         const { heading, headingLevel, description } = this;
-        return heading || description ? (hAsync("div", { class: CSS$1l.title }, hAsync(Heading, { class: CSS$1l.heading, level: headingLevel }, heading), description ? hAsync("div", { class: CSS$1l.description }, description) : null)) : null;
+        return heading || description ? (hAsync("div", { class: CSS$1m.title }, hAsync(Heading, { class: CSS$1m.heading, level: headingLevel }, heading), description ? hAsync("div", { class: CSS$1m.description }, description) : null)) : null;
     }
     renderIcon(position) {
         const { iconFlipRtl } = this;
@@ -10109,7 +10110,7 @@ class Block {
             ? iconFlipRtl === "start"
             : iconFlipRtl === "end";
         const iconValue = position === "start" ? this.iconStart : this.iconEnd;
-        const iconClass = position === "start" ? CSS$1l.iconStart : CSS$1l.iconEnd;
+        const iconClass = position === "start" ? CSS$1m.iconStart : CSS$1m.iconEnd;
         if (!iconValue) {
             return undefined;
         }
@@ -10117,16 +10118,16 @@ class Block {
         return (hAsync("calcite-icon", { class: iconClass, flipRtl: flipRtl, icon: iconValue, key: iconValue, scale: "s" }));
     }
     render() {
-        const { collapsible, el, loading, open, heading, messages } = this;
+        const { collapsible, el, loading, open, heading, messages, description } = this;
         const toggleLabel = open ? messages.collapse : messages.expand;
-        const headerContent = (hAsync("header", { key: '367a98ebb184016879f5d2037c11079a35c8ba49', class: CSS$1l.header, id: IDS$1.header }, this.renderIcon("start"), this.renderContentStart(), this.renderLoaderStatusIcon(), this.renderTitle()));
+        const headerContent = (hAsync("header", { key: 'f4585d3c5e71d91a3de8b60a8085e79ad0f649c2', class: { [CSS$1m.header]: true, [CSS$1m.headerHasText]: !!(heading || description) }, id: IDS$1.header }, this.renderIcon("start"), this.renderContentStart(), this.renderLoaderStatusIcon(), this.renderTitle()));
         const hasControl = !!getSlotted(el, SLOTS$u.control);
         const hasMenuActions = !!getSlotted(el, SLOTS$u.headerMenuActions);
         const collapseIcon = open ? ICONS$k.opened : ICONS$k.closed;
-        const headerNode = (hAsync("div", { key: '9553d267ed83ea9322265aa9178b143b19639c16', class: CSS$1l.headerContainer }, this.dragHandle ? hAsync("calcite-handle", { label: heading }) : null, collapsible ? (hAsync("button", { "aria-controls": IDS$1.content, "aria-describedby": IDS$1.header, "aria-expanded": collapsible ? toAriaBoolean(open) : null, class: CSS$1l.toggle, id: IDS$1.toggle, onClick: this.onHeaderClick, title: toggleLabel }, headerContent, hAsync("div", { class: CSS$1l.iconEndContainer }, this.renderIcon("end"), hAsync("calcite-icon", { class: CSS$1l.toggleIcon, icon: collapseIcon, scale: "s" })))) : this.iconEnd ? (hAsync("div", null, headerContent, hAsync("div", { class: CSS$1l.iconEndContainer }, this.renderIcon("end")))) : (headerContent), hasControl ? (hAsync("div", { "aria-labelledby": IDS$1.header, class: CSS$1l.controlContainer }, hAsync("slot", { name: SLOTS$u.control }))) : null, hasMenuActions ? (hAsync("calcite-action-menu", { label: messages.options, overlayPositioning: this.overlayPositioning }, hAsync("slot", { name: SLOTS$u.headerMenuActions }))) : null, this.renderActionsEnd()));
-        return (hAsync(Host, { key: 'd6347f1b34c4000be47e99f3360e2ed04220b2ad' }, hAsync(InteractiveContainer, { key: '8b9056e5a930eb47014914c5ee95733c55f34437', disabled: this.disabled }, hAsync("article", { key: 'e708dd5829281fd034950ae8d495d353d90bce84', "aria-busy": toAriaBoolean(loading), class: {
-                [CSS$1l.container]: true,
-            } }, headerNode, hAsync("section", { key: '2aca07379b250e86106692a8d33bf7478f7abb0b', "aria-labelledby": IDS$1.toggle, class: CSS$1l.content, hidden: !open, id: IDS$1.content, ref: this.setTransitionEl }, this.renderScrim())))));
+        const headerNode = (hAsync("div", { key: '6ca859e09a3b11219a3b412998c83e91c845753f', class: CSS$1m.headerContainer }, this.dragHandle ? hAsync("calcite-handle", { label: heading }) : null, collapsible ? (hAsync("button", { "aria-controls": IDS$1.content, "aria-describedby": IDS$1.header, "aria-expanded": collapsible ? toAriaBoolean(open) : null, class: CSS$1m.toggle, id: IDS$1.toggle, onClick: this.onHeaderClick, title: toggleLabel }, headerContent, hAsync("div", { class: CSS$1m.iconEndContainer }, this.renderIcon("end"), hAsync("calcite-icon", { class: CSS$1m.toggleIcon, icon: collapseIcon, scale: "s" })))) : this.iconEnd ? (hAsync("div", null, headerContent, hAsync("div", { class: CSS$1m.iconEndContainer }, this.renderIcon("end")))) : (headerContent), hasControl ? (hAsync("div", { "aria-labelledby": IDS$1.header, class: CSS$1m.controlContainer }, hAsync("slot", { name: SLOTS$u.control }))) : null, hasMenuActions ? (hAsync("calcite-action-menu", { label: messages.options, overlayPositioning: this.overlayPositioning }, hAsync("slot", { name: SLOTS$u.headerMenuActions }))) : null, this.renderActionsEnd()));
+        return (hAsync(Host, { key: 'b42f72a17e0896ae7406d4f09f346cfb75e4c9ef' }, hAsync(InteractiveContainer, { key: '181fef154faaa7f8d1dca2e08745c76141678053', disabled: this.disabled }, hAsync("article", { key: 'd93e5b8f13529441ba99bcfcc51d5b31eab981ab', "aria-busy": toAriaBoolean(loading), class: {
+                [CSS$1m.container]: true,
+            } }, headerNode, hAsync("section", { key: 'cd7759e5b8f695cd238b523075984b82de562005', "aria-labelledby": IDS$1.toggle, class: CSS$1m.content, hidden: !open, id: IDS$1.content, ref: this.setTransitionEl }, this.renderScrim())))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
@@ -10171,7 +10172,7 @@ const IDS = {
     content: "content",
     toggle: "toggle",
 };
-const CSS$1k = {
+const CSS$1l = {
     chevronIcon: "chevron-icon",
     content: "content",
     iconStart: "icon--start",
@@ -10281,9 +10282,9 @@ class BlockSection {
         const { status } = this;
         const statusIcon = ICONS$j[status] ?? false;
         const statusIconClasses = {
-            [CSS$1k.statusIcon]: true,
-            [CSS$1k.valid]: status == "valid",
-            [CSS$1k.invalid]: status == "invalid",
+            [CSS$1l.statusIcon]: true,
+            [CSS$1l.valid]: status == "valid",
+            [CSS$1l.invalid]: status == "invalid",
         };
         return statusIcon ? (hAsync("calcite-icon", { class: statusIconClasses, icon: statusIcon, scale: "s" })) : null;
     }
@@ -10296,24 +10297,24 @@ class BlockSection {
         const flipRtlEnd = iconFlipRtl === "both" || iconFlipRtl === "end";
         const isIconStart = icon === this.iconStart;
         /** Icon scale is not variable as the component does not have a scale property */
-        return (hAsync("calcite-icon", { class: isIconStart ? CSS$1k.iconStart : CSS$1k.iconEnd, flipRtl: isIconStart ? flipRtlStart : flipRtlEnd, icon: isIconStart ? this.iconStart : this.iconEnd, key: isIconStart ? this.iconStart : this.iconEnd, scale: "s" }));
+        return (hAsync("calcite-icon", { class: isIconStart ? CSS$1l.iconStart : CSS$1l.iconEnd, flipRtl: isIconStart ? flipRtlStart : flipRtlEnd, icon: isIconStart ? this.iconStart : this.iconEnd, key: isIconStart ? this.iconStart : this.iconEnd, scale: "s" }));
     }
     render() {
         const { messages, open, text, toggleDisplay } = this;
         const arrowIcon = open ? ICONS$j.menuOpen : ICONS$j.menuClosed;
         const toggleLabel = open ? messages.collapse : messages.expand;
         const headerNode = toggleDisplay === "switch" ? (hAsync("div", { class: {
-                [CSS$1k.toggleContainer]: true,
+                [CSS$1l.toggleContainer]: true,
             } }, hAsync("div", { "aria-controls": IDS.content, "aria-expanded": toAriaBoolean(open), class: {
-                [CSS$1k.toggle]: true,
-                [CSS$1k.toggleSwitch]: true,
-            }, id: IDS.toggle, onClick: this.toggleSection, onKeyDown: this.handleHeaderKeyDown, role: "button", tabIndex: 0, title: toggleLabel }, this.renderIcon(this.iconStart), hAsync("div", { class: CSS$1k.toggleSwitchContent }, hAsync("span", { class: CSS$1k.toggleSwitchText }, text)), this.renderIcon(this.iconEnd), this.renderStatusIcon(), hAsync("calcite-switch", { checked: open, class: CSS$1k.switch, inert: true, label: toggleLabel, scale: "s" })))) : (hAsync("div", { class: {
-                [CSS$1k.toggleContainer]: true,
+                [CSS$1l.toggle]: true,
+                [CSS$1l.toggleSwitch]: true,
+            }, id: IDS.toggle, onClick: this.toggleSection, onKeyDown: this.handleHeaderKeyDown, role: "button", tabIndex: 0, title: toggleLabel }, this.renderIcon(this.iconStart), hAsync("div", { class: CSS$1l.toggleSwitchContent }, hAsync("span", { class: CSS$1l.toggleSwitchText }, text)), this.renderIcon(this.iconEnd), this.renderStatusIcon(), hAsync("calcite-switch", { checked: open, class: CSS$1l.switch, inert: true, label: toggleLabel, scale: "s" })))) : (hAsync("div", { class: {
+                [CSS$1l.toggleContainer]: true,
             } }, hAsync("button", { "aria-controls": IDS.content, "aria-expanded": toAriaBoolean(open), class: {
-                [CSS$1k.sectionHeader]: true,
-                [CSS$1k.toggle]: true,
-            }, id: IDS.toggle, onClick: this.toggleSection }, this.renderIcon(this.iconStart), hAsync("span", { class: CSS$1k.sectionHeaderText }, text), this.renderIcon(this.iconEnd), this.renderStatusIcon(), hAsync("calcite-icon", { class: CSS$1k.chevronIcon, icon: arrowIcon, scale: "s" }))));
-        return (hAsync(Host, { key: '224c2187de037da1611a3228195e95ba43bde093' }, headerNode, hAsync("section", { key: '8b8849645851e21e26c63cef44428f30d2429a0b', "aria-labelledby": IDS.toggle, class: CSS$1k.content, hidden: !open, id: IDS.content }, hAsync("slot", { key: '3f6d783aaa6d886bb4533a4dec96aafc8ba058ef' }))));
+                [CSS$1l.sectionHeader]: true,
+                [CSS$1l.toggle]: true,
+            }, id: IDS.toggle, onClick: this.toggleSection }, this.renderIcon(this.iconStart), hAsync("span", { class: CSS$1l.sectionHeaderText }, text), this.renderIcon(this.iconEnd), this.renderStatusIcon(), hAsync("calcite-icon", { class: CSS$1l.chevronIcon, icon: arrowIcon, scale: "s" }))));
+        return (hAsync(Host, { key: '224c2187de037da1611a3228195e95ba43bde093' }, headerNode, hAsync("section", { key: '8b8849645851e21e26c63cef44428f30d2429a0b', "aria-labelledby": IDS.toggle, class: CSS$1l.content, hidden: !open, id: IDS.content }, hAsync("slot", { key: '3f6d783aaa6d886bb4533a4dec96aafc8ba058ef' }))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
@@ -10868,7 +10869,7 @@ async function associateExplicitLabelToUnlabeledComponent(label) {
     });
 }
 
-const CSS$1j = {
+const CSS$1k = {
     buttonLoader: "calcite-button--loader",
     content: "content",
     contentSlotted: "content--slotted",
@@ -11006,17 +11007,17 @@ class Button {
     render() {
         const childElType = this.href ? "a" : "button";
         const Tag = childElType;
-        const loaderNode = this.hasLoader ? (hAsync("div", { class: CSS$1j.buttonLoader }, hAsync("calcite-loader", { class: this.loading ? CSS$1j.loadingIn : CSS$1j.loadingOut, inline: true, label: this.messages.loading, scale: this.scale === "l" ? "m" : "s" }))) : null;
+        const loaderNode = this.hasLoader ? (hAsync("div", { class: CSS$1k.buttonLoader }, hAsync("calcite-loader", { class: this.loading ? CSS$1k.loadingIn : CSS$1k.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", { key: '5f802ba3711d5453f1e6122cb18bc29e432df0ca', class: { [CSS$1j.icon]: true, [CSS$1j.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: getIconScale(this.scale) }));
-        const iconEndEl = (hAsync("calcite-icon", { key: '3ef0f67aecc6e5475d52447f8b8a985e5700291f', class: { [CSS$1j.icon]: true, [CSS$1j.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: getIconScale(this.scale) }));
-        const contentEl = (hAsync("span", { key: 'bccc400a38f1304ba1f5b0015870fb34e31fa97e', class: CSS$1j.content, ref: (el) => (this.contentEl = el) }, hAsync("slot", { key: '18b9553660036b6fcf83ceabf68b308b5d140904' })));
+        const iconStartEl = (hAsync("calcite-icon", { key: '5f802ba3711d5453f1e6122cb18bc29e432df0ca', class: { [CSS$1k.icon]: true, [CSS$1k.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: getIconScale(this.scale) }));
+        const iconEndEl = (hAsync("calcite-icon", { key: '3ef0f67aecc6e5475d52447f8b8a985e5700291f', class: { [CSS$1k.icon]: true, [CSS$1k.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: getIconScale(this.scale) }));
+        const contentEl = (hAsync("span", { key: 'bccc400a38f1304ba1f5b0015870fb34e31fa97e', class: CSS$1k.content, ref: (el) => (this.contentEl = el) }, hAsync("slot", { key: '18b9553660036b6fcf83ceabf68b308b5d140904' })));
         return (hAsync(InteractiveContainer, { key: 'e9bebe1bbc63bca93b02eb53efef76a035ce89d0', disabled: this.disabled }, hAsync(Tag, { key: '2d99966fc0ba9d13cb623f6ae7936ba9ddfbe7e1', "aria-disabled": childElType === "a" ? toAriaBoolean(this.disabled || this.loading) : null, "aria-expanded": this.el.getAttribute("aria-expanded"), "aria-label": !this.loading ? getLabelText(this) : this.messages.loading, "aria-live": "polite", class: {
-                [CSS$1j.buttonPadding]: noStartEndIcons,
-                [CSS$1j.buttonPaddingShrunk]: !noStartEndIcons,
-                [CSS$1j.contentSlotted]: this.hasContent,
-                [CSS$1j.iconStartEmpty]: !this.iconStart,
-                [CSS$1j.iconEndEmpty]: !this.iconEnd,
+                [CSS$1k.buttonPadding]: noStartEndIcons,
+                [CSS$1k.buttonPaddingShrunk]: !noStartEndIcons,
+                [CSS$1k.contentSlotted]: this.hasContent,
+                [CSS$1k.iconStartEmpty]: !this.iconStart,
+                [CSS$1k.iconEndEmpty]: !this.iconEnd,
             }, disabled: childElType === "button" ? this.disabled || this.loading : null, download: childElType === "a" && (this.download === "" || this.download) ? this.download : null, href: childElType === "a" && this.href, name: childElType === "button" && this.name, onClick: this.handleClick, ref: this.setChildEl, rel: childElType === "a" && this.rel, tabIndex: this.disabled ? -1 : null, target: childElType === "a" && this.target, title: this.tooltipText, type: childElType === "button" && this.type }, loaderNode, this.iconStart ? iconStartEl : null, this.hasContent ? contentEl : null, this.iconEnd ? iconEndEl : null)));
     }
     //--------------------------------------------------------------------------
@@ -11279,7 +11280,7 @@ class CalciteMenu {
     }; }
 }
 
-const CSS$1i = {
+const CSS$1j = {
     container: "container",
     content: "content",
     dropdownVertical: "dropdown--vertical",
@@ -11486,52 +11487,52 @@ class CalciteMenuItem {
     //
     //--------------------------------------------------------------------------
     renderIconStart() {
-        return (hAsync("calcite-icon", { class: `${CSS$1i.icon} ${CSS$1i.iconStart}`, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, key: CSS$1i.iconStart, scale: "s" }));
+        return (hAsync("calcite-icon", { class: `${CSS$1j.icon} ${CSS$1j.iconStart}`, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, key: CSS$1j.iconStart, scale: "s" }));
     }
     renderIconEnd() {
-        return (hAsync("calcite-icon", { class: `${CSS$1i.icon} ${CSS$1i.iconEnd}`, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, key: CSS$1i.iconEnd, scale: "s" }));
+        return (hAsync("calcite-icon", { class: `${CSS$1j.icon} ${CSS$1j.iconEnd}`, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, key: CSS$1j.iconEnd, scale: "s" }));
     }
     renderBreadcrumbIcon(dir) {
-        return (hAsync("calcite-icon", { class: `${CSS$1i.icon} ${CSS$1i.iconBreadcrumb}`, icon: dir === "rtl" ? "chevron-left" : "chevron-right", key: CSS$1i.iconBreadcrumb, scale: "s" }));
+        return (hAsync("calcite-icon", { class: `${CSS$1j.icon} ${CSS$1j.iconBreadcrumb}`, icon: dir === "rtl" ? "chevron-left" : "chevron-right", key: CSS$1j.iconBreadcrumb, scale: "s" }));
     }
     renderDropdownIcon(dir) {
         const dirChevron = dir === "rtl" ? "chevron-left" : "chevron-right";
-        return (hAsync("calcite-icon", { class: `${CSS$1i.icon} ${CSS$1i.iconDropdown}`, icon: this.topLevelMenuLayout === "vertical" || this.isTopLevelItem
+        return (hAsync("calcite-icon", { class: `${CSS$1j.icon} ${CSS$1j.iconDropdown}`, icon: this.topLevelMenuLayout === "vertical" || this.isTopLevelItem
                 ? this.open
                     ? "chevron-up"
                     : "chevron-down"
-                : dirChevron, key: CSS$1i.iconDropdown, scale: "s" }));
+                : dirChevron, key: CSS$1j.iconDropdown, scale: "s" }));
     }
     renderDropdownAction(dir) {
         const dirChevron = dir === "rtl" ? "chevron-left" : "chevron-right";
-        return (hAsync("calcite-action", { class: CSS$1i.dropdownAction, icon: this.topLevelMenuLayout === "vertical" || this.isTopLevelItem
+        return (hAsync("calcite-action", { class: CSS$1j.dropdownAction, icon: this.topLevelMenuLayout === "vertical" || this.isTopLevelItem
                 ? this.open
                     ? "chevron-up"
                     : "chevron-down"
-                : dirChevron, key: CSS$1i.dropdownAction, onClick: this.clickHandler, onKeyDown: this.keyDownHandler, ref: (el) => (this.dropdownActionEl = el), text: this.messages.open }));
+                : dirChevron, key: CSS$1j.dropdownAction, onClick: this.clickHandler, onKeyDown: this.keyDownHandler, ref: (el) => (this.dropdownActionEl = el), text: this.messages.open }));
     }
     renderSubmenuItems(dir) {
         return (hAsync("calcite-menu", { class: {
-                [CSS$1i.dropdownMenuItems]: true,
-                [CSS$1i.open]: this.open,
-                [CSS$1i.nested]: !this.isTopLevelItem,
+                [CSS$1j.dropdownMenuItems]: true,
+                [CSS$1j.open]: this.open,
+                [CSS$1j.nested]: !this.isTopLevelItem,
                 [CSS_UTILITY.rtl]: dir === "rtl",
-                [CSS$1i.dropdownVertical]: this.topLevelMenuLayout === "vertical",
+                [CSS$1j.dropdownVertical]: this.topLevelMenuLayout === "vertical",
             }, label: this.messages.submenu, layout: "vertical", role: "menu" }, hAsync("slot", { name: "submenu-item", onSlotchange: this.handleMenuItemSlotChange })));
     }
     renderHrefIcon(dir) {
-        return (hAsync("calcite-icon", { class: CSS$1i.hoverHrefIcon, icon: dir === "rtl" ? "arrow-left" : "arrow-right", key: CSS$1i.hoverHrefIcon, scale: "s" }));
+        return (hAsync("calcite-icon", { class: CSS$1j.hoverHrefIcon, icon: dir === "rtl" ? "arrow-left" : "arrow-right", key: CSS$1j.hoverHrefIcon, scale: "s" }));
     }
     renderItemContent(dir) {
         const hasHref = this.href && (this.topLevelMenuLayout === "vertical" || !this.isTopLevelItem);
-        return (hAsync(Fragment, null, this.iconStart && this.renderIconStart(), hAsync("div", { class: CSS$1i.textContainer }, hAsync("span", null, this.text)), hasHref && this.renderHrefIcon(dir), this.iconEnd && this.renderIconEnd(), this.breadcrumb ? this.renderBreadcrumbIcon(dir) : null, !this.href && this.hasSubmenu ? this.renderDropdownIcon(dir) : null));
+        return (hAsync(Fragment, null, this.iconStart && this.renderIconStart(), hAsync("div", { class: CSS$1j.textContainer }, hAsync("span", null, this.text)), hasHref && this.renderHrefIcon(dir), this.iconEnd && this.renderIconEnd(), this.breadcrumb ? this.renderBreadcrumbIcon(dir) : null, !this.href && this.hasSubmenu ? this.renderDropdownIcon(dir) : null));
     }
     render() {
         const dir = getElementDir(this.el);
         return (hAsync(Host, { key: 'd0565238612162b6f4294cf290d29c84169f5b0c', onBlur: this.blurHandler, onFocus: this.focusHandler }, hAsync("li", { key: '023ceb081edd357f900d911e13e7c886ec50c3a8', class: {
-                [CSS$1i.container]: true,
-                [CSS$1i.isParentVertical]: this.topLevelMenuLayout === "vertical",
-            }, role: "none" }, hAsync("div", { key: '105f0f53cacc9e6a1550b8f653af7803cdedd068', class: CSS$1i.itemContent }, hAsync("a", { key: '83ab64642625277a609b3cf790afe2bac8f118e7', "aria-current": this.isFocused ? "page" : false, "aria-expanded": this.open, "aria-haspopup": this.hasSubmenu, "aria-label": this.label, class: { [CSS$1i.layoutVertical]: this.layout === "vertical", [CSS$1i.content]: true }, href: this.href, onClick: this.clickHandler, onKeyDown: this.keyDownHandler, ref: (el) => (this.anchorEl = el), rel: this.rel, role: "menuitem", tabIndex: this.isTopLevelItem ? 0 : -1, target: this.target }, this.renderItemContent(dir)), this.href && this.hasSubmenu ? this.renderDropdownAction(dir) : null), this.renderSubmenuItems(dir))));
+                [CSS$1j.container]: true,
+                [CSS$1j.isParentVertical]: this.topLevelMenuLayout === "vertical",
+            }, role: "none" }, hAsync("div", { key: '105f0f53cacc9e6a1550b8f653af7803cdedd068', class: CSS$1j.itemContent }, hAsync("a", { key: '83ab64642625277a609b3cf790afe2bac8f118e7', "aria-current": this.isFocused ? "page" : false, "aria-expanded": this.open, "aria-haspopup": this.hasSubmenu, "aria-label": this.label, class: { [CSS$1j.layoutVertical]: this.layout === "vertical", [CSS$1j.content]: true }, href: this.href, onClick: this.clickHandler, onKeyDown: this.keyDownHandler, ref: (el) => (this.anchorEl = el), rel: this.rel, role: "menuitem", tabIndex: this.isTopLevelItem ? 0 : -1, target: this.target }, this.renderItemContent(dir)), this.href && this.hasSubmenu ? this.renderDropdownAction(dir) : null), this.renderSubmenuItems(dir))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
@@ -11572,7 +11573,7 @@ class CalciteMenuItem {
     }; }
 }
 
-const CSS$1h = {
+const CSS$1i = {
     container: "container",
     containerContent: "container-content",
     hasProgress: "progress-bar",
@@ -11720,11 +11721,11 @@ class CalciteNavigation {
             this.navigationAction;
         const slotName = this.el.slot;
         return (hAsync(Host, { key: '1d1a6c7d7834d030dd2edd4002478779c7fddb87' }, hAsync("div", { key: 'f9eaa72e8f5cd3f6efe29ef17362a8aa3b0fe249', class: {
-                [CSS$1h.container]: true,
-                [CSS$1h.secondary]: slotName === SLOTS$t.navSecondary,
-                [CSS$1h.tertiary]: slotName === SLOTS$t.navTertiary,
-                [CSS$1h.primary]: primaryLevelHasElements,
-            } }, hAsync("div", { key: 'f7ea3f229571b49762e2cd7ab0347e6b9ea7dd4a', class: { [CSS$1h.hide]: !this.progressSlotHasElement, [SLOTS$t.progress]: true } }, hAsync("slot", { key: '9a4ada6d080ade9fbba101fa2164a8b14eeec156', name: SLOTS$t.progress, onSlotchange: this.handleProgressSlotChange })), hAsync("div", { key: '736eba5cdbc73132bf53104c6359ac4e9415e35e', class: { [CSS$1h.containerContent]: true, [CSS$1h.hasProgress]: this.progressSlotHasElement } }, this.renderMenuAction(), hAsync("div", { key: 'dbea8e431f26edd7df09607a1485a28538ffd81e', class: { [CSS$1h.hide]: !this.logoSlotHasElements, [SLOTS$t.logo]: true } }, hAsync("slot", { key: '3780f30540e7de2a18a3158d7c4cd318010ca3d6', name: SLOTS$t.logo, onSlotchange: this.handleLogoSlotChange })), hAsync("slot", { key: 'a8569142c3e56b1e3a6d0f632c4927bd5476c2d7', name: SLOTS$t.contentStart, onSlotchange: this.handleContentStartSlotChange }), hAsync("slot", { key: '716d5715d9357cb470e116b4e11063c6ce80818a', name: SLOTS$t.contentCenter, onSlotchange: this.handleContentCenterSlotChange }), hAsync("slot", { key: '9c18337874f70deb327e56a91b5fb77577bcf0ae', name: SLOTS$t.contentEnd, onSlotchange: this.handleContentEndSlotChange }), hAsync("div", { key: 'b500beed8e9dccc07583f9bdf7fc1c2eb87301b7', class: { [CSS$1h.hide]: !this.userSlotHasElements, [SLOTS$t.user]: true } }, hAsync("slot", { key: '0224aa4a9e9792530e17d9a1ef66c1708e439de1', name: SLOTS$t.user, onSlotchange: this.handleUserSlotChange })))), hAsync(Fragment, { key: 'b2dff59e666924e8d97365fd9a998d87dea61fca' }, hAsync("slot", { key: 'dd846a2b4cf68336fa35687e740e72e50f62d105', name: SLOTS$t.navSecondary, onSlotchange: this.handleSecondarySlotChange }), hAsync("slot", { key: '1c13be322fce256254c82222f6d976e3ca4cf334', name: SLOTS$t.navTertiary, onSlotchange: this.handleTertiarySlotChange }))));
+                [CSS$1i.container]: true,
+                [CSS$1i.secondary]: slotName === SLOTS$t.navSecondary,
+                [CSS$1i.tertiary]: slotName === SLOTS$t.navTertiary,
+                [CSS$1i.primary]: primaryLevelHasElements,
+            } }, hAsync("div", { key: 'f7ea3f229571b49762e2cd7ab0347e6b9ea7dd4a', class: { [CSS$1i.hide]: !this.progressSlotHasElement, [SLOTS$t.progress]: true } }, hAsync("slot", { key: '9a4ada6d080ade9fbba101fa2164a8b14eeec156', name: SLOTS$t.progress, onSlotchange: this.handleProgressSlotChange })), hAsync("div", { key: '736eba5cdbc73132bf53104c6359ac4e9415e35e', class: { [CSS$1i.containerContent]: true, [CSS$1i.hasProgress]: this.progressSlotHasElement } }, this.renderMenuAction(), hAsync("div", { key: 'dbea8e431f26edd7df09607a1485a28538ffd81e', class: { [CSS$1i.hide]: !this.logoSlotHasElements, [SLOTS$t.logo]: true } }, hAsync("slot", { key: '3780f30540e7de2a18a3158d7c4cd318010ca3d6', name: SLOTS$t.logo, onSlotchange: this.handleLogoSlotChange })), hAsync("slot", { key: 'a8569142c3e56b1e3a6d0f632c4927bd5476c2d7', name: SLOTS$t.contentStart, onSlotchange: this.handleContentStartSlotChange }), hAsync("slot", { key: '716d5715d9357cb470e116b4e11063c6ce80818a', name: SLOTS$t.contentCenter, onSlotchange: this.handleContentCenterSlotChange }), hAsync("slot", { key: '9c18337874f70deb327e56a91b5fb77577bcf0ae', name: SLOTS$t.contentEnd, onSlotchange: this.handleContentEndSlotChange }), hAsync("div", { key: 'b500beed8e9dccc07583f9bdf7fc1c2eb87301b7', class: { [CSS$1i.hide]: !this.userSlotHasElements, [SLOTS$t.user]: true } }, hAsync("slot", { key: '0224aa4a9e9792530e17d9a1ef66c1708e439de1', name: SLOTS$t.user, onSlotchange: this.handleUserSlotChange })))), hAsync(Fragment, { key: 'b2dff59e666924e8d97365fd9a998d87dea61fca' }, hAsync("slot", { key: 'dd846a2b4cf68336fa35687e740e72e50f62d105', name: SLOTS$t.navSecondary, onSlotchange: this.handleSecondarySlotChange }), hAsync("slot", { key: '1c13be322fce256254c82222f6d976e3ca4cf334', name: SLOTS$t.navTertiary, onSlotchange: this.handleTertiarySlotChange }))));
     }
     get el() { return getElement(this); }
     static get style() { return CalciteNavigationStyle0; }
@@ -11751,7 +11752,7 @@ class CalciteNavigation {
     }; }
 }
 
-const CSS$1g = {
+const CSS$1h = {
     container: "container",
     heading: "heading",
     description: "description",
@@ -11809,20 +11810,20 @@ class CalciteNavigationLogo {
     // --------------------------------------------------------------------------
     renderIcon() {
         /** Icon scale is not variable as the component does not have a scale property */
-        return hAsync("calcite-icon", { class: CSS$1g.icon, flipRtl: this.iconFlipRtl, icon: this.icon, scale: "l" });
+        return hAsync("calcite-icon", { class: CSS$1h.icon, flipRtl: this.iconFlipRtl, icon: this.icon, scale: "l" });
     }
     renderHeaderContent() {
         const { heading, headingLevel, description } = this;
         const headingNode = heading ? (hAsync(Heading, { class: {
-                [CSS$1g.heading]: true,
-                [CSS$1g.standalone]: !this.description,
-            }, key: CSS$1g.heading, level: headingLevel }, heading)) : null;
-        const descriptionNode = description ? (hAsync("span", { class: CSS$1g.description, key: CSS$1g.description }, description)) : null;
-        return headingNode || descriptionNode ? (hAsync("div", { class: CSS$1g.container, key: CSS$1g.container }, headingNode, descriptionNode)) : null;
+                [CSS$1h.heading]: true,
+                [CSS$1h.standalone]: !this.description,
+            }, key: CSS$1h.heading, level: headingLevel }, heading)) : null;
+        const descriptionNode = description ? (hAsync("span", { class: CSS$1h.description, key: CSS$1h.description }, description)) : null;
+        return headingNode || descriptionNode ? (hAsync("div", { class: CSS$1h.container, key: CSS$1h.container }, headingNode, descriptionNode)) : null;
     }
     render() {
         const { thumbnail } = this;
-        return (hAsync(Host, { key: '3175c360a50d803f38d7925d73545536266f243a' }, hAsync("a", { key: 'e59bcf043d82205b1bd9b064b73f5a61b79e4c5c', class: CSS$1g.anchor, href: this.href, rel: this.rel, target: this.target }, thumbnail && hAsync("img", { key: '4e43a4ca1c99e3d9aa07bf7661c1a3e6e3fa7442', alt: this.label || "", class: CSS$1g.image, src: thumbnail }), this.icon && this.renderIcon(), this.renderHeaderContent())));
+        return (hAsync(Host, { key: '3175c360a50d803f38d7925d73545536266f243a' }, hAsync("a", { key: 'e59bcf043d82205b1bd9b064b73f5a61b79e4c5c', class: CSS$1h.anchor, href: this.href, rel: this.rel, target: this.target }, thumbnail && hAsync("img", { key: '4e43a4ca1c99e3d9aa07bf7661c1a3e6e3fa7442', alt: this.label || "", class: CSS$1h.image, src: thumbnail }), this.icon && this.renderIcon(), this.renderHeaderContent())));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
@@ -11850,7 +11851,7 @@ class CalciteNavigationLogo {
     }; }
 }
 
-const CSS$1f = {
+const CSS$1g = {
     textContainer: "text-container",
     fullName: "full-name",
     username: "username",
@@ -11898,7 +11899,7 @@ class CalciteNavigationUser {
     //
     // --------------------------------------------------------------------------
     render() {
-        return (hAsync(Host, { key: 'd936b14ef2a1a616059096240699b133be29bcd4' }, hAsync("button", { key: '1189f2a7c98a126a62450f4c8535700fed90edae', "aria-label": this.label, class: CSS$1f.button }, hAsync("calcite-avatar", { key: 'cecbea689fb80a8e244993cf5e45623cbcd7dfa4', "full-name": this.fullName, label: this.label, thumbnail: this.thumbnail, "user-id": this.userId, username: this.username }), (this.fullName || this.username) && !this.textDisabled && (hAsync("div", { key: 'ae0aa9f474c95c995e13a9e358f8159c7cad544f', class: CSS$1f.textContainer }, this.fullName && (hAsync("span", { class: CSS$1f.fullName, key: CSS$1f.fullName }, this.fullName)), this.username && (hAsync("span", { class: CSS$1f.username, key: CSS$1f.username }, this.username)))))));
+        return (hAsync(Host, { key: 'd936b14ef2a1a616059096240699b133be29bcd4' }, hAsync("button", { key: '1189f2a7c98a126a62450f4c8535700fed90edae', "aria-label": this.label, class: CSS$1g.button }, hAsync("calcite-avatar", { key: 'cecbea689fb80a8e244993cf5e45623cbcd7dfa4', "full-name": this.fullName, label: this.label, thumbnail: this.thumbnail, "user-id": this.userId, username: this.username }), (this.fullName || this.username) && !this.textDisabled && (hAsync("div", { key: 'ae0aa9f474c95c995e13a9e358f8159c7cad544f', class: CSS$1g.textContainer }, this.fullName && (hAsync("span", { class: CSS$1g.fullName, key: CSS$1g.fullName }, this.fullName)), this.username && (hAsync("span", { class: CSS$1g.username, key: CSS$1g.username }, this.username)))))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
@@ -11922,7 +11923,7 @@ class CalciteNavigationUser {
     }; }
 }
 
-const CSS$1e = {
+const CSS$1f = {
     container: "container",
     contentWrapper: "content-wrapper",
     header: "header",
@@ -12080,10 +12081,10 @@ class Card {
         updateMessages(this);
     }
     renderCheckboxDeprecated() {
-        return (hAsync("calcite-label", { class: CSS$1e.checkboxWrapperDeprecated }, hAsync("calcite-checkbox", { checked: this.selected, label: this.messages.select, onClick: this.selectCardDeprecated, onKeyDown: this.cardSelectKeyDownDeprecated })));
+        return (hAsync("calcite-label", { class: CSS$1f.checkboxWrapperDeprecated }, hAsync("calcite-checkbox", { checked: this.selected, label: this.messages.select, onClick: this.selectCardDeprecated, onKeyDown: this.cardSelectKeyDownDeprecated })));
     }
     renderThumbnail() {
-        return getSlotted(this.el, SLOTS$s.thumbnail) ? (hAsync("section", { class: CSS$1e.thumbnailWrapper }, hAsync("slot", { name: SLOTS$s.thumbnail }))) : null;
+        return getSlotted(this.el, SLOTS$s.thumbnail) ? (hAsync("section", { class: CSS$1f.thumbnailWrapper }, hAsync("slot", { name: SLOTS$s.thumbnail }))) : null;
     }
     renderSelectionIcon() {
         const icon = this.selectionMode === "multiple" && this.selected
@@ -12093,7 +12094,7 @@ class Card {
                 : this.selected
                     ? ICONS$h.selectedSingle
                     : ICONS$h.unselectedSingle;
-        return (hAsync("div", { class: CSS$1e.checkboxWrapper, onPointerDown: this.cardSelectClick, tabIndex: -1 }, hAsync("calcite-icon", { icon: icon, scale: "s" })));
+        return (hAsync("div", { class: CSS$1f.checkboxWrapper, onPointerDown: this.cardSelectClick, tabIndex: -1 }, hAsync("calcite-icon", { icon: icon, scale: "s" })));
     }
     renderHeader() {
         const { el } = this;
@@ -12103,14 +12104,14 @@ class Card {
         const subtitle = getSlotted(el, SLOTS$s.subtitle);
         const title = getSlotted(el, SLOTS$s.title);
         const hasDeprecatedHeader = subtitle || title;
-        return hasHeader || hasDeprecatedHeader ? (hAsync("header", { class: CSS$1e.header }, this.selectable ? this.renderCheckboxDeprecated() : null, hAsync("div", { class: CSS$1e.headerTextContainer }, hAsync("slot", { key: "heading-slot", name: SLOTS$s.heading }), hAsync("slot", { key: "description-slot", name: SLOTS$s.description }), hAsync("slot", { key: "deprecated-title-slot", name: SLOTS$s.title }), hAsync("slot", { key: "deprecated-subtitle-slot", name: SLOTS$s.subtitle })), this.selectionMode !== "none" && this.renderSelectionIcon())) : null;
+        return hasHeader || hasDeprecatedHeader ? (hAsync("header", { class: CSS$1f.header }, this.selectable ? this.renderCheckboxDeprecated() : null, hAsync("div", { class: CSS$1f.headerTextContainer }, hAsync("slot", { key: "heading-slot", name: SLOTS$s.heading }), hAsync("slot", { key: "description-slot", name: SLOTS$s.description }), hAsync("slot", { key: "deprecated-title-slot", name: SLOTS$s.title }), hAsync("slot", { key: "deprecated-subtitle-slot", name: SLOTS$s.subtitle })), this.selectionMode !== "none" && this.renderSelectionIcon())) : null;
     }
     renderFooter() {
         const { el } = this;
         const startFooter = getSlotted(el, SLOTS$s.footerStart);
         const endFooter = getSlotted(el, SLOTS$s.footerEnd);
         const hasFooter = startFooter || endFooter;
-        return hasFooter ? (hAsync("footer", { class: CSS$1e.footer }, hAsync("slot", { name: SLOTS$s.footerStart }), hAsync("slot", { name: SLOTS$s.footerEnd }))) : null;
+        return hasFooter ? (hAsync("footer", { class: CSS$1f.footer }, hAsync("slot", { name: SLOTS$s.footerStart }), hAsync("slot", { name: SLOTS$s.footerEnd }))) : null;
     }
     render() {
         const thumbnailInline = this.thumbnailPosition.startsWith("inline");
@@ -12120,9 +12121,9 @@ class Card {
             : this.selectionMode !== "none"
                 ? "radio"
                 : undefined;
-        return (hAsync(Host, { key: 'e33b76130cd91d3caa6662f1f58b79d238c708fb' }, hAsync(InteractiveContainer, { key: '772da2a3a1274eb467d1febb915ffb97953beae7', disabled: this.disabled }, hAsync("div", { key: 'b9fdbb51cfb07964479d0f723add39b8a2384f86', "aria-checked": this.selectionMode !== "none" ? toAriaBoolean(this.selected) : undefined, "aria-disabled": this.disabled, "aria-label": this.label, class: { [CSS$1e.contentWrapper]: true, inline: thumbnailInline }, onClick: this.cardBodyClickHandler, onKeyDown: this.keyDownHandler, ref: (el) => (this.containerEl = el), role: role, tabIndex: !this.selectable || this.disabled ? 0 : -1 }, this.loading ? (hAsync("div", { "aria-live": "polite", class: "calcite-card-loader-container" }, hAsync("calcite-loader", { label: this.messages.loading }))) : null, thumbnailStart && this.renderThumbnail(), hAsync("section", { key: '51cfe132a589ec65b39544b4c1246545b0b864f2', "aria-busy": toAriaBoolean(this.loading), class: { [CSS$1e.container]: true } }, this.renderHeader(), hAsync("div", { key: 'c256998e330a949d47a12b23127c68cba081854e', class: {
-                [CSS$1e.cardContent]: true,
-                [CSS$1e.hasSlottedContent]: this.hasContent,
+        return (hAsync(Host, { key: 'e33b76130cd91d3caa6662f1f58b79d238c708fb' }, hAsync(InteractiveContainer, { key: '772da2a3a1274eb467d1febb915ffb97953beae7', disabled: this.disabled }, hAsync("div", { key: 'b9fdbb51cfb07964479d0f723add39b8a2384f86', "aria-checked": this.selectionMode !== "none" ? toAriaBoolean(this.selected) : undefined, "aria-disabled": this.disabled, "aria-label": this.label, class: { [CSS$1f.contentWrapper]: true, inline: thumbnailInline }, onClick: this.cardBodyClickHandler, onKeyDown: this.keyDownHandler, ref: (el) => (this.containerEl = el), role: role, tabIndex: !this.selectable || this.disabled ? 0 : -1 }, this.loading ? (hAsync("div", { "aria-live": "polite", class: "calcite-card-loader-container" }, hAsync("calcite-loader", { label: this.messages.loading }))) : null, thumbnailStart && this.renderThumbnail(), hAsync("section", { key: '51cfe132a589ec65b39544b4c1246545b0b864f2', "aria-busy": toAriaBoolean(this.loading), class: { [CSS$1f.container]: true } }, this.renderHeader(), hAsync("div", { key: 'c256998e330a949d47a12b23127c68cba081854e', class: {
+                [CSS$1f.cardContent]: true,
+                [CSS$1f.hasSlottedContent]: this.hasContent,
             } }, hAsync("slot", { key: '17fb9b0a9919f09a474d3c54818e770be9a85b77', onSlotchange: this.handleDefaultSlotChange })), this.renderFooter()), !thumbnailStart && this.renderThumbnail()))));
     }
     static get assetsDirs() { return ["assets"]; }
@@ -12323,7 +12324,7 @@ class CardGroup {
 }
 
 const DURATION = 6000;
-const CSS$1d = {
+const CSS$1e = {
     container: "container",
     containerOverlaid: "container--overlaid",
     containerEdged: "container--edged",
@@ -12561,31 +12562,31 @@ class Carousel {
         this.renderRotationControl = () => {
             const text = this.playing ? this.messages.pause : this.messages.play;
             return (hAsync("button", { "aria-label": text, class: {
-                    [CSS$1d.paginationItem]: true,
-                    [CSS$1d.autoplayControl]: true,
-                }, onClick: this.toggleRotation, title: text }, hAsync("calcite-icon", { icon: this.playing ? ICONS$g.pause : ICONS$g.play, scale: "s" }), this.playing && (hAsync("calcite-progress", { class: CSS$1d.autoplayProgress, label: this.messages.carouselItemProgress, value: this.slideDurationRemaining }))));
+                    [CSS$1e.paginationItem]: true,
+                    [CSS$1e.autoplayControl]: true,
+                }, onClick: this.toggleRotation, title: text }, hAsync("calcite-icon", { icon: this.playing ? ICONS$g.pause : ICONS$g.play, scale: "s" }), this.playing && (hAsync("calcite-progress", { class: CSS$1e.autoplayProgress, label: this.messages.carouselItemProgress, value: this.slideDurationRemaining }))));
         };
         this.renderPaginationArea = () => (hAsync("div", { class: {
-                [CSS$1d.pagination]: true,
-                [CSS$1d.containerOverlaid]: this.controlOverlay,
+                [CSS$1e.pagination]: true,
+                [CSS$1e.containerOverlaid]: this.controlOverlay,
             }, onKeyDown: this.tabListKeyDownHandler, ref: this.storeTabListRef }, (this.playing || this.autoplay === "" || this.autoplay || this.autoplay === "paused") &&
             this.renderRotationControl(), this.arrowType === "inline" && this.renderArrow("previous"), this.renderPaginationItems(), this.arrowType === "inline" && this.renderArrow("next")));
-        this.renderPaginationItems = () => (hAsync("div", { "aria-label": this.label, class: CSS$1d.paginationItems, role: "tablist" }, this.items.map((item, index) => {
+        this.renderPaginationItems = () => (hAsync("div", { "aria-label": this.label, class: CSS$1e.paginationItems, role: "tablist" }, this.items.map((item, index) => {
             const isMatch = index === this.selectedIndex;
             return (hAsync("button", { "aria-controls": !isMatch ? item.id : undefined, "aria-selected": toAriaBoolean(isMatch), class: {
-                    [CSS$1d.paginationItem]: true,
-                    [CSS$1d.paginationItemIndividual]: true,
-                    [CSS$1d.paginationItemSelected]: isMatch,
+                    [CSS$1e.paginationItem]: true,
+                    [CSS$1e.paginationItemIndividual]: true,
+                    [CSS$1e.paginationItemSelected]: isMatch,
                 }, "data-index": index, key: item.id, onClick: this.handleItemSelection, role: "tab", title: item.label }, hAsync("calcite-icon", { icon: isMatch ? ICONS$g.active : ICONS$g.inactive, scale: "l" })));
         })));
         this.renderArrow = (direction) => {
             const isPrev = direction === "previous";
             const dir = getElementDir(this.el);
             const scale = this.arrowType === "edge" ? "m" : "s";
-            const css = isPrev ? CSS$1d.pagePrevious : CSS$1d.pageNext;
+            const css = isPrev ? CSS$1e.pagePrevious : CSS$1e.pageNext;
             const title = isPrev ? this.messages.previous : this.messages.next;
             const icon = isPrev ? ICONS$g.chevronLeft : ICONS$g.chevronRight;
-            return (hAsync("button", { "aria-controls": this.containerId, class: { [CSS$1d.paginationItem]: true, [css]: true }, "data-direction": direction, onClick: this.handleArrowClick, title: title }, hAsync("calcite-icon", { flipRtl: dir === "rtl", icon: icon, scale: scale })));
+            return (hAsync("button", { "aria-controls": this.containerId, class: { [CSS$1e.paginationItem]: true, [css]: true }, "data-direction": direction, onClick: this.handleArrowClick, title: title }, hAsync("calcite-icon", { flipRtl: dir === "rtl", icon: icon, scale: scale })));
         };
         this.autoplay = false;
         this.arrowType = "inline";
@@ -12743,13 +12744,13 @@ class Carousel {
     render() {
         const { direction } = this;
         return (hAsync(Host, { key: 'bff4155cb4358665eb6530b6637322598604d873' }, hAsync(InteractiveContainer, { key: '7a388be689aca07856f350963c33bce1d4e5e278', disabled: this.disabled }, hAsync("div", { key: 'c53c92b22ace937c0d2a6568ddd729ccb1b91108', "aria-label": this.label, "aria-live": this.playing ? "off" : "polite", "aria-roledescription": this.messages.carousel, class: {
-                [CSS$1d.container]: true,
-                [CSS$1d.containerOverlaid]: this.controlOverlay,
-                [CSS$1d.containerEdged]: this.arrowType === "edge",
+                [CSS$1e.container]: true,
+                [CSS$1e.containerOverlaid]: this.controlOverlay,
+                [CSS$1e.containerEdged]: this.arrowType === "edge",
             }, onFocusin: this.handleFocusIn, onFocusout: this.handleFocusOut, onKeyDown: this.containerKeyDownHandler, onMouseEnter: this.handleMouseIn, onMouseLeave: this.handleMouseOut, ref: this.storeContainerRef, role: "group", tabIndex: 0 }, hAsync("section", { key: 'cae379b167a37ef82417ab308c7d623300790122', class: {
-                [CSS$1d.itemContainer]: true,
-                [CSS$1d.itemContainerForward]: direction === "forward",
-                [CSS$1d.itemContainerBackward]: direction === "backward",
+                [CSS$1e.itemContainer]: true,
+                [CSS$1e.itemContainerForward]: direction === "forward",
+                [CSS$1e.itemContainerBackward]: direction === "backward",
             }, id: this.containerId,
             // eslint-disable-next-line react/jsx-sort-props -- auto-generated by @esri/calcite-components/enforce-ref-last-prop
             ref: this.storeItemContainerRef }, hAsync("slot", { key: 'bf14a67b46e8946e9cafc57a8d0625b65513f702', onSlotchange: this.handleSlotChange })), this.items.length > 1 && this.renderPaginationArea(), this.arrowType === "edge" && this.renderArrow("previous"), this.arrowType === "edge" && this.renderArrow("next")))));
@@ -12801,7 +12802,7 @@ class Carousel {
     }; }
 }
 
-const CSS$1c = {
+const CSS$1d = {
     container: "container",
     selected: "selected",
 };
@@ -12826,7 +12827,7 @@ class CarouselItem {
     // --------------------------------------------------------------------------
     render() {
         const id = this.el.id || this.guid;
-        return (hAsync(Host, { key: '6d4ac387ae1b4748050c82d8387edd30e6c0e662', id: id }, hAsync("div", { key: 'c6a4c67d99dd6e34198b2d128efb518e757277ce', "aria-label": this.label, class: { [CSS$1c.container]: true, [CSS$1c.selected]: this.selected }, role: "tabpanel" }, hAsync("slot", { key: '2ed94883d41dba5430a39933c6fe91bb25b12703' }))));
+        return (hAsync(Host, { key: '6d4ac387ae1b4748050c82d8387edd30e6c0e662', id: id }, hAsync("div", { key: 'c6a4c67d99dd6e34198b2d128efb518e757277ce', "aria-label": this.label, class: { [CSS$1d.container]: true, [CSS$1d.selected]: this.selected }, role: "tabpanel" }, hAsync("slot", { key: '2ed94883d41dba5430a39933c6fe91bb25b12703' }))));
     }
     get el() { return getElement(this); }
     static get style() { return CalciteCarouselItemStyle0; }
@@ -12843,7 +12844,7 @@ class CarouselItem {
     }; }
 }
 
-const CSS$1b = {
+const CSS$1c = {
     toggle: "toggle",
     check: "check-svg",
 };
@@ -12971,9 +12972,9 @@ class Checkbox {
     render() {
         const rtl = getElementDir(this.el) === "rtl";
         return (hAsync(Host, { key: '29feebf02ef9c71ea9e6dafe0f5ed11b0cb89848', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, hAsync(InteractiveContainer, { key: 'e89b0df0f5638181e233bce9c454e48c6963de19', disabled: this.disabled }, hAsync("div", { key: '25a91677124b2b77e6e30bf371afce3153c26761', "aria-checked": toAriaBoolean(this.checked), "aria-label": getLabelText(this), class: {
-                [CSS$1b.toggle]: true,
+                [CSS$1c.toggle]: true,
                 [CSS_UTILITY.rtl]: rtl,
-            }, onBlur: this.onToggleBlur, onFocus: this.onToggleFocus, ref: (toggleEl) => (this.toggleEl = toggleEl), role: "checkbox", tabIndex: this.disabled ? undefined : 0 }, hAsync("svg", { key: '1aae8a62a1f771e2d3e7fb731bae49e608f15617', "aria-hidden": "true", class: CSS$1b.check, viewBox: "0 0 16 16" }, hAsync("path", { key: '27ea5db7e99c8f82f5e7773b684f64e9d9a8101a', d: this.getPath() })), hAsync("slot", { key: 'c6ea3d961bc6b3b7018378b8044691b88d65f2d3' })), hAsync(HiddenFormInputSlot, { key: 'bf3c47ad291541078a94dd46205e912622e85411', component: this }))));
+            }, onBlur: this.onToggleBlur, onFocus: this.onToggleFocus, ref: (toggleEl) => (this.toggleEl = toggleEl), role: "checkbox", tabIndex: this.disabled ? undefined : 0 }, hAsync("svg", { key: '1aae8a62a1f771e2d3e7fb731bae49e608f15617', "aria-hidden": "true", class: CSS$1c.check, viewBox: "0 0 16 16" }, hAsync("path", { key: '27ea5db7e99c8f82f5e7773b684f64e9d9a8101a', d: this.getPath() })), hAsync("slot", { key: 'c6ea3d961bc6b3b7018378b8044691b88d65f2d3' })), hAsync(HiddenFormInputSlot, { key: 'bf3c47ad291541078a94dd46205e912622e85411', component: this }))));
     }
     get el() { return getElement(this); }
     static get style() { return CalciteCheckboxStyle0; }
@@ -13002,7 +13003,7 @@ class Checkbox {
     }; }
 }
 
-const CSS$1a = {
+const CSS$1b = {
     title: "title",
     close: "close",
     imageContainer: "image-container",
@@ -13196,7 +13197,7 @@ class Chip {
     //
     //--------------------------------------------------------------------------
     renderChipImage() {
-        return (hAsync("div", { class: CSS$1a.imageContainer }, hAsync("slot", { name: SLOTS$r.image, onSlotchange: this.handleSlotImageChange })));
+        return (hAsync("div", { class: CSS$1b.imageContainer }, hAsync("slot", { name: SLOTS$r.image, onSlotchange: this.handleSlotImageChange })));
     }
     renderSelectionIcon() {
         const icon = this.selectionMode === "multiple"
@@ -13207,15 +13208,15 @@ class Chip {
                 ? ICONS$f.checkedSingle
                 : undefined;
         return (hAsync("div", { class: {
-                [CSS$1a.selectIcon]: true,
-                [CSS$1a.selectIconActive]: this.selectionMode === "multiple" || this.selected,
+                [CSS$1b.selectIcon]: true,
+                [CSS$1b.selectIconActive]: this.selectionMode === "multiple" || this.selected,
             } }, icon ? hAsync("calcite-icon", { icon: icon, scale: getIconScale(this.scale) }) : null));
     }
     renderCloseButton() {
-        return (hAsync("button", { "aria-label": this.messages.dismissLabel, class: CSS$1a.close, onClick: this.close, onKeyDown: this.closeButtonKeyDownHandler, ref: (el) => (this.closeButtonEl = el), tabIndex: this.disabled ? -1 : 0 }, hAsync("calcite-icon", { icon: ICONS$f.close, scale: getIconScale(this.scale) })));
+        return (hAsync("button", { "aria-label": this.messages.dismissLabel, class: CSS$1b.close, onClick: this.close, onKeyDown: this.closeButtonKeyDownHandler, ref: (el) => (this.closeButtonEl = el), tabIndex: this.disabled ? -1 : 0 }, hAsync("calcite-icon", { icon: ICONS$f.close, scale: getIconScale(this.scale) })));
     }
     renderIcon() {
-        return (hAsync("calcite-icon", { class: CSS$1a.chipIcon, flipRtl: this.iconFlipRtl, icon: this.icon, scale: getIconScale(this.scale) }));
+        return (hAsync("calcite-icon", { class: CSS$1b.chipIcon, flipRtl: this.iconFlipRtl, icon: this.icon, scale: getIconScale(this.scale) }));
     }
     render() {
         const { disabled } = this;
@@ -13230,21 +13231,21 @@ class Chip {
         return (hAsync(Host, { key: '6d76da5a2ae7a51ceffa4d1ca67d2f610b900a1c' }, hAsync(InteractiveContainer, { key: 'fd0190d60cffb6d0f564a91f55b0e4f69663fb5b', disabled: disabled }, hAsync("div", { key: '825b342318201ee13735f9b6e830f26b0fb4e137', "aria-checked": this.selectionMode !== "none" && this.interactive
                 ? toAriaBoolean(this.selected)
                 : undefined, "aria-disabled": disableInteraction ? toAriaBoolean(disabled) : undefined, "aria-label": this.label, class: {
-                [CSS$1a.container]: true,
-                [CSS$1a.textSlotted]: this.hasText,
-                [CSS$1a.imageSlotted]: this.hasImage,
-                [CSS$1a.selectable]: this.selectionMode !== "none",
-                [CSS$1a.multiple]: this.selectionMode === "multiple",
-                [CSS$1a.single]: this.selectionMode === "single" || this.selectionMode === "single-persist",
-                [CSS$1a.selected]: this.selected,
-                [CSS$1a.closable]: this.closable,
-                [CSS$1a.nonInteractive]: !this.interactive,
-                [CSS$1a.isCircle]: !this.closable &&
+                [CSS$1b.container]: true,
+                [CSS$1b.textSlotted]: this.hasText,
+                [CSS$1b.imageSlotted]: this.hasImage,
+                [CSS$1b.selectable]: this.selectionMode !== "none",
+                [CSS$1b.multiple]: this.selectionMode === "multiple",
+                [CSS$1b.single]: this.selectionMode === "single" || this.selectionMode === "single-persist",
+                [CSS$1b.selected]: this.selected,
+                [CSS$1b.closable]: this.closable,
+                [CSS$1b.nonInteractive]: !this.interactive,
+                [CSS$1b.isCircle]: !this.closable &&
                     !this.hasText &&
                     (!this.icon || !this.hasImage) &&
                     (this.selectionMode === "none" ||
                         (!!this.selectionMode && this.selectionMode !== "multiple" && !this.selected)),
-            }, onClick: this.handleEmittingEvent, ref: (el) => (this.containerEl = el), role: role, tabIndex: disableInteraction ? -1 : 0 }, this.selectionMode !== "none" && this.renderSelectionIcon(), this.renderChipImage(), this.icon && this.renderIcon(), hAsync("span", { key: '0b3d668d66e359ecc3690ad87033e7e49a9250ef', class: CSS$1a.title }, hAsync("slot", { key: 'ff1af06039b94df6108f5e371e23ad9debfd388e', onSlotchange: this.handleDefaultSlotChange })), this.closable && this.renderCloseButton()))));
+            }, onClick: this.handleEmittingEvent, ref: (el) => (this.containerEl = el), role: role, tabIndex: disableInteraction ? -1 : 0 }, this.selectionMode !== "none" && this.renderSelectionIcon(), this.renderChipImage(), this.icon && this.renderIcon(), hAsync("span", { key: '0b3d668d66e359ecc3690ad87033e7e49a9250ef', class: CSS$1b.title }, hAsync("slot", { key: 'ff1af06039b94df6108f5e371e23ad9debfd388e', onSlotchange: this.handleDefaultSlotChange })), this.closable && this.renderCloseButton()))));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
@@ -13774,7 +13775,7 @@ class ColorPicker {
             const { channelMode: activeChannelMode, messages } = this;
             const selected = channelMode === activeChannelMode;
             const label = channelMode === "rgb" ? messages.rgb : messages.hsv;
-            return (hAsync("calcite-tab-title", { class: CSS$1n.colorMode, "data-color-mode": channelMode, key: channelMode, onCalciteTabsActivate: this.handleTabActivate, selected: selected }, label));
+            return (hAsync("calcite-tab-title", { class: CSS$1o.colorMode, "data-color-mode": channelMode, key: channelMode, onCalciteTabsActivate: this.handleTabActivate, selected: selected }, label));
         };
         this.renderChannelsTab = (channelMode) => {
             const { isClearable, channelMode: activeChannelMode, channels, messages, alphaChannel } = this;
@@ -13785,7 +13786,7 @@ class ColorPicker {
                 : [messages.hue, messages.saturation, messages.value];
             const direction = getElementDir(this.el);
             const channelsToRender = alphaChannel ? channels : channels.slice(0, 3);
-            return (hAsync("calcite-tab", { class: CSS$1n.control, key: channelMode, selected: selected }, hAsync("div", { class: CSS$1n.channels, dir: "ltr" }, channelsToRender.map((channelValue, index) => {
+            return (hAsync("calcite-tab", { class: CSS$1o.control, key: channelMode, selected: selected }, hAsync("div", { class: CSS$1o.channels, dir: "ltr" }, channelsToRender.map((channelValue, index) => {
                 const isAlphaChannel = index === 3;
                 if (isAlphaChannel) {
                     channelValue =
@@ -13796,7 +13797,7 @@ class ColorPicker {
             }))));
         };
         this.renderChannel = (value, index, ariaLabel, direction, suffix) => {
-            return (hAsync("calcite-input-number", { class: CSS$1n.channel, "data-channel-index": index, dir: direction, key: index, label: ariaLabel, lang: this.effectiveLocale, numberButtonType: "none", numberingSystem: this.numberingSystem, onCalciteInputNumberChange: this.handleChannelChange, onCalciteInputNumberInput: this.handleChannelInput, onCalciteInternalInputNumberBlur: this.handleChannelBlur, onCalciteInternalInputNumberFocus: this.handleChannelFocus, onKeyDown: this.handleKeyDown, scale: this.scale === "l" ? "m" : "s",
+            return (hAsync("calcite-input-number", { class: CSS$1o.channel, "data-channel-index": index, dir: direction, key: index, label: ariaLabel, lang: this.effectiveLocale, numberButtonType: "none", numberingSystem: this.numberingSystem, onCalciteInputNumberChange: this.handleChannelChange, onCalciteInputNumberInput: this.handleChannelInput, onCalciteInternalInputNumberBlur: this.handleChannelBlur, onCalciteInternalInputNumberFocus: this.handleChannelFocus, onKeyDown: this.handleKeyDown, scale: this.scale === "l" ? "m" : "s",
                 // workaround to ensure input borders overlap as desired
                 // this is because the build transforms margin-left to its
                 // logical-prop, which is undesired as channels are always ltr
@@ -13994,7 +13995,7 @@ class ColorPicker {
         this.shiftKeyChannelAdjustment = 0;
         const { key } = event;
         if ((key !== "ArrowUp" && key !== "ArrowDown") ||
-            !event.composedPath().some((node) => node.classList?.contains(CSS$1n.channel))) {
+            !event.composedPath().some((node) => node.classList?.contains(CSS$1o.channel))) {
             return;
         }
         const { shiftKey } = event;
@@ -14105,23 +14106,23 @@ class ColorPicker {
         const [adjustedColorFieldScopeLeft, adjustedColorFieldScopeTop] = this.getAdjustedScopePosition(colorFieldScopeLeft, colorFieldScopeTop);
         const [adjustedHueScopeLeft, adjustedHueScopeTop] = this.getAdjustedScopePosition(hueLeft, hueTop);
         const [adjustedOpacityScopeLeft, adjustedOpacityScopeTop] = this.getAdjustedScopePosition(opacityLeft, opacityTop);
-        return (hAsync(InteractiveContainer, { key: '3fdda1fd2366d3ffb3405dfa28a8424d78586a61', disabled: this.disabled }, hAsync("div", { key: 'b3e95f63a7b4a9f49587fa458bf663cf82ff6961', class: CSS$1n.container }, hAsync("div", { key: '5770ab5094e87956f0f8a49e16f1a9418cc6e7ff', class: CSS$1n.controlAndScope }, hAsync("canvas", { key: '3773e30ddb17777a93b6091e4accc71e890f8cbb', class: CSS$1n.colorField, onPointerDown: this.handleColorFieldPointerDown, ref: this.initColorField }), hAsync("div", { key: '66dfba03f7a7e35f50c1fc0f23ccb0c0cf91c247', "aria-label": vertical ? messages.value : messages.saturation, "aria-valuemax": vertical ? HSV_LIMITS.v : HSV_LIMITS.s, "aria-valuemin": "0", "aria-valuenow": (vertical ? color?.saturationv() : color?.value()) || "0", class: { [CSS$1n.scope]: true, [CSS$1n.colorFieldScope]: true }, onKeyDown: this.handleColorFieldScopeKeyDown, ref: this.storeColorFieldScope, role: "slider", style: {
+        return (hAsync(InteractiveContainer, { key: '3fdda1fd2366d3ffb3405dfa28a8424d78586a61', disabled: this.disabled }, hAsync("div", { key: 'b3e95f63a7b4a9f49587fa458bf663cf82ff6961', class: CSS$1o.container }, hAsync("div", { key: '5770ab5094e87956f0f8a49e16f1a9418cc6e7ff', class: CSS$1o.controlAndScope }, hAsync("canvas", { key: '3773e30ddb17777a93b6091e4accc71e890f8cbb', class: CSS$1o.colorField, onPointerDown: this.handleColorFieldPointerDown, ref: this.initColorField }), hAsync("div", { key: '66dfba03f7a7e35f50c1fc0f23ccb0c0cf91c247', "aria-label": vertical ? messages.value : messages.saturation, "aria-valuemax": vertical ? HSV_LIMITS.v : HSV_LIMITS.s, "aria-valuemin": "0", "aria-valuenow": (vertical ? color?.saturationv() : color?.value()) || "0", class: { [CSS$1o.scope]: true, [CSS$1o.colorFieldScope]: true }, onKeyDown: this.handleColorFieldScopeKeyDown, ref: this.storeColorFieldScope, role: "slider", style: {
                 top: `${adjustedColorFieldScopeTop || 0}px`,
                 left: `${adjustedColorFieldScopeLeft || 0}px`,
-            }, tabindex: "0" })), hAsync("div", { key: '61100b2e5e07a647b75641afe11e7dcfb6df3dd1', class: CSS$1n.previewAndSliders }, hAsync("calcite-color-picker-swatch", { key: '3fd47b8fb737f322646f136a22ec5281c12dcdcb', class: CSS$1n.preview, color: selectedColorInHex, scale: this.alphaChannel ? "l" : this.scale }), hAsync("div", { key: 'df7ed65ad05057a4a8c81239f1dc2f3341ea18fb', class: CSS$1n.sliders }, hAsync("div", { key: '5bc288a2e4da751f6e4a1b3a1b0b1294c6421306', class: CSS$1n.controlAndScope }, hAsync("canvas", { key: 'b350822aefb25ca6521d21a376c59885666798c5', class: { [CSS$1n.slider]: true, [CSS$1n.hueSlider]: true }, onPointerDown: this.handleHueSliderPointerDown, ref: this.initHueSlider }), hAsync("div", { key: '5ba9570cb05da8620030918757acd21b57c844eb', "aria-label": messages.hue, "aria-valuemax": HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": color?.round().hue() || DEFAULT_COLOR$1.round().hue(), class: { [CSS$1n.scope]: true, [CSS$1n.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, ref: this.storeHueScope, role: "slider", style: {
+            }, tabindex: "0" })), hAsync("div", { key: '61100b2e5e07a647b75641afe11e7dcfb6df3dd1', class: CSS$1o.previewAndSliders }, hAsync("calcite-color-picker-swatch", { key: '3fd47b8fb737f322646f136a22ec5281c12dcdcb', class: CSS$1o.preview, color: selectedColorInHex, scale: this.alphaChannel ? "l" : this.scale }), hAsync("div", { key: 'df7ed65ad05057a4a8c81239f1dc2f3341ea18fb', class: CSS$1o.sliders }, hAsync("div", { key: '5bc288a2e4da751f6e4a1b3a1b0b1294c6421306', class: CSS$1o.controlAndScope }, hAsync("canvas", { key: 'b350822aefb25ca6521d21a376c59885666798c5', class: { [CSS$1o.slider]: true, [CSS$1o.hueSlider]: true }, onPointerDown: this.handleHueSliderPointerDown, ref: this.initHueSlider }), hAsync("div", { key: '5ba9570cb05da8620030918757acd21b57c844eb', "aria-label": messages.hue, "aria-valuemax": HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": color?.round().hue() || DEFAULT_COLOR$1.round().hue(), class: { [CSS$1o.scope]: true, [CSS$1o.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, ref: this.storeHueScope, role: "slider", style: {
                 top: `${adjustedHueScopeTop}px`,
                 left: `${adjustedHueScopeLeft}px`,
-            }, tabindex: "0" })), alphaChannel ? (hAsync("div", { class: CSS$1n.controlAndScope }, hAsync("canvas", { class: { [CSS$1n.slider]: true, [CSS$1n.opacitySlider]: true }, onPointerDown: this.handleOpacitySliderPointerDown, ref: this.initOpacitySlider }), hAsync("div", { "aria-label": messages.opacity, "aria-valuemax": OPACITY_LIMITS.max, "aria-valuemin": OPACITY_LIMITS.min, "aria-valuenow": (color || DEFAULT_COLOR$1).round().alpha(), class: { [CSS$1n.scope]: true, [CSS$1n.opacityScope]: true }, onKeyDown: this.handleOpacityScopeKeyDown, ref: this.storeOpacityScope, role: "slider", style: {
+            }, tabindex: "0" })), alphaChannel ? (hAsync("div", { class: CSS$1o.controlAndScope }, hAsync("canvas", { class: { [CSS$1o.slider]: true, [CSS$1o.opacitySlider]: true }, onPointerDown: this.handleOpacitySliderPointerDown, ref: this.initOpacitySlider }), hAsync("div", { "aria-label": messages.opacity, "aria-valuemax": OPACITY_LIMITS.max, "aria-valuemin": OPACITY_LIMITS.min, "aria-valuenow": (color || DEFAULT_COLOR$1).round().alpha(), class: { [CSS$1o.scope]: true, [CSS$1o.opacityScope]: true }, onKeyDown: this.handleOpacityScopeKeyDown, ref: this.storeOpacityScope, role: "slider", style: {
                 top: `${adjustedOpacityScopeTop}px`,
                 left: `${adjustedOpacityScopeLeft}px`,
             }, tabindex: "0" }))) : null)), noHex && noChannels ? null : (hAsync("div", { class: {
-                [CSS$1n.controlSection]: true,
-                [CSS$1n.section]: true,
-            } }, hAsync("div", { class: CSS$1n.hexAndChannelsGroup }, noHex ? null : (hAsync("div", { class: CSS$1n.hexOptions }, hAsync("calcite-color-picker-hex-input", { allowEmpty: this.isClearable, alphaChannel: alphaChannel, class: CSS$1n.control, messages: messages, numberingSystem: this.numberingSystem, onCalciteColorPickerHexInputChange: this.handleHexInputChange, scale: scale, value: selectedColorInHex }))), noChannels ? null : (hAsync("calcite-tabs", { class: {
-                [CSS$1n.colorModeContainer]: true,
-                [CSS$1n.splitSection]: true,
-            }, scale: scale === "l" ? "m" : "s" }, hAsync("calcite-tab-nav", { slot: "title-group" }, this.renderChannelsTabTitle("rgb"), this.renderChannelsTabTitle("hsv")), this.renderChannelsTab("rgb"), this.renderChannelsTab("hsv")))))), noSaved ? null : (hAsync("div", { class: { [CSS$1n.savedColorsSection]: true, [CSS$1n.section]: true } }, hAsync("div", { class: CSS$1n.header }, hAsync("label", null, messages.saved), hAsync("div", { class: CSS$1n.savedColorsButtons }, hAsync("calcite-button", { appearance: "transparent", class: CSS$1n.deleteColor, disabled: noColor, iconStart: "minus", kind: "neutral", label: messages.deleteColor, onClick: this.deleteColor, scale: scale, type: "button" }), hAsync("calcite-button", { appearance: "transparent", class: CSS$1n.saveColor, disabled: noColor, iconStart: "plus", kind: "neutral", label: messages.saveColor, onClick: this.saveColor, scale: scale, type: "button" }))), savedColors.length > 0 ? (hAsync("div", { class: CSS$1n.savedColors }, [
-            ...savedColors.map((color) => (hAsync("calcite-color-picker-swatch", { class: CSS$1n.savedColor, color: color, key: color, onClick: this.handleSavedColorSelect, onKeyDown: this.handleSavedColorKeyDown, scale: scale, tabIndex: 0 }))),
+                [CSS$1o.controlSection]: true,
+                [CSS$1o.section]: true,
+            } }, hAsync("div", { class: CSS$1o.hexAndChannelsGroup }, noHex ? null : (hAsync("div", { class: CSS$1o.hexOptions }, hAsync("calcite-color-picker-hex-input", { allowEmpty: this.isClearable, alphaChannel: alphaChannel, class: CSS$1o.control, messages: messages, numberingSystem: this.numberingSystem, onCalciteColorPickerHexInputChange: this.handleHexInputChange, scale: scale, value: selectedColorInHex }))), noChannels ? null : (hAsync("calcite-tabs", { class: {
+                [CSS$1o.colorModeContainer]: true,
+                [CSS$1o.splitSection]: true,
+            }, scale: scale === "l" ? "m" : "s" }, hAsync("calcite-tab-nav", { slot: "title-group" }, this.renderChannelsTabTitle("rgb"), this.renderChannelsTabTitle("hsv")), this.renderChannelsTab("rgb"), this.renderChannelsTab("hsv")))))), noSaved ? null : (hAsync("div", { class: { [CSS$1o.savedColorsSection]: true, [CSS$1o.section]: true } }, hAsync("div", { class: CSS$1o.header }, hAsync("label", null, messages.saved), hAsync("div", { class: CSS$1o.savedColorsButtons }, hAsync("calcite-button", { appearance: "transparent", class: CSS$1o.deleteColor, disabled: noColor, iconStart: "minus", kind: "neutral", label: messages.deleteColor, onClick: this.deleteColor, scale: scale, type: "button" }), hAsync("calcite-button", { appearance: "transparent", class: CSS$1o.saveColor, disabled: noColor, iconStart: "plus", kind: "neutral", label: messages.saveColor, onClick: this.saveColor, scale: scale, type: "button" }))), savedColors.length > 0 ? (hAsync("div", { class: CSS$1o.savedColors }, [
+            ...savedColors.map((color) => (hAsync("calcite-color-picker-swatch", { class: CSS$1o.savedColor, color: color, key: color, onClick: this.handleSavedColorSelect, onKeyDown: this.handleSavedColorKeyDown, scale: scale, tabIndex: 0 }))),
         ])) : null)))));
     }
     // --------------------------------------------------------------------------
@@ -14507,7 +14508,7 @@ class ColorPicker {
     }; }
 }
 
-const CSS$19 = {
+const CSS$1a = {
     container: "container",
     hexInput: "hex-input",
     opacityInput: "opacity-input",
@@ -14695,7 +14696,7 @@ class ColorPickerHexInput {
         const hexInputValue = this.formatHexForInternalInput(value);
         const opacityInputValue = this.formatOpacityForInternalInput(internalColor);
         const inputScale = scale === "l" ? "m" : "s";
-        return (hAsync("div", { key: '7f3098ef31cae459bb4816fbea34cc74c174ec87', class: CSS$19.container }, hAsync("calcite-input-text", { key: '66b3c778e3340ac4f9b91c4198b964c26c6a7347', class: CSS$19.hexInput, label: messages?.hex || hexLabel, maxLength: this.alphaChannel ? 8 : 6, onCalciteInputTextChange: this.onHexInputChange, onCalciteInputTextInput: this.onHexInputInput, onCalciteInternalInputTextBlur: this.onHexInputBlur, onCalciteInternalInputTextFocus: this.onInputFocus, onKeyDown: this.onInputKeyDown, onPaste: this.onHexInputPaste, prefixText: "#", ref: this.storeHexInputRef, scale: inputScale, value: hexInputValue }), alphaChannel ? (hAsync("calcite-input-number", { class: CSS$19.opacityInput, key: "opacity-input", label: messages?.opacity, max: OPACITY_LIMITS.max, maxLength: 3, min: OPACITY_LIMITS.min, numberButtonType: "none", numberingSystem: this.numberingSystem, onCalciteInputNumberInput: this.onOpacityInputInput, onCalciteInternalInputNumberBlur: this.onOpacityInputBlur, onCalciteInternalInputNumberFocus: this.onInputFocus, onKeyDown: this.onInputKeyDown, ref: this.storeOpacityInputRef, scale: inputScale, suffixText: "%", value: opacityInputValue })) : null));
+        return (hAsync("div", { key: '7f3098ef31cae459bb4816fbea34cc74c174ec87', class: CSS$1a.container }, hAsync("calcite-input-text", { key: '66b3c778e3340ac4f9b91c4198b964c26c6a7347', class: CSS$1a.hexInput, label: messages?.hex || hexLabel, maxLength: this.alphaChannel ? 8 : 6, onCalciteInputTextChange: this.onHexInputChange, onCalciteInputTextInput: this.onHexInputInput, onCalciteInternalInputTextBlur: this.onHexInputBlur, onCalciteInternalInputTextFocus: this.onInputFocus, onKeyDown: this.onInputKeyDown, onPaste: this.onHexInputPaste, prefixText: "#", ref: this.storeHexInputRef, scale: inputScale, value: hexInputValue }), alphaChannel ? (hAsync("calcite-input-number", { class: CSS$1a.opacityInput, key: "opacity-input", label: messages?.opacity, max: OPACITY_LIMITS.max, maxLength: 3, min: OPACITY_LIMITS.min, numberButtonType: "none", numberingSystem: this.numberingSystem, onCalciteInputNumberInput: this.onOpacityInputInput, onCalciteInternalInputNumberBlur: this.onOpacityInputBlur, onCalciteInternalInputNumberFocus: this.onInputFocus, onKeyDown: this.onInputKeyDown, ref: this.storeOpacityInputRef, scale: inputScale, suffixText: "%", value: opacityInputValue })) : null));
     }
     //--------------------------------------------------------------------------
     //
@@ -14789,7 +14790,7 @@ class ColorPickerHexInput {
     }; }
 }
 
-const CSS$18 = {
+const CSS$19 = {
     swatch: "swatch",
     noColorSwatch: "swatch--no-color",
     checker: "checker",
@@ -14828,8 +14829,8 @@ class ColorPickerSwatch {
     render() {
         const isEmpty = !this.internalColor;
         const classes = {
-            [CSS$18.swatch]: true,
-            [CSS$18.noColorSwatch]: isEmpty,
+            [CSS$19.swatch]: true,
+            [CSS$19.noColorSwatch]: isEmpty,
         };
         return (hAsync("svg", { key: 'b29377be8ce0518f7b0f3691dcb1dda08890dd94', class: classes, xmlns: "http://www.w3.org/2000/svg" }, this.renderSwatch()));
     }
@@ -14855,7 +14856,7 @@ class ColorPickerSwatch {
         const alpha = internalColor.alpha();
         const hex = hexify(internalColor);
         const hexa = hexify(internalColor, alpha < 1);
-        return (hAsync(Fragment, null, hAsync("title", null, hexa), hAsync("defs", null, hAsync("pattern", { height: CHECKER_DIMENSIONS.size, id: "checker", patternUnits: "userSpaceOnUse", width: CHECKER_DIMENSIONS.size, x: "0", y: "0" }, hAsync("rect", { class: CSS$18.checker, height: CHECKER_DIMENSIONS.squareSize, width: CHECKER_DIMENSIONS.squareSize, x: "0", y: "0" }), hAsync("rect", { class: CSS$18.checker, height: CHECKER_DIMENSIONS.squareSize, width: CHECKER_DIMENSIONS.squareSize, x: CHECKER_DIMENSIONS.squareSize, y: CHECKER_DIMENSIONS.squareSize }))), hAsync("rect", { fill: "url(#checker)", height: "100%", rx: borderRadius, width: "100%" }), hAsync("rect", { fill: hex, style: {
+        return (hAsync(Fragment, null, hAsync("title", null, hexa), hAsync("defs", null, hAsync("pattern", { height: CHECKER_DIMENSIONS.size, id: "checker", patternUnits: "userSpaceOnUse", width: CHECKER_DIMENSIONS.size, x: "0", y: "0" }, hAsync("rect", { class: CSS$19.checker, height: CHECKER_DIMENSIONS.squareSize, width: CHECKER_DIMENSIONS.squareSize, x: "0", y: "0" }), hAsync("rect", { class: CSS$19.checker, height: CHECKER_DIMENSIONS.squareSize, width: CHECKER_DIMENSIONS.squareSize, x: CHECKER_DIMENSIONS.squareSize, y: CHECKER_DIMENSIONS.squareSize }))), hAsync("rect", { fill: "url(#checker)", height: "100%", rx: borderRadius, width: "100%" }), hAsync("rect", { fill: hex, style: {
                 "clip-path": alpha < 1 ? "polygon(100% 0, 0 0, 0 100%)" : `inset(0 round ${borderRadius})`,
             }, ...commonSwatchProps }), alpha < 1 ? (hAsync("rect", { fill: hexa, key: "opacity-fill", style: { "clip-path": "polygon(100% 0, 100% 100%, 0 100%)" }, ...commonSwatchProps })) : null));
     }
@@ -14880,7 +14881,7 @@ class ColorPickerSwatch {
 
 /**
  * Do not edit directly
- * Generated on Wed, 31 Jul 2024 02:01:29 GMT
+ * Generated on Thu, 01 Aug 2024 22:25:57 GMT
  */
 const calciteSize24 = "24px";
 const calciteSize32 = "32px";
@@ -17048,24 +17049,24 @@ const visiblePointerSize = 4;
  */
 const defaultOffsetDistance = Math.ceil(Math.hypot(visiblePointerSize, visiblePointerSize));
 
-const CSS$17 = {
+const CSS$18 = {
     button: "x-button",
 };
 function XButton({ disabled, key, label, onClick, ref, scale, }) {
-    return (hAsync("button", { "aria-label": label, class: CSS$17.button, disabled: disabled, key: key, onClick: onClick, ref: ref, tabIndex: -1, type: "button" },
+    return (hAsync("button", { "aria-label": label, class: CSS$18.button, disabled: disabled, key: key, onClick: onClick, ref: ref, tabIndex: -1, type: "button" },
         hAsync("calcite-icon", { icon: "x", scale: getIconScale(scale) })));
 }
 
-const CSS$16 = {
+const CSS$17 = {
     validationContainer: "validation-container",
 };
-const Validation = ({ scale, status, icon, message, }) => (hAsync("div", { class: CSS$16.validationContainer },
+const Validation = ({ scale, status, icon, message, }) => (hAsync("div", { class: CSS$17.validationContainer },
     hAsync("calcite-input-message", { icon: icon, scale: scale, status: status }, message)));
 
 const ComboboxItem$1 = "CALCITE-COMBOBOX-ITEM";
 const ComboboxItemGroup$1 = "CALCITE-COMBOBOX-ITEM-GROUP";
 const ComboboxChildSelector = `${ComboboxItem$1}, ${ComboboxItemGroup$1}`;
-const CSS$15 = {
+const CSS$16 = {
     input: "input",
     chipInvisible: "chip--invisible",
     selectionDisplayFit: "selection-display-fit",
@@ -17101,10 +17102,10 @@ function getLabel(item) {
     return item.shortHeading || item.textLabel;
 }
 
-const comboboxCss = "/*!@:host([disabled])*/[disabled].sc-calcite-combobox-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-combobox-h *.sc-calcite-combobox,.sc-calcite-combobox-h[disabled].sc-calcite-combobox-s>*,.sc-calcite-combobox-h[disabled] .sc-calcite-combobox-s>*{pointer-events:none}/*!@:host*/.sc-calcite-combobox-h{position:relative;display:block}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-combobox-h[disabled] .sc-calcite-combobox-s>[calcite-hydrated][disabled],[disabled].sc-calcite-combobox-h [calcite-hydrated][disabled].sc-calcite-combobox{opacity:1}/*!@.interaction-container*/.interaction-container.sc-calcite-combobox{display:contents}/*!@:host([scale=s]) .x-button*/[scale=s].sc-calcite-combobox-h .x-button.sc-calcite-combobox{inline-size:1rem;block-size:1rem}/*!@:host([scale=m]) .x-button*/[scale=m].sc-calcite-combobox-h .x-button.sc-calcite-combobox{inline-size:1.5rem;block-size:1.5rem}/*!@:host([scale=l]) .x-button*/[scale=l].sc-calcite-combobox-h .x-button.sc-calcite-combobox{inline-size:2rem;block-size:2rem}/*!@.x-button*/.x-button.sc-calcite-combobox{margin:0px;display:flex;cursor:pointer;appearance:none;align-content:center;align-items:center;justify-content:center;align-self:center;border-width:2px;background-color:transparent;color:var(--calcite-color-text-3);outline-color:transparent;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-radius:50%;border-color:transparent;background-color:var(--calcite-color-foreground-2)}/*!@.x-button:active, .x-button:hover*/.x-button.sc-calcite-combobox:active,.x-button.sc-calcite-combobox:hover{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-3)}/*!@.x-button:active*/.x-button.sc-calcite-combobox:active{border-style:solid;border-color:var(--calcite-color-brand)}/*!@.x-button calcite-icon*/.x-button.sc-calcite-combobox calcite-icon.sc-calcite-combobox{color:inherit}/*!@:host([scale=s])*/[scale=s].sc-calcite-combobox-h{font-size:var(--calcite-font-size--2);--calcite-combobox-item-spacing-unit-l:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-input-height:1rem;--calcite-internal-combobox-input-margin-block:calc(0.25rem - 1px)}/*!@:host([scale=s]) .x-button*/[scale=s].sc-calcite-combobox-h .x-button.sc-calcite-combobox{margin-inline:0.5rem}/*!@:host([scale=m])*/[scale=m].sc-calcite-combobox-h{font-size:var(--calcite-font-size--1);--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.5rem;--calcite-combobox-input-height:1rem;--calcite-internal-combobox-input-margin-block:calc(0.5rem - 1px)}/*!@:host([scale=m]) .x-button*/[scale=m].sc-calcite-combobox-h .x-button.sc-calcite-combobox{margin-inline-end:0.75rem}/*!@:host([scale=l])*/[scale=l].sc-calcite-combobox-h{font-size:var(--calcite-font-size-0);--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.75rem;--calcite-combobox-input-height:1.5rem;--calcite-internal-combobox-input-margin-block:calc(0.625rem - 1px)}/*!@:host([scale=l]) .x-button*/[scale=l].sc-calcite-combobox-h .x-button.sc-calcite-combobox{margin-inline-end:1rem}/*!@.wrapper*/.wrapper.sc-calcite-combobox{display:flex;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-1);outline-color:transparent;padding-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);padding-inline:var(--calcite-combobox-item-spacing-unit-l)}/*!@.wrapper:hover .icon*/.wrapper.sc-calcite-combobox:hover .icon.sc-calcite-combobox{color:var(--calcite-color-text-1)}/*!@:host(:focus-within) .wrapper,\n.wrapper--active*/.sc-calcite-combobox-h:focus-within .wrapper.sc-calcite-combobox,.wrapper--active.sc-calcite-combobox{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}/*!@:host([read-only]) .wrapper*/[read-only].sc-calcite-combobox-h .wrapper.sc-calcite-combobox{background-color:var(--calcite-color-background)}/*!@:host([read-only]) .label*/[read-only].sc-calcite-combobox-h .label.sc-calcite-combobox{font-weight:var(--calcite-font-weight-medium)}/*!@:host([status=invalid]) .wrapper*/[status=invalid].sc-calcite-combobox-h .wrapper.sc-calcite-combobox{border-color:var(--calcite-color-status-danger)}/*!@:host([status=invalid]:focus-within) .wrapper*/[status=invalid].sc-calcite-combobox-h:focus-within .wrapper.sc-calcite-combobox{outline:2px solid var(--calcite-color-status-danger);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}/*!@.wrapper--single*/.wrapper--single.sc-calcite-combobox{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l);cursor:pointer;flex-wrap:nowrap}/*!@.grid-input*/.grid-input.sc-calcite-combobox{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px;gap:var(--calcite-combobox-item-spacing-unit-s);margin-inline-end:var(--calcite-combobox-item-spacing-unit-s)}/*!@.grid-input.selection-display-fit, .grid-input.selection-display-single*/.grid-input.selection-display-fit.sc-calcite-combobox,.grid-input.selection-display-single.sc-calcite-combobox{flex-wrap:nowrap;overflow:hidden}/*!@.input*/.input.sc-calcite-combobox{flex-grow:1;appearance:none;overflow:hidden;text-overflow:ellipsis;border-style:none;background-color:transparent;padding:0px;font-family:inherit;color:var(--calcite-color-text-1);font-size:inherit;block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height);inline-size:100%;margin-block-end:var(--calcite-combobox-item-spacing-unit-s);min-inline-size:4.8125rem}/*!@.input:focus*/.input.sc-calcite-combobox:focus{outline:2px solid transparent;outline-offset:2px}/*!@.input:placeholder-shown*/.input.sc-calcite-combobox:placeholder-shown{text-overflow:ellipsis}/*!@.input--single*/.input--single.sc-calcite-combobox{padding:0px;margin-block:var(--calcite-internal-combobox-input-margin-block)}/*!@.wrapper--active .input-single*/.wrapper--active.sc-calcite-combobox .input-single.sc-calcite-combobox{cursor:text}/*!@.input--hidden*/.input--hidden.sc-calcite-combobox{pointer-events:none;inline-size:0px;min-inline-size:0px;opacity:0}/*!@.input--icon*/.input--icon.sc-calcite-combobox{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l)}/*!@.input-wrap*/.input-wrap.sc-calcite-combobox{display:flex;flex-grow:1;align-items:center}/*!@.input-wrap--single*/.input-wrap--single.sc-calcite-combobox{flex:1 1 0%;overflow:hidden}/*!@.label*/.label.sc-calcite-combobox{pointer-events:none;max-inline-size:100%;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px;font-weight:var(--calcite-font-weight-normal);block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height)}/*!@.label--icon*/.label--icon.sc-calcite-combobox{padding-inline:var(--calcite-combobox-item-spacing-unit-l)}/*!@.icon-end,\n.icon-start*/.icon-end.sc-calcite-combobox,.icon-start.sc-calcite-combobox{display:flex;cursor:pointer;align-items:center}/*!@.icon-end*/.icon-end.sc-calcite-combobox{flex:none}/*!@.icon-end .icon*/.icon-end.sc-calcite-combobox .icon.sc-calcite-combobox{color:var(--calcite-color-text-3)}/*!@.floating-ui-container*/.floating-ui-container.sc-calcite-combobox{--calcite-floating-ui-z-index:var(--calcite-z-index-dropdown);display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index);visibility:hidden}/*!@.floating-ui-container .calcite-floating-ui-anim*/.floating-ui-container.sc-calcite-combobox .calcite-floating-ui-anim.sc-calcite-combobox{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-z-index);border-radius:0.25rem}/*!@.floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim*/.floating-ui-container[data-placement^=bottom].sc-calcite-combobox .calcite-floating-ui-anim.sc-calcite-combobox{transform:translateY(-5px)}/*!@.floating-ui-container[data-placement^=top] .calcite-floating-ui-anim*/.floating-ui-container[data-placement^=top].sc-calcite-combobox .calcite-floating-ui-anim.sc-calcite-combobox{transform:translateY(5px)}/*!@.floating-ui-container[data-placement^=left] .calcite-floating-ui-anim*/.floating-ui-container[data-placement^=left].sc-calcite-combobox .calcite-floating-ui-anim.sc-calcite-combobox{transform:translateX(5px)}/*!@.floating-ui-container[data-placement^=right] .calcite-floating-ui-anim*/.floating-ui-container[data-placement^=right].sc-calcite-combobox .calcite-floating-ui-anim.sc-calcite-combobox{transform:translateX(-5px)}/*!@.floating-ui-container[data-placement] .calcite-floating-ui-anim--active*/.floating-ui-container[data-placement].sc-calcite-combobox .calcite-floating-ui-anim--active.sc-calcite-combobox{opacity:1;transform:translate(0)}/*!@.floating-ui-container--active*/.floating-ui-container--active.sc-calcite-combobox{visibility:visible}@media (forced-colors: active){/*!@.wrapper,\n  .floating-ui-container--active*/.wrapper.sc-calcite-combobox,.floating-ui-container--active.sc-calcite-combobox{border:1px solid canvasText}}/*!@.screen-readers-only*/.screen-readers-only.sc-calcite-combobox{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}/*!@.list-container*/.list-container.sc-calcite-combobox{max-block-size:45vh;overflow-y:auto;background-color:var(--calcite-color-foreground-1);inline-size:var(--calcite-dropdown-width)}/*!@.list*/.list.sc-calcite-combobox{margin:0px;display:block;padding:0px}/*!@.list--hide*/.list--hide.sc-calcite-combobox{block-size:0px;overflow:hidden}/*!@calcite-chip*/calcite-chip.sc-calcite-combobox{--calcite-animation-timing:0}/*!@.chip*/.chip.sc-calcite-combobox{margin-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);max-inline-size:100%}/*!@.chip--active*/.chip--active.sc-calcite-combobox{background-color:var(--calcite-color-foreground-3)}/*!@.chip--invisible*/.chip--invisible.sc-calcite-combobox{visibility:hidden;position:absolute}/*!@.item*/.item.sc-calcite-combobox{display:block}/*!@.validation-container*/.validation-container.sc-calcite-combobox{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}/*!@:host([scale=m]) .validation-container,\n:host([scale=l]) .validation-container*/[scale=m].sc-calcite-combobox-h .validation-container.sc-calcite-combobox,[scale=l].sc-calcite-combobox-h .validation-container.sc-calcite-combobox{padding-block-start:0.5rem}/*!@:host([scale=s]) .validation-container*/[scale=s].sc-calcite-combobox-h .validation-container.sc-calcite-combobox{padding-block-start:0.25rem}/*!@::slotted(input[slot=hidden-form-input])*/.sc-calcite-combobox-s>input[slot=hidden-form-input]{margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}/*!@:host([hidden])*/[hidden].sc-calcite-combobox-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-combobox{display:none}/*!@::slotted(calcite-combobox-item-group:not(:first-child))*/.sc-calcite-combobox-s>calcite-combobox-item-group:not(:first-child){padding-block-start:var(--calcite-combobox-item-spacing-unit-l)}";
+const comboboxCss = "/*!@:host([disabled])*/[disabled].sc-calcite-combobox-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-combobox-h *.sc-calcite-combobox,.sc-calcite-combobox-h[disabled].sc-calcite-combobox-s>*,.sc-calcite-combobox-h[disabled] .sc-calcite-combobox-s>*{pointer-events:none}/*!@:host*/.sc-calcite-combobox-h{position:relative;display:block}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-combobox-h[disabled] .sc-calcite-combobox-s>[calcite-hydrated][disabled],[disabled].sc-calcite-combobox-h [calcite-hydrated][disabled].sc-calcite-combobox{opacity:1}/*!@.interaction-container*/.interaction-container.sc-calcite-combobox{display:contents}/*!@:host([scale=s]) .x-button*/[scale=s].sc-calcite-combobox-h .x-button.sc-calcite-combobox{inline-size:1rem;block-size:1rem}/*!@:host([scale=m]) .x-button*/[scale=m].sc-calcite-combobox-h .x-button.sc-calcite-combobox{inline-size:1.5rem;block-size:1.5rem}/*!@:host([scale=l]) .x-button*/[scale=l].sc-calcite-combobox-h .x-button.sc-calcite-combobox{inline-size:2rem;block-size:2rem}/*!@.x-button*/.x-button.sc-calcite-combobox{margin:0px;display:flex;cursor:pointer;appearance:none;align-content:center;align-items:center;justify-content:center;align-self:center;border-width:2px;background-color:transparent;color:var(--calcite-color-text-3);outline-color:transparent;transition:background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start inset-size, opacity, outline-color, transform var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-radius:50%;border-color:transparent;background-color:var(--calcite-color-foreground-2)}/*!@.x-button:active, .x-button:hover*/.x-button.sc-calcite-combobox:active,.x-button.sc-calcite-combobox:hover{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-3)}/*!@.x-button:active*/.x-button.sc-calcite-combobox:active{border-style:solid;border-color:var(--calcite-color-brand)}/*!@.x-button calcite-icon*/.x-button.sc-calcite-combobox calcite-icon.sc-calcite-combobox{color:inherit}/*!@:host([scale=s])*/[scale=s].sc-calcite-combobox-h{font-size:var(--calcite-font-size--2);--calcite-combobox-item-spacing-unit-l:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-input-height:1rem;--calcite-internal-combobox-input-margin-block:calc(0.25rem - 1px)}/*!@:host([scale=s]) .x-button*/[scale=s].sc-calcite-combobox-h .x-button.sc-calcite-combobox{margin-inline:0.5rem}/*!@:host([scale=m])*/[scale=m].sc-calcite-combobox-h{font-size:var(--calcite-font-size--1);--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.5rem;--calcite-combobox-input-height:1rem;--calcite-internal-combobox-input-margin-block:calc(0.5rem - 1px)}/*!@:host([scale=m]) .x-button*/[scale=m].sc-calcite-combobox-h .x-button.sc-calcite-combobox{margin-inline-end:0.75rem}/*!@:host([scale=l])*/[scale=l].sc-calcite-combobox-h{font-size:var(--calcite-font-size-0);--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.75rem;--calcite-combobox-input-height:1.5rem;--calcite-internal-combobox-input-margin-block:calc(0.625rem - 1px)}/*!@:host([scale=l]) .x-button*/[scale=l].sc-calcite-combobox-h .x-button.sc-calcite-combobox{margin-inline-end:1rem}/*!@.wrapper*/.wrapper.sc-calcite-combobox{display:flex;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-1);outline-color:transparent;padding-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);padding-inline:var(--calcite-combobox-item-spacing-unit-l)}/*!@.wrapper:hover .icon*/.wrapper.sc-calcite-combobox:hover .icon.sc-calcite-combobox{color:var(--calcite-color-text-1)}/*!@:host(:focus-within) .wrapper,\n.wrapper--active*/.sc-calcite-combobox-h:focus-within .wrapper.sc-calcite-combobox,.wrapper--active.sc-calcite-combobox{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-color-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}/*!@:host([read-only]) .wrapper*/[read-only].sc-calcite-combobox-h .wrapper.sc-calcite-combobox{background-color:var(--calcite-color-background)}/*!@:host([read-only]) .label*/[read-only].sc-calcite-combobox-h .label.sc-calcite-combobox{font-weight:var(--calcite-font-weight-medium)}/*!@:host([status=invalid]) .wrapper*/[status=invalid].sc-calcite-combobox-h .wrapper.sc-calcite-combobox{border-color:var(--calcite-color-status-danger)}/*!@:host([status=invalid]:focus-within) .wrapper*/[status=invalid].sc-calcite-combobox-h:focus-within .wrapper.sc-calcite-combobox{outline:2px solid var(--calcite-color-status-danger);outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-offset-invert-focus),\n                1\n              )\n            )\n          )}/*!@.wrapper--single*/.wrapper--single.sc-calcite-combobox{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l);cursor:pointer;flex-wrap:nowrap}/*!@.grid-input*/.grid-input.sc-calcite-combobox{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px;gap:var(--calcite-combobox-item-spacing-unit-s);margin-inline-end:var(--calcite-combobox-item-spacing-unit-s)}/*!@.grid-input.selection-display-fit, .grid-input.selection-display-single*/.grid-input.selection-display-fit.sc-calcite-combobox,.grid-input.selection-display-single.sc-calcite-combobox{flex-wrap:nowrap;overflow:hidden}/*!@.input*/.input.sc-calcite-combobox{flex-grow:1;appearance:none;overflow:hidden;text-overflow:ellipsis;border-style:none;background-color:transparent;padding:0px;font-family:inherit;color:var(--calcite-color-text-1);font-size:inherit;block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height);inline-size:100%;margin-block-end:var(--calcite-combobox-item-spacing-unit-s);min-inline-size:4.8125rem}/*!@.input:focus*/.input.sc-calcite-combobox:focus{outline:2px solid transparent;outline-offset:2px}/*!@.input:placeholder-shown*/.input.sc-calcite-combobox:placeholder-shown{text-overflow:ellipsis}/*!@.input--single*/.input--single.sc-calcite-combobox{padding:0px;margin-block:var(--calcite-internal-combobox-input-margin-block)}/*!@.wrapper--active .input-single*/.wrapper--active.sc-calcite-combobox .input-single.sc-calcite-combobox{cursor:text}/*!@.input--hidden*/.input--hidden.sc-calcite-combobox{pointer-events:none;inline-size:0px;min-inline-size:0px;opacity:0}/*!@.input--icon*/.input--icon.sc-calcite-combobox{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l)}/*!@.input-wrap*/.input-wrap.sc-calcite-combobox{display:flex;flex-grow:1;align-items:center}/*!@.input-wrap--single*/.input-wrap--single.sc-calcite-combobox{flex:1 1 0%;overflow:hidden}/*!@.label*/.label.sc-calcite-combobox{pointer-events:none;max-inline-size:100%;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px;font-weight:var(--calcite-font-weight-normal);block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height)}/*!@.label--icon*/.label--icon.sc-calcite-combobox{padding-inline:var(--calcite-combobox-item-spacing-unit-l)}/*!@.icon-end,\n.icon-start*/.icon-end.sc-calcite-combobox,.icon-start.sc-calcite-combobox{display:flex;cursor:pointer;align-items:center}/*!@.icon-end*/.icon-end.sc-calcite-combobox{flex:none}/*!@.icon-end .icon*/.icon-end.sc-calcite-combobox .icon.sc-calcite-combobox{color:var(--calcite-color-text-3)}/*!@.floating-ui-container*/.floating-ui-container.sc-calcite-combobox{--calcite-floating-ui-z-index:var(--calcite-z-index-dropdown);display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index);visibility:hidden}/*!@.floating-ui-container .calcite-floating-ui-anim*/.floating-ui-container.sc-calcite-combobox .calcite-floating-ui-anim.sc-calcite-combobox{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:inset, left, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-z-index);border-radius:0.25rem}/*!@.floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim*/.floating-ui-container[data-placement^=bottom].sc-calcite-combobox .calcite-floating-ui-anim.sc-calcite-combobox{inset-block-start:-5px}/*!@.floating-ui-container[data-placement^=top] .calcite-floating-ui-anim*/.floating-ui-container[data-placement^=top].sc-calcite-combobox .calcite-floating-ui-anim.sc-calcite-combobox{inset-block-start:5px}/*!@.floating-ui-container[data-placement^=left] .calcite-floating-ui-anim*/.floating-ui-container[data-placement^=left].sc-calcite-combobox .calcite-floating-ui-anim.sc-calcite-combobox{left:5px}/*!@.floating-ui-container[data-placement^=right] .calcite-floating-ui-anim*/.floating-ui-container[data-placement^=right].sc-calcite-combobox .calcite-floating-ui-anim.sc-calcite-combobox{left:-5px}/*!@.floating-ui-container[data-placement] .calcite-floating-ui-anim--active*/.floating-ui-container[data-placement].sc-calcite-combobox .calcite-floating-ui-anim--active.sc-calcite-combobox{opacity:1;inset-block:0;left:0}/*!@.floating-ui-container--active*/.floating-ui-container--active.sc-calcite-combobox{visibility:visible}@media (forced-colors: active){/*!@.wrapper,\n  .floating-ui-container--active*/.wrapper.sc-calcite-combobox,.floating-ui-container--active.sc-calcite-combobox{border:1px solid canvasText}}/*!@.screen-readers-only*/.screen-readers-only.sc-calcite-combobox{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}/*!@.list-container*/.list-container.sc-calcite-combobox{max-block-size:45vh;overflow-y:auto;background-color:var(--calcite-color-foreground-1);inline-size:var(--calcite-dropdown-width)}/*!@.list*/.list.sc-calcite-combobox{margin:0px;display:block;padding:0px}/*!@.list--hide*/.list--hide.sc-calcite-combobox{block-size:0px;overflow:hidden}/*!@calcite-chip*/calcite-chip.sc-calcite-combobox{--calcite-animation-timing:0}/*!@.chip*/.chip.sc-calcite-combobox{margin-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);max-inline-size:100%}/*!@.chip--active*/.chip--active.sc-calcite-combobox{background-color:var(--calcite-color-foreground-3)}/*!@.chip--invisible*/.chip--invisible.sc-calcite-combobox{visibility:hidden;position:absolute}/*!@.item*/.item.sc-calcite-combobox{display:block}/*!@.validation-container*/.validation-container.sc-calcite-combobox{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}/*!@:host([scale=m]) .validation-container,\n:host([scale=l]) .validation-container*/[scale=m].sc-calcite-combobox-h .validation-container.sc-calcite-combobox,[scale=l].sc-calcite-combobox-h .validation-container.sc-calcite-combobox{padding-block-start:0.5rem}/*!@:host([scale=s]) .validation-container*/[scale=s].sc-calcite-combobox-h .validation-container.sc-calcite-combobox{padding-block-start:0.25rem}/*!@::slotted(input[slot=hidden-form-input])*/.sc-calcite-combobox-s>input[slot=hidden-form-input]{margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}/*!@:host([hidden])*/[hidden].sc-calcite-combobox-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-combobox{display:none}/*!@::slotted(calcite-combobox-item-group:not(:first-child))*/.sc-calcite-combobox-s>calcite-combobox-item-group:not(:first-child){padding-block-start:var(--calcite-combobox-item-spacing-unit-l)}";
 var CalciteComboboxStyle0 = comboboxCss;
 
-const isGroup = (el) => el.tagName === ComboboxItemGroup$1;
+const isGroup$1 = (el) => el.tagName === ComboboxItemGroup$1;
 const itemUidPrefix = "combobox-item-";
 const chipUidPrefix = "combobox-chip-";
 const labelUidPrefix = "combobox-label-";
@@ -17319,7 +17320,7 @@ class Combobox {
                 event.preventDefault();
                 return;
             }
-            if (composedPath.some((node) => node.classList?.contains(CSS$17.button))) {
+            if (composedPath.some((node) => node.classList?.contains(CSS$18.button))) {
                 this.clearValue();
                 event.preventDefault();
                 return;
@@ -17390,7 +17391,7 @@ class Combobox {
         };
         this.filterItems = (() => {
             const find = (item, filteredData) => item &&
-                filteredData.some(({ label, value }) => isGroup(item) ? label === item.label : value === item.value && label === item.textLabel);
+                filteredData.some(({ label, value }) => isGroup$1(item) ? label === item.label : value === item.value && label === item.textLabel);
             return debounce((text, setOpenToEmptyState = false, emit = true) => {
                 const filteredData = filter(this.data, text);
                 const itemsAndGroups = this.getItemsAndGroups();
@@ -17756,10 +17757,10 @@ class Combobox {
         this.updateActiveItemIndex(targetIndex);
     }
     hideChip(chipEl) {
-        chipEl.classList.add(CSS$15.chipInvisible);
+        chipEl.classList.add(CSS$16.chipInvisible);
     }
     showChip(chipEl) {
-        chipEl.classList.remove(CSS$15.chipInvisible);
+        chipEl.classList.remove(CSS$16.chipInvisible);
     }
     refreshChipDisplay({ chipEls, availableHorizontalChipElSpace, chipContainerElGap, }) {
         chipEls.forEach((chipEl) => {
@@ -17787,7 +17788,7 @@ class Combobox {
     setVisibleAndHiddenChips(chipEls) {
         let newSelectedVisibleChipsCount = 0;
         chipEls.forEach((chipEl) => {
-            if (chipEl.selected && !chipEl.classList.contains(CSS$15.chipInvisible)) {
+            if (chipEl.selected && !chipEl.classList.contains(CSS$16.chipInvisible)) {
                 newSelectedVisibleChipsCount++;
             }
         });
@@ -18018,7 +18019,7 @@ class Combobox {
         const label = this.messages.allSelected;
         return (hAsync("calcite-chip", { class: {
                 chip: true,
-                [CSS$15.chipInvisible]: !(this.isAllSelected() &&
+                [CSS$16.chipInvisible]: !(this.isAllSelected() &&
                     !selectedVisibleChipsCount &&
                     !compactSelectionDisplay),
             }, ref: setAllSelectedIndicatorChipEl, scale: scale, title: label, value: "" }, label));
@@ -18028,7 +18029,7 @@ class Combobox {
         const label = this.messages.all || "All";
         return (hAsync("calcite-chip", { class: {
                 chip: true,
-                [CSS$15.chipInvisible]: !(this.isAllSelected() &&
+                [CSS$16.chipInvisible]: !(this.isAllSelected() &&
                     !selectedVisibleChipsCount &&
                     compactSelectionDisplay),
             }, scale: scale, title: label, value: "" }, label));
@@ -18065,7 +18066,7 @@ class Combobox {
         }
         return (hAsync("calcite-chip", { class: {
                 chip: true,
-                [CSS$15.chipInvisible]: chipInvisible,
+                [CSS$16.chipInvisible]: chipInvisible,
             }, ref: setSelectedIndicatorChipEl, scale: scale, title: label, value: "" }, label));
     }
     renderSelectedIndicatorChipCompact() {
@@ -18091,7 +18092,7 @@ class Combobox {
         }
         return (hAsync("calcite-chip", { class: {
                 chip: true,
-                [CSS$15.chipInvisible]: chipInvisible,
+                [CSS$16.chipInvisible]: chipInvisible,
             }, scale: scale, title: label, value: "" }, label));
     }
     get showingInlineIcon() {
@@ -18115,7 +18116,7 @@ class Combobox {
                 label: true,
                 "label--icon": !!selectedItem?.icon,
             }, key: "label" }, getLabel(selectedItem))), hAsync("input", { "aria-activedescendant": this.activeDescendant, "aria-autocomplete": "list", "aria-controls": `${listboxUidPrefix}${guid}`, "aria-expanded": toAriaBoolean(open), "aria-haspopup": "listbox", "aria-label": getLabelText(this), "aria-owns": `${listboxUidPrefix}${guid}`, class: {
-                [CSS$15.input]: true,
+                [CSS$16.input]: true,
                 "input--single": true,
                 "input--hidden": showLabel,
                 "input--icon": this.showingInlineIcon && !!this.placeholderIcon,
@@ -18127,7 +18128,7 @@ class Combobox {
     renderFloatingUIContainer() {
         const { setFloatingEl, setContainerEl, open } = this;
         const classes = {
-            [CSS$15.listContainer]: true,
+            [CSS$16.listContainer]: true,
             [FloatingCSS.animation]: true,
             [FloatingCSS.animationActive]: open,
         };
@@ -18144,7 +18145,7 @@ class Combobox {
     }
     renderChevronIcon() {
         const { open } = this;
-        return (hAsync("span", { class: "icon-end", key: "chevron" }, hAsync("calcite-icon", { class: CSS$15.icon, icon: open ? "chevron-up" : "chevron-down", scale: getIconScale(this.scale) })));
+        return (hAsync("span", { class: "icon-end", key: "chevron" }, hAsync("calcite-icon", { class: CSS$16.icon, icon: open ? "chevron-up" : "chevron-down", scale: getIconScale(this.scale) })));
     }
     render() {
         const { selectionDisplay, guid, label, open, readOnly } = this;
@@ -18159,8 +18160,8 @@ class Combobox {
                 "wrapper--active": open,
             }, onClick: this.clickHandler, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl }, this.renderSelectedOrPlaceholderIcon(), hAsync("div", { class: {
                 "grid-input": true,
-                [CSS$15.selectionDisplayFit]: fitSelectionDisplay,
-                [CSS$15.selectionDisplaySingle]: singleSelectionDisplay,
+                [CSS$16.selectionDisplayFit]: fitSelectionDisplay,
+                [CSS$16.selectionDisplaySingle]: singleSelectionDisplay,
             }, key: "grid", ref: this.setChipContainerEl }, !singleSelectionMode && !singleSelectionDisplay && this.renderChips(), !singleSelectionMode &&
             !allSelectionDisplay && [
             this.renderSelectedIndicatorChip(),
@@ -18238,7 +18239,7 @@ class Combobox {
     }; }
 }
 
-const CSS$14 = {
+const CSS$15 = {
     active: "label--active",
     centerContent: "center-content",
     container: "container",
@@ -18330,17 +18331,17 @@ class ComboboxItem {
     // --------------------------------------------------------------------------
     renderIcon(iconPath) {
         return this.icon ? (hAsync("calcite-icon", { class: {
-                [CSS$14.custom]: !!this.icon,
-                [CSS$14.iconActive]: this.icon && this.selected,
+                [CSS$15.custom]: !!this.icon,
+                [CSS$15.iconActive]: this.icon && this.selected,
             }, flipRtl: this.iconFlipRtl, icon: this.icon || iconPath, key: "icon", scale: getIconScale(this.scale) })) : null;
     }
     renderSelectIndicator(showDot, iconPath) {
         return showDot ? (hAsync("span", { class: {
-                [CSS$14.icon]: true,
-                [CSS$14.dot]: true,
+                [CSS$15.icon]: true,
+                [CSS$15.dot]: true,
             } })) : (hAsync("calcite-icon", { class: {
-                [CSS$14.icon]: true,
-                [CSS$14.iconActive]: this.selected,
+                [CSS$15.icon]: true,
+                [CSS$15.iconActive]: this.selected,
             }, flipRtl: this.iconFlipRtl, icon: iconPath, key: "indicator", scale: getIconScale(this.scale) }));
     }
     renderChildren() {
@@ -18356,16 +18357,16 @@ class ComboboxItem {
         const defaultIcon = isSingleSelect ? undefined : "check";
         const iconPath = disabled ? undefined : defaultIcon;
         const classes = {
-            [CSS$14.label]: true,
-            [CSS$14.selected]: this.selected,
-            [CSS$14.active]: this.active,
-            [CSS$14.single]: isSingleSelect,
+            [CSS$15.label]: true,
+            [CSS$15.selected]: this.selected,
+            [CSS$15.active]: this.active,
+            [CSS$15.single]: isSingleSelect,
         };
         const depth = getDepth$1() + 1;
         return (hAsync(Host, { key: '7d54536c9f70be5d8824bf53156879074c632d7d', "aria-hidden": "true" }, hAsync(InteractiveContainer, { key: '67eeab82142a11bcd97bf9d21e768ac1309eb78c', disabled: disabled }, hAsync("div", { key: 'c0cf97d6111ca6e09f26750060c669d091265b08', class: {
-                [CSS$14.container]: true,
-                [CSS$14.scale(this.scale)]: true,
-            }, style: { "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` } }, hAsync("li", { key: '36699561d3c82ff081e5f3b281e97711b2527596', class: classes, id: this.guid, onClick: this.itemClickHandler }, this.renderSelectIndicator(showDot, iconPath), this.renderIcon(iconPath), hAsync("div", { key: 'c07e0ddb3c248c610eedd80fee70dba0116c88cf', class: CSS$14.centerContent }, hAsync("div", { key: '6a7050585ca580a5f0648753ddba28e3c71a8ea7', class: CSS$14.title }, this.renderTextContent(this.textLabel)), this.description ? (hAsync("div", { class: CSS$14.description }, this.renderTextContent(this.description))) : null), this.shortHeading ? (hAsync("div", { class: CSS$14.shortText }, this.renderTextContent(this.shortHeading))) : null, hAsync("slot", { key: '73bb84b567866bd1c6a74ba84d1459d1a8c47add', name: SLOTS$q.contentEnd })), this.renderChildren()))));
+                [CSS$15.container]: true,
+                [CSS$15.scale(this.scale)]: true,
+            }, style: { "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` } }, hAsync("li", { key: '36699561d3c82ff081e5f3b281e97711b2527596', class: classes, id: this.guid, onClick: this.itemClickHandler }, this.renderSelectIndicator(showDot, iconPath), this.renderIcon(iconPath), hAsync("div", { key: 'c07e0ddb3c248c610eedd80fee70dba0116c88cf', class: CSS$15.centerContent }, hAsync("div", { key: '6a7050585ca580a5f0648753ddba28e3c71a8ea7', class: CSS$15.title }, this.renderTextContent(this.textLabel)), this.description ? (hAsync("div", { class: CSS$15.description }, this.renderTextContent(this.description))) : null), this.shortHeading ? (hAsync("div", { class: CSS$15.shortText }, this.renderTextContent(this.shortHeading))) : null, hAsync("slot", { key: '73bb84b567866bd1c6a74ba84d1459d1a8c47add', name: SLOTS$q.contentEnd })), this.renderChildren()))));
     }
     renderTextContent(text) {
         const pattern = this.filterTextMatchPattern;
@@ -18375,7 +18376,7 @@ class ComboboxItem {
         const parts = text.split(pattern);
         if (parts.length > 1) {
             // we only highlight the first match
-            parts[1] = hAsync("mark", { class: CSS$14.filterMatch }, parts[1]);
+            parts[1] = hAsync("mark", { class: CSS$15.filterMatch }, parts[1]);
         }
         return parts;
     }
@@ -18411,7 +18412,7 @@ class ComboboxItem {
     }; }
 }
 
-const CSS$13 = {
+const CSS$14 = {
     list: "list",
     label: "label",
     title: "title",
@@ -18448,7 +18449,7 @@ class ComboboxItemGroup {
     render() {
         const { el, scale } = this;
         const depth = getDepth$1();
-        return (hAsync("ul", { key: 'e57f7805f680b7d8b89f1f72c98197d81ad743dd', "aria-labelledby": this.guid, class: { [CSS$13.list]: true, [`scale--${scale}`]: true }, role: "group" }, hAsync("li", { key: '45ab46a79eb035a0785ea9d2665a3fce8cf7c183', class: { [CSS$13.label]: true }, id: this.guid, role: "presentation", style: { "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` } }, hAsync("span", { key: '380bfd8d85a132df1252e88971adca1b50104801', class: CSS$13.title }, this.label)), hAsync("slot", { key: 'e0fd9bec45fc259ee2b439a0b80665c742fb5632' })));
+        return (hAsync("ul", { key: 'e57f7805f680b7d8b89f1f72c98197d81ad743dd', "aria-labelledby": this.guid, class: { [CSS$14.list]: true, [`scale--${scale}`]: true }, role: "group" }, hAsync("li", { key: '45ab46a79eb035a0785ea9d2665a3fce8cf7c183', class: { [CSS$14.label]: true }, id: this.guid, role: "presentation", style: { "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` } }, hAsync("span", { key: '380bfd8d85a132df1252e88971adca1b50104801', class: CSS$14.title }, this.label)), hAsync("slot", { key: 'e0fd9bec45fc259ee2b439a0b80665c742fb5632' })));
     }
     get el() { return getElement(this); }
     static get style() { return CalciteComboboxItemGroupStyle0; }
@@ -19642,7 +19643,7 @@ class DatePickerMonth {
     }; }
 }
 
-const CSS$12 = {
+const CSS$13 = {
     header: "header",
     month: "month",
     chevron: "chevron",
@@ -19743,7 +19744,7 @@ class DatePickerMonthHeader {
         this.setNextPrevMonthDates();
     }
     render() {
-        return hAsync("div", { key: '6e1476a12ba6ea69e21a6e2ad307ed524bdf3841', class: CSS$12.header }, this.renderContent());
+        return hAsync("div", { key: '6e1476a12ba6ea69e21a6e2ad307ed524bdf3841', class: CSS$13.header }, this.renderContent());
     }
     renderContent() {
         const { messages, localeData, activeDate } = this;
@@ -19765,10 +19766,10 @@ class DatePickerMonthHeader {
         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$12.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$1.chevronLeft, scale: getIconScale(this.scale) })), hAsync("div", { class: { text: true, [CSS$12.textReverse]: reverse } }, hAsync(Heading, { class: CSS$12.month, level: this.headingLevel }, localizedMonth), hAsync("span", { class: CSS$12.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$13.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$1.chevronLeft, scale: getIconScale(this.scale) })), hAsync("div", { class: { text: true, [CSS$13.textReverse]: reverse } }, hAsync(Heading, { class: CSS$13.month, level: this.headingLevel }, localizedMonth), hAsync("span", { class: CSS$13.yearWrap }, hAsync("input", { "aria-label": messages.year, class: {
                 year: true,
-                [CSS$12.yearSuffix]: !!suffix,
-            }, inputmode: "numeric", maxlength: "4", minlength: "1", onChange: this.onYearChange, onInput: this.onYearInput, onKeyDown: this.onYearKey, pattern: "\\d*", ref: (el) => (this.yearInput = el), type: "text", value: localizedYear }), suffix && hAsync("span", { class: CSS$12.suffix }, suffix))), hAsync("a", { "aria-disabled": `${this.nextMonthDate.getMonth() === activeMonth}`, "aria-label": messages.nextMonth, class: CSS$12.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$1.chevronRight, scale: getIconScale(this.scale) }))));
+                [CSS$13.yearSuffix]: !!suffix,
+            }, inputmode: "numeric", maxlength: "4", minlength: "1", onChange: this.onYearChange, onInput: this.onYearInput, onKeyDown: this.onYearKey, pattern: "\\d*", ref: (el) => (this.yearInput = el), type: "text", value: localizedYear }), suffix && hAsync("span", { class: CSS$13.suffix }, suffix))), hAsync("a", { "aria-disabled": `${this.nextMonthDate.getMonth() === activeMonth}`, "aria-label": messages.nextMonth, class: CSS$13.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$1.chevronRight, scale: getIconScale(this.scale) }))));
     }
     setNextPrevMonthDates() {
         if (!this.activeDate) {
@@ -20850,7 +20851,7 @@ function updateFocusTrapElements(component) {
     component.focusTrap?.updateContainerElements(component.el);
 }
 
-const CSS$11 = {
+const CSS$12 = {
     actionBarContainer: "action-bar-container",
     backButton: "back-button",
     container: "container",
@@ -20898,7 +20899,7 @@ const SLOTS$p = {
     footerActions: "footer-actions",
 };
 
-const CSS$10 = {
+const CSS$11 = {
     dialog: "dialog",
     panel: "panel",
     scrim: "scrim",
@@ -21067,10 +21068,10 @@ class Dialog {
     render() {
         const { description, heading, opened } = this;
         return (hAsync(Host, { key: '0f13ce87c5a5db186a443fa8e5cb4734b6da44e4', "aria-description": description, "aria-label": heading, "aria-modal": toAriaBoolean(this.modal), role: "dialog" }, hAsync("div", { key: '818e6308788510a56a3d825f0a7b45a837fb99c5', class: {
-                [CSS$10.container]: true,
-                [CSS$10.containerOpen]: opened,
-                [CSS$10.containerEmbedded]: this.embedded,
-            } }, this.modal ? (hAsync("calcite-scrim", { class: CSS$10.scrim, onClick: this.handleOutsideClose })) : null, hAsync("div", { key: '7e67efc8fb567e699ca24ddeb304d0944a8cad24', class: CSS$10.dialog, ref: this.setTransitionEl }, hAsync("slot", { key: '934b591c94e08e42f3d71996a7c9982eab7160f1', name: SLOTS$o.content }, hAsync("calcite-panel", { key: '99175d893f56a2e32ea8c19ade7bfc95fb48da7f', beforeClose: this.beforeClose, class: CSS$10.panel, closable: !this.closeDisabled, closed: !opened, description: description, heading: heading, headingLevel: this.headingLevel, loading: this.loading, menuOpen: this.menuOpen, messageOverrides: this.messageOverrides, onCalcitePanelClose: this.handleCloseClick, onCalcitePanelScroll: this.handleScroll, overlayPositioning: this.overlayPositioning, ref: (el) => (this.panelEl = el), scale: this.scale }, hAsync("slot", { key: 'eb4a5160e2682dc8c336ef772b57b0f4fa38655f', name: SLOTS$o.actionBar, slot: SLOTS$p.actionBar }), hAsync("slot", { key: '459cca0ab91c380631ff22097af628c7a54eedb8', name: SLOTS$o.alerts, slot: SLOTS$p.alerts }), hAsync("slot", { key: '4a8b7a0010af0f19392248c0598d11205f8ccd0d', name: SLOTS$o.headerActionsStart, slot: SLOTS$p.headerActionsStart }), hAsync("slot", { key: '410ffc888a028ad915f60883e270fa76484155cb', name: SLOTS$o.headerActionsEnd, slot: SLOTS$p.headerActionsEnd }), hAsync("slot", { key: 'c157cb3e37e746c48216ab5afad22c42920f8b34', name: SLOTS$o.headerContent, slot: SLOTS$p.headerContent }), hAsync("slot", { key: 'df976d04581561b163c81296f37ad90777c673db', name: SLOTS$o.headerMenuActions, slot: SLOTS$p.headerMenuActions }), hAsync("slot", { key: 'cf6941e14e2e4efc97b1e0c262f90ab275db0b11', name: SLOTS$o.fab, slot: SLOTS$p.fab }), hAsync("slot", { key: 'd668245026e8c53887ef90199c0ccf5af20cf289', name: SLOTS$o.contentTop, slot: SLOTS$p.contentTop }), hAsync("slot", { key: '01b0b3d0e570a2e83f575842ce1a332ae38b504d', name: SLOTS$o.contentBottom, slot: SLOTS$p.contentBottom }), hAsync("slot", { key: '825890890a527ae5d1a12fd7484674abb4aa9451', name: SLOTS$o.footerStart, slot: SLOTS$p.footerStart }), hAsync("slot", { key: '6aa3dfd71fa1087b2244ffeedb60bb6946b118f6', name: SLOTS$o.footer, slot: SLOTS$p.footer }), hAsync("slot", { key: '794d73d346a0dfb959accc8cd4a5580daaa1b7cd', name: SLOTS$o.footerEnd, slot: SLOTS$p.footerEnd }), hAsync("div", { key: '09722c38bc0d1798f8291da824c953c74ac0ee5c', class: CSS$10.content }, hAsync("slot", { key: '49a014d165d49a58f334a5f62e6907ab6c1f2538' }))))))));
+                [CSS$11.container]: true,
+                [CSS$11.containerOpen]: opened,
+                [CSS$11.containerEmbedded]: this.embedded,
+            } }, this.modal ? (hAsync("calcite-scrim", { class: CSS$11.scrim, onClick: this.handleOutsideClose })) : null, hAsync("div", { key: '7e67efc8fb567e699ca24ddeb304d0944a8cad24', class: CSS$11.dialog, ref: this.setTransitionEl }, hAsync("slot", { key: '934b591c94e08e42f3d71996a7c9982eab7160f1', name: SLOTS$o.content }, hAsync("calcite-panel", { key: '99175d893f56a2e32ea8c19ade7bfc95fb48da7f', beforeClose: this.beforeClose, class: CSS$11.panel, closable: !this.closeDisabled, closed: !opened, description: description, heading: heading, headingLevel: this.headingLevel, loading: this.loading, menuOpen: this.menuOpen, messageOverrides: this.messageOverrides, onCalcitePanelClose: this.handleCloseClick, onCalcitePanelScroll: this.handleScroll, overlayPositioning: this.overlayPositioning, ref: (el) => (this.panelEl = el), scale: this.scale }, hAsync("slot", { key: 'eb4a5160e2682dc8c336ef772b57b0f4fa38655f', name: SLOTS$o.actionBar, slot: SLOTS$p.actionBar }), hAsync("slot", { key: '459cca0ab91c380631ff22097af628c7a54eedb8', name: SLOTS$o.alerts, slot: SLOTS$p.alerts }), hAsync("slot", { key: '4a8b7a0010af0f19392248c0598d11205f8ccd0d', name: SLOTS$o.headerActionsStart, slot: SLOTS$p.headerActionsStart }), hAsync("slot", { key: '410ffc888a028ad915f60883e270fa76484155cb', name: SLOTS$o.headerActionsEnd, slot: SLOTS$p.headerActionsEnd }), hAsync("slot", { key: 'c157cb3e37e746c48216ab5afad22c42920f8b34', name: SLOTS$o.headerContent, slot: SLOTS$p.headerContent }), hAsync("slot", { key: 'df976d04581561b163c81296f37ad90777c673db', name: SLOTS$o.headerMenuActions, slot: SLOTS$p.headerMenuActions }), hAsync("slot", { key: 'cf6941e14e2e4efc97b1e0c262f90ab275db0b11', name: SLOTS$o.fab, slot: SLOTS$p.fab }), hAsync("slot", { key: 'd668245026e8c53887ef90199c0ccf5af20cf289', name: SLOTS$o.contentTop, slot: SLOTS$p.contentTop }), hAsync("slot", { key: '01b0b3d0e570a2e83f575842ce1a332ae38b504d', name: SLOTS$o.contentBottom, slot: SLOTS$p.contentBottom }), hAsync("slot", { key: '825890890a527ae5d1a12fd7484674abb4aa9451', name: SLOTS$o.footerStart, slot: SLOTS$p.footerStart }), hAsync("slot", { key: '6aa3dfd71fa1087b2244ffeedb60bb6946b118f6', name: SLOTS$o.footer, slot: SLOTS$p.footer }), hAsync("slot", { key: '794d73d346a0dfb959accc8cd4a5580daaa1b7cd', name: SLOTS$o.footerEnd, slot: SLOTS$p.footerEnd }), hAsync("div", { key: '09722c38bc0d1798f8291da824c953c74ac0ee5c', class: CSS$11.content }, hAsync("slot", { key: '49a014d165d49a58f334a5f62e6907ab6c1f2538' }))))))));
     }
     effectiveLocaleChange() {
         updateMessages(this);
@@ -21127,20 +21128,20 @@ class Dialog {
     //
     //--------------------------------------------------------------------------
     onBeforeOpen() {
-        this.transitionEl.classList.add(CSS$10.openingActive);
+        this.transitionEl.classList.add(CSS$11.openingActive);
         this.calciteDialogBeforeOpen.emit();
     }
     onOpen() {
-        this.transitionEl.classList.remove(CSS$10.openingIdle, CSS$10.openingActive);
+        this.transitionEl.classList.remove(CSS$11.openingIdle, CSS$11.openingActive);
         this.calciteDialogOpen.emit();
         activateFocusTrap(this);
     }
     onBeforeClose() {
-        this.transitionEl.classList.add(CSS$10.closingActive);
+        this.transitionEl.classList.add(CSS$11.closingActive);
         this.calciteDialogBeforeClose.emit();
     }
     onClose() {
-        this.transitionEl.classList.remove(CSS$10.closingIdle, CSS$10.closingActive);
+        this.transitionEl.classList.remove(CSS$11.closingIdle, CSS$11.closingActive);
         this.calciteDialogClose.emit();
         deactivateFocusTrap(this);
     }
@@ -21156,7 +21157,7 @@ class Dialog {
         }
     }
     handleOpenedChange(value) {
-        const idleClass = value ? CSS$10.openingIdle : CSS$10.closingIdle;
+        const idleClass = value ? CSS$11.openingIdle : CSS$11.closingIdle;
         this.transitionEl.classList.add(idleClass);
         onToggleOpenCloseComponent(this);
     }
@@ -21228,7 +21229,7 @@ const SLOTS$n = {
     dropdownTrigger: "trigger",
 };
 
-const dropdownCss = "/*!@:host([disabled])*/[disabled].sc-calcite-dropdown-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-dropdown-h *.sc-calcite-dropdown,.sc-calcite-dropdown-h[disabled].sc-calcite-dropdown-s>*,.sc-calcite-dropdown-h[disabled] .sc-calcite-dropdown-s>*{pointer-events:none}/*!@:host*/.sc-calcite-dropdown-h{display:inline-block}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-dropdown-h[disabled] .sc-calcite-dropdown-s>[calcite-hydrated][disabled],[disabled].sc-calcite-dropdown-h [calcite-hydrated][disabled].sc-calcite-dropdown{opacity:1}/*!@.interaction-container*/.interaction-container.sc-calcite-dropdown{display:contents}/*!@:host .calcite-dropdown-wrapper*/.sc-calcite-dropdown-h .calcite-dropdown-wrapper.sc-calcite-dropdown{--calcite-floating-ui-z-index:var(--calcite-z-index-dropdown);display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index);visibility:hidden}/*!@.calcite-dropdown-wrapper .calcite-floating-ui-anim*/.calcite-dropdown-wrapper.sc-calcite-dropdown .calcite-floating-ui-anim.sc-calcite-dropdown{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-z-index);border-radius:0.25rem}/*!@.calcite-dropdown-wrapper[data-placement^=bottom] .calcite-floating-ui-anim*/.calcite-dropdown-wrapper[data-placement^=bottom].sc-calcite-dropdown .calcite-floating-ui-anim.sc-calcite-dropdown{transform:translateY(-5px)}/*!@.calcite-dropdown-wrapper[data-placement^=top] .calcite-floating-ui-anim*/.calcite-dropdown-wrapper[data-placement^=top].sc-calcite-dropdown .calcite-floating-ui-anim.sc-calcite-dropdown{transform:translateY(5px)}/*!@.calcite-dropdown-wrapper[data-placement^=left] .calcite-floating-ui-anim*/.calcite-dropdown-wrapper[data-placement^=left].sc-calcite-dropdown .calcite-floating-ui-anim.sc-calcite-dropdown{transform:translateX(5px)}/*!@.calcite-dropdown-wrapper[data-placement^=right] .calcite-floating-ui-anim*/.calcite-dropdown-wrapper[data-placement^=right].sc-calcite-dropdown .calcite-floating-ui-anim.sc-calcite-dropdown{transform:translateX(-5px)}/*!@.calcite-dropdown-wrapper[data-placement] .calcite-floating-ui-anim--active*/.calcite-dropdown-wrapper[data-placement].sc-calcite-dropdown .calcite-floating-ui-anim--active.sc-calcite-dropdown{opacity:1;transform:translate(0)}/*!@:host([open]) .calcite-dropdown-wrapper*/[open].sc-calcite-dropdown-h .calcite-dropdown-wrapper.sc-calcite-dropdown{visibility:visible}/*!@:host .calcite-dropdown-content*/.sc-calcite-dropdown-h .calcite-dropdown-content.sc-calcite-dropdown{max-block-size:45vh;inline-size:auto;overflow-y:auto;overflow-x:hidden;background-color:var(--calcite-color-foreground-1);inline-size:var(--calcite-dropdown-width)}/*!@.calcite-trigger-container*/.calcite-trigger-container.sc-calcite-dropdown{position:relative;display:flex;block-size:100%;flex:1 1 auto;word-wrap:break-word;word-break:break-word}@media (forced-colors: active){/*!@:host([open]) .calcite-dropdown-wrapper*/[open].sc-calcite-dropdown-h .calcite-dropdown-wrapper.sc-calcite-dropdown{border:1px solid canvasText}}/*!@:host([width-scale=s])*/[width-scale=s].sc-calcite-dropdown-h{--calcite-dropdown-width:12rem}/*!@:host([width-scale=m])*/[width-scale=m].sc-calcite-dropdown-h{--calcite-dropdown-width:14rem}/*!@:host([width-scale=l])*/[width-scale=l].sc-calcite-dropdown-h{--calcite-dropdown-width:16rem}/*!@:host([hidden])*/[hidden].sc-calcite-dropdown-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-dropdown{display:none}";
+const dropdownCss = "/*!@:host([disabled])*/[disabled].sc-calcite-dropdown-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-dropdown-h *.sc-calcite-dropdown,.sc-calcite-dropdown-h[disabled].sc-calcite-dropdown-s>*,.sc-calcite-dropdown-h[disabled] .sc-calcite-dropdown-s>*{pointer-events:none}/*!@:host*/.sc-calcite-dropdown-h{display:inline-block}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-dropdown-h[disabled] .sc-calcite-dropdown-s>[calcite-hydrated][disabled],[disabled].sc-calcite-dropdown-h [calcite-hydrated][disabled].sc-calcite-dropdown{opacity:1}/*!@.interaction-container*/.interaction-container.sc-calcite-dropdown{display:contents}/*!@:host .calcite-dropdown-wrapper*/.sc-calcite-dropdown-h .calcite-dropdown-wrapper.sc-calcite-dropdown{--calcite-floating-ui-z-index:var(--calcite-z-index-dropdown);display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index);visibility:hidden}/*!@.calcite-dropdown-wrapper .calcite-floating-ui-anim*/.calcite-dropdown-wrapper.sc-calcite-dropdown .calcite-floating-ui-anim.sc-calcite-dropdown{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:inset, left, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-z-index);border-radius:0.25rem}/*!@.calcite-dropdown-wrapper[data-placement^=bottom] .calcite-floating-ui-anim*/.calcite-dropdown-wrapper[data-placement^=bottom].sc-calcite-dropdown .calcite-floating-ui-anim.sc-calcite-dropdown{inset-block-start:-5px}/*!@.calcite-dropdown-wrapper[data-placement^=top] .calcite-floating-ui-anim*/.calcite-dropdown-wrapper[data-placement^=top].sc-calcite-dropdown .calcite-floating-ui-anim.sc-calcite-dropdown{inset-block-start:5px}/*!@.calcite-dropdown-wrapper[data-placement^=left] .calcite-floating-ui-anim*/.calcite-dropdown-wrapper[data-placement^=left].sc-calcite-dropdown .calcite-floating-ui-anim.sc-calcite-dropdown{left:5px}/*!@.calcite-dropdown-wrapper[data-placement^=right] .calcite-floating-ui-anim*/.calcite-dropdown-wrapper[data-placement^=right].sc-calcite-dropdown .calcite-floating-ui-anim.sc-calcite-dropdown{left:-5px}/*!@.calcite-dropdown-wrapper[data-placement] .calcite-floating-ui-anim--active*/.calcite-dropdown-wrapper[data-placement].sc-calcite-dropdown .calcite-floating-ui-anim--active.sc-calcite-dropdown{opacity:1;inset-block:0;left:0}/*!@:host([open]) .calcite-dropdown-wrapper*/[open].sc-calcite-dropdown-h .calcite-dropdown-wrapper.sc-calcite-dropdown{visibility:visible}/*!@:host .calcite-dropdown-content*/.sc-calcite-dropdown-h .calcite-dropdown-content.sc-calcite-dropdown{max-block-size:45vh;inline-size:auto;overflow-y:auto;overflow-x:hidden;background-color:var(--calcite-color-foreground-1);inline-size:var(--calcite-dropdown-width)}/*!@.calcite-trigger-container*/.calcite-trigger-container.sc-calcite-dropdown{position:relative;display:flex;block-size:100%;flex:1 1 auto;word-wrap:break-word;word-break:break-word}@media (forced-colors: active){/*!@:host([open]) .calcite-dropdown-wrapper*/[open].sc-calcite-dropdown-h .calcite-dropdown-wrapper.sc-calcite-dropdown{border:1px solid canvasText}}/*!@:host([width-scale=s])*/[width-scale=s].sc-calcite-dropdown-h{--calcite-dropdown-width:12rem}/*!@:host([width-scale=m])*/[width-scale=m].sc-calcite-dropdown-h{--calcite-dropdown-width:14rem}/*!@:host([width-scale=l])*/[width-scale=l].sc-calcite-dropdown-h{--calcite-dropdown-width:16rem}/*!@:host([hidden])*/[hidden].sc-calcite-dropdown-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-dropdown{display:none}";
 var CalciteDropdownStyle0 = dropdownCss;
 
 /**
@@ -21417,7 +21418,7 @@ class Dropdown {
     /** Sets focus on the component's first focusable element. */
     async setFocus() {
         await componentFocusable(this);
-        this.el.focus();
+        focusFirstTabbable(this.referenceEl);
     }
     //--------------------------------------------------------------------------
     //
@@ -21453,11 +21454,11 @@ class Dropdown {
     }
     render() {
         const { open, guid } = this;
-        return (hAsync(Host, { key: '50bf6651c3987190f8477b2eebc33d2832685a10' }, hAsync(InteractiveContainer, { key: '68d2c96cae443f3d03b961d1c36ac3a32317c6d4', disabled: this.disabled }, hAsync("div", { key: '4bbebf0841d4de7628f6d7940b40299db864c518', class: "calcite-trigger-container", id: `${guid}-menubutton`, onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl }, hAsync("slot", { key: '37e2ae56c41dcddf9be92f4d7b80b153c8a87fb8', "aria-controls": `${guid}-menu`, "aria-expanded": toAriaBoolean(open), "aria-haspopup": "menu", name: SLOTS$n.dropdownTrigger, onSlotchange: this.updateTriggers })), hAsync("div", { key: 'f1faff59ee51a993e26c5bdfe59923538b818dfe', "aria-hidden": toAriaBoolean(!open), class: "calcite-dropdown-wrapper", ref: this.setFloatingEl }, hAsync("div", { key: '6eb119e4452038a3d54d356d9818ea1cf8f0f62c', "aria-labelledby": `${guid}-menubutton`, class: {
+        return (hAsync(Host, { key: '1208cead1ba375817d81c8a9226f9b2bf866d96c' }, hAsync(InteractiveContainer, { key: 'dfa39e2d5421981014c34a301e5af9a9c4dbb035', disabled: this.disabled }, hAsync("div", { key: '935f23c15e7865785e61c39c5d02fe7d92fe759c', class: "calcite-trigger-container", id: `${guid}-menubutton`, onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler, ref: this.setReferenceEl }, hAsync("slot", { key: '2803a43facf9aad3e68bb5d2a86dacb14a80c0fd', "aria-controls": `${guid}-menu`, "aria-expanded": toAriaBoolean(open), "aria-haspopup": "menu", name: SLOTS$n.dropdownTrigger, onSlotchange: this.updateTriggers })), hAsync("div", { key: '4cfd6b346493c7a5de17008a26605f58f588a507', "aria-hidden": toAriaBoolean(!open), class: "calcite-dropdown-wrapper", ref: this.setFloatingEl }, hAsync("div", { key: '510f0c66285d9b1160485eda1b51277a70f213e8', "aria-labelledby": `${guid}-menubutton`, class: {
                 ["calcite-dropdown-content"]: true,
                 [FloatingCSS.animation]: true,
                 [FloatingCSS.animationActive]: open,
-            }, id: `${guid}-menu`, ref: this.setScrollerAndTransitionEl, role: "menu" }, hAsync("slot", { key: '9bbe78ed3e58e5fb986cedcb3e947c4a755e0c88', onSlotchange: this.updateGroups }))))));
+            }, id: `${guid}-menu`, ref: this.setScrollerAndTransitionEl, role: "menu" }, hAsync("slot", { key: '2b5e934d6bdc9acae09da22e36bee7a0e0f71664', onSlotchange: this.updateGroups }))))));
     }
     //--------------------------------------------------------------------------
     //
@@ -21639,7 +21640,7 @@ class Dropdown {
     }; }
 }
 
-const CSS$$ = {
+const CSS$10 = {
     container: "container",
     containerNone: "container--none-selection",
     icon: "dropdown-item-icon",
@@ -21689,7 +21690,7 @@ class DropdownGroup {
         const groupTitle = this.groupTitle ? (hAsync("span", { "aria-hidden": "true", class: "dropdown-title" }, this.groupTitle)) : null;
         const dropdownSeparator = this.groupPosition > 0 ? hAsync("div", { class: "dropdown-separator", role: "separator" }) : null;
         return (hAsync(Host, { key: '1c189e8ff87a118d296781b729c889307c2b4a5b', "aria-label": this.groupTitle, role: "group" }, hAsync("div", { key: '2afc3aee9c68b26af882168ce24cb2937a17c9e8', class: {
-                [CSS$$.container]: true,
+                [CSS$10.container]: true,
             } }, dropdownSeparator, groupTitle, hAsync("slot", { key: '3fdcfab750b0541a4a24764f1a1875c867db06e8' }))));
     }
     //--------------------------------------------------------------------------
@@ -21788,9 +21789,9 @@ class DropdownItem {
     }
     render() {
         const { href, selectionMode, label, iconFlipRtl } = this;
-        const iconStartEl = (hAsync("calcite-icon", { key: '335624555fbf5f4e36fa0b58b7e84a722f64cdf2', class: CSS$$.iconStart, flipRtl: iconFlipRtl === "start" || iconFlipRtl === "both", icon: this.iconStart, scale: getIconScale(this.scale) }));
-        const contentNode = (hAsync("span", { key: '54082db67b2cd412f5167950609387884b8ac878', class: CSS$$.itemContent }, hAsync("slot", { key: 'b7c949c4dffae482fd398c21e062763fc1f06ba8' })));
-        const iconEndEl = (hAsync("calcite-icon", { key: 'c9e8ce2e26943b228fd3912661486f5a7b58d8c2', class: CSS$$.iconEnd, flipRtl: iconFlipRtl === "end" || iconFlipRtl === "both", icon: this.iconEnd, scale: getIconScale(this.scale) }));
+        const iconStartEl = (hAsync("calcite-icon", { key: '335624555fbf5f4e36fa0b58b7e84a722f64cdf2', class: CSS$10.iconStart, flipRtl: iconFlipRtl === "start" || iconFlipRtl === "both", icon: this.iconStart, scale: getIconScale(this.scale) }));
+        const contentNode = (hAsync("span", { key: '54082db67b2cd412f5167950609387884b8ac878', class: CSS$10.itemContent }, hAsync("slot", { key: 'b7c949c4dffae482fd398c21e062763fc1f06ba8' })));
+        const iconEndEl = (hAsync("calcite-icon", { key: 'c9e8ce2e26943b228fd3912661486f5a7b58d8c2', class: CSS$10.iconEnd, flipRtl: iconFlipRtl === "end" || iconFlipRtl === "both", icon: this.iconEnd, scale: getIconScale(this.scale) }));
         const slottedContent = this.iconStart && this.iconEnd
             ? [iconStartEl, contentNode, iconEndEl]
             : this.iconStart
@@ -21798,7 +21799,7 @@ class DropdownItem {
                 : this.iconEnd
                     ? [contentNode, iconEndEl]
                     : contentNode;
-        const contentEl = !href ? (slottedContent) : (hAsync("a", { "aria-label": label, class: CSS$$.link, href: href, ref: (el) => (this.childLink = el), rel: this.rel, tabIndex: -1, target: this.target }, slottedContent));
+        const contentEl = !href ? (slottedContent) : (hAsync("a", { "aria-label": label, class: CSS$10.link, href: href, ref: (el) => (this.childLink = el), rel: this.rel, tabIndex: -1, target: this.target }, slottedContent));
         const itemRole = href
             ? null
             : selectionMode === "single"
@@ -21809,9 +21810,9 @@ class DropdownItem {
         const itemAria = selectionMode !== "none" ? toAriaBoolean(this.selected) : null;
         const { disabled } = this;
         return (hAsync(Host, { key: '3ccaf1fea0138cbd2bbb93fb332746587e792f6e', "aria-checked": itemAria, "aria-label": !href ? label : "", role: itemRole, tabIndex: disabled ? -1 : 0 }, hAsync(InteractiveContainer, { key: '0fc367e9272db04f7b620913774374e9a889cc55', disabled: disabled }, hAsync("div", { key: 'd019973424b439f54f7b269cc48747d52ab7ede3', class: {
-                [CSS$$.container]: true,
-                [CSS$$.containerNone]: selectionMode === "none",
-            } }, selectionMode !== "none" ? (hAsync("calcite-icon", { class: CSS$$.icon, icon: selectionMode === "multiple" ? "check" : "bullet-point", scale: getIconScale(this.scale) })) : null, contentEl))));
+                [CSS$10.container]: true,
+                [CSS$10.containerNone]: selectionMode === "none",
+            } }, selectionMode !== "none" ? (hAsync("calcite-icon", { class: CSS$10.icon, icon: selectionMode === "multiple" ? "check" : "bullet-point", scale: getIconScale(this.scale) })) : null, contentEl))));
     }
     //--------------------------------------------------------------------------
     //
@@ -21919,7 +21920,7 @@ class DropdownItem {
     }; }
 }
 
-const CSS$_ = {
+const CSS$$ = {
     button: "button",
 };
 const ICONS$d = {
@@ -21981,7 +21982,7 @@ class Fab {
     render() {
         const { appearance, kind, disabled, loading, scale, textEnabled, icon, label, text, iconFlipRtl, } = this;
         const title = !textEnabled ? label || text || null : null;
-        return (hAsync(InteractiveContainer, { key: '0466fa59a357502db1c407ffd8008f3620216bbe', disabled: disabled }, hAsync("calcite-button", { key: 'd7cc0cf746d373240a3fb2274d3eeb6283bef052', appearance: appearance === "solid" ? "solid" : "outline-fill", class: CSS$_.button, disabled: disabled, iconFlipRtl: iconFlipRtl ? "start" : null, iconStart: icon, kind: kind, label: label, loading: loading, ref: (buttonEl) => {
+        return (hAsync(InteractiveContainer, { key: '0466fa59a357502db1c407ffd8008f3620216bbe', disabled: disabled }, hAsync("calcite-button", { key: 'd7cc0cf746d373240a3fb2274d3eeb6283bef052', appearance: appearance === "solid" ? "solid" : "outline-fill", class: CSS$$.button, disabled: disabled, iconFlipRtl: iconFlipRtl ? "start" : null, iconStart: icon, kind: kind, label: label, loading: loading, ref: (buttonEl) => {
                 this.buttonEl = buttonEl;
             }, round: true, scale: scale, title: title, type: "button", width: "auto" }, this.textEnabled ? this.text : null)));
     }
@@ -22009,7 +22010,7 @@ class Fab {
     }; }
 }
 
-const CSS$Z = {
+const CSS$_ = {
     container: "container",
     searchIcon: "search-icon",
 };
@@ -22148,7 +22149,7 @@ class Filter {
     // --------------------------------------------------------------------------
     render() {
         const { disabled, scale } = this;
-        return (hAsync(InteractiveContainer, { key: '45e216d51b5b12ddc4295ade0be6dd451aeef851', disabled: disabled }, hAsync("div", { key: '72a041cd4c1a9afcc3e20dc48719024fa0bd91d8', class: CSS$Z.container }, hAsync("label", { key: '94096613f5abe9d5334b47986556a7d8aaac4556' }, hAsync("calcite-input", { key: 'cb61179b03fca1436146f80a96adc6177fb92a2e', clearable: true, disabled: disabled, icon: ICONS$c.search, label: this.messages.label, messageOverrides: { clear: this.messages.clear }, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, ref: (el) => {
+        return (hAsync(InteractiveContainer, { key: '45e216d51b5b12ddc4295ade0be6dd451aeef851', disabled: disabled }, hAsync("div", { key: '72a041cd4c1a9afcc3e20dc48719024fa0bd91d8', class: CSS$_.container }, hAsync("label", { key: '94096613f5abe9d5334b47986556a7d8aaac4556' }, hAsync("calcite-input", { key: 'cb61179b03fca1436146f80a96adc6177fb92a2e', clearable: true, disabled: disabled, icon: ICONS$c.search, label: this.messages.label, messageOverrides: { clear: this.messages.clear }, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, ref: (el) => {
                 this.textInput = el;
             }, scale: scale, type: "text", value: this.value })))));
     }
@@ -22187,7 +22188,7 @@ class Filter {
     }; }
 }
 
-const CSS$Y = {
+const CSS$Z = {
     frame: "frame",
     frameAdvancing: "frame--advancing",
     frameRetreating: "frame--retreating",
@@ -22313,9 +22314,9 @@ class Flow {
     render() {
         const { flowDirection } = this;
         const frameDirectionClasses = {
-            [CSS$Y.frame]: true,
-            [CSS$Y.frameAdvancing]: flowDirection === "advancing",
-            [CSS$Y.frameRetreating]: flowDirection === "retreating",
+            [CSS$Z.frame]: true,
+            [CSS$Z.frameAdvancing]: flowDirection === "advancing",
+            [CSS$Z.frameRetreating]: flowDirection === "retreating",
         };
         return (hAsync("div", { key: '3d91e0e8d0ffb94e3e8d563e3b34b47b23b3987b', class: frameDirectionClasses }, hAsync("slot", { key: 'fb32070e340ba86196b5150d2bcc884ac2d94901' })));
     }
@@ -22338,7 +22339,7 @@ class Flow {
     }; }
 }
 
-const CSS$X = {
+const CSS$Y = {
     backButton: "back-button",
 };
 const ICONS$b = {
@@ -22513,7 +22514,7 @@ class FlowItem {
         const { showBackButton, backButtonClick, messages } = this;
         const label = messages.back;
         const icon = rtl ? ICONS$b.backRight : ICONS$b.backLeft;
-        return showBackButton ? (hAsync("calcite-action", { "aria-label": label, class: CSS$X.backButton, icon: icon, key: "flow-back-button", onClick: backButtonClick, ref: this.setBackRef, scale: "s", slot: "header-actions-start", text: label, title: label })) : null;
+        return showBackButton ? (hAsync("calcite-action", { "aria-label": label, class: CSS$Y.backButton, icon: icon, key: "flow-back-button", onClick: backButtonClick, ref: this.setBackRef, scale: "s", slot: "header-actions-start", text: label, title: label })) : null;
     }
     render() {
         const { collapsed, collapseDirection, collapsible, closable, closed, description, disabled, heading, headingLevel, loading, menuOpen, messages, overlayPositioning, beforeClose, } = this;
@@ -22780,7 +22781,7 @@ class Graph {
     }; }
 }
 
-const CSS$W = {
+const CSS$X = {
     handle: "handle",
     handleSelected: "handle--selected",
 };
@@ -22937,7 +22938,7 @@ class Handle {
     render() {
         return (
         // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486
-        hAsync("span", { key: 'fc7e1d455dfa8a6815cfbfaead80624a02980bf0', "aria-checked": this.disabled ? null : toAriaBoolean(this.selected), "aria-disabled": this.disabled ? toAriaBoolean(this.disabled) : null, "aria-label": this.disabled ? null : this.getAriaText("label"), class: { [CSS$W.handle]: true, [CSS$W.handleSelected]: !this.disabled && this.selected }, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
+        hAsync("span", { key: 'fc7e1d455dfa8a6815cfbfaead80624a02980bf0', "aria-checked": this.disabled ? null : toAriaBoolean(this.selected), "aria-disabled": this.disabled ? toAriaBoolean(this.disabled) : null, "aria-label": this.disabled ? null : this.getAriaText("label"), class: { [CSS$X.handle]: true, [CSS$X.handleSelected]: !this.disabled && this.selected }, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
                 this.handleButton = el;
             },
             // role of radio is being applied to allow space key to select in screen readers
@@ -22978,7 +22979,7 @@ class Handle {
     }; }
 }
 
-const CSS$V = {
+const CSS$W = {
     icon: "icon",
     flipRtl: "flip-rtl",
 };
@@ -23026,7 +23027,7 @@ class Icon {
         const semantic = !!textLabel;
         const paths = [].concat(pathData || "");
         return (hAsync(Host, { key: 'cc43afdebd39df596be0a30677a9be5ba0db4fe0', "aria-hidden": toAriaBoolean(!semantic), "aria-label": semantic ? textLabel : null, role: semantic ? "img" : null }, hAsync("svg", { key: 'a40833fc10f8bb7f287eb0c75f7437cb18880603', "aria-hidden": "true", class: {
-                [CSS$V.flipRtl]: dir === "rtl" && flipRtl,
+                [CSS$W.flipRtl]: dir === "rtl" && flipRtl,
                 svg: true,
             }, fill: "currentColor", height: "100%", viewBox: `0 0 ${size} ${size}`, width: "100%", xmlns: "http://www.w3.org/2000/svg" }, paths.map((path) => typeof path === "string" ? (hAsync("path", { d: path })) : (hAsync("path", { d: path.d, opacity: "opacity" in path ? path.opacity : 1 }))))));
     }
@@ -23072,7 +23073,7 @@ class Icon {
     }; }
 }
 
-const CSS$U = {
+const CSS$V = {
     wrapper: "wrapper",
     confirmChangesButton: "confirm-changes-button",
     cancelEditingButton: "cancel-editing-button",
@@ -23224,12 +23225,12 @@ class InlineEditable {
         updateHostInteraction(this);
     }
     render() {
-        return (hAsync(InteractiveContainer, { key: 'd93607e37bf516e5fa3726e8e4715c64113b771c', disabled: this.disabled }, hAsync("div", { key: '5b0b9dae803d012be8a1b716659f424e9f8100f3', class: CSS$U.wrapper, onClick: this.enableEditingHandler, onKeyDown: this.escapeKeyHandler }, hAsync("div", { key: '3036a2f71c798fb649867b435702d28fcc56b93e', class: CSS$U.inputWrapper }, hAsync("slot", { key: 'def90e123156ccc1bfd762ab352bca6b90324f03' })), hAsync("div", { key: '090a1a87210cbfafd5e2e45ab09805f2523f46ac', class: CSS$U.controlsWrapper }, hAsync("calcite-button", { key: 'c45936623bed1a6a10e3fb72e15dd3bd632cf8f1', appearance: "transparent", class: CSS$U.enableEditingButton, disabled: this.disabled, iconStart: "pencil", kind: "neutral", label: this.messages.enableEditing, onClick: this.enableEditingHandler, ref: (el) => (this.enableEditingButton = el), scale: this.scale, style: {
+        return (hAsync(InteractiveContainer, { key: 'd93607e37bf516e5fa3726e8e4715c64113b771c', disabled: this.disabled }, hAsync("div", { key: '5b0b9dae803d012be8a1b716659f424e9f8100f3', class: CSS$V.wrapper, onClick: this.enableEditingHandler, onKeyDown: this.escapeKeyHandler }, hAsync("div", { key: '3036a2f71c798fb649867b435702d28fcc56b93e', class: CSS$V.inputWrapper }, hAsync("slot", { key: 'def90e123156ccc1bfd762ab352bca6b90324f03' })), hAsync("div", { key: '090a1a87210cbfafd5e2e45ab09805f2523f46ac', class: CSS$V.controlsWrapper }, hAsync("calcite-button", { key: 'c45936623bed1a6a10e3fb72e15dd3bd632cf8f1', appearance: "transparent", class: CSS$V.enableEditingButton, disabled: this.disabled, iconStart: "pencil", kind: "neutral", label: this.messages.enableEditing, onClick: this.enableEditingHandler, ref: (el) => (this.enableEditingButton = el), scale: this.scale, style: {
                 opacity: this.editingEnabled ? "0" : "1",
                 width: this.editingEnabled ? "0" : "inherit",
             }, type: "button" }), this.shouldShowControls && [
-            hAsync("div", { key: 'da8516b462c97bc00e261c6e6959a26bdb8c5312', class: CSS$U.cancelEditingButtonWrapper }, hAsync("calcite-button", { key: 'd19dba3fad6d1933a212e331aeb1b51c2b480397', appearance: "transparent", class: CSS$U.cancelEditingButton, disabled: this.disabled, iconStart: "x", kind: "neutral", label: this.messages.cancelEditing, onClick: this.cancelEditingHandler, ref: (el) => (this.cancelEditingButton = el), scale: this.scale, type: "button" })),
-            hAsync("calcite-button", { key: 'e487af0adfa1ea3da2cd0ec9f39a88fe19c682ed', appearance: "solid", class: CSS$U.confirmChangesButton, disabled: this.disabled, iconStart: "check", kind: "brand", label: this.messages.confirmChanges, loading: this.loading, onClick: this.confirmChangesHandler, ref: (el) => (this.confirmEditingButton = el), scale: this.scale, type: "button" }),
+            hAsync("div", { key: 'da8516b462c97bc00e261c6e6959a26bdb8c5312', class: CSS$V.cancelEditingButtonWrapper }, hAsync("calcite-button", { key: 'd19dba3fad6d1933a212e331aeb1b51c2b480397', appearance: "transparent", class: CSS$V.cancelEditingButton, disabled: this.disabled, iconStart: "x", kind: "neutral", label: this.messages.cancelEditing, onClick: this.cancelEditingHandler, ref: (el) => (this.cancelEditingButton = el), scale: this.scale, type: "button" })),
+            hAsync("calcite-button", { key: 'e487af0adfa1ea3da2cd0ec9f39a88fe19c682ed', appearance: "solid", class: CSS$V.confirmChangesButton, disabled: this.disabled, iconStart: "check", kind: "brand", label: this.messages.confirmChanges, loading: this.loading, onClick: this.confirmChangesHandler, ref: (el) => (this.confirmEditingButton = el), scale: this.scale, type: "button" }),
         ]))));
     }
     //--------------------------------------------------------------------------
@@ -23313,7 +23314,7 @@ class InlineEditable {
     }; }
 }
 
-const CSS$T = {
+const CSS$U = {
     loader: "loader",
     clearButton: "clear-button",
     editingEnabled: "editing-enabled",
@@ -23973,21 +23974,21 @@ class Input {
     // --------------------------------------------------------------------------
     render() {
         const dir = getElementDir(this.el);
-        const loader = (hAsync("div", { key: '84c0bd7785985b5d3188bfcba054120fd32687be', class: CSS$T.loader }, hAsync("calcite-progress", { key: '7f9df66f96b36087177fd8a82dd44f8a216a3a02', label: this.messages.loading, type: "indeterminate" })));
-        const inputClearButton = (hAsync("button", { key: '320a27ded0752938ef6eb824e2fdf23de510e9fc', "aria-label": this.messages.clear, class: CSS$T.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { key: '800e1cc87d8f4c8e915c01f74b4fd551c5daed4b', icon: "x", scale: getIconScale(this.scale) })));
-        const iconEl = (hAsync("calcite-icon", { key: 'd22e551c7f109a1bc59670a766e6020887793346', class: CSS$T.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: getIconScale(this.scale) }));
+        const loader = (hAsync("div", { key: '84c0bd7785985b5d3188bfcba054120fd32687be', class: CSS$U.loader }, hAsync("calcite-progress", { key: '7f9df66f96b36087177fd8a82dd44f8a216a3a02', label: this.messages.loading, type: "indeterminate" })));
+        const inputClearButton = (hAsync("button", { key: '320a27ded0752938ef6eb824e2fdf23de510e9fc', "aria-label": this.messages.clear, class: CSS$U.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { key: '800e1cc87d8f4c8e915c01f74b4fd551c5daed4b', icon: "x", scale: getIconScale(this.scale) })));
+        const iconEl = (hAsync("calcite-icon", { key: 'd22e551c7f109a1bc59670a766e6020887793346', class: CSS$U.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: getIconScale(this.scale) }));
         const isHorizontalNumberButton = this.numberButtonType === "horizontal";
         const numberButtonsHorizontalUp = (hAsync("button", { key: 'd481136fc775193bdbd5a74634ed32a4964da0af', "aria-hidden": "true", class: {
-                [CSS$T.numberButtonItem]: true,
-                [CSS$T.buttonItemHorizontal]: isHorizontalNumberButton,
+                [CSS$U.numberButtonItem]: true,
+                [CSS$U.buttonItemHorizontal]: isHorizontalNumberButton,
             }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onPointerDown: this.numberButtonPointerDownHandler, onPointerOut: this.numberButtonPointerUpAndOutHandler, onPointerUp: this.numberButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { key: 'fc7d8f85747204cdba07c794cb8b645477f7ab49', icon: "chevron-up", scale: getIconScale(this.scale) })));
         const numberButtonsHorizontalDown = (hAsync("button", { key: '0b70f6228a37975997fc7e6f060aed85709eb992', "aria-hidden": "true", class: {
-                [CSS$T.numberButtonItem]: true,
-                [CSS$T.buttonItemHorizontal]: isHorizontalNumberButton,
+                [CSS$U.numberButtonItem]: true,
+                [CSS$U.buttonItemHorizontal]: isHorizontalNumberButton,
             }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.numberButtonPointerDownHandler, onPointerOut: this.numberButtonPointerUpAndOutHandler, onPointerUp: this.numberButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { key: '22335c3ef4d615b4938b8ea1c2bc375eec65fd1b', icon: "chevron-down", scale: getIconScale(this.scale) })));
-        const numberButtonsVertical = (hAsync("div", { key: 'd588f6413ab8cb2ee9bb25b7fa6c1ae436c09727', class: CSS$T.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
-        const prefixText = hAsync("div", { key: 'd653764ca74047a6b1c5a8526e1de5b5ebec2f95', class: CSS$T.prefix }, this.prefixText);
-        const suffixText = hAsync("div", { key: 'a6d815022a67a216ecbf6a98476dd9c84f393031', class: CSS$T.suffix }, this.suffixText);
+        const numberButtonsVertical = (hAsync("div", { key: 'd588f6413ab8cb2ee9bb25b7fa6c1ae436c09727', class: CSS$U.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
+        const prefixText = hAsync("div", { key: 'd653764ca74047a6b1c5a8526e1de5b5ebec2f95', class: CSS$U.prefix }, this.prefixText);
+        const suffixText = hAsync("div", { key: 'a6d815022a67a216ecbf6a98476dd9c84f393031', class: CSS$U.suffix }, this.suffixText);
         const autofocus = this.el.autofocus || this.el.hasAttribute("autofocus") ? true : null;
         const enterKeyHint = this.el.enterKeyHint || this.el.getAttribute("enterkeyhint");
         const inputMode = this.el.inputMode || this.el.getAttribute("inputmode");
@@ -23995,15 +23996,15 @@ class Input {
         const childEl = this.type !== "number"
             ? [
                 hAsync(this.childElType, { accept: this.accept, "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: autofocus, class: {
-                        [CSS$T.editingEnabled]: this.editingEnabled,
-                        [CSS$T.inlineChild]: !!this.inlineEditableEl,
+                        [CSS$U.editingEnabled]: this.editingEnabled,
+                        [CSS$U.inlineChild]: !!this.inlineEditableEl,
                     }, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: enterKeyHint, inputMode: inputMode, max: this.maxString, maxLength: this.maxLength, min: this.minString, minLength: this.minLength, multiple: this.multiple, name: this.name, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler, onFocus: this.inputFocusHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeyDownHandler, onKeyUp: this.inputKeyUpHandler, pattern: this.pattern, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildElRef, required: this.required ? true : null, step: this.step, tabIndex: this.disabled || (this.inlineEditableEl && !this.editingEnabled) ? -1 : null, type: this.type, value: this.value }),
-                this.isTextarea ? (hAsync("div", { class: CSS$T.resizeIconWrapper }, hAsync("calcite-icon", { icon: "chevron-down", scale: getIconScale(this.scale) }))) : null,
+                this.isTextarea ? (hAsync("div", { class: CSS$U.resizeIconWrapper }, hAsync("calcite-icon", { icon: "chevron-down", scale: getIconScale(this.scale) }))) : null,
             ]
             : null;
-        return (hAsync(Host, { key: '8315bd55591b2d846d69d6070571a17e0030d5c7', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, hAsync(InteractiveContainer, { key: 'af0643a63ad73a63a4cac7fda338f47cdd890bdd', disabled: this.disabled }, hAsync("div", { key: 'b92bfabff6dfc6115c0f289cc7c7b788862f2054', class: { [CSS$T.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly
+        return (hAsync(Host, { key: '8315bd55591b2d846d69d6070571a17e0030d5c7', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, hAsync(InteractiveContainer, { key: 'af0643a63ad73a63a4cac7fda338f47cdd890bdd', disabled: this.disabled }, hAsync("div", { key: 'b92bfabff6dfc6115c0f289cc7c7b788862f2054', class: { [CSS$U.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly
             ? numberButtonsHorizontalDown
-            : null, this.prefixText ? prefixText : null, hAsync("div", { key: '99b9ced0f2b9ee174b5c87603fd7cc6742d6da8e', class: CSS$T.wrapper }, localeNumberInput, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), hAsync("div", { key: '86159febefcb1d62d05b2c15f7ffb5cec2810e69', class: CSS$T.actionWrapper }, hAsync("slot", { key: '4e58925d61432853348fb86c9b1fea217ee6f45b', name: SLOTS$l.action })), this.type === "number" && this.numberButtonType === "vertical" && !this.readOnly
+            : null, this.prefixText ? prefixText : null, hAsync("div", { key: '99b9ced0f2b9ee174b5c87603fd7cc6742d6da8e', class: CSS$U.wrapper }, localeNumberInput, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), hAsync("div", { key: '86159febefcb1d62d05b2c15f7ffb5cec2810e69', class: CSS$U.actionWrapper }, hAsync("slot", { key: '4e58925d61432853348fb86c9b1fea217ee6f45b', name: SLOTS$l.action })), this.type === "number" && this.numberButtonType === "vertical" && !this.readOnly
             ? numberButtonsVertical
             : null, this.suffixText ? suffixText : null, this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly
             ? numberButtonsHorizontalUp
@@ -24108,7 +24109,7 @@ function normalizeToCurrentCentury(twoDigitYear) {
     return normalizedYear;
 }
 
-const CSS$S = {
+const CSS$T = {
     assistiveText: "assistive-text",
     calendarWrapper: "calendar-wrapper",
     calendarWrapperEnd: "calendar-wrapper--end",
@@ -24125,7 +24126,7 @@ const CSS$S = {
     chevronIcon: "chevron-icon",
 };
 
-const inputDatePickerCss = "/*!@:host*/.sc-calcite-input-date-picker-h{--calcite-icon-size:1rem;--calcite-spacing-eighth:0.125rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}/*!@:host([disabled])*/[disabled].sc-calcite-input-date-picker-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-input-date-picker-h *.sc-calcite-input-date-picker,.sc-calcite-input-date-picker-h[disabled].sc-calcite-input-date-picker-s>*,.sc-calcite-input-date-picker-h[disabled] .sc-calcite-input-date-picker-s>*{pointer-events:none}/*!@:host*/.sc-calcite-input-date-picker-h{position:relative;display:inline-block;inline-size:100%;overflow:visible;vertical-align:top;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}/*!@:host .menu-container .calcite-floating-ui-anim*/.sc-calcite-input-date-picker-h .menu-container.sc-calcite-input-date-picker .calcite-floating-ui-anim.sc-calcite-input-date-picker{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-z-index);border-radius:0.25rem}/*!@:host .menu-container[data-placement^=bottom] .calcite-floating-ui-anim*/.sc-calcite-input-date-picker-h .menu-container[data-placement^=bottom].sc-calcite-input-date-picker .calcite-floating-ui-anim.sc-calcite-input-date-picker{transform:translateY(-5px)}/*!@:host .menu-container[data-placement^=top] .calcite-floating-ui-anim*/.sc-calcite-input-date-picker-h .menu-container[data-placement^=top].sc-calcite-input-date-picker .calcite-floating-ui-anim.sc-calcite-input-date-picker{transform:translateY(5px)}/*!@:host .menu-container[data-placement^=left] .calcite-floating-ui-anim*/.sc-calcite-input-date-picker-h .menu-container[data-placement^=left].sc-calcite-input-date-picker .calcite-floating-ui-anim.sc-calcite-input-date-picker{transform:translateX(5px)}/*!@:host .menu-container[data-placement^=right] .calcite-floating-ui-anim*/.sc-calcite-input-date-picker-h .menu-container[data-placement^=right].sc-calcite-input-date-picker .calcite-floating-ui-anim.sc-calcite-input-date-picker{transform:translateX(-5px)}/*!@:host .menu-container[data-placement] .calcite-floating-ui-anim--active*/.sc-calcite-input-date-picker-h .menu-container[data-placement].sc-calcite-input-date-picker .calcite-floating-ui-anim--active.sc-calcite-input-date-picker{opacity:1;transform:translate(0)}/*!@:host([scale=s])*/[scale=s].sc-calcite-input-date-picker-h{--calcite-toggle-spacing:0.5rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 1rem)}/*!@:host([scale=m])*/[scale=m].sc-calcite-input-date-picker-h{--calcite-toggle-spacing:0.75rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 1.5rem)}/*!@:host([scale=l])*/[scale=l].sc-calcite-input-date-picker-h{--calcite-toggle-spacing:1rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 2rem)}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-input-date-picker-h[disabled] .sc-calcite-input-date-picker-s>[calcite-hydrated][disabled],[disabled].sc-calcite-input-date-picker-h [calcite-hydrated][disabled].sc-calcite-input-date-picker{opacity:1}/*!@.interaction-container*/.interaction-container.sc-calcite-input-date-picker{display:contents}/*!@.calendar-wrapper*/.calendar-wrapper.sc-calcite-input-date-picker{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);transform:translate3d(0, 0, 0)}/*!@.input-wrapper*/.input-wrapper.sc-calcite-input-date-picker{position:relative}/*!@.input-wrapper .chevron-icon*/.input-wrapper.sc-calcite-input-date-picker .chevron-icon.sc-calcite-input-date-picker{color:var(--calcite-color-text-3)}/*!@.input-wrapper:focus-within .chevron-icon, .input-wrapper:active .chevron-icon, .input-wrapper:hover .chevron-icon*/.input-wrapper.sc-calcite-input-date-picker:focus-within .chevron-icon.sc-calcite-input-date-picker,.input-wrapper.sc-calcite-input-date-picker:active .chevron-icon.sc-calcite-input-date-picker,.input-wrapper.sc-calcite-input-date-picker:hover .chevron-icon.sc-calcite-input-date-picker{color:var(--calcite-color-text-1)}/*!@.toggle-icon*/.toggle-icon.sc-calcite-input-date-picker{position:absolute;display:flex;cursor:pointer;align-items:center;inset-inline-end:0;inset-block:0;padding-inline:var(--calcite-toggle-spacing)}/*!@:host([range]) .input-container*/[range].sc-calcite-input-date-picker-h .input-container.sc-calcite-input-date-picker{display:flex}/*!@:host([range]) .input-wrapper*/[range].sc-calcite-input-date-picker-h .input-wrapper.sc-calcite-input-date-picker{flex:1 1 auto}/*!@:host([range]) .horizontal-arrow-container*/[range].sc-calcite-input-date-picker-h .horizontal-arrow-container.sc-calcite-input-date-picker{display:flex;align-items:center;border-width:1px;border-inline-start-width:0px;border-inline-end-width:0px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-background);padding-block:0px;padding-inline:0.25rem}/*!@:host([range][layout=vertical]) .input-wrapper*/[range][layout=vertical].sc-calcite-input-date-picker-h .input-wrapper.sc-calcite-input-date-picker{inline-size:100%}/*!@:host([range][layout=vertical]) .input-container*/[range][layout=vertical].sc-calcite-input-date-picker-h .input-container.sc-calcite-input-date-picker{flex-direction:column;align-items:flex-start}/*!@:host([range][layout=vertical]) .calendar-wrapper--end*/[range][layout=vertical].sc-calcite-input-date-picker-h .calendar-wrapper--end.sc-calcite-input-date-picker{transform:translate3d(0, 0, 0)}/*!@:host([range][layout=vertical]) .vertical-arrow-container*/[range][layout=vertical].sc-calcite-input-date-picker-h .vertical-arrow-container.sc-calcite-input-date-picker{inset-block-start:1.5rem;position:absolute;z-index:var(--calcite-z-index);margin-inline:1px;background-color:var(--calcite-color-foreground-1);padding-inline:0.625rem;inset-inline-start:0}/*!@.menu-container*/.menu-container.sc-calcite-input-date-picker{--calcite-floating-ui-z-index:var(--calcite-z-index-dropdown);display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index);visibility:hidden}/*!@.menu-container .calcite-floating-ui-anim*/.menu-container.sc-calcite-input-date-picker .calcite-floating-ui-anim.sc-calcite-input-date-picker{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-z-index);border-radius:0.25rem}/*!@.menu-container[data-placement^=bottom] .calcite-floating-ui-anim*/.menu-container[data-placement^=bottom].sc-calcite-input-date-picker .calcite-floating-ui-anim.sc-calcite-input-date-picker{transform:translateY(-5px)}/*!@.menu-container[data-placement^=top] .calcite-floating-ui-anim*/.menu-container[data-placement^=top].sc-calcite-input-date-picker .calcite-floating-ui-anim.sc-calcite-input-date-picker{transform:translateY(5px)}/*!@.menu-container[data-placement^=left] .calcite-floating-ui-anim*/.menu-container[data-placement^=left].sc-calcite-input-date-picker .calcite-floating-ui-anim.sc-calcite-input-date-picker{transform:translateX(5px)}/*!@.menu-container[data-placement^=right] .calcite-floating-ui-anim*/.menu-container[data-placement^=right].sc-calcite-input-date-picker .calcite-floating-ui-anim.sc-calcite-input-date-picker{transform:translateX(-5px)}/*!@.menu-container[data-placement] .calcite-floating-ui-anim--active*/.menu-container[data-placement].sc-calcite-input-date-picker .calcite-floating-ui-anim--active.sc-calcite-input-date-picker{opacity:1;transform:translate(0)}/*!@:host([open]) .menu-container*/[open].sc-calcite-input-date-picker-h .menu-container.sc-calcite-input-date-picker{visibility:visible}/*!@.menu-container--active*/.menu-container--active.sc-calcite-input-date-picker{visibility:visible}/*!@.input .calcite-input__wrapper*/.input.sc-calcite-input-date-picker .calcite-input__wrapper.sc-calcite-input-date-picker{margin-block-start:0px}/*!@:host([range][layout=vertical][scale=m]) .vertical-arrow-container*/[range][layout=vertical][scale=m].sc-calcite-input-date-picker-h .vertical-arrow-container.sc-calcite-input-date-picker{inset-block-start:1.5rem;padding-inline-start:0.75rem}/*!@:host([range][layout=vertical][scale=m]) .vertical-arrow-container calcite-icon*/[range][layout=vertical][scale=m].sc-calcite-input-date-picker-h .vertical-arrow-container.sc-calcite-input-date-picker calcite-icon.sc-calcite-input-date-picker{block-size:0.75rem;inline-size:0.75rem;min-inline-size:0px}/*!@:host([range][layout=vertical][scale=l]) .vertical-arrow-container*/[range][layout=vertical][scale=l].sc-calcite-input-date-picker-h .vertical-arrow-container.sc-calcite-input-date-picker{inset-block-start:2.25rem;padding-inline:0.875rem}/*!@:host([range][layout=vertical][open]) .vertical-arrow-container*/[range][layout=vertical][open].sc-calcite-input-date-picker-h .vertical-arrow-container.sc-calcite-input-date-picker{display:none}/*!@.validation-container*/.validation-container.sc-calcite-input-date-picker{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}/*!@:host([scale=m]) .validation-container,\n:host([scale=l]) .validation-container*/[scale=m].sc-calcite-input-date-picker-h .validation-container.sc-calcite-input-date-picker,[scale=l].sc-calcite-input-date-picker-h .validation-container.sc-calcite-input-date-picker{padding-block-start:0.5rem}/*!@:host([scale=s]) .validation-container*/[scale=s].sc-calcite-input-date-picker-h .validation-container.sc-calcite-input-date-picker{padding-block-start:0.25rem}/*!@::slotted(input[slot=hidden-form-input])*/.sc-calcite-input-date-picker-s>input[slot=hidden-form-input]{margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}/*!@.assistive-text*/.assistive-text.sc-calcite-input-date-picker{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}/*!@:host([hidden])*/[hidden].sc-calcite-input-date-picker-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-input-date-picker{display:none}";
+const inputDatePickerCss = "/*!@:host*/.sc-calcite-input-date-picker-h{--calcite-icon-size:1rem;--calcite-spacing-eighth:0.125rem;--calcite-spacing-quarter:0.25rem;--calcite-spacing-half:0.5rem;--calcite-spacing-three-quarters:0.75rem;--calcite-spacing:1rem;--calcite-spacing-plus-quarter:1.25rem;--calcite-spacing-plus-half:1.5rem;--calcite-spacing-double:2rem;--calcite-menu-min-width:10rem;--calcite-header-min-height:3rem;--calcite-footer-min-height:3rem}/*!@:host([disabled])*/[disabled].sc-calcite-input-date-picker-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-input-date-picker-h *.sc-calcite-input-date-picker,.sc-calcite-input-date-picker-h[disabled].sc-calcite-input-date-picker-s>*,.sc-calcite-input-date-picker-h[disabled] .sc-calcite-input-date-picker-s>*{pointer-events:none}/*!@:host*/.sc-calcite-input-date-picker-h{position:relative;display:inline-block;inline-size:100%;overflow:visible;vertical-align:top;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}/*!@:host .menu-container .calcite-floating-ui-anim*/.sc-calcite-input-date-picker-h .menu-container.sc-calcite-input-date-picker .calcite-floating-ui-anim.sc-calcite-input-date-picker{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:inset, left, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-z-index);border-radius:0.25rem}/*!@:host .menu-container[data-placement^=bottom] .calcite-floating-ui-anim*/.sc-calcite-input-date-picker-h .menu-container[data-placement^=bottom].sc-calcite-input-date-picker .calcite-floating-ui-anim.sc-calcite-input-date-picker{inset-block-start:-5px}/*!@:host .menu-container[data-placement^=top] .calcite-floating-ui-anim*/.sc-calcite-input-date-picker-h .menu-container[data-placement^=top].sc-calcite-input-date-picker .calcite-floating-ui-anim.sc-calcite-input-date-picker{inset-block-start:5px}/*!@:host .menu-container[data-placement^=left] .calcite-floating-ui-anim*/.sc-calcite-input-date-picker-h .menu-container[data-placement^=left].sc-calcite-input-date-picker .calcite-floating-ui-anim.sc-calcite-input-date-picker{left:5px}/*!@:host .menu-container[data-placement^=right] .calcite-floating-ui-anim*/.sc-calcite-input-date-picker-h .menu-container[data-placement^=right].sc-calcite-input-date-picker .calcite-floating-ui-anim.sc-calcite-input-date-picker{left:-5px}/*!@:host .menu-container[data-placement] .calcite-floating-ui-anim--active*/.sc-calcite-input-date-picker-h .menu-container[data-placement].sc-calcite-input-date-picker .calcite-floating-ui-anim--active.sc-calcite-input-date-picker{opacity:1;inset-block:0;left:0}/*!@:host([scale=s])*/[scale=s].sc-calcite-input-date-picker-h{--calcite-toggle-spacing:0.5rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 1rem)}/*!@:host([scale=m])*/[scale=m].sc-calcite-input-date-picker-h{--calcite-toggle-spacing:0.75rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 1.5rem)}/*!@:host([scale=l])*/[scale=l].sc-calcite-input-date-picker-h{--calcite-toggle-spacing:1rem;--calcite-internal-input-text-input-padding-inline-end:calc(var(--calcite-toggle-spacing) + 2rem)}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-input-date-picker-h[disabled] .sc-calcite-input-date-picker-s>[calcite-hydrated][disabled],[disabled].sc-calcite-input-date-picker-h [calcite-hydrated][disabled].sc-calcite-input-date-picker{opacity:1}/*!@.interaction-container*/.interaction-container.sc-calcite-input-date-picker{display:contents}/*!@.calendar-wrapper*/.calendar-wrapper.sc-calcite-input-date-picker{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);transform:translate3d(0, 0, 0)}/*!@.input-wrapper*/.input-wrapper.sc-calcite-input-date-picker{position:relative}/*!@.input-wrapper .chevron-icon*/.input-wrapper.sc-calcite-input-date-picker .chevron-icon.sc-calcite-input-date-picker{color:var(--calcite-color-text-3)}/*!@.input-wrapper:focus-within .chevron-icon, .input-wrapper:active .chevron-icon, .input-wrapper:hover .chevron-icon*/.input-wrapper.sc-calcite-input-date-picker:focus-within .chevron-icon.sc-calcite-input-date-picker,.input-wrapper.sc-calcite-input-date-picker:active .chevron-icon.sc-calcite-input-date-picker,.input-wrapper.sc-calcite-input-date-picker:hover .chevron-icon.sc-calcite-input-date-picker{color:var(--calcite-color-text-1)}/*!@.toggle-icon*/.toggle-icon.sc-calcite-input-date-picker{position:absolute;display:flex;cursor:pointer;align-items:center;inset-inline-end:0;inset-block:0;padding-inline:var(--calcite-toggle-spacing)}/*!@:host([range]) .input-container*/[range].sc-calcite-input-date-picker-h .input-container.sc-calcite-input-date-picker{display:flex}/*!@:host([range]) .input-wrapper*/[range].sc-calcite-input-date-picker-h .input-wrapper.sc-calcite-input-date-picker{flex:1 1 auto}/*!@:host([range]) .horizontal-arrow-container*/[range].sc-calcite-input-date-picker-h .horizontal-arrow-container.sc-calcite-input-date-picker{display:flex;align-items:center;border-width:1px;border-inline-start-width:0px;border-inline-end-width:0px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-background);padding-block:0px;padding-inline:0.25rem}/*!@:host([range][layout=vertical]) .input-wrapper*/[range][layout=vertical].sc-calcite-input-date-picker-h .input-wrapper.sc-calcite-input-date-picker{inline-size:100%}/*!@:host([range][layout=vertical]) .input-container*/[range][layout=vertical].sc-calcite-input-date-picker-h .input-container.sc-calcite-input-date-picker{flex-direction:column;align-items:flex-start}/*!@:host([range][layout=vertical]) .calendar-wrapper--end*/[range][layout=vertical].sc-calcite-input-date-picker-h .calendar-wrapper--end.sc-calcite-input-date-picker{transform:translate3d(0, 0, 0)}/*!@:host([range][layout=vertical]) .vertical-arrow-container*/[range][layout=vertical].sc-calcite-input-date-picker-h .vertical-arrow-container.sc-calcite-input-date-picker{inset-block-start:1.5rem;position:absolute;z-index:var(--calcite-z-index);margin-inline:1px;background-color:var(--calcite-color-foreground-1);padding-inline:0.625rem;inset-inline-start:0}/*!@.menu-container*/.menu-container.sc-calcite-input-date-picker{--calcite-floating-ui-z-index:var(--calcite-z-index-dropdown);display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index);visibility:hidden}/*!@.menu-container .calcite-floating-ui-anim*/.menu-container.sc-calcite-input-date-picker .calcite-floating-ui-anim.sc-calcite-input-date-picker{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:inset, left, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-z-index);border-radius:0.25rem}/*!@.menu-container[data-placement^=bottom] .calcite-floating-ui-anim*/.menu-container[data-placement^=bottom].sc-calcite-input-date-picker .calcite-floating-ui-anim.sc-calcite-input-date-picker{inset-block-start:-5px}/*!@.menu-container[data-placement^=top] .calcite-floating-ui-anim*/.menu-container[data-placement^=top].sc-calcite-input-date-picker .calcite-floating-ui-anim.sc-calcite-input-date-picker{inset-block-start:5px}/*!@.menu-container[data-placement^=left] .calcite-floating-ui-anim*/.menu-container[data-placement^=left].sc-calcite-input-date-picker .calcite-floating-ui-anim.sc-calcite-input-date-picker{left:5px}/*!@.menu-container[data-placement^=right] .calcite-floating-ui-anim*/.menu-container[data-placement^=right].sc-calcite-input-date-picker .calcite-floating-ui-anim.sc-calcite-input-date-picker{left:-5px}/*!@.menu-container[data-placement] .calcite-floating-ui-anim--active*/.menu-container[data-placement].sc-calcite-input-date-picker .calcite-floating-ui-anim--active.sc-calcite-input-date-picker{opacity:1;inset-block:0;left:0}/*!@:host([open]) .menu-container*/[open].sc-calcite-input-date-picker-h .menu-container.sc-calcite-input-date-picker{visibility:visible}/*!@.menu-container--active*/.menu-container--active.sc-calcite-input-date-picker{visibility:visible}/*!@.input .calcite-input__wrapper*/.input.sc-calcite-input-date-picker .calcite-input__wrapper.sc-calcite-input-date-picker{margin-block-start:0px}/*!@:host([range][layout=vertical][scale=m]) .vertical-arrow-container*/[range][layout=vertical][scale=m].sc-calcite-input-date-picker-h .vertical-arrow-container.sc-calcite-input-date-picker{inset-block-start:1.5rem;padding-inline-start:0.75rem}/*!@:host([range][layout=vertical][scale=m]) .vertical-arrow-container calcite-icon*/[range][layout=vertical][scale=m].sc-calcite-input-date-picker-h .vertical-arrow-container.sc-calcite-input-date-picker calcite-icon.sc-calcite-input-date-picker{block-size:0.75rem;inline-size:0.75rem;min-inline-size:0px}/*!@:host([range][layout=vertical][scale=l]) .vertical-arrow-container*/[range][layout=vertical][scale=l].sc-calcite-input-date-picker-h .vertical-arrow-container.sc-calcite-input-date-picker{inset-block-start:2.25rem;padding-inline:0.875rem}/*!@:host([range][layout=vertical][open]) .vertical-arrow-container*/[range][layout=vertical][open].sc-calcite-input-date-picker-h .vertical-arrow-container.sc-calcite-input-date-picker{display:none}/*!@.validation-container*/.validation-container.sc-calcite-input-date-picker{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}/*!@:host([scale=m]) .validation-container,\n:host([scale=l]) .validation-container*/[scale=m].sc-calcite-input-date-picker-h .validation-container.sc-calcite-input-date-picker,[scale=l].sc-calcite-input-date-picker-h .validation-container.sc-calcite-input-date-picker{padding-block-start:0.5rem}/*!@:host([scale=s]) .validation-container*/[scale=s].sc-calcite-input-date-picker-h .validation-container.sc-calcite-input-date-picker{padding-block-start:0.25rem}/*!@::slotted(input[slot=hidden-form-input])*/.sc-calcite-input-date-picker-s>input[slot=hidden-form-input]{margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}/*!@.assistive-text*/.assistive-text.sc-calcite-input-date-picker{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}/*!@:host([hidden])*/[hidden].sc-calcite-input-date-picker-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-input-date-picker{display:none}";
 var CalciteInputDatePickerStyle0 = inputDatePickerCss;
 
 class InputDatePicker {
@@ -24173,7 +24174,7 @@ class InputDatePicker {
             const currentTarget = event.currentTarget;
             const position = currentTarget.getAttribute("data-position");
             const path = event.composedPath();
-            const wasToggleClicked = path.find((el) => el.classList?.contains(CSS$S.toggleIcon));
+            const wasToggleClicked = path.find((el) => el.classList?.contains(CSS$T.toggleIcon));
             if (wasToggleClicked) {
                 const targetInput = position === "start" ? startInput : endInput;
                 targetInput.setFocus();
@@ -24592,28 +24593,28 @@ class InputDatePicker {
             locale: effectiveLocale,
             useGrouping: false,
         };
-        return (hAsync(Host, { key: 'd2c7596b3d8c5bf59a47171801a73cf8325b0214', onBlur: this.blurHandler, onKeyDown: this.keyDownHandler }, hAsync(InteractiveContainer, { key: 'c9b2355ed515748260b93c580e7ce462fb363bb9', disabled: this.disabled }, this.localeData && (hAsync("div", { key: 'b5ffdad5ecaf135d5d74e13f0eb148cd689d8276', class: CSS$S.inputContainer }, hAsync("div", { key: '6950ddff12c7588c984fe86590938e4df8ce4ac0', class: CSS$S.inputWrapper, "data-position": "start", onClick: this.onInputWrapperClick, onPointerDown: this.onInputWrapperPointerDown, ref: this.setStartWrapper }, hAsync("calcite-input-text", { key: 'd4444a1cccbf8112dfdee4ebaff7b4da246fd168', "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-describedby": this.placeholderTextId, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", class: {
-                [CSS$S.input]: true,
-                [CSS$S.inputNoBottomBorder]: this.layout === "vertical" && this.range,
+        return (hAsync(Host, { key: 'd2c7596b3d8c5bf59a47171801a73cf8325b0214', onBlur: this.blurHandler, onKeyDown: this.keyDownHandler }, hAsync(InteractiveContainer, { key: 'c9b2355ed515748260b93c580e7ce462fb363bb9', disabled: this.disabled }, this.localeData && (hAsync("div", { key: 'b5ffdad5ecaf135d5d74e13f0eb148cd689d8276', class: CSS$T.inputContainer }, hAsync("div", { key: '6950ddff12c7588c984fe86590938e4df8ce4ac0', class: CSS$T.inputWrapper, "data-position": "start", onClick: this.onInputWrapperClick, onPointerDown: this.onInputWrapperPointerDown, ref: this.setStartWrapper }, hAsync("calcite-input-text", { key: 'd4444a1cccbf8112dfdee4ebaff7b4da246fd168', "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-describedby": this.placeholderTextId, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", class: {
+                [CSS$T.input]: true,
+                [CSS$T.inputNoBottomBorder]: this.layout === "vertical" && this.range,
             }, disabled: disabled, icon: "calendar", onCalciteInputTextInput: this.calciteInternalInputInputHandler, onCalciteInternalInputTextBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputTextFocus: this.startInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, ref: this.setStartInput, role: "combobox", scale: this.scale, status: this.status }), !this.readOnly &&
-            this.renderToggleIcon(this.open && this.focusedInput === "start"), hAsync("span", { key: 'fc01c4d6abf41f6d3de3553828d5eba47ab29f4e', "aria-hidden": "true", class: CSS$S.assistiveText, id: this.placeholderTextId }, "Date Format: ", this.localeData?.placeholder)), hAsync("div", { key: '998ee127b35ce6ea8ab4481c7c9034c4b7175726', "aria-hidden": toAriaBoolean(!this.open), "aria-label": messages.chooseDate, "aria-live": "polite", "aria-modal": "true", class: {
-                [CSS$S.menu]: true,
-                [CSS$S.menuActive]: this.open,
+            this.renderToggleIcon(this.open && this.focusedInput === "start"), hAsync("span", { key: 'fc01c4d6abf41f6d3de3553828d5eba47ab29f4e', "aria-hidden": "true", class: CSS$T.assistiveText, id: this.placeholderTextId }, "Date Format: ", this.localeData?.placeholder)), hAsync("div", { key: '998ee127b35ce6ea8ab4481c7c9034c4b7175726', "aria-hidden": toAriaBoolean(!this.open), "aria-label": messages.chooseDate, "aria-live": "polite", "aria-modal": "true", class: {
+                [CSS$T.menu]: true,
+                [CSS$T.menuActive]: this.open,
             }, id: this.dialogId, ref: this.setFloatingEl, role: "dialog" }, hAsync("div", { key: '7fd228d5a4871a71acda67d8cddc19de68243c53', class: {
-                [CSS$S.calendarWrapper]: true,
-                [CSS$S.calendarWrapperEnd]: this.focusedInput === "end",
+                [CSS$T.calendarWrapper]: true,
+                [CSS$T.calendarWrapperEnd]: this.focusedInput === "end",
                 [FloatingCSS.animation]: true,
                 [FloatingCSS.animationActive]: this.open,
-            }, ref: this.setTransitionEl }, hAsync("calcite-date-picker", { key: '5477699016423ab41aee9d324100c92d98aa8421', 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, ref: this.setDatePickerRef, scale: this.scale, tabIndex: this.open ? undefined : -1, valueAsDate: this.valueAsDate }))), this.range && this.layout === "horizontal" && (hAsync("div", { key: '0f50ea7872f3b9139d8434972930f2bcf142cf38', class: CSS$S.horizontalArrowContainer }, hAsync("calcite-icon", { key: 'ab18b23a1549bdfd859da64dd6f9d49fe3e96ad0', flipRtl: true, icon: "arrow-right", scale: getIconScale(this.scale) }))), this.range && this.layout === "vertical" && this.scale !== "s" && (hAsync("div", { key: '8691507261f2ee44f12d3496fb2889e84ad55b54', class: CSS$S.verticalArrowContainer }, hAsync("calcite-icon", { key: '6b527d9782fc528041ec0e0e70ecbb85788ac7b2', icon: "arrow-down", scale: getIconScale(this.scale) }))), this.range && (hAsync("div", { key: 'fdfea44f4bd7a8c242a454524a54e1617e1b491b', class: CSS$S.inputWrapper, "data-position": "end", onClick: this.onInputWrapperClick, onPointerDown: this.onInputWrapperPointerDown, ref: this.setEndWrapper }, hAsync("calcite-input-text", { key: '7c907100f5388b7af81d827ef39544d68babefc1', "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", class: {
-                [CSS$S.input]: true,
-                [CSS$S.inputBorderTopColorOne]: this.layout === "vertical" && this.range,
+            }, ref: this.setTransitionEl }, hAsync("calcite-date-picker", { key: '5477699016423ab41aee9d324100c92d98aa8421', 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, ref: this.setDatePickerRef, scale: this.scale, tabIndex: this.open ? undefined : -1, valueAsDate: this.valueAsDate }))), this.range && this.layout === "horizontal" && (hAsync("div", { key: '0f50ea7872f3b9139d8434972930f2bcf142cf38', class: CSS$T.horizontalArrowContainer }, hAsync("calcite-icon", { key: 'ab18b23a1549bdfd859da64dd6f9d49fe3e96ad0', flipRtl: true, icon: "arrow-right", scale: getIconScale(this.scale) }))), this.range && this.layout === "vertical" && this.scale !== "s" && (hAsync("div", { key: '8691507261f2ee44f12d3496fb2889e84ad55b54', class: CSS$T.verticalArrowContainer }, hAsync("calcite-icon", { key: '6b527d9782fc528041ec0e0e70ecbb85788ac7b2', icon: "arrow-down", scale: getIconScale(this.scale) }))), this.range && (hAsync("div", { key: 'fdfea44f4bd7a8c242a454524a54e1617e1b491b', class: CSS$T.inputWrapper, "data-position": "end", onClick: this.onInputWrapperClick, onPointerDown: this.onInputWrapperPointerDown, ref: this.setEndWrapper }, hAsync("calcite-input-text", { key: '7c907100f5388b7af81d827ef39544d68babefc1', "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", class: {
+                [CSS$T.input]: true,
+                [CSS$T.inputBorderTopColorOne]: this.layout === "vertical" && this.range,
             }, disabled: disabled, icon: "calendar", onCalciteInputTextInput: this.calciteInternalInputInputHandler, onCalciteInternalInputTextBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputTextFocus: this.endInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, ref: this.setEndInput, role: "combobox", scale: this.scale, status: this.status }), !this.readOnly &&
             this.renderToggleIcon(this.open && this.focusedInput === "end"))))), hAsync(HiddenFormInputSlot, { key: '3dd51741ee6ceb9d470b21f81d592965a5d236a4', component: this }), this.validationMessage && this.status === "invalid" ? (hAsync(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     renderToggleIcon(open) {
         return (
         // we set tab index to -1 to prevent delegatesFocus from stealing focus before we can set it
-        hAsync("span", { class: CSS$S.toggleIcon, tabIndex: -1 }, hAsync("calcite-icon", { class: CSS$S.chevronIcon, icon: open ? "chevron-up" : "chevron-down", scale: getIconScale(this.scale) })));
+        hAsync("span", { class: CSS$T.toggleIcon, tabIndex: -1 }, hAsync("calcite-icon", { class: CSS$T.chevronIcon, icon: open ? "chevron-up" : "chevron-down", scale: getIconScale(this.scale) })));
     }
     effectiveLocaleChange() {
         updateMessages(this);
@@ -24888,7 +24889,7 @@ class InputMessage {
     }; }
 }
 
-const CSS$R = {
+const CSS$S = {
     loader: "loader",
     clearButton: "clear-button",
     editingEnabled: "editing-enabled",
@@ -25446,25 +25447,25 @@ class InputNumber {
     // --------------------------------------------------------------------------
     render() {
         const dir = getElementDir(this.el);
-        const loader = (hAsync("div", { key: '4d832947b4a683a0c74473a481e15eda1c3e6c6f', class: CSS$R.loader }, hAsync("calcite-progress", { key: '90103aab3b5ab29cea99511b93ecfc52c2b20545', label: this.messages.loading, type: "indeterminate" })));
-        const inputClearButton = (hAsync("button", { key: '409e8c4235cd733abfe5b46a499ec439432f0dda', "aria-label": this.messages.clear, class: CSS$R.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { key: 'e4ade48bc9c6862d64e08674cb2784f230ce4980', icon: "x", scale: getIconScale(this.scale) })));
-        const iconEl = (hAsync("calcite-icon", { key: 'dc6ce1cb7824c236d776124be25584f1c976f495', class: CSS$R.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: getIconScale(this.scale) }));
+        const loader = (hAsync("div", { key: '4d832947b4a683a0c74473a481e15eda1c3e6c6f', class: CSS$S.loader }, hAsync("calcite-progress", { key: '90103aab3b5ab29cea99511b93ecfc52c2b20545', label: this.messages.loading, type: "indeterminate" })));
+        const inputClearButton = (hAsync("button", { key: '409e8c4235cd733abfe5b46a499ec439432f0dda', "aria-label": this.messages.clear, class: CSS$S.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { key: 'e4ade48bc9c6862d64e08674cb2784f230ce4980', icon: "x", scale: getIconScale(this.scale) })));
+        const iconEl = (hAsync("calcite-icon", { key: 'dc6ce1cb7824c236d776124be25584f1c976f495', class: CSS$S.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: getIconScale(this.scale) }));
         const isHorizontalNumberButton = this.numberButtonType === "horizontal";
         const numberButtonsHorizontalUp = (hAsync("button", { key: 'd08c3ea83d6e00bf97f1e3f3d41a2caf4fb7d5eb', "aria-hidden": "true", class: {
-                [CSS$R.numberButtonItem]: true,
-                [CSS$R.buttonItemHorizontal]: isHorizontalNumberButton,
+                [CSS$S.numberButtonItem]: true,
+                [CSS$S.buttonItemHorizontal]: isHorizontalNumberButton,
             }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerOutHandler, onPointerUp: this.nudgeButtonPointerUpHandler, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { key: '7b55738e70f5aabdac824650fd6314f915b234a0', icon: "chevron-up", scale: getIconScale(this.scale) })));
         const numberButtonsHorizontalDown = (hAsync("button", { key: 'ed7abdf5e2eda7091f34e3808dd15f9090163564', "aria-hidden": "true", class: {
-                [CSS$R.numberButtonItem]: true,
-                [CSS$R.buttonItemHorizontal]: isHorizontalNumberButton,
+                [CSS$S.numberButtonItem]: true,
+                [CSS$S.buttonItemHorizontal]: isHorizontalNumberButton,
             }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerOutHandler, onPointerUp: this.nudgeButtonPointerUpHandler, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { key: '15c36fc1408a3c814a9fa5aa1b590fa02a29d7e3', icon: "chevron-down", scale: getIconScale(this.scale) })));
-        const numberButtonsVertical = (hAsync("div", { key: 'a48133c6f0b067b5088731a663dfcfff4c1a06ba', class: CSS$R.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
-        const prefixText = hAsync("div", { key: '6b2099f39bbc08ef8d7e1540113d2bff6adb0798', class: CSS$R.prefix }, this.prefixText);
-        const suffixText = hAsync("div", { key: '83f015b4af8dedb12d9d27bbe9a26d9ac9bc5052', class: CSS$R.suffix }, this.suffixText);
+        const numberButtonsVertical = (hAsync("div", { key: 'a48133c6f0b067b5088731a663dfcfff4c1a06ba', class: CSS$S.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
+        const prefixText = hAsync("div", { key: '6b2099f39bbc08ef8d7e1540113d2bff6adb0798', class: CSS$S.prefix }, this.prefixText);
+        const suffixText = hAsync("div", { key: '83f015b4af8dedb12d9d27bbe9a26d9ac9bc5052', class: CSS$S.suffix }, this.suffixText);
         const childEl = (hAsync("input", { "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: this.el.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.el.enterKeyHint || this.el.getAttribute("enterkeyhint"), inputMode: this.el.inputMode || this.el.getAttribute("inputmode") || "decimal", key: "localized-input", maxLength: this.maxLength, minLength: this.minLength, name: undefined, onBlur: this.inputNumberBlurHandler, onFocus: this.inputNumberFocusHandler, onInput: this.inputNumberInputHandler, onKeyDown: this.inputNumberKeyDownHandler, onKeyUp: this.inputNumberKeyUpHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildNumberElRef, type: "text", value: this.displayedValue }));
-        return (hAsync(Host, { key: 'c24ad59519e7a556c17d73e9f4e1def1e1dd3eb8', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, hAsync(InteractiveContainer, { key: '261dc376e7919a788656e281892ed421da04e696', disabled: this.disabled }, hAsync("div", { key: 'e85dd19739baab9d11bcccd95b8f1ada51d25133', class: { [CSS$R.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.numberButtonType === "horizontal" && !this.readOnly
+        return (hAsync(Host, { key: 'c24ad59519e7a556c17d73e9f4e1def1e1dd3eb8', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, hAsync(InteractiveContainer, { key: '261dc376e7919a788656e281892ed421da04e696', disabled: this.disabled }, hAsync("div", { key: 'e85dd19739baab9d11bcccd95b8f1ada51d25133', class: { [CSS$S.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.numberButtonType === "horizontal" && !this.readOnly
             ? numberButtonsHorizontalDown
-            : null, this.prefixText ? prefixText : null, hAsync("div", { key: 'cd657c99a89880a9525701c2826f2165aab1a42a', class: CSS$R.wrapper }, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), hAsync("div", { key: 'e653c7789da412239b7cc537857a131ac3670f3f', class: CSS$R.actionWrapper }, hAsync("slot", { key: 'fc7ada3995cd15aa51f5f510a785c2b8bd9ee9a5', name: SLOTS$k.action })), this.numberButtonType === "vertical" && !this.readOnly ? numberButtonsVertical : null, this.suffixText ? suffixText : null, this.numberButtonType === "horizontal" && !this.readOnly
+            : null, this.prefixText ? prefixText : null, hAsync("div", { key: 'cd657c99a89880a9525701c2826f2165aab1a42a', class: CSS$S.wrapper }, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), hAsync("div", { key: 'e653c7789da412239b7cc537857a131ac3670f3f', class: CSS$S.actionWrapper }, hAsync("slot", { key: 'fc7ada3995cd15aa51f5f510a785c2b8bd9ee9a5', name: SLOTS$k.action })), this.numberButtonType === "vertical" && !this.readOnly ? numberButtonsVertical : null, this.suffixText ? suffixText : null, this.numberButtonType === "horizontal" && !this.readOnly
             ? numberButtonsHorizontalUp
             : null, hAsync(HiddenFormInputSlot, { key: '2b7e0a60096c93a3d5708b1214376621b7acbedc', component: this })), this.validationMessage && this.status === "invalid" ? (hAsync(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
@@ -25537,7 +25538,7 @@ class InputNumber {
     }; }
 }
 
-const CSS$Q = {
+const CSS$R = {
     loader: "loader",
     clearButton: "clear-button",
     editingEnabled: "editing-enabled",
@@ -25849,16 +25850,16 @@ class InputText {
     // --------------------------------------------------------------------------
     render() {
         const dir = getElementDir(this.el);
-        const loader = (hAsync("div", { key: '312dd68091ac57f7846a3e52fc9d800c7fced5b3', class: CSS$Q.loader }, hAsync("calcite-progress", { key: '4debe7e7c6a87be5065019e831c65bc227a557a7', label: this.messages.loading, type: "indeterminate" })));
-        const inputClearButton = (hAsync("button", { key: 'fbfd74e5d928be2208ee053208f07d17bf55b4e7', "aria-label": this.messages.clear, class: CSS$Q.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputTextValue, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { key: '0abb236adde179134a48175ccc4bfadd483ab6bc', icon: "x", scale: getIconScale(this.scale) })));
-        const iconEl = (hAsync("calcite-icon", { key: '4ca36a556db3bb93ff474e21d863bc4a20380421', class: CSS$Q.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: getIconScale(this.scale) }));
-        const prefixText = hAsync("div", { key: '066efbe771cc9ea9239f564c4ccd1996a6d8a365', class: CSS$Q.prefix }, this.prefixText);
-        const suffixText = hAsync("div", { key: '9b34f658b7c2dae1f0ccd07be23d91987847aad6', class: CSS$Q.suffix }, this.suffixText);
+        const loader = (hAsync("div", { key: '312dd68091ac57f7846a3e52fc9d800c7fced5b3', class: CSS$R.loader }, hAsync("calcite-progress", { key: '4debe7e7c6a87be5065019e831c65bc227a557a7', label: this.messages.loading, type: "indeterminate" })));
+        const inputClearButton = (hAsync("button", { key: 'fbfd74e5d928be2208ee053208f07d17bf55b4e7', "aria-label": this.messages.clear, class: CSS$R.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputTextValue, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { key: '0abb236adde179134a48175ccc4bfadd483ab6bc', icon: "x", scale: getIconScale(this.scale) })));
+        const iconEl = (hAsync("calcite-icon", { key: '4ca36a556db3bb93ff474e21d863bc4a20380421', class: CSS$R.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: getIconScale(this.scale) }));
+        const prefixText = hAsync("div", { key: '066efbe771cc9ea9239f564c4ccd1996a6d8a365', class: CSS$R.prefix }, this.prefixText);
+        const suffixText = hAsync("div", { key: '9b34f658b7c2dae1f0ccd07be23d91987847aad6', class: CSS$R.suffix }, this.suffixText);
         const childEl = (hAsync("input", { key: '198c91add28dd04f74be153edfa17be636126fb2', "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: this.el.autofocus ? true : null, class: {
-                [CSS$Q.editingEnabled]: this.editingEnabled,
-                [CSS$Q.inlineChild]: !!this.inlineEditableEl,
+                [CSS$R.editingEnabled]: this.editingEnabled,
+                [CSS$R.inlineChild]: !!this.inlineEditableEl,
             }, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.el.enterKeyHint || this.el.getAttribute("enterkeyhint"), inputMode: this.el.inputMode || this.el.getAttribute("inputmode"), maxLength: this.maxLength, minLength: this.minLength, name: this.name, onBlur: this.inputTextBlurHandler, onFocus: this.inputTextFocusHandler, onInput: this.inputTextInputHandler, onKeyDown: this.inputTextKeyDownHandler, pattern: this.pattern, placeholder: this.placeholder || "", readOnly: this.readOnly, ref: this.setChildElRef, required: this.required ? true : null, tabIndex: this.disabled || (this.inlineEditableEl && !this.editingEnabled) ? -1 : null, type: "text", value: this.value }));
-        return (hAsync(Host, { key: '50c546649db474a19c5fedd528e1b61f4eeb1b52', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, hAsync(InteractiveContainer, { key: '0157bca7fca6d8e1ea2cf14c1b046eef993945df', disabled: this.disabled }, hAsync("div", { key: 'b582d6b2b539d4f1fb211d95de1102046b8f747e', class: { [CSS$Q.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.prefixText ? prefixText : null, hAsync("div", { key: 'c1b703c7e5942ce0bcd4afd0ca5ed5d9456280fb', class: CSS$Q.wrapper }, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), hAsync("div", { key: '6890177760f4e8da27ab1b64675c875aa47c9467', class: CSS$Q.actionWrapper }, hAsync("slot", { key: '1c3f528c03e4ecc3fe4bde16437dd99a27026dce', name: SLOTS$j.action })), this.suffixText ? suffixText : null, hAsync(HiddenFormInputSlot, { key: 'ff90c44312b1a2d93b44273455bd07ce4946b802', component: this })), this.validationMessage && this.status === "invalid" ? (hAsync(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
+        return (hAsync(Host, { key: '50c546649db474a19c5fedd528e1b61f4eeb1b52', onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, hAsync(InteractiveContainer, { key: '0157bca7fca6d8e1ea2cf14c1b046eef993945df', disabled: this.disabled }, hAsync("div", { key: 'b582d6b2b539d4f1fb211d95de1102046b8f747e', class: { [CSS$R.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.prefixText ? prefixText : null, hAsync("div", { key: 'c1b703c7e5942ce0bcd4afd0ca5ed5d9456280fb', class: CSS$R.wrapper }, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), hAsync("div", { key: '6890177760f4e8da27ab1b64675c875aa47c9467', class: CSS$R.actionWrapper }, hAsync("slot", { key: '1c3f528c03e4ecc3fe4bde16437dd99a27026dce', name: SLOTS$j.action })), this.suffixText ? suffixText : null, hAsync(HiddenFormInputSlot, { key: 'ff90c44312b1a2d93b44273455bd07ce4946b802', component: this })), this.validationMessage && this.status === "invalid" ? (hAsync(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
@@ -27354,7 +27355,7 @@ function toISOTimeString(value, includeSeconds = true) {
     return isoTimeString;
 }
 
-const CSS$P = {
+const CSS$Q = {
     toggleIcon: "toggle-icon",
 };
 
@@ -28003,7 +28004,7 @@ class InputTimePicker {
         return (hAsync(Host, { key: 'ec4a410a515b9946a41cb8b62127cf7a898eea8b', onBlur: this.hostBlurHandler, onKeyDown: this.keyDownHandler }, hAsync(InteractiveContainer, { key: 'eca5d0c66e85f116cd0745f60cc4a45209c40c28', disabled: this.disabled }, hAsync("div", { key: '339720c5b82e0d85bb34bd48c6f026140448df85', class: "input-wrapper", onClick: this.onInputWrapperClick }, hAsync("calcite-input-text", { key: 'dcd2283e4938cb7efc9c582800afbefd9d5c686a', "aria-autocomplete": "none", "aria-haspopup": "dialog", disabled: disabled, icon: "clock", id: this.referenceElementId, label: getLabelText(this), lang: this.effectiveLocale, onCalciteInputTextInput: this.calciteInternalInputInputHandler, onCalciteInternalInputTextFocus: this.calciteInternalInputFocusHandler, readOnly: readOnly, ref: this.setInputAndTransitionEl, role: "combobox", scale: this.scale, status: this.status }), !this.readOnly && this.renderToggleIcon(this.open)), hAsync("calcite-popover", { key: '172e98f419cc1a09eb1d61118a159998419f357c', focusTrapDisabled: true, id: dialogId, label: messages.chooseTime, lang: this.effectiveLocale, onCalcitePopoverClose: this.popoverCloseHandler, onCalcitePopoverOpen: this.popoverOpenHandler, open: this.open, overlayPositioning: this.overlayPositioning, placement: this.placement, ref: this.setCalcitePopoverEl, referenceElement: this.referenceElementId, triggerDisabled: true }, hAsync("calcite-time-picker", { key: 'dd05e18d80b9c5eb89d122b72c97a8ae024d2e3c', lang: this.effectiveLocale, messageOverrides: this.messageOverrides, numberingSystem: this.numberingSystem, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, ref: this.setCalciteTimePickerEl, scale: this.scale, step: this.step, tabIndex: this.open ? undefined : -1, value: this.value })), hAsync(HiddenFormInputSlot, { key: '783d02637f8582ddefdaaeba9c7fcae107793c47', component: this }), this.validationMessage && this.status === "invalid" ? (hAsync(Validation, { icon: this.validationIcon, message: this.validationMessage, scale: this.scale, status: this.status })) : null)));
     }
     renderToggleIcon(open) {
-        return (hAsync("span", { class: CSS$P.toggleIcon }, hAsync("calcite-icon", { icon: open ? "chevron-up" : "chevron-down", scale: getIconScale(this.scale) })));
+        return (hAsync("span", { class: CSS$Q.toggleIcon }, hAsync("calcite-icon", { icon: open ? "chevron-up" : "chevron-down", scale: getIconScale(this.scale) })));
     }
     static get delegatesFocus() { return true; }
     static get assetsDirs() { return ["assets"]; }
@@ -28056,6 +28057,10 @@ class InputTimePicker {
     }; }
 }
 
+const CSS$P = {
+    offset: "offset",
+};
+
 const hourToMinutes = 60;
 const timeZoneNameBlockList = [
     "CET",
@@ -28101,80 +28106,122 @@ function getUserTimeZoneName() {
 /**
  * The lazy-loaded timezone-groups lib to be used across instances.
  */
-let timeZoneGroups;
+let offsetGroupUtils;
+let regionGroupUtils;
+let nameGroupUtils;
 async function createTimeZoneItems(locale, messages, mode, referenceDate, standardTime) {
-    const referenceDateInMs = referenceDate.getTime();
-    const timeZoneNames = Intl.supportedValuesOf("timeZone");
-    if (mode === "offset") {
-        if (!timeZoneGroups) {
-            timeZoneGroups = Promise.all([
-                Promise.resolve().then(function () { return index$1; }),
-                Promise.resolve().then(function () { return index; }),
-            ]);
-        }
-        return timeZoneGroups.then(async ([{ groupTimeZones }, { DateEngine }]) => {
-            const timeZoneGroups = await groupTimeZones({
-                dateEngine: new DateEngine(),
-                groupDateRange: 1,
-                startDate: new Date(referenceDateInMs).toISOString(),
-            });
-            const listFormatter = new Intl.ListFormat(locale, { style: "long", type: "conjunction" });
-            // we remove blocked entries from tzs and adjust label indices accordingly
-            timeZoneGroups.forEach((group) => {
-                const indexOffsets = [];
-                let removedSoFar = 0;
-                group.tzs.forEach((tz, index) => {
-                    if (timeZoneNameBlockList.includes(tz)) {
-                        removedSoFar++;
-                    }
-                    indexOffsets[index] = removedSoFar;
-                });
-                group.tzs = group.tzs.filter((tz) => !timeZoneNameBlockList.includes(tz));
-                group.labelTzIndices = group.labelTzIndices
-                    .map((index) => index - indexOffsets[index])
-                    .filter((index) => index >= 0 && index < group.tzs.length);
-            });
-            const effectiveLocale = standardTime === "user"
-                ? locale
-                : // we use locales that will always yield a short offset that matches `standardTime`
-                    standardTime === "utc"
-                        ? "fr"
-                        : "en-GB";
-            return timeZoneGroups
-                .map(({ labelTzIndices, tzs }) => {
-                const groupRepTz = tzs[0];
-                const decimalOffset = timeZoneOffsetToDecimal(getTimeZoneShortOffset(groupRepTz, effectiveLocale, referenceDateInMs));
-                const value = toOffsetValue(groupRepTz, referenceDateInMs);
-                const tzLabels = labelTzIndices.map((index) => {
-                    const timeZone = tzs[index];
-                    const timeZoneLabel = messages[timeZone];
-                    return (timeZoneLabel ||
-                        // get city token
-                        timeZone.split("/").pop());
-                });
-                const label = createTimeZoneOffsetLabel(messages, decimalOffset, listFormatter.format(tzLabels));
+    if (mode === "name") {
+        if (!nameGroupUtils) {
+            nameGroupUtils = Promise.resolve().then(function () { return index$3; });
+        }
+        return nameGroupUtils.then(async ({ groupByName }) => {
+            const groups = await groupByName();
+            return groups
+                .map(({ label: timeZone }) => {
+                const label = toUserFriendlyName(timeZone);
+                const value = timeZone;
                 return {
                     label,
                     value,
-                    filterValue: tzs.map((tz) => toUserFriendlyName(tz)),
+                    filterValue: timeZone,
                 };
             })
                 .filter((group) => !!group)
-                .sort((groupA, groupB) => groupA.value - groupB.value);
+                .sort();
         });
     }
-    return timeZoneNames
-        .map((timeZone) => {
-        const label = toUserFriendlyName(timeZone);
-        const value = timeZone;
-        return {
-            label,
-            value,
-            filterValue: timeZone,
-        };
-    })
-        .filter((group) => !!group)
-        .sort();
+    const effectiveLocale = standardTime === "user"
+        ? locale
+        : // we use locales that will always yield a short offset that matches `standardTime`
+            standardTime === "utc"
+                ? "fr"
+                : "en-GB";
+    const referenceDateInMs = referenceDate.getTime();
+    if (mode === "region") {
+        if (!regionGroupUtils) {
+            regionGroupUtils = Promise.all([
+                Promise.resolve().then(function () { return index$2; }),
+                Promise.resolve().then(function () { return country; }),
+            ]);
+        }
+        return regionGroupUtils.then(async ([{ groupByRegion }, { getCountry }]) => {
+            const groups = await groupByRegion();
+            return groups
+                .map(({ label: region, tzs }) => {
+                return {
+                    label: region,
+                    items: tzs.map((timeZone) => {
+                        const decimalOffset = timeZoneOffsetToDecimal(getTimeZoneShortOffset(timeZone, effectiveLocale, referenceDateInMs));
+                        return {
+                            label: getTimeZoneLabel(timeZone, messages),
+                            value: timeZone,
+                            filterValue: toUserFriendlyName(timeZone),
+                            metadata: {
+                                offset: decimalOffset,
+                                country: getCountry(timeZone),
+                            },
+                        };
+                    }),
+                };
+            })
+                .sort((groupA, groupB) => groupA.label.localeCompare(groupB.label));
+        });
+    }
+    if (!offsetGroupUtils) {
+        offsetGroupUtils = Promise.all([
+            Promise.resolve().then(function () { return index$1; }),
+            Promise.resolve().then(function () { return index; }),
+        ]);
+    }
+    return offsetGroupUtils.then(async ([{ groupByOffset }, { DateEngine }]) => {
+        const groups = await groupByOffset({
+            dateEngine: new DateEngine(),
+            groupDateRange: 1,
+            startDate: new Date(referenceDateInMs).toISOString(),
+        });
+        const listFormatter = new Intl.ListFormat(locale, { style: "long", type: "conjunction" });
+        // we remove blocked entries from tzs and adjust label indices accordingly
+        groups.forEach((group) => {
+            const indexOffsets = [];
+            let removedSoFar = 0;
+            group.tzs.forEach((tz, index) => {
+                if (timeZoneNameBlockList.includes(tz)) {
+                    removedSoFar++;
+                }
+                indexOffsets[index] = removedSoFar;
+            });
+            group.tzs = group.tzs.filter((tz) => !timeZoneNameBlockList.includes(tz));
+            group.labelTzIdx = group.labelTzIdx
+                .map((index) => index - indexOffsets[index])
+                .filter((index) => index >= 0 && index < group.tzs.length);
+        });
+        return groups
+            .map(({ labelTzIdx, tzs }) => {
+            const groupRepTz = tzs[0];
+            const decimalOffset = timeZoneOffsetToDecimal(getTimeZoneShortOffset(groupRepTz, effectiveLocale, referenceDateInMs));
+            const value = toOffsetValue(groupRepTz, referenceDateInMs);
+            const tzLabels = labelTzIdx.map((index) => getTimeZoneLabel(tzs[index], messages));
+            const label = createTimeZoneOffsetLabel(messages, decimalOffset, listFormatter.format(tzLabels));
+            return {
+                label,
+                value,
+                filterValue: tzs.map((tz) => toUserFriendlyName(tz)),
+            };
+        })
+            .filter((group) => !!group)
+            .sort((groupA, groupB) => groupA.value - groupB.value);
+    });
+}
+function getTimeZoneLabel(timeZone, messages) {
+    return messages[timeZone] || getCity(timeZone);
+}
+/**
+ * Exported for testing purposes only
+ *
+ * @internal
+ */
+function getCity(timeZone) {
+    return timeZone.split("/").pop();
 }
 /**
  * Exported for testing purposes only
@@ -28192,15 +28239,21 @@ function getTimeZoneShortOffset(timeZone, locale, referenceDateInMs = Date.now()
     const parts = dateTimeFormat.formatToParts(referenceDateInMs);
     return parts.find(({ type }) => type === "timeZoneName").value;
 }
+function isGroup(item) {
+    return item.items !== undefined;
+}
+function flattenTimeZoneItems(timeZoneItems) {
+    return isGroup(timeZoneItems[0]) ? timeZoneItems.flatMap((item) => item.items) : timeZoneItems;
+}
 function findTimeZoneItemByProp(timeZoneItems, prop, valueToMatch) {
     return valueToMatch == null
         ? null
-        : timeZoneItems.find((item) => 
+        : flattenTimeZoneItems(timeZoneItems).find((item) => 
         // intentional == to match string to number
         item[prop] == valueToMatch);
 }
 
-const inputTimeZoneCss = "/*!@:host([disabled])*/[disabled].sc-calcite-input-time-zone-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-input-time-zone-h *.sc-calcite-input-time-zone,.sc-calcite-input-time-zone-h[disabled].sc-calcite-input-time-zone-s>*,.sc-calcite-input-time-zone-h[disabled] .sc-calcite-input-time-zone-s>*{pointer-events:none}/*!@:host*/.sc-calcite-input-time-zone-h{display:block}/*!@:host([hidden])*/[hidden].sc-calcite-input-time-zone-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-input-time-zone{display:none}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-input-time-zone-h[disabled] .sc-calcite-input-time-zone-s>[calcite-hydrated][disabled],[disabled].sc-calcite-input-time-zone-h [calcite-hydrated][disabled].sc-calcite-input-time-zone{opacity:1}/*!@.interaction-container*/.interaction-container.sc-calcite-input-time-zone{display:contents}/*!@::slotted(input[slot=hidden-form-input])*/.sc-calcite-input-time-zone-s>input[slot=hidden-form-input]{margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
+const inputTimeZoneCss = "/*!@:host([disabled])*/[disabled].sc-calcite-input-time-zone-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-input-time-zone-h *.sc-calcite-input-time-zone,.sc-calcite-input-time-zone-h[disabled].sc-calcite-input-time-zone-s>*,.sc-calcite-input-time-zone-h[disabled] .sc-calcite-input-time-zone-s>*{pointer-events:none}/*!@:host*/.sc-calcite-input-time-zone-h{display:block}/*!@.offset*/.offset.sc-calcite-input-time-zone{white-space:nowrap}/*!@:host([hidden])*/[hidden].sc-calcite-input-time-zone-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-input-time-zone{display:none}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-input-time-zone-h[disabled] .sc-calcite-input-time-zone-s>[calcite-hydrated][disabled],[disabled].sc-calcite-input-time-zone-h [calcite-hydrated][disabled].sc-calcite-input-time-zone{opacity:1}/*!@.interaction-container*/.interaction-container.sc-calcite-input-time-zone{display:contents}/*!@::slotted(input[slot=hidden-form-input])*/.sc-calcite-input-time-zone-s>input[slot=hidden-form-input]{margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
 var CalciteInputTimeZoneStyle0 = inputTimeZoneCss;
 
 class InputTimeZone {
@@ -28387,11 +28440,28 @@ class InputTimeZone {
         updateHostInteraction(this);
     }
     render() {
-        return (hAsync(Host, { key: 'dad642e8f2094c402f24c65422463ca875627fa9' }, hAsync(InteractiveContainer, { key: 'c452b27815cc331bf2475233f21463a08726f797', disabled: this.disabled }, hAsync("calcite-combobox", { key: '70ce16ff8302b6dea19767b9cf00dd735d9019dd', clearDisabled: !this.clearable, disabled: this.disabled, label: this.messages.chooseTimeZone, lang: this.effectiveLocale, maxItems: this.maxItems, onCalciteComboboxBeforeClose: this.onComboboxBeforeClose, onCalciteComboboxBeforeOpen: this.onComboboxBeforeOpen, onCalciteComboboxChange: this.onComboboxChange, onCalciteComboboxClose: this.onComboboxClose, onCalciteComboboxOpen: this.onComboboxOpen, open: this.open, overlayPositioning: this.overlayPositioning, placeholder: this.mode === "name" ? this.messages.namePlaceholder : this.messages.offsetPlaceholder, readOnly: this.readOnly, ref: this.setComboboxRef, scale: this.scale, selectionMode: this.clearable ? "single" : "single-persist", status: this.status, "validation-icon": this.validationIcon, "validation-message": this.validationMessage }, this.timeZoneItems.map((group) => {
+        return (hAsync(Host, { key: '9af055f0419e72ab0dd2fea8efd7177405e7a7cd' }, hAsync(InteractiveContainer, { key: 'd416be6665a8a5f2866eee008325b20e7e71e805', disabled: this.disabled }, hAsync("calcite-combobox", { key: '7bba7ae54688db8a5ed593318b8a1a838a0d091b', clearDisabled: !this.clearable, disabled: this.disabled, label: this.messages.chooseTimeZone, lang: this.effectiveLocale, maxItems: this.maxItems, onCalciteComboboxBeforeClose: this.onComboboxBeforeClose, onCalciteComboboxBeforeOpen: this.onComboboxBeforeOpen, onCalciteComboboxChange: this.onComboboxChange, onCalciteComboboxClose: this.onComboboxClose, onCalciteComboboxOpen: this.onComboboxOpen, open: this.open, overlayPositioning: this.overlayPositioning, placeholder: this.mode === "name"
+                ? this.messages.namePlaceholder
+                : this.mode === "offset"
+                    ? this.messages.offsetPlaceholder
+                    : this.messages.regionPlaceholder, placeholderIcon: "search", readOnly: this.readOnly, ref: this.setComboboxRef, scale: this.scale, selectionMode: this.clearable ? "single" : "single-persist", status: this.status, "validation-icon": this.validationIcon, "validation-message": this.validationMessage }, this.renderItems()), hAsync(HiddenFormInputSlot, { key: 'e30f87665c9c4617a96ffc6c459619d241226129', component: this }))));
+    }
+    renderItems() {
+        if (this.mode === "region") {
+            return this.renderRegionItems();
+        }
+        return this.timeZoneItems.map((group) => {
             const selected = this.selectedTimeZoneItem === group;
             const { label, value } = group;
             return (hAsync("calcite-combobox-item", { "data-value": value, key: label, selected: selected, textLabel: label, value: `${group.filterValue}` }));
-        })), hAsync(HiddenFormInputSlot, { key: 'd8d6cdaffb68c5cb0ed57abd922ad4b84e26de5d', component: this }))));
+        });
+    }
+    renderRegionItems() {
+        return this.timeZoneItems.flatMap(({ label, items }) => (hAsync("calcite-combobox-item-group", { key: label, label: label }, items.map((item) => {
+            const selected = this.selectedTimeZoneItem === item;
+            const { label, value } = item;
+            return (hAsync("calcite-combobox-item", { "data-value": value, description: this.messages[item.metadata.country] || item.metadata.country, key: label, metadata: item.metadata, selected: selected, textLabel: label, value: `${item.filterValue}` }, hAsync("span", { class: CSS$P.offset, slot: "content-end" }, item.metadata.offset)));
+        }))));
     }
     static get delegatesFocus() { return true; }
     static get assetsDirs() { return ["assets"]; }
@@ -29098,7 +29168,7 @@ function lastChild(el, selector) {
  * @param  {selector} selector
  * @return {number}
  */
-function index$2(el, selector) {
+function index$4(el, selector) {
   var index = 0;
   if (!el || !el.parentNode) {
     return -1;
@@ -29881,8 +29951,8 @@ Sortable.prototype = /** @lends Sortable.prototype */{
     }
 
     // Get the index of the dragged element within its parent
-    oldIndex = index$2(target);
-    oldDraggableIndex = index$2(target, options.draggable);
+    oldIndex = index$4(target);
+    oldDraggableIndex = index$4(target, options.draggable);
 
     // Check filter
     if (typeof filter === 'function') {
@@ -30388,8 +30458,8 @@ Sortable.prototype = /** @lends Sortable.prototype */{
 
     // Call when dragEl has been inserted
     function changed() {
-      newIndex = index$2(dragEl);
-      newDraggableIndex = index$2(dragEl, options.draggable);
+      newIndex = index$4(dragEl);
+      newDraggableIndex = index$4(dragEl, options.draggable);
       _dispatchEvent({
         sortable: _this,
         name: 'change',
@@ -30492,7 +30562,7 @@ Sortable.prototype = /** @lends Sortable.prototype */{
         var sibling;
         if (direction !== 0) {
           // Check if target is beside dragEl in respective direction (ignoring hidden elements)
-          var dragIndex = index$2(dragEl);
+          var dragIndex = index$4(dragEl);
           do {
             dragIndex -= direction;
             sibling = parentEl.children[dragIndex];
@@ -30563,16 +30633,16 @@ Sortable.prototype = /** @lends Sortable.prototype */{
       options = this.options;
 
     // Get the index of the dragged element within its parent
-    newIndex = index$2(dragEl);
-    newDraggableIndex = index$2(dragEl, options.draggable);
+    newIndex = index$4(dragEl);
+    newDraggableIndex = index$4(dragEl, options.draggable);
     pluginEvent('drop', this, {
       evt: evt
     });
     parentEl = dragEl && dragEl.parentNode;
 
     // Get again after plugin event
-    newIndex = index$2(dragEl);
-    newDraggableIndex = index$2(dragEl, options.draggable);
+    newIndex = index$4(dragEl);
+    newDraggableIndex = index$4(dragEl, options.draggable);
     if (Sortable.eventCanceled) {
       this._nulling();
       return;
@@ -30968,7 +31038,7 @@ function _getSwapDirection(evt, target, targetRect, vertical, swapThreshold, inv
  * @return {Number}                   Direction dragEl must be swapped
  */
 function _getInsertDirection(target) {
-  if (index$2(dragEl) < index$2(target)) {
+  if (index$4(dragEl) < index$4(target)) {
     return 1;
   } else {
     return -1;
@@ -31029,7 +31099,7 @@ Sortable.utils = {
   closest: closest,
   toggleClass: toggleClass,
   clone: clone,
-  index: index$2,
+  index: index$4,
   nextTick: _nextTick,
   cancelNextTick: _cancelNextTick,
   detectDirection: _detectDirection,
@@ -32018,7 +32088,7 @@ var CalciteListItemStyle0 = listItemCss;
 const focusMap = new Map();
 const listSelector = "calcite-list";
 /**
- * @slot - A slot for adding `calcite-list-item` and `calcite-list-item-group` elements.
+ * @slot - A slot for adding `calcite-list`, `calcite-list-item` and `calcite-list-item-group` elements.
  * @slot actions-start - A slot for adding actionable `calcite-action` elements before the content of the component.
  * @slot content-start - A slot for adding non-actionable elements before the label and description of the component.
  * @slot content - A slot for adding non-actionable, centered content in place of the `label` and `description` of the component.
@@ -32398,7 +32468,7 @@ class ListItem {
         const showBorder = selectionMode !== "none" && selectionAppearance === "border";
         const borderSelected = showBorder && selected;
         const borderUnselected = showBorder && !selected;
-        return (hAsync(Host, { key: '2bdaf5ae9ff5694d5efd860a345a6f1a8c94e007' }, hAsync(InteractiveContainer, { key: 'dbd29243dfff02519b4f79c71cc9afbd203560ea', disabled: disabled }, hAsync("div", { key: '6348bef9e84621e00c8fe8c52877c87ec1c91726', class: { [CSS$N.wrapper]: true, [CSS$N.wrapperBordered]: bordered } }, hAsync("tr", { key: '9c93f58bda94e540e30655dd23d5c8b747e1dad4', "aria-expanded": openable ? toAriaBoolean(open) : null, "aria-label": label, "aria-level": level, "aria-posinset": setPosition, "aria-selected": toAriaBoolean(selected), "aria-setsize": setSize, class: {
+        return (hAsync(Host, { key: '1e7d84ae5675d287c0bcfc70d14a7a7c0f0a6df0' }, hAsync(InteractiveContainer, { key: '37c18810c6d84667de1b352573aa55e7941b3ab3', disabled: disabled }, hAsync("div", { key: '98e80b21c6fa0cfdc93800303daea05791c1c6e5', class: { [CSS$N.wrapper]: true, [CSS$N.wrapperBordered]: bordered } }, hAsync("tr", { key: '0cae3455104e3a63a7a4611058d992042b36ac52', "aria-expanded": openable ? toAriaBoolean(open) : null, "aria-label": label, "aria-level": level, "aria-posinset": setPosition, "aria-selected": toAriaBoolean(selected), "aria-setsize": setSize, class: {
                 [CSS$N.container]: true,
                 [CSS$N.containerHover]: true,
                 [CSS$N.containerBorder]: showBorder,
@@ -33085,7 +33155,7 @@ let initialDocumentOverflowStyle = "";
  */
 logger.deprecated("component", {
     name: "modal",
-    removalVersion: 3,
+    removalVersion: 4,
     suggested: "dialog",
 });
 class Modal {
@@ -33730,7 +33800,7 @@ class OptionGroup {
 
 /**
  * Do not edit directly
- * Generated on Wed, 31 Jul 2024 02:01:31 GMT
+ * Generated on Thu, 01 Aug 2024 22:25:59 GMT
  */
 const calciteContainerSizeWidthXxs = {"min":"0","max":"320px"}; // Small handheld devices and mini-windows
 const calciteContainerSizeWidthXs = {"min":"321px","max":"476px"}; // Handheld devices
@@ -34116,7 +34186,7 @@ class Pagination {
     }; }
 }
 
-const panelCss = "/*!@:host*/.sc-calcite-panel-h{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}/*!@:host **/.sc-calcite-panel-h *.sc-calcite-panel{box-sizing:border-box}/*!@:host([disabled])*/[disabled].sc-calcite-panel-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-panel-h *.sc-calcite-panel,.sc-calcite-panel-h[disabled].sc-calcite-panel-s>*,.sc-calcite-panel-h[disabled] .sc-calcite-panel-s>*{pointer-events:none}/*!@:host*/.sc-calcite-panel-h{position:relative;display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;overflow:hidden;--calcite-min-header-height:calc(var(--calcite-icon-size) * 3)}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-panel-h[disabled] .sc-calcite-panel-s>[calcite-hydrated][disabled],[disabled].sc-calcite-panel-h [calcite-hydrated][disabled].sc-calcite-panel{opacity:1}/*!@.interaction-container*/.interaction-container.sc-calcite-panel{display:contents}/*!@.header*/.header.sc-calcite-panel{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-color-text-2);color:var(--calcite-color-text-2)}/*!@.heading*/.heading.sc-calcite-panel{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}/*!@.header .heading*/.header.sc-calcite-panel .heading.sc-calcite-panel{flex:1 1 auto;padding:0.5rem}/*!@:host([scale=s])*/[scale=s].sc-calcite-panel-h{--calcite-internal-panel-default-padding:var(--calcite-spacing-sm)}/*!@:host([scale=s]) .header-content .heading*/[scale=s].sc-calcite-panel-h .header-content.sc-calcite-panel .heading.sc-calcite-panel{font-size:var(--calcite-font-size--1)}/*!@:host([scale=s]) .header-content .description*/[scale=s].sc-calcite-panel-h .header-content.sc-calcite-panel .description.sc-calcite-panel{font-size:var(--calcite-font-size--2)}/*!@:host([scale=m])*/[scale=m].sc-calcite-panel-h{--calcite-internal-panel-default-padding:var(--calcite-spacing-md)}/*!@:host([scale=m]) .header-content .heading*/[scale=m].sc-calcite-panel-h .header-content.sc-calcite-panel .heading.sc-calcite-panel{font-size:var(--calcite-font-size-0)}/*!@:host([scale=m]) .header-content .description*/[scale=m].sc-calcite-panel-h .header-content.sc-calcite-panel .description.sc-calcite-panel{font-size:var(--calcite-font-size--1)}/*!@:host([scale=l])*/[scale=l].sc-calcite-panel-h{--calcite-internal-panel-default-padding:var(--calcite-spacing-xl)}/*!@:host([scale=l]) .header-content .heading*/[scale=l].sc-calcite-panel-h .header-content.sc-calcite-panel .heading.sc-calcite-panel{font-size:var(--calcite-font-size-1)}/*!@:host([scale=l]) .header-content .description*/[scale=l].sc-calcite-panel-h .header-content.sc-calcite-panel .description.sc-calcite-panel{font-size:var(--calcite-font-size-0)}/*!@.content-top,\n.content-bottom*/.content-top.sc-calcite-panel,.content-bottom.sc-calcite-panel{display:flex;align-items:flex-start;align-self:stretch;border-block-start:1px solid var(--calcite-color-border-3);background-color:var(--calcite-color-foreground-1)}/*!@.container*/.container.sc-calcite-panel{position:relative;margin:0px;display:flex;inline-size:100%;flex:1 1 auto;flex-direction:column;align-items:stretch;background-color:var(--calcite-color-background);padding:0px;transition:max-block-size var(--calcite-animation-timing), inline-size var(--calcite-animation-timing)}/*!@.container[hidden]*/.container[hidden].sc-calcite-panel{display:none}/*!@.header*/.header.sc-calcite-panel{z-index:var(--calcite-z-index-header);display:flex;flex-direction:column;background-color:var(--calcite-color-foreground-1);border-block-end:var(--calcite-panel-header-border-block-end, 1px solid var(--calcite-color-border-3))}/*!@.header-container*/.header-container.sc-calcite-panel{display:flex;inline-size:100%;flex-direction:row;align-items:stretch;justify-content:flex-start;flex:0 0 auto}/*!@.header-container--border-end*/.header-container--border-end.sc-calcite-panel{border-block-end:1px solid var(--calcite-color-border-3)}/*!@.action-bar-container*/.action-bar-container.sc-calcite-panel{inline-size:100%}/*!@.action-bar-container ::slotted(calcite-action-bar)*/.action-bar-container .sc-calcite-panel-s>calcite-action-bar{inline-size:100%}/*!@.header-content*/.header-content.sc-calcite-panel{display:flex;flex-direction:column;overflow:hidden;padding-inline:0.75rem;padding-block:0.875rem;margin-inline-end:auto}/*!@.header-content .heading,\n.header-content .description*/.header-content.sc-calcite-panel .heading.sc-calcite-panel,.header-content.sc-calcite-panel .description.sc-calcite-panel{display:block;overflow-wrap:break-word;padding:0px}/*!@.header-content .heading*/.header-content.sc-calcite-panel .heading.sc-calcite-panel{margin-inline:0px;margin-block:0px 0.25rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}/*!@.header-content .heading:only-child*/.header-content.sc-calcite-panel .heading.sc-calcite-panel:only-child{margin-block-end:0px}/*!@.header-content .description*/.header-content.sc-calcite-panel .description.sc-calcite-panel{color:var(--calcite-color-text-2)}/*!@.back-button*/.back-button.sc-calcite-panel{border-width:0px;border-style:solid;border-color:var(--calcite-color-border-3);border-inline-end-width:1px}/*!@.header-actions*/.header-actions.sc-calcite-panel{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch}/*!@.header-actions--end*/.header-actions--end.sc-calcite-panel{margin-inline-start:auto}/*!@.content-wrapper*/.content-wrapper.sc-calcite-panel{display:flex;block-size:100%;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch;overflow:auto;background-color:var(--calcite-color-background)}/*!@.content-top,\n.content-bottom,\n.header-content*/.content-top.sc-calcite-panel,.content-bottom.sc-calcite-panel,.header-content.sc-calcite-panel{padding:var(--calcite-internal-panel-default-padding)}/*!@.footer*/.footer.sc-calcite-panel{margin-block-start:auto;display:flex;flex-direction:row;align-content:space-between;align-items:center;justify-content:center;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size--2);line-height:1.375;border-block-start:1px solid var(--calcite-color-border-3);padding:var(--calcite-panel-footer-padding, var(--calcite-internal-panel-default-padding))}/*!@.footer-content*/.footer-content.sc-calcite-panel{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:center}/*!@.footer-actions*/.footer-actions.sc-calcite-panel{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:space-evenly;gap:var(--calcite-internal-panel-default-padding)}/*!@.footer-start*/.footer-start.sc-calcite-panel{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:flex-start;margin-inline-end:auto;gap:var(--calcite-internal-panel-default-padding)}/*!@.footer-end*/.footer-end.sc-calcite-panel{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:flex-end;margin-inline-start:auto;gap:var(--calcite-internal-panel-default-padding)}/*!@.fab-container*/.fab-container.sc-calcite-panel{position:sticky;inset-block-end:0px;z-index:var(--calcite-z-index-sticky);margin-block:0px;margin-inline:auto;display:block;padding:0.5rem;inset-inline:0;inline-size:-moz-fit-content;inline-size:fit-content}/*!@:host([hidden])*/[hidden].sc-calcite-panel-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-panel{display:none}";
+const panelCss = "/*!@:host*/.sc-calcite-panel-h{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}/*!@:host **/.sc-calcite-panel-h *.sc-calcite-panel{box-sizing:border-box}/*!@:host([disabled])*/[disabled].sc-calcite-panel-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-panel-h *.sc-calcite-panel,.sc-calcite-panel-h[disabled].sc-calcite-panel-s>*,.sc-calcite-panel-h[disabled] .sc-calcite-panel-s>*{pointer-events:none}/*!@:host*/.sc-calcite-panel-h{position:relative;display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;overflow:hidden;--calcite-min-header-height:calc(var(--calcite-icon-size) * 3)}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-panel-h[disabled] .sc-calcite-panel-s>[calcite-hydrated][disabled],[disabled].sc-calcite-panel-h [calcite-hydrated][disabled].sc-calcite-panel{opacity:1}/*!@.interaction-container*/.interaction-container.sc-calcite-panel{display:contents}/*!@.header*/.header.sc-calcite-panel{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-color-text-2);color:var(--calcite-color-text-2)}/*!@.heading*/.heading.sc-calcite-panel{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}/*!@.header .heading*/.header.sc-calcite-panel .heading.sc-calcite-panel{flex:1 1 auto;padding:0.5rem}/*!@:host([scale=s])*/[scale=s].sc-calcite-panel-h{--calcite-internal-panel-default-padding:var(--calcite-spacing-sm);--calcite-internal-panel-header-vertical-padding:10px}/*!@:host([scale=s]) .header-content .heading*/[scale=s].sc-calcite-panel-h .header-content.sc-calcite-panel .heading.sc-calcite-panel{font-size:var(--calcite-font-size--1)}/*!@:host([scale=s]) .header-content .description*/[scale=s].sc-calcite-panel-h .header-content.sc-calcite-panel .description.sc-calcite-panel{font-size:var(--calcite-font-size--2)}/*!@:host([scale=m])*/[scale=m].sc-calcite-panel-h{--calcite-internal-panel-default-padding:var(--calcite-spacing-md);--calcite-internal-panel-header-vertical-padding:var(--calcite-spacing-lg)}/*!@:host([scale=m]) .header-content .heading*/[scale=m].sc-calcite-panel-h .header-content.sc-calcite-panel .heading.sc-calcite-panel{font-size:var(--calcite-font-size-0)}/*!@:host([scale=m]) .header-content .description*/[scale=m].sc-calcite-panel-h .header-content.sc-calcite-panel .description.sc-calcite-panel{font-size:var(--calcite-font-size--1)}/*!@:host([scale=l])*/[scale=l].sc-calcite-panel-h{--calcite-internal-panel-default-padding:var(--calcite-spacing-xl);--calcite-internal-panel-header-vertical-padding:var(--calcite-spacing-xxl)}/*!@:host([scale=l]) .header-content .heading*/[scale=l].sc-calcite-panel-h .header-content.sc-calcite-panel .heading.sc-calcite-panel{font-size:var(--calcite-font-size-1)}/*!@:host([scale=l]) .header-content .description*/[scale=l].sc-calcite-panel-h .header-content.sc-calcite-panel .description.sc-calcite-panel{font-size:var(--calcite-font-size-0)}/*!@.content-top,\n.content-bottom*/.content-top.sc-calcite-panel,.content-bottom.sc-calcite-panel{display:flex;align-items:flex-start;align-self:stretch;border-block-start:1px solid var(--calcite-color-border-3);background-color:var(--calcite-color-foreground-1)}/*!@.container*/.container.sc-calcite-panel{position:relative;margin:0px;display:flex;inline-size:100%;flex:1 1 auto;flex-direction:column;align-items:stretch;background-color:var(--calcite-color-background);padding:0px;transition:max-block-size var(--calcite-animation-timing), inline-size var(--calcite-animation-timing)}/*!@.container[hidden]*/.container[hidden].sc-calcite-panel{display:none}/*!@.header*/.header.sc-calcite-panel{z-index:var(--calcite-z-index-header);display:flex;flex-direction:column;background-color:var(--calcite-color-foreground-1);border-block-end:var(--calcite-panel-header-border-block-end, 1px solid var(--calcite-color-border-3))}/*!@.header-container*/.header-container.sc-calcite-panel{display:flex;inline-size:100%;flex-direction:row;align-items:stretch;justify-content:flex-start;flex:0 0 auto}/*!@.header-container--border-end*/.header-container--border-end.sc-calcite-panel{border-block-end:1px solid var(--calcite-color-border-3)}/*!@.action-bar-container*/.action-bar-container.sc-calcite-panel{inline-size:100%}/*!@.action-bar-container ::slotted(calcite-action-bar)*/.action-bar-container .sc-calcite-panel-s>calcite-action-bar{inline-size:100%}/*!@.header-content*/.header-content.sc-calcite-panel{display:flex;flex-direction:column;overflow:hidden;padding-inline:0.75rem;padding-block:0.875rem;margin-inline-end:auto}/*!@.header-content .heading,\n.header-content .description*/.header-content.sc-calcite-panel .heading.sc-calcite-panel,.header-content.sc-calcite-panel .description.sc-calcite-panel{display:block;overflow-wrap:break-word;padding:0px}/*!@.header-content .heading*/.header-content.sc-calcite-panel .heading.sc-calcite-panel{margin-inline:0px;margin-block:0px 0.25rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1)}/*!@.header-content .heading:only-child*/.header-content.sc-calcite-panel .heading.sc-calcite-panel:only-child{margin-block-end:0px}/*!@.header-content .description*/.header-content.sc-calcite-panel .description.sc-calcite-panel{color:var(--calcite-color-text-2)}/*!@.back-button*/.back-button.sc-calcite-panel{border-width:0px;border-style:solid;border-color:var(--calcite-color-border-3);border-inline-end-width:1px}/*!@.header-actions*/.header-actions.sc-calcite-panel{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch}/*!@.header-actions--end*/.header-actions--end.sc-calcite-panel{margin-inline-start:auto}/*!@.content-wrapper*/.content-wrapper.sc-calcite-panel{display:flex;block-size:100%;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch;overflow:auto;background-color:var(--calcite-color-background)}/*!@.content-top,\n.content-bottom*/.content-top.sc-calcite-panel,.content-bottom.sc-calcite-panel{padding:var(--calcite-internal-panel-default-padding)}/*!@.header-content*/.header-content.sc-calcite-panel{padding-block:var(--calcite-internal-panel-header-vertical-padding);padding-inline:var(--calcite-internal-panel-default-padding)}/*!@.footer*/.footer.sc-calcite-panel{margin-block-start:auto;display:flex;flex-direction:row;align-content:space-between;align-items:center;justify-content:center;background-color:var(--calcite-color-foreground-1);font-size:var(--calcite-font-size--2);line-height:1.375;border-block-start:1px solid var(--calcite-color-border-3);padding:var(--calcite-panel-footer-padding, var(--calcite-internal-panel-default-padding))}/*!@.footer-content*/.footer-content.sc-calcite-panel{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:center}/*!@.footer-actions*/.footer-actions.sc-calcite-panel{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:space-evenly;gap:var(--calcite-internal-panel-default-padding)}/*!@.footer-start*/.footer-start.sc-calcite-panel{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:flex-start;margin-inline-end:auto;gap:var(--calcite-internal-panel-default-padding)}/*!@.footer-end*/.footer-end.sc-calcite-panel{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:flex-end;margin-inline-start:auto;gap:var(--calcite-internal-panel-default-padding)}/*!@.fab-container*/.fab-container.sc-calcite-panel{position:sticky;inset-block-end:0px;z-index:var(--calcite-z-index-sticky);margin-block:0px;margin-inline:auto;display:block;padding:0.5rem;inset-inline:0;inline-size:-moz-fit-content;inline-size:fit-content}/*!@:host([hidden])*/[hidden].sc-calcite-panel-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-panel{display:none}";
 var CalcitePanelStyle0 = panelCss;
 
 /**
@@ -34348,19 +34418,19 @@ class Panel {
     // --------------------------------------------------------------------------
     renderHeaderContent() {
         const { heading, headingLevel, description, hasHeaderContent } = this;
-        const headingNode = heading ? (hAsync(Heading, { class: CSS$11.heading, level: headingLevel }, heading)) : null;
-        const descriptionNode = description ? hAsync("span", { class: CSS$11.description }, description) : null;
-        return !hasHeaderContent && (headingNode || descriptionNode) ? (hAsync("div", { class: CSS$11.headerContent, key: "header-content" }, headingNode, descriptionNode)) : null;
+        const headingNode = heading ? (hAsync(Heading, { class: CSS$12.heading, level: headingLevel }, heading)) : null;
+        const descriptionNode = description ? hAsync("span", { class: CSS$12.description }, description) : null;
+        return !hasHeaderContent && (headingNode || descriptionNode) ? (hAsync("div", { class: CSS$12.headerContent, key: "header-content" }, headingNode, descriptionNode)) : null;
     }
     renderActionBar() {
-        return (hAsync("div", { class: CSS$11.actionBarContainer, hidden: !this.hasActionBar }, hAsync("slot", { name: SLOTS$p.actionBar, onSlotchange: this.handleActionBarSlotChange })));
+        return (hAsync("div", { class: CSS$12.actionBarContainer, hidden: !this.hasActionBar }, hAsync("slot", { name: SLOTS$p.actionBar, onSlotchange: this.handleActionBarSlotChange })));
     }
     renderHeaderSlottedContent() {
-        return (hAsync("div", { class: CSS$11.headerContent, hidden: !this.hasHeaderContent, key: "slotted-header-content" }, hAsync("slot", { name: SLOTS$p.headerContent, onSlotchange: this.handleHeaderContentSlotChange })));
+        return (hAsync("div", { class: CSS$12.headerContent, hidden: !this.hasHeaderContent, key: "slotted-header-content" }, hAsync("slot", { name: SLOTS$p.headerContent, onSlotchange: this.handleHeaderContentSlotChange })));
     }
     renderHeaderStartActions() {
         const { hasStartActions } = this;
-        return (hAsync("div", { class: { [CSS$11.headerActionsStart]: true, [CSS$11.headerActions]: true }, hidden: !hasStartActions, key: "header-actions-start" }, hAsync("slot", { name: SLOTS$p.headerActionsStart, onSlotchange: this.handleHeaderActionsStartSlotChange })));
+        return (hAsync("div", { class: { [CSS$12.headerActionsStart]: true, [CSS$12.headerActions]: true }, hidden: !hasStartActions, key: "header-actions-start" }, hAsync("slot", { name: SLOTS$p.headerActionsStart, onSlotchange: this.handleHeaderActionsStartSlotChange })));
     }
     renderHeaderActionsEnd() {
         const { hasEndActions, messages, closable, collapsed, collapseDirection, collapsible, hasMenuItems, } = this;
@@ -34373,7 +34443,7 @@ class Panel {
         const closeNode = closable ? (hAsync("calcite-action", { "aria-label": close, "data-test": "close", icon: ICONS$e.close, onClick: this.handleUserClose, scale: this.scale, text: close, title: close })) : null;
         const slotNode = (hAsync("slot", { name: SLOTS$p.headerActionsEnd, onSlotchange: this.handleHeaderActionsEndSlotChange }));
         const showContainer = hasEndActions || collapseNode || closeNode || hasMenuItems;
-        return (hAsync("div", { class: { [CSS$11.headerActionsEnd]: true, [CSS$11.headerActions]: true }, hidden: !showContainer, key: "header-actions-end" }, slotNode, this.renderMenu(), collapseNode, closeNode));
+        return (hAsync("div", { class: { [CSS$12.headerActionsEnd]: true, [CSS$12.headerActions]: true }, hidden: !showContainer, key: "header-actions-end" }, slotNode, this.renderMenu(), collapseNode, closeNode));
     }
     renderMenu() {
         const { hasMenuItems, messages, menuOpen } = this;
@@ -34390,28 +34460,28 @@ class Panel {
             closable ||
             hasMenuItems;
         this.showHeaderContent = showHeaderContent;
-        return (hAsync("header", { class: CSS$11.header, hidden: !(showHeaderContent || hasActionBar) }, hAsync("div", { class: { [CSS$11.headerContainer]: true, [CSS$11.headerContainerBorderEnd]: hasActionBar }, hidden: !showHeaderContent }, this.renderHeaderStartActions(), this.renderHeaderSlottedContent(), headerContentNode, this.renderHeaderActionsEnd()), this.renderActionBar(), this.renderContentTop()));
+        return (hAsync("header", { class: CSS$12.header, hidden: !(showHeaderContent || hasActionBar) }, hAsync("div", { class: { [CSS$12.headerContainer]: true, [CSS$12.headerContainerBorderEnd]: hasActionBar }, hidden: !showHeaderContent }, this.renderHeaderStartActions(), this.renderHeaderSlottedContent(), headerContentNode, this.renderHeaderActionsEnd()), this.renderActionBar(), this.renderContentTop()));
     }
     renderFooterNode() {
         const { hasFooterEndContent, hasFooterStartContent, hasFooterContent, hasFooterActions } = this;
         const showFooter = hasFooterStartContent || hasFooterEndContent || hasFooterContent || hasFooterActions;
-        return (hAsync("footer", { class: CSS$11.footer, hidden: !showFooter }, hAsync("div", { class: CSS$11.footerContent, hidden: !hasFooterContent }, hAsync("slot", { name: SLOTS$p.footer, onSlotchange: this.handleFooterSlotChange })), hAsync("div", { class: CSS$11.footerStart, hidden: hasFooterContent || !hasFooterStartContent }, hAsync("slot", { name: SLOTS$p.footerStart, onSlotchange: this.handleFooterStartSlotChange })), hAsync("div", { class: CSS$11.footerEnd, hidden: hasFooterContent || !hasFooterEndContent }, hAsync("slot", { name: SLOTS$p.footerEnd, onSlotchange: this.handleFooterEndSlotChange })), hAsync("div", { class: CSS$11.footerActions, hidden: hasFooterContent || !hasFooterActions }, hAsync("slot", { key: "footer-actions-slot", name: SLOTS$p.footerActions, onSlotchange: this.handleFooterActionsSlotChange }))));
+        return (hAsync("footer", { class: CSS$12.footer, hidden: !showFooter }, hAsync("div", { class: CSS$12.footerContent, hidden: !hasFooterContent }, hAsync("slot", { name: SLOTS$p.footer, onSlotchange: this.handleFooterSlotChange })), hAsync("div", { class: CSS$12.footerStart, hidden: hasFooterContent || !hasFooterStartContent }, hAsync("slot", { name: SLOTS$p.footerStart, onSlotchange: this.handleFooterStartSlotChange })), hAsync("div", { class: CSS$12.footerEnd, hidden: hasFooterContent || !hasFooterEndContent }, hAsync("slot", { name: SLOTS$p.footerEnd, onSlotchange: this.handleFooterEndSlotChange })), hAsync("div", { class: CSS$12.footerActions, hidden: hasFooterContent || !hasFooterActions }, hAsync("slot", { key: "footer-actions-slot", name: SLOTS$p.footerActions, onSlotchange: this.handleFooterActionsSlotChange }))));
     }
     renderContent() {
-        return (hAsync("div", { class: CSS$11.contentWrapper, hidden: this.collapsible && this.collapsed, onScroll: this.panelScrollHandler, ref: this.setPanelScrollEl }, hAsync("slot", null), this.renderFab()));
+        return (hAsync("div", { class: CSS$12.contentWrapper, hidden: this.collapsible && this.collapsed, onScroll: this.panelScrollHandler, ref: this.setPanelScrollEl }, hAsync("slot", null), this.renderFab()));
     }
     renderContentBottom() {
-        return (hAsync("div", { class: CSS$11.contentBottom, hidden: !this.hasContentBottom }, hAsync("slot", { name: SLOTS$p.contentBottom, onSlotchange: this.contentBottomSlotChangeHandler })));
+        return (hAsync("div", { class: CSS$12.contentBottom, hidden: !this.hasContentBottom }, hAsync("slot", { name: SLOTS$p.contentBottom, onSlotchange: this.contentBottomSlotChangeHandler })));
     }
     renderContentTop() {
-        return (hAsync("div", { class: CSS$11.contentTop, hidden: !this.hasContentTop }, hAsync("slot", { name: SLOTS$p.contentTop, onSlotchange: this.contentTopSlotChangeHandler })));
+        return (hAsync("div", { class: CSS$12.contentTop, hidden: !this.hasContentTop }, hAsync("slot", { name: SLOTS$p.contentTop, onSlotchange: this.contentTopSlotChangeHandler })));
     }
     renderFab() {
-        return (hAsync("div", { class: CSS$11.fabContainer, hidden: !this.hasFab }, hAsync("slot", { name: SLOTS$p.fab, onSlotchange: this.handleFabSlotChange })));
+        return (hAsync("div", { class: CSS$12.fabContainer, hidden: !this.hasFab }, hAsync("slot", { name: SLOTS$p.fab, onSlotchange: this.handleFabSlotChange })));
     }
     render() {
         const { disabled, loading, panelKeyDownHandler, isClosed, closable } = this;
-        const panelNode = (hAsync("article", { key: '25995bcd854feaf5afc8b2e102a174888dc8d2ef', "aria-busy": toAriaBoolean(loading), class: CSS$11.container, hidden: isClosed, ref: this.setContainerRef, tabIndex: closable ? 0 : -1 }, this.renderHeaderNode(), this.renderContent(), this.renderContentBottom(), this.renderFooterNode(), hAsync("slot", { key: "alerts", name: SLOTS$p.alerts, onSlotchange: this.handleAlertsSlotChange })));
+        const panelNode = (hAsync("article", { key: '25995bcd854feaf5afc8b2e102a174888dc8d2ef', "aria-busy": toAriaBoolean(loading), class: CSS$12.container, hidden: isClosed, ref: this.setContainerRef, tabIndex: closable ? 0 : -1 }, this.renderHeaderNode(), this.renderContent(), this.renderContentBottom(), this.renderFooterNode(), hAsync("slot", { key: "alerts", name: SLOTS$p.alerts, onSlotchange: this.handleAlertsSlotChange })));
         return (hAsync(Host, { key: 'e7e752bb4e0b2fff709c1eb09825d0a213603480', onKeyDown: panelKeyDownHandler }, hAsync(InteractiveContainer, { key: '6b3d4ffd41ddc7c36a02ff692e7c8e16808ef001', disabled: disabled }, loading ? hAsync("calcite-scrim", { loading: loading }) : null, panelNode)));
     }
     static get assetsDirs() { return ["assets"]; }
@@ -35389,7 +35459,7 @@ const defaultPopoverPlacement = "auto";
 const ARIA_CONTROLS = "aria-controls";
 const ARIA_EXPANDED = "aria-expanded";
 
-const popoverCss = "/*!@:host*/.sc-calcite-popover-h{--calcite-floating-ui-z-index:var(--calcite-popover-z-index, var(--calcite-z-index-popup));display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index)}/*!@.calcite-floating-ui-anim*/.calcite-floating-ui-anim.sc-calcite-popover{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-z-index);border-radius:0.25rem}/*!@:host([data-placement^=bottom]) .calcite-floating-ui-anim*/[data-placement^=bottom].sc-calcite-popover-h .calcite-floating-ui-anim.sc-calcite-popover{transform:translateY(-5px)}/*!@:host([data-placement^=top]) .calcite-floating-ui-anim*/[data-placement^=top].sc-calcite-popover-h .calcite-floating-ui-anim.sc-calcite-popover{transform:translateY(5px)}/*!@:host([data-placement^=left]) .calcite-floating-ui-anim*/[data-placement^=left].sc-calcite-popover-h .calcite-floating-ui-anim.sc-calcite-popover{transform:translateX(5px)}/*!@:host([data-placement^=right]) .calcite-floating-ui-anim*/[data-placement^=right].sc-calcite-popover-h .calcite-floating-ui-anim.sc-calcite-popover{transform:translateX(-5px)}/*!@:host([data-placement]) .calcite-floating-ui-anim--active*/[data-placement].sc-calcite-popover-h .calcite-floating-ui-anim--active.sc-calcite-popover{opacity:1;transform:translate(0)}/*!@:host([calcite-hydrated-hidden])*/[calcite-hydrated-hidden].sc-calcite-popover-h{visibility:hidden !important;pointer-events:none}/*!@.calcite-floating-ui-arrow*/.calcite-floating-ui-arrow.sc-calcite-popover{pointer-events:none;position:absolute;z-index:calc(var(--calcite-z-index) * -1);fill:var(--calcite-color-foreground-1)}/*!@.calcite-floating-ui-arrow__stroke*/.calcite-floating-ui-arrow__stroke.sc-calcite-popover{stroke:var(--calcite-color-border-3)}/*!@:host([scale=s]) .heading*/[scale=s].sc-calcite-popover-h .heading.sc-calcite-popover{padding-inline:0.75rem;padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1.375}/*!@:host([scale=m]) .heading*/[scale=m].sc-calcite-popover-h .heading.sc-calcite-popover{padding-inline:1rem;padding-block:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.375}/*!@:host([scale=l]) .heading*/[scale=l].sc-calcite-popover-h .heading.sc-calcite-popover{padding-inline:1.25rem;padding-block:1rem;font-size:var(--calcite-font-size-1);line-height:1.375}/*!@:host*/.sc-calcite-popover-h{pointer-events:none}/*!@:host([open])*/[open].sc-calcite-popover-h{pointer-events:initial}/*!@.calcite-floating-ui-anim*/.calcite-floating-ui-anim.sc-calcite-popover{border-radius:0.25rem;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);background-color:var(--calcite-color-foreground-1)}/*!@.arrow::before*/.arrow.sc-calcite-popover::before{outline:1px solid var(--calcite-color-border-3)}/*!@.header*/.header.sc-calcite-popover{display:flex;flex:1 1 auto;align-items:stretch;justify-content:flex-start;border-width:0px;border-block-end-width:1px;border-style:solid;border-block-end-color:var(--calcite-color-border-3)}/*!@.heading*/.heading.sc-calcite-popover{margin:0px;display:block;flex:1 1 auto;align-self:center;white-space:normal;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1);word-wrap:break-word;word-break:break-word}/*!@.container*/.container.sc-calcite-popover{position:relative;display:flex;block-size:100%;flex-direction:row;flex-wrap:nowrap;border-radius:0.25rem;color:var(--calcite-color-text-1)}/*!@.container.has-header*/.container.has-header.sc-calcite-popover{flex-direction:column}/*!@.content*/.content.sc-calcite-popover{display:flex;block-size:100%;inline-size:100%;flex-direction:column;flex-wrap:nowrap;align-self:center;word-wrap:break-word;word-break:break-word}/*!@.close-button-container*/.close-button-container.sc-calcite-popover{display:flex;overflow:hidden;flex:0 0 auto;border-start-end-radius:0.25rem;border-end-end-radius:0.25rem}/*!@.has-header .close-button-container*/.has-header.sc-calcite-popover .close-button-container.sc-calcite-popover{border-end-end-radius:none}/*!@::slotted(calcite-panel),\n::slotted(calcite-flow)*/.sc-calcite-popover-s>calcite-panel,.sc-calcite-popover-s>calcite-flow{block-size:100%}/*!@:host([hidden])*/[hidden].sc-calcite-popover-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-popover{display:none}";
+const popoverCss = "/*!@:host*/.sc-calcite-popover-h{--calcite-floating-ui-z-index:var(--calcite-popover-z-index, var(--calcite-z-index-popup));display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index)}/*!@.calcite-floating-ui-anim*/.calcite-floating-ui-anim.sc-calcite-popover{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:inset, left, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-z-index);border-radius:0.25rem}/*!@:host([data-placement^=bottom]) .calcite-floating-ui-anim*/[data-placement^=bottom].sc-calcite-popover-h .calcite-floating-ui-anim.sc-calcite-popover{inset-block-start:-5px}/*!@:host([data-placement^=top]) .calcite-floating-ui-anim*/[data-placement^=top].sc-calcite-popover-h .calcite-floating-ui-anim.sc-calcite-popover{inset-block-start:5px}/*!@:host([data-placement^=left]) .calcite-floating-ui-anim*/[data-placement^=left].sc-calcite-popover-h .calcite-floating-ui-anim.sc-calcite-popover{left:5px}/*!@:host([data-placement^=right]) .calcite-floating-ui-anim*/[data-placement^=right].sc-calcite-popover-h .calcite-floating-ui-anim.sc-calcite-popover{left:-5px}/*!@:host([data-placement]) .calcite-floating-ui-anim--active*/[data-placement].sc-calcite-popover-h .calcite-floating-ui-anim--active.sc-calcite-popover{opacity:1;inset-block:0;left:0}/*!@:host([calcite-hydrated-hidden])*/[calcite-hydrated-hidden].sc-calcite-popover-h{visibility:hidden !important;pointer-events:none}/*!@.calcite-floating-ui-arrow*/.calcite-floating-ui-arrow.sc-calcite-popover{pointer-events:none;position:absolute;z-index:calc(var(--calcite-z-index) * -1);fill:var(--calcite-color-foreground-1)}/*!@.calcite-floating-ui-arrow__stroke*/.calcite-floating-ui-arrow__stroke.sc-calcite-popover{stroke:var(--calcite-color-border-3)}/*!@:host([scale=s]) .heading*/[scale=s].sc-calcite-popover-h .heading.sc-calcite-popover{padding-inline:0.75rem;padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1.375}/*!@:host([scale=m]) .heading*/[scale=m].sc-calcite-popover-h .heading.sc-calcite-popover{padding-inline:1rem;padding-block:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.375}/*!@:host([scale=l]) .heading*/[scale=l].sc-calcite-popover-h .heading.sc-calcite-popover{padding-inline:1.25rem;padding-block:1rem;font-size:var(--calcite-font-size-1);line-height:1.375}/*!@:host*/.sc-calcite-popover-h{pointer-events:none}/*!@:host([open])*/[open].sc-calcite-popover-h{pointer-events:initial}/*!@.calcite-floating-ui-anim*/.calcite-floating-ui-anim.sc-calcite-popover{border-radius:0.25rem;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);background-color:var(--calcite-color-foreground-1)}/*!@.arrow::before*/.arrow.sc-calcite-popover::before{outline:1px solid var(--calcite-color-border-3)}/*!@.header*/.header.sc-calcite-popover{display:flex;flex:1 1 auto;align-items:stretch;justify-content:flex-start;border-width:0px;border-block-end-width:1px;border-style:solid;border-block-end-color:var(--calcite-color-border-3)}/*!@.heading*/.heading.sc-calcite-popover{margin:0px;display:block;flex:1 1 auto;align-self:center;white-space:normal;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1);word-wrap:break-word;word-break:break-word}/*!@.container*/.container.sc-calcite-popover{position:relative;display:flex;block-size:100%;flex-direction:row;flex-wrap:nowrap;border-radius:0.25rem;color:var(--calcite-color-text-1)}/*!@.container.has-header*/.container.has-header.sc-calcite-popover{flex-direction:column}/*!@.content*/.content.sc-calcite-popover{display:flex;block-size:100%;inline-size:100%;flex-direction:column;flex-wrap:nowrap;align-self:center;word-wrap:break-word;word-break:break-word}/*!@.close-button-container*/.close-button-container.sc-calcite-popover{display:flex;overflow:hidden;flex:0 0 auto;border-start-end-radius:0.25rem;border-end-end-radius:0.25rem}/*!@.has-header .close-button-container*/.has-header.sc-calcite-popover .close-button-container.sc-calcite-popover{border-end-end-radius:none}/*!@::slotted(calcite-panel),\n::slotted(calcite-flow)*/.sc-calcite-popover-s>calcite-panel,.sc-calcite-popover-s>calcite-flow{block-size:100%}/*!@:host([hidden])*/[hidden].sc-calcite-popover-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-popover{display:none}";
 var CalcitePopoverStyle0 = popoverCss;
 
 const manager$1 = new PopoverManager();
@@ -44409,7 +44479,7 @@ class TooltipManager {
     }
 }
 
-const tooltipCss = "/*!@:host*/.sc-calcite-tooltip-h{--calcite-floating-ui-z-index:var(--calcite-tooltip-z-index, var(--calcite-z-index-tooltip));display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index)}/*!@.calcite-floating-ui-anim*/.calcite-floating-ui-anim.sc-calcite-tooltip{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-z-index);border-radius:0.25rem}/*!@:host([data-placement^=bottom]) .calcite-floating-ui-anim*/[data-placement^=bottom].sc-calcite-tooltip-h .calcite-floating-ui-anim.sc-calcite-tooltip{transform:translateY(-5px)}/*!@:host([data-placement^=top]) .calcite-floating-ui-anim*/[data-placement^=top].sc-calcite-tooltip-h .calcite-floating-ui-anim.sc-calcite-tooltip{transform:translateY(5px)}/*!@:host([data-placement^=left]) .calcite-floating-ui-anim*/[data-placement^=left].sc-calcite-tooltip-h .calcite-floating-ui-anim.sc-calcite-tooltip{transform:translateX(5px)}/*!@:host([data-placement^=right]) .calcite-floating-ui-anim*/[data-placement^=right].sc-calcite-tooltip-h .calcite-floating-ui-anim.sc-calcite-tooltip{transform:translateX(-5px)}/*!@:host([data-placement]) .calcite-floating-ui-anim--active*/[data-placement].sc-calcite-tooltip-h .calcite-floating-ui-anim--active.sc-calcite-tooltip{opacity:1;transform:translate(0)}/*!@:host([calcite-hydrated-hidden])*/[calcite-hydrated-hidden].sc-calcite-tooltip-h{visibility:hidden !important;pointer-events:none}/*!@.calcite-floating-ui-arrow*/.calcite-floating-ui-arrow.sc-calcite-tooltip{pointer-events:none;position:absolute;z-index:calc(var(--calcite-z-index) * -1);fill:var(--calcite-color-foreground-1)}/*!@.calcite-floating-ui-arrow__stroke*/.calcite-floating-ui-arrow__stroke.sc-calcite-tooltip{stroke:var(--calcite-color-border-3)}/*!@.container*/.container.sc-calcite-tooltip{position:relative;overflow:hidden;border-radius:0.25rem;padding-block:0.75rem;padding-inline:1rem;font-size:var(--calcite-font-size--2);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1);max-inline-size:20rem;max-block-size:20rem;text-align:start}/*!@.calcite-floating-ui-anim*/.calcite-floating-ui-anim.sc-calcite-tooltip{border-radius:0.25rem;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);background-color:var(--calcite-color-foreground-1)}/*!@.arrow::before*/.arrow.sc-calcite-tooltip::before{outline:1px solid var(--calcite-color-border-3)}/*!@:host([hidden])*/[hidden].sc-calcite-tooltip-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-tooltip{display:none}";
+const tooltipCss = "/*!@:host*/.sc-calcite-tooltip-h{--calcite-floating-ui-z-index:var(--calcite-tooltip-z-index, var(--calcite-z-index-tooltip));display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index)}/*!@.calcite-floating-ui-anim*/.calcite-floating-ui-anim.sc-calcite-tooltip{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:inset, left, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-z-index);border-radius:0.25rem}/*!@:host([data-placement^=bottom]) .calcite-floating-ui-anim*/[data-placement^=bottom].sc-calcite-tooltip-h .calcite-floating-ui-anim.sc-calcite-tooltip{inset-block-start:-5px}/*!@:host([data-placement^=top]) .calcite-floating-ui-anim*/[data-placement^=top].sc-calcite-tooltip-h .calcite-floating-ui-anim.sc-calcite-tooltip{inset-block-start:5px}/*!@:host([data-placement^=left]) .calcite-floating-ui-anim*/[data-placement^=left].sc-calcite-tooltip-h .calcite-floating-ui-anim.sc-calcite-tooltip{left:5px}/*!@:host([data-placement^=right]) .calcite-floating-ui-anim*/[data-placement^=right].sc-calcite-tooltip-h .calcite-floating-ui-anim.sc-calcite-tooltip{left:-5px}/*!@:host([data-placement]) .calcite-floating-ui-anim--active*/[data-placement].sc-calcite-tooltip-h .calcite-floating-ui-anim--active.sc-calcite-tooltip{opacity:1;inset-block:0;left:0}/*!@:host([calcite-hydrated-hidden])*/[calcite-hydrated-hidden].sc-calcite-tooltip-h{visibility:hidden !important;pointer-events:none}/*!@.calcite-floating-ui-arrow*/.calcite-floating-ui-arrow.sc-calcite-tooltip{pointer-events:none;position:absolute;z-index:calc(var(--calcite-z-index) * -1);fill:var(--calcite-color-foreground-1)}/*!@.calcite-floating-ui-arrow__stroke*/.calcite-floating-ui-arrow__stroke.sc-calcite-tooltip{stroke:var(--calcite-color-border-3)}/*!@.container*/.container.sc-calcite-tooltip{position:relative;overflow:hidden;border-radius:0.25rem;padding-block:0.75rem;padding-inline:1rem;font-size:var(--calcite-font-size--2);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-text-1);max-inline-size:20rem;max-block-size:20rem;text-align:start}/*!@.calcite-floating-ui-anim*/.calcite-floating-ui-anim.sc-calcite-tooltip{border-radius:0.25rem;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-3);background-color:var(--calcite-color-foreground-1)}/*!@.arrow::before*/.arrow.sc-calcite-tooltip::before{outline:1px solid var(--calcite-color-border-3)}/*!@:host([hidden])*/[hidden].sc-calcite-tooltip-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-tooltip{display:none}";
 var CalciteTooltipStyle0 = tooltipCss;
 
 const manager = new TooltipManager();
@@ -48767,49 +48837,48 @@ var zhTw = /*#__PURE__*/Object.freeze({
   'default': locale
 });
 
-const supportedTimeZones = (() => {
+const timeZones = (() => {
     const platformTimeZones = Intl.supportedValuesOf('timeZone');
-    // not all browsers include these time zones, so we add them to ensure consistent groups
+    // Not all browsers include these time zones, so we add them to ensure consistent groups
     const etcTimeZones = [
-        "Etc/GMT+1",
-        "Etc/GMT+10",
-        "Etc/GMT+11",
-        "Etc/GMT+12",
-        "Etc/GMT+2",
-        "Etc/GMT+3",
-        "Etc/GMT+4",
-        "Etc/GMT+5",
-        "Etc/GMT+6",
-        "Etc/GMT+7",
-        "Etc/GMT+8",
-        "Etc/GMT+9",
-        "Etc/GMT-1",
-        "Etc/GMT-10",
-        "Etc/GMT-11",
-        "Etc/GMT-12",
-        "Etc/GMT-13",
-        "Etc/GMT-14",
-        "Etc/GMT-2",
-        "Etc/GMT-3",
-        "Etc/GMT-4",
-        "Etc/GMT-5",
-        "Etc/GMT-6",
-        "Etc/GMT-7",
-        "Etc/GMT-8",
-        "Etc/GMT-9"
+        'Etc/GMT+1',
+        'Etc/GMT+10',
+        'Etc/GMT+11',
+        'Etc/GMT+12',
+        'Etc/GMT+2',
+        'Etc/GMT+3',
+        'Etc/GMT+4',
+        'Etc/GMT+5',
+        'Etc/GMT+6',
+        'Etc/GMT+7',
+        'Etc/GMT+8',
+        'Etc/GMT+9',
+        'Etc/GMT-1',
+        'Etc/GMT-10',
+        'Etc/GMT-11',
+        'Etc/GMT-12',
+        'Etc/GMT-13',
+        'Etc/GMT-14',
+        'Etc/GMT-2',
+        'Etc/GMT-3',
+        'Etc/GMT-4',
+        'Etc/GMT-5',
+        'Etc/GMT-6',
+        'Etc/GMT-7',
+        'Etc/GMT-8',
+        'Etc/GMT-9',
     ];
     return [...new Set([...platformTimeZones, ...etcTimeZones])];
 })();
 
-const now = new Date();
-const startDate = now.toISOString();
-const daysInYear = 365;
-const groupDateRange = daysInYear;
-const defaultGroupingOptions = {
-    startDate,
-    groupDateRange,
-    debug: false,
-};
+async function groupByName() {
+    return timeZones.sort().map((tz) => ({ label: tz }));
+}
+
+var index$3 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  groupByName: groupByName
+});
 
 const continentAllowList = new Set([
     'Europe',
@@ -48824,6 +48893,526 @@ const continentAllowList = new Set([
     'Arctic',
     'Indian',
 ]);
+function extractContinent(label, strict = false) {
+    if (label.includes('Istanbul')) {
+        return 'Europe';
+    }
+    const indexFindFunction = strict ? 'indexOf' : 'lastIndexOf';
+    const separatorIndex = label[indexFindFunction]('/');
+    return separatorIndex === -1 ? label : label.slice(0, separatorIndex);
+}
+function isRegularContinent(continent) {
+    return continentAllowList.has(continent);
+}
+
+const generateTimeZoneMetadata$1 = (timeZoneItems) => {
+    return timeZoneItems.map((tzItem) => {
+        const { label } = tzItem;
+        const continent = extractContinent(label, true);
+        return {
+            ...tzItem,
+            continent,
+            isRegularContinent: isRegularContinent(continent),
+        };
+    });
+};
+
+async function groupByRegion() {
+    const grouping = [];
+    const timeZoneItems = timeZones.map((tz) => ({ label: tz }));
+    const timeZoneMetadata = generateTimeZoneMetadata$1(timeZoneItems);
+    for (const tzMetadatum of timeZoneMetadata) {
+        const { label, continent, isRegularContinent } = tzMetadatum;
+        if (tzMetadatum.visited) {
+            continue;
+        }
+        tzMetadatum.visited = true;
+        if (!isRegularContinent) {
+            tzMetadatum.visited = true;
+            continue;
+        }
+        const newGroup = {
+            label: continent,
+            tzs: [{ label }],
+        };
+        for (const tzMetadatumJ of timeZoneMetadata.filter((_) => !_.visited)) {
+            const { label: labelJ, continent: continentJ, isRegularContinent: isRegularContinentJ, } = tzMetadatumJ;
+            if (continent === continentJ) {
+                const tzItem = { label: labelJ };
+                newGroup.tzs.push(tzItem);
+                tzMetadatumJ.visited = true;
+            }
+        }
+        grouping.push(newGroup);
+    }
+    return grouping
+        .map((group) => {
+        group.tzs = group.tzs.sort((a, b) => a.label.localeCompare(b.label));
+        return {
+            label: group.label,
+            tzs: group.tzs.map((_) => _.label),
+        };
+    })
+        .sort((a, b) => a.label.localeCompare(b.label));
+}
+
+var index$2 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  groupByRegion: groupByRegion
+});
+
+const tzToCountryCode = {
+    /* eslint-disable @typescript-eslint/naming-convention -- keys are based on IANA time zone names */
+    'Africa/Abidjan': 'CI',
+    'Africa/Accra': 'GH',
+    'Africa/Addis_Ababa': 'ET',
+    'Africa/Algiers': 'DZ',
+    'Africa/Asmara': 'ER',
+    'Africa/Bamako': 'ML',
+    'Africa/Bangui': 'CF',
+    'Africa/Banjul': 'GM',
+    'Africa/Bissau': 'GW',
+    'Africa/Blantyre': 'MW',
+    'Africa/Brazzaville': 'CG',
+    'Africa/Bujumbura': 'BI',
+    'Africa/Cairo': 'EG',
+    'Africa/Casablanca': 'MA',
+    'Africa/Ceuta': 'ES',
+    'Africa/Conakry': 'GN',
+    'Africa/Dakar': 'SN',
+    'Africa/Dar_es_Salaam': 'TZ',
+    'Africa/Djibouti': 'DJ',
+    'Africa/Douala': 'CM',
+    'Africa/El_Aaiun': 'EH',
+    'Africa/Freetown': 'SL',
+    'Africa/Gaborone': 'BW',
+    'Africa/Harare': 'ZW',
+    'Africa/Johannesburg': 'ZA',
+    'Africa/Juba': 'SS',
+    'Africa/Kampala': 'UG',
+    'Africa/Khartoum': 'SD',
+    'Africa/Kigali': 'RW',
+    'Africa/Kinshasa': 'CD',
+    'Africa/Lagos': 'NG',
+    'Africa/Libreville': 'GA',
+    'Africa/Lome': 'TG',
+    'Africa/Luanda': 'AO',
+    'Africa/Lubumbashi': 'CD',
+    'Africa/Lusaka': 'ZM',
+    'Africa/Malabo': 'GQ',
+    'Africa/Maputo': 'MZ',
+    'Africa/Maseru': 'LS',
+    'Africa/Mbabane': 'SZ',
+    'Africa/Mogadishu': 'SO',
+    'Africa/Monrovia': 'LR',
+    'Africa/Nairobi': 'KE',
+    'Africa/Ndjamena': 'TD',
+    'Africa/Niamey': 'NE',
+    'Africa/Nouakchott': 'MR',
+    'Africa/Ouagadougou': 'BF',
+    'Africa/Porto-Novo': 'BJ',
+    'Africa/Sao_Tome': 'ST',
+    'Africa/Timbuktu': 'ML',
+    'Africa/Tripoli': 'LY',
+    'Africa/Tunis': 'TN',
+    'Africa/Windhoek': 'NA',
+    'America/Adak': 'US',
+    'America/Anchorage': 'US',
+    'America/Anguilla': 'AI',
+    'America/Antigua': 'AG',
+    'America/Araguaina': 'BR',
+    'America/Argentina/Buenos_Aires': 'AR',
+    'America/Argentina/Catamarca': 'AR',
+    'America/Argentina/ComodRivadavia': 'AR',
+    'America/Argentina/Cordoba': 'AR',
+    'America/Argentina/Jujuy': 'AR',
+    'America/Argentina/La_Rioja': 'AR',
+    'America/Argentina/Mendoza': 'AR',
+    'America/Argentina/Rio_Gallegos': 'AR',
+    'America/Argentina/Salta': 'AR',
+    'America/Argentina/San_Juan': 'AR',
+    'America/Argentina/San_Luis': 'AR',
+    'America/Argentina/Tucuman': 'AR',
+    'America/Argentina/Ushuaia': 'AR',
+    'America/Aruba': 'AW',
+    'America/Asuncion': 'PY',
+    'America/Atikokan': 'CA',
+    'America/Bahia': 'BR',
+    'America/Bahia_Banderas': 'MX',
+    'America/Barbados': 'BB',
+    'America/Belem': 'BR',
+    'America/Belize': 'BZ',
+    'America/Blanc-Sablon': 'CA',
+    'America/Boa_Vista': 'BR',
+    'America/Bogota': 'CO',
+    'America/Boise': 'US',
+    'America/Cambridge_Bay': 'CA',
+    'America/Campo_Grande': 'BR',
+    'America/Cancun': 'MX',
+    'America/Caracas': 'VE',
+    'America/Cayenne': 'GF',
+    'America/Cayman': 'KY',
+    'America/Chicago': 'US',
+    'America/Chihuahua': 'MX',
+    'America/Ciudad_Juarez': 'MX',
+    'America/Coral_Harbour': 'CA',
+    'America/Costa_Rica': 'CR',
+    'America/Creston': 'CA',
+    'America/Cuiaba': 'BR',
+    'America/Curacao': 'CW',
+    'America/Danmarkshavn': 'GL',
+    'America/Dawson': 'CA',
+    'America/Dawson_Creek': 'CA',
+    'America/Denver': 'US',
+    'America/Detroit': 'US',
+    'America/Dominica': 'DM',
+    'America/Edmonton': 'CA',
+    'America/Eirunepe': 'BR',
+    'America/El_Salvador': 'SV',
+    'America/Ensenada': 'MX',
+    'America/Fort_Nelson': 'CA',
+    'America/Fortaleza': 'BR',
+    'America/Glace_Bay': 'CA',
+    'America/Goose_Bay': 'CA',
+    'America/Grand_Turk': 'TC',
+    'America/Grenada': 'GD',
+    'America/Guadeloupe': 'GP',
+    'America/Guatemala': 'GT',
+    'America/Guayaquil': 'EC',
+    'America/Guyana': 'GY',
+    'America/Halifax': 'CA',
+    'America/Havana': 'CU',
+    'America/Hermosillo': 'MX',
+    'America/Indiana/Indianapolis': 'US',
+    'America/Indiana/Knox': 'US',
+    'America/Indiana/Marengo': 'US',
+    'America/Indiana/Petersburg': 'US',
+    'America/Indiana/Tell_City': 'US',
+    'America/Indiana/Vevay': 'US',
+    'America/Indiana/Vincennes': 'US',
+    'America/Indiana/Winamac': 'US',
+    'America/Inuvik': 'CA',
+    'America/Iqaluit': 'CA',
+    'America/Jamaica': 'JM',
+    'America/Juneau': 'US',
+    'America/Kentucky/Louisville': 'US',
+    'America/Kentucky/Monticello': 'US',
+    'America/La_Paz': 'BO',
+    'America/Lima': 'PE',
+    'America/Los_Angeles': 'US',
+    'America/Maceio': 'BR',
+    'America/Managua': 'NI',
+    'America/Manaus': 'BR',
+    'America/Martinique': 'MQ',
+    'America/Matamoros': 'MX',
+    'America/Mazatlan': 'MX',
+    'America/Menominee': 'US',
+    'America/Merida': 'MX',
+    'America/Metlakatla': 'US',
+    'America/Mexico_City': 'MX',
+    'America/Miquelon': 'PM',
+    'America/Moncton': 'CA',
+    'America/Monterrey': 'MX',
+    'America/Montevideo': 'UY',
+    'America/Montreal': 'CA',
+    'America/Montserrat': 'MS',
+    'America/Nassau': 'BS',
+    'America/New_York': 'US',
+    'America/Nipigon': 'CA',
+    'America/Nome': 'US',
+    'America/Noronha': 'BR',
+    'America/North_Dakota/Beulah': 'US',
+    'America/North_Dakota/Center': 'US',
+    'America/North_Dakota/New_Salem': 'US',
+    'America/Nuuk': 'GL',
+    'America/Ojinaga': 'MX',
+    'America/Panama': 'PA',
+    'America/Pangnirtung': 'CA',
+    'America/Paramaribo': 'SR',
+    'America/Phoenix': 'US',
+    'America/Port-au-Prince': 'HT',
+    'America/Port_of_Spain': 'TT',
+    'America/Porto_Velho': 'BR',
+    'America/Puerto_Rico': 'PR',
+    'America/Punta_Arenas': 'CL',
+    'America/Rainy_River': 'CA',
+    'America/Rankin_Inlet': 'CA',
+    'America/Recife': 'BR',
+    'America/Regina': 'CA',
+    'America/Resolute': 'CA',
+    'America/Rio_Branco': 'BR',
+    'America/Rosario': 'AR',
+    'America/Santarem': 'BR',
+    'America/Santiago': 'CL',
+    'America/Santo_Domingo': 'DO',
+    'America/Sao_Paulo': 'BR',
+    'America/Scoresbysund': 'GL',
+    'America/Sitka': 'US',
+    'America/St_Johns': 'CA',
+    'America/St_Kitts': 'KN',
+    'America/St_Lucia': 'LC',
+    'America/St_Thomas': 'VI',
+    'America/St_Vincent': 'VC',
+    'America/Swift_Current': 'CA',
+    'America/Tegucigalpa': 'HN',
+    'America/Thule': 'GL',
+    'America/Thunder_Bay': 'CA',
+    'America/Tijuana': 'MX',
+    'America/Toronto': 'CA',
+    'America/Tortola': 'VG',
+    'America/Vancouver': 'CA',
+    'America/Whitehorse': 'CA',
+    'America/Winnipeg': 'CA',
+    'America/Yakutat': 'US',
+    'America/Yellowknife': 'CA',
+    'Antarctica/Casey': 'AQ',
+    'Antarctica/Davis': 'AQ',
+    'Antarctica/DumontDUrville': 'AQ',
+    'Antarctica/Macquarie': 'AU',
+    'Antarctica/Mawson': 'AQ',
+    'Antarctica/McMurdo': 'AQ',
+    'Antarctica/Palmer': 'AQ',
+    'Antarctica/Rothera': 'AQ',
+    'Antarctica/Syowa': 'AQ',
+    'Antarctica/Troll': 'AQ',
+    'Antarctica/Vostok': 'AQ',
+    'Asia/Aden': 'YE',
+    'Asia/Almaty': 'KZ',
+    'Asia/Amman': 'JO',
+    'Asia/Anadyr': 'RU',
+    'Asia/Aqtau': 'KZ',
+    'Asia/Aqtobe': 'KZ',
+    'Asia/Ashgabat': 'TM',
+    'Asia/Atyrau': 'KZ',
+    'Asia/Baghdad': 'IQ',
+    'Asia/Bahrain': 'BH',
+    'Asia/Baku': 'AZ',
+    'Asia/Bangkok': 'TH',
+    'Asia/Barnaul': 'RU',
+    'Asia/Beirut': 'LB',
+    'Asia/Bishkek': 'KG',
+    'Asia/Brunei': 'BN',
+    'Asia/Chita': 'RU',
+    'Asia/Choibalsan': 'MN',
+    'Asia/Chongqing': 'CN',
+    'Asia/Colombo': 'LK',
+    'Asia/Damascus': 'SY',
+    'Asia/Dhaka': 'BD',
+    'Asia/Dili': 'TL',
+    'Asia/Dubai': 'AE',
+    'Asia/Dushanbe': 'TJ',
+    'Asia/Famagusta': 'CY',
+    'Asia/Gaza': 'PS',
+    'Asia/Harbin': 'CN',
+    'Asia/Hebron': 'PS',
+    'Asia/Ho_Chi_Minh': 'VN',
+    'Asia/Hong_Kong': 'HK',
+    'Asia/Hovd': 'MN',
+    'Asia/Irkutsk': 'RU',
+    'Asia/Jakarta': 'ID',
+    'Asia/Jayapura': 'ID',
+    'Asia/Jerusalem': 'IL',
+    'Asia/Kabul': 'AF',
+    'Asia/Kamchatka': 'RU',
+    'Asia/Karachi': 'PK',
+    'Asia/Kashgar': 'CN',
+    'Asia/Kathmandu': 'NP',
+    'Asia/Khandyga': 'RU',
+    'Asia/Kolkata': 'IN',
+    'Asia/Krasnoyarsk': 'RU',
+    'Asia/Kuala_Lumpur': 'MY',
+    'Asia/Kuching': 'MY',
+    'Asia/Kuwait': 'KW',
+    'Asia/Macau': 'MO',
+    'Asia/Magadan': 'RU',
+    'Asia/Makassar': 'ID',
+    'Asia/Manila': 'PH',
+    'Asia/Muscat': 'OM',
+    'Asia/Nicosia': 'CY',
+    'Asia/Novokuznetsk': 'RU',
+    'Asia/Novosibirsk': 'RU',
+    'Asia/Omsk': 'RU',
+    'Asia/Oral': 'KZ',
+    'Asia/Phnom_Penh': 'KH',
+    'Asia/Pontianak': 'ID',
+    'Asia/Pyongyang': 'KP',
+    'Asia/Qatar': 'QA',
+    'Asia/Qostanay': 'KZ',
+    'Asia/Qyzylorda': 'KZ',
+    'Asia/Riyadh': 'SA',
+    'Asia/Sakhalin': 'RU',
+    'Asia/Samarkand': 'UZ',
+    'Asia/Seoul': 'KR',
+    'Asia/Shanghai': 'CN',
+    'Asia/Singapore': 'SG',
+    'Asia/Srednekolymsk': 'RU',
+    'Asia/Taipei': 'TW',
+    'Asia/Tashkent': 'UZ',
+    'Asia/Tbilisi': 'GE',
+    'Asia/Tehran': 'IR',
+    'Asia/Tel_Aviv': 'IL',
+    'Asia/Thimphu': 'BT',
+    'Asia/Tokyo': 'JP',
+    'Asia/Tomsk': 'RU',
+    'Asia/Ulaanbaatar': 'MN',
+    'Asia/Urumqi': 'CN',
+    'Asia/Ust-Nera': 'RU',
+    'Asia/Vientiane': 'LA',
+    'Asia/Vladivostok': 'RU',
+    'Asia/Yakutsk': 'RU',
+    'Asia/Yangon': 'MM',
+    'Asia/Yekaterinburg': 'RU',
+    'Asia/Yerevan': 'AM',
+    'Atlantic/Azores': 'PT',
+    'Atlantic/Bermuda': 'BM',
+    'Atlantic/Canary': 'ES',
+    'Atlantic/Cape_Verde': 'CV',
+    'Atlantic/Faroe': 'FO',
+    'Atlantic/Jan_Mayen': 'SJ',
+    'Atlantic/Madeira': 'PT',
+    'Atlantic/Reykjavik': 'IS',
+    'Atlantic/South_Georgia': 'GS',
+    'Atlantic/St_Helena': 'SH',
+    'Atlantic/Stanley': 'FK',
+    'Australia/Adelaide': 'AU',
+    'Australia/Brisbane': 'AU',
+    'Australia/Broken_Hill': 'AU',
+    'Australia/Currie': 'AU',
+    'Australia/Darwin': 'AU',
+    'Australia/Eucla': 'AU',
+    'Australia/Hobart': 'AU',
+    'Australia/Lindeman': 'AU',
+    'Australia/Lord_Howe': 'AU',
+    'Australia/Melbourne': 'AU',
+    'Australia/Perth': 'AU',
+    'Australia/Sydney': 'AU',
+    'Europe/Amsterdam': 'NL',
+    'Europe/Andorra': 'AD',
+    'Europe/Astrakhan': 'RU',
+    'Europe/Athens': 'GR',
+    'Europe/Belfast': 'GB',
+    'Europe/Belgrade': 'RS',
+    'Europe/Berlin': 'DE',
+    'Europe/Brussels': 'BE',
+    'Europe/Bucharest': 'RO',
+    'Europe/Budapest': 'HU',
+    'Europe/Chisinau': 'MD',
+    'Europe/Copenhagen': 'DK',
+    'Europe/Dublin': 'IE',
+    'Europe/Gibraltar': 'GI',
+    'Europe/Guernsey': 'GG',
+    'Europe/Helsinki': 'FI',
+    'Europe/Isle_of_Man': 'IM',
+    'Europe/Istanbul': 'TR',
+    'Europe/Jersey': 'JE',
+    'Europe/Kaliningrad': 'RU',
+    'Europe/Kirov': 'RU',
+    'Europe/Kyiv': 'UA',
+    'Europe/Lisbon': 'PT',
+    'Europe/Ljubljana': 'SI',
+    'Europe/London': 'GB',
+    'Europe/Luxembourg': 'LU',
+    'Europe/Madrid': 'ES',
+    'Europe/Malta': 'MT',
+    'Europe/Minsk': 'BY',
+    'Europe/Monaco': 'MC',
+    'Europe/Moscow': 'RU',
+    'Europe/Oslo': 'NO',
+    'Europe/Paris': 'FR',
+    'Europe/Prague': 'CZ',
+    'Europe/Riga': 'LV',
+    'Europe/Rome': 'IT',
+    'Europe/Samara': 'RU',
+    'Europe/Sarajevo': 'BA',
+    'Europe/Saratov': 'RU',
+    'Europe/Simferopol': 'UA',
+    'Europe/Skopje': 'MK',
+    'Europe/Sofia': 'BG',
+    'Europe/Stockholm': 'SE',
+    'Europe/Tallinn': 'EE',
+    'Europe/Tirane': 'AL',
+    'Europe/Tiraspol': 'MD',
+    'Europe/Ulyanovsk': 'RU',
+    'Europe/Uzhgorod': 'UA',
+    'Europe/Vaduz': 'LI',
+    'Europe/Vienna': 'AT',
+    'Europe/Vilnius': 'LT',
+    'Europe/Volgograd': 'RU',
+    'Europe/Warsaw': 'PL',
+    'Europe/Zagreb': 'HR',
+    'Europe/Zaporozhye': 'UA',
+    'Europe/Zurich': 'CH',
+    'Indian/Antananarivo': 'MG',
+    'Indian/Chagos': 'IO',
+    'Indian/Christmas': 'CX',
+    'Indian/Cocos': 'CC',
+    'Indian/Comoro': 'KM',
+    'Indian/Kerguelen': 'TF',
+    'Indian/Mahe': 'SC',
+    'Indian/Maldives': 'MV',
+    'Indian/Mauritius': 'MU',
+    'Indian/Mayotte': 'YT',
+    'Indian/Reunion': 'RE',
+    'Pacific/Apia': 'WS',
+    'Pacific/Auckland': 'NZ',
+    'Pacific/Bougainville': 'PG',
+    'Pacific/Chatham': 'NZ',
+    'Pacific/Chuuk': 'FM',
+    'Pacific/Easter': 'CL',
+    'Pacific/Efate': 'VU',
+    'Pacific/Enderbury': 'KI',
+    'Pacific/Fakaofo': 'TK',
+    'Pacific/Fiji': 'FJ',
+    'Pacific/Funafuti': 'TV',
+    'Pacific/Galapagos': 'EC',
+    'Pacific/Gambier': 'PF',
+    'Pacific/Guadalcanal': 'SB',
+    'Pacific/Guam': 'GU',
+    'Pacific/Honolulu': 'US',
+    'Pacific/Johnston': 'US',
+    'Pacific/Kanton': 'KI',
+    'Pacific/Kiritimati': 'KI',
+    'Pacific/Kosrae': 'FM',
+    'Pacific/Kwajalein': 'MH',
+    'Pacific/Majuro': 'MH',
+    'Pacific/Marquesas': 'PF',
+    'Pacific/Midway': 'UM',
+    'Pacific/Nauru': 'NR',
+    'Pacific/Niue': 'NU',
+    'Pacific/Norfolk': 'NF',
+    'Pacific/Noumea': 'NC',
+    'Pacific/Pago_Pago': 'AS',
+    'Pacific/Palau': 'PW',
+    'Pacific/Pitcairn': 'PN',
+    'Pacific/Pohnpei': 'FM',
+    'Pacific/Port_Moresby': 'PG',
+    'Pacific/Rarotonga': 'CK',
+    'Pacific/Saipan': 'MP',
+    'Pacific/Tahiti': 'PF',
+    'Pacific/Tarawa': 'KI',
+    'Pacific/Tongatapu': 'TO',
+    'Pacific/Wake': 'UM',
+    'Pacific/Wallis': 'WF',
+    /* eslint-enable @typescript-eslint/naming-convention */
+};
+function getCountry(timeZone) {
+    return tzToCountryCode[timeZone] || timeZone;
+}
+
+var country = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  getCountry: getCountry
+});
+
+const now = new Date();
+const startDate = now.toISOString();
+const daysInYear = 365;
+const groupDateRange = daysInYear;
+const defaultGroupingOptions = {
+    groupDateRange,
+    startDate,
+};
+
 const _getDates = (startDate, numberDays, dateEngine) => {
     const dateArray = [];
     let date = dateEngine.create(startDate);
@@ -48833,23 +49422,12 @@ const _getDates = (startDate, numberDays, dateEngine) => {
     }
     return dateArray;
 };
-const _extractContinent = (label) => {
-    if (label.includes('Istanbul')) {
-        return 'Europe';
-    }
-    const lastIndex = label.lastIndexOf('/');
-    return lastIndex === -1 ? label : label.slice(0, lastIndex);
-};
-const _isRegularContinent = (continent) => continentAllowList.has(continent);
-const generateTimeZoneMetadata = (timeZoneItems, startDate, numberDays, dateEngine, debug = false) => {
+const generateTimeZoneMetadata = (timeZoneItems, startDate, numberDays, dateEngine) => {
     const processedDates = new Map();
-    if (debug) {
-        console.log(`Initializing data starting ${startDate} with ${numberDays} days in the future, comparing ${timeZoneItems.length} timezones`);
-    }
     const theDates = _getDates(startDate, numberDays, dateEngine);
     return timeZoneItems.map((tzItem) => {
-        const label = tzItem.label;
-        const continent = _extractContinent(label);
+        const { label } = tzItem;
+        const continent = extractContinent(label);
         const dates = theDates.map((date) => {
             const key = `${date}-${label}`;
             let utc = processedDates.get(key);
@@ -48863,7 +49441,7 @@ const generateTimeZoneMetadata = (timeZoneItems, startDate, numberDays, dateEngi
         return {
             ...tzItem,
             continent,
-            isRegularContinent: _isRegularContinent(continent),
+            isRegularContinent: isRegularContinent(continent),
             dates,
         };
     });
@@ -48871,7 +49449,7 @@ const generateTimeZoneMetadata = (timeZoneItems, startDate, numberDays, dateEngi
 const compareDateArrs = (array1, array2, dateEngine) => array1.length === array2.length &&
     array1.every((value, index) => dateEngine.same(value, array2[index]));
 const getGroupLabelTimeZoneIndices = (rawTZs, max = 5) => {
-    const shrinkedTzs = rawTZs.filter(({ label }) => _isRegularContinent(_extractContinent(label)));
+    const shrinkedTzs = rawTZs.filter(({ label }) => isRegularContinent(extractContinent(label)));
     if (shrinkedTzs.length === 0) {
         return [0];
     }
@@ -48892,8 +49470,8 @@ function equallyDistributedSampling(items, maxItems = 5) {
     ];
 }
 
-async function groupTimeZones(options) {
-    const { debug, groupDateRange, hooks, startDate, dateEngine } = {
+async function groupByOffset(options) {
+    const { groupDateRange, startDate, dateEngine } = {
         ...defaultGroupingOptions,
         ...options,
     };
@@ -48901,26 +49479,20 @@ async function groupTimeZones(options) {
     if (!dateEngine) {
         throw new Error('dateEngine is required');
     }
-    const timeZoneItems = supportedTimeZones.map((tz) => ({ label: tz }));
-    hooks?.onBeforeTimeZoneMetadataCreate?.(timeZoneItems);
-    const timeZoneMetadata = generateTimeZoneMetadata(timeZoneItems, startDate, groupDateRange, dateEngine, debug);
-    hooks?.onTimeZoneMetadataCreate?.(timeZoneMetadata);
+    const timeZoneItems = timeZones.map((tz) => ({ label: tz }));
+    const timeZoneMetadata = generateTimeZoneMetadata(timeZoneItems, startDate, groupDateRange, dateEngine);
     // We traverse the mappedDB and see if we find matches by comparing each set
     // of transformed date for that specific TZ.
     for (const tzMetadatumI of timeZoneMetadata) {
         const { label, continent, dates } = tzMetadatumI;
-        // ignore if we visited this element already
         if (tzMetadatumI.visited) {
             continue;
         }
-        // Mark element as already visited
         tzMetadatumI.visited = true;
-        // The grouped timezone that we want as a result
         const newGroup = {
-            labelTzIndices: undefined,
+            labelIdx: [],
             tzs: [{ label }],
         };
-        hooks?.onGroupCreate?.(newGroup, tzMetadatumI);
         for (const tzMetadatumJ of timeZoneMetadata.filter((_) => !_.visited)) {
             const { label: labelJ, continent: continentJ, isRegularContinent: isRegularContinentJ, dates: datesJ, } = tzMetadatumJ;
             // We define a matching TZ by:
@@ -48930,44 +49502,27 @@ async function groupTimeZones(options) {
                 compareDateArrs(dates, datesJ, dateEngine)) {
                 const tzItem = { label: labelJ };
                 newGroup.tzs.push(tzItem);
-                hooks?.onGroupTimeZoneAdd?.(newGroup, tzItem, tzMetadatumJ);
-                // Mark element as already visited
                 tzMetadatumJ.visited = true;
             }
         }
         grouping.push(newGroup);
-        hooks?.onGroupAdd?.(newGroup);
     }
     // Now that we have a group, we want an easy way to find a fitting label for the group
     // which is defined as the list of the most-common 7 cities, shown in alphabetical order
-    const finalGrouping = grouping
+    return grouping
         .map((group) => {
-        hooks?.onBeforeFinalGroupCreate?.(group);
         group.tzs = group.tzs.sort((a, b) => a.label.localeCompare(b.label));
-        const finalGrouping = {
-            labelTzIndices: getGroupLabelTimeZoneIndices(group.tzs, 7),
+        return {
+            labelTzIdx: getGroupLabelTimeZoneIndices(group.tzs, 7),
             tzs: group.tzs.map((_) => _.label),
         };
-        hooks?.onFinalGroupCreate?.(finalGrouping, group);
-        return finalGrouping;
     })
         .sort((a, b) => b.tzs.length - a.tzs.length);
-    if (debug) {
-        const missingTzs = supportedTimeZones
-            .map((tz) => (finalGrouping.some((y) => y.tzs.includes(tz)) ? null : tz))
-            .filter(Boolean);
-        if (missingTzs.length > 0) {
-            throw new Error(`There are ${missingTzs.length} missing timezones: ${missingTzs.toString()}`);
-        }
-    }
-    return hooks?.onFinalGroupingCreate
-        ? hooks.onFinalGroupingCreate(finalGrouping)
-        : finalGrouping;
 }
 
 var index$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  groupTimeZones: groupTimeZones
+  groupByOffset: groupByOffset
 });
 
 class NativeDateEngine {