@esri/calcite-components 1.0.0-next.653 → 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.653
+ * v1.0.0-next.655
  */
 'use strict';
 
@@ -5953,7 +5953,7 @@ class Accordion {
   }
   focusElement(item) {
     const target = item;
-    target === null || target === void 0 ? void 0 : target.focus();
+    target?.focus();
   }
   get el() { return getElement(this); }
   static get style() { return accordionCss; }
@@ -6005,7 +6005,7 @@ function nodeListToArray(nodeList) {
 }
 function getThemeName(el) {
   const closestElWithTheme = closestElementCrossShadowBoundary(el, `.${CSS_UTILITY.darkTheme}, .${CSS_UTILITY.lightTheme}`);
-  return (closestElWithTheme === null || closestElWithTheme === void 0 ? void 0 : closestElWithTheme.classList.contains("calcite-theme-dark")) ? "dark" : "light";
+  return closestElWithTheme?.classList.contains("calcite-theme-dark") ? "dark" : "light";
 }
 function getElementDir(el) {
   const prop = "dir";
@@ -6070,7 +6070,7 @@ function closestElementCrossShadowBoundary(element, selector) {
   return closestFrom(element);
 }
 function isCalciteFocusable(el) {
-  return typeof (el === null || el === void 0 ? void 0 : el.setFocus) === "function";
+  return typeof el?.setFocus === "function";
 }
 async function focusElement(el) {
   if (!el) {
@@ -6089,21 +6089,21 @@ function getSlotted(element, slotName, options) {
       ? slotName.map((name) => `[slot="${name}"]`).join(",")
       : `[slot="${slotName}"]`
     : defaultSlotSelector;
-  if (options === null || options === void 0 ? void 0 : options.all) {
+  if (options?.all) {
     return queryMultiple(element, slotSelector, options);
   }
   return querySingle(element, slotSelector, options);
 }
 function getDirectChildren(el, selector) {
-  return el ? Array.from(el.children || []).filter((child) => child === null || child === void 0 ? void 0 : child.matches(selector)) : [];
+  return el ? Array.from(el.children || []).filter((child) => child?.matches(selector)) : [];
 }
 function queryMultiple(element, slotSelector, options) {
   let matches = slotSelector === defaultSlotSelector
     ? getDirectChildren(element, defaultSlotSelector)
     : Array.from(element.querySelectorAll(slotSelector));
   matches = options && options.direct === false ? matches : matches.filter((el) => el.parentElement === element);
-  matches = (options === null || options === void 0 ? void 0 : options.matches) ? matches.filter((el) => el === null || el === void 0 ? void 0 : el.matches(options.matches)) : matches;
-  const selector = options === null || options === void 0 ? void 0 : options.selector;
+  matches = options?.matches ? matches.filter((el) => el?.matches(options.matches)) : matches;
+  const selector = options?.selector;
   return selector
     ? matches
       .map((item) => Array.from(item.querySelectorAll(selector)))
@@ -6115,10 +6115,10 @@ function querySingle(element, slotSelector, options) {
   let match = slotSelector === defaultSlotSelector
     ? getDirectChildren(element, defaultSlotSelector)[0] || null
     : element.querySelector(slotSelector);
-  match = options && options.direct === false ? match : (match === null || match === void 0 ? void 0 : match.parentElement) === element ? match : null;
-  match = (options === null || options === void 0 ? void 0 : options.matches) ? ((match === null || match === void 0 ? void 0 : match.matches(options.matches)) ? match : null) : match;
-  const selector = options === null || options === void 0 ? void 0 : options.selector;
-  return selector ? match === null || match === void 0 ? void 0 : match.querySelector(selector) : match;
+  match = options && options.direct === false ? match : match?.parentElement === element ? match : null;
+  match = options?.matches ? (match?.matches(options.matches) ? match : null) : match;
+  const selector = options?.selector;
+  return selector ? match?.querySelector(selector) : match;
 }
 function filterDirectChildren(el, selector) {
   return Array.from(el.children).filter((child) => child.matches(selector));
@@ -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",
@@ -6553,7 +6553,7 @@ class Action {
         .assignedElements({
         flatten: true
       })
-        .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-tooltip"));
+        .filter((el) => el?.matches("calcite-tooltip"));
       const tooltip = tooltips[0];
       if (tooltip) {
         tooltip.referenceElement = this.buttonEl;
@@ -6579,8 +6579,7 @@ class Action {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
   }
   componentWillLoad() {
     setUpLoadableComponent(this);
@@ -6589,8 +6588,7 @@ class Action {
     setComponentLoaded(this);
   }
   disconnectedCallback() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.mutationObserver?.disconnect();
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -6602,9 +6600,8 @@ class Action {
   // --------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    var _a;
     await componentLoaded(this);
-    (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.focus();
+    this.buttonEl?.focus();
   }
   // --------------------------------------------------------------------------
   //
@@ -6614,33 +6611,32 @@ 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;
   }
   renderIconContainer() {
-    var _a;
     const { loading, icon, scale, el, intlLoading } = this;
     const iconScale = scale === "l" ? "m" : "s";
     const loaderScale = scale === "l" ? "l" : "m";
     const calciteLoaderNode = loading ? (hAsync("calcite-loader", { inline: true, label: intlLoading, scale: loaderScale })) : null;
     const calciteIconNode = icon ? hAsync("calcite-icon", { icon: icon, scale: iconScale }) : null;
     const iconNode = calciteLoaderNode || calciteIconNode;
-    const hasIconToDisplay = iconNode || ((_a = el.children) === null || _a === void 0 ? void 0 : _a.length);
+    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 })));
   }
@@ -6671,7 +6667,7 @@ class Action {
   }; }
 }
 
-const CSS$T = {
+const CSS$U = {
   menu: "menu",
   defaultTrigger: "default-trigger"
 };
@@ -6698,7 +6694,7 @@ const overflowActionsDebounceInMs = 150;
 const groupBufferPx = 2;
 const getAverage = (arr) => arr.reduce((p, c) => p + c, 0) / arr.length;
 const geActionDimensions = (actions) => {
-  const actionLen = actions === null || actions === void 0 ? void 0 : actions.length;
+  const actionLen = actions?.length;
   return {
     actionWidth: actionLen ? getAverage(actions.map((action) => action.clientWidth || 0)) : 0,
     actionHeight: actionLen ? getAverage(actions.map((action) => action.clientHeight || 0)) : 0
@@ -6749,8 +6745,7 @@ const ICONS$f = {
   chevronsRight: "chevrons-right"
 };
 function getCalcitePosition(position, el) {
-  var _a;
-  return position || ((_a = el.closest("calcite-shell-panel")) === null || _a === void 0 ? void 0 : _a.position) || "start";
+  return position || el.closest("calcite-shell-panel")?.position || "start";
 }
 function toggleChildActionText({ parent, expanded }) {
   queryActions(parent)
@@ -6783,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 = {
@@ -8166,20 +8161,18 @@ class ActionBar {
     this.conditionallyOverflowActions();
   }
   connectedCallback() {
-    var _a, _b;
     const { el, expanded } = this;
     toggleChildActionText({ parent: el, expanded });
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(el, { childList: true, subtree: true });
+    this.mutationObserver?.observe(el, { childList: true, subtree: true });
     if (!this.overflowActionsDisabled) {
-      (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.observe(el);
+      this.resizeObserver?.observe(el);
     }
     this.conditionallyOverflowActions();
     connectConditionalSlotComponent(this);
   }
   disconnectedCallback() {
-    var _a, _b;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-    (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+    this.mutationObserver?.disconnect();
+    this.resizeObserver?.disconnect();
     disconnectConditionalSlotComponent(this);
   }
   // --------------------------------------------------------------------------
@@ -8201,13 +8194,12 @@ class ActionBar {
    * @param focusId
    */
   async setFocus(focusId) {
-    var _a;
     await componentLoaded(this);
     if (focusId === "expand-toggle") {
       await focusElement(this.expandToggleEl);
       return;
     }
-    (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
+    this.el?.focus();
   }
   // --------------------------------------------------------------------------
   //
@@ -8220,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()));
@@ -8403,7 +8395,7 @@ class ActionMenu {
         .assignedElements({
         flatten: true
       })
-        .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-action"));
+        .filter((el) => el?.matches("calcite-action"));
       this.slottedMenuButtonEl = actions[0];
       this.connectMenuButtonEl();
     };
@@ -8431,7 +8423,7 @@ class ActionMenu {
         .assignedElements({
         flatten: true
       })
-        .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-tooltip"));
+        .filter((el) => el?.matches("calcite-tooltip"));
       this.tooltipEl = tooltips[0];
       this.setTooltipReferenceElement();
     };
@@ -8452,14 +8444,14 @@ class ActionMenu {
       action.active = index === activeMenuItemIndex;
     };
     this.updateActions = (actions) => {
-      actions === null || actions === void 0 ? void 0 : actions.forEach(this.updateAction);
+      actions?.forEach(this.updateAction);
     };
     this.handleDefaultSlotChange = (event) => {
       const actions = event.target
         .assignedElements({
         flatten: true
       })
-        .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-action"));
+        .filter((el) => el?.matches("calcite-action"));
       this.actionElements = actions;
     };
     this.menuButtonKeyDown = (event) => {
@@ -8586,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 === null || activeAction === void 0 ? void 0 : 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 === null || menuButtonEl === void 0 ? void 0 : menuButtonEl.id, class: CSS$T.menu, id: menuId, onClick: this.handleCalciteActionClick, role: "menu", tabIndex: -1 }, hAsync("slot", { onSlotchange: this.handleDefaultSlotChange }))));
+    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$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 })));
@@ -8629,7 +8621,7 @@ class ActionMenu {
   }; }
 }
 
-const CSS$R = {
+const CSS$S = {
   actionGroupBottom: "action-group--bottom",
   container: "container"
 };
@@ -8714,13 +8706,12 @@ class ActionPad {
    * @param focusId
    */
   async setFocus(focusId) {
-    var _a;
     await componentLoaded(this);
     if (focusId === "expand-toggle") {
       await focusElement(this.expandToggleEl);
       return;
     }
-    (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
+    this.el?.focus();
   }
   // --------------------------------------------------------------------------
   //
@@ -8733,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 {
@@ -8776,7 +8767,7 @@ const SLOTS$o = {
   message: "message",
   link: "link"
 };
-const CSS$Q = {
+const CSS$R = {
   actionsEnd: "actions-end",
   container: "container"
 };
@@ -9107,10 +9098,9 @@ const mutationObserver = createObserver();
  * @param component
  */
 function getLocale(component) {
-  var _a;
   return (component.el.lang ||
     component.locale ||
-    ((_a = closestElementCrossShadowBoundary(component.el, "[lang]")) === null || _a === void 0 ? void 0 : _a.lang) ||
+    closestElementCrossShadowBoundary(component.el, "[lang]")?.lang ||
     document.documentElement.lang ||
     defaultLocale);
 }
@@ -9161,8 +9151,8 @@ class NumberStringFormat {
    * numberFormatOptions needs to be set before localize/delocalize is called to ensure the options are up to date
    */
   set numberFormatOptions(options) {
-    options.locale = getSupportedLocale(options === null || options === void 0 ? void 0 : options.locale);
-    options.numberingSystem = getSupportedNumberingSystem(options === null || options === void 0 ? void 0 : options.numberingSystem);
+    options.locale = getSupportedLocale(options?.locale);
+    options.numberingSystem = getSupportedNumberingSystem(options?.numberingSystem);
     if (
     // No need to create the formatter if `locale` and `numberingSystem`
     // are the default values and `numberFormatOptions` has not been set
@@ -9320,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) {
@@ -9361,8 +9351,7 @@ class Alert {
   }
   /** determine which alert is active */
   determineActiveAlert() {
-    var _a;
-    if (((_a = this.queue) === null || _a === void 0 ? void 0 : _a[0]) === this.el) {
+    if (this.queue?.[0] === this.el) {
       this.openAlert();
       if (this.autoDismiss && !this.autoDismissTimeoutId) {
         this.trackTimer = Date.now();
@@ -9531,7 +9520,7 @@ function hasChannels(colorObject, ...channels) {
   return channels.every((channel) => channel && colorObject && `${channel}` in colorObject);
 }
 function colorEqual(value1, value2) {
-  return (value1 === null || value1 === void 0 ? void 0 : value1.rgbNumber()) === (value2 === null || value2 === void 0 ? void 0 : value2.rgbNumber());
+  return value1?.rgbNumber() === value2?.rgbNumber();
 }
 
 /**
@@ -9677,7 +9666,7 @@ class Avatar {
   }; }
 }
 
-const CSS$P = {
+const CSS$Q = {
   container: "container",
   content: "content",
   headerContainer: "header-container",
@@ -9795,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; }
@@ -9847,7 +9836,7 @@ class Block {
   }; }
 }
 
-const CSS$O = {
+const CSS$P = {
   content: "content",
   invalid: "invalid",
   toggle: "toggle",
@@ -9910,13 +9899,12 @@ class BlockSection {
   //
   // --------------------------------------------------------------------------
   renderStatusIcon() {
-    var _a;
     const { status } = this;
-    const statusIcon = (_a = ICONS$d[status]) !== null && _a !== void 0 ? _a : false;
+    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;
   }
@@ -9933,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; }
@@ -9988,7 +9976,7 @@ class BlockSection {
   }
 })(HTMLFormElement.prototype);
 
-const CSS$N = {
+const CSS$O = {
   buttonLoader: "calcite-button--loader",
   content: "content",
   contentSlotted: "content--slotted",
@@ -10046,7 +10034,7 @@ function hasAncestorCustomElements(label, componentEl) {
   label.removeEventListener(customElementAncestorCheckEventType, listener);
   const ancestorCustomElements = traversedElements
     .filter((el) => el !== componentEl && el !== label)
-    .filter((el) => { var _a; return (_a = el.tagName) === null || _a === void 0 ? void 0 : _a.includes("-"); });
+    .filter((el) => el.tagName?.includes("-"));
   return ancestorCustomElements.length > 0;
 }
 /**
@@ -10099,8 +10087,7 @@ function disconnectLabel(component) {
  * @param component
  */
 function getLabelText(component) {
-  var _a, _b;
-  return component.label || ((_b = (_a = component.labelEl) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim()) || "";
+  return component.label || component.labelEl?.textContent?.trim() || "";
 }
 function onLabelClick(event) {
   if (this.disabled) {
@@ -10169,8 +10156,7 @@ function submitForm(component) {
  * @param component
  */
 function resetForm(component) {
-  var _a;
-  (_a = component.formEl) === null || _a === void 0 ? void 0 : _a.reset();
+  component.formEl?.reset();
 }
 /**
  * Helper to set up form interactions on connectedCallback.
@@ -10291,7 +10277,6 @@ function syncHiddenFormInput(component) {
   });
 }
 function defaultSyncHiddenFormInput(component, input, value) {
-  var _a;
   const { defaultValue, disabled, name, required } = component;
   // keep in sync to prevent losing reset value
   input.defaultValue = defaultValue;
@@ -10312,7 +10297,7 @@ function defaultSyncHiddenFormInput(component, input, value) {
   else {
     input.value = value || "";
   }
-  (_a = component.syncHiddenFormInput) === null || _a === void 0 ? void 0 : _a.call(component, input);
+  component.syncHiddenFormInput?.(input);
 }
 /**
  * Helper to render the slot for form-associated component's hidden input.
@@ -10407,8 +10392,7 @@ class Button {
     this.formEl = closestElementCrossShadowBoundary(this.el, this.form ? `#${this.form}` : "form");
   }
   disconnectedCallback() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.mutationObserver?.disconnect();
     disconnectLabel(this);
     this.formEl = null;
   }
@@ -10424,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));
   }
   //--------------------------------------------------------------------------
@@ -10444,21 +10428,18 @@ class Button {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    var _a;
     await componentLoaded(this);
-    (_a = this.childEl) === null || _a === void 0 ? void 0 : _a.focus();
+    this.childEl?.focus();
   }
   updateHasContent() {
-    var _a, _b;
     const slottedContent = this.el.textContent.trim().length > 0 || this.el.childNodes.length > 0;
     this.hasContent =
-      this.el.childNodes.length === 1 && ((_a = this.el.childNodes[0]) === null || _a === void 0 ? void 0 : _a.nodeName) === "#text"
-        ? ((_b = this.el.textContent) === null || _b === void 0 ? void 0 : _b.trim().length) > 0
+      this.el.childNodes.length === 1 && this.el.childNodes[0]?.nodeName === "#text"
+        ? this.el.textContent?.trim().length > 0
         : slottedContent;
   }
   setupTextContentObserver() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
   }
   //--------------------------------------------------------------------------
   //
@@ -10508,7 +10489,7 @@ class Button {
   }; }
 }
 
-const CSS$M = {
+const CSS$N = {
   container: "container",
   header: "header",
   footer: "footer",
@@ -10592,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; }
@@ -10709,9 +10690,8 @@ class Checkbox {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    var _a;
     await componentLoaded(this);
-    (_a = this.toggleEl) === null || _a === void 0 ? void 0 : _a.focus();
+    this.toggleEl?.focus();
   }
   //--------------------------------------------------------------------------
   //
@@ -10768,7 +10748,7 @@ class Checkbox {
   }; }
 }
 
-const CSS$L = {
+const CSS$M = {
   title: "title",
   close: "close",
   imageContainer: "image-container",
@@ -10840,9 +10820,8 @@ class Chip {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    var _a;
     await componentLoaded(this);
-    (_a = this.closeButton) === null || _a === void 0 ? void 0 : _a.focus();
+    this.closeButton?.focus();
   }
   //--------------------------------------------------------------------------
   //
@@ -10852,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; }
@@ -12992,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",
@@ -13223,7 +13202,6 @@ class ColorPicker {
       }
     };
     this.handleColorFieldAndSliderPointerDown = (event) => {
-      var _a, _b;
       if (!isPrimaryPointerButton(event)) {
         return;
       }
@@ -13232,12 +13210,12 @@ class ColorPicker {
       if (region === "color-field") {
         this.hueThumbState = "drag";
         this.captureColorFieldColor(offsetX, offsetY);
-        (_a = this.colorFieldScopeNode) === null || _a === void 0 ? void 0 : _a.focus();
+        this.colorFieldScopeNode?.focus();
       }
       else if (region === "slider") {
         this.sliderThumbState = "drag";
         this.captureHueSliderColor(offsetX);
-        (_b = this.hueScopeNode) === null || _b === void 0 ? void 0 : _b.focus();
+        this.hueScopeNode?.focus();
       }
       // prevent text selection outside of color field & slider area
       event.preventDefault();
@@ -13366,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;
@@ -13377,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 === null || value === void 0 ? void 0 : 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;
@@ -13477,9 +13455,8 @@ class ColorPicker {
     this.internalColorSet(this.color, false, "internal");
   }
   handleScaleChange(scale = "m") {
-    var _a;
     this.updateDimensions(scale);
-    this.updateCanvasSize((_a = this.fieldAndSliderRenderingContext) === null || _a === void 0 ? void 0 : _a.canvas);
+    this.updateCanvasSize(this.fieldAndSliderRenderingContext?.canvas);
   }
   handleValueChange(value, oldValue) {
     const { allowEmpty, format } = this;
@@ -13525,7 +13502,7 @@ class ColorPicker {
     this.shiftKeyChannelAdjustment = 0;
     const { key } = event;
     if ((key !== "ArrowUp" && key !== "ArrowDown") ||
-      !event.composedPath().some((node) => { var _a; return (_a = node.classList) === null || _a === void 0 ? void 0 : _a.contains(CSS$K.channel); })) {
+      !event.composedPath().some((node) => node.classList?.contains(CSS$L.channel))) {
       return;
     }
     const { shiftKey } = event;
@@ -13597,24 +13574,24 @@ class ColorPicker {
     const selectedColorInHex = color ? color.hex() : null;
     const hexInputScale = scale === "l" ? "m" : "s";
     const { colorFieldAndSliderInteractive, colorFieldScopeTop, colorFieldScopeLeft, hueScopeLeft, hueScopeTop, scopeOrientation, dimensions: { colorField: { height: colorFieldHeight, width: colorFieldWidth }, slider: { height: sliderHeight } } } = this;
-    const hueTop = hueScopeTop !== null && hueScopeTop !== void 0 ? hueScopeTop : sliderHeight / 2 + colorFieldHeight;
-    const hueLeft = hueScopeLeft !== null && hueScopeLeft !== void 0 ? hueScopeLeft : (colorFieldWidth * DEFAULT_COLOR$1.hue()) / HSV_LIMITS.h;
+    const hueTop = hueScopeTop ?? sliderHeight / 2 + colorFieldHeight;
+    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 === null || color === void 0 ? void 0 : color.saturationv() : color === null || color === void 0 ? void 0 : 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 === null || color === void 0 ? void 0 : 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))));
   }
   // --------------------------------------------------------------------------
@@ -13860,7 +13837,7 @@ class ColorPicker {
   }; }
 }
 
-const CSS$J = {
+const CSS$K = {
   container: "container",
   preview: "preview",
   input: "input"
@@ -13974,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));
   }
   //--------------------------------------------------------------------------
   //
@@ -14051,7 +14028,7 @@ class ColorPickerHexInput {
   }; }
 }
 
-const CSS$I = {
+const CSS$J = {
   swatch: "swatch",
   noColorIcon: "no-color-icon"
 };
@@ -14086,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 {
@@ -14115,7 +14092,7 @@ const filter = (data, value) => {
     The data argument should be an array of objects`);
   }
   const find = (input, RE) => {
-    if ((input === null || input === void 0 ? void 0 : input.constant) || (input === null || input === void 0 ? void 0 : input.filterDisabled)) {
+    if (input?.constant || input?.filterDisabled) {
       return true;
     }
     let found = false;
@@ -15618,7 +15595,6 @@ const debouncedReposition = debounce(positionFloatingUI, repositionDebounceTimeo
  * @param root0.includeArrow
  */
 async function positionFloatingUI({ referenceEl, floatingEl, overlayPositioning = "absolute", placement, disableFlip, flipPlacements, offsetDistance, offsetSkidding, includeArrow = false, arrowEl, type }) {
-  var _a;
   if (!referenceEl || !floatingEl || (includeArrow && !arrowEl)) {
     return null;
   }
@@ -15638,14 +15614,14 @@ async function positionFloatingUI({ referenceEl, floatingEl, overlayPositioning
       type
     })
   });
-  if (middlewareData === null || middlewareData === void 0 ? void 0 : middlewareData.arrow) {
+  if (middlewareData?.arrow) {
     const { x: arrowX, y: arrowY } = middlewareData.arrow;
     Object.assign(arrowEl.style, {
       left: arrowX != null ? `${arrowX}px` : "",
       top: arrowY != null ? `${arrowY}px` : ""
     });
   }
-  const referenceHidden = (_a = middlewareData === null || middlewareData === void 0 ? void 0 : middlewareData.hide) === null || _a === void 0 ? void 0 : _a.referenceHidden;
+  const referenceHidden = middlewareData?.hide?.referenceHidden;
   const visibility = referenceHidden ? "hidden" : null;
   const pointerEvents = visibility ? "none" : null;
   floatingEl.setAttribute(placementDataAttribute, effectivePlacement);
@@ -15766,14 +15742,12 @@ const TEXT$j = {
 };
 
 function getAncestors(element) {
-  var _a, _b;
-  const parent = (_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.closest(ComboboxChildSelector);
-  const grandparent = (_b = parent === null || parent === void 0 ? void 0 : parent.parentElement) === null || _b === void 0 ? void 0 : _b.closest(ComboboxChildSelector);
+  const parent = element.parentElement?.closest(ComboboxChildSelector);
+  const grandparent = parent?.parentElement?.closest(ComboboxChildSelector);
   return [parent, grandparent].filter((el) => el);
 }
 function getItemAncestors(item) {
-  var _a;
-  return (((_a = item.ancestors) === null || _a === void 0 ? void 0 : _a.filter((el) => el.nodeName === "CALCITE-COMBOBOX-ITEM")) || []);
+  return (item.ancestors?.filter((el) => el.nodeName === "CALCITE-COMBOBOX-ITEM") || []);
 }
 function getItemChildren(item) {
   return nodeListToArray(item.querySelectorAll("calcite-combobox-item"));
@@ -15836,8 +15810,8 @@ class Combobox {
         : null;
     };
     this.getValue = () => {
-      const items = this.selectedItems.map((item) => { var _a; return (_a = item === null || item === void 0 ? void 0 : item.value) === null || _a === void 0 ? void 0 : _a.toString(); });
-      return (items === null || items === void 0 ? void 0 : items.length) ? (items.length > 1 ? items : items[0]) : "";
+      const items = this.selectedItems.map((item) => item?.value?.toString());
+      return items?.length ? (items.length > 1 ? items : items[0]) : "";
     };
     this.onLabelClick = () => {
       this.setFocus();
@@ -16083,8 +16057,7 @@ class Combobox {
       }
     };
     this.comboboxFocusHandler = () => {
-      var _a;
-      (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus();
+      this.textInput?.focus();
     };
     this.comboboxBlurHandler = (event) => {
       this.setInactiveIfNotContained(event);
@@ -16209,9 +16182,8 @@ class Combobox {
   }
   /** Sets focus on the component. */
   async setFocus() {
-    var _a;
     await componentLoaded(this);
-    (_a = this.textInput) === null || _a === void 0 ? void 0 : _a.focus();
+    this.textInput?.focus();
     this.activeChipIndex = -1;
     this.activeItemIndex = -1;
   }
@@ -16221,11 +16193,10 @@ class Combobox {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
-    var _a;
     this.internalValueChangeFlag = true;
     this.value = this.getValue();
     this.internalValueChangeFlag = false;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
     connectLabel(this);
     connectForm(this);
     connectOpenCloseComponent(this);
@@ -16255,9 +16226,8 @@ class Combobox {
     updateHostInteraction(this);
   }
   disconnectedCallback() {
-    var _a, _b;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-    (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+    this.mutationObserver?.disconnect();
+    this.resizeObserver?.disconnect();
     disconnectLabel(this);
     disconnectForm(this);
     disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
@@ -16314,7 +16284,7 @@ class Combobox {
     // if item has children items, don't count their height twice
     const children = Array.from(item.querySelectorAll(ComboboxChildSelector));
     children
-      .map((child) => child === null || child === void 0 ? void 0 : child.offsetHeight)
+      .map((child) => child?.offsetHeight)
       .forEach((offsetHeight) => {
       height -= offsetHeight;
     });
@@ -16474,12 +16444,11 @@ class Combobox {
     this.updateActiveItemIndex(-1);
   }
   focusChip() {
-    var _a;
-    const guid = (_a = this.selectedItems[this.activeChipIndex]) === null || _a === void 0 ? void 0 : _a.guid;
+    const guid = this.selectedItems[this.activeChipIndex]?.guid;
     const chip = guid
       ? this.referenceEl.querySelector(`#${chipUidPrefix}${guid}`)
       : null;
-    chip === null || chip === void 0 ? void 0 : chip.setFocus();
+    chip?.setFocus();
   }
   shiftActiveItemIndex(delta) {
     const { length } = this.visibleItems;
@@ -16535,7 +16504,7 @@ class Combobox {
         "input-wrap--single": single
       } }, showLabel && (hAsync("span", { class: {
         label: true,
-        "label--icon": !!(selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon)
+        "label--icon": !!selectedItem?.icon
       }, key: "label" }, selectedItem.textLabel)), hAsync("input", { "aria-activedescendant": this.activeDescendant, "aria-autocomplete": "list", "aria-controls": `${listboxUidPrefix}${guid}`, "aria-label": getLabelText(this), class: {
         input: true,
         "input--single": true,
@@ -16562,7 +16531,7 @@ class Combobox {
   renderIconStart() {
     const { selectedItems, placeholderIcon, selectionMode } = this;
     const selectedItem = selectedItems[0];
-    const selectedIcon = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.icon;
+    const selectedIcon = selectedItem?.icon;
     const singleSelectionMode = selectionMode === "single";
     const iconAtStart = !this.open && selectedItem
       ? !!selectedIcon && singleSelectionMode
@@ -16633,7 +16602,7 @@ class Combobox {
   }; }
 }
 
-const CSS$H = {
+const CSS$I = {
   icon: "icon",
   iconActive: "icon--active",
   custom: "icon--custom",
@@ -16719,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" }));
   }
@@ -16743,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 {
@@ -16778,7 +16747,7 @@ class ComboboxItem {
   }; }
 }
 
-const CSS$G = {
+const CSS$H = {
   list: "list",
   label: "label",
   title: "title"
@@ -16813,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; }
@@ -17177,16 +17146,15 @@ class DatePicker {
      * Reset active date and close
      */
     this.reset = () => {
-      var _a, _b, _c, _d, _e, _f;
       if (!Array.isArray(this.valueAsDate) &&
         this.valueAsDate &&
-        ((_a = this.valueAsDate) === null || _a === void 0 ? void 0 : _a.getTime()) !== ((_b = this.activeDate) === null || _b === void 0 ? void 0 : _b.getTime())) {
+        this.valueAsDate?.getTime() !== this.activeDate?.getTime()) {
         this.activeDate = new Date(this.valueAsDate);
       }
-      if (this.startAsDate && ((_c = this.startAsDate) === null || _c === void 0 ? void 0 : _c.getTime()) !== ((_d = this.activeStartDate) === null || _d === void 0 ? void 0 : _d.getTime())) {
+      if (this.startAsDate && this.startAsDate?.getTime() !== this.activeStartDate?.getTime()) {
         this.activeStartDate = new Date(this.startAsDate);
       }
-      if (this.endAsDate && ((_e = this.endAsDate) === null || _e === void 0 ? void 0 : _e.getTime()) !== ((_f = this.activeEndDate) === null || _f === void 0 ? void 0 : _f.getTime())) {
+      if (this.endAsDate && this.endAsDate?.getTime() !== this.activeEndDate?.getTime()) {
         this.activeEndDate = new Date(this.endAsDate);
       }
     };
@@ -17346,7 +17314,6 @@ class DatePicker {
     this.onMaxChanged(this.max);
   }
   render() {
-    var _a;
     const date = dateFromRange(this.range && Array.isArray(this.valueAsDate) ? this.valueAsDate[0] : this.valueAsDate, this.minAsDate, this.maxAsDate);
     let activeDate = this.getActiveDate(date, this.minAsDate, this.maxAsDate);
     const endDate = this.range && Array.isArray(this.valueAsDate)
@@ -17354,7 +17321,7 @@ class DatePicker {
       : null;
     const activeEndDate = this.getActiveEndDate(endDate, this.minAsDate, this.maxAsDate);
     if ((this.activeRange === "end" ||
-      (((_a = this.hoverRange) === null || _a === void 0 ? void 0 : _a.focused) === "end" && (!this.proximitySelectionDisabled || endDate))) &&
+      (this.hoverRange?.focused === "end" && (!this.proximitySelectionDisabled || endDate))) &&
       activeEndDate) {
       activeDate = activeEndDate;
     }
@@ -17869,10 +17836,9 @@ class DatePickerMonth {
    * @param ref
    */
   renderDateDay(active, day, date, currentMonth, ref) {
-    var _a;
     const isFocusedOnStart = this.isFocusedOnStart();
     const isHoverInRange = this.isHoverInRange() ||
-      (!this.endDate && this.hoverRange && sameDate((_a = this.hoverRange) === null || _a === void 0 ? void 0 : _a.end, this.startDate));
+      (!this.endDate && this.hoverRange && sameDate(this.hoverRange?.end, this.startDate));
     return (hAsync("calcite-date-picker-day", { active: active, class: {
         "hover--inside-range": this.startDate && isHoverInRange,
         "hover--outside-range": this.startDate && !isHoverInRange,
@@ -17881,13 +17847,12 @@ class DatePickerMonth {
       }, currentMonth: currentMonth, day: day, disabled: !inRange(date, this.min, this.max), endOfRange: this.isEndOfRange(date), highlighted: this.betweenSelectedRange(date), key: date.toDateString(), onCalciteDaySelect: this.daySelect, onCalciteInternalDayHover: this.dayHover, range: !!this.startDate && !!this.endDate && !sameDate(this.startDate, this.endDate), rangeHover: this.isRangeHover(date), ref: (el) => {
         // when moving via keyboard, focus must be updated on active date
         if (ref && active && this.activeFocus) {
-          el === null || el === void 0 ? void 0 : el.focus();
+          el?.focus();
         }
       }, scale: this.scale, selected: this.isSelected(date), startOfRange: this.isStartOfRange(date), value: date }));
   }
   isFocusedOnStart() {
-    var _a;
-    return ((_a = this.hoverRange) === null || _a === void 0 ? void 0 : _a.focused) === "start";
+    return this.hoverRange?.focused === "start";
   }
   isHoverInRange() {
     if (!this.hoverRange) {
@@ -17937,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}";
 
@@ -18027,10 +18005,9 @@ class DatePickerMonthHeader {
     this.setNextPrevMonthDates();
   }
   render() {
-    return hAsync("div", { class: "header" }, this.renderContent());
+    return hAsync("div", { class: CSS$G.header }, this.renderContent());
   }
   renderContent() {
-    var _a;
     if (!this.activeDate || !this.localeData) {
       return null;
     }
@@ -18049,11 +18026,11 @@ class DatePickerMonthHeader {
     const iconScale = this.scale === "l" ? "m" : "s";
     const order = getOrder(unitOrder);
     const reverse = order.indexOf("y") < order.indexOf("m");
-    const suffix = (_a = this.localeData.year) === null || _a === void 0 ? void 0 : _a.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: {
+    const suffix = this.localeData.year?.suffix;
+    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) {
@@ -18189,7 +18166,7 @@ class Dropdown {
     };
     this.updateItems = () => {
       this.items = this.groups
-        .map((group) => Array.from(group === null || group === void 0 ? void 0 : group.querySelectorAll("calcite-dropdown-item")))
+        .map((group) => Array.from(group?.querySelectorAll("calcite-dropdown-item")))
         .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);
       this.updateSelectedItems();
       this.reposition(true);
@@ -18197,7 +18174,7 @@ class Dropdown {
     this.updateGroups = (event) => {
       const groups = event.target
         .assignedElements({ flatten: true })
-        .filter((el) => el === null || el === void 0 ? void 0 : el.matches("calcite-dropdown-group"));
+        .filter((el) => el?.matches("calcite-dropdown-group"));
       this.groups = groups;
       this.updateItems();
     };
@@ -18214,7 +18191,7 @@ class Dropdown {
     };
     this.setDropdownWidth = () => {
       const { referenceEl, scrollerEl } = this;
-      const referenceElWidth = referenceEl === null || referenceEl === void 0 ? void 0 : referenceEl.clientWidth;
+      const referenceElWidth = referenceEl?.clientWidth;
       if (!referenceElWidth || !scrollerEl) {
         return;
       }
@@ -18339,8 +18316,7 @@ class Dropdown {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
     this.setFilteredPlacements();
     this.reposition(true);
     if (this.open) {
@@ -18355,10 +18331,9 @@ class Dropdown {
     updateHostInteraction(this);
   }
   disconnectedCallback() {
-    var _a, _b;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.mutationObserver?.disconnect();
     disconnectFloatingUI(this, this.referenceEl, this.floatingEl);
-    (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+    this.resizeObserver?.disconnect();
     disconnectOpenCloseComponent(this);
   }
   render() {
@@ -18684,9 +18659,8 @@ class DropdownItem {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    var _a;
     await componentLoaded(this);
-    (_a = this.el) === null || _a === void 0 ? void 0 : _a.focus();
+    this.el?.focus();
   }
   //--------------------------------------------------------------------------
   //
@@ -19129,13 +19103,11 @@ class Flow {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
-    var _a;
-    (_a = this.itemMutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+    this.itemMutationObserver?.observe(this.el, { childList: true, subtree: true });
     this.updateFlowProps();
   }
   disconnectedCallback() {
-    var _a;
-    (_a = this.itemMutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.itemMutationObserver?.disconnect();
   }
   // --------------------------------------------------------------------------
   //
@@ -19324,7 +19296,7 @@ class FlowItem {
       backButtonEl.setFocus();
       return;
     }
-    containerEl === null || containerEl === void 0 ? void 0 : containerEl.setFocus();
+    containerEl?.setFocus();
   }
   /**
    * Scrolls the component's content to a specified set of coordinates.
@@ -19338,8 +19310,7 @@ class FlowItem {
    * @param options
    */
   async scrollContentTo(options) {
-    var _a;
-    await ((_a = this.containerEl) === null || _a === void 0 ? void 0 : _a.scrollContentTo(options));
+    await this.containerEl?.scrollContentTo(options);
   }
   // --------------------------------------------------------------------------
   //
@@ -19542,12 +19513,10 @@ class Graph {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
-    var _a;
-    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el);
+    this.resizeObserver?.observe(this.el);
   }
   disconnectedCallback() {
-    var _a;
-    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.resizeObserver?.disconnect();
   }
   render() {
     const { data, colorStops, el, highlightMax, highlightMin, min, max } = this;
@@ -19677,9 +19646,8 @@ class Handle {
   // --------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    var _a;
     await componentLoaded(this);
-    (_a = this.handleButton) === null || _a === void 0 ? void 0 : _a.focus();
+    this.handleButton?.focus();
   }
   // --------------------------------------------------------------------------
   //
@@ -19744,8 +19712,7 @@ class Icon {
     });
   }
   disconnectedCallback() {
-    var _a;
-    (_a = this.intersectionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.intersectionObserver?.disconnect();
     this.intersectionObserver = null;
   }
   async componentWillLoad() {
@@ -19832,10 +19799,9 @@ class InlineEditable {
     this.calciteInternalInlineEditableEnableEditingChange = createEvent(this, "calciteInternalInlineEditableEnableEditingChange", 6);
     this.mutationObserver = createObserver();
     this.enableEditing = () => {
-      var _a, _b;
-      this.valuePriorToEditing = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value;
+      this.valuePriorToEditing = this.inputElement?.value;
       this.editingEnabled = true;
-      (_b = this.inputElement) === null || _b === void 0 ? void 0 : _b.setFocus();
+      this.inputElement?.setFocus();
       this.calciteInternalInlineEditableEnableEditingChange.emit();
     };
     this.disableEditing = () => {
@@ -19852,7 +19818,6 @@ class InlineEditable {
       }
     };
     this.escapeKeyHandler = async (event) => {
-      var _a;
       if (event.defaultPrevented) {
         return;
       }
@@ -19867,7 +19832,7 @@ class InlineEditable {
         }
         if (!!event.shiftKey && event.target === this.cancelEditingButton) {
           event.preventDefault();
-          (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setFocus();
+          this.inputElement?.setFocus();
         }
       }
     };
@@ -19932,9 +19897,8 @@ class InlineEditable {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
-    var _a;
     connectLabel(this);
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true });
+    this.mutationObserver?.observe(this.el, { childList: true });
     this.mutationObserverCallback();
   }
   componentWillLoad() {
@@ -19944,9 +19908,8 @@ class InlineEditable {
     setComponentLoaded(this);
   }
   disconnectedCallback() {
-    var _a;
     disconnectLabel(this);
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.mutationObserver?.disconnect();
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -19976,13 +19939,12 @@ class InlineEditable {
   //
   //--------------------------------------------------------------------------
   async setFocus() {
-    var _a, _b;
     await componentLoaded(this);
     if (this.editingEnabled) {
-      (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.setFocus();
+      this.inputElement?.setFocus();
     }
     else {
-      (_b = this.enableEditingButton) === null || _b === void 0 ? void 0 : _b.setFocus();
+      this.enableEditingButton?.setFocus();
     }
   }
   //--------------------------------------------------------------------------
@@ -19991,10 +19953,9 @@ class InlineEditable {
   //
   //--------------------------------------------------------------------------
   mutationObserverCallback() {
-    var _a;
     this.updateSlottedInput();
     this.scale =
-      this.scale || ((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.scale) || getElementProp(this.el, "scale", undefined);
+      this.scale || this.inputElement?.scale || getElementProp(this.el, "scale", undefined);
   }
   onLabelClick() {
     this.setFocus();
@@ -20423,13 +20384,11 @@ class Input {
   }
   /** watcher to update number-to-string for max */
   maxWatcher() {
-    var _a;
-    this.maxString = ((_a = this.max) === null || _a === void 0 ? void 0 : _a.toString()) || null;
+    this.maxString = this.max?.toString() || null;
   }
   /** watcher to update number-to-string for min */
   minWatcher() {
-    var _a;
-    this.minString = ((_a = this.min) === null || _a === void 0 ? void 0 : _a.toString()) || null;
+    this.minString = this.min?.toString() || null;
   }
   valueWatcher(newValue, previousValue) {
     if (!this.userChangedValue) {
@@ -20463,7 +20422,6 @@ class Input {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
-    var _a;
     connectLocalized(this);
     this.scale = getElementProp(this.el, "scale", this.scale);
     this.status = getElementProp(this.el, "status", this.status);
@@ -20482,24 +20440,22 @@ class Input {
         value: isValidNumber(this.value) ? this.value : ""
       });
     }
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true });
+    this.mutationObserver?.observe(this.el, { childList: true });
     this.setDisabledAction();
     this.el.addEventListener("calciteInternalHiddenInputChange", this.hiddenInputChangeHandler);
   }
   disconnectedCallback() {
-    var _a;
     disconnectLabel(this);
     disconnectForm(this);
     disconnectLocalized(this);
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.mutationObserver?.disconnect();
     this.el.removeEventListener("calciteInternalHiddenInputChange", this.hiddenInputChangeHandler);
   }
   componentWillLoad() {
-    var _a, _b;
     setUpLoadableComponent(this);
     this.childElType = this.type === "textarea" ? "textarea" : "input";
-    this.maxString = (_a = this.max) === null || _a === void 0 ? void 0 : _a.toString();
-    this.minString = (_b = this.min) === null || _b === void 0 ? void 0 : _b.toString();
+    this.maxString = this.max?.toString();
+    this.minString = this.min?.toString();
     this.requestedIcon = setRequestedIcon(INPUT_TYPE_ICONS, this.icon, this.type);
   }
   componentDidLoad() {
@@ -20525,23 +20481,21 @@ class Input {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    var _a, _b;
     await componentLoaded(this);
     if (this.type === "number") {
-      (_a = this.childNumberEl) === null || _a === void 0 ? void 0 : _a.focus();
+      this.childNumberEl?.focus();
     }
     else {
-      (_b = this.childEl) === null || _b === void 0 ? void 0 : _b.focus();
+      this.childEl?.focus();
     }
   }
   /** Selects all text of the component's `value`. */
   async selectText() {
-    var _a, _b;
     if (this.type === "number") {
-      (_a = this.childNumberEl) === null || _a === void 0 ? void 0 : _a.select();
+      this.childNumberEl?.select();
     }
     else {
-      (_b = this.childEl) === null || _b === void 0 ? void 0 : _b.select();
+      this.childEl?.select();
     }
   }
   onLabelClick() {
@@ -20573,11 +20527,10 @@ class Input {
     });
   }
   syncHiddenFormInput(input) {
-    var _a, _b, _c, _d;
     if (this.type === "number") {
       input.type = "number";
-      input.min = (_b = (_a = this.min) === null || _a === void 0 ? void 0 : _a.toString(10)) !== null && _b !== void 0 ? _b : "";
-      input.max = (_d = (_c = this.max) === null || _c === void 0 ? void 0 : _c.toString(10)) !== null && _d !== void 0 ? _d : "";
+      input.min = this.min?.toString(10) ?? "";
+      input.max = this.max?.toString(10) ?? "";
     }
     else if (this.type === "text") {
       input.type = "text";
@@ -20769,15 +20722,14 @@ class InputDatePicker {
       this.open = false;
     };
     this.keyDownHandler = (event) => {
-      var _a, _b;
       const { defaultPrevented, key } = event;
       if (key === "Enter" && !defaultPrevented) {
         this.commitValue();
         if (this.shouldFocusRangeEnd()) {
-          (_a = this.endInput) === null || _a === void 0 ? void 0 : _a.setFocus();
+          this.endInput?.setFocus();
         }
         else if (this.shouldFocusRangeStart()) {
-          (_b = this.startInput) === null || _b === void 0 ? void 0 : _b.setFocus();
+          this.startInput?.setFocus();
         }
         if (submitForm(this)) {
           event.preventDefault();
@@ -20829,7 +20781,6 @@ class InputDatePicker {
       this.localizeInputValues();
     };
     this.handleDateRangeChange = (event) => {
-      var _a, _b;
       if (!this.range || !event.detail) {
         return;
       }
@@ -20838,10 +20789,10 @@ class InputDatePicker {
       this.setRangeValue([startDate, endDate]);
       this.localizeInputValues();
       if (this.shouldFocusRangeEnd()) {
-        (_a = this.endInput) === null || _a === void 0 ? void 0 : _a.setFocus();
+        this.endInput?.setFocus();
       }
       else if (this.shouldFocusRangeStart()) {
-        (_b = this.startInput) === null || _b === void 0 ? void 0 : _b.setFocus();
+        this.startInput?.setFocus();
       }
     };
     this.setInputValue = (newValue, input = "start") => {
@@ -20909,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;
@@ -21048,9 +20994,8 @@ class InputDatePicker {
   // --------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    var _a;
     await componentLoaded(this);
-    (_a = this.startInput) === null || _a === void 0 ? void 0 : _a.setFocus();
+    this.startInput?.setFocus();
   }
   /**
    * Updates the position of the component.
@@ -21142,14 +21087,13 @@ class InputDatePicker {
     updateHostInteraction(this);
   }
   render() {
-    var _a, _b;
     const { disabled, effectiveLocale, numberingSystem, readOnly } = this;
     numberStringFormatter.numberFormatOptions = {
       numberingSystem,
       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: (_a = this.localeData) === null || _a === void 0 ? void 0 : _a.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: {
@@ -21157,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: (_b = this.localeData) === null || _b === void 0 ? void 0 : _b.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;
@@ -21726,13 +21670,11 @@ class InputNumber {
   }
   /** watcher to update number-to-string for max */
   maxWatcher() {
-    var _a;
-    this.maxString = ((_a = this.max) === null || _a === void 0 ? void 0 : _a.toString()) || null;
+    this.maxString = this.max?.toString() || null;
   }
   /** watcher to update number-to-string for min */
   minWatcher() {
-    var _a;
-    this.minString = ((_a = this.min) === null || _a === void 0 ? void 0 : _a.toString()) || null;
+    this.minString = this.min?.toString() || null;
   }
   valueWatcher(newValue, previousValue) {
     if (!this.userChangedValue) {
@@ -21761,7 +21703,6 @@ class InputNumber {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
-    var _a;
     connectLocalized(this);
     this.scale = getElementProp(this.el, "scale", this.scale);
     this.status = getElementProp(this.el, "status", this.status);
@@ -21778,7 +21719,7 @@ class InputNumber {
       origin: "connected",
       value: isValidNumber(this.value) ? this.value : ""
     });
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true });
+    this.mutationObserver?.observe(this.el, { childList: true });
     this.setDisabledAction();
     this.el.addEventListener("calciteInternalHiddenInputChange", this.hiddenInputChangeHandler);
   }
@@ -21786,18 +21727,16 @@ class InputNumber {
     setComponentLoaded(this);
   }
   disconnectedCallback() {
-    var _a;
     disconnectLabel(this);
     disconnectForm(this);
     disconnectLocalized(this);
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.mutationObserver?.disconnect();
     this.el.removeEventListener("calciteInternalHiddenInputChange", this.hiddenInputChangeHandler);
   }
   componentWillLoad() {
-    var _a, _b;
     setUpLoadableComponent(this);
-    this.maxString = (_a = this.max) === null || _a === void 0 ? void 0 : _a.toString();
-    this.minString = (_b = this.min) === null || _b === void 0 ? void 0 : _b.toString();
+    this.maxString = this.max?.toString();
+    this.minString = this.min?.toString();
     this.requestedIcon = setRequestedIcon({}, this.icon, "number");
   }
   componentShouldUpdate(newValue, oldValue, property) {
@@ -21820,14 +21759,12 @@ class InputNumber {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    var _a;
     await componentLoaded(this);
-    (_a = this.childNumberEl) === null || _a === void 0 ? void 0 : _a.focus();
+    this.childNumberEl?.focus();
   }
   /** Selects all text of the component's `value`. */
   async selectText() {
-    var _a;
-    (_a = this.childNumberEl) === null || _a === void 0 ? void 0 : _a.select();
+    this.childNumberEl?.select();
   }
   onLabelClick() {
     this.setFocus();
@@ -21858,10 +21795,9 @@ class InputNumber {
     });
   }
   syncHiddenFormInput(input) {
-    var _a, _b, _c, _d;
     input.type = "number";
-    input.min = (_b = (_a = this.min) === null || _a === void 0 ? void 0 : _a.toString(10)) !== null && _b !== void 0 ? _b : "";
-    input.max = (_d = (_c = this.max) === null || _c === void 0 ? void 0 : _c.toString(10)) !== null && _d !== void 0 ? _d : "";
+    input.min = this.min?.toString(10) ?? "";
+    input.max = this.max?.toString(10) ?? "";
   }
   setDisabledAction() {
     const slottedActionEl = getSlotted(this.el, "action");
@@ -22163,7 +22099,6 @@ class InputText {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
-    var _a;
     this.scale = getElementProp(this.el, "scale", this.scale);
     this.status = getElementProp(this.el, "status", this.status);
     this.inlineEditableEl = this.el.closest("calcite-inline-editable");
@@ -22174,15 +22109,14 @@ class InputText {
     this.setPreviousValue(this.value);
     connectLabel(this);
     connectForm(this);
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true });
+    this.mutationObserver?.observe(this.el, { childList: true });
     this.setDisabledAction();
     this.el.addEventListener("calciteInternalHiddenInputChange", this.hiddenInputChangeHandler);
   }
   disconnectedCallback() {
-    var _a;
     disconnectLabel(this);
     disconnectForm(this);
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.mutationObserver?.disconnect();
     this.el.removeEventListener("calciteInternalHiddenInputChange", this.hiddenInputChangeHandler);
   }
   componentWillLoad() {
@@ -22202,14 +22136,12 @@ class InputText {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    var _a;
     await componentLoaded(this);
-    (_a = this.childEl) === null || _a === void 0 ? void 0 : _a.focus();
+    this.childEl?.focus();
   }
   /** Selects all text of the component's `value`. */
   async selectText() {
-    var _a;
-    (_a = this.childEl) === null || _a === void 0 ? void 0 : _a.select();
+    this.childEl?.select();
   }
   onLabelClick() {
     this.setFocus();
@@ -22341,7 +22273,6 @@ function getLocaleHourCycle(locale, numberingSystem) {
   return getLocalizedTimePart("meridiem", parts) ? "12" : "24";
 }
 function getLocalizedTimePart(part, parts) {
-  var _a, _b, _c, _d;
   if (!part || !parts) {
     return null;
   }
@@ -22350,7 +22281,7 @@ function getLocalizedTimePart(part, parts) {
     const minuteIndex = parts.indexOf(parts.find(({ type }) => type === "minute"));
     const hourSuffix = parts[hourIndex + 1];
     return hourSuffix && hourSuffix.type === "literal" && minuteIndex - hourIndex === 2
-      ? ((_a = hourSuffix.value) === null || _a === void 0 ? void 0 : _a.trim()) || null
+      ? hourSuffix.value?.trim() || null
       : null;
   }
   if (part === "minuteSuffix") {
@@ -22358,15 +22289,15 @@ function getLocalizedTimePart(part, parts) {
     const secondIndex = parts.indexOf(parts.find(({ type }) => type === "second"));
     const minuteSuffix = parts[minuteIndex + 1];
     return minuteSuffix && minuteSuffix.type === "literal" && secondIndex - minuteIndex === 2
-      ? ((_b = minuteSuffix.value) === null || _b === void 0 ? void 0 : _b.trim()) || null
+      ? minuteSuffix.value?.trim() || null
       : null;
   }
   if (part === "secondSuffix") {
     const secondIndex = parts.indexOf(parts.find(({ type }) => type === "second"));
     const secondSuffix = parts[secondIndex + 1];
-    return secondSuffix && secondSuffix.type === "literal" ? ((_c = secondSuffix.value) === null || _c === void 0 ? void 0 : _c.trim()) || null : null;
+    return secondSuffix && secondSuffix.type === "literal" ? secondSuffix.value?.trim() || null : null;
   }
-  return ((_d = parts.find(({ type }) => (part == "meridiem" ? type === "dayPeriod" : type === part))) === null || _d === void 0 ? void 0 : _d.value) || null;
+  return parts.find(({ type }) => (part == "meridiem" ? type === "dayPeriod" : type === part))?.value || null;
 }
 function getMeridiem(hour) {
   if (!isValidNumber(hour)) {
@@ -22425,7 +22356,7 @@ function localizeTimeString({ value, locale, numberingSystem, includeSeconds = t
   const { hour, minute, second = "0" } = parseTimeString(value);
   const dateFromTimeString = new Date(Date.UTC(0, 0, 0, parseInt(hour), parseInt(minute), parseInt(second)));
   const formatter = createLocaleDateTimeFormatter(locale, numberingSystem, includeSeconds);
-  return (formatter === null || formatter === void 0 ? void 0 : formatter.format(dateFromTimeString)) || null;
+  return formatter?.format(dateFromTimeString) || null;
 }
 function localizeTimeStringToParts({ value, locale, numberingSystem }) {
   if (!isValidTime(value)) {
@@ -22708,9 +22639,8 @@ class InputTimePicker {
   // --------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    var _a;
     await componentLoaded(this);
-    (_a = this.calciteInputEl) === null || _a === void 0 ? void 0 : _a.setFocus();
+    this.calciteInputEl?.setFocus();
   }
   /**
    * Updates the position of the component.
@@ -22718,8 +22648,7 @@ class InputTimePicker {
    * @param delayed
    */
   async reposition(delayed = false) {
-    var _a;
-    (_a = this.popoverEl) === null || _a === void 0 ? void 0 : _a.reposition(delayed);
+    this.popoverEl?.reposition(delayed);
   }
   onLabelClick() {
     this.setFocus();
@@ -22769,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 {
@@ -23005,10 +22934,10 @@ const listItemGroupSelector = "calcite-list-item-group";
 const listItemSelector$1 = "calcite-list-item";
 function getListItemChildren(event) {
   const assignedElements = event.target.assignedElements({ flatten: true });
-  const listItemGroupChildren = assignedElements.filter((el) => el === null || el === void 0 ? void 0 : el.matches(listItemGroupSelector))
+  const listItemGroupChildren = assignedElements.filter((el) => el?.matches(listItemGroupSelector))
     .map((group) => Array.from(group.querySelectorAll(listItemSelector$1)))
     .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);
-  const listItemChildren = assignedElements.filter((el) => el === null || el === void 0 ? void 0 : el.matches(listItemSelector$1));
+  const listItemChildren = assignedElements.filter((el) => el?.matches(listItemSelector$1));
   return [...listItemGroupChildren, ...listItemChildren];
 }
 function updateListItemChildren(listItemChildren) {
@@ -23097,7 +23026,7 @@ class List$1 {
       const { listItems, filteredData, filterText } = this;
       const values = filteredData.map((item) => item.value);
       const groups = new Set();
-      const filteredItems = (listItems === null || listItems === void 0 ? void 0 : listItems.filter((item) => {
+      const filteredItems = listItems?.filter((item) => {
         const parent = item.parentElement;
         const grouped = parent.matches("calcite-list-item-group");
         if (grouped) {
@@ -23106,7 +23035,7 @@ class List$1 {
         const matches = filterText ? values.includes(item.value) : true;
         item.hidden = !matches;
         return matches;
-      })) || [];
+      }) || [];
       this.filteredItems = filteredItems;
       groups.forEach((group) => {
         const hasAtLeastOneMatch = filteredItems.some((item) => group.contains(item));
@@ -23168,8 +23097,7 @@ class List$1 {
       focusEl.setFocus();
     };
     this.isNavigable = (listItem) => {
-      var _a;
-      const parentListItemEl = (_a = listItem.parentElement) === null || _a === void 0 ? void 0 : _a.closest(listItemSelector);
+      const parentListItemEl = listItem.parentElement?.closest(listItemSelector);
       if (!parentListItemEl) {
         return true;
       }
@@ -23254,13 +23182,11 @@ class List$1 {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
     this.updateListItems();
   }
   disconnectedCallback() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.mutationObserver?.disconnect();
   }
   componentWillLoad() {
     setUpLoadableComponent(this);
@@ -23271,7 +23197,7 @@ class List$1 {
   componentDidLoad() {
     setComponentLoaded(this);
     const { filterEl } = this;
-    const filteredItems = filterEl === null || filterEl === void 0 ? void 0 : filterEl.filteredItems;
+    const filteredItems = filterEl?.filteredItems;
     if (filteredItems) {
       this.filteredData = filteredItems;
     }
@@ -23284,9 +23210,8 @@ class List$1 {
   // --------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    var _a;
     await componentLoaded(this);
-    (_a = this.enabledListItems.find((listItem) => listItem.active)) === null || _a === void 0 ? void 0 : _a.setFocus();
+    this.enabledListItems.find((listItem) => listItem.active)?.setFocus();
   }
   // --------------------------------------------------------------------------
   //
@@ -23453,7 +23378,7 @@ class ListItem {
           tableCell.removeAttribute(tabIndexAttr);
         }
       });
-      focusEl === null || focusEl === void 0 ? void 0 : focusEl.focus();
+      focusEl?.focus();
     };
     this.active = false;
     this.description = undefined;
@@ -23518,11 +23443,11 @@ class ListItem {
         this.focusCell(cells[focusIndex]);
       }
       else {
-        containerEl === null || containerEl === void 0 ? void 0 : containerEl.focus();
+        containerEl?.focus();
       }
       return;
     }
-    containerEl === null || containerEl === void 0 ? void 0 : containerEl.focus();
+    containerEl?.focus();
   }
   // --------------------------------------------------------------------------
   //
@@ -23543,7 +23468,7 @@ class ListItem {
   renderOpen() {
     const { el, open, openable, parentListEl } = this;
     const dir = getElementDir(el);
-    return openable ? (hAsync("td", { class: CSS$p.openContainer, key: "open-container", onClick: this.toggleOpen }, hAsync("calcite-icon", { icon: open ? ICONS$6.open : dir === "rtl" ? ICONS$6.closedRTL : ICONS$6.closedLTR, scale: "s" }))) : (parentListEl === null || parentListEl === void 0 ? void 0 : parentListEl.openable) ? (hAsync("td", { class: CSS$p.openContainer, key: "open-container", onClick: this.toggleSelected }, hAsync("calcite-icon", { icon: ICONS$6.blank, scale: "s" }))) : null;
+    return openable ? (hAsync("td", { class: CSS$p.openContainer, key: "open-container", onClick: this.toggleOpen }, hAsync("calcite-icon", { icon: open ? ICONS$6.open : dir === "rtl" ? ICONS$6.closedRTL : ICONS$6.closedLTR, scale: "s" }))) : parentListEl?.openable ? (hAsync("td", { class: CSS$p.openContainer, key: "open-container", onClick: this.toggleSelected }, hAsync("calcite-icon", { icon: ICONS$6.blank, scale: "s" }))) : null;
   }
   renderActionsStart() {
     const { label, hasActionsStart } = this;
@@ -24988,8 +24913,7 @@ function connectFocusTrap(component) {
  * @param component
  */
 function activateFocusTrap(component) {
-  var _a;
-  (_a = component.focusTrap) === null || _a === void 0 ? void 0 : _a.activate();
+  component.focusTrap?.activate();
 }
 /**
  * Helper to tear deactivate focus trap component.
@@ -24997,8 +24921,7 @@ function activateFocusTrap(component) {
  * @param component
  */
 function deactivateFocusTrap(component) {
-  var _a;
-  (_a = component.focusTrap) === null || _a === void 0 ? void 0 : _a.deactivate();
+  component.focusTrap?.deactivate();
 }
 
 const modalCss = "@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-modal: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-modal{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-modal{animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-modal{animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-modal{animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-modal{animation-name:in-scale}@media (prefers-reduced-motion: reduce){/*!@:root*/.sc-calcite-modal:root{--calcite-internal-duration-factor:0.01}}/*!@:root*/.sc-calcite-modal:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-modal-h{display:none}/*!@:host*/.sc-calcite-modal-h{position:fixed;inset:0px;z-index:700;display:flex;align-items:center;justify-content:center;overflow-y:hidden;color:var(--calcite-ui-text-2);opacity:0;visibility:hidden !important;transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88)}/*!@:host([scale=s])*/[scale=s].sc-calcite-modal-h{--calcite-modal-padding:0.75rem;--calcite-modal-padding-large:1rem;--calcite-modal-title-text:var(--calcite-font-size-1);--calcite-modal-content-text:var(--calcite-font-size--1);--calcite-modal-padding-internal:0.75rem;--calcite-modal-padding-large-internal:1rem;--calcite-modal-title-text-internal:var(--calcite-font-size-1);--calcite-modal-content-text-internal:var(--calcite-font-size--1)}/*!@:host([scale=m])*/[scale=m].sc-calcite-modal-h{--calcite-modal-padding:1rem;--calcite-modal-padding-large:1.25rem;--calcite-modal-title-text:var(--calcite-font-size-2);--calcite-modal-content-text:var(--calcite-font-size-0);--calcite-modal-padding-internal:1rem;--calcite-modal-padding-large-internal:1.25rem;--calcite-modal-title-text-internal:var(--calcite-font-size-2);--calcite-modal-content-text-internal:var(--calcite-font-size-0)}/*!@:host([scale=l])*/[scale=l].sc-calcite-modal-h{--calcite-modal-padding:1.25rem;--calcite-modal-padding-large:1.5rem;--calcite-modal-title-text:var(--calcite-font-size-3);--calcite-modal-content-text:var(--calcite-font-size-1);--calcite-modal-padding-internal:1.25rem;--calcite-modal-padding-large-internal:1.5rem;--calcite-modal-title-text-internal:var(--calcite-font-size-3);--calcite-modal-content-text-internal:var(--calcite-font-size-1)}/*!@.scrim*/.scrim.sc-calcite-modal{--calcite-scrim-background:rgba(0, 0, 0, 0.75);position:fixed;inset:0px;display:flex;overflow-y:hidden}/*!@.modal*/.modal.sc-calcite-modal{pointer-events:none;z-index:800;float:none;margin:1.5rem;box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;overflow:hidden;border-radius:0.25rem;background-color:var(--calcite-ui-foreground-1);opacity:0;--tw-shadow:0 2px 12px -4px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.16);--tw-shadow-colored:0 2px 12px -4px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);-webkit-overflow-scrolling:touch;visibility:hidden;transition:transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear var(--calcite-internal-animation-timing-slow), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);--calcite-modal-hidden-position:translate3d(0, 20px, 0);--calcite-modal-shown-position:translate3d(0, 0, 0)}/*!@.modal--opening-idle*/.modal--opening-idle.sc-calcite-modal{transform:var(--calcite-modal-hidden-position)}/*!@.modal--opening-active*/.modal--opening-active.sc-calcite-modal{transform:var(--calcite-modal-shown-position)}/*!@.modal--closing-idle*/.modal--closing-idle.sc-calcite-modal{transform:var(--calcite-modal-shown-position)}/*!@.modal--closing-active*/.modal--closing-active.sc-calcite-modal{transform:var(--calcite-modal-hidden-position)}/*!@:host([open])*/[open].sc-calcite-modal-h{opacity:1;visibility:visible !important;transition-delay:0ms}/*!@:host([open]) .modal--open*/[open].sc-calcite-modal-h .modal--open.sc-calcite-modal{pointer-events:auto;visibility:visible;opacity:1;transition:transform var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear, opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-inline-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-block-size var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88);transition-delay:0ms}/*!@.header*/.header.sc-calcite-modal{z-index:400;display:flex;min-inline-size:0px;max-inline-size:100%;border-start-start-radius:0.25rem;border-start-end-radius:0.25rem;border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);background-color:var(--calcite-ui-foreground-1);flex:0 0 auto}/*!@.close*/.close.sc-calcite-modal{order:2;margin:0px;cursor:pointer;-webkit-appearance:none;appearance:none;border-style:none;background-color:transparent;color:var(--calcite-ui-text-3);outline-color:transparent;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-start-end-radius:0.25rem;padding-block:var(--calcite-modal-padding, var(--calcite-modal-padding-internal));padding-inline:var(--calcite-modal-padding, var(--calcite-modal-padding-internal));flex:0 0 auto}/*!@.close calcite-icon*/.close.sc-calcite-modal calcite-icon.sc-calcite-modal{pointer-events:none;vertical-align:-2px}/*!@.close:focus*/.close.sc-calcite-modal:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}/*!@.close:hover, .close:focus, .close:active*/.close.sc-calcite-modal:hover,.close.sc-calcite-modal:focus,.close.sc-calcite-modal:active{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1)}/*!@.title*/.title.sc-calcite-modal{order:1;display:flex;min-inline-size:0px;align-items:center;flex:1 1 auto;padding-block:var(--calcite-modal-padding, var(--calcite-model-padding-internal));padding-inline:var(--calcite-modal-padding-large, var(--calcite-modal-padding-large-internal))}/*!@slot[name=header]::slotted(*),\n*::slotted([slot=header])*/slot[name=header].sc-calcite-modal-s>*,*.sc-calcite-modal-s>[slot=header]{margin:0px;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-1);font-size:var(--calcite-modal-title-text, var(--calcite-modal-title-text-internal))}/*!@.content*/.content.sc-calcite-modal{position:relative;box-sizing:border-box;display:block;block-size:100%;overflow:auto;background-color:var(--calcite-ui-foreground-1);padding:0px;max-block-size:calc(100vh - 12rem)}/*!@.content--spaced*/.content--spaced.sc-calcite-modal{padding:var(--calcite-modal-padding)}/*!@.content--no-footer*/.content--no-footer.sc-calcite-modal{border-end-end-radius:0.25rem;border-end-start-radius:0.25rem}/*!@slot[name=content]::slotted(*),\n*::slotted([slot=content])*/slot[name=content].sc-calcite-modal-s>*,*.sc-calcite-modal-s>[slot=content]{font-size:var(--calcite-modal-content-text, var(--calcite-modal-context-text-internal))}/*!@:host([background-color=grey]) .content*/[background-color=grey].sc-calcite-modal-h .content.sc-calcite-modal{background-color:var(--calcite-ui-background)}/*!@.footer*/.footer.sc-calcite-modal{z-index:400;margin-block-start:auto;box-sizing:border-box;display:flex;inline-size:100%;justify-content:space-between;border-end-end-radius:0.25rem;border-end-start-radius:0.25rem;border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);background-color:var(--calcite-ui-foreground-1);flex:0 0 auto;padding-block:var(--calcite-modal-padding, var(--calcite-modal-padding-internal));padding-inline:var(--calcite-modal-padding-large, var(--calcite-modal-padding-large-internal))}/*!@.footer--hide-back .back,\n.footer--hide-secondary .secondary*/.footer--hide-back.sc-calcite-modal .back.sc-calcite-modal,.footer--hide-secondary.sc-calcite-modal .secondary.sc-calcite-modal{display:none}/*!@.back*/.back.sc-calcite-modal{display:block;margin-inline-end:auto}/*!@.secondary*/.secondary.sc-calcite-modal{margin-inline:0.25rem;display:block}/*!@slot[name=primary]*/slot[name=primary].sc-calcite-modal{display:block}/*!@:host([width=small]) .modal*/[width=small].sc-calcite-modal-h .modal.sc-calcite-modal{inline-size:auto}/*!@:host([width=s]) .modal*/[width=s].sc-calcite-modal-h .modal.sc-calcite-modal{max-inline-size:32rem}@media screen and (max-width: 35rem){/*!@:host([width=s]) .modal*/[width=s].sc-calcite-modal-h .modal.sc-calcite-modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0px}/*!@:host([width=s]) .content*/[width=s].sc-calcite-modal-h .content.sc-calcite-modal{flex:1 1 auto;max-block-size:unset}/*!@:host([width=s][docked])*/[width=s][docked].sc-calcite-modal-h{align-items:flex-end}}/*!@:host([width=m]) .modal*/[width=m].sc-calcite-modal-h .modal.sc-calcite-modal{max-inline-size:48rem}@media screen and (max-width: 51rem){/*!@:host([width=m]) .modal*/[width=m].sc-calcite-modal-h .modal.sc-calcite-modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0px}/*!@:host([width=m]) .content*/[width=m].sc-calcite-modal-h .content.sc-calcite-modal{flex:1 1 auto;max-block-size:unset}/*!@:host([width=m][docked])*/[width=m][docked].sc-calcite-modal-h{align-items:flex-end}}/*!@:host([width=l]) .modal*/[width=l].sc-calcite-modal-h .modal.sc-calcite-modal{max-inline-size:94rem}@media screen and (max-width: 97rem){/*!@:host([width=l]) .modal*/[width=l].sc-calcite-modal-h .modal.sc-calcite-modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0px}/*!@:host([width=l]) .content*/[width=l].sc-calcite-modal-h .content.sc-calcite-modal{flex:1 1 auto;max-block-size:unset}/*!@:host([width=l][docked])*/[width=l][docked].sc-calcite-modal-h{align-items:flex-end}}/*!@:host([fullscreen])*/[fullscreen].sc-calcite-modal-h{background-color:transparent}/*!@:host([fullscreen]) .modal*/[fullscreen].sc-calcite-modal-h .modal.sc-calcite-modal{margin:0px;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;--calcite-modal-hidden-position:translate3D(0, 20px, 0) scale(0.95);--calcite-modal-shown-position:translate3D(0, 0, 0) scale(1)}/*!@:host([fullscreen]) .content*/[fullscreen].sc-calcite-modal-h .content.sc-calcite-modal{max-block-size:100%;flex:1 1 auto}/*!@:host([open][fullscreen]) .header*/[open][fullscreen].sc-calcite-modal-h .header.sc-calcite-modal{border-radius:0}/*!@:host([open][fullscreen]) .footer*/[open][fullscreen].sc-calcite-modal-h .footer.sc-calcite-modal{border-radius:0}/*!@:host([docked]) .modal*/[docked].sc-calcite-modal-h .modal.sc-calcite-modal{block-size:auto}/*!@:host([docked]) .content*/[docked].sc-calcite-modal-h .content.sc-calcite-modal{block-size:auto;flex:1 1 auto}@media screen and (max-width: 860px){/*!@:host([docked]) .modal*/[docked].sc-calcite-modal-h .modal.sc-calcite-modal{border-radius:var(--calcite-border-radius) var(--calcite-border-radius) 0 0}/*!@:host([docked]) .close*/[docked].sc-calcite-modal-h .close.sc-calcite-modal{border-start-end-radius:var(--calcite-border-radius)}}/*!@:host([color=red]) .modal*/[color=red].sc-calcite-modal-h .modal.sc-calcite-modal{border-color:var(--calcite-ui-danger)}/*!@:host([color=blue]) .modal*/[color=blue].sc-calcite-modal-h .modal.sc-calcite-modal{border-color:var(--calcite-ui-info)}/*!@:host([color=red]) .modal,\n:host([color=blue]) .modal*/[color=red].sc-calcite-modal-h .modal.sc-calcite-modal,[color=blue].sc-calcite-modal-h .modal.sc-calcite-modal{border-width:0px;border-block-start-width:4px;border-style:solid}/*!@:host([color=red]) .header,\n:host([color=blue]) .header*/[color=red].sc-calcite-modal-h .header.sc-calcite-modal,[color=blue].sc-calcite-modal-h .header.sc-calcite-modal{border-radius:0.25rem;border-end-end-radius:0px;border-end-start-radius:0px}@media screen and (max-width: 860px){/*!@slot[name=header]::slotted(*),\n*::slotted([slot=header])*/slot[name=header].sc-calcite-modal-s>*,*.sc-calcite-modal-s>[slot=header]{font-size:var(--calcite-font-size-1)}/*!@.footer*/.footer.sc-calcite-modal{position:sticky;inset-block-end:0px}}@media screen and (max-width: 480px){/*!@.footer*/.footer.sc-calcite-modal{flex-direction:column}/*!@.back,\n.secondary*/.back.sc-calcite-modal,.secondary.sc-calcite-modal{margin:0px;margin-block-end:0.25rem}}";
@@ -25085,8 +25008,7 @@ class Modal {
     setComponentLoaded(this);
   }
   connectedCallback() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
     this.updateFooterVisibility();
     connectConditionalSlotComponent(this);
     connectOpenCloseComponent(this);
@@ -25098,9 +25020,8 @@ class Modal {
     }
   }
   disconnectedCallback() {
-    var _a;
     this.removeOverflowHiddenClass();
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.mutationObserver?.disconnect();
     disconnectConditionalSlotComponent(this);
     disconnectOpenCloseComponent(this);
     deactivateFocusTrap(this);
@@ -25225,14 +25146,13 @@ class Modal {
     this.open = value;
   }
   async toggleModal(value) {
-    var _a, _b;
     this.active = value;
     if (value) {
-      (_a = this.transitionEl) === null || _a === void 0 ? void 0 : _a.classList.add(CSS$n.openingIdle);
+      this.transitionEl?.classList.add(CSS$n.openingIdle);
       this.openModal();
     }
     else {
-      (_b = this.transitionEl) === null || _b === void 0 ? void 0 : _b.classList.add(CSS$n.closingIdle);
+      this.transitionEl?.classList.add(CSS$n.closingIdle);
       this.close();
     }
   }
@@ -25481,9 +25401,8 @@ class Option {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
-    var _a;
     this.ensureTextContentDependentProps();
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, {
+    this.mutationObserver?.observe(this.el, {
       attributeFilter: ["label", "value"],
       characterData: true,
       childList: true,
@@ -25491,8 +25410,7 @@ class Option {
     });
   }
   disconnectedCallback() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.mutationObserver?.disconnect();
   }
   //--------------------------------------------------------------------------
   //
@@ -25864,11 +25782,10 @@ class Panel {
       this.hasFab = !!elements.length;
     };
     this.setPanelScrollEl = (el) => {
-      var _a, _b;
       this.panelScrollEl = el;
-      (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+      this.resizeObserver?.disconnect();
       if (el) {
-        (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.observe(el);
+        this.resizeObserver?.observe(el);
         this.resizeHandler();
       }
     };
@@ -25912,8 +25829,7 @@ class Panel {
   //
   // --------------------------------------------------------------------------
   disconnectedCallback() {
-    var _a;
-    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.resizeObserver?.disconnect();
   }
   // --------------------------------------------------------------------------
   //
@@ -25929,11 +25845,11 @@ class Panel {
     await componentLoaded(this);
     const { backButtonEl, closeButtonEl, containerEl } = this;
     if (focusId === "back-button") {
-      backButtonEl === null || backButtonEl === void 0 ? void 0 : backButtonEl.setFocus();
+      backButtonEl?.setFocus();
       return;
     }
     if (focusId === "dismiss-button") {
-      closeButtonEl === null || closeButtonEl === void 0 ? void 0 : closeButtonEl.setFocus();
+      closeButtonEl?.setFocus();
       return;
     }
     if (backButtonEl) {
@@ -25944,7 +25860,7 @@ class Panel {
       closeButtonEl.setFocus();
       return;
     }
-    containerEl === null || containerEl === void 0 ? void 0 : containerEl.focus();
+    containerEl?.focus();
   }
   /**
    * Scrolls the component's content to a specified set of coordinates.
@@ -25958,8 +25874,7 @@ class Panel {
    * @param options
    */
   async scrollContentTo(options) {
-    var _a;
-    (_a = this.panelScrollEl) === null || _a === void 0 ? void 0 : _a.scrollTo(options);
+    this.panelScrollEl?.scrollTo(options);
   }
   // --------------------------------------------------------------------------
   //
@@ -26102,12 +26017,10 @@ function initialize() {
   this.emitCalciteListFilter = debounce(internalCalciteListFilterEvent.bind(this), 0);
 }
 function initializeObserver() {
-  var _a;
-  (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+  this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
 }
 function cleanUpObserver() {
-  var _a;
-  (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  this.mutationObserver?.disconnect();
 }
 // --------------------------------------------------------------------------
 //
@@ -26250,7 +26163,6 @@ function toggleSingleSelectItemTabbing(item, selectable) {
   }
 }
 async function setFocus(focusId) {
-  var _a;
   if (this.filterEnabled && focusId === "filter") {
     await focusElement(this.filterEl);
     return;
@@ -26260,7 +26172,7 @@ async function setFocus(focusId) {
     return;
   }
   if (multiple) {
-    return (_a = filterOutDisabled(items)[0]) === null || _a === void 0 ? void 0 : _a.setFocus();
+    return filterOutDisabled(items)[0]?.setFocus();
   }
   const filtered = filterOutDisabled(items);
   const focusTarget = filtered.find((item) => item.selected) || filtered[0];
@@ -26332,14 +26244,13 @@ function selectSiblings(item, deselect = false) {
 }
 let groups;
 function handleFilter(emit = false) {
-  var _a;
   const { filteredData, filterText } = this;
   const values = filteredData.map((item) => item.value);
   let hasSelectedMatch = false;
   if (!groups) {
     groups = new Set();
   }
-  const matchedItems = ((_a = this.items) === null || _a === void 0 ? void 0 : _a.filter((item) => {
+  const matchedItems = this.items?.filter((item) => {
     const parent = item.parentElement;
     const grouped = parent.matches("calcite-pick-list-group");
     if (grouped) {
@@ -26351,7 +26262,7 @@ function handleFilter(emit = false) {
       hasSelectedMatch = matches && item.selected;
     }
     return matches;
-  })) || [];
+  }) || [];
   groups.forEach((group) => {
     const hasAtLeastOneMatch = matchedItems.some((item) => group.contains(item));
     group.hidden = !hasAtLeastOneMatch;
@@ -26376,8 +26287,7 @@ function handleFilter(emit = false) {
   }
 }
 function handleInitialFilter() {
-  var _a;
-  const filteredItems = (_a = this.filterEl) === null || _a === void 0 ? void 0 : _a.filteredItems;
+  const filteredItems = this.filterEl?.filteredItems;
   if (filteredItems) {
     this.filteredData = filteredItems;
   }
@@ -26586,7 +26496,6 @@ class PickListGroup {
   //
   // --------------------------------------------------------------------------
   render() {
-    var _a;
     const { el, groupTitle, headingLevel } = this;
     const hasParentItem = getSlotted(el, SLOTS$a.parentItem) !== null;
     const sectionClasses = {
@@ -26594,7 +26503,7 @@ class PickListGroup {
       [CSS$j.indented]: hasParentItem
     };
     const title = groupTitle;
-    const parentLevel = (_a = el.closest("calcite-pick-list")) === null || _a === void 0 ? void 0 : _a.headingLevel;
+    const parentLevel = el.closest("calcite-pick-list")?.headingLevel;
     const relativeLevel = parentLevel ? constrainHeadingLevel(parentLevel + 1) : null;
     const level = headingLevel || relativeLevel;
     return (hAsync(Fragment, null, title ? (hAsync(Heading, { class: CSS$j.heading, level: level }, title)) : null, hAsync("slot", { name: SLOTS$a.parentItem }), hAsync("section", { class: sectionClasses }, hAsync("slot", null))));
@@ -26747,9 +26656,8 @@ class PickListItem {
   }
   /** Sets focus on the component. */
   async setFocus() {
-    var _a;
     await componentLoaded(this);
-    (_a = this.focusEl) === null || _a === void 0 ? void 0 : _a.focus();
+    this.focusEl?.focus();
   }
   // --------------------------------------------------------------------------
   //
@@ -27407,7 +27315,7 @@ class RadioButton {
   checkLastRadioButton() {
     const radioButtons = this.queryButtons();
     const checkedRadioButtons = radioButtons.filter((radioButton) => radioButton.checked);
-    if ((checkedRadioButtons === null || checkedRadioButtons === void 0 ? void 0 : checkedRadioButtons.length) > 1) {
+    if (checkedRadioButtons?.length > 1) {
       const lastCheckedRadioButton = checkedRadioButtons[checkedRadioButtons.length - 1];
       checkedRadioButtons
         .filter((checkedRadioButton) => checkedRadioButton !== lastCheckedRadioButton)
@@ -27583,13 +27491,11 @@ class RadioButtonGroup {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
-    var _a;
     this.passPropsToRadioButtons();
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
   }
   disconnectedCallback() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.mutationObserver?.disconnect();
   }
   //--------------------------------------------------------------------------
   //
@@ -27666,7 +27572,7 @@ class RadioGroup {
     items.forEach((item) => (item.checked = item.value === value));
   }
   handleSelectedItemChange(newItem, oldItem) {
-    this.value = newItem === null || newItem === void 0 ? void 0 : newItem.value;
+    this.value = newItem?.value;
     if (newItem === oldItem) {
       return;
     }
@@ -27773,9 +27679,8 @@ class RadioGroup {
   // --------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    var _a;
     await componentLoaded(this);
-    (_a = (this.selectedItem || this.getItems()[0])) === null || _a === void 0 ? void 0 : _a.focus();
+    (this.selectedItem || this.getItems()[0])?.focus();
   }
   //--------------------------------------------------------------------------
   //
@@ -27988,8 +27893,7 @@ class Rating {
   }
   render() {
     const { disabled, intlRating, showChip, scale, count, average } = this;
-    return (hAsync(Fragment, null, hAsync("fieldset", { class: "fieldset", disabled: disabled, onBlur: () => (this.hoverValue = null), onPointerLeave: () => (this.hoverValue = null), onTouchEnd: () => (this.hoverValue = null) }, hAsync("legend", { class: "visually-hidden" }, intlRating), this.renderStars()), (count || average) && showChip ? (hAsync("calcite-chip", { scale: scale, value: count === null || count === void 0 ? void 0 : count.toString() }, !!average && hAsync("span", { class: "number--average" }, average.toString()), !!count && hAsync("span", { class: "number--count" }, "(", count === null || count === void 0 ? void 0 :
-      count.toString(), ")"))) : null, hAsync(HiddenFormInputSlot, { component: this })));
+    return (hAsync(Fragment, null, hAsync("fieldset", { class: "fieldset", disabled: disabled, onBlur: () => (this.hoverValue = null), onPointerLeave: () => (this.hoverValue = null), onTouchEnd: () => (this.hoverValue = null) }, hAsync("legend", { class: "visually-hidden" }, intlRating), this.renderStars()), (count || average) && showChip ? (hAsync("calcite-chip", { scale: scale, value: count?.toString() }, !!average && hAsync("span", { class: "number--average" }, average.toString()), !!count && hAsync("span", { class: "number--count" }, "(", count?.toString(), ")"))) : null, hAsync(HiddenFormInputSlot, { component: this })));
   }
   //--------------------------------------------------------------------------
   //
@@ -28010,9 +27914,8 @@ class Rating {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    var _a;
     await componentLoaded(this);
-    (_a = this.inputFocusRef) === null || _a === void 0 ? void 0 : _a.focus();
+    this.inputFocusRef?.focus();
   }
   get el() { return getElement(this); }
   static get style() { return ratingCss; }
@@ -28119,7 +28022,7 @@ class Select {
     this.populateInternalSelect = () => {
       const optionsAndGroups = Array.from(this.el.children).filter((child) => child.tagName === "CALCITE-OPTION" || child.tagName === "CALCITE-OPTION-GROUP");
       this.clearInternalSelect();
-      optionsAndGroups.forEach((optionOrGroup) => { var _a; return (_a = this.selectEl) === null || _a === void 0 ? void 0 : _a.append(this.toNativeElement(optionOrGroup)); });
+      optionsAndGroups.forEach((optionOrGroup) => this.selectEl?.append(this.toNativeElement(optionOrGroup)));
     };
     this.storeSelectRef = (node) => {
       this.selectEl = node;
@@ -28144,7 +28047,7 @@ class Select {
     items.forEach((item) => (item.selected = item.value === value));
   }
   selectedOptionHandler(selectedOption) {
-    this.value = selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value;
+    this.value = selectedOption?.value;
   }
   //--------------------------------------------------------------------------
   //
@@ -28152,9 +28055,8 @@ class Select {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
-    var _a;
     const { el } = this;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(el, {
+    this.mutationObserver?.observe(el, {
       subtree: true,
       childList: true
     });
@@ -28162,8 +28064,7 @@ class Select {
     connectForm(this);
   }
   disconnectedCallback() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.mutationObserver?.disconnect();
     disconnectLabel(this);
     disconnectForm(this);
   }
@@ -28171,9 +28072,8 @@ class Select {
     setUpLoadableComponent(this);
   }
   componentDidLoad() {
-    var _a, _b;
     setComponentLoaded(this);
-    afterConnectDefaultValueSet(this, (_b = (_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : "");
+    afterConnectDefaultValueSet(this, this.selectedOption?.value ?? "");
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -28439,7 +28339,7 @@ class ShellCenterRow {
     const actionBar = getSlotted(el, SLOTS$6.actionBar);
     const actionBarNode = actionBar ? (hAsync("div", { class: CSS$b.actionBarContainer, key: "action-bar" }, hAsync("slot", { name: SLOTS$6.actionBar }))) : null;
     const children = [actionBarNode, contentNode];
-    if ((actionBar === null || actionBar === void 0 ? void 0 : actionBar.position) === "end") {
+    if (actionBar?.position === "end") {
       children.reverse();
     }
     return hAsync(Fragment, null, children);
@@ -28566,8 +28466,7 @@ class ShellPanel {
       document.removeEventListener("pointermove", this.separatorPointerMove);
     };
     this.setInitialContentWidth = () => {
-      var _a;
-      this.initialContentWidth = (_a = this.contentEl) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width;
+      this.initialContentWidth = this.contentEl?.getBoundingClientRect().width;
     };
     this.separatorPointerDown = (event) => {
       if (!isPrimaryPointerButton(event)) {
@@ -28587,8 +28486,7 @@ class ShellPanel {
       separatorEl.addEventListener("pointerdown", this.separatorPointerDown);
     };
     this.disconnectSeparator = () => {
-      var _a;
-      (_a = this.separatorEl) === null || _a === void 0 ? void 0 : _a.removeEventListener("pointerdown", this.separatorPointerDown);
+      this.separatorEl?.removeEventListener("pointerdown", this.separatorPointerDown);
     };
     this.collapsed = false;
     this.detached = false;
@@ -28628,7 +28526,7 @@ class ShellPanel {
     const { collapsed, detached, position, initialContentWidth, contentWidth, contentWidthMax, contentWidthMin, intlResize, resizable } = this;
     const allowResizing = !detached && resizable;
     const contentNode = (hAsync("div", { class: { [CSS$a.content]: true, [CSS$a.contentDetached]: detached }, hidden: collapsed, key: "content", ref: this.storeContentEl, style: allowResizing && contentWidth ? { width: `${contentWidth}px` } : null }, this.renderHeader(), hAsync("div", { class: CSS$a.contentBody }, hAsync("slot", null))));
-    const separatorNode = allowResizing ? (hAsync("div", { "aria-label": intlResize, "aria-orientation": "horizontal", "aria-valuemax": contentWidthMax, "aria-valuemin": contentWidthMin, "aria-valuenow": contentWidth !== null && contentWidth !== void 0 ? contentWidth : initialContentWidth, class: CSS$a.separator, key: "separator", onKeyDown: this.separatorKeyDown, ref: this.connectSeparator, role: "separator", tabIndex: 0, "touch-action": "none" })) : null;
+    const separatorNode = allowResizing ? (hAsync("div", { "aria-label": intlResize, "aria-orientation": "horizontal", "aria-valuemax": contentWidthMax, "aria-valuemin": contentWidthMin, "aria-valuenow": contentWidth ?? initialContentWidth, class: CSS$a.separator, key: "separator", onKeyDown: this.separatorKeyDown, ref: this.connectSeparator, role: "separator", tabIndex: 0, "touch-action": "none" })) : null;
     const actionBarNode = hAsync("slot", { key: "action-bar", name: SLOTS$5.actionBar });
     const mainNodes = [actionBarNode, contentNode, separatorNode];
     if (position === "end") {
@@ -29131,7 +29029,7 @@ class Slider {
   async setFocus() {
     await componentLoaded(this);
     const handle = this.minHandle ? this.minHandle : this.maxHandle;
-    handle === null || handle === void 0 ? void 0 : handle.focus();
+    handle?.focus();
   }
   //--------------------------------------------------------------------------
   //
@@ -32592,15 +32490,13 @@ class SortableList {
     this.beginObserving();
   }
   disconnectedCallback() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.mutationObserver?.disconnect();
     this.cleanUpDragAndDrop();
   }
   componentDidRender() {
     updateHostInteraction(this);
   }
   calciteHandleNudgeHandler(event) {
-    var _a;
     const sortItem = this.items.find((item) => {
       return item.contains(event.detail.handle) || event.composedPath().includes(item);
     });
@@ -32633,7 +32529,7 @@ class SortableList {
       default:
         return;
     }
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.mutationObserver?.disconnect();
     if (appendInstead) {
       sortItem.parentElement.appendChild(sortItem);
     }
@@ -32663,8 +32559,7 @@ class SortableList {
       },
       // Element dragging started
       onStart: () => {
-        var _a;
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.mutationObserver?.disconnect();
       },
       // Element dragging ended
       onEnd: () => {
@@ -32677,13 +32572,11 @@ class SortableList {
     this.sortable = Sortable.create(this.el, options);
   }
   cleanUpDragAndDrop() {
-    var _a;
-    (_a = this.sortable) === null || _a === void 0 ? void 0 : _a.destroy();
+    this.sortable?.destroy();
     this.sortable = null;
   }
   beginObserving() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
   }
   // --------------------------------------------------------------------------
   //
@@ -32868,7 +32761,7 @@ class Stepper {
     return (hAsync("slot", { onSlotchange: (event) => {
         const items = event.currentTarget
           .assignedElements()
-          .filter((el) => (el === null || el === void 0 ? void 0 : el.tagName) === "CALCITE-STEPPER-ITEM");
+          .filter((el) => el?.tagName === "CALCITE-STEPPER-ITEM");
         const spacing = Array(items.length).fill("1fr").join(" ");
         this.el.style.gridTemplateAreas = spacing;
         this.el.style.gridTemplateColumns = spacing;
@@ -32989,10 +32882,9 @@ class Stepper {
   //
   //--------------------------------------------------------------------------
   getEnabledStepIndex(startIndex, direction = "next") {
-    var _a;
     const { items, currentPosition } = this;
     let newIndex = startIndex;
-    while ((_a = items[newIndex]) === null || _a === void 0 ? void 0 : _a.disabled) {
+    while (items[newIndex]?.disabled) {
       newIndex = newIndex + (direction === "previous" ? -1 : 1);
     }
     return newIndex !== currentPosition && newIndex < items.length && newIndex >= 0
@@ -33097,7 +32989,7 @@ class StepperItem {
       if (this.layout === "horizontal" &&
         event
           .composedPath()
-          .some((el) => { var _a; return (_a = el.classList) === null || _a === void 0 ? void 0 : _a.contains("stepper-item-content"); })) {
+          .some((el) => el.classList?.contains("stepper-item-content"))) {
         return;
       }
       this.emitUserRequestedItem();
@@ -33148,10 +33040,9 @@ class StepperItem {
     this.registerStepperItem();
   }
   effectiveLocaleWatcher(locale) {
-    var _a;
     numberStringFormatter.numberFormatOptions = {
       locale,
-      numberingSystem: (_a = this.parentStepperEl) === null || _a === void 0 ? void 0 : _a.numberingSystem,
+      numberingSystem: this.parentStepperEl?.numberingSystem,
       useGrouping: false
     };
   }
@@ -33171,7 +33062,6 @@ class StepperItem {
     }
   }
   componentWillLoad() {
-    var _a;
     setUpLoadableComponent(this);
     this.icon = getElementProp(this.el, "icon", false);
     this.numbered = getElementProp(this.el, "numbered", false);
@@ -33185,7 +33075,7 @@ class StepperItem {
     }
     numberStringFormatter.numberFormatOptions = {
       locale: this.effectiveLocale,
-      numberingSystem: (_a = this.parentStepperEl) === null || _a === void 0 ? void 0 : _a.numberingSystem,
+      numberingSystem: this.parentStepperEl?.numberingSystem,
       useGrouping: false
     };
   }
@@ -33221,9 +33111,8 @@ class StepperItem {
   //
   //--------------------------------------------------------------------------
   async setFocus() {
-    var _a;
     await componentLoaded(this);
-    (_a = (this.layout === "vertical" ? this.el : this.headerEl)) === null || _a === void 0 ? void 0 : _a.focus();
+    (this.layout === "vertical" ? this.el : this.headerEl)?.focus();
   }
   renderIcon() {
     const path = this.selected
@@ -33244,8 +33133,7 @@ class StepperItem {
     });
   }
   getItemPosition() {
-    var _a;
-    return Array.from((_a = this.parentStepperEl) === null || _a === void 0 ? void 0 : _a.querySelectorAll("calcite-stepper-item")).indexOf(this.el);
+    return Array.from(this.parentStepperEl?.querySelectorAll("calcite-stepper-item")).indexOf(this.el);
   }
   get el() { return getElement(this); }
   static get watchers() { return {
@@ -33439,13 +33327,11 @@ class Tab {
     this.calciteInternalTabRegister.emit();
   }
   componentWillRender() {
-    var _a;
-    this.scale = (_a = this.parentTabsEl) === null || _a === void 0 ? void 0 : _a.scale;
+    this.scale = this.parentTabsEl?.scale;
   }
   disconnectedCallback() {
-    var _a;
     // Dispatching to body in order to be listened by other elements that are still connected to the DOM.
-    (_a = document.body) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new CustomEvent("calciteTabUnregister", {
+    document.body?.dispatchEvent(new CustomEvent("calciteTabUnregister", {
       detail: this.el
     }));
   }
@@ -33540,7 +33426,7 @@ class TabNav {
     //
     //--------------------------------------------------------------------------
     this.handleTabFocus = (event, tabTitle) => {
-      tabTitle === null || tabTitle === void 0 ? void 0 : tabTitle.focus();
+      tabTitle?.focus();
       event.stopPropagation();
       event.preventDefault();
     };
@@ -33584,13 +33470,11 @@ class TabNav {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
-    var _a;
     this.parentTabsEl = this.el.closest("calcite-tabs");
-    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el);
+    this.resizeObserver?.observe(this.el);
   }
   disconnectedCallback() {
-    var _a;
-    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.resizeObserver?.disconnect();
   }
   componentWillLoad() {
     const storageKey = `calcite-tab-nav-${this.storageId}`;
@@ -33601,10 +33485,10 @@ class TabNav {
   }
   componentWillRender() {
     const { parentTabsEl } = this;
-    this.layout = parentTabsEl === null || parentTabsEl === void 0 ? void 0 : parentTabsEl.layout;
-    this.position = parentTabsEl === null || parentTabsEl === void 0 ? void 0 : parentTabsEl.position;
-    this.scale = parentTabsEl === null || parentTabsEl === void 0 ? void 0 : parentTabsEl.scale;
-    this.bordered = parentTabsEl === null || parentTabsEl === void 0 ? void 0 : parentTabsEl.bordered;
+    this.layout = parentTabsEl?.layout;
+    this.position = parentTabsEl?.position;
+    this.scale = parentTabsEl?.scale;
+    this.bordered = parentTabsEl?.bordered;
     // fix issue with active tab-title not lining up with blue indicator
     if (this.selectedTabEl) {
       this.updateOffsetPosition();
@@ -33686,18 +33570,16 @@ class TabNav {
     this.updateActiveWidth();
   }
   updateOffsetPosition() {
-    var _a, _b, _c, _d, _e;
     const dir = getElementDir(this.el);
-    const navWidth = (_a = this.activeIndicatorContainerEl) === null || _a === void 0 ? void 0 : _a.offsetWidth;
-    const tabLeft = (_b = this.selectedTabEl) === null || _b === void 0 ? void 0 : _b.offsetLeft;
-    const tabWidth = (_c = this.selectedTabEl) === null || _c === void 0 ? void 0 : _c.offsetWidth;
+    const navWidth = this.activeIndicatorContainerEl?.offsetWidth;
+    const tabLeft = this.selectedTabEl?.offsetLeft;
+    const tabWidth = this.selectedTabEl?.offsetWidth;
     const offsetRight = navWidth - (tabLeft + tabWidth);
     this.indicatorOffset =
-      dir !== "rtl" ? tabLeft - ((_d = this.tabNavEl) === null || _d === void 0 ? void 0 : _d.scrollLeft) : offsetRight + ((_e = this.tabNavEl) === null || _e === void 0 ? void 0 : _e.scrollLeft);
+      dir !== "rtl" ? tabLeft - this.tabNavEl?.scrollLeft : offsetRight + this.tabNavEl?.scrollLeft;
   }
   updateActiveWidth() {
-    var _a;
-    this.indicatorWidth = (_a = this.selectedTabEl) === null || _a === void 0 ? void 0 : _a.offsetWidth;
+    this.indicatorWidth = this.selectedTabEl?.offsetWidth;
   }
   getIndexOfTabTitle(el, tabTitles = this.tabTitles) {
     // In most cases, since these indexes correlate with tab contents, we want to consider all tab titles.
@@ -33808,13 +33690,12 @@ class TabTitle {
     this.parentTabsEl = this.el.closest("calcite-tabs");
   }
   disconnectedCallback() {
-    var _a, _b, _c;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.mutationObserver?.disconnect();
     // Dispatching to body in order to be listened by other elements that are still connected to the DOM.
-    (_b = document.body) === null || _b === void 0 ? void 0 : _b.dispatchEvent(new CustomEvent("calciteTabTitleUnregister", {
+    document.body?.dispatchEvent(new CustomEvent("calciteTabTitleUnregister", {
       detail: this.el
     }));
-    (_c = this.resizeObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
+    this.resizeObserver?.disconnect();
   }
   componentWillLoad() {
     if (this.tab && this.selected) {
@@ -33841,7 +33722,7 @@ class TabTitle {
     return (hAsync(Host, { "aria-controls": this.controls, "aria-selected": toAriaBoolean(this.selected), id: id, role: "tab", tabIndex: this.selected ? 0 : -1 }, hAsync("div", { class: {
         container: true,
         "container--has-text": this.hasText
-      }, ref: (el) => { var _a; return (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(el); } }, this.iconStart ? iconStartEl : null, hAsync("slot", null), this.iconEnd ? iconEndEl : null)));
+      }, ref: (el) => this.resizeObserver?.observe(el) }, this.iconStart ? iconStartEl : null, hAsync("slot", null), this.iconEnd ? iconEndEl : null)));
   }
   async componentDidLoad() {
     this.calciteInternalTabTitleRegister.emit(await this.getTabIdentifier());
@@ -33940,8 +33821,7 @@ class TabTitle {
     this.hasText = this.el.textContent.trim().length > 0;
   }
   setupTextContentObserver() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
   }
   emitActiveTab(userTriggered = true) {
     if (this.disabled) {
@@ -34253,9 +34133,8 @@ class TileSelect {
   //--------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    var _a;
     await componentLoaded(this);
-    (_a = this.input) === null || _a === void 0 ? void 0 : _a.setFocus();
+    this.input?.setFocus();
   }
   //--------------------------------------------------------------------------
   //
@@ -34794,7 +34673,6 @@ class TimePicker {
       }
     };
     this.setValuePart = (key, value, emit = true) => {
-      var _a;
       const { effectiveLocale: locale, numberingSystem } = this;
       if (key === "meridiem") {
         this.meridiem = value;
@@ -34837,7 +34715,8 @@ class TimePicker {
         this.value = null;
       }
       this.localizedMeridiem = this.value
-        ? ((_a = localizeTimeStringToParts({ value: this.value, locale, numberingSystem })) === null || _a === void 0 ? void 0 : _a.localizedMeridiem) || null
+        ? localizeTimeStringToParts({ value: this.value, locale, numberingSystem })
+          ?.localizedMeridiem || null
         : localizeTimePart({ value: this.meridiem, part: "meridiem", locale, numberingSystem });
       if (emit) {
         this.calciteInternalTimePickerChange.emit();
@@ -34966,9 +34845,8 @@ class TimePicker {
    * @param target
    */
   async setFocus(target) {
-    var _a;
     await componentLoaded(this);
-    (_a = this[`${target || "hour"}El`]) === null || _a === void 0 ? void 0 : _a.focus();
+    this[`${target || "hour"}El`]?.focus();
   }
   // --------------------------------------------------------------------------
   //
@@ -35193,9 +35071,8 @@ class Tip {
   //
   // --------------------------------------------------------------------------
   renderHeader() {
-    var _a;
     const { heading, headingLevel, el } = this;
-    const parentLevel = (_a = el.closest("calcite-tip-manager")) === null || _a === void 0 ? void 0 : _a.headingLevel;
+    const parentLevel = el.closest("calcite-tip-manager")?.headingLevel;
     const relativeLevel = parentLevel ? constrainHeadingLevel(parentLevel + 1) : null;
     const level = headingLevel || relativeLevel;
     return heading ? (hAsync("header", { class: CSS$4.header }, hAsync(Heading, { class: CSS$4.heading, level: level }, heading))) : null;
@@ -35361,13 +35238,11 @@ class TipManager {
   //
   // --------------------------------------------------------------------------
   connectedCallback() {
-    var _a;
     this.setUpTips();
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
   }
   disconnectedCallback() {
-    var _a;
-    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    this.mutationObserver?.disconnect();
   }
   // --------------------------------------------------------------------------
   //
@@ -35416,7 +35291,7 @@ class TipManager {
   updateGroupTitle() {
     const selectedTip = this.tips[this.selectedIndex];
     const tipParent = selectedTip.closest("calcite-tip-group");
-    this.groupTitle = (tipParent === null || tipParent === void 0 ? void 0 : tipParent.groupTitle) || this.intlDefaultTitle || TEXT.defaultGroupTitle;
+    this.groupTitle = tipParent?.groupTitle || this.intlDefaultTitle || TEXT.defaultGroupTitle;
   }
   // --------------------------------------------------------------------------
   //
@@ -35522,7 +35397,7 @@ class TooltipManager {
       }
       const clickedTooltip = this.queryTooltip(event.composedPath());
       this.clickedTooltip = clickedTooltip;
-      if (clickedTooltip === null || clickedTooltip === void 0 ? void 0 : clickedTooltip.closeOnClick) {
+      if (clickedTooltip?.closeOnClick) {
         this.toggleTooltip(clickedTooltip, false);
         this.clearHoverTimeout(clickedTooltip);
       }
@@ -35844,7 +35719,7 @@ class Tooltip {
 }
 
 function isTreeItem(element) {
-  return element === null || element === void 0 ? void 0 : element.matches("calcite-tree-item");
+  return element?.matches("calcite-tree-item");
 }
 function getEnabledSiblingItem(el, direction) {
   const directionProp = direction === "down" ? "nextElementSibling" : "previousElementSibling";
@@ -35880,8 +35755,7 @@ class Tree {
   //
   //--------------------------------------------------------------------------
   componentWillRender() {
-    var _a;
-    const parent = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.closest("calcite-tree");
+    const parent = this.el.parentElement?.closest("calcite-tree");
     this.lines = parent ? parent.lines : this.lines;
     this.scale = parent ? parent.scale : this.scale;
     this.selectionMode = parent ? parent.selectionMode : this.selectionMode;
@@ -35998,7 +35872,6 @@ class Tree {
     event.stopPropagation();
   }
   keyDownHandler(event) {
-    var _a;
     const root = this.el.closest("calcite-tree:not([child])");
     const target = event.target;
     if (!(root === this.el && target.tagName === "CALCITE-TREE-ITEM" && this.el.contains(target))) {
@@ -36040,7 +35913,7 @@ class Tree {
       if (target.hasChildren) {
         if (target.expanded && getRootNode$1(this.el).activeElement === target) {
           // When focus is on an open node, moves focus to the first child node.
-          (_a = getEnabledSiblingItem(target.querySelector("calcite-tree-item"), "down")) === null || _a === void 0 ? void 0 : _a.focus();
+          getEnabledSiblingItem(target.querySelector("calcite-tree-item"), "down")?.focus();
           event.preventDefault();
         }
         else {
@@ -36178,13 +36051,12 @@ class TreeItem {
       items.forEach((item) => (item.parentExpanded = expanded));
     };
     this.updateAncestorTree = () => {
-      var _a;
       if (this.selected && this.selectionMode === "ancestors") {
         const ancestors = [];
         let parent = this.parentTreeItem;
         while (parent) {
           ancestors.push(parent);
-          parent = (_a = parent.parentElement) === null || _a === void 0 ? void 0 : _a.closest("calcite-tree-item");
+          parent = parent.parentElement?.closest("calcite-tree-item");
         }
         ancestors.forEach((item) => (item.indeterminate = true));
         return;
@@ -36216,8 +36088,7 @@ class TreeItem {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
-    var _a;
-    this.parentTreeItem = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.closest("calcite-tree-item");
+    this.parentTreeItem = this.el.parentElement?.closest("calcite-tree-item");
     if (this.parentTreeItem) {
       const { expanded } = this.parentTreeItem;
       this.updateParentIsExpanded(this.parentTreeItem, expanded);
@@ -36228,7 +36099,6 @@ class TreeItem {
     disconnectConditionalSlotComponent(this);
   }
   componentWillRender() {
-    var _a;
     this.hasChildren = !!this.el.querySelector("calcite-tree");
     this.depth = 0;
     let parentTree = this.el.closest("calcite-tree");
@@ -36240,7 +36110,7 @@ class TreeItem {
     this.lines = parentTree.lines;
     let nextParentTree;
     while (parentTree) {
-      nextParentTree = (_a = parentTree.parentElement) === null || _a === void 0 ? void 0 : _a.closest("calcite-tree");
+      nextParentTree = parentTree.parentElement?.closest("calcite-tree");
       if (nextParentTree === parentTree) {
         break;
       }
@@ -36342,7 +36212,7 @@ class TreeItem {
       case "Home":
         root = this.el.closest("calcite-tree:not([child])");
         const firstNode = root.querySelector("calcite-tree-item");
-        firstNode === null || firstNode === void 0 ? void 0 : firstNode.focus();
+        firstNode?.focus();
         break;
       case "End":
         root = this.el.closest("calcite-tree:not([child])");
@@ -36352,7 +36222,7 @@ class TreeItem {
           currentNode = currentTree.children[root.children.length - 1];
           currentTree = nodeListToArray(currentNode.children).find((el) => el.matches("calcite-tree"));
         }
-        currentNode === null || currentNode === void 0 ? void 0 : currentNode.focus();
+        currentNode?.focus();
         break;
     }
   }
@@ -36424,10 +36294,10 @@ function getScreenReaderText(item, status, valueList) {
 function getHandleAndItemElement(event) {
   const handle = event
     .composedPath()
-    .find((item) => { var _a; return ((_a = item.dataset) === null || _a === void 0 ? void 0 : _a.jsHandle) !== undefined; });
+    .find((item) => item.dataset?.jsHandle !== undefined);
   const item = event
     .composedPath()
-    .find((item) => { var _a; return ((_a = item.tagName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === "calcite-value-list-item"; });
+    .find((item) => item.tagName?.toLowerCase() === "calcite-value-list-item");
   return { handle, item };
 }
 function replacePlaceholders(text, label, position, total) {
@@ -36496,7 +36366,7 @@ class ValueList {
       }
       this.items = this.getItems();
       this.calciteListOrderChange.emit(this.items.map(({ value }) => value));
-      requestAnimationFrame(() => handle === null || handle === void 0 ? void 0 : handle.focus());
+      requestAnimationFrame(() => handle?.focus());
       item.handleActivated = true;
       this.updateHandleAriaLabel(handle, getScreenReaderText(item, "change", this));
     };
@@ -36505,7 +36375,7 @@ class ValueList {
     };
     this.handleFocusIn = (event) => {
       const { handle, item } = getHandleAndItemElement(event);
-      if (!(item === null || item === void 0 ? void 0 : item.handleActivated) && item && handle) {
+      if (!item?.handleActivated && item && handle) {
         this.updateHandleAriaLabel(handle, getScreenReaderText(item, "idle", this));
       }
     };
@@ -36602,8 +36472,7 @@ class ValueList {
     });
   }
   cleanUpDragAndDrop() {
-    var _a;
-    (_a = this.sortable) === null || _a === void 0 ? void 0 : _a.destroy();
+    this.sortable?.destroy();
     this.sortable = null;
   }
   handleBlur() {
@@ -36768,9 +36637,8 @@ class ValueListItem {
   }
   /** Set focus on the component. */
   async setFocus() {
-    var _a;
     await componentLoaded(this);
-    (_a = this.pickListItem) === null || _a === void 0 ? void 0 : _a.setFocus();
+    this.pickListItem?.setFocus();
   }
   calciteListItemChangeHandler(event) {
     // adjust item payload from wrapped item before bubbling