@esri/calcite-components 1.0.0-next.654 → 1.0.0-next.655

package/hydrate/index.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.654
+ * v1.0.0-next.655
  */
 'use strict';
 
@@ -6252,7 +6252,7 @@ const SLOTS$u = {
   actionsStart: "actions-start",
   actionsEnd: "actions-end"
 };
-const CSS$V = {
+const CSS$W = {
   icon: "icon",
   header: "header",
   headerContent: "header-content",
@@ -6319,27 +6319,27 @@ class AccordionItem {
   // --------------------------------------------------------------------------
   renderActionsStart() {
     const { el } = this;
-    return getSlotted(el, SLOTS$u.actionsStart) ? (hAsync("div", { class: CSS$V.actionsStart }, hAsync("slot", { name: SLOTS$u.actionsStart }))) : null;
+    return getSlotted(el, SLOTS$u.actionsStart) ? (hAsync("div", { class: CSS$W.actionsStart }, hAsync("slot", { name: SLOTS$u.actionsStart }))) : null;
   }
   renderActionsEnd() {
     const { el } = this;
-    return getSlotted(el, SLOTS$u.actionsEnd) ? (hAsync("div", { class: CSS$V.actionsEnd }, hAsync("slot", { name: SLOTS$u.actionsEnd }))) : null;
+    return getSlotted(el, SLOTS$u.actionsEnd) ? (hAsync("div", { class: CSS$W.actionsEnd }, hAsync("slot", { name: SLOTS$u.actionsEnd }))) : null;
   }
   render() {
     const dir = getElementDir(this.el);
-    const iconStartEl = this.iconStart ? (hAsync("calcite-icon", { class: CSS$V.iconStart, icon: this.iconStart, key: "icon-start", scale: "s" })) : null;
-    const iconEndEl = this.iconEnd ? (hAsync("calcite-icon", { class: CSS$V.iconEnd, icon: this.iconEnd, key: "icon-end", scale: "s" })) : null;
+    const iconStartEl = this.iconStart ? (hAsync("calcite-icon", { class: CSS$W.iconStart, icon: this.iconStart, key: "icon-start", scale: "s" })) : null;
+    const iconEndEl = this.iconEnd ? (hAsync("calcite-icon", { class: CSS$W.iconEnd, icon: this.iconEnd, key: "icon-end", scale: "s" })) : null;
     const { description } = this;
     return (hAsync(Host, null, hAsync("div", { class: {
         [`icon-position--${this.iconPosition}`]: true,
         [`icon-type--${this.iconType}`]: true
-      } }, hAsync("div", { class: { [CSS$V.header]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.renderActionsStart(), hAsync("div", { "aria-expanded": toAriaBoolean(this.expanded), class: CSS$V.headerContent, onClick: this.itemHeaderClickHandler, role: "button", tabindex: "0" }, hAsync("div", { class: CSS$V.headerContainer }, iconStartEl, hAsync("div", { class: CSS$V.headerText }, hAsync("span", { class: CSS$V.heading }, this.heading), description ? hAsync("span", { class: CSS$V.description }, description) : null), iconEndEl), hAsync("calcite-icon", { class: CSS$V.expandIcon, icon: this.iconType === "chevron"
+      } }, hAsync("div", { class: { [CSS$W.header]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.renderActionsStart(), hAsync("div", { "aria-expanded": toAriaBoolean(this.expanded), class: CSS$W.headerContent, onClick: this.itemHeaderClickHandler, role: "button", tabindex: "0" }, hAsync("div", { class: CSS$W.headerContainer }, iconStartEl, hAsync("div", { class: CSS$W.headerText }, hAsync("span", { class: CSS$W.heading }, this.heading), description ? hAsync("span", { class: CSS$W.description }, description) : null), iconEndEl), hAsync("calcite-icon", { class: CSS$W.expandIcon, icon: this.iconType === "chevron"
         ? "chevronDown"
         : this.iconType === "caret"
           ? "caretDown"
           : this.expanded
             ? "minus"
-            : "plus", scale: "s" })), this.renderActionsEnd()), hAsync("div", { class: CSS$V.content }, hAsync("slot", null)))));
+            : "plus", scale: "s" })), this.renderActionsEnd()), hAsync("div", { class: CSS$W.content }, hAsync("slot", null)))));
   }
   //--------------------------------------------------------------------------
   //
@@ -6423,7 +6423,7 @@ class AccordionItem {
   }; }
 }
 
-const CSS$U = {
+const CSS$V = {
   button: "button",
   buttonTextVisible: "button--text-visible",
   buttonCompact: "button--compact",
@@ -6611,8 +6611,8 @@ class Action {
   renderTextContainer() {
     const { text, textEnabled } = this;
     const textContainerClasses = {
-      [CSS$U.textContainer]: true,
-      [CSS$U.textContainerVisible]: textEnabled
+      [CSS$V.textContainer]: true,
+      [CSS$V.textContainerVisible]: textEnabled
     };
     return text ? (hAsync("div", { class: textContainerClasses, key: "text-container" }, text)) : null;
   }
@@ -6625,18 +6625,18 @@ class Action {
     const iconNode = calciteLoaderNode || calciteIconNode;
     const hasIconToDisplay = iconNode || el.children?.length;
     const slotContainerNode = (hAsync("div", { class: {
-        [CSS$U.slotContainer]: true,
-        [CSS$U.slotContainerHidden]: loading
+        [CSS$V.slotContainer]: true,
+        [CSS$V.slotContainerHidden]: loading
       } }, hAsync("slot", null)));
-    return hasIconToDisplay ? (hAsync("div", { "aria-hidden": "true", class: CSS$U.iconContainer, key: "icon-container" }, iconNode, slotContainerNode)) : null;
+    return hasIconToDisplay ? (hAsync("div", { "aria-hidden": "true", class: CSS$V.iconContainer, key: "icon-container" }, iconNode, slotContainerNode)) : null;
   }
   render() {
     const { compact, disabled, loading, textEnabled, label, text } = this;
     const ariaLabel = label || text;
     const buttonClasses = {
-      [CSS$U.button]: true,
-      [CSS$U.buttonTextVisible]: textEnabled,
-      [CSS$U.buttonCompact]: compact
+      [CSS$V.button]: true,
+      [CSS$V.buttonTextVisible]: textEnabled,
+      [CSS$V.buttonCompact]: compact
     };
     return (hAsync(Host, null, hAsync("button", { "aria-busy": toAriaBoolean(loading), "aria-disabled": toAriaBoolean(disabled), "aria-label": ariaLabel, class: buttonClasses, disabled: disabled, ref: (buttonEl) => (this.buttonEl = buttonEl) }, this.renderIconContainer(), this.renderTextContainer()), hAsync("slot", { name: SLOTS$t.tooltip, onSlotchange: this.handleTooltipSlotChange })));
   }
@@ -6667,7 +6667,7 @@ class Action {
   }; }
 }
 
-const CSS$T = {
+const CSS$U = {
   menu: "menu",
   defaultTrigger: "default-trigger"
 };
@@ -6778,7 +6778,7 @@ const ExpandToggle = ({ expanded, intlExpand, intlCollapse, toggle, el, position
   return actionNode;
 };
 
-const CSS$S = {
+const CSS$T = {
   actionGroupBottom: "action-group--bottom"
 };
 const SLOTS$q = {
@@ -8212,7 +8212,7 @@ class ActionBar {
     const expandLabel = intlExpand || TEXT$s.expand;
     const collapseLabel = intlCollapse || TEXT$s.collapse;
     const expandToggleNode = !expandDisabled ? (hAsync(ExpandToggle, { el: el, expanded: expanded, intlCollapse: collapseLabel, intlExpand: expandLabel, position: position, ref: this.setExpandToggleRef, scale: scale, toggle: toggleExpand, tooltip: tooltip })) : null;
-    return getSlotted(el, SLOTS$q.bottomActions) || expandToggleNode ? (hAsync("calcite-action-group", { class: CSS$S.actionGroupBottom, layout: layout, scale: scale }, hAsync("slot", { name: SLOTS$q.bottomActions }), hAsync("slot", { name: SLOTS$q.expandTooltip }), expandToggleNode)) : null;
+    return getSlotted(el, SLOTS$q.bottomActions) || expandToggleNode ? (hAsync("calcite-action-group", { class: CSS$T.actionGroupBottom, layout: layout, scale: scale }, hAsync("slot", { name: SLOTS$q.bottomActions }), hAsync("slot", { name: SLOTS$q.expandTooltip }), expandToggleNode)) : null;
   }
   render() {
     return (hAsync(Host, { onCalciteActionMenuOpenChange: this.actionMenuOpenChangeHandler }, hAsync("slot", null), this.renderBottomActionGroup()));
@@ -8578,14 +8578,14 @@ class ActionMenu {
   }
   renderMenuButton() {
     const { label, scale, expanded } = this;
-    const menuButtonSlot = (hAsync("slot", { name: SLOTS$s.trigger, onSlotchange: this.setMenuButtonEl }, hAsync("calcite-action", { class: CSS$T.defaultTrigger, icon: ICONS$h.menu, ref: this.setDefaultMenuButtonEl, scale: scale, text: label, textEnabled: expanded })));
+    const menuButtonSlot = (hAsync("slot", { name: SLOTS$s.trigger, onSlotchange: this.setMenuButtonEl }, hAsync("calcite-action", { class: CSS$U.defaultTrigger, icon: ICONS$h.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", { disableFocusTrap: true, disablePointer: true, flipPlacements: flipPlacements, label: label, offsetDistance: 0, open: open, overlayPositioning: overlayPositioning, placement: placement, referenceElement: menuButtonEl }, hAsync("div", { "aria-activedescendant": activeDescendantId, "aria-labelledby": menuButtonEl?.id, class: CSS$T.menu, id: menuId, onClick: this.handleCalciteActionClick, role: "menu", tabIndex: -1 }, hAsync("slot", { onSlotchange: this.handleDefaultSlotChange }))));
+    return (hAsync("calcite-popover", { disableFocusTrap: true, disablePointer: true, flipPlacements: flipPlacements, label: label, offsetDistance: 0, open: open, overlayPositioning: overlayPositioning, placement: placement, referenceElement: menuButtonEl }, hAsync("div", { "aria-activedescendant": activeDescendantId, "aria-labelledby": menuButtonEl?.id, class: CSS$U.menu, id: menuId, onClick: this.handleCalciteActionClick, role: "menu", tabIndex: -1 }, hAsync("slot", { onSlotchange: this.handleDefaultSlotChange }))));
   }
   render() {
     return (hAsync(Fragment, null, this.renderMenuButton(), this.renderMenuItems(), hAsync("slot", { name: SLOTS$s.tooltip, onSlotchange: this.updateTooltip })));
@@ -8621,7 +8621,7 @@ class ActionMenu {
   }; }
 }
 
-const CSS$R = {
+const CSS$S = {
   actionGroupBottom: "action-group--bottom",
   container: "container"
 };
@@ -8724,10 +8724,10 @@ class ActionPad {
     const expandLabel = intlExpand || TEXT$r.expand;
     const collapseLabel = intlCollapse || TEXT$r.collapse;
     const expandToggleNode = !expandDisabled ? (hAsync(ExpandToggle, { el: el, expanded: expanded, intlCollapse: collapseLabel, intlExpand: expandLabel, position: position, ref: this.setExpandToggleRef, scale: scale, toggle: toggleExpand, tooltip: tooltip })) : null;
-    return expandToggleNode ? (hAsync("calcite-action-group", { class: CSS$R.actionGroupBottom, layout: layout, scale: scale }, hAsync("slot", { name: SLOTS$p.expandTooltip }), expandToggleNode)) : null;
+    return expandToggleNode ? (hAsync("calcite-action-group", { class: CSS$S.actionGroupBottom, layout: layout, scale: scale }, hAsync("slot", { name: SLOTS$p.expandTooltip }), expandToggleNode)) : null;
   }
   render() {
-    return (hAsync(Host, { onCalciteActionMenuOpenChange: this.actionMenuOpenChangeHandler }, hAsync("div", { class: CSS$R.container }, hAsync("slot", null), this.renderBottomActionGroup())));
+    return (hAsync(Host, { onCalciteActionMenuOpenChange: this.actionMenuOpenChangeHandler }, hAsync("div", { class: CSS$S.container }, hAsync("slot", null), this.renderBottomActionGroup())));
   }
   get el() { return getElement(this); }
   static get watchers() { return {
@@ -8767,7 +8767,7 @@ const SLOTS$o = {
   message: "message",
   link: "link"
 };
-const CSS$Q = {
+const CSS$R = {
   actionsEnd: "actions-end",
   container: "container"
 };
@@ -9310,7 +9310,7 @@ class Alert {
         container: true,
         queued,
         [placement]: true
-      }, ref: this.setTransitionEl }, requestedIcon ? (hAsync("div", { class: "alert-icon" }, hAsync("calcite-icon", { icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, hAsync("div", { class: "alert-content" }, hAsync("slot", { name: SLOTS$o.title }), hAsync("slot", { name: SLOTS$o.message }), hAsync("slot", { name: SLOTS$o.link })), hAsync("div", { class: CSS$Q.actionsEnd, hidden: !hasEndActions }, slotNode), this.queueLength > 1 ? queueCount : null, !autoDismiss ? closeButton : null, open && !queued && autoDismiss ? hAsync("div", { class: "alert-dismiss-progress" }) : null)));
+      }, ref: this.setTransitionEl }, requestedIcon ? (hAsync("div", { class: "alert-icon" }, hAsync("calcite-icon", { icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, hAsync("div", { class: "alert-content" }, hAsync("slot", { name: SLOTS$o.title }), hAsync("slot", { name: SLOTS$o.message }), hAsync("slot", { name: SLOTS$o.link })), hAsync("div", { class: CSS$R.actionsEnd, hidden: !hasEndActions }, slotNode), this.queueLength > 1 ? queueCount : null, !autoDismiss ? closeButton : null, open && !queued && autoDismiss ? hAsync("div", { class: "alert-dismiss-progress" }) : null)));
   }
   // when an alert is opened or closed, update queue and determine active alert
   alertSync(event) {
@@ -9666,7 +9666,7 @@ class Avatar {
   }; }
 }
 
-const CSS$P = {
+const CSS$Q = {
   container: "container",
   content: "content",
   headerContainer: "header-container",
@@ -9784,31 +9784,31 @@ class Block {
     const statusIcon = showingLoadingStatus ? ICONS$e.refresh : ICONS$e[status];
     const hasIcon = getSlotted(el, SLOTS$n.icon) || statusIcon;
     const iconEl = !statusIcon ? (hAsync("slot", { key: "icon-slot", name: SLOTS$n.icon })) : (hAsync("calcite-icon", { class: {
-        [CSS$P.statusIcon]: true,
-        [CSS$P.valid]: status == "valid",
-        [CSS$P.invalid]: status == "invalid",
-        [CSS$P.loading]: showingLoadingStatus
+        [CSS$Q.statusIcon]: true,
+        [CSS$Q.valid]: status == "valid",
+        [CSS$Q.invalid]: status == "invalid",
+        [CSS$Q.loading]: showingLoadingStatus
       }, icon: statusIcon, scale: "m" }));
-    return hasIcon ? hAsync("div", { class: CSS$P.icon }, iconEl) : null;
+    return hasIcon ? hAsync("div", { class: CSS$Q.icon }, iconEl) : null;
   }
   renderTitle() {
     const { heading, headingLevel, description } = this;
-    return heading || description ? (hAsync("div", { class: CSS$P.title }, hAsync(Heading, { class: CSS$P.heading, level: headingLevel }, heading), description ? hAsync("div", { class: CSS$P.description }, description) : null)) : null;
+    return heading || description ? (hAsync("div", { class: CSS$Q.title }, hAsync(Heading, { class: CSS$Q.heading, level: headingLevel }, heading), description ? hAsync("div", { class: CSS$Q.description }, description) : null)) : null;
   }
   render() {
     const { collapsible, el, intlCollapse, intlExpand, loading, open, intlLoading } = this;
     const toggleLabel = open ? intlCollapse || TEXT$p.collapse : intlExpand || TEXT$p.expand;
-    const headerContent = (hAsync("header", { class: CSS$P.header }, this.renderIcon(), this.renderTitle()));
+    const headerContent = (hAsync("header", { class: CSS$Q.header }, this.renderIcon(), this.renderTitle()));
     const hasControl = !!getSlotted(el, SLOTS$n.control);
     const hasMenuActions = !!getSlotted(el, SLOTS$n.headerMenuActions);
     const collapseIcon = open ? ICONS$e.opened : ICONS$e.closed;
     const { guid } = this;
     const regionId = `${guid}-region`;
     const buttonId = `${guid}-button`;
-    const headerNode = (hAsync("div", { class: CSS$P.headerContainer }, this.dragHandle ? hAsync("calcite-handle", null) : null, collapsible ? (hAsync("button", { "aria-controls": regionId, "aria-expanded": collapsible ? toAriaBoolean(open) : null, "aria-label": toggleLabel, class: CSS$P.toggle, id: buttonId, onClick: this.onHeaderClick, title: toggleLabel }, headerContent, !hasControl && !hasMenuActions ? (hAsync("calcite-icon", { "aria-hidden": "true", class: CSS$P.toggleIcon, icon: collapseIcon, scale: "s" })) : null)) : (headerContent), loading ? (hAsync("calcite-loader", { inline: true, "is-active": true, label: intlLoading })) : hasControl ? (hAsync("div", { class: CSS$P.controlContainer }, hAsync("slot", { name: SLOTS$n.control }))) : null, hasMenuActions ? (hAsync("calcite-action-menu", { label: this.intlOptions || TEXT$p.options }, hAsync("slot", { name: SLOTS$n.headerMenuActions }))) : null));
+    const headerNode = (hAsync("div", { class: CSS$Q.headerContainer }, this.dragHandle ? hAsync("calcite-handle", null) : null, collapsible ? (hAsync("button", { "aria-controls": regionId, "aria-expanded": collapsible ? toAriaBoolean(open) : null, "aria-label": toggleLabel, class: CSS$Q.toggle, id: buttonId, onClick: this.onHeaderClick, title: toggleLabel }, headerContent, !hasControl && !hasMenuActions ? (hAsync("calcite-icon", { "aria-hidden": "true", class: CSS$Q.toggleIcon, icon: collapseIcon, scale: "s" })) : null)) : (headerContent), loading ? (hAsync("calcite-loader", { inline: true, "is-active": true, label: intlLoading })) : hasControl ? (hAsync("div", { class: CSS$Q.controlContainer }, hAsync("slot", { name: SLOTS$n.control }))) : null, hasMenuActions ? (hAsync("calcite-action-menu", { label: this.intlOptions || TEXT$p.options }, hAsync("slot", { name: SLOTS$n.headerMenuActions }))) : null));
     return (hAsync(Host, null, hAsync("article", { "aria-busy": toAriaBoolean(loading), class: {
-        [CSS$P.container]: true
-      } }, headerNode, hAsync("section", { "aria-expanded": toAriaBoolean(open), "aria-labelledby": buttonId, class: CSS$P.content, hidden: !open, id: regionId }, this.renderScrim()))));
+        [CSS$Q.container]: true
+      } }, headerNode, hAsync("section", { "aria-expanded": toAriaBoolean(open), "aria-labelledby": buttonId, class: CSS$Q.content, hidden: !open, id: regionId }, this.renderScrim()))));
   }
   get el() { return getElement(this); }
   static get style() { return blockCss; }
@@ -9836,7 +9836,7 @@ class Block {
   }; }
 }
 
-const CSS$O = {
+const CSS$P = {
   content: "content",
   invalid: "invalid",
   toggle: "toggle",
@@ -9902,9 +9902,9 @@ class BlockSection {
     const { status } = this;
     const statusIcon = ICONS$d[status] ?? false;
     const statusIconClasses = {
-      [CSS$O.statusIcon]: true,
-      [CSS$O.valid]: status == "valid",
-      [CSS$O.invalid]: status == "invalid"
+      [CSS$P.statusIcon]: true,
+      [CSS$P.valid]: status == "valid",
+      [CSS$P.invalid]: status == "invalid"
     };
     return !!statusIcon ? (hAsync("calcite-icon", { class: statusIconClasses, icon: statusIcon, scale: "s" })) : null;
   }
@@ -9921,13 +9921,13 @@ class BlockSection {
     const regionId = `${guid}-region`;
     const buttonId = `${guid}-button`;
     const headerNode = toggleDisplay === "switch" ? (hAsync("div", { "aria-controls": regionId, "aria-label": toggleLabel, class: {
-        [CSS$O.toggle]: true,
-        [CSS$O.toggleSwitch]: true
-      }, id: buttonId, onClick: this.toggleSection, onKeyDown: this.handleHeaderKeyDown, tabIndex: 0, title: toggleLabel }, hAsync("div", { class: CSS$O.toggleSwitchContent }, hAsync("span", { class: CSS$O.toggleSwitchText }, text)), hAsync("calcite-switch", { checked: open, label: toggleLabel, scale: "s", tabIndex: -1 }), this.renderStatusIcon())) : (hAsync("button", { "aria-controls": regionId, "aria-label": toggleLabel, class: {
-        [CSS$O.sectionHeader]: true,
-        [CSS$O.toggle]: true
-      }, id: buttonId, name: toggleLabel, onClick: this.toggleSection }, hAsync("calcite-icon", { icon: arrowIcon, scale: "s" }), hAsync("span", { class: CSS$O.sectionHeaderText }, text), this.renderStatusIcon()));
-    return (hAsync(Host, null, headerNode, hAsync("section", { "aria-expanded": toAriaBoolean(open), "aria-labelledby": buttonId, class: CSS$O.content, hidden: !open, id: regionId }, hAsync("slot", null))));
+        [CSS$P.toggle]: true,
+        [CSS$P.toggleSwitch]: true
+      }, id: buttonId, onClick: this.toggleSection, onKeyDown: this.handleHeaderKeyDown, tabIndex: 0, title: toggleLabel }, hAsync("div", { class: CSS$P.toggleSwitchContent }, hAsync("span", { class: CSS$P.toggleSwitchText }, text)), hAsync("calcite-switch", { checked: open, label: toggleLabel, scale: "s", tabIndex: -1 }), this.renderStatusIcon())) : (hAsync("button", { "aria-controls": regionId, "aria-label": toggleLabel, class: {
+        [CSS$P.sectionHeader]: true,
+        [CSS$P.toggle]: true
+      }, id: buttonId, name: toggleLabel, onClick: this.toggleSection }, hAsync("calcite-icon", { icon: arrowIcon, scale: "s" }), hAsync("span", { class: CSS$P.sectionHeaderText }, text), this.renderStatusIcon()));
+    return (hAsync(Host, null, headerNode, hAsync("section", { "aria-expanded": toAriaBoolean(open), "aria-labelledby": buttonId, class: CSS$P.content, hidden: !open, id: regionId }, hAsync("slot", null))));
   }
   get el() { return getElement(this); }
   static get style() { return blockSectionCss; }
@@ -9976,7 +9976,7 @@ class BlockSection {
   }
 })(HTMLFormElement.prototype);
 
-const CSS$N = {
+const CSS$O = {
   buttonLoader: "calcite-button--loader",
   content: "content",
   contentSlotted: "content--slotted",
@@ -10408,17 +10408,17 @@ class Button {
   render() {
     const childElType = this.href ? "a" : "button";
     const Tag = childElType;
-    const loaderNode = this.hasLoader ? (hAsync("div", { class: CSS$N.buttonLoader }, hAsync("calcite-loader", { class: this.loading ? CSS$N.loadingIn : CSS$N.loadingOut, inline: true, label: this.intlLoading, scale: this.scale === "l" ? "m" : "s" }))) : null;
+    const loaderNode = this.hasLoader ? (hAsync("div", { class: CSS$O.buttonLoader }, hAsync("calcite-loader", { class: this.loading ? CSS$O.loadingIn : CSS$O.loadingOut, inline: true, label: this.intlLoading, scale: this.scale === "l" ? "m" : "s" }))) : null;
     const noStartEndIcons = !this.iconStart && !this.iconEnd;
-    const iconStartEl = (hAsync("calcite-icon", { class: { [CSS$N.icon]: true, [CSS$N.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: this.scale === "l" ? "m" : "s" }));
-    const iconEndEl = (hAsync("calcite-icon", { class: { [CSS$N.icon]: true, [CSS$N.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: this.scale === "l" ? "m" : "s" }));
-    const contentEl = (hAsync("span", { class: CSS$N.content }, hAsync("slot", null)));
+    const iconStartEl = (hAsync("calcite-icon", { class: { [CSS$O.icon]: true, [CSS$O.iconStart]: true }, flipRtl: this.iconFlipRtl === "start" || this.iconFlipRtl === "both", icon: this.iconStart, scale: this.scale === "l" ? "m" : "s" }));
+    const iconEndEl = (hAsync("calcite-icon", { class: { [CSS$O.icon]: true, [CSS$O.iconEnd]: true }, flipRtl: this.iconFlipRtl === "end" || this.iconFlipRtl === "both", icon: this.iconEnd, scale: this.scale === "l" ? "m" : "s" }));
+    const contentEl = (hAsync("span", { class: CSS$O.content }, hAsync("slot", null)));
     return (hAsync(Tag, { "aria-label": getLabelText(this), class: {
-        [CSS$N.buttonPadding]: noStartEndIcons,
-        [CSS$N.buttonPaddingShrunk]: !noStartEndIcons,
-        [CSS$N.contentSlotted]: this.hasContent,
-        [CSS$N.iconStartEmpty]: !this.iconStart,
-        [CSS$N.iconEndEmpty]: !this.iconEnd
+        [CSS$O.buttonPadding]: noStartEndIcons,
+        [CSS$O.buttonPaddingShrunk]: !noStartEndIcons,
+        [CSS$O.contentSlotted]: this.hasContent,
+        [CSS$O.iconStartEmpty]: !this.iconStart,
+        [CSS$O.iconEndEmpty]: !this.iconEnd
       }, disabled: this.disabled || this.loading, href: childElType === "a" && this.href, name: childElType === "button" && this.name, onClick: this.handleClick, ref: (el) => (this.childEl = el), rel: childElType === "a" && this.rel, tabIndex: this.disabled || this.loading ? -1 : null, target: childElType === "a" && this.target, type: childElType === "button" && this.type }, loaderNode, this.iconStart ? iconStartEl : null, this.hasContent ? contentEl : null, this.iconEnd ? iconEndEl : null));
   }
   //--------------------------------------------------------------------------
@@ -10489,7 +10489,7 @@ class Button {
   }; }
 }
 
-const CSS$M = {
+const CSS$N = {
   container: "container",
   header: "header",
   footer: "footer",
@@ -10573,32 +10573,32 @@ class Card {
   render() {
     const thumbnailInline = this.thumbnailPosition.startsWith("inline");
     const thumbnailStart = this.thumbnailPosition.endsWith("start");
-    return (hAsync("div", { class: { "calcite-card-container": true, inline: thumbnailInline } }, this.loading ? (hAsync("div", { class: "calcite-card-loader-container" }, hAsync("calcite-loader", { label: this.intlLoading }))) : null, thumbnailStart && this.renderThumbnail(), hAsync("section", { "aria-busy": toAriaBoolean(this.loading), class: { [CSS$M.container]: true } }, this.selectable ? this.renderCheckbox() : null, this.renderHeader(), hAsync("div", { class: "card-content" }, hAsync("slot", null)), this.renderFooter()), !thumbnailStart && this.renderThumbnail()));
+    return (hAsync("div", { class: { "calcite-card-container": true, inline: thumbnailInline } }, this.loading ? (hAsync("div", { class: "calcite-card-loader-container" }, hAsync("calcite-loader", { label: this.intlLoading }))) : null, thumbnailStart && this.renderThumbnail(), hAsync("section", { "aria-busy": toAriaBoolean(this.loading), class: { [CSS$N.container]: true } }, this.selectable ? this.renderCheckbox() : null, this.renderHeader(), hAsync("div", { class: "card-content" }, hAsync("slot", null)), this.renderFooter()), !thumbnailStart && this.renderThumbnail()));
   }
   selectCard() {
     this.selected = !this.selected;
     this.calciteCardSelect.emit();
   }
   renderThumbnail() {
-    return getSlotted(this.el, SLOTS$m.thumbnail) ? (hAsync("section", { class: CSS$M.thumbnailWrapper }, hAsync("slot", { name: SLOTS$m.thumbnail }))) : null;
+    return getSlotted(this.el, SLOTS$m.thumbnail) ? (hAsync("section", { class: CSS$N.thumbnailWrapper }, hAsync("slot", { name: SLOTS$m.thumbnail }))) : null;
   }
   renderCheckbox() {
     const checkboxLabel = this.selected ? this.intlDeselect : this.intlSelect;
-    return (hAsync("calcite-label", { class: CSS$M.checkboxWrapper, onClick: this.cardSelectClick, onKeyDown: this.cardSelectKeyDown }, hAsync("calcite-checkbox", { checked: this.selected, label: checkboxLabel })));
+    return (hAsync("calcite-label", { class: CSS$N.checkboxWrapper, onClick: this.cardSelectClick, onKeyDown: this.cardSelectKeyDown }, hAsync("calcite-checkbox", { checked: this.selected, label: checkboxLabel })));
   }
   renderHeader() {
     const { el } = this;
     const title = getSlotted(el, SLOTS$m.title);
     const subtitle = getSlotted(el, SLOTS$m.subtitle);
     const hasHeader = title || subtitle;
-    return hasHeader ? (hAsync("header", { class: CSS$M.header }, hAsync("slot", { name: SLOTS$m.title }), hAsync("slot", { name: SLOTS$m.subtitle }))) : null;
+    return hasHeader ? (hAsync("header", { class: CSS$N.header }, hAsync("slot", { name: SLOTS$m.title }), hAsync("slot", { name: SLOTS$m.subtitle }))) : null;
   }
   renderFooter() {
     const { el } = this;
     const leadingFooter = getSlotted(el, SLOTS$m.footerLeading);
     const trailingFooter = getSlotted(el, SLOTS$m.footerTrailing);
     const hasFooter = leadingFooter || trailingFooter;
-    return hasFooter ? (hAsync("footer", { class: CSS$M.footer }, hAsync("slot", { name: SLOTS$m.footerLeading }), hAsync("slot", { name: SLOTS$m.footerTrailing }))) : null;
+    return hasFooter ? (hAsync("footer", { class: CSS$N.footer }, hAsync("slot", { name: SLOTS$m.footerLeading }), hAsync("slot", { name: SLOTS$m.footerTrailing }))) : null;
   }
   get el() { return getElement(this); }
   static get style() { return cardCss; }
@@ -10748,7 +10748,7 @@ class Checkbox {
   }; }
 }
 
-const CSS$L = {
+const CSS$M = {
   title: "title",
   close: "close",
   imageContainer: "image-container",
@@ -10831,12 +10831,12 @@ class Chip {
   renderChipImage() {
     const { el } = this;
     const hasChipImage = getSlotted(el, SLOTS$l.image);
-    return hasChipImage ? (hAsync("div", { class: CSS$L.imageContainer, key: "image" }, hAsync("slot", { name: SLOTS$l.image }))) : null;
+    return hasChipImage ? (hAsync("div", { class: CSS$M.imageContainer, key: "image" }, hAsync("slot", { name: SLOTS$l.image }))) : null;
   }
   render() {
-    const iconEl = (hAsync("calcite-icon", { class: CSS$L.chipIcon, flipRtl: this.iconFlipRtl, icon: this.icon, scale: "s" }));
-    const closeButton = (hAsync("button", { "aria-describedby": this.guid, "aria-label": this.dismissLabel, class: CSS$L.close, onClick: this.closeClickHandler, ref: (el) => (this.closeButton = el) }, hAsync("calcite-icon", { class: CSS$L.closeIcon, icon: ICONS$c.close, scale: "s" })));
-    return (hAsync("div", { class: "container" }, this.renderChipImage(), this.icon ? iconEl : null, hAsync("span", { class: CSS$L.title, id: this.guid }, hAsync("slot", null)), this.closable ? closeButton : null));
+    const iconEl = (hAsync("calcite-icon", { class: CSS$M.chipIcon, flipRtl: this.iconFlipRtl, icon: this.icon, scale: "s" }));
+    const closeButton = (hAsync("button", { "aria-describedby": this.guid, "aria-label": this.dismissLabel, class: CSS$M.close, onClick: this.closeClickHandler, ref: (el) => (this.closeButton = el) }, hAsync("calcite-icon", { class: CSS$M.closeIcon, icon: ICONS$c.close, scale: "s" })));
+    return (hAsync("div", { class: "container" }, this.renderChipImage(), this.icon ? iconEl : null, hAsync("span", { class: CSS$M.title, id: this.guid }, hAsync("slot", null)), this.closable ? closeButton : null));
   }
   get el() { return getElement(this); }
   static get style() { return chipCss; }
@@ -12971,7 +12971,7 @@ function zeroArray(array, length) {
 
 var color = Color;
 
-const CSS$K = {
+const CSS$L = {
   container: "container",
   controlSection: "control-section",
   hexOptions: "color-hex-options",
@@ -13344,7 +13344,7 @@ class ColorPicker {
       const { channelMode: activeChannelMode, intlRgb, intlHsv } = this;
       const active = channelMode === activeChannelMode;
       const label = channelMode === "rgb" ? intlRgb : intlHsv;
-      return (hAsync("calcite-tab-title", { active: active, class: CSS$K.colorMode, "data-color-mode": channelMode, key: channelMode, onCalciteTabsActivate: this.handleTabActivate }, label));
+      return (hAsync("calcite-tab-title", { active: active, class: CSS$L.colorMode, "data-color-mode": channelMode, key: channelMode, onCalciteTabsActivate: this.handleTabActivate }, label));
     };
     this.renderChannelsTab = (channelMode) => {
       const { channelMode: activeChannelMode, channels, intlB, intlBlue, intlG, intlGreen, intlH, intlHue, intlR, intlRed, intlS, intlSaturation, intlV, intlValue } = this;
@@ -13355,11 +13355,11 @@ class ColorPicker {
         ? [intlRed, intlGreen, intlBlue]
         : [intlHue, intlSaturation, intlValue];
       const direction = getElementDir(this.el);
-      return (hAsync("calcite-tab", { active: active, class: CSS$K.control, key: channelMode }, hAsync("div", { class: CSS$K.channels, dir: "ltr" }, channels.map((channel, index) => 
+      return (hAsync("calcite-tab", { active: active, class: CSS$L.control, key: channelMode }, hAsync("div", { class: CSS$L.channels, dir: "ltr" }, channels.map((channel, index) => 
       /* the channel container is ltr, so we apply the host's direction */
       this.renderChannel(channel, index, channelLabels[index], channelAriaLabels[index], direction)))));
     };
-    this.renderChannel = (value, index, label, ariaLabel, direction) => (hAsync("calcite-input", { class: CSS$K.channel, "data-channel-index": index, dir: direction, label: ariaLabel, numberButtonType: "none", numberingSystem: this.numberingSystem, onCalciteInputChange: this.handleChannelChange, onCalciteInputInput: this.handleChannelInput, onKeyDown: this.handleKeyDown, prefixText: label, scale: this.scale === "l" ? "m" : "s", type: "number", value: value?.toString() }));
+    this.renderChannel = (value, index, label, ariaLabel, direction) => (hAsync("calcite-input", { class: CSS$L.channel, "data-channel-index": index, dir: direction, label: ariaLabel, numberButtonType: "none", numberingSystem: this.numberingSystem, onCalciteInputChange: this.handleChannelChange, onCalciteInputInput: this.handleChannelInput, onKeyDown: this.handleKeyDown, prefixText: label, scale: this.scale === "l" ? "m" : "s", type: "number", value: value?.toString() }));
     this.deleteColor = () => {
       const colorToDelete = this.color.hex();
       const inStorage = this.savedColors.indexOf(colorToDelete) > -1;
@@ -13502,7 +13502,7 @@ class ColorPicker {
     this.shiftKeyChannelAdjustment = 0;
     const { key } = event;
     if ((key !== "ArrowUp" && key !== "ArrowDown") ||
-      !event.composedPath().some((node) => node.classList?.contains(CSS$K.channel))) {
+      !event.composedPath().some((node) => node.classList?.contains(CSS$L.channel))) {
       return;
     }
     const { shiftKey } = event;
@@ -13578,20 +13578,20 @@ class ColorPicker {
     const hueLeft = hueScopeLeft ?? (colorFieldWidth * DEFAULT_COLOR$1.hue()) / HSV_LIMITS.h;
     const noColor = color === null;
     const vertical = scopeOrientation === "vertical";
-    return (hAsync("div", { class: CSS$K.container }, hAsync("div", { class: CSS$K.colorFieldAndSliderWrap }, hAsync("canvas", { class: {
-        [CSS$K.colorFieldAndSlider]: true,
-        [CSS$K.colorFieldAndSliderInteractive]: colorFieldAndSliderInteractive
-      }, onPointerDown: this.handleColorFieldAndSliderPointerDown, onPointerEnter: this.handleColorFieldAndSliderPointerEnterOrMove, onPointerLeave: this.handleColorFieldAndSliderPointerLeave, onPointerMove: this.handleColorFieldAndSliderPointerEnterOrMove, ref: this.initColorFieldAndSlider }), hAsync("div", { "aria-label": vertical ? this.intlValue : this.intlSaturation, "aria-valuemax": vertical ? HSV_LIMITS.v : HSV_LIMITS.s, "aria-valuemin": "0", "aria-valuenow": (vertical ? color?.saturationv() : color?.value()) || "0", class: { [CSS$K.scope]: true, [CSS$K.colorFieldScope]: true }, onKeyDown: this.handleColorFieldScopeKeyDown, ref: this.storeColorFieldScope, role: "slider", style: { top: `${colorFieldScopeTop || 0}px`, left: `${colorFieldScopeLeft || 0}px` }, tabindex: "0" }), hAsync("div", { "aria-label": this.intlHue, "aria-valuemax": HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": color?.round().hue() || DEFAULT_COLOR$1.round().hue(), class: { [CSS$K.scope]: true, [CSS$K.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, ref: this.storeHueScope, role: "slider", style: { top: `${hueTop}px`, left: `${hueLeft}px` }, tabindex: "0" })), hideHex && hideChannels ? null : (hAsync("div", { class: {
-        [CSS$K.controlSection]: true,
-        [CSS$K.section]: true
-      } }, hideHex ? null : (hAsync("div", { class: CSS$K.hexOptions }, hAsync("span", { class: {
-        [CSS$K.header]: true,
-        [CSS$K.headerHex]: true
-      } }, intlHex), hAsync("calcite-color-picker-hex-input", { allowEmpty: allowEmpty, class: CSS$K.control, numberingSystem: this.numberingSystem, onCalciteColorPickerHexInputChange: this.handleHexInputChange, scale: hexInputScale, value: selectedColorInHex }))), hideChannels ? null : (hAsync("calcite-tabs", { class: {
-        [CSS$K.colorModeContainer]: true,
-        [CSS$K.splitSection]: true
-      }, scale: hexInputScale }, hAsync("calcite-tab-nav", { slot: "tab-nav" }, this.renderChannelsTabTitle("rgb"), this.renderChannelsTabTitle("hsv")), this.renderChannelsTab("rgb"), this.renderChannelsTab("hsv"))))), hideSaved ? null : (hAsync("div", { class: { [CSS$K.savedColorsSection]: true, [CSS$K.section]: true } }, hAsync("div", { class: CSS$K.header }, hAsync("label", null, intlSaved), hAsync("div", { class: CSS$K.savedColorsButtons }, hAsync("calcite-button", { appearance: "transparent", class: CSS$K.deleteColor, color: "neutral", disabled: noColor, iconStart: "minus", label: intlDeleteColor, onClick: this.deleteColor, scale: hexInputScale, type: "button" }), hAsync("calcite-button", { appearance: "transparent", class: CSS$K.saveColor, color: "neutral", disabled: noColor, iconStart: "plus", label: intlSaveColor, onClick: this.saveColor, scale: hexInputScale, type: "button" }))), savedColors.length > 0 ? (hAsync("div", { class: CSS$K.savedColors }, [
-      ...savedColors.map((color) => (hAsync("calcite-color-picker-swatch", { active: selectedColorInHex === color, class: CSS$K.savedColor, color: color, key: color, onClick: this.handleSavedColorSelect, onKeyDown: this.handleSavedColorKeyDown, scale: scale, tabIndex: 0 })))
+    return (hAsync("div", { class: CSS$L.container }, hAsync("div", { class: CSS$L.colorFieldAndSliderWrap }, hAsync("canvas", { class: {
+        [CSS$L.colorFieldAndSlider]: true,
+        [CSS$L.colorFieldAndSliderInteractive]: colorFieldAndSliderInteractive
+      }, onPointerDown: this.handleColorFieldAndSliderPointerDown, onPointerEnter: this.handleColorFieldAndSliderPointerEnterOrMove, onPointerLeave: this.handleColorFieldAndSliderPointerLeave, onPointerMove: this.handleColorFieldAndSliderPointerEnterOrMove, ref: this.initColorFieldAndSlider }), hAsync("div", { "aria-label": vertical ? this.intlValue : this.intlSaturation, "aria-valuemax": vertical ? HSV_LIMITS.v : HSV_LIMITS.s, "aria-valuemin": "0", "aria-valuenow": (vertical ? color?.saturationv() : color?.value()) || "0", class: { [CSS$L.scope]: true, [CSS$L.colorFieldScope]: true }, onKeyDown: this.handleColorFieldScopeKeyDown, ref: this.storeColorFieldScope, role: "slider", style: { top: `${colorFieldScopeTop || 0}px`, left: `${colorFieldScopeLeft || 0}px` }, tabindex: "0" }), hAsync("div", { "aria-label": this.intlHue, "aria-valuemax": HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": color?.round().hue() || DEFAULT_COLOR$1.round().hue(), class: { [CSS$L.scope]: true, [CSS$L.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, ref: this.storeHueScope, role: "slider", style: { top: `${hueTop}px`, left: `${hueLeft}px` }, tabindex: "0" })), hideHex && hideChannels ? null : (hAsync("div", { class: {
+        [CSS$L.controlSection]: true,
+        [CSS$L.section]: true
+      } }, hideHex ? null : (hAsync("div", { class: CSS$L.hexOptions }, hAsync("span", { class: {
+        [CSS$L.header]: true,
+        [CSS$L.headerHex]: true
+      } }, intlHex), hAsync("calcite-color-picker-hex-input", { allowEmpty: allowEmpty, class: CSS$L.control, numberingSystem: this.numberingSystem, onCalciteColorPickerHexInputChange: this.handleHexInputChange, scale: hexInputScale, value: selectedColorInHex }))), hideChannels ? null : (hAsync("calcite-tabs", { class: {
+        [CSS$L.colorModeContainer]: true,
+        [CSS$L.splitSection]: true
+      }, scale: hexInputScale }, hAsync("calcite-tab-nav", { slot: "tab-nav" }, this.renderChannelsTabTitle("rgb"), this.renderChannelsTabTitle("hsv")), this.renderChannelsTab("rgb"), this.renderChannelsTab("hsv"))))), hideSaved ? null : (hAsync("div", { class: { [CSS$L.savedColorsSection]: true, [CSS$L.section]: true } }, hAsync("div", { class: CSS$L.header }, hAsync("label", null, intlSaved), hAsync("div", { class: CSS$L.savedColorsButtons }, hAsync("calcite-button", { appearance: "transparent", class: CSS$L.deleteColor, color: "neutral", disabled: noColor, iconStart: "minus", label: intlDeleteColor, onClick: this.deleteColor, scale: hexInputScale, type: "button" }), hAsync("calcite-button", { appearance: "transparent", class: CSS$L.saveColor, color: "neutral", disabled: noColor, iconStart: "plus", label: intlSaveColor, onClick: this.saveColor, scale: hexInputScale, type: "button" }))), savedColors.length > 0 ? (hAsync("div", { class: CSS$L.savedColors }, [
+      ...savedColors.map((color) => (hAsync("calcite-color-picker-swatch", { active: selectedColorInHex === color, class: CSS$L.savedColor, color: color, key: color, onClick: this.handleSavedColorSelect, onKeyDown: this.handleSavedColorKeyDown, scale: scale, tabIndex: 0 })))
     ])) : null))));
   }
   // --------------------------------------------------------------------------
@@ -13837,7 +13837,7 @@ class ColorPicker {
   }; }
 }
 
-const CSS$J = {
+const CSS$K = {
   container: "container",
   preview: "preview",
   input: "input"
@@ -13951,7 +13951,7 @@ class ColorPickerHexInput {
   render() {
     const { intlHex, value } = this;
     const hexInputValue = this.formatForInternalInput(value);
-    return (hAsync("div", { class: CSS$J.container }, hAsync("calcite-input", { class: CSS$J.input, label: intlHex, maxLength: 6, numberingSystem: this.numberingSystem, onCalciteInputChange: this.onInputChange, onCalciteInternalInputBlur: this.onCalciteInternalInputBlur, onKeyDown: this.handleKeyDown, onPaste: this.onPaste, prefixText: "#", ref: this.storeInputRef, scale: this.scale, value: hexInputValue }), hexInputValue ? (hAsync("calcite-color-picker-swatch", { active: true, class: CSS$J.preview, color: `#${hexInputValue}`, scale: this.scale })) : null));
+    return (hAsync("div", { class: CSS$K.container }, hAsync("calcite-input", { class: CSS$K.input, label: intlHex, maxLength: 6, numberingSystem: this.numberingSystem, onCalciteInputChange: this.onInputChange, onCalciteInternalInputBlur: this.onCalciteInternalInputBlur, onKeyDown: this.handleKeyDown, onPaste: this.onPaste, prefixText: "#", ref: this.storeInputRef, scale: this.scale, value: hexInputValue }), hexInputValue ? (hAsync("calcite-color-picker-swatch", { active: true, class: CSS$K.preview, color: `#${hexInputValue}`, scale: this.scale })) : null));
   }
   //--------------------------------------------------------------------------
   //
@@ -14028,7 +14028,7 @@ class ColorPickerHexInput {
   }; }
 }
 
-const CSS$I = {
+const CSS$J = {
   swatch: "swatch",
   noColorIcon: "no-color-icon"
 };
@@ -14063,7 +14063,7 @@ class ColorPickerSwatch {
     const hex = internalColor.hex();
     const theme = getThemeName(el);
     const borderColor = theme === "light" ? COLORS.borderLight : COLORS.borderDark;
-    return (hAsync("svg", { class: CSS$I.swatch, xmlns: "http://www.w3.org/2000/svg" }, hAsync("title", null, hex), hAsync("rect", { fill: hex, height: "100%", id: "swatch", rx: borderRadius, stroke: borderColor, "stroke-width": "2", style: { "clip-path": `inset(0 round ${borderRadius})` }, width: "100%" })));
+    return (hAsync("svg", { class: CSS$J.swatch, xmlns: "http://www.w3.org/2000/svg" }, hAsync("title", null, hex), hAsync("rect", { fill: hex, height: "100%", id: "swatch", rx: borderRadius, stroke: borderColor, "stroke-width": "2", style: { "clip-path": `inset(0 round ${borderRadius})` }, width: "100%" })));
   }
   get el() { return getElement(this); }
   static get watchers() { return {
@@ -16602,7 +16602,7 @@ class Combobox {
   }; }
 }
 
-const CSS$H = {
+const CSS$I = {
   icon: "icon",
   iconActive: "icon--active",
   custom: "icon--custom",
@@ -16688,18 +16688,18 @@ class ComboboxItem {
   // --------------------------------------------------------------------------
   renderIcon(isSingle) {
     const { icon, disabled, selected } = this;
-    const level = `${CSS$H.icon}--indent`;
+    const level = `${CSS$I.icon}--indent`;
     const defaultIcon = isSingle ? "dot" : "check";
     const iconPath = disabled ? "circle-disallowed" : defaultIcon;
     const showDot = isSingle && !icon && !disabled;
     return showDot ? (hAsync("span", { class: {
-        [CSS$H.icon]: true,
-        [CSS$H.dot]: true,
+        [CSS$I.icon]: true,
+        [CSS$I.dot]: true,
         [level]: true
       } })) : (hAsync("calcite-icon", { class: {
-        [CSS$H.icon]: !icon,
-        [CSS$H.custom]: !!icon,
-        [CSS$H.iconActive]: icon && selected,
+        [CSS$I.icon]: !icon,
+        [CSS$I.custom]: !!icon,
+        [CSS$I.iconActive]: icon && selected,
         [level]: true
       }, icon: icon || iconPath, scale: "s" }));
   }
@@ -16712,13 +16712,13 @@ class ComboboxItem {
   render() {
     const isSingleSelect = getElementProp(this.el, "selection-mode", "multi") === "single";
     const classes = {
-      [CSS$H.label]: true,
-      [CSS$H.selected]: this.selected,
-      [CSS$H.active]: this.active,
-      [CSS$H.single]: isSingleSelect
+      [CSS$I.label]: true,
+      [CSS$I.selected]: this.selected,
+      [CSS$I.active]: this.active,
+      [CSS$I.single]: isSingleSelect
     };
     const depth = getDepth$1();
-    return (hAsync(Host, { "aria-hidden": "true" }, hAsync("div", { class: `container scale--${this.scale}`, style: { "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` } }, hAsync("li", { class: classes, id: this.guid, onClick: this.itemClickHandler }, this.renderIcon(isSingleSelect), hAsync("span", { class: CSS$H.title }, this.textLabel)), this.renderChildren())));
+    return (hAsync(Host, { "aria-hidden": "true" }, hAsync("div", { class: `container scale--${this.scale}`, style: { "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` } }, hAsync("li", { class: classes, id: this.guid, onClick: this.itemClickHandler }, this.renderIcon(isSingleSelect), hAsync("span", { class: CSS$I.title }, this.textLabel)), this.renderChildren())));
   }
   get el() { return getElement(this); }
   static get watchers() { return {
@@ -16747,7 +16747,7 @@ class ComboboxItem {
   }; }
 }
 
-const CSS$G = {
+const CSS$H = {
   list: "list",
   label: "label",
   title: "title"
@@ -16782,8 +16782,8 @@ class ComboboxItemGroup {
   // --------------------------------------------------------------------------
   render() {
     const { el, scale } = this;
-    const indent = `${CSS$G.label}--indent-${getDepth$1()}`;
-    return (hAsync("ul", { "aria-labelledby": this.guid, class: { [CSS$G.list]: true, [`scale--${scale}`]: true }, role: "group" }, hAsync("li", { class: { [CSS$G.label]: true, [indent]: true }, id: this.guid, role: "presentation" }, hAsync("span", { class: CSS$G.title }, this.label)), hAsync("slot", null)));
+    const indent = `${CSS$H.label}--indent-${getDepth$1()}`;
+    return (hAsync("ul", { "aria-labelledby": this.guid, class: { [CSS$H.list]: true, [`scale--${scale}`]: true }, role: "group" }, hAsync("li", { class: { [CSS$H.label]: true, [indent]: true }, id: this.guid, role: "presentation" }, hAsync("span", { class: CSS$H.title }, this.label)), hAsync("slot", null)));
   }
   get el() { return getElement(this); }
   static get style() { return comboboxItemGroupCss; }
@@ -17902,6 +17902,19 @@ class DatePickerMonth {
 }
 
 const BUDDHIST_CALENDAR_YEAR_OFFSET = 543;
+const CSS$G = {
+  header: "header",
+  month: "month",
+  chevron: "chevron",
+  suffix: "suffix",
+  yearSuffix: "year--suffix",
+  yearWrap: "year-wrap",
+  textReverse: "text--reverse"
+};
+const ICON = {
+  chevronLeft: "chevron-left",
+  chevronRight: "chevron-right"
+};
 
 const datePickerMonthHeaderCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-date-picker-month-header:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}/*!@.calcite-animate*/.calcite-animate.sc-calcite-date-picker-month-header{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-date-picker-month-header{animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-date-picker-month-header{animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-date-picker-month-header{animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-date-picker-month-header{animation-name:in-scale}@media (prefers-reduced-motion: reduce){/*!@:root*/.sc-calcite-date-picker-month-header:root{--calcite-internal-duration-factor:0.01}}/*!@:root*/.sc-calcite-date-picker-month-header:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-date-picker-month-header-h{display:none}/*!@:host*/.sc-calcite-date-picker-month-header-h{display:block}/*!@.header*/.header.sc-calcite-date-picker-month-header{display:flex;justify-content:space-between;padding-block:0px;padding-inline:0.25rem}/*!@:host([scale=s]) .text*/[scale=s].sc-calcite-date-picker-month-header-h .text.sc-calcite-date-picker-month-header{margin-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem}/*!@:host([scale=s]) .chevron*/[scale=s].sc-calcite-date-picker-month-header-h .chevron.sc-calcite-date-picker-month-header{block-size:2.25rem}/*!@:host([scale=m]) .text*/[scale=m].sc-calcite-date-picker-month-header-h .text.sc-calcite-date-picker-month-header{margin-block:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}/*!@:host([scale=m]) .chevron*/[scale=m].sc-calcite-date-picker-month-header-h .chevron.sc-calcite-date-picker-month-header{block-size:3rem}/*!@:host([scale=l]) .text*/[scale=l].sc-calcite-date-picker-month-header-h .text.sc-calcite-date-picker-month-header{margin-block:1rem;font-size:var(--calcite-font-size-1);line-height:1.5rem}/*!@:host([scale=l]) .chevron*/[scale=l].sc-calcite-date-picker-month-header-h .chevron.sc-calcite-date-picker-month-header{block-size:3.5rem}/*!@.chevron*/.chevron.sc-calcite-date-picker-month-header{margin-inline:-0.25rem;box-sizing:content-box;display:flex;flex-grow:0;cursor:pointer;align-items:center;justify-content:center;border-style:none;background-color:var(--calcite-ui-foreground-1);padding-inline:0.25rem;color:var(--calcite-ui-text-3);outline:2px solid transparent;outline-offset:2px;outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;inline-size:14.2857142857%}/*!@.chevron:focus*/.chevron.sc-calcite-date-picker-month-header:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}/*!@.chevron:hover, .chevron:focus*/.chevron.sc-calcite-date-picker-month-header:hover,.chevron.sc-calcite-date-picker-month-header:focus{background-color:var(--calcite-ui-foreground-2);fill:var(--calcite-ui-text-1);color:var(--calcite-ui-text-1)}/*!@.chevron:active*/.chevron.sc-calcite-date-picker-month-header:active{background-color:var(--calcite-ui-foreground-3)}/*!@.chevron[aria-disabled=true]*/.chevron[aria-disabled=true].sc-calcite-date-picker-month-header{pointer-events:none;opacity:0}/*!@.text*/.text.sc-calcite-date-picker-month-header{margin-block:auto;display:flex;inline-size:100%;flex:1 1 auto;align-items:center;justify-content:center;text-align:center;line-height:1}/*!@.text--reverse*/.text--reverse.sc-calcite-date-picker-month-header{flex-direction:row-reverse}/*!@.month,\n.year,\n.suffix*/.month.sc-calcite-date-picker-month-header,.year.sc-calcite-date-picker-month-header,.suffix.sc-calcite-date-picker-month-header{margin-inline:0.25rem;margin-block:auto;display:inline-block;background-color:var(--calcite-ui-foreground-1);font-weight:var(--calcite-font-weight-medium);line-height:1.25;color:var(--calcite-ui-text-1);font-size:inherit}/*!@.year*/.year.sc-calcite-date-picker-month-header{position:relative;inline-size:2.5rem;border-style:none;background-color:transparent;text-align:center;font-family:inherit;outline-color:transparent}/*!@.year:hover*/.year.sc-calcite-date-picker-month-header:hover{transition-duration:100ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-property:outline-color;outline:2px solid var(--calcite-ui-border-2);outline-offset:2px}/*!@.year:focus*/.year.sc-calcite-date-picker-month-header:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:2px}/*!@.year--suffix*/.year--suffix.sc-calcite-date-picker-month-header{text-align:start}/*!@.year-wrap*/.year-wrap.sc-calcite-date-picker-month-header{position:relative}/*!@.suffix*/.suffix.sc-calcite-date-picker-month-header{inset-block-start:0px;white-space:nowrap;text-align:start;inset-inline-start:0}";
 
@@ -17992,7 +18005,7 @@ class DatePickerMonthHeader {
     this.setNextPrevMonthDates();
   }
   render() {
-    return hAsync("div", { class: "header" }, this.renderContent());
+    return hAsync("div", { class: CSS$G.header }, this.renderContent());
   }
   renderContent() {
     if (!this.activeDate || !this.localeData) {
@@ -18014,10 +18027,10 @@ class DatePickerMonthHeader {
     const order = getOrder(unitOrder);
     const reverse = order.indexOf("y") < order.indexOf("m");
     const suffix = this.localeData.year?.suffix;
-    return (hAsync(Fragment, null, hAsync("a", { "aria-disabled": `${this.prevMonthDate.getMonth() === activeMonth}`, "aria-label": this.intlPrevMonth, class: "chevron", href: "#", onClick: this.prevMonthClick, onKeyDown: this.prevMonthKeydown, role: "button", tabindex: this.prevMonthDate.getMonth() === activeMonth ? -1 : 0 }, hAsync("calcite-icon", { "flip-rtl": true, icon: "chevron-left", scale: iconScale })), hAsync("div", { class: { text: true, "text--reverse": reverse } }, hAsync(Heading, { class: "month", level: this.headingLevel }, localizedMonth), hAsync("span", { class: "year-wrap" }, hAsync("input", { "aria-label": this.intlYear, class: {
+    return (hAsync(Fragment, null, hAsync("a", { "aria-disabled": `${this.prevMonthDate.getMonth() === activeMonth}`, "aria-label": this.intlPrevMonth, class: CSS$G.chevron, href: "#", onClick: this.prevMonthClick, onKeyDown: this.prevMonthKeydown, role: "button", tabindex: this.prevMonthDate.getMonth() === activeMonth ? -1 : 0 }, hAsync("calcite-icon", { "flip-rtl": true, icon: ICON.chevronLeft, scale: iconScale })), hAsync("div", { class: { text: true, [CSS$G.textReverse]: reverse } }, hAsync(Heading, { class: CSS$G.month, level: this.headingLevel }, localizedMonth), hAsync("span", { class: CSS$G.yearWrap }, hAsync("input", { "aria-label": this.intlYear, class: {
         year: true,
-        "year--suffix": !!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: "suffix" }, suffix))), hAsync("a", { "aria-disabled": `${this.nextMonthDate.getMonth() === activeMonth}`, "aria-label": this.intlNextMonth, class: "chevron", href: "#", onClick: this.nextMonthClick, onKeyDown: this.nextMonthKeydown, role: "button", tabindex: this.nextMonthDate.getMonth() === activeMonth ? -1 : 0 }, hAsync("calcite-icon", { "flip-rtl": true, icon: "chevron-right", scale: iconScale }))));
+        [CSS$G.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$G.suffix }, suffix))), hAsync("a", { "aria-disabled": `${this.nextMonthDate.getMonth() === activeMonth}`, "aria-label": this.intlNextMonth, class: CSS$G.chevron, href: "#", onClick: this.nextMonthClick, onKeyDown: this.nextMonthKeydown, role: "button", tabindex: this.nextMonthDate.getMonth() === activeMonth ? -1 : 0 }, hAsync("calcite-icon", { "flip-rtl": true, icon: ICON.chevronRight, scale: iconScale }))));
   }
   setNextPrevMonthDates() {
     if (!this.activeDate) {
@@ -20847,17 +20860,12 @@ class InputDatePicker {
         this.setInputValue(oldValue);
       }
     };
-    this.commonDateSeparators = [".", "-", "/"];
     this.formatNumerals = (value) => value
       ? value
         .split("")
-        .map((char) => 
-      // convert common separators to the locale's
-      this.commonDateSeparators.includes(char)
-        ? this.localeData.separator
-        : numberKeys.includes(char)
-          ? numberStringFormatter.numberFormatter.format(Number(char))
-          : char)
+        .map((char) => numberKeys.includes(char)
+        ? numberStringFormatter.numberFormatter.format(Number(char))
+        : char)
         .join("")
       : "";
     this.disabled = false;
@@ -21085,7 +21093,7 @@ class InputDatePicker {
       locale: effectiveLocale,
       useGrouping: false
     };
-    return (hAsync(Host, { onBlur: this.deactivate, onKeyDown: this.keyDownHandler, role: "application" }, this.localeData && (hAsync("div", { "aria-expanded": toAriaBoolean(this.open), class: "input-container", role: "application" }, hAsync("div", { class: "input-wrapper", ref: this.setStartWrapper }, hAsync("calcite-input", { class: `input ${this.layout === "vertical" && this.range ? `no-bottom-border` : ``}`, disabled: disabled, icon: "calendar", label: getLabelText(this), lang: effectiveLocale, "number-button-type": "none", numberingSystem: numberingSystem, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.startInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, ref: this.setStartInput, scale: this.scale, type: "text" })), hAsync("div", { "aria-hidden": toAriaBoolean(!this.open), class: {
+    return (hAsync(Host, { onBlur: this.deactivate, onKeyDown: this.keyDownHandler, role: "application" }, this.localeData && (hAsync("div", { "aria-expanded": toAriaBoolean(this.open), class: "input-container", role: "application" }, hAsync("div", { class: "input-wrapper", ref: this.setStartWrapper }, hAsync("calcite-input", { class: `input ${this.layout === "vertical" && this.range ? `no-bottom-border` : ``}`, disabled: disabled, icon: "calendar", label: getLabelText(this), "number-button-type": "none", numberingSystem: numberingSystem, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.startInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, ref: this.setStartInput, scale: this.scale, type: "text" })), hAsync("div", { "aria-hidden": toAriaBoolean(!this.open), class: {
         [CSS$u.menu]: true,
         [CSS$u.menuActive]: this.open
       }, ref: this.setFloatingEl }, hAsync("div", { class: {
@@ -21093,10 +21101,10 @@ class InputDatePicker {
         ["calendar-picker-wrapper--end"]: this.focusedInput === "end",
         [FloatingCSS.animation]: true,
         [FloatingCSS.animationActive]: this.open
-      }, ref: this.setTransitionEl }, hAsync("calcite-date-picker", { activeDate: this.datePickerActiveDate, activeRange: this.focusedInput, endAsDate: this.endAsDate, headingLevel: this.headingLevel, intlNextMonth: this.intlNextMonth, intlPrevMonth: this.intlPrevMonth, intlYear: this.intlYear, lang: effectiveLocale, max: this.max, maxAsDate: this.maxAsDate, min: this.min, minAsDate: this.minAsDate, numberingSystem: numberingSystem, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, startAsDate: this.startAsDate, tabIndex: 0, valueAsDate: this.valueAsDate }))), this.range && this.layout === "horizontal" && (hAsync("div", { class: "horizontal-arrow-container" }, hAsync("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: "s" }))), this.range && this.layout === "vertical" && this.scale !== "s" && (hAsync("div", { class: "vertical-arrow-container" }, hAsync("calcite-icon", { icon: "arrow-down", scale: "s" }))), this.range && (hAsync("div", { class: "input-wrapper", ref: this.setEndWrapper }, hAsync("calcite-input", { class: {
+      }, ref: this.setTransitionEl }, hAsync("calcite-date-picker", { activeDate: this.datePickerActiveDate, activeRange: this.focusedInput, endAsDate: this.endAsDate, headingLevel: this.headingLevel, intlNextMonth: this.intlNextMonth, intlPrevMonth: this.intlPrevMonth, intlYear: this.intlYear, max: this.max, maxAsDate: this.maxAsDate, min: this.min, minAsDate: this.minAsDate, numberingSystem: numberingSystem, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, startAsDate: this.startAsDate, tabIndex: 0, valueAsDate: this.valueAsDate }))), this.range && this.layout === "horizontal" && (hAsync("div", { class: "horizontal-arrow-container" }, hAsync("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: "s" }))), this.range && this.layout === "vertical" && this.scale !== "s" && (hAsync("div", { class: "vertical-arrow-container" }, hAsync("calcite-icon", { icon: "arrow-down", scale: "s" }))), this.range && (hAsync("div", { class: "input-wrapper", ref: this.setEndWrapper }, hAsync("calcite-input", { class: {
         input: true,
         "border-top-color-one": this.layout === "vertical" && this.range
-      }, disabled: disabled, icon: "calendar", lang: effectiveLocale, "number-button-type": "none", numberingSystem: numberingSystem, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.endInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, ref: this.setEndInput, scale: this.scale, type: "text" }))))), hAsync(HiddenFormInputSlot, { component: this })));
+      }, disabled: disabled, icon: "calendar", "number-button-type": "none", numberingSystem: numberingSystem, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.endInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, ref: this.setEndInput, scale: this.scale, type: "text" }))))), hAsync(HiddenFormInputSlot, { component: this })));
   }
   setReferenceEl() {
     const { focusedInput, layout, endWrapper, startWrapper } = this;
@@ -22690,7 +22698,7 @@ class InputTimePicker {
   // --------------------------------------------------------------------------
   render() {
     const popoverId = `${this.referenceElementId}-popover`;
-    return (hAsync(Host, { onKeyDown: this.keyDownHandler }, hAsync("div", { "aria-controls": popoverId, "aria-haspopup": "dialog", "aria-label": this.name, "aria-owns": popoverId, id: this.referenceElementId, role: "combobox" }, hAsync("calcite-input", { disabled: this.disabled, icon: "clock", label: getLabelText(this), onCalciteInputInput: this.calciteInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.calciteInternalInputFocusHandler, readOnly: this.readOnly, ref: this.setCalciteInputEl, scale: this.scale, step: this.step })), hAsync("calcite-popover", { disableFocusTrap: true, id: popoverId, label: "Time Picker", open: this.open, overlayPositioning: this.overlayPositioning, placement: this.placement, ref: this.setCalcitePopoverEl, referenceElement: this.referenceElementId, triggerDisabled: true }, hAsync("calcite-time-picker", { intlHour: this.intlHour, intlHourDown: this.intlHourDown, intlHourUp: this.intlHourUp, intlMeridiem: this.intlMeridiem, intlMeridiemDown: this.intlMeridiemDown, intlMeridiemUp: this.intlMeridiemUp, intlMinute: this.intlMinute, intlMinuteDown: this.intlMinuteDown, intlMinuteUp: this.intlMinuteUp, intlSecond: this.intlSecond, intlSecondDown: this.intlSecondDown, intlSecondUp: this.intlSecondUp, lang: this.effectiveLocale, numberingSystem: this.numberingSystem, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, ref: this.setCalciteTimePickerEl, scale: this.scale, step: this.step, value: this.value })), hAsync(HiddenFormInputSlot, { component: this })));
+    return (hAsync(Host, { onKeyDown: this.keyDownHandler }, hAsync("div", { "aria-controls": popoverId, "aria-haspopup": "dialog", "aria-label": this.name, "aria-owns": popoverId, id: this.referenceElementId, role: "combobox" }, hAsync("calcite-input", { disabled: this.disabled, icon: "clock", label: getLabelText(this), onCalciteInputInput: this.calciteInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.calciteInternalInputFocusHandler, readOnly: this.readOnly, ref: this.setCalciteInputEl, scale: this.scale, step: this.step })), hAsync("calcite-popover", { disableFocusTrap: true, id: popoverId, label: "Time Picker", open: this.open, overlayPositioning: this.overlayPositioning, placement: this.placement, ref: this.setCalcitePopoverEl, referenceElement: this.referenceElementId, triggerDisabled: true }, hAsync("calcite-time-picker", { intlHour: this.intlHour, intlHourDown: this.intlHourDown, intlHourUp: this.intlHourUp, intlMeridiem: this.intlMeridiem, intlMeridiemDown: this.intlMeridiemDown, intlMeridiemUp: this.intlMeridiemUp, intlMinute: this.intlMinute, intlMinuteDown: this.intlMinuteDown, intlMinuteUp: this.intlMinuteUp, intlSecond: this.intlSecond, intlSecondDown: this.intlSecondDown, intlSecondUp: this.intlSecondUp, numberingSystem: this.numberingSystem, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, ref: this.setCalciteTimePickerEl, scale: this.scale, step: this.step, value: this.value })), hAsync(HiddenFormInputSlot, { component: this })));
   }
   get el() { return getElement(this); }
   static get watchers() { return {