@esri/calcite-components 1.7.0-next.1 → 1.7.0-next.11

package/hydrate/index.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.7.0-next.1
+ * v1.7.0-next.11
  */
 'use strict';
 
@@ -7022,7 +7022,7 @@ const SLOTS$y = {
   actionsStart: "actions-start",
   actionsEnd: "actions-end",
 };
-const CSS$17 = {
+const CSS$18 = {
   icon: "icon",
   header: "header",
   headerContent: "header-content",
@@ -7086,28 +7086,28 @@ class AccordionItem {
   // --------------------------------------------------------------------------
   renderActionsStart() {
     const { el } = this;
-    return getSlotted(el, SLOTS$y.actionsStart) ? (hAsync("div", { class: CSS$17.actionsStart }, hAsync("slot", { name: SLOTS$y.actionsStart }))) : null;
+    return getSlotted(el, SLOTS$y.actionsStart) ? (hAsync("div", { class: CSS$18.actionsStart }, hAsync("slot", { name: SLOTS$y.actionsStart }))) : null;
   }
   renderActionsEnd() {
     const { el } = this;
-    return getSlotted(el, SLOTS$y.actionsEnd) ? (hAsync("div", { class: CSS$17.actionsEnd }, hAsync("slot", { name: SLOTS$y.actionsEnd }))) : null;
+    return getSlotted(el, SLOTS$y.actionsEnd) ? (hAsync("div", { class: CSS$18.actionsEnd }, hAsync("slot", { name: SLOTS$y.actionsEnd }))) : null;
   }
   render() {
     const { iconFlipRtl } = this;
     const dir = getElementDir(this.el);
-    const iconStartEl = this.iconStart ? (hAsync("calcite-icon", { class: CSS$17.iconStart, flipRtl: iconFlipRtl === "both" || iconFlipRtl === "start", icon: this.iconStart, key: "icon-start", scale: this.scale === "l" ? "m" : "s" })) : null;
-    const iconEndEl = this.iconEnd ? (hAsync("calcite-icon", { class: CSS$17.iconEnd, flipRtl: iconFlipRtl === "both" || iconFlipRtl === "end", icon: this.iconEnd, key: "icon-end", scale: this.scale === "l" ? "m" : "s" })) : null;
+    const iconStartEl = this.iconStart ? (hAsync("calcite-icon", { class: CSS$18.iconStart, flipRtl: iconFlipRtl === "both" || iconFlipRtl === "start", icon: this.iconStart, key: "icon-start", scale: this.scale === "l" ? "m" : "s" })) : null;
+    const iconEndEl = this.iconEnd ? (hAsync("calcite-icon", { class: CSS$18.iconEnd, flipRtl: iconFlipRtl === "both" || iconFlipRtl === "end", icon: this.iconEnd, key: "icon-end", scale: this.scale === "l" ? "m" : "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$17.header]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.renderActionsStart(), hAsync("div", { "aria-expanded": toAriaBoolean(this.expanded), class: CSS$17.headerContent, onClick: this.itemHeaderClickHandler, role: "button", tabindex: "0" }, hAsync("div", { class: CSS$17.headerContainer }, iconStartEl, hAsync("div", { class: CSS$17.headerText }, hAsync("span", { class: CSS$17.heading }, this.heading), description ? hAsync("span", { class: CSS$17.description }, description) : null), iconEndEl), hAsync("calcite-icon", { class: CSS$17.expandIcon, icon: this.iconType === "chevron"
+      } }, hAsync("div", { class: { [CSS$18.header]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.renderActionsStart(), hAsync("div", { "aria-expanded": toAriaBoolean(this.expanded), class: CSS$18.headerContent, onClick: this.itemHeaderClickHandler, role: "button", tabindex: "0" }, hAsync("div", { class: CSS$18.headerContainer }, iconStartEl, hAsync("div", { class: CSS$18.headerText }, hAsync("span", { class: CSS$18.heading }, this.heading), description ? hAsync("span", { class: CSS$18.description }, description) : null), iconEndEl), hAsync("calcite-icon", { class: CSS$18.expandIcon, icon: this.iconType === "chevron"
         ? "chevronDown"
         : this.iconType === "caret"
           ? "caretDown"
           : this.expanded
             ? "minus"
-            : "plus", scale: this.scale === "l" ? "m" : "s" })), this.renderActionsEnd()), hAsync("div", { class: CSS$17.content }, hAsync("slot", null)))));
+            : "plus", scale: this.scale === "l" ? "m" : "s" })), this.renderActionsEnd()), hAsync("div", { class: CSS$18.content }, hAsync("slot", null)))));
   }
   //--------------------------------------------------------------------------
   //
@@ -8027,7 +8027,7 @@ function defaultOnMessagesChange() {
   mergeMessages(this);
 }
 
-const CSS$16 = {
+const CSS$17 = {
   button: "button",
   buttonTextVisible: "button--text-visible",
   buttonCompact: "button--compact",
@@ -8138,14 +8138,14 @@ class Action {
   renderTextContainer() {
     const { text, textEnabled } = this;
     const textContainerClasses = {
-      [CSS$16.textContainer]: true,
-      [CSS$16.textContainerVisible]: textEnabled,
+      [CSS$17.textContainer]: true,
+      [CSS$17.textContainerVisible]: textEnabled,
     };
     return text ? (hAsync("div", { class: textContainerClasses, key: "text-container" }, text)) : null;
   }
   renderIndicatorText() {
     const { indicator, messages, indicatorId, buttonId } = this;
-    return (hAsync("div", { "aria-labelledby": buttonId, "aria-live": "polite", class: CSS$16.indicatorText, id: indicatorId, role: "region" }, indicator ? messages.indicator : null));
+    return (hAsync("div", { "aria-labelledby": buttonId, "aria-live": "polite", class: CSS$17.indicatorText, id: indicatorId, role: "region" }, indicator ? messages.indicator : null));
   }
   renderIconContainer() {
     const { loading, icon, scale, el, iconFlipRtl } = this;
@@ -8156,21 +8156,21 @@ class Action {
     const iconNode = calciteLoaderNode || calciteIconNode;
     const hasIconToDisplay = iconNode || el.children?.length;
     const slotContainerNode = (hAsync("div", { class: {
-        [CSS$16.slotContainer]: true,
-        [CSS$16.slotContainerHidden]: loading,
+        [CSS$17.slotContainer]: true,
+        [CSS$17.slotContainerHidden]: loading,
       } }, hAsync("slot", null)));
-    return hasIconToDisplay ? (hAsync("div", { "aria-hidden": "true", class: CSS$16.iconContainer, key: "icon-container" }, iconNode, slotContainerNode)) : null;
+    return hasIconToDisplay ? (hAsync("div", { "aria-hidden": "true", class: CSS$17.iconContainer, key: "icon-container" }, iconNode, slotContainerNode)) : null;
   }
   render() {
     const { active, compact, disabled, loading, textEnabled, label, text, indicator, indicatorId, buttonId, messages, } = this;
     const ariaLabel = `${label || text}${indicator ? ` (${messages.indicator})` : ""}`;
     const buttonClasses = {
-      [CSS$16.button]: true,
-      [CSS$16.buttonTextVisible]: textEnabled,
-      [CSS$16.buttonCompact]: compact,
+      [CSS$17.button]: true,
+      [CSS$17.buttonTextVisible]: textEnabled,
+      [CSS$17.buttonCompact]: compact,
     };
     return (hAsync(Host, null, hAsync("button", { "aria-busy": toAriaBoolean(loading), "aria-controls": indicator ? indicatorId : null, "aria-disabled": toAriaBoolean(disabled), "aria-label": ariaLabel, "aria-pressed": toAriaBoolean(active), class: buttonClasses, disabled: disabled, id: buttonId,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (buttonEl) => (this.buttonEl = buttonEl) }, this.renderIconContainer(), this.renderTextContainer()), hAsync("slot", { name: SLOTS$x.tooltip, onSlotchange: this.handleTooltipSlotChange }), this.renderIndicatorText()));
   }
   static get assetsDirs() { return ["assets"]; }
@@ -9479,6 +9479,9 @@ const SLOTS$w = {
 const ICONS$j = {
   menu: "ellipsis",
 };
+const CSS$16 = {
+  container: "container",
+};
 
 const CSS$15 = {
   menu: "menu",
@@ -9575,7 +9578,7 @@ const ExpandToggle = ({ expanded, expandText, collapseText, toggle, el, position
   const expandIcon = end ? icons[1] : icons[0];
   const collapseIcon = end ? icons[0] : icons[1];
   const actionNode = (hAsync("calcite-action", { icon: expanded ? expandIcon : collapseIcon, onClick: toggle, scale: scale, text: text, textEnabled: expanded, title: !expanded && !tooltip ? text : null, 
-    // eslint-disable-next-line react/jsx-sort-props
+    // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
     ref: (referenceElement) => setTooltipReference({ tooltip, referenceElement, expanded, ref }) }));
   return actionNode;
 };
@@ -9676,6 +9679,7 @@ class ActionBar {
       const tooltips = slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-tooltip"));
       this.expandTooltip = tooltips[0];
     };
+    this.actionsEndGroupLabel = undefined;
     this.expandDisabled = false;
     this.expanded = false;
     this.layout = "vertical";
@@ -9778,11 +9782,11 @@ class ActionBar {
   //
   // --------------------------------------------------------------------------
   renderBottomActionGroup() {
-    const { expanded, expandDisabled, el, position, toggleExpand, scale, layout, messages } = this;
+    const { expanded, expandDisabled, el, position, toggleExpand, scale, layout, messages, actionsEndGroupLabel, } = this;
     const expandToggleNode = !expandDisabled ? (hAsync(ExpandToggle, { collapseText: messages.collapse, el: el, expandText: messages.expand, expanded: expanded, position: position, scale: scale, toggle: toggleExpand, tooltip: this.expandTooltip,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setExpandToggleRef })) : null;
-    return (hAsync("calcite-action-group", { class: CSS$14.actionGroupEnd, hidden: this.expandDisabled && !(this.hasActionsEnd || this.hasBottomActions), layout: layout, scale: scale }, hAsync("slot", { name: SLOTS$u.actionsEnd, onSlotchange: this.handleActionsEndSlotChange }), hAsync("slot", { name: SLOTS$u.bottomActions, onSlotchange: this.handleBottomActionsSlotChange }), hAsync("slot", { name: SLOTS$u.expandTooltip, onSlotchange: this.handleTooltipSlotChange }), expandToggleNode));
+    return (hAsync("calcite-action-group", { class: CSS$14.actionGroupEnd, label: actionsEndGroupLabel, hidden: this.expandDisabled && !(this.hasActionsEnd || this.hasBottomActions), layout: layout, scale: scale }, hAsync("slot", { name: SLOTS$u.actionsEnd, onSlotchange: this.handleActionsEndSlotChange }), hAsync("slot", { name: SLOTS$u.bottomActions, onSlotchange: this.handleBottomActionsSlotChange }), hAsync("slot", { name: SLOTS$u.expandTooltip, onSlotchange: this.handleTooltipSlotChange }), expandToggleNode));
   }
   render() {
     return (hAsync(Host, { onCalciteActionMenuOpen: this.actionMenuOpenHandler }, hAsync("slot", { onSlotchange: this.handleDefaultSlotChange }), this.renderBottomActionGroup()));
@@ -9802,6 +9806,7 @@ class ActionBar {
     "$flags$": 9,
     "$tagName$": "calcite-action-bar",
     "$members$": {
+      "actionsEndGroupLabel": [1, "actions-end-group-label"],
       "expandDisabled": [516, "expand-disabled"],
       "expanded": [1540],
       "layout": [513],
@@ -9824,7 +9829,7 @@ class ActionBar {
   }; }
 }
 
-const actionGroupCss = "/*!@:host*/.sc-calcite-action-group-h{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}/*!@:host **/.sc-calcite-action-group-h *.sc-calcite-action-group{box-sizing:border-box}/*!@:host*/.sc-calcite-action-group-h{display:flex;flex-direction:column;padding:0px;--calcite-action-group-columns:3}/*!@:host([columns=\"1\"])*/[columns=\"1\"].sc-calcite-action-group-h{--calcite-action-group-columns:1}/*!@:host([columns=\"2\"])*/[columns=\"2\"].sc-calcite-action-group-h{--calcite-action-group-columns:2}/*!@:host([columns=\"3\"])*/[columns=\"3\"].sc-calcite-action-group-h{--calcite-action-group-columns:3}/*!@:host([columns=\"4\"])*/[columns=\"4\"].sc-calcite-action-group-h{--calcite-action-group-columns:4}/*!@:host([columns=\"5\"])*/[columns=\"5\"].sc-calcite-action-group-h{--calcite-action-group-columns:5}/*!@:host([columns=\"6\"])*/[columns=\"6\"].sc-calcite-action-group-h{--calcite-action-group-columns:6}/*!@:host(:first-child)*/.sc-calcite-action-group-h:first-child{padding-block-start:0px}/*!@:host([layout=horizontal])*/[layout=horizontal].sc-calcite-action-group-h{flex-direction:row}/*!@:host([layout=grid])*/[layout=grid].sc-calcite-action-group-h{display:grid;place-content:stretch;gap:1px;background-color:var(--calcite-ui-background);padding:1px;grid-template-columns:repeat(var(--calcite-action-group-columns), auto)}/*!@:host([hidden])*/[hidden].sc-calcite-action-group-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-action-group{display:none}";
+const actionGroupCss = "/*!@:host*/.sc-calcite-action-group-h{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}/*!@:host **/.sc-calcite-action-group-h *.sc-calcite-action-group{box-sizing:border-box}/*!@:host*/.sc-calcite-action-group-h{display:flex;flex-direction:column;padding:0px;--calcite-action-group-columns:3}/*!@.container*/.container.sc-calcite-action-group{display:flex;flex-direction:column}/*!@:host([columns=\"1\"])*/[columns=\"1\"].sc-calcite-action-group-h{--calcite-action-group-columns:1}/*!@:host([columns=\"2\"])*/[columns=\"2\"].sc-calcite-action-group-h{--calcite-action-group-columns:2}/*!@:host([columns=\"3\"])*/[columns=\"3\"].sc-calcite-action-group-h{--calcite-action-group-columns:3}/*!@:host([columns=\"4\"])*/[columns=\"4\"].sc-calcite-action-group-h{--calcite-action-group-columns:4}/*!@:host([columns=\"5\"])*/[columns=\"5\"].sc-calcite-action-group-h{--calcite-action-group-columns:5}/*!@:host([columns=\"6\"])*/[columns=\"6\"].sc-calcite-action-group-h{--calcite-action-group-columns:6}/*!@:host(:first-child)*/.sc-calcite-action-group-h:first-child{padding-block-start:0px}/*!@:host([layout=horizontal]),\n:host([layout=horizontal]) .container*/[layout=horizontal].sc-calcite-action-group-h,[layout=horizontal].sc-calcite-action-group-h .container.sc-calcite-action-group{flex-direction:row}/*!@:host([layout=grid])*/[layout=grid].sc-calcite-action-group-h{display:grid}/*!@:host([layout=grid]) .container*/[layout=grid].sc-calcite-action-group-h .container.sc-calcite-action-group{display:grid;place-content:stretch;gap:1px;background-color:var(--calcite-ui-background);padding:1px;grid-template-columns:repeat(var(--calcite-action-group-columns), auto)}/*!@:host([hidden])*/[hidden].sc-calcite-action-group-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-action-group{display:none}";
 
 /**
  * @slot - A slot for adding a group of `calcite-action`s.
@@ -9846,6 +9851,7 @@ class ActionGroup {
       this.hasMenuActions = slotChangeHasAssignedElement(event);
     };
     this.expanded = false;
+    this.label = undefined;
     this.layout = "vertical";
     this.columns = undefined;
     this.menuOpen = false;
@@ -9908,7 +9914,7 @@ class ActionGroup {
     return (hAsync("calcite-action-menu", { expanded: expanded, flipPlacements: ["left", "right"], hidden: !hasMenuActions, label: messages.more, onCalciteActionMenuOpen: this.setMenuOpen, open: menuOpen, overlayPositioning: overlayPositioning, placement: layout === "horizontal" ? "bottom-start" : "leading-start", scale: scale }, hAsync("calcite-action", { icon: ICONS$j.menu, scale: scale, slot: SLOTS$v.trigger, text: messages.more, textEnabled: expanded }), hAsync("slot", { name: SLOTS$w.menuActions, onSlotchange: this.handleMenuActionsSlotChange }), hAsync("slot", { name: SLOTS$w.menuTooltip, slot: SLOTS$v.tooltip })));
   }
   render() {
-    return (hAsync(Fragment, null, hAsync("slot", null), this.renderMenu()));
+    return (hAsync("div", { "aria-label": this.label, class: CSS$16.container, role: "group" }, hAsync("slot", null), this.renderMenu()));
   }
   static get delegatesFocus() { return true; }
   static get assetsDirs() { return ["assets"]; }
@@ -9924,6 +9930,7 @@ class ActionGroup {
     "$tagName$": "calcite-action-group",
     "$members$": {
       "expanded": [516],
+      "label": [1],
       "layout": [513],
       "columns": [514],
       "menuOpen": [1540, "menu-open"],
@@ -10192,7 +10199,7 @@ class ActionMenu {
   renderMenuButton() {
     const { label, scale, expanded } = this;
     const menuButtonSlot = (hAsync("slot", { name: SLOTS$v.trigger, onSlotchange: this.setMenuButtonEl }, hAsync("calcite-action", { class: CSS$15.defaultTrigger, icon: ICONS$i.menu, scale: scale, text: label, textEnabled: expanded,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setDefaultMenuButtonEl })));
     return menuButtonSlot;
   }
@@ -10285,6 +10292,7 @@ class ActionPad {
       const tooltips = slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-tooltip"));
       this.expandTooltip = tooltips[0];
     };
+    this.actionsEndGroupLabel = undefined;
     this.expandDisabled = false;
     this.expanded = false;
     this.layout = "vertical";
@@ -10356,11 +10364,11 @@ class ActionPad {
   //
   // --------------------------------------------------------------------------
   renderBottomActionGroup() {
-    const { expanded, expandDisabled, messages, el, position, toggleExpand, scale, layout } = this;
+    const { expanded, expandDisabled, messages, el, position, toggleExpand, scale, layout, actionsEndGroupLabel, } = this;
     const expandToggleNode = !expandDisabled ? (hAsync(ExpandToggle, { collapseText: messages.collapse, el: el, expandText: messages.expand, expanded: expanded, position: position, scale: scale, toggle: toggleExpand, tooltip: this.expandTooltip,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setExpandToggleRef })) : null;
-    return expandToggleNode ? (hAsync("calcite-action-group", { class: CSS$13.actionGroupEnd, layout: layout, scale: scale }, hAsync("slot", { name: SLOTS$t.expandTooltip, onSlotchange: this.handleTooltipSlotChange }), expandToggleNode)) : null;
+    return expandToggleNode ? (hAsync("calcite-action-group", { class: CSS$13.actionGroupEnd, label: actionsEndGroupLabel, layout: layout, scale: scale }, hAsync("slot", { name: SLOTS$t.expandTooltip, onSlotchange: this.handleTooltipSlotChange }), expandToggleNode)) : null;
   }
   render() {
     return (hAsync(Host, { onCalciteActionMenuOpen: this.actionMenuOpenHandler }, hAsync("div", { class: CSS$13.container }, hAsync("slot", { onSlotchange: this.handleDefaultSlotChange }), this.renderBottomActionGroup())));
@@ -10379,6 +10387,7 @@ class ActionPad {
     "$flags$": 25,
     "$tagName$": "calcite-action-pad",
     "$members$": {
+      "actionsEndGroupLabel": [1, "actions-end-group-label"],
       "expandDisabled": [516, "expand-disabled"],
       "expanded": [1540],
       "layout": [513],
@@ -10633,7 +10642,7 @@ class Alert {
   render() {
     const { hasEndActions } = this;
     const closeButton = (hAsync("button", { "aria-label": this.messages.close, class: "alert-close", onClick: this.closeAlert, type: "button",
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.closeButton = el) }, hAsync("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
     numberStringFormatter.numberFormatOptions = {
       locale: this.effectiveLocale,
@@ -10653,7 +10662,7 @@ class Alert {
         [placement]: true,
         [CSS$12.slottedInShell]: this.slottedInShell,
       }, onPointerEnter: this.autoClose && this.autoCloseTimeoutId ? this.handleMouseOver : null, onPointerLeave: this.autoClose && this.autoCloseTimeoutId ? this.handleMouseLeave : null,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setTransitionEl }, requestedIcon ? (hAsync("div", { class: "alert-icon" }, hAsync("calcite-icon", { flipRtl: iconFlipRtl, icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, hAsync("div", { class: "alert-content" }, hAsync("slot", { name: SLOTS$s.title }), hAsync("slot", { name: SLOTS$s.message }), hAsync("slot", { name: SLOTS$s.link })), hAsync("div", { class: CSS$12.actionsEnd, hidden: !hasEndActions }, slotNode), this.queueLength > 1 ? queueCount : null, closeButton, open && !queued && autoClose ? hAsync("div", { class: "alert-dismiss-progress" }) : null)));
   }
   // when an alert is opened or closed, update queue and determine active alert
@@ -11878,7 +11887,7 @@ const CSS$$ = {
   buttonPaddingShrunk: "button-padding--shrunk",
 };
 
-const buttonCss = "/*!@:host([disabled])*/[disabled].sc-calcite-button-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host([loading]) *, :host([disabled]) *,\n:host([loading]) ::slotted(*),\n:host([disabled]) ::slotted(*)*/[loading].sc-calcite-button-h *.sc-calcite-button,[disabled].sc-calcite-button-h *.sc-calcite-button,.sc-calcite-button-h[loading] .sc-calcite-button-s>*,.sc-calcite-button-h[disabled] .sc-calcite-button-s>*{pointer-events:none}/*!@:host*/.sc-calcite-button-h{display:inline-block;inline-size:auto;vertical-align:middle}/*!@:host([round])*/[round].sc-calcite-button-h{border-radius:50px}/*!@:host([round]) a, :host([round]) button*/[round].sc-calcite-button-h a.sc-calcite-button,[round].sc-calcite-button-h button.sc-calcite-button{border-radius:50px}/*!@:host button,\n:host a*/.sc-calcite-button-h button.sc-calcite-button,.sc-calcite-button-h a.sc-calcite-button{outline-color:transparent}/*!@:host button:focus,\n:host a:focus*/.sc-calcite-button-h button.sc-calcite-button:focus,.sc-calcite-button-h a.sc-calcite-button:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}/*!@:host button,\n:host a*/.sc-calcite-button-h button.sc-calcite-button,.sc-calcite-button-h a.sc-calcite-button{--calcite-button-content-margin-internal:0.5rem;--calcite-button-padding-x-internal:7px;--calcite-button-padding-y-internal:3px;padding-block:var(--calcite-button-padding-y-internal);padding-inline:var(--calcite-button-padding-x-internal);position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-appearance:none;appearance:none;align-items:center;justify-content:center;border-radius:0px;border-style:none;text-align:center;font-family:inherit;font-weight:var(--calcite-font-weight-normal);text-decoration-line:none;transition:color var(--calcite-animation-timing) ease-in-out, background-color var(--calcite-animation-timing) ease-in-out, box-shadow var(--calcite-animation-timing) ease-in-out, outline-color var(--calcite-internal-animation-timing-fast) ease-in-out}/*!@:host button:hover,\n:host a:hover*/.sc-calcite-button-h button.sc-calcite-button:hover,.sc-calcite-button-h a.sc-calcite-button:hover{text-decoration-line:none}/*!@:host button span,\n:host a span*/.sc-calcite-button-h button.sc-calcite-button span.sc-calcite-button,.sc-calcite-button-h a.sc-calcite-button span.sc-calcite-button{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}/*!@.content*/.content.sc-calcite-button{margin-inline:var(--calcite-button-content-margin-internal)}/*!@.icon-start-empty .content*/.icon-start-empty.sc-calcite-button .content.sc-calcite-button{margin-inline-start:unset}/*!@.icon-end-empty .content*/.icon-end-empty.sc-calcite-button .content.sc-calcite-button{margin-inline-end:unset}/*!@:host([scale=m]) button,\n:host([scale=m]) a*/[scale=m].sc-calcite-button-h button.sc-calcite-button,[scale=m].sc-calcite-button-h a.sc-calcite-button{--calcite-button-content-margin-internal:0.75rem}/*!@:host([scale=l]) button,\n:host([scale=l]) a*/[scale=l].sc-calcite-button-h button.sc-calcite-button,[scale=l].sc-calcite-button-h a.sc-calcite-button{--calcite-button-content-margin-internal:1rem}/*!@:host([width=auto])*/[width=auto].sc-calcite-button-h{inline-size:auto}/*!@:host([width=half])*/[width=half].sc-calcite-button-h{inline-size:50%}/*!@:host([width=full])*/[width=full].sc-calcite-button-h{inline-size:100%}/*!@:host([alignment=center]:not([width=auto])) a,\n:host([alignment=center]:not([width=auto])) button*/[alignment=center].sc-calcite-button-h:not([width=auto]) a.sc-calcite-button,[alignment=center].sc-calcite-button-h:not([width=auto]) button.sc-calcite-button{justify-content:center}/*!@:host([alignment=start]:not([width=auto])) a,\n:host([alignment=start]:not([width=auto])) button*/[alignment=start].sc-calcite-button-h:not([width=auto]) a.sc-calcite-button,[alignment=start].sc-calcite-button-h:not([width=auto]) button.sc-calcite-button{justify-content:flex-start}/*!@:host([alignment=end]:not([width=auto])) a,\n:host([alignment=end]:not([width=auto])) button*/[alignment=end].sc-calcite-button-h:not([width=auto]) a.sc-calcite-button,[alignment=end].sc-calcite-button-h:not([width=auto]) button.sc-calcite-button{justify-content:flex-end}/*!@:host([alignment*=space-between]:not([width=auto])) a,\n:host([alignment*=space-between]:not([width=auto])) button*/[alignment*=space-between].sc-calcite-button-h:not([width=auto]) a.sc-calcite-button,[alignment*=space-between].sc-calcite-button-h:not([width=auto]) button.sc-calcite-button{justify-content:space-between}/*!@:host([alignment=icon-start-space-between]:not([width=auto])) .icon--start*/[alignment=icon-start-space-between].sc-calcite-button-h:not([width=auto]) .icon--start.sc-calcite-button{margin-inline-end:auto}/*!@:host([alignment=icon-start-space-between]:not([width=auto])) a,\n:host([alignment=icon-start-space-between]:not([width=auto])) button*/[alignment=icon-start-space-between].sc-calcite-button-h:not([width=auto]) a.sc-calcite-button,[alignment=icon-start-space-between].sc-calcite-button-h:not([width=auto]) button.sc-calcite-button{text-align:unset}/*!@:host([alignment=icon-end-space-between]:not([width=auto])) .icon--end*/[alignment=icon-end-space-between].sc-calcite-button-h:not([width=auto]) .icon--end.sc-calcite-button{margin-inline-start:auto}/*!@:host([alignment=icon-end-space-between]:not([width=auto])) a,\n:host([alignment=icon-end-space-between]:not([width=auto])) button*/[alignment=icon-end-space-between].sc-calcite-button-h:not([width=auto]) a.sc-calcite-button,[alignment=icon-end-space-between].sc-calcite-button-h:not([width=auto]) button.sc-calcite-button{text-align:unset}/*!@:host([alignment=center]) a:not(.content--slotted) .icon--start + .icon--end,\n:host([alignment=center]) button:not(.content--slotted) .icon--start + .icon--end*/[alignment=center].sc-calcite-button-h a.sc-calcite-button:not(.content--slotted) .icon--start.sc-calcite-button+.icon--end.sc-calcite-button,[alignment=center].sc-calcite-button-h button.sc-calcite-button:not(.content--slotted) .icon--start.sc-calcite-button+.icon--end.sc-calcite-button{margin-inline-start:var(--calcite-button-content-margin-internal)}/*!@.icon*/.icon.sc-calcite-button{position:relative;margin:0px;display:inline-flex;font-weight:var(--calcite-font-weight-normal);line-height:inherit}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-button-h[disabled] .sc-calcite-button-s>[calcite-hydrated][disabled],[disabled].sc-calcite-button-h [calcite-hydrated][disabled].sc-calcite-button{opacity:1}/*!@:host([loading]) button,\n:host([loading]) a*/[loading].sc-calcite-button-h button.sc-calcite-button,[loading].sc-calcite-button-h a.sc-calcite-button{opacity:var(--calcite-ui-opacity-disabled)}@keyframes loader-in{0%{inline-size:0;opacity:0;transform:scale(0.5)}100%{inline-size:1em;opacity:1;transform:scale(1)}}@keyframes loader-out{0%{inline-size:1em;opacity:1;transform:scale(1)}100%{inline-size:0;opacity:0;transform:scale(0.5)}}/*!@.calcite-button--loader*/.calcite-button--loader.sc-calcite-button{display:flex}/*!@.calcite-button--loader calcite-loader*/.calcite-button--loader.sc-calcite-button calcite-loader.sc-calcite-button{margin:0px;transition:inline-size var(--calcite-internal-animation-timing-slow) ease-in-out, opacity var(--calcite-internal-animation-timing-slow) ease-in-out, transform var(--calcite-internal-animation-timing-slow) ease-in-out}/*!@.calcite-button--loader calcite-loader.loading-in*/.calcite-button--loader.sc-calcite-button calcite-loader.loading-in.sc-calcite-button{animation-name:loader-in;animation-duration:var(--calcite-internal-animation-timing-slow)}/*!@.calcite-button--loader calcite-loader.loading-out*/.calcite-button--loader.sc-calcite-button calcite-loader.loading-out.sc-calcite-button{animation-name:loader-out;animation-duration:var(--calcite-internal-animation-timing-slow)}/*!@:host([loading]) button.content--slotted .calcite-button--loader calcite-loader,\n:host([loading]) a.content--slotted .calcite-button--loader calcite-loader*/[loading].sc-calcite-button-h button.content--slotted.sc-calcite-button .calcite-button--loader.sc-calcite-button calcite-loader.sc-calcite-button,[loading].sc-calcite-button-h a.content--slotted.sc-calcite-button .calcite-button--loader.sc-calcite-button calcite-loader.sc-calcite-button{margin-inline-end:var(--calcite-button-content-margin-internal)}/*!@:host([loading]) button:not(.content--slotted) .icon--start,\n:host([loading]) button:not(.content--slotted) .icon--end,\n:host([loading]) a:not(.content--slotted) .icon--start,\n:host([loading]) a:not(.content--slotted) .icon--end*/[loading].sc-calcite-button-h button.sc-calcite-button:not(.content--slotted) .icon--start.sc-calcite-button,[loading].sc-calcite-button-h button.sc-calcite-button:not(.content--slotted) .icon--end.sc-calcite-button,[loading].sc-calcite-button-h a.sc-calcite-button:not(.content--slotted) .icon--start.sc-calcite-button,[loading].sc-calcite-button-h a.sc-calcite-button:not(.content--slotted) .icon--end.sc-calcite-button{display:none}/*!@:host([appearance]) button,\n:host([appearance]) a*/[appearance].sc-calcite-button-h button.sc-calcite-button,[appearance].sc-calcite-button-h a.sc-calcite-button{border-width:1px;border-style:solid;border-color:transparent}/*!@:host([kind=brand]) button,\n:host([kind=brand]) a*/[kind=brand].sc-calcite-button-h button.sc-calcite-button,[kind=brand].sc-calcite-button-h a.sc-calcite-button{background-color:var(--calcite-ui-brand);color:var(--calcite-ui-text-inverse)}/*!@:host([kind=brand]) button:hover, :host([kind=brand]) button:focus,\n:host([kind=brand]) a:hover,\n:host([kind=brand]) a:focus*/[kind=brand].sc-calcite-button-h button.sc-calcite-button:hover,[kind=brand].sc-calcite-button-h button.sc-calcite-button:focus,[kind=brand].sc-calcite-button-h a.sc-calcite-button:hover,[kind=brand].sc-calcite-button-h a.sc-calcite-button:focus{background-color:var(--calcite-ui-brand-hover)}/*!@:host([kind=brand]) button:active,\n:host([kind=brand]) a:active*/[kind=brand].sc-calcite-button-h button.sc-calcite-button:active,[kind=brand].sc-calcite-button-h a.sc-calcite-button:active{background-color:var(--calcite-ui-brand-press)}/*!@:host([kind=brand]) button calcite-loader,\n:host([kind=brand]) a calcite-loader*/[kind=brand].sc-calcite-button-h button.sc-calcite-button calcite-loader.sc-calcite-button,[kind=brand].sc-calcite-button-h a.sc-calcite-button calcite-loader.sc-calcite-button{color:var(--calcite-ui-text-inverse)}/*!@:host([kind=danger]) button,\n:host([kind=danger]) a*/[kind=danger].sc-calcite-button-h button.sc-calcite-button,[kind=danger].sc-calcite-button-h a.sc-calcite-button{background-color:var(--calcite-ui-danger);color:var(--calcite-ui-text-inverse)}/*!@:host([kind=danger]) button:hover, :host([kind=danger]) button:focus,\n:host([kind=danger]) a:hover,\n:host([kind=danger]) a:focus*/[kind=danger].sc-calcite-button-h button.sc-calcite-button:hover,[kind=danger].sc-calcite-button-h button.sc-calcite-button:focus,[kind=danger].sc-calcite-button-h a.sc-calcite-button:hover,[kind=danger].sc-calcite-button-h a.sc-calcite-button:focus{background-color:var(--calcite-ui-danger-hover)}/*!@:host([kind=danger]) button:active,\n:host([kind=danger]) a:active*/[kind=danger].sc-calcite-button-h button.sc-calcite-button:active,[kind=danger].sc-calcite-button-h a.sc-calcite-button:active{background-color:var(--calcite-ui-danger-press)}/*!@:host([kind=danger]) button calcite-loader,\n:host([kind=danger]) a calcite-loader*/[kind=danger].sc-calcite-button-h button.sc-calcite-button calcite-loader.sc-calcite-button,[kind=danger].sc-calcite-button-h a.sc-calcite-button calcite-loader.sc-calcite-button{color:var(--calcite-ui-text-inverse)}/*!@:host([kind=neutral]) button,\n:host([kind=neutral]) a*/[kind=neutral].sc-calcite-button-h button.sc-calcite-button,[kind=neutral].sc-calcite-button-h a.sc-calcite-button{background-color:var(--calcite-ui-foreground-3);color:var(--calcite-ui-text-1)}/*!@:host([kind=neutral]) button:hover, :host([kind=neutral]) button:focus,\n:host([kind=neutral]) a:hover,\n:host([kind=neutral]) a:focus*/[kind=neutral].sc-calcite-button-h button.sc-calcite-button:hover,[kind=neutral].sc-calcite-button-h button.sc-calcite-button:focus,[kind=neutral].sc-calcite-button-h a.sc-calcite-button:hover,[kind=neutral].sc-calcite-button-h a.sc-calcite-button:focus{background-color:var(--calcite-ui-foreground-2)}/*!@:host([kind=neutral]) button:active,\n:host([kind=neutral]) a:active*/[kind=neutral].sc-calcite-button-h button.sc-calcite-button:active,[kind=neutral].sc-calcite-button-h a.sc-calcite-button:active{background-color:var(--calcite-ui-foreground-1)}/*!@:host([kind=neutral]) button calcite-loader,\n:host([kind=neutral]) a calcite-loader*/[kind=neutral].sc-calcite-button-h button.sc-calcite-button calcite-loader.sc-calcite-button,[kind=neutral].sc-calcite-button-h a.sc-calcite-button calcite-loader.sc-calcite-button{color:var(--calcite-ui-text-1)}/*!@:host([kind=inverse]) button,\n:host([kind=inverse]) a*/[kind=inverse].sc-calcite-button-h button.sc-calcite-button,[kind=inverse].sc-calcite-button-h a.sc-calcite-button{color:var(--calcite-ui-text-inverse);background-color:var(--calcite-ui-inverse)}/*!@:host([kind=inverse]) button:hover, :host([kind=inverse]) button:focus,\n:host([kind=inverse]) a:hover,\n:host([kind=inverse]) a:focus*/[kind=inverse].sc-calcite-button-h button.sc-calcite-button:hover,[kind=inverse].sc-calcite-button-h button.sc-calcite-button:focus,[kind=inverse].sc-calcite-button-h a.sc-calcite-button:hover,[kind=inverse].sc-calcite-button-h a.sc-calcite-button:focus{background-color:var(--calcite-ui-inverse-hover)}/*!@:host([kind=inverse]) button:active,\n:host([kind=inverse]) a:active*/[kind=inverse].sc-calcite-button-h button.sc-calcite-button:active,[kind=inverse].sc-calcite-button-h a.sc-calcite-button:active{background-color:var(--calcite-ui-inverse-press)}/*!@:host([kind=inverse]) button calcite-loader,\n:host([kind=inverse]) a calcite-loader*/[kind=inverse].sc-calcite-button-h button.sc-calcite-button calcite-loader.sc-calcite-button,[kind=inverse].sc-calcite-button-h a.sc-calcite-button calcite-loader.sc-calcite-button{color:var(--calcite-ui-text-inverse)}/*!@:host([appearance=outline-fill]) button,\n:host([appearance=outline-fill]) a*/[appearance=outline-fill].sc-calcite-button-h button.sc-calcite-button,[appearance=outline-fill].sc-calcite-button-h a.sc-calcite-button{border-width:1px;border-style:solid;background-color:var(--calcite-ui-foreground-1);box-shadow:inset 0 0 0 1px transparent}/*!@:host([appearance=outline-fill][kind=brand]) button,\n:host([appearance=outline-fill][kind=brand]) a*/[appearance=outline-fill][kind=brand].sc-calcite-button-h button.sc-calcite-button,[appearance=outline-fill][kind=brand].sc-calcite-button-h a.sc-calcite-button{border-color:var(--calcite-ui-brand);background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-brand)}/*!@:host([appearance=outline-fill][kind=brand]) button:hover,\n:host([appearance=outline-fill][kind=brand]) a:hover*/[appearance=outline-fill][kind=brand].sc-calcite-button-h button.sc-calcite-button:hover,[appearance=outline-fill][kind=brand].sc-calcite-button-h a.sc-calcite-button:hover{border-color:var(--calcite-ui-brand-hover);color:var(--calcite-ui-brand-hover);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand-hover)}/*!@:host([appearance=outline-fill][kind=brand]) button:focus,\n:host([appearance=outline-fill][kind=brand]) a:focus*/[appearance=outline-fill][kind=brand].sc-calcite-button-h button.sc-calcite-button:focus,[appearance=outline-fill][kind=brand].sc-calcite-button-h a.sc-calcite-button:focus{border-color:var(--calcite-ui-brand);color:var(--calcite-ui-brand);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand)}/*!@:host([appearance=outline-fill][kind=brand]) button:active,\n:host([appearance=outline-fill][kind=brand]) a:active*/[appearance=outline-fill][kind=brand].sc-calcite-button-h button.sc-calcite-button:active,[appearance=outline-fill][kind=brand].sc-calcite-button-h a.sc-calcite-button:active{border-color:var(--calcite-ui-brand-press);color:var(--calcite-ui-brand-press);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand-press)}/*!@:host([appearance=outline-fill][kind=brand]) button calcite-loader,\n:host([appearance=outline-fill][kind=brand]) a calcite-loader*/[appearance=outline-fill][kind=brand].sc-calcite-button-h button.sc-calcite-button calcite-loader.sc-calcite-button,[appearance=outline-fill][kind=brand].sc-calcite-button-h a.sc-calcite-button calcite-loader.sc-calcite-button{color:var(--calcite-ui-brand)}/*!@:host([appearance=outline-fill][kind=danger]) button,\n:host([appearance=outline-fill][kind=danger]) a*/[appearance=outline-fill][kind=danger].sc-calcite-button-h button.sc-calcite-button,[appearance=outline-fill][kind=danger].sc-calcite-button-h a.sc-calcite-button{border-color:var(--calcite-ui-danger);background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-danger)}/*!@:host([appearance=outline-fill][kind=danger]) button:hover,\n:host([appearance=outline-fill][kind=danger]) a:hover*/[appearance=outline-fill][kind=danger].sc-calcite-button-h button.sc-calcite-button:hover,[appearance=outline-fill][kind=danger].sc-calcite-button-h a.sc-calcite-button:hover{border-color:var(--calcite-ui-danger-hover);color:var(--calcite-ui-danger-hover);box-shadow:inset 0 0 0 1px var(--calcite-ui-danger-hover)}/*!@:host([appearance=outline-fill][kind=danger]) button:focus,\n:host([appearance=outline-fill][kind=danger]) a:focus*/[appearance=outline-fill][kind=danger].sc-calcite-button-h button.sc-calcite-button:focus,[appearance=outline-fill][kind=danger].sc-calcite-button-h a.sc-calcite-button:focus{border-color:var(--calcite-ui-danger);color:var(--calcite-ui-danger);box-shadow:inset 0 0 0 2px var(--calcite-ui-danger)}/*!@:host([appearance=outline-fill][kind=danger]) button:active,\n:host([appearance=outline-fill][kind=danger]) a:active*/[appearance=outline-fill][kind=danger].sc-calcite-button-h button.sc-calcite-button:active,[appearance=outline-fill][kind=danger].sc-calcite-button-h a.sc-calcite-button:active{border-color:var(--calcite-ui-danger-press);color:var(--calcite-ui-danger-press);box-shadow:inset 0 0 0 2px var(--calcite-ui-danger-press)}/*!@:host([appearance=outline-fill][kind=danger]) button calcite-loader,\n:host([appearance=outline-fill][kind=danger]) a calcite-loader*/[appearance=outline-fill][kind=danger].sc-calcite-button-h button.sc-calcite-button calcite-loader.sc-calcite-button,[appearance=outline-fill][kind=danger].sc-calcite-button-h a.sc-calcite-button calcite-loader.sc-calcite-button{color:var(--calcite-ui-danger)}/*!@:host([appearance=outline-fill][kind=neutral]) button,\n:host([appearance=outline-fill][kind=neutral]) a*/[appearance=outline-fill][kind=neutral].sc-calcite-button-h button.sc-calcite-button,[appearance=outline-fill][kind=neutral].sc-calcite-button-h a.sc-calcite-button{background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-foreground-3)}/*!@:host([appearance=outline-fill][kind=neutral]) button:hover,\n:host([appearance=outline-fill][kind=neutral]) a:hover*/[appearance=outline-fill][kind=neutral].sc-calcite-button-h button.sc-calcite-button:hover,[appearance=outline-fill][kind=neutral].sc-calcite-button-h a.sc-calcite-button:hover{box-shadow:inset 0 0 0 1px var(--calcite-ui-foreground-3)}/*!@:host([appearance=outline-fill][kind=neutral]) button:focus,\n:host([appearance=outline-fill][kind=neutral]) a:focus*/[appearance=outline-fill][kind=neutral].sc-calcite-button-h button.sc-calcite-button:focus,[appearance=outline-fill][kind=neutral].sc-calcite-button-h a.sc-calcite-button:focus{box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-3)}/*!@:host([appearance=outline-fill][kind=neutral]) button:active,\n:host([appearance=outline-fill][kind=neutral]) a:active*/[appearance=outline-fill][kind=neutral].sc-calcite-button-h button.sc-calcite-button:active,[appearance=outline-fill][kind=neutral].sc-calcite-button-h a.sc-calcite-button:active{box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-3)}/*!@:host([appearance=outline-fill][kind=neutral]) button calcite-loader,\n:host([appearance=outline-fill][kind=neutral]) a calcite-loader*/[appearance=outline-fill][kind=neutral].sc-calcite-button-h button.sc-calcite-button calcite-loader.sc-calcite-button,[appearance=outline-fill][kind=neutral].sc-calcite-button-h a.sc-calcite-button calcite-loader.sc-calcite-button{color:var(--calcite-ui-text-1)}/*!@:host([appearance=outline-fill][kind=inverse]) button,\n:host([appearance=outline-fill][kind=inverse]) a*/[appearance=outline-fill][kind=inverse].sc-calcite-button-h button.sc-calcite-button,[appearance=outline-fill][kind=inverse].sc-calcite-button-h a.sc-calcite-button{background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-inverse)}/*!@:host([appearance=outline-fill][kind=inverse]) button:hover,\n:host([appearance=outline-fill][kind=inverse]) a:hover*/[appearance=outline-fill][kind=inverse].sc-calcite-button-h button.sc-calcite-button:hover,[appearance=outline-fill][kind=inverse].sc-calcite-button-h a.sc-calcite-button:hover{border-color:var(--calcite-ui-inverse-hover);box-shadow:inset 0 0 0 1px var(--calcite-ui-inverse-hover)}/*!@:host([appearance=outline-fill][kind=inverse]) button:focus,\n:host([appearance=outline-fill][kind=inverse]) a:focus*/[appearance=outline-fill][kind=inverse].sc-calcite-button-h button.sc-calcite-button:focus,[appearance=outline-fill][kind=inverse].sc-calcite-button-h a.sc-calcite-button:focus{border-color:var(--calcite-ui-inverse);box-shadow:inset 0 0 0 2px var(--calcite-ui-inverse)}/*!@:host([appearance=outline-fill][kind=inverse]) button:active,\n:host([appearance=outline-fill][kind=inverse]) a:active*/[appearance=outline-fill][kind=inverse].sc-calcite-button-h button.sc-calcite-button:active,[appearance=outline-fill][kind=inverse].sc-calcite-button-h a.sc-calcite-button:active{border-color:var(--calcite-ui-inverse-press);box-shadow:inset 0 0 0 2px var(--calcite-ui-inverse-press)}/*!@:host([appearance=outline-fill][kind=inverse]) button calcite-loader,\n:host([appearance=outline-fill][kind=inverse]) a calcite-loader*/[appearance=outline-fill][kind=inverse].sc-calcite-button-h button.sc-calcite-button calcite-loader.sc-calcite-button,[appearance=outline-fill][kind=inverse].sc-calcite-button-h a.sc-calcite-button calcite-loader.sc-calcite-button{color:var(--calcite-ui-text-1)}/*!@:host([appearance=outline]) button,\n:host([appearance=outline]) a*/[appearance=outline].sc-calcite-button-h button.sc-calcite-button,[appearance=outline].sc-calcite-button-h a.sc-calcite-button{border-width:1px;border-style:solid;background-color:transparent;box-shadow:inset 0 0 0 1px transparent}/*!@:host([appearance=outline][kind=brand]) button,\n:host([appearance=outline][kind=brand]) a*/[appearance=outline][kind=brand].sc-calcite-button-h button.sc-calcite-button,[appearance=outline][kind=brand].sc-calcite-button-h a.sc-calcite-button{border-color:var(--calcite-ui-brand);background-color:transparent;color:var(--calcite-ui-brand)}/*!@:host([appearance=outline][kind=brand]) button:hover,\n:host([appearance=outline][kind=brand]) a:hover*/[appearance=outline][kind=brand].sc-calcite-button-h button.sc-calcite-button:hover,[appearance=outline][kind=brand].sc-calcite-button-h a.sc-calcite-button:hover{border-color:var(--calcite-ui-brand-hover);color:var(--calcite-ui-brand-hover);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand-hover)}/*!@:host([appearance=outline][kind=brand]) button:focus,\n:host([appearance=outline][kind=brand]) a:focus*/[appearance=outline][kind=brand].sc-calcite-button-h button.sc-calcite-button:focus,[appearance=outline][kind=brand].sc-calcite-button-h a.sc-calcite-button:focus{border-color:var(--calcite-ui-brand);color:var(--calcite-ui-brand);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand)}/*!@:host([appearance=outline][kind=brand]) button:active,\n:host([appearance=outline][kind=brand]) a:active*/[appearance=outline][kind=brand].sc-calcite-button-h button.sc-calcite-button:active,[appearance=outline][kind=brand].sc-calcite-button-h a.sc-calcite-button:active{border-color:var(--calcite-ui-brand-press);color:var(--calcite-ui-brand-press);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand-press)}/*!@:host([appearance=outline][kind=brand]) button calcite-loader,\n:host([appearance=outline][kind=brand]) a calcite-loader*/[appearance=outline][kind=brand].sc-calcite-button-h button.sc-calcite-button calcite-loader.sc-calcite-button,[appearance=outline][kind=brand].sc-calcite-button-h a.sc-calcite-button calcite-loader.sc-calcite-button{color:var(--calcite-ui-brand)}/*!@:host([appearance=outline][kind=danger]) button,\n:host([appearance=outline][kind=danger]) a*/[appearance=outline][kind=danger].sc-calcite-button-h button.sc-calcite-button,[appearance=outline][kind=danger].sc-calcite-button-h a.sc-calcite-button{border-color:var(--calcite-ui-danger);background-color:transparent;color:var(--calcite-ui-danger)}/*!@:host([appearance=outline][kind=danger]) button:hover,\n:host([appearance=outline][kind=danger]) a:hover*/[appearance=outline][kind=danger].sc-calcite-button-h button.sc-calcite-button:hover,[appearance=outline][kind=danger].sc-calcite-button-h a.sc-calcite-button:hover{border-color:var(--calcite-ui-danger-hover);color:var(--calcite-ui-danger-hover);box-shadow:inset 0 0 0 1px var(--calcite-ui-danger-hover)}/*!@:host([appearance=outline][kind=danger]) button:focus,\n:host([appearance=outline][kind=danger]) a:focus*/[appearance=outline][kind=danger].sc-calcite-button-h button.sc-calcite-button:focus,[appearance=outline][kind=danger].sc-calcite-button-h a.sc-calcite-button:focus{border-color:var(--calcite-ui-danger);color:var(--calcite-ui-danger);box-shadow:inset 0 0 0 2px var(--calcite-ui-danger)}/*!@:host([appearance=outline][kind=danger]) button:active,\n:host([appearance=outline][kind=danger]) a:active*/[appearance=outline][kind=danger].sc-calcite-button-h button.sc-calcite-button:active,[appearance=outline][kind=danger].sc-calcite-button-h a.sc-calcite-button:active{border-color:var(--calcite-ui-danger-press);color:var(--calcite-ui-danger-press);box-shadow:inset 0 0 0 2px var(--calcite-ui-danger-press)}/*!@:host([appearance=outline][kind=danger]) button calcite-loader,\n:host([appearance=outline][kind=danger]) a calcite-loader*/[appearance=outline][kind=danger].sc-calcite-button-h button.sc-calcite-button calcite-loader.sc-calcite-button,[appearance=outline][kind=danger].sc-calcite-button-h a.sc-calcite-button calcite-loader.sc-calcite-button{color:var(--calcite-ui-danger)}/*!@:host([appearance=outline][kind=neutral]) button,\n:host([appearance=outline][kind=neutral]) a*/[appearance=outline][kind=neutral].sc-calcite-button-h button.sc-calcite-button,[appearance=outline][kind=neutral].sc-calcite-button-h a.sc-calcite-button{background-color:transparent;color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-border-1)}/*!@:host([appearance=outline][kind=neutral]) button:hover,\n:host([appearance=outline][kind=neutral]) a:hover*/[appearance=outline][kind=neutral].sc-calcite-button-h button.sc-calcite-button:hover,[appearance=outline][kind=neutral].sc-calcite-button-h a.sc-calcite-button:hover{box-shadow:inset 0 0 0 1px var(--calcite-ui-foreground-3)}/*!@:host([appearance=outline][kind=neutral]) button:focus,\n:host([appearance=outline][kind=neutral]) a:focus*/[appearance=outline][kind=neutral].sc-calcite-button-h button.sc-calcite-button:focus,[appearance=outline][kind=neutral].sc-calcite-button-h a.sc-calcite-button:focus{box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-3)}/*!@:host([appearance=outline][kind=neutral]) button:active,\n:host([appearance=outline][kind=neutral]) a:active*/[appearance=outline][kind=neutral].sc-calcite-button-h button.sc-calcite-button:active,[appearance=outline][kind=neutral].sc-calcite-button-h a.sc-calcite-button:active{box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-3)}/*!@:host([appearance=outline][kind=neutral]) button calcite-loader,\n:host([appearance=outline][kind=neutral]) a calcite-loader*/[appearance=outline][kind=neutral].sc-calcite-button-h button.sc-calcite-button calcite-loader.sc-calcite-button,[appearance=outline][kind=neutral].sc-calcite-button-h a.sc-calcite-button calcite-loader.sc-calcite-button{color:var(--calcite-ui-text-1)}/*!@:host([appearance=outline][kind=inverse]) button,\n:host([appearance=outline][kind=inverse]) a*/[appearance=outline][kind=inverse].sc-calcite-button-h button.sc-calcite-button,[appearance=outline][kind=inverse].sc-calcite-button-h a.sc-calcite-button{background-color:transparent;color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-inverse)}/*!@:host([appearance=outline][kind=inverse]) button:hover,\n:host([appearance=outline][kind=inverse]) a:hover*/[appearance=outline][kind=inverse].sc-calcite-button-h button.sc-calcite-button:hover,[appearance=outline][kind=inverse].sc-calcite-button-h a.sc-calcite-button:hover{border-color:var(--calcite-ui-inverse-hover);box-shadow:inset 0 0 0 1px var(--calcite-ui-inverse-hover)}/*!@:host([appearance=outline][kind=inverse]) button:focus,\n:host([appearance=outline][kind=inverse]) a:focus*/[appearance=outline][kind=inverse].sc-calcite-button-h button.sc-calcite-button:focus,[appearance=outline][kind=inverse].sc-calcite-button-h a.sc-calcite-button:focus{border-color:var(--calcite-ui-inverse);box-shadow:inset 0 0 0 2px var(--calcite-ui-inverse)}/*!@:host([appearance=outline][kind=inverse]) button:active,\n:host([appearance=outline][kind=inverse]) a:active*/[appearance=outline][kind=inverse].sc-calcite-button-h button.sc-calcite-button:active,[appearance=outline][kind=inverse].sc-calcite-button-h a.sc-calcite-button:active{border-color:var(--calcite-ui-inverse-press);box-shadow:inset 0 0 0 2px var(--calcite-ui-inverse-press)}/*!@:host([appearance=outline][kind=inverse]) button calcite-loader,\n:host([appearance=outline][kind=inverse]) a calcite-loader*/[appearance=outline][kind=inverse].sc-calcite-button-h button.sc-calcite-button calcite-loader.sc-calcite-button,[appearance=outline][kind=inverse].sc-calcite-button-h a.sc-calcite-button calcite-loader.sc-calcite-button{color:var(--calcite-ui-text-1)}/*!@:host([appearance=outline-fill][split-child=primary]) button,\n:host([appearance=outline][split-child=primary]) button*/[appearance=outline-fill][split-child=primary].sc-calcite-button-h button.sc-calcite-button,[appearance=outline][split-child=primary].sc-calcite-button-h button.sc-calcite-button{border-inline-end-width:0;border-inline-start-width:1px}/*!@:host([appearance=outline-fill][split-child=secondary]) button,\n:host([appearance=outline][split-child=secondary]) button*/[appearance=outline-fill][split-child=secondary].sc-calcite-button-h button.sc-calcite-button,[appearance=outline][split-child=secondary].sc-calcite-button-h button.sc-calcite-button{border-inline-start-width:0;border-inline-end-width:1px}/*!@:host([appearance=transparent]:not(.enable-editing-button)) button,\n:host([appearance=transparent]:not(.enable-editing-button)) a*/[appearance=transparent].sc-calcite-button-h:not(.enable-editing-button) button.sc-calcite-button,[appearance=transparent].sc-calcite-button-h:not(.enable-editing-button) a.sc-calcite-button{background-color:transparent}/*!@:host([appearance=transparent]:not(.enable-editing-button)) button:hover, :host([appearance=transparent]:not(.enable-editing-button)) button:focus,\n:host([appearance=transparent]:not(.enable-editing-button)) a:hover,\n:host([appearance=transparent]:not(.enable-editing-button)) a:focus*/[appearance=transparent].sc-calcite-button-h:not(.enable-editing-button) button.sc-calcite-button:hover,[appearance=transparent].sc-calcite-button-h:not(.enable-editing-button) button.sc-calcite-button:focus,[appearance=transparent].sc-calcite-button-h:not(.enable-editing-button) a.sc-calcite-button:hover,[appearance=transparent].sc-calcite-button-h:not(.enable-editing-button) a.sc-calcite-button:focus{background-color:var(--calcite-button-transparent-hover)}/*!@:host([appearance=transparent]:not(.enable-editing-button)) button:active,\n:host([appearance=transparent]:not(.enable-editing-button)) a:active*/[appearance=transparent].sc-calcite-button-h:not(.enable-editing-button) button.sc-calcite-button:active,[appearance=transparent].sc-calcite-button-h:not(.enable-editing-button) a.sc-calcite-button:active{background-color:var(--calcite-button-transparent-press)}/*!@:host([appearance=transparent][kind=brand]) button,\n:host([appearance=transparent][kind=brand]) a*/[appearance=transparent][kind=brand].sc-calcite-button-h button.sc-calcite-button,[appearance=transparent][kind=brand].sc-calcite-button-h a.sc-calcite-button{color:var(--calcite-ui-brand)}/*!@:host([appearance=transparent][kind=brand]) button:hover,\n:host([appearance=transparent][kind=brand]) a:hover*/[appearance=transparent][kind=brand].sc-calcite-button-h button.sc-calcite-button:hover,[appearance=transparent][kind=brand].sc-calcite-button-h a.sc-calcite-button:hover{color:var(--calcite-ui-brand-hover)}/*!@:host([appearance=transparent][kind=brand]) button:focus,\n:host([appearance=transparent][kind=brand]) a:focus*/[appearance=transparent][kind=brand].sc-calcite-button-h button.sc-calcite-button:focus,[appearance=transparent][kind=brand].sc-calcite-button-h a.sc-calcite-button:focus{color:var(--calcite-ui-brand)}/*!@:host([appearance=transparent][kind=brand]) button:active,\n:host([appearance=transparent][kind=brand]) a:active*/[appearance=transparent][kind=brand].sc-calcite-button-h button.sc-calcite-button:active,[appearance=transparent][kind=brand].sc-calcite-button-h a.sc-calcite-button:active{color:var(--calcite-ui-brand-press)}/*!@:host([appearance=transparent][kind=brand]) button calcite-loader,\n:host([appearance=transparent][kind=brand]) a calcite-loader*/[appearance=transparent][kind=brand].sc-calcite-button-h button.sc-calcite-button calcite-loader.sc-calcite-button,[appearance=transparent][kind=brand].sc-calcite-button-h a.sc-calcite-button calcite-loader.sc-calcite-button{color:var(--calcite-ui-brand)}/*!@:host([appearance=transparent][kind=danger]) button,\n:host([appearance=transparent][kind=danger]) a*/[appearance=transparent][kind=danger].sc-calcite-button-h button.sc-calcite-button,[appearance=transparent][kind=danger].sc-calcite-button-h a.sc-calcite-button{color:var(--calcite-ui-danger)}/*!@:host([appearance=transparent][kind=danger]) button:hover,\n:host([appearance=transparent][kind=danger]) a:hover*/[appearance=transparent][kind=danger].sc-calcite-button-h button.sc-calcite-button:hover,[appearance=transparent][kind=danger].sc-calcite-button-h a.sc-calcite-button:hover{color:var(--calcite-ui-danger-hover)}/*!@:host([appearance=transparent][kind=danger]) button:focus,\n:host([appearance=transparent][kind=danger]) a:focus*/[appearance=transparent][kind=danger].sc-calcite-button-h button.sc-calcite-button:focus,[appearance=transparent][kind=danger].sc-calcite-button-h a.sc-calcite-button:focus{color:var(--calcite-ui-danger)}/*!@:host([appearance=transparent][kind=danger]) button:active,\n:host([appearance=transparent][kind=danger]) a:active*/[appearance=transparent][kind=danger].sc-calcite-button-h button.sc-calcite-button:active,[appearance=transparent][kind=danger].sc-calcite-button-h a.sc-calcite-button:active{color:var(--calcite-ui-danger-press)}/*!@:host([appearance=transparent][kind=danger]) button calcite-loader,\n:host([appearance=transparent][kind=danger]) a calcite-loader*/[appearance=transparent][kind=danger].sc-calcite-button-h button.sc-calcite-button calcite-loader.sc-calcite-button,[appearance=transparent][kind=danger].sc-calcite-button-h a.sc-calcite-button calcite-loader.sc-calcite-button{color:var(--calcite-ui-danger)}/*!@:host([appearance=transparent][kind=neutral]:not(.cancel-editing-button)) button,\n:host([appearance=transparent][kind=neutral]:not(.cancel-editing-button)) a,\n:host([appearance=transparent][kind=neutral]:not(.cancel-editing-button)) calcite-loader*/[appearance=transparent][kind=neutral].sc-calcite-button-h:not(.cancel-editing-button) button.sc-calcite-button,[appearance=transparent][kind=neutral].sc-calcite-button-h:not(.cancel-editing-button) a.sc-calcite-button,[appearance=transparent][kind=neutral].sc-calcite-button-h:not(.cancel-editing-button) calcite-loader.sc-calcite-button{color:var(--calcite-ui-text-1)}/*!@:host([appearance=transparent][kind=neutral].cancel-editing-button) button*/[appearance=transparent][kind=neutral].cancel-editing-button.sc-calcite-button-h button.sc-calcite-button{border-block-start-width:1px;border-block-end-width:1px;color:var(--calcite-ui-text-3);border-block-start-color:var(--calcite-ui-border-input);border-block-end-color:var(--calcite-ui-border-input);border-block-style:solid}/*!@:host([appearance=transparent][kind=neutral].cancel-editing-button) button:not(.content--slotted)*/[appearance=transparent][kind=neutral].cancel-editing-button.sc-calcite-button-h button.sc-calcite-button:not(.content--slotted){--calcite-button-padding-y-internal:0}/*!@:host([appearance=transparent][kind=neutral].cancel-editing-button) button:hover*/[appearance=transparent][kind=neutral].cancel-editing-button.sc-calcite-button-h button.sc-calcite-button:hover{color:var(--calcite-ui-text-1)}/*!@:host([appearance=transparent][kind=neutral].enable-editing-button) button*/[appearance=transparent][kind=neutral].enable-editing-button.sc-calcite-button-h button.sc-calcite-button{background-color:transparent}/*!@:host(.confirm-changes-button) button:focus,\n:host(.cancel-editing-button) button:focus,\n:host(.enable-editing-button) button:focus*/.confirm-changes-button.sc-calcite-button-h button.sc-calcite-button:focus,.cancel-editing-button.sc-calcite-button-h button.sc-calcite-button:focus,.enable-editing-button.sc-calcite-button-h button.sc-calcite-button:focus{outline-offset:-2px}/*!@:host([appearance=transparent][kind=inverse]) button,\n:host([appearance=transparent][kind=inverse]) a,\n:host([appearance=transparent][kind=inverse]) calcite-loader*/[appearance=transparent][kind=inverse].sc-calcite-button-h button.sc-calcite-button,[appearance=transparent][kind=inverse].sc-calcite-button-h a.sc-calcite-button,[appearance=transparent][kind=inverse].sc-calcite-button-h calcite-loader.sc-calcite-button{color:var(--calcite-ui-text-inverse)}/*!@:host([scale=s]) button.content--slotted,\n:host([scale=s]) a.content--slotted*/[scale=s].sc-calcite-button-h button.content--slotted.sc-calcite-button,[scale=s].sc-calcite-button-h a.content--slotted.sc-calcite-button{font-size:var(--calcite-font-size--2);line-height:1rem}/*!@:host([scale=s][appearance=transparent]) button.content--slotted,\n:host([scale=s][appearance=transparent]) a.content--slotted*/[scale=s][appearance=transparent].sc-calcite-button-h button.content--slotted.sc-calcite-button,[scale=s][appearance=transparent].sc-calcite-button-h a.content--slotted.sc-calcite-button{--calcite-button-padding-x-internal:0.5rem}/*!@:host([scale=s]) button,\n:host([scale=s]) a*/[scale=s].sc-calcite-button-h button.sc-calcite-button,[scale=s].sc-calcite-button-h a.sc-calcite-button{--calcite-button-padding-y-internal:3px}/*!@:host([scale=m]) button.content--slotted,\n:host([scale=m]) a.content--slotted*/[scale=m].sc-calcite-button-h button.content--slotted.sc-calcite-button,[scale=m].sc-calcite-button-h a.content--slotted.sc-calcite-button{--calcite-button-padding-x-internal:11px;font-size:var(--calcite-font-size--1);line-height:1rem}/*!@:host([scale=m]) button,\n:host([scale=m]) a*/[scale=m].sc-calcite-button-h button.sc-calcite-button,[scale=m].sc-calcite-button-h a.sc-calcite-button{--calcite-button-padding-y-internal:7px}/*!@:host([scale=m][appearance=transparent]) button.content--slotted,\n:host([scale=m][appearance=transparent]) a.content--slotted*/[scale=m][appearance=transparent].sc-calcite-button-h button.content--slotted.sc-calcite-button,[scale=m][appearance=transparent].sc-calcite-button-h a.content--slotted.sc-calcite-button{--calcite-button-padding-x-internal:0.75rem}/*!@:host([scale=l]) button.content--slotted,\n:host([scale=l]) a.content--slotted*/[scale=l].sc-calcite-button-h button.content--slotted.sc-calcite-button,[scale=l].sc-calcite-button-h a.content--slotted.sc-calcite-button{--calcite-button-padding-x-internal:15px;font-size:var(--calcite-font-size-0);line-height:1.25rem}/*!@:host([scale=l]) .button-padding*/[scale=l].sc-calcite-button-h .button-padding.sc-calcite-button{--calcite-button-padding-x-internal:1rem;--calcite-button-padding-y-internal:11px}/*!@:host([scale=l]) .button-padding--shrunk*/[scale=l].sc-calcite-button-h .button-padding--shrunk.sc-calcite-button{--calcite-button-padding-y-internal:9px}/*!@:host([scale=s]) button:not(.content--slotted),\n:host([scale=s]) a:not(.content--slotted)*/[scale=s].sc-calcite-button-h button.sc-calcite-button:not(.content--slotted),[scale=s].sc-calcite-button-h a.sc-calcite-button:not(.content--slotted){--calcite-button-padding-x-internal:0.125rem;--calcite-button-padding-y-internal:3px;inline-size:1.5rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;min-block-size:1.5rem}/*!@:host([scale=m]) button:not(.content--slotted),\n:host([scale=m]) a:not(.content--slotted)*/[scale=m].sc-calcite-button-h button.sc-calcite-button:not(.content--slotted),[scale=m].sc-calcite-button-h a.sc-calcite-button:not(.content--slotted){--calcite-button-padding-x-internal:0.125rem;--calcite-button-padding-y-internal:7px;inline-size:2rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;min-block-size:2rem}/*!@:host([scale=l]) button:not(.content--slotted),\n:host([scale=l]) a:not(.content--slotted)*/[scale=l].sc-calcite-button-h button.sc-calcite-button:not(.content--slotted),[scale=l].sc-calcite-button-h a.sc-calcite-button:not(.content--slotted){--calcite-button-padding-x-internal:0.125rem;--calcite-button-padding-y-internal:9px;inline-size:2.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;min-block-size:2.75rem}/*!@:host([scale=l][appearance=transparent]) button:not(.content--slotted),\n:host([scale=l][appearance=transparent]) a:not(.content--slotted)*/[scale=l][appearance=transparent].sc-calcite-button-h button.sc-calcite-button:not(.content--slotted),[scale=l][appearance=transparent].sc-calcite-button-h a.sc-calcite-button:not(.content--slotted){--calcite-button-padding-y-internal:0.625rem}/*!@:host([scale=s][icon-start][icon-end]) button:not(.content--slotted),\n:host([scale=s][icon-start][icon-end]) a:not(.content--slotted)*/[scale=s][icon-start][icon-end].sc-calcite-button-h button.sc-calcite-button:not(.content--slotted),[scale=s][icon-start][icon-end].sc-calcite-button-h a.sc-calcite-button:not(.content--slotted){--calcite-button-padding-x-internal:23px;block-size:1.5rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}/*!@:host([scale=s][icon-start][icon-end][appearance=transparent]) button:not(.content--slotted),\n:host([scale=s][icon-start][icon-end][appearance=transparent]) a:not(.content--slotted)*/[scale=s][icon-start][icon-end][appearance=transparent].sc-calcite-button-h button.sc-calcite-button:not(.content--slotted),[scale=s][icon-start][icon-end][appearance=transparent].sc-calcite-button-h a.sc-calcite-button:not(.content--slotted){--calcite-button-padding-x-internal:1.5rem}/*!@:host([scale=m][icon-start][icon-end]) button:not(.content--slotted),\n:host([scale=m][icon-start][icon-end]) a:not(.content--slotted)*/[scale=m][icon-start][icon-end].sc-calcite-button-h button.sc-calcite-button:not(.content--slotted),[scale=m][icon-start][icon-end].sc-calcite-button-h a.sc-calcite-button:not(.content--slotted){--calcite-button-padding-x-internal:2rem;block-size:2rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}/*!@:host([scale=m][icon-start][icon-end][appearance=transparent]) button:not(.content--slotted),\n:host([scale=m][icon-start][icon-end][appearance=transparent]) a:not(.content--slotted)*/[scale=m][icon-start][icon-end][appearance=transparent].sc-calcite-button-h button.sc-calcite-button:not(.content--slotted),[scale=m][icon-start][icon-end][appearance=transparent].sc-calcite-button-h a.sc-calcite-button:not(.content--slotted){--calcite-button-padding-x-internal:33px}/*!@:host([scale=l][icon-start][icon-end]) button:not(.content--slotted),\n:host([scale=l][icon-start][icon-end]) a:not(.content--slotted)*/[scale=l][icon-start][icon-end].sc-calcite-button-h button.sc-calcite-button:not(.content--slotted),[scale=l][icon-start][icon-end].sc-calcite-button-h a.sc-calcite-button:not(.content--slotted){--calcite-button-padding-x-internal:43px;block-size:2.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}/*!@:host([scale=l][icon-start][icon-end]) button:not(.content--slotted) .icon--start + .icon--end,\n:host([scale=l][icon-start][icon-end]) a:not(.content--slotted) .icon--start + .icon--end*/[scale=l][icon-start][icon-end].sc-calcite-button-h button.sc-calcite-button:not(.content--slotted) .icon--start.sc-calcite-button+.icon--end.sc-calcite-button,[scale=l][icon-start][icon-end].sc-calcite-button-h a.sc-calcite-button:not(.content--slotted) .icon--start.sc-calcite-button+.icon--end.sc-calcite-button{margin-inline-start:1rem}/*!@:host([scale=l][icon-start][icon-end][appearance=transparent]) button:not(.content--slotted),\n:host([scale=l][icon-start][icon-end][appearance=transparent]) a:not(.content--slotted)*/[scale=l][icon-start][icon-end][appearance=transparent].sc-calcite-button-h button.sc-calcite-button:not(.content--slotted),[scale=l][icon-start][icon-end][appearance=transparent].sc-calcite-button-h a.sc-calcite-button:not(.content--slotted){--calcite-button-padding-x-internal:2.75rem}/*!@:host([hidden])*/[hidden].sc-calcite-button-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-button{display:none}";
+const buttonCss = "/*!@:host([disabled])*/[disabled].sc-calcite-button-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host([loading]) *, :host([disabled]) *,\n:host([loading]) ::slotted(*),\n:host([disabled]) ::slotted(*)*/[loading].sc-calcite-button-h *.sc-calcite-button,[disabled].sc-calcite-button-h *.sc-calcite-button,.sc-calcite-button-h[loading] .sc-calcite-button-s>*,.sc-calcite-button-h[disabled] .sc-calcite-button-s>*{pointer-events:none}/*!@:host*/.sc-calcite-button-h{display:inline-block;inline-size:auto;vertical-align:middle}/*!@:host([round])*/[round].sc-calcite-button-h{border-radius:50px}/*!@:host([round]) a, :host([round]) button*/[round].sc-calcite-button-h a.sc-calcite-button,[round].sc-calcite-button-h button.sc-calcite-button{border-radius:50px}/*!@:host button,\n:host a*/.sc-calcite-button-h button.sc-calcite-button,.sc-calcite-button-h a.sc-calcite-button{outline-color:transparent}/*!@:host button:focus,\n:host a:focus*/.sc-calcite-button-h button.sc-calcite-button:focus,.sc-calcite-button-h a.sc-calcite-button:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}/*!@:host button,\n:host a*/.sc-calcite-button-h button.sc-calcite-button,.sc-calcite-button-h a.sc-calcite-button{--calcite-button-content-margin-internal:0.5rem;--calcite-button-padding-x-internal:7px;--calcite-button-padding-y-internal:3px;padding-block:var(--calcite-button-padding-y-internal);padding-inline:var(--calcite-button-padding-x-internal);position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-appearance:none;appearance:none;align-items:center;justify-content:center;border-radius:0px;border-style:none;text-align:center;font-family:inherit;font-weight:var(--calcite-font-weight-normal);text-decoration-line:none;transition:color var(--calcite-animation-timing) ease-in-out, background-color var(--calcite-animation-timing) ease-in-out, box-shadow var(--calcite-animation-timing) ease-in-out, outline-color var(--calcite-internal-animation-timing-fast) ease-in-out}/*!@:host button:hover,\n:host a:hover*/.sc-calcite-button-h button.sc-calcite-button:hover,.sc-calcite-button-h a.sc-calcite-button:hover{text-decoration-line:none}/*!@:host button span,\n:host a span*/.sc-calcite-button-h button.sc-calcite-button span.sc-calcite-button,.sc-calcite-button-h a.sc-calcite-button span.sc-calcite-button{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}/*!@.content*/.content.sc-calcite-button{margin-inline:var(--calcite-button-content-margin-internal)}/*!@.icon-start-empty .content*/.icon-start-empty.sc-calcite-button .content.sc-calcite-button{margin-inline-start:unset}/*!@.icon-end-empty .content*/.icon-end-empty.sc-calcite-button .content.sc-calcite-button{margin-inline-end:unset}/*!@:host([scale=m]) button,\n:host([scale=m]) a*/[scale=m].sc-calcite-button-h button.sc-calcite-button,[scale=m].sc-calcite-button-h a.sc-calcite-button{--calcite-button-content-margin-internal:0.75rem}/*!@:host([scale=l]) button,\n:host([scale=l]) a*/[scale=l].sc-calcite-button-h button.sc-calcite-button,[scale=l].sc-calcite-button-h a.sc-calcite-button{--calcite-button-content-margin-internal:1rem}/*!@:host([width=auto])*/[width=auto].sc-calcite-button-h{inline-size:auto}/*!@:host([width=half])*/[width=half].sc-calcite-button-h{inline-size:50%}/*!@:host([width=full])*/[width=full].sc-calcite-button-h{inline-size:100%}/*!@:host([alignment=center]:not([width=auto])) a,\n:host([alignment=center]:not([width=auto])) button*/[alignment=center].sc-calcite-button-h:not([width=auto]) a.sc-calcite-button,[alignment=center].sc-calcite-button-h:not([width=auto]) button.sc-calcite-button{justify-content:center}/*!@:host([alignment=start]:not([width=auto])) a,\n:host([alignment=start]:not([width=auto])) button*/[alignment=start].sc-calcite-button-h:not([width=auto]) a.sc-calcite-button,[alignment=start].sc-calcite-button-h:not([width=auto]) button.sc-calcite-button{justify-content:flex-start}/*!@:host([alignment=end]:not([width=auto])) a,\n:host([alignment=end]:not([width=auto])) button*/[alignment=end].sc-calcite-button-h:not([width=auto]) a.sc-calcite-button,[alignment=end].sc-calcite-button-h:not([width=auto]) button.sc-calcite-button{justify-content:flex-end}/*!@:host([alignment*=space-between]:not([width=auto])) a,\n:host([alignment*=space-between]:not([width=auto])) button*/[alignment*=space-between].sc-calcite-button-h:not([width=auto]) a.sc-calcite-button,[alignment*=space-between].sc-calcite-button-h:not([width=auto]) button.sc-calcite-button{justify-content:space-between}/*!@:host([alignment=icon-start-space-between]:not([width=auto])) .icon--start*/[alignment=icon-start-space-between].sc-calcite-button-h:not([width=auto]) .icon--start.sc-calcite-button{margin-inline-end:auto}/*!@:host([alignment=icon-start-space-between]:not([width=auto])) a,\n:host([alignment=icon-start-space-between]:not([width=auto])) button*/[alignment=icon-start-space-between].sc-calcite-button-h:not([width=auto]) a.sc-calcite-button,[alignment=icon-start-space-between].sc-calcite-button-h:not([width=auto]) button.sc-calcite-button{text-align:unset}/*!@:host([alignment=icon-end-space-between]:not([width=auto])) .icon--end*/[alignment=icon-end-space-between].sc-calcite-button-h:not([width=auto]) .icon--end.sc-calcite-button{margin-inline-start:auto}/*!@:host([alignment=icon-end-space-between]:not([width=auto])) a,\n:host([alignment=icon-end-space-between]:not([width=auto])) button*/[alignment=icon-end-space-between].sc-calcite-button-h:not([width=auto]) a.sc-calcite-button,[alignment=icon-end-space-between].sc-calcite-button-h:not([width=auto]) button.sc-calcite-button{text-align:unset}/*!@:host([alignment=center]) a:not(.content--slotted) .icon--start + .icon--end,\n:host([alignment=center]) button:not(.content--slotted) .icon--start + .icon--end*/[alignment=center].sc-calcite-button-h a.sc-calcite-button:not(.content--slotted) .icon--start.sc-calcite-button+.icon--end.sc-calcite-button,[alignment=center].sc-calcite-button-h button.sc-calcite-button:not(.content--slotted) .icon--start.sc-calcite-button+.icon--end.sc-calcite-button{margin-inline-start:var(--calcite-button-content-margin-internal)}/*!@.icon*/.icon.sc-calcite-button{position:relative;margin:0px;display:inline-flex;font-weight:var(--calcite-font-weight-normal);line-height:inherit}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-button-h[disabled] .sc-calcite-button-s>[calcite-hydrated][disabled],[disabled].sc-calcite-button-h [calcite-hydrated][disabled].sc-calcite-button{opacity:1}/*!@:host([loading]) button,\n:host([loading]) a*/[loading].sc-calcite-button-h button.sc-calcite-button,[loading].sc-calcite-button-h a.sc-calcite-button{opacity:var(--calcite-ui-opacity-disabled)}@keyframes loader-in{0%{inline-size:0;opacity:0;transform:scale(0.5)}100%{inline-size:1em;opacity:1;transform:scale(1)}}@keyframes loader-out{0%{inline-size:1em;opacity:1;transform:scale(1)}100%{inline-size:0;opacity:0;transform:scale(0.5)}}/*!@.calcite-button--loader*/.calcite-button--loader.sc-calcite-button{display:flex}/*!@.calcite-button--loader calcite-loader*/.calcite-button--loader.sc-calcite-button calcite-loader.sc-calcite-button{margin:0px;transition:inline-size var(--calcite-internal-animation-timing-slow) ease-in-out, opacity var(--calcite-internal-animation-timing-slow) ease-in-out, transform var(--calcite-internal-animation-timing-slow) ease-in-out}/*!@.calcite-button--loader calcite-loader.loading-in*/.calcite-button--loader.sc-calcite-button calcite-loader.loading-in.sc-calcite-button{animation-name:loader-in;animation-duration:var(--calcite-internal-animation-timing-slow)}/*!@.calcite-button--loader calcite-loader.loading-out*/.calcite-button--loader.sc-calcite-button calcite-loader.loading-out.sc-calcite-button{animation-name:loader-out;animation-duration:var(--calcite-internal-animation-timing-slow)}/*!@:host([loading]) button.content--slotted .calcite-button--loader calcite-loader,\n:host([loading]) a.content--slotted .calcite-button--loader calcite-loader*/[loading].sc-calcite-button-h button.content--slotted.sc-calcite-button .calcite-button--loader.sc-calcite-button calcite-loader.sc-calcite-button,[loading].sc-calcite-button-h a.content--slotted.sc-calcite-button .calcite-button--loader.sc-calcite-button calcite-loader.sc-calcite-button{margin-inline-end:var(--calcite-button-content-margin-internal)}/*!@:host([loading]) button:not(.content--slotted) .icon--start,\n:host([loading]) button:not(.content--slotted) .icon--end,\n:host([loading]) a:not(.content--slotted) .icon--start,\n:host([loading]) a:not(.content--slotted) .icon--end*/[loading].sc-calcite-button-h button.sc-calcite-button:not(.content--slotted) .icon--start.sc-calcite-button,[loading].sc-calcite-button-h button.sc-calcite-button:not(.content--slotted) .icon--end.sc-calcite-button,[loading].sc-calcite-button-h a.sc-calcite-button:not(.content--slotted) .icon--start.sc-calcite-button,[loading].sc-calcite-button-h a.sc-calcite-button:not(.content--slotted) .icon--end.sc-calcite-button{display:none}/*!@:host([appearance]) button,\n:host([appearance]) a*/[appearance].sc-calcite-button-h button.sc-calcite-button,[appearance].sc-calcite-button-h a.sc-calcite-button{border-width:1px;border-style:solid;border-color:transparent}/*!@:host([kind=brand]) button,\n:host([kind=brand]) a*/[kind=brand].sc-calcite-button-h button.sc-calcite-button,[kind=brand].sc-calcite-button-h a.sc-calcite-button{background-color:var(--calcite-ui-brand);color:var(--calcite-ui-text-inverse)}/*!@:host([kind=brand]) button:hover, :host([kind=brand]) button:focus,\n:host([kind=brand]) a:hover,\n:host([kind=brand]) a:focus*/[kind=brand].sc-calcite-button-h button.sc-calcite-button:hover,[kind=brand].sc-calcite-button-h button.sc-calcite-button:focus,[kind=brand].sc-calcite-button-h a.sc-calcite-button:hover,[kind=brand].sc-calcite-button-h a.sc-calcite-button:focus{background-color:var(--calcite-ui-brand-hover)}/*!@:host([kind=brand]) button:active,\n:host([kind=brand]) a:active*/[kind=brand].sc-calcite-button-h button.sc-calcite-button:active,[kind=brand].sc-calcite-button-h a.sc-calcite-button:active{background-color:var(--calcite-ui-brand-press)}/*!@:host([kind=brand]) button calcite-loader,\n:host([kind=brand]) a calcite-loader*/[kind=brand].sc-calcite-button-h button.sc-calcite-button calcite-loader.sc-calcite-button,[kind=brand].sc-calcite-button-h a.sc-calcite-button calcite-loader.sc-calcite-button{color:var(--calcite-ui-text-inverse)}/*!@:host([kind=danger]) button,\n:host([kind=danger]) a*/[kind=danger].sc-calcite-button-h button.sc-calcite-button,[kind=danger].sc-calcite-button-h a.sc-calcite-button{background-color:var(--calcite-ui-danger);color:var(--calcite-ui-text-inverse)}/*!@:host([kind=danger]) button:hover, :host([kind=danger]) button:focus,\n:host([kind=danger]) a:hover,\n:host([kind=danger]) a:focus*/[kind=danger].sc-calcite-button-h button.sc-calcite-button:hover,[kind=danger].sc-calcite-button-h button.sc-calcite-button:focus,[kind=danger].sc-calcite-button-h a.sc-calcite-button:hover,[kind=danger].sc-calcite-button-h a.sc-calcite-button:focus{background-color:var(--calcite-ui-danger-hover)}/*!@:host([kind=danger]) button:active,\n:host([kind=danger]) a:active*/[kind=danger].sc-calcite-button-h button.sc-calcite-button:active,[kind=danger].sc-calcite-button-h a.sc-calcite-button:active{background-color:var(--calcite-ui-danger-press)}/*!@:host([kind=danger]) button calcite-loader,\n:host([kind=danger]) a calcite-loader*/[kind=danger].sc-calcite-button-h button.sc-calcite-button calcite-loader.sc-calcite-button,[kind=danger].sc-calcite-button-h a.sc-calcite-button calcite-loader.sc-calcite-button{color:var(--calcite-ui-text-inverse)}/*!@:host([kind=neutral]) button,\n:host([kind=neutral]) a*/[kind=neutral].sc-calcite-button-h button.sc-calcite-button,[kind=neutral].sc-calcite-button-h a.sc-calcite-button{background-color:var(--calcite-ui-foreground-3);color:var(--calcite-ui-text-1)}/*!@:host([kind=neutral]) button:hover, :host([kind=neutral]) button:focus,\n:host([kind=neutral]) a:hover,\n:host([kind=neutral]) a:focus*/[kind=neutral].sc-calcite-button-h button.sc-calcite-button:hover,[kind=neutral].sc-calcite-button-h button.sc-calcite-button:focus,[kind=neutral].sc-calcite-button-h a.sc-calcite-button:hover,[kind=neutral].sc-calcite-button-h a.sc-calcite-button:focus{background-color:var(--calcite-ui-foreground-2)}/*!@:host([kind=neutral]) button:active,\n:host([kind=neutral]) a:active*/[kind=neutral].sc-calcite-button-h button.sc-calcite-button:active,[kind=neutral].sc-calcite-button-h a.sc-calcite-button:active{background-color:var(--calcite-ui-foreground-1)}/*!@:host([kind=neutral]) button calcite-loader,\n:host([kind=neutral]) a calcite-loader*/[kind=neutral].sc-calcite-button-h button.sc-calcite-button calcite-loader.sc-calcite-button,[kind=neutral].sc-calcite-button-h a.sc-calcite-button calcite-loader.sc-calcite-button{color:var(--calcite-ui-text-1)}/*!@:host([kind=inverse]) button,\n:host([kind=inverse]) a*/[kind=inverse].sc-calcite-button-h button.sc-calcite-button,[kind=inverse].sc-calcite-button-h a.sc-calcite-button{color:var(--calcite-ui-text-inverse);background-color:var(--calcite-ui-inverse)}/*!@:host([kind=inverse]) button:hover, :host([kind=inverse]) button:focus,\n:host([kind=inverse]) a:hover,\n:host([kind=inverse]) a:focus*/[kind=inverse].sc-calcite-button-h button.sc-calcite-button:hover,[kind=inverse].sc-calcite-button-h button.sc-calcite-button:focus,[kind=inverse].sc-calcite-button-h a.sc-calcite-button:hover,[kind=inverse].sc-calcite-button-h a.sc-calcite-button:focus{background-color:var(--calcite-ui-inverse-hover)}/*!@:host([kind=inverse]) button:active,\n:host([kind=inverse]) a:active*/[kind=inverse].sc-calcite-button-h button.sc-calcite-button:active,[kind=inverse].sc-calcite-button-h a.sc-calcite-button:active{background-color:var(--calcite-ui-inverse-press)}/*!@:host([kind=inverse]) button calcite-loader,\n:host([kind=inverse]) a calcite-loader*/[kind=inverse].sc-calcite-button-h button.sc-calcite-button calcite-loader.sc-calcite-button,[kind=inverse].sc-calcite-button-h a.sc-calcite-button calcite-loader.sc-calcite-button{color:var(--calcite-ui-text-inverse)}/*!@:host([appearance=outline-fill]) button,\n:host([appearance=outline-fill]) a*/[appearance=outline-fill].sc-calcite-button-h button.sc-calcite-button,[appearance=outline-fill].sc-calcite-button-h a.sc-calcite-button{border-width:1px;border-style:solid;background-color:var(--calcite-ui-foreground-1);box-shadow:inset 0 0 0 1px transparent}/*!@:host([appearance=outline-fill][kind=brand]) button,\n:host([appearance=outline-fill][kind=brand]) a*/[appearance=outline-fill][kind=brand].sc-calcite-button-h button.sc-calcite-button,[appearance=outline-fill][kind=brand].sc-calcite-button-h a.sc-calcite-button{border-color:var(--calcite-ui-brand);background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-brand)}/*!@:host([appearance=outline-fill][kind=brand]) button:hover,\n:host([appearance=outline-fill][kind=brand]) a:hover*/[appearance=outline-fill][kind=brand].sc-calcite-button-h button.sc-calcite-button:hover,[appearance=outline-fill][kind=brand].sc-calcite-button-h a.sc-calcite-button:hover{border-color:var(--calcite-ui-brand-hover);color:var(--calcite-ui-brand-hover);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand-hover)}/*!@:host([appearance=outline-fill][kind=brand]) button:focus,\n:host([appearance=outline-fill][kind=brand]) a:focus*/[appearance=outline-fill][kind=brand].sc-calcite-button-h button.sc-calcite-button:focus,[appearance=outline-fill][kind=brand].sc-calcite-button-h a.sc-calcite-button:focus{border-color:var(--calcite-ui-brand);color:var(--calcite-ui-brand);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand)}/*!@:host([appearance=outline-fill][kind=brand]) button:active,\n:host([appearance=outline-fill][kind=brand]) a:active*/[appearance=outline-fill][kind=brand].sc-calcite-button-h button.sc-calcite-button:active,[appearance=outline-fill][kind=brand].sc-calcite-button-h a.sc-calcite-button:active{border-color:var(--calcite-ui-brand-press);color:var(--calcite-ui-brand-press);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand-press)}/*!@:host([appearance=outline-fill][kind=brand]) button calcite-loader,\n:host([appearance=outline-fill][kind=brand]) a calcite-loader*/[appearance=outline-fill][kind=brand].sc-calcite-button-h button.sc-calcite-button calcite-loader.sc-calcite-button,[appearance=outline-fill][kind=brand].sc-calcite-button-h a.sc-calcite-button calcite-loader.sc-calcite-button{color:var(--calcite-ui-brand)}/*!@:host([appearance=outline-fill][kind=danger]) button,\n:host([appearance=outline-fill][kind=danger]) a*/[appearance=outline-fill][kind=danger].sc-calcite-button-h button.sc-calcite-button,[appearance=outline-fill][kind=danger].sc-calcite-button-h a.sc-calcite-button{border-color:var(--calcite-ui-danger);background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-danger)}/*!@:host([appearance=outline-fill][kind=danger]) button:hover,\n:host([appearance=outline-fill][kind=danger]) a:hover*/[appearance=outline-fill][kind=danger].sc-calcite-button-h button.sc-calcite-button:hover,[appearance=outline-fill][kind=danger].sc-calcite-button-h a.sc-calcite-button:hover{border-color:var(--calcite-ui-danger-hover);color:var(--calcite-ui-danger-hover);box-shadow:inset 0 0 0 1px var(--calcite-ui-danger-hover)}/*!@:host([appearance=outline-fill][kind=danger]) button:focus,\n:host([appearance=outline-fill][kind=danger]) a:focus*/[appearance=outline-fill][kind=danger].sc-calcite-button-h button.sc-calcite-button:focus,[appearance=outline-fill][kind=danger].sc-calcite-button-h a.sc-calcite-button:focus{border-color:var(--calcite-ui-danger);color:var(--calcite-ui-danger);box-shadow:inset 0 0 0 2px var(--calcite-ui-danger)}/*!@:host([appearance=outline-fill][kind=danger]) button:active,\n:host([appearance=outline-fill][kind=danger]) a:active*/[appearance=outline-fill][kind=danger].sc-calcite-button-h button.sc-calcite-button:active,[appearance=outline-fill][kind=danger].sc-calcite-button-h a.sc-calcite-button:active{border-color:var(--calcite-ui-danger-press);color:var(--calcite-ui-danger-press);box-shadow:inset 0 0 0 2px var(--calcite-ui-danger-press)}/*!@:host([appearance=outline-fill][kind=danger]) button calcite-loader,\n:host([appearance=outline-fill][kind=danger]) a calcite-loader*/[appearance=outline-fill][kind=danger].sc-calcite-button-h button.sc-calcite-button calcite-loader.sc-calcite-button,[appearance=outline-fill][kind=danger].sc-calcite-button-h a.sc-calcite-button calcite-loader.sc-calcite-button{color:var(--calcite-ui-danger)}/*!@:host([appearance=outline-fill][kind=neutral]) button,\n:host([appearance=outline-fill][kind=neutral]) a*/[appearance=outline-fill][kind=neutral].sc-calcite-button-h button.sc-calcite-button,[appearance=outline-fill][kind=neutral].sc-calcite-button-h a.sc-calcite-button{background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-border-1)}/*!@:host([appearance=outline-fill][kind=neutral]) button:hover,\n:host([appearance=outline-fill][kind=neutral]) a:hover*/[appearance=outline-fill][kind=neutral].sc-calcite-button-h button.sc-calcite-button:hover,[appearance=outline-fill][kind=neutral].sc-calcite-button-h a.sc-calcite-button:hover{box-shadow:inset 0 0 0 1px var(--calcite-ui-foreground-3)}/*!@:host([appearance=outline-fill][kind=neutral]) button:focus,\n:host([appearance=outline-fill][kind=neutral]) a:focus*/[appearance=outline-fill][kind=neutral].sc-calcite-button-h button.sc-calcite-button:focus,[appearance=outline-fill][kind=neutral].sc-calcite-button-h a.sc-calcite-button:focus{box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-3)}/*!@:host([appearance=outline-fill][kind=neutral]) button:active,\n:host([appearance=outline-fill][kind=neutral]) a:active*/[appearance=outline-fill][kind=neutral].sc-calcite-button-h button.sc-calcite-button:active,[appearance=outline-fill][kind=neutral].sc-calcite-button-h a.sc-calcite-button:active{box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-3)}/*!@:host([appearance=outline-fill][kind=neutral]) button calcite-loader,\n:host([appearance=outline-fill][kind=neutral]) a calcite-loader*/[appearance=outline-fill][kind=neutral].sc-calcite-button-h button.sc-calcite-button calcite-loader.sc-calcite-button,[appearance=outline-fill][kind=neutral].sc-calcite-button-h a.sc-calcite-button calcite-loader.sc-calcite-button{color:var(--calcite-ui-text-1)}/*!@:host([appearance=outline-fill][kind=inverse]) button,\n:host([appearance=outline-fill][kind=inverse]) a*/[appearance=outline-fill][kind=inverse].sc-calcite-button-h button.sc-calcite-button,[appearance=outline-fill][kind=inverse].sc-calcite-button-h a.sc-calcite-button{background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-inverse)}/*!@:host([appearance=outline-fill][kind=inverse]) button:hover,\n:host([appearance=outline-fill][kind=inverse]) a:hover*/[appearance=outline-fill][kind=inverse].sc-calcite-button-h button.sc-calcite-button:hover,[appearance=outline-fill][kind=inverse].sc-calcite-button-h a.sc-calcite-button:hover{border-color:var(--calcite-ui-inverse-hover);box-shadow:inset 0 0 0 1px var(--calcite-ui-inverse-hover)}/*!@:host([appearance=outline-fill][kind=inverse]) button:focus,\n:host([appearance=outline-fill][kind=inverse]) a:focus*/[appearance=outline-fill][kind=inverse].sc-calcite-button-h button.sc-calcite-button:focus,[appearance=outline-fill][kind=inverse].sc-calcite-button-h a.sc-calcite-button:focus{border-color:var(--calcite-ui-inverse);box-shadow:inset 0 0 0 2px var(--calcite-ui-inverse)}/*!@:host([appearance=outline-fill][kind=inverse]) button:active,\n:host([appearance=outline-fill][kind=inverse]) a:active*/[appearance=outline-fill][kind=inverse].sc-calcite-button-h button.sc-calcite-button:active,[appearance=outline-fill][kind=inverse].sc-calcite-button-h a.sc-calcite-button:active{border-color:var(--calcite-ui-inverse-press);box-shadow:inset 0 0 0 2px var(--calcite-ui-inverse-press)}/*!@:host([appearance=outline-fill][kind=inverse]) button calcite-loader,\n:host([appearance=outline-fill][kind=inverse]) a calcite-loader*/[appearance=outline-fill][kind=inverse].sc-calcite-button-h button.sc-calcite-button calcite-loader.sc-calcite-button,[appearance=outline-fill][kind=inverse].sc-calcite-button-h a.sc-calcite-button calcite-loader.sc-calcite-button{color:var(--calcite-ui-text-1)}/*!@:host([appearance=outline]) button,\n:host([appearance=outline]) a*/[appearance=outline].sc-calcite-button-h button.sc-calcite-button,[appearance=outline].sc-calcite-button-h a.sc-calcite-button{border-width:1px;border-style:solid;background-color:transparent;box-shadow:inset 0 0 0 1px transparent}/*!@:host([appearance=outline][kind=brand]) button,\n:host([appearance=outline][kind=brand]) a*/[appearance=outline][kind=brand].sc-calcite-button-h button.sc-calcite-button,[appearance=outline][kind=brand].sc-calcite-button-h a.sc-calcite-button{border-color:var(--calcite-ui-brand);background-color:transparent;color:var(--calcite-ui-brand)}/*!@:host([appearance=outline][kind=brand]) button:hover,\n:host([appearance=outline][kind=brand]) a:hover*/[appearance=outline][kind=brand].sc-calcite-button-h button.sc-calcite-button:hover,[appearance=outline][kind=brand].sc-calcite-button-h a.sc-calcite-button:hover{border-color:var(--calcite-ui-brand-hover);color:var(--calcite-ui-brand-hover);box-shadow:inset 0 0 0 1px var(--calcite-ui-brand-hover)}/*!@:host([appearance=outline][kind=brand]) button:focus,\n:host([appearance=outline][kind=brand]) a:focus*/[appearance=outline][kind=brand].sc-calcite-button-h button.sc-calcite-button:focus,[appearance=outline][kind=brand].sc-calcite-button-h a.sc-calcite-button:focus{border-color:var(--calcite-ui-brand);color:var(--calcite-ui-brand);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand)}/*!@:host([appearance=outline][kind=brand]) button:active,\n:host([appearance=outline][kind=brand]) a:active*/[appearance=outline][kind=brand].sc-calcite-button-h button.sc-calcite-button:active,[appearance=outline][kind=brand].sc-calcite-button-h a.sc-calcite-button:active{border-color:var(--calcite-ui-brand-press);color:var(--calcite-ui-brand-press);box-shadow:inset 0 0 0 2px var(--calcite-ui-brand-press)}/*!@:host([appearance=outline][kind=brand]) button calcite-loader,\n:host([appearance=outline][kind=brand]) a calcite-loader*/[appearance=outline][kind=brand].sc-calcite-button-h button.sc-calcite-button calcite-loader.sc-calcite-button,[appearance=outline][kind=brand].sc-calcite-button-h a.sc-calcite-button calcite-loader.sc-calcite-button{color:var(--calcite-ui-brand)}/*!@:host([appearance=outline][kind=danger]) button,\n:host([appearance=outline][kind=danger]) a*/[appearance=outline][kind=danger].sc-calcite-button-h button.sc-calcite-button,[appearance=outline][kind=danger].sc-calcite-button-h a.sc-calcite-button{border-color:var(--calcite-ui-danger);background-color:transparent;color:var(--calcite-ui-danger)}/*!@:host([appearance=outline][kind=danger]) button:hover,\n:host([appearance=outline][kind=danger]) a:hover*/[appearance=outline][kind=danger].sc-calcite-button-h button.sc-calcite-button:hover,[appearance=outline][kind=danger].sc-calcite-button-h a.sc-calcite-button:hover{border-color:var(--calcite-ui-danger-hover);color:var(--calcite-ui-danger-hover);box-shadow:inset 0 0 0 1px var(--calcite-ui-danger-hover)}/*!@:host([appearance=outline][kind=danger]) button:focus,\n:host([appearance=outline][kind=danger]) a:focus*/[appearance=outline][kind=danger].sc-calcite-button-h button.sc-calcite-button:focus,[appearance=outline][kind=danger].sc-calcite-button-h a.sc-calcite-button:focus{border-color:var(--calcite-ui-danger);color:var(--calcite-ui-danger);box-shadow:inset 0 0 0 2px var(--calcite-ui-danger)}/*!@:host([appearance=outline][kind=danger]) button:active,\n:host([appearance=outline][kind=danger]) a:active*/[appearance=outline][kind=danger].sc-calcite-button-h button.sc-calcite-button:active,[appearance=outline][kind=danger].sc-calcite-button-h a.sc-calcite-button:active{border-color:var(--calcite-ui-danger-press);color:var(--calcite-ui-danger-press);box-shadow:inset 0 0 0 2px var(--calcite-ui-danger-press)}/*!@:host([appearance=outline][kind=danger]) button calcite-loader,\n:host([appearance=outline][kind=danger]) a calcite-loader*/[appearance=outline][kind=danger].sc-calcite-button-h button.sc-calcite-button calcite-loader.sc-calcite-button,[appearance=outline][kind=danger].sc-calcite-button-h a.sc-calcite-button calcite-loader.sc-calcite-button{color:var(--calcite-ui-danger)}/*!@:host([appearance=outline][kind=neutral]) button,\n:host([appearance=outline][kind=neutral]) a*/[appearance=outline][kind=neutral].sc-calcite-button-h button.sc-calcite-button,[appearance=outline][kind=neutral].sc-calcite-button-h a.sc-calcite-button{background-color:transparent;color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-border-1)}/*!@:host([appearance=outline][kind=neutral]) button:hover,\n:host([appearance=outline][kind=neutral]) a:hover*/[appearance=outline][kind=neutral].sc-calcite-button-h button.sc-calcite-button:hover,[appearance=outline][kind=neutral].sc-calcite-button-h a.sc-calcite-button:hover{box-shadow:inset 0 0 0 1px var(--calcite-ui-foreground-3)}/*!@:host([appearance=outline][kind=neutral]) button:focus,\n:host([appearance=outline][kind=neutral]) a:focus*/[appearance=outline][kind=neutral].sc-calcite-button-h button.sc-calcite-button:focus,[appearance=outline][kind=neutral].sc-calcite-button-h a.sc-calcite-button:focus{box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-3)}/*!@:host([appearance=outline][kind=neutral]) button:active,\n:host([appearance=outline][kind=neutral]) a:active*/[appearance=outline][kind=neutral].sc-calcite-button-h button.sc-calcite-button:active,[appearance=outline][kind=neutral].sc-calcite-button-h a.sc-calcite-button:active{box-shadow:inset 0 0 0 2px var(--calcite-ui-foreground-3)}/*!@:host([appearance=outline][kind=neutral]) button calcite-loader,\n:host([appearance=outline][kind=neutral]) a calcite-loader*/[appearance=outline][kind=neutral].sc-calcite-button-h button.sc-calcite-button calcite-loader.sc-calcite-button,[appearance=outline][kind=neutral].sc-calcite-button-h a.sc-calcite-button calcite-loader.sc-calcite-button{color:var(--calcite-ui-text-1)}/*!@:host([appearance=outline][kind=inverse]) button,\n:host([appearance=outline][kind=inverse]) a*/[appearance=outline][kind=inverse].sc-calcite-button-h button.sc-calcite-button,[appearance=outline][kind=inverse].sc-calcite-button-h a.sc-calcite-button{background-color:transparent;color:var(--calcite-ui-text-1);border-color:var(--calcite-ui-inverse)}/*!@:host([appearance=outline][kind=inverse]) button:hover,\n:host([appearance=outline][kind=inverse]) a:hover*/[appearance=outline][kind=inverse].sc-calcite-button-h button.sc-calcite-button:hover,[appearance=outline][kind=inverse].sc-calcite-button-h a.sc-calcite-button:hover{border-color:var(--calcite-ui-inverse-hover);box-shadow:inset 0 0 0 1px var(--calcite-ui-inverse-hover)}/*!@:host([appearance=outline][kind=inverse]) button:focus,\n:host([appearance=outline][kind=inverse]) a:focus*/[appearance=outline][kind=inverse].sc-calcite-button-h button.sc-calcite-button:focus,[appearance=outline][kind=inverse].sc-calcite-button-h a.sc-calcite-button:focus{border-color:var(--calcite-ui-inverse);box-shadow:inset 0 0 0 2px var(--calcite-ui-inverse)}/*!@:host([appearance=outline][kind=inverse]) button:active,\n:host([appearance=outline][kind=inverse]) a:active*/[appearance=outline][kind=inverse].sc-calcite-button-h button.sc-calcite-button:active,[appearance=outline][kind=inverse].sc-calcite-button-h a.sc-calcite-button:active{border-color:var(--calcite-ui-inverse-press);box-shadow:inset 0 0 0 2px var(--calcite-ui-inverse-press)}/*!@:host([appearance=outline][kind=inverse]) button calcite-loader,\n:host([appearance=outline][kind=inverse]) a calcite-loader*/[appearance=outline][kind=inverse].sc-calcite-button-h button.sc-calcite-button calcite-loader.sc-calcite-button,[appearance=outline][kind=inverse].sc-calcite-button-h a.sc-calcite-button calcite-loader.sc-calcite-button{color:var(--calcite-ui-text-1)}/*!@:host([appearance=outline-fill][split-child=primary]) button,\n:host([appearance=outline][split-child=primary]) button*/[appearance=outline-fill][split-child=primary].sc-calcite-button-h button.sc-calcite-button,[appearance=outline][split-child=primary].sc-calcite-button-h button.sc-calcite-button{border-inline-end-width:0;border-inline-start-width:1px}/*!@:host([appearance=outline-fill][split-child=secondary]) button,\n:host([appearance=outline][split-child=secondary]) button*/[appearance=outline-fill][split-child=secondary].sc-calcite-button-h button.sc-calcite-button,[appearance=outline][split-child=secondary].sc-calcite-button-h button.sc-calcite-button{border-inline-start-width:0;border-inline-end-width:1px}/*!@:host([appearance=transparent]:not(.enable-editing-button)) button,\n:host([appearance=transparent]:not(.enable-editing-button)) a*/[appearance=transparent].sc-calcite-button-h:not(.enable-editing-button) button.sc-calcite-button,[appearance=transparent].sc-calcite-button-h:not(.enable-editing-button) a.sc-calcite-button{background-color:transparent}/*!@:host([appearance=transparent]:not(.enable-editing-button)) button:hover, :host([appearance=transparent]:not(.enable-editing-button)) button:focus,\n:host([appearance=transparent]:not(.enable-editing-button)) a:hover,\n:host([appearance=transparent]:not(.enable-editing-button)) a:focus*/[appearance=transparent].sc-calcite-button-h:not(.enable-editing-button) button.sc-calcite-button:hover,[appearance=transparent].sc-calcite-button-h:not(.enable-editing-button) button.sc-calcite-button:focus,[appearance=transparent].sc-calcite-button-h:not(.enable-editing-button) a.sc-calcite-button:hover,[appearance=transparent].sc-calcite-button-h:not(.enable-editing-button) a.sc-calcite-button:focus{background-color:var(--calcite-button-transparent-hover)}/*!@:host([appearance=transparent]:not(.enable-editing-button)) button:active,\n:host([appearance=transparent]:not(.enable-editing-button)) a:active*/[appearance=transparent].sc-calcite-button-h:not(.enable-editing-button) button.sc-calcite-button:active,[appearance=transparent].sc-calcite-button-h:not(.enable-editing-button) a.sc-calcite-button:active{background-color:var(--calcite-button-transparent-press)}/*!@:host([appearance=transparent][kind=brand]) button,\n:host([appearance=transparent][kind=brand]) a*/[appearance=transparent][kind=brand].sc-calcite-button-h button.sc-calcite-button,[appearance=transparent][kind=brand].sc-calcite-button-h a.sc-calcite-button{color:var(--calcite-ui-brand)}/*!@:host([appearance=transparent][kind=brand]) button:hover,\n:host([appearance=transparent][kind=brand]) a:hover*/[appearance=transparent][kind=brand].sc-calcite-button-h button.sc-calcite-button:hover,[appearance=transparent][kind=brand].sc-calcite-button-h a.sc-calcite-button:hover{color:var(--calcite-ui-brand-hover)}/*!@:host([appearance=transparent][kind=brand]) button:focus,\n:host([appearance=transparent][kind=brand]) a:focus*/[appearance=transparent][kind=brand].sc-calcite-button-h button.sc-calcite-button:focus,[appearance=transparent][kind=brand].sc-calcite-button-h a.sc-calcite-button:focus{color:var(--calcite-ui-brand)}/*!@:host([appearance=transparent][kind=brand]) button:active,\n:host([appearance=transparent][kind=brand]) a:active*/[appearance=transparent][kind=brand].sc-calcite-button-h button.sc-calcite-button:active,[appearance=transparent][kind=brand].sc-calcite-button-h a.sc-calcite-button:active{color:var(--calcite-ui-brand-press)}/*!@:host([appearance=transparent][kind=brand]) button calcite-loader,\n:host([appearance=transparent][kind=brand]) a calcite-loader*/[appearance=transparent][kind=brand].sc-calcite-button-h button.sc-calcite-button calcite-loader.sc-calcite-button,[appearance=transparent][kind=brand].sc-calcite-button-h a.sc-calcite-button calcite-loader.sc-calcite-button{color:var(--calcite-ui-brand)}/*!@:host([appearance=transparent][kind=danger]) button,\n:host([appearance=transparent][kind=danger]) a*/[appearance=transparent][kind=danger].sc-calcite-button-h button.sc-calcite-button,[appearance=transparent][kind=danger].sc-calcite-button-h a.sc-calcite-button{color:var(--calcite-ui-danger)}/*!@:host([appearance=transparent][kind=danger]) button:hover,\n:host([appearance=transparent][kind=danger]) a:hover*/[appearance=transparent][kind=danger].sc-calcite-button-h button.sc-calcite-button:hover,[appearance=transparent][kind=danger].sc-calcite-button-h a.sc-calcite-button:hover{color:var(--calcite-ui-danger-hover)}/*!@:host([appearance=transparent][kind=danger]) button:focus,\n:host([appearance=transparent][kind=danger]) a:focus*/[appearance=transparent][kind=danger].sc-calcite-button-h button.sc-calcite-button:focus,[appearance=transparent][kind=danger].sc-calcite-button-h a.sc-calcite-button:focus{color:var(--calcite-ui-danger)}/*!@:host([appearance=transparent][kind=danger]) button:active,\n:host([appearance=transparent][kind=danger]) a:active*/[appearance=transparent][kind=danger].sc-calcite-button-h button.sc-calcite-button:active,[appearance=transparent][kind=danger].sc-calcite-button-h a.sc-calcite-button:active{color:var(--calcite-ui-danger-press)}/*!@:host([appearance=transparent][kind=danger]) button calcite-loader,\n:host([appearance=transparent][kind=danger]) a calcite-loader*/[appearance=transparent][kind=danger].sc-calcite-button-h button.sc-calcite-button calcite-loader.sc-calcite-button,[appearance=transparent][kind=danger].sc-calcite-button-h a.sc-calcite-button calcite-loader.sc-calcite-button{color:var(--calcite-ui-danger)}/*!@:host([appearance=transparent][kind=neutral]:not(.cancel-editing-button)) button,\n:host([appearance=transparent][kind=neutral]:not(.cancel-editing-button)) a,\n:host([appearance=transparent][kind=neutral]:not(.cancel-editing-button)) calcite-loader*/[appearance=transparent][kind=neutral].sc-calcite-button-h:not(.cancel-editing-button) button.sc-calcite-button,[appearance=transparent][kind=neutral].sc-calcite-button-h:not(.cancel-editing-button) a.sc-calcite-button,[appearance=transparent][kind=neutral].sc-calcite-button-h:not(.cancel-editing-button) calcite-loader.sc-calcite-button{color:var(--calcite-ui-text-1)}/*!@:host([appearance=transparent][kind=neutral].cancel-editing-button) button*/[appearance=transparent][kind=neutral].cancel-editing-button.sc-calcite-button-h button.sc-calcite-button{border-block-start-width:1px;border-block-end-width:1px;color:var(--calcite-ui-text-3);border-block-start-color:var(--calcite-ui-border-input);border-block-end-color:var(--calcite-ui-border-input);border-block-style:solid}/*!@:host([appearance=transparent][kind=neutral].cancel-editing-button) button:not(.content--slotted)*/[appearance=transparent][kind=neutral].cancel-editing-button.sc-calcite-button-h button.sc-calcite-button:not(.content--slotted){--calcite-button-padding-y-internal:0}/*!@:host([appearance=transparent][kind=neutral].cancel-editing-button) button:hover*/[appearance=transparent][kind=neutral].cancel-editing-button.sc-calcite-button-h button.sc-calcite-button:hover{color:var(--calcite-ui-text-1)}/*!@:host([appearance=transparent][kind=neutral].enable-editing-button) button*/[appearance=transparent][kind=neutral].enable-editing-button.sc-calcite-button-h button.sc-calcite-button{background-color:transparent}/*!@:host(.confirm-changes-button) button:focus,\n:host(.cancel-editing-button) button:focus,\n:host(.enable-editing-button) button:focus*/.confirm-changes-button.sc-calcite-button-h button.sc-calcite-button:focus,.cancel-editing-button.sc-calcite-button-h button.sc-calcite-button:focus,.enable-editing-button.sc-calcite-button-h button.sc-calcite-button:focus{outline-offset:-2px}/*!@:host([appearance=transparent][kind=inverse]) button,\n:host([appearance=transparent][kind=inverse]) a,\n:host([appearance=transparent][kind=inverse]) calcite-loader*/[appearance=transparent][kind=inverse].sc-calcite-button-h button.sc-calcite-button,[appearance=transparent][kind=inverse].sc-calcite-button-h a.sc-calcite-button,[appearance=transparent][kind=inverse].sc-calcite-button-h calcite-loader.sc-calcite-button{color:var(--calcite-ui-text-inverse)}/*!@:host([scale=s]) button.content--slotted,\n:host([scale=s]) a.content--slotted*/[scale=s].sc-calcite-button-h button.content--slotted.sc-calcite-button,[scale=s].sc-calcite-button-h a.content--slotted.sc-calcite-button{font-size:var(--calcite-font-size--2);line-height:1rem}/*!@:host([scale=s][appearance=transparent]) button.content--slotted,\n:host([scale=s][appearance=transparent]) a.content--slotted*/[scale=s][appearance=transparent].sc-calcite-button-h button.content--slotted.sc-calcite-button,[scale=s][appearance=transparent].sc-calcite-button-h a.content--slotted.sc-calcite-button{--calcite-button-padding-x-internal:0.5rem}/*!@:host([scale=s]) button,\n:host([scale=s]) a*/[scale=s].sc-calcite-button-h button.sc-calcite-button,[scale=s].sc-calcite-button-h a.sc-calcite-button{--calcite-button-padding-y-internal:3px}/*!@:host([scale=m]) button.content--slotted,\n:host([scale=m]) a.content--slotted*/[scale=m].sc-calcite-button-h button.content--slotted.sc-calcite-button,[scale=m].sc-calcite-button-h a.content--slotted.sc-calcite-button{--calcite-button-padding-x-internal:11px;font-size:var(--calcite-font-size--1);line-height:1rem}/*!@:host([scale=m]) button,\n:host([scale=m]) a*/[scale=m].sc-calcite-button-h button.sc-calcite-button,[scale=m].sc-calcite-button-h a.sc-calcite-button{--calcite-button-padding-y-internal:7px}/*!@:host([scale=m][appearance=transparent]) button.content--slotted,\n:host([scale=m][appearance=transparent]) a.content--slotted*/[scale=m][appearance=transparent].sc-calcite-button-h button.content--slotted.sc-calcite-button,[scale=m][appearance=transparent].sc-calcite-button-h a.content--slotted.sc-calcite-button{--calcite-button-padding-x-internal:0.75rem}/*!@:host([scale=l]) button.content--slotted,\n:host([scale=l]) a.content--slotted*/[scale=l].sc-calcite-button-h button.content--slotted.sc-calcite-button,[scale=l].sc-calcite-button-h a.content--slotted.sc-calcite-button{--calcite-button-padding-x-internal:15px;font-size:var(--calcite-font-size-0);line-height:1.25rem}/*!@:host([scale=l]) .button-padding*/[scale=l].sc-calcite-button-h .button-padding.sc-calcite-button{--calcite-button-padding-x-internal:1rem;--calcite-button-padding-y-internal:11px}/*!@:host([scale=l]) .button-padding--shrunk*/[scale=l].sc-calcite-button-h .button-padding--shrunk.sc-calcite-button{--calcite-button-padding-y-internal:9px}/*!@:host([scale=s]) button:not(.content--slotted),\n:host([scale=s]) a:not(.content--slotted)*/[scale=s].sc-calcite-button-h button.sc-calcite-button:not(.content--slotted),[scale=s].sc-calcite-button-h a.sc-calcite-button:not(.content--slotted){--calcite-button-padding-x-internal:0.125rem;--calcite-button-padding-y-internal:3px;inline-size:1.5rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;min-block-size:1.5rem}/*!@:host([scale=m]) button:not(.content--slotted),\n:host([scale=m]) a:not(.content--slotted)*/[scale=m].sc-calcite-button-h button.sc-calcite-button:not(.content--slotted),[scale=m].sc-calcite-button-h a.sc-calcite-button:not(.content--slotted){--calcite-button-padding-x-internal:0.125rem;--calcite-button-padding-y-internal:7px;inline-size:2rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;min-block-size:2rem}/*!@:host([scale=l]) button:not(.content--slotted),\n:host([scale=l]) a:not(.content--slotted)*/[scale=l].sc-calcite-button-h button.sc-calcite-button:not(.content--slotted),[scale=l].sc-calcite-button-h a.sc-calcite-button:not(.content--slotted){--calcite-button-padding-x-internal:0.125rem;--calcite-button-padding-y-internal:9px;inline-size:2.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;min-block-size:2.75rem}/*!@:host([scale=l][appearance=transparent]) button:not(.content--slotted),\n:host([scale=l][appearance=transparent]) a:not(.content--slotted)*/[scale=l][appearance=transparent].sc-calcite-button-h button.sc-calcite-button:not(.content--slotted),[scale=l][appearance=transparent].sc-calcite-button-h a.sc-calcite-button:not(.content--slotted){--calcite-button-padding-y-internal:0.625rem}/*!@:host([scale=s][icon-start][icon-end]) button:not(.content--slotted),\n:host([scale=s][icon-start][icon-end]) a:not(.content--slotted)*/[scale=s][icon-start][icon-end].sc-calcite-button-h button.sc-calcite-button:not(.content--slotted),[scale=s][icon-start][icon-end].sc-calcite-button-h a.sc-calcite-button:not(.content--slotted){--calcite-button-padding-x-internal:23px;block-size:1.5rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}/*!@:host([scale=s][icon-start][icon-end][appearance=transparent]) button:not(.content--slotted),\n:host([scale=s][icon-start][icon-end][appearance=transparent]) a:not(.content--slotted)*/[scale=s][icon-start][icon-end][appearance=transparent].sc-calcite-button-h button.sc-calcite-button:not(.content--slotted),[scale=s][icon-start][icon-end][appearance=transparent].sc-calcite-button-h a.sc-calcite-button:not(.content--slotted){--calcite-button-padding-x-internal:1.5rem}/*!@:host([scale=m][icon-start][icon-end]) button:not(.content--slotted),\n:host([scale=m][icon-start][icon-end]) a:not(.content--slotted)*/[scale=m][icon-start][icon-end].sc-calcite-button-h button.sc-calcite-button:not(.content--slotted),[scale=m][icon-start][icon-end].sc-calcite-button-h a.sc-calcite-button:not(.content--slotted){--calcite-button-padding-x-internal:2rem;block-size:2rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}/*!@:host([scale=m][icon-start][icon-end][appearance=transparent]) button:not(.content--slotted),\n:host([scale=m][icon-start][icon-end][appearance=transparent]) a:not(.content--slotted)*/[scale=m][icon-start][icon-end][appearance=transparent].sc-calcite-button-h button.sc-calcite-button:not(.content--slotted),[scale=m][icon-start][icon-end][appearance=transparent].sc-calcite-button-h a.sc-calcite-button:not(.content--slotted){--calcite-button-padding-x-internal:33px}/*!@:host([scale=l][icon-start][icon-end]) button:not(.content--slotted),\n:host([scale=l][icon-start][icon-end]) a:not(.content--slotted)*/[scale=l][icon-start][icon-end].sc-calcite-button-h button.sc-calcite-button:not(.content--slotted),[scale=l][icon-start][icon-end].sc-calcite-button-h a.sc-calcite-button:not(.content--slotted){--calcite-button-padding-x-internal:43px;block-size:2.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}/*!@:host([scale=l][icon-start][icon-end]) button:not(.content--slotted) .icon--start + .icon--end,\n:host([scale=l][icon-start][icon-end]) a:not(.content--slotted) .icon--start + .icon--end*/[scale=l][icon-start][icon-end].sc-calcite-button-h button.sc-calcite-button:not(.content--slotted) .icon--start.sc-calcite-button+.icon--end.sc-calcite-button,[scale=l][icon-start][icon-end].sc-calcite-button-h a.sc-calcite-button:not(.content--slotted) .icon--start.sc-calcite-button+.icon--end.sc-calcite-button{margin-inline-start:1rem}/*!@:host([scale=l][icon-start][icon-end][appearance=transparent]) button:not(.content--slotted),\n:host([scale=l][icon-start][icon-end][appearance=transparent]) a:not(.content--slotted)*/[scale=l][icon-start][icon-end][appearance=transparent].sc-calcite-button-h button.sc-calcite-button:not(.content--slotted),[scale=l][icon-start][icon-end][appearance=transparent].sc-calcite-button-h a.sc-calcite-button:not(.content--slotted){--calcite-button-padding-x-internal:2.75rem}/*!@:host([hidden])*/[hidden].sc-calcite-button-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-button{display:none}";
 
 /** Passing a 'href' will render an anchor link, instead of a button. Role will be set to link, or button, depending on this. */
 /** It is the consumers responsibility to add aria information, rel, target, for links, and any button attributes for form submission */
@@ -12543,7 +12552,7 @@ class CalciteMenuItem {
           ? "chevron-up"
           : "chevron-down"
         : dirChevron, key: CSS$_.dropdownAction, onClick: this.clickHandler, onKeyDown: this.keyDownHandler, text: this.messages.open,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.dropdownActionEl = el) }));
   }
   renderSubmenuItems(dir) {
@@ -12568,7 +12577,7 @@ class CalciteMenuItem {
         [CSS$_.container]: true,
         [CSS$_.isParentVertical]: this.topLevelMenuLayout === "vertical",
       }, role: "none" }, hAsync("div", { class: CSS$_.itemContent }, hAsync("a", { "aria-current": this.isFocused ? "page" : false, "aria-expanded": this.open, "aria-haspopup": this.hasSubmenu, "aria-label": this.label, class: { [CSS$_.layoutVertical]: this.layout === "vertical", [CSS$_.content]: true }, href: this.href, onClick: this.clickHandler, onKeyDown: this.keyDownHandler, rel: this.rel, role: "menuitem", tabIndex: this.isTopLevelItem ? 0 : -1, target: this.target,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.anchorEl = el) }, this.renderItemContent(dir)), this.href && this.hasSubmenu ? this.renderDropdownAction(dir) : null), this.renderSubmenuItems(dir))));
   }
   static get assetsDirs() { return ["assets"]; }
@@ -12746,7 +12755,7 @@ class CalciteNavigation {
   //--------------------------------------------------------------------------
   renderMenuAction() {
     return (hAsync("slot", { name: SLOTS$q.navigationAction, onSlotchange: this.handleMenuActionSlotChange }, this.navigationAction && (hAsync("calcite-action", { icon: ICONS$e.hamburger, onClick: this.actionClickHandler, text: this.label,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.navigationActionEl = el) }))));
   }
   render() {
@@ -13189,7 +13198,7 @@ class Checkbox {
   // --------------------------------------------------------------------------
   render() {
     return (hAsync(Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, hAsync("div", { "aria-checked": toAriaBoolean(this.checked), "aria-label": getLabelText(this), class: "toggle", onBlur: this.onToggleBlur, onFocus: this.onToggleFocus, role: "checkbox", tabIndex: this.disabled ? undefined : 0,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (toggleEl) => (this.toggleEl = toggleEl) }, hAsync("svg", { "aria-hidden": "true", class: "check-svg", viewBox: "0 0 16 16" }, hAsync("path", { d: this.getPath() })), hAsync("slot", null)), hAsync(HiddenFormInputSlot, { component: this })));
   }
   get el() { return getElement(this); }
@@ -13403,7 +13412,7 @@ class Chip {
   }
   renderCloseButton() {
     return (hAsync("button", { "aria-label": this.messages.dismissLabel, class: CSS$V.close, onClick: this.close, onKeyDown: this.closeButtonKeyDownHandler, tabIndex: this.disabled ? -1 : 0,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.closeButtonEl = el) }, hAsync("calcite-icon", { icon: ICONS$d.close, scale: this.scale === "l" ? "m" : "s" })));
   }
   renderIcon() {
@@ -13434,7 +13443,7 @@ class Chip {
           (this.selectionMode === "none" ||
             (!!this.selectionMode && this.selectionMode !== "multiple" && !this.selected)),
       }, onClick: this.handleEmittingEvent, role: role, tabIndex: disableInteraction ? -1 : 0,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.containerEl = el) }, this.selectionMode !== "none" && this.renderSelectionIcon(), this.renderChipImage(), this.icon && this.renderIcon(), hAsync("span", { class: CSS$V.title }, hAsync("slot", null)), this.closable && this.renderCloseButton())));
   }
   static get assetsDirs() { return ["assets"]; }
@@ -13505,7 +13514,7 @@ class ChipGroup {
     };
     this.setSelectedItems = (emit, elToMatch) => {
       if (elToMatch) {
-        this.items.forEach((el) => {
+        this.items?.forEach((el) => {
           const matchingEl = elToMatch === el;
           switch (this.selectionMode) {
             case "multiple":
@@ -13522,7 +13531,7 @@ class ChipGroup {
           }
         });
       }
-      this.selectedItems = this.items.filter((el) => el.selected);
+      this.selectedItems = this.items?.filter((el) => el.selected);
       if (emit) {
         this.calciteChipGroupSelect.emit();
       }
@@ -13565,7 +13574,7 @@ class ChipGroup {
   //--------------------------------------------------------------------------
   calciteInternalChipKeyEventListener(event) {
     if (event.composedPath().includes(this.el)) {
-      const interactiveItems = this.items.filter((el) => !el.disabled);
+      const interactiveItems = this.items?.filter((el) => !el.disabled);
       switch (event.detail.key) {
         case "ArrowRight":
           focusElementInGroup(interactiveItems, event.detail.target, "next");
@@ -13584,18 +13593,18 @@ class ChipGroup {
   }
   calciteChipCloseListener(event) {
     const item = event.target;
-    if (this.items.includes(item)) {
-      if (this.items.indexOf(item) > 0) {
+    if (this.items?.includes(item)) {
+      if (this.items?.indexOf(item) > 0) {
         focusElementInGroup(this.items, item, "previous");
       }
-      else if (this.items.indexOf(item) === 0) {
+      else if (this.items?.indexOf(item) === 0) {
         focusElementInGroup(this.items, item, "next");
       }
       else {
         focusElementInGroup(this.items, item, "first");
       }
     }
-    this.items = this.items.filter((el) => el !== item);
+    this.items = this.items?.filter((el) => el !== item);
   }
   calciteChipSelectListener(event) {
     if (event.composedPath().includes(this.el)) {
@@ -16396,26 +16405,26 @@ class ColorPicker {
     const [adjustedHueScopeLeft, adjustedHueScopeTop] = this.getAdjustedScopePosition(hueLeft, hueTop);
     const [adjustedOpacityScopeLeft, adjustedOpacityScopeTop] = this.getAdjustedScopePosition(opacityLeft, opacityTop);
     return (hAsync("div", { class: CSS$U.container }, hAsync("div", { class: CSS$U.controlAndScope }, hAsync("canvas", { class: CSS$U.colorField, onPointerDown: this.handleColorFieldPointerDown,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.initColorField }), hAsync("div", { "aria-label": vertical ? messages.value : messages.saturation, "aria-valuemax": vertical ? HSV_LIMITS.v : HSV_LIMITS.s, "aria-valuemin": "0", "aria-valuenow": (vertical ? color?.saturationv() : color?.value()) || "0", class: { [CSS$U.scope]: true, [CSS$U.colorFieldScope]: true }, onKeyDown: this.handleColorFieldScopeKeyDown, role: "slider", style: {
         top: `${adjustedColorFieldScopeTop || 0}px`,
         left: `${adjustedColorFieldScopeLeft || 0}px`,
       }, tabindex: "0",
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.storeColorFieldScope })), hAsync("div", { class: CSS$U.previewAndSliders }, hAsync("calcite-color-picker-swatch", { class: CSS$U.preview, color: selectedColorInHex, scale: "l" }), hAsync("div", { class: CSS$U.sliders }, hAsync("div", { class: CSS$U.controlAndScope }, hAsync("canvas", { class: { [CSS$U.slider]: true, [CSS$U.hueSlider]: true }, onPointerDown: this.handleHueSliderPointerDown,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.initHueSlider }), hAsync("div", { "aria-label": messages.hue, "aria-valuemax": HSV_LIMITS.h, "aria-valuemin": "0", "aria-valuenow": color?.round().hue() || DEFAULT_COLOR$1.round().hue(), class: { [CSS$U.scope]: true, [CSS$U.hueScope]: true }, onKeyDown: this.handleHueScopeKeyDown, role: "slider", style: {
         top: `${adjustedHueScopeTop}px`,
         left: `${adjustedHueScopeLeft}px`,
       }, tabindex: "0",
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.storeHueScope })), alphaChannel ? (hAsync("div", { class: CSS$U.controlAndScope }, hAsync("canvas", { class: { [CSS$U.slider]: true, [CSS$U.opacitySlider]: true }, onPointerDown: this.handleOpacitySliderPointerDown,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.initOpacitySlider }), hAsync("div", { "aria-label": messages.opacity, "aria-valuemax": OPACITY_LIMITS.max, "aria-valuemin": OPACITY_LIMITS.min, "aria-valuenow": (color || DEFAULT_COLOR$1).round().alpha(), class: { [CSS$U.scope]: true, [CSS$U.opacityScope]: true }, onKeyDown: this.handleOpacityScopeKeyDown, role: "slider", style: {
         top: `${adjustedOpacityScopeTop}px`,
         left: `${adjustedOpacityScopeLeft}px`,
       }, tabindex: "0",
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.storeOpacityScope }))) : null)), noHex && noChannels ? null : (hAsync("div", { class: {
         [CSS$U.controlSection]: true,
         [CSS$U.section]: true,
@@ -16963,9 +16972,9 @@ class ColorPickerHexInput {
     const opacityInputValue = this.formatOpacityForInternalInput(internalColor);
     const inputScale = scale === "l" ? "m" : "s";
     return (hAsync("div", { class: CSS$T.container }, hAsync("calcite-input-text", { class: CSS$T.hexInput, label: messages?.hex || hexLabel, maxLength: 6, onCalciteInputTextChange: this.onHexInputChange, onCalciteInternalInputTextBlur: this.onHexInputBlur, onKeyDown: this.onInputKeyDown, onPaste: this.onHexInputPaste, prefixText: "#", scale: inputScale, value: hexInputValue,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.storeHexInputRef }), alphaChannel ? (hAsync("calcite-input-number", { class: CSS$T.opacityInput, key: "opacity-input", label: messages?.opacity, max: OPACITY_LIMITS.max, maxLength: 3, min: OPACITY_LIMITS.min, numberButtonType: "none", numberingSystem: this.numberingSystem, onCalciteInputNumberChange: this.onOpacityInputChange, onCalciteInternalInputNumberBlur: this.onOpacityInputBlur, onKeyDown: this.onInputKeyDown, scale: inputScale, suffixText: "%", value: opacityInputValue,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.storeOpacityInputRef })) : null));
   }
   //--------------------------------------------------------------------------
@@ -18878,18 +18887,21 @@ function getDepth$1(element) {
     return 0;
   }
 }
+function isSingleLike(selectionMode) {
+  return selectionMode.includes("single");
+}
 
 const CSS$Q = {
   button: "x-button",
 };
 function XButton({ disabled, key, label, onClick, ref, scale, }) {
   return (hAsync("button", { "aria-label": label, class: CSS$Q.button, disabled: disabled, key: key, onClick: onClick, tabIndex: -1, type: "button", 
-    // eslint-disable-next-line react/jsx-sort-props
+    // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
     ref: ref },
     hAsync("calcite-icon", { icon: "x", scale: scale === "l" ? "m" : "s" })));
 }
 
-const comboboxCss = "/*!@:host([disabled])*/[disabled].sc-calcite-combobox-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-combobox-h *.sc-calcite-combobox,.sc-calcite-combobox-h[disabled] .sc-calcite-combobox-s>*{pointer-events:none}/*!@:host*/.sc-calcite-combobox-h{position:relative;display:block}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-combobox-h[disabled] .sc-calcite-combobox-s>[calcite-hydrated][disabled],[disabled].sc-calcite-combobox-h [calcite-hydrated][disabled].sc-calcite-combobox{opacity:1}/*!@:host([scale=s]) .x-button*/[scale=s].sc-calcite-combobox-h .x-button.sc-calcite-combobox{inline-size:1rem;block-size:1rem}/*!@:host([scale=m]) .x-button*/[scale=m].sc-calcite-combobox-h .x-button.sc-calcite-combobox{inline-size:1.5rem;block-size:1.5rem}/*!@:host([scale=l]) .x-button*/[scale=l].sc-calcite-combobox-h .x-button.sc-calcite-combobox{inline-size:2rem;block-size:2rem}/*!@.x-button*/.x-button.sc-calcite-combobox{margin:0px;display:flex;cursor:pointer;-webkit-appearance:none;appearance:none;align-content:center;align-items:center;justify-content:center;align-self:center;border-width:2px;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-radius:50%;border-color:transparent;background-color:var(--calcite-ui-foreground-2)}/*!@.x-button:active, .x-button:hover*/.x-button.sc-calcite-combobox:active,.x-button.sc-calcite-combobox:hover{color:var(--calcite-ui-text-1);background-color:var(--calcite-ui-foreground-3)}/*!@.x-button:active*/.x-button.sc-calcite-combobox:active{border-style:solid;border-color:var(--calcite-ui-brand)}/*!@.x-button calcite-icon*/.x-button.sc-calcite-combobox calcite-icon.sc-calcite-combobox{color:inherit}/*!@:host([scale=s])*/[scale=s].sc-calcite-combobox-h{font-size:var(--calcite-font-size--2);--calcite-combobox-item-spacing-unit-l:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-input-height:1.5rem}/*!@:host([scale=s]) .x-button*/[scale=s].sc-calcite-combobox-h .x-button.sc-calcite-combobox{margin-inline-end:0.5rem}/*!@:host([scale=m])*/[scale=m].sc-calcite-combobox-h{font-size:var(--calcite-font-size--1);--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.5rem;--calcite-combobox-input-height:2rem}/*!@:host([scale=m]) .x-button*/[scale=m].sc-calcite-combobox-h .x-button.sc-calcite-combobox{margin-inline-end:0.75rem}/*!@:host([scale=l])*/[scale=l].sc-calcite-combobox-h{font-size:var(--calcite-font-size-0);--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.75rem;--calcite-combobox-input-height:2.75rem}/*!@:host([scale=l]) .x-button*/[scale=l].sc-calcite-combobox-h .x-button.sc-calcite-combobox{margin-inline-end:1rem}/*!@.wrapper*/.wrapper.sc-calcite-combobox{display:flex;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-1);outline-color:transparent;padding-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);padding-inline:var(--calcite-combobox-item-spacing-unit-l)}/*!@:host(:focus-within) .wrapper,\n.wrapper--active*/.sc-calcite-combobox-h:focus-within .wrapper.sc-calcite-combobox,.wrapper--active.sc-calcite-combobox{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}/*!@.wrapper--single*/.wrapper--single.sc-calcite-combobox{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l);cursor:pointer;flex-wrap:nowrap}/*!@.grid-input*/.grid-input.sc-calcite-combobox{display:flex;flex-grow:1;flex-wrap:wrap;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px}/*!@.input*/.input.sc-calcite-combobox{flex-grow:1;-webkit-appearance:none;appearance:none;border-style:none;background-color:transparent;padding:0px;font-family:inherit;color:var(--calcite-ui-text-1);font-size:inherit;block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height);min-inline-size:120px;margin-block-end:var(--calcite-combobox-item-spacing-unit-s)}/*!@.input:focus*/.input.sc-calcite-combobox:focus{outline:2px solid transparent;outline-offset:2px}/*!@.input--transparent*/.input--transparent.sc-calcite-combobox{opacity:0}/*!@.input--single*/.input--single.sc-calcite-combobox{margin-block:0px;padding:0px}/*!@.wrapper--active .input-single*/.wrapper--active.sc-calcite-combobox .input-single.sc-calcite-combobox{cursor:text}/*!@.input--hidden*/.input--hidden.sc-calcite-combobox{pointer-events:none;inline-size:0px;min-inline-size:0px;opacity:0}/*!@.input--icon*/.input--icon.sc-calcite-combobox{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l)}/*!@.input-wrap*/.input-wrap.sc-calcite-combobox{display:flex;flex-grow:1}/*!@.input-wrap--single*/.input-wrap--single.sc-calcite-combobox{flex:1 1 0%;overflow:hidden}/*!@.label*/.label.sc-calcite-combobox{pointer-events:none;display:flex;max-inline-size:100%;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px;font-weight:var(--calcite-font-weight-normal);block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height)}/*!@.label--icon*/.label--icon.sc-calcite-combobox{padding-inline:var(--calcite-combobox-item-spacing-unit-l)}/*!@.icon-end,\n.icon-start*/.icon-end.sc-calcite-combobox,.icon-start.sc-calcite-combobox{display:flex;inline-size:1rem;cursor:pointer;align-items:center}/*!@.icon-end*/.icon-end.sc-calcite-combobox{flex:none}/*!@.floating-ui-container*/.floating-ui-container.sc-calcite-combobox{--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown);display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index);visibility:hidden}/*!@.floating-ui-container .calcite-floating-ui-anim*/.floating-ui-container.sc-calcite-combobox .calcite-floating-ui-anim.sc-calcite-combobox{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-app-z-index);border-radius:0.25rem}/*!@.floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim*/.floating-ui-container[data-placement^=bottom].sc-calcite-combobox .calcite-floating-ui-anim.sc-calcite-combobox{transform:translateY(-5px)}/*!@.floating-ui-container[data-placement^=top] .calcite-floating-ui-anim*/.floating-ui-container[data-placement^=top].sc-calcite-combobox .calcite-floating-ui-anim.sc-calcite-combobox{transform:translateY(5px)}/*!@.floating-ui-container[data-placement^=left] .calcite-floating-ui-anim*/.floating-ui-container[data-placement^=left].sc-calcite-combobox .calcite-floating-ui-anim.sc-calcite-combobox{transform:translateX(5px)}/*!@.floating-ui-container[data-placement^=right] .calcite-floating-ui-anim*/.floating-ui-container[data-placement^=right].sc-calcite-combobox .calcite-floating-ui-anim.sc-calcite-combobox{transform:translateX(-5px)}/*!@.floating-ui-container[data-placement] .calcite-floating-ui-anim--active*/.floating-ui-container[data-placement].sc-calcite-combobox .calcite-floating-ui-anim--active.sc-calcite-combobox{opacity:1;transform:translate(0)}/*!@.floating-ui-container--active*/.floating-ui-container--active.sc-calcite-combobox{visibility:visible}@media (forced-colors: active){/*!@.wrapper,\n  .floating-ui-container--active*/.wrapper.sc-calcite-combobox,.floating-ui-container--active.sc-calcite-combobox{border:1px solid canvasText}}/*!@.screen-readers-only*/.screen-readers-only.sc-calcite-combobox{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}/*!@.list-container*/.list-container.sc-calcite-combobox{max-block-size:45vh;overflow-y:auto;background-color:var(--calcite-ui-foreground-1);inline-size:var(--calcite-dropdown-width)}/*!@.list*/.list.sc-calcite-combobox{margin:0px;display:block;padding:0px}/*!@.list--hide*/.list--hide.sc-calcite-combobox{block-size:0px;overflow:hidden}/*!@.chip*/.chip.sc-calcite-combobox{margin-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);margin-inline:0 var(--calcite-combobox-item-spacing-unit-s);max-inline-size:100%}/*!@.chip--active*/.chip--active.sc-calcite-combobox{background-color:var(--calcite-ui-foreground-3)}/*!@.item*/.item.sc-calcite-combobox{display:block}/*!@::slotted(input[slot=hidden-form-input])*/.sc-calcite-combobox-s>input[slot=hidden-form-input]{margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}/*!@:host([hidden])*/[hidden].sc-calcite-combobox-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-combobox{display:none}/*!@::slotted(calcite-combobox-item-group:not(:first-child))*/.sc-calcite-combobox-s>calcite-combobox-item-group:not(:first-child){padding-block-start:var(--calcite-combobox-item-spacing-unit-l)}";
+const comboboxCss = "/*!@:host([disabled])*/[disabled].sc-calcite-combobox-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-combobox-h *.sc-calcite-combobox,.sc-calcite-combobox-h[disabled] .sc-calcite-combobox-s>*{pointer-events:none}/*!@:host*/.sc-calcite-combobox-h{position:relative;display:block}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-combobox-h[disabled] .sc-calcite-combobox-s>[calcite-hydrated][disabled],[disabled].sc-calcite-combobox-h [calcite-hydrated][disabled].sc-calcite-combobox{opacity:1}/*!@:host([scale=s]) .x-button*/[scale=s].sc-calcite-combobox-h .x-button.sc-calcite-combobox{inline-size:1rem;block-size:1rem}/*!@:host([scale=m]) .x-button*/[scale=m].sc-calcite-combobox-h .x-button.sc-calcite-combobox{inline-size:1.5rem;block-size:1.5rem}/*!@:host([scale=l]) .x-button*/[scale=l].sc-calcite-combobox-h .x-button.sc-calcite-combobox{inline-size:2rem;block-size:2rem}/*!@.x-button*/.x-button.sc-calcite-combobox{margin:0px;display:flex;cursor:pointer;-webkit-appearance:none;appearance:none;align-content:center;align-items:center;justify-content:center;align-self:center;border-width:2px;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-radius:50%;border-color:transparent;background-color:var(--calcite-ui-foreground-2)}/*!@.x-button:active, .x-button:hover*/.x-button.sc-calcite-combobox:active,.x-button.sc-calcite-combobox:hover{color:var(--calcite-ui-text-1);background-color:var(--calcite-ui-foreground-3)}/*!@.x-button:active*/.x-button.sc-calcite-combobox:active{border-style:solid;border-color:var(--calcite-ui-brand)}/*!@.x-button calcite-icon*/.x-button.sc-calcite-combobox calcite-icon.sc-calcite-combobox{color:inherit}/*!@:host([scale=s])*/[scale=s].sc-calcite-combobox-h{font-size:var(--calcite-font-size--2);--calcite-combobox-item-spacing-unit-l:0.5rem;--calcite-combobox-item-spacing-unit-s:0.25rem;--calcite-combobox-input-height:1rem;--calcite-internal-combobox-input-margin-block:calc(0.25rem - 1px)}/*!@:host([scale=s]) .x-button*/[scale=s].sc-calcite-combobox-h .x-button.sc-calcite-combobox{margin-inline-end:0.5rem}/*!@:host([scale=m])*/[scale=m].sc-calcite-combobox-h{font-size:var(--calcite-font-size--1);--calcite-combobox-item-spacing-unit-l:0.75rem;--calcite-combobox-item-spacing-unit-s:0.5rem;--calcite-combobox-input-height:1rem;--calcite-internal-combobox-input-margin-block:calc(0.5rem - 1px)}/*!@:host([scale=m]) .x-button*/[scale=m].sc-calcite-combobox-h .x-button.sc-calcite-combobox{margin-inline-end:0.75rem}/*!@:host([scale=l])*/[scale=l].sc-calcite-combobox-h{font-size:var(--calcite-font-size-0);--calcite-combobox-item-spacing-unit-l:1rem;--calcite-combobox-item-spacing-unit-s:0.75rem;--calcite-combobox-input-height:1.5rem;--calcite-internal-combobox-input-margin-block:calc(0.625rem - 1px)}/*!@:host([scale=l]) .x-button*/[scale=l].sc-calcite-combobox-h .x-button.sc-calcite-combobox{margin-inline-end:1rem}/*!@.wrapper*/.wrapper.sc-calcite-combobox{display:flex;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-input);background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-1);outline-color:transparent;padding-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);padding-inline:var(--calcite-combobox-item-spacing-unit-l)}/*!@:host(:focus-within) .wrapper,\n.wrapper--active*/.sc-calcite-combobox-h:focus-within .wrapper.sc-calcite-combobox,.wrapper--active.sc-calcite-combobox{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}/*!@.wrapper--single*/.wrapper--single.sc-calcite-combobox{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l);cursor:pointer;flex-wrap:nowrap}/*!@.grid-input*/.grid-input.sc-calcite-combobox{display:flex;flex-grow:1;flex-wrap:wrap;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px}/*!@.input*/.input.sc-calcite-combobox{flex-grow:1;-webkit-appearance:none;appearance:none;border-style:none;background-color:transparent;padding:0px;font-family:inherit;color:var(--calcite-ui-text-1);font-size:inherit;block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height);min-inline-size:120px;margin-block-end:var(--calcite-combobox-item-spacing-unit-s)}/*!@.input:focus*/.input.sc-calcite-combobox:focus{outline:2px solid transparent;outline-offset:2px}/*!@.input--transparent*/.input--transparent.sc-calcite-combobox{opacity:0}/*!@.input--single*/.input--single.sc-calcite-combobox{padding:0px;margin-block:var(--calcite-internal-combobox-input-margin-block)}/*!@.wrapper--active .input-single*/.wrapper--active.sc-calcite-combobox .input-single.sc-calcite-combobox{cursor:text}/*!@.input--hidden*/.input--hidden.sc-calcite-combobox{pointer-events:none;inline-size:0px;min-inline-size:0px;opacity:0}/*!@.input--icon*/.input--icon.sc-calcite-combobox{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l)}/*!@.input-wrap*/.input-wrap.sc-calcite-combobox{display:flex;flex-grow:1;align-items:center}/*!@.input-wrap--single*/.input-wrap--single.sc-calcite-combobox{flex:1 1 0%;overflow:hidden}/*!@.label*/.label.sc-calcite-combobox{pointer-events:none;display:flex;max-inline-size:100%;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0px;font-weight:var(--calcite-font-weight-normal);block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height)}/*!@.label--icon*/.label--icon.sc-calcite-combobox{padding-inline:var(--calcite-combobox-item-spacing-unit-l)}/*!@.icon-end,\n.icon-start*/.icon-end.sc-calcite-combobox,.icon-start.sc-calcite-combobox{display:flex;inline-size:1rem;cursor:pointer;align-items:center}/*!@.icon-end*/.icon-end.sc-calcite-combobox{flex:none}/*!@.floating-ui-container*/.floating-ui-container.sc-calcite-combobox{--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown);display:block;position:absolute;z-index:var(--calcite-floating-ui-z-index);visibility:hidden}/*!@.floating-ui-container .calcite-floating-ui-anim*/.floating-ui-container.sc-calcite-combobox .calcite-floating-ui-anim.sc-calcite-combobox{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:var(--calcite-app-z-index);border-radius:0.25rem}/*!@.floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim*/.floating-ui-container[data-placement^=bottom].sc-calcite-combobox .calcite-floating-ui-anim.sc-calcite-combobox{transform:translateY(-5px)}/*!@.floating-ui-container[data-placement^=top] .calcite-floating-ui-anim*/.floating-ui-container[data-placement^=top].sc-calcite-combobox .calcite-floating-ui-anim.sc-calcite-combobox{transform:translateY(5px)}/*!@.floating-ui-container[data-placement^=left] .calcite-floating-ui-anim*/.floating-ui-container[data-placement^=left].sc-calcite-combobox .calcite-floating-ui-anim.sc-calcite-combobox{transform:translateX(5px)}/*!@.floating-ui-container[data-placement^=right] .calcite-floating-ui-anim*/.floating-ui-container[data-placement^=right].sc-calcite-combobox .calcite-floating-ui-anim.sc-calcite-combobox{transform:translateX(-5px)}/*!@.floating-ui-container[data-placement] .calcite-floating-ui-anim--active*/.floating-ui-container[data-placement].sc-calcite-combobox .calcite-floating-ui-anim--active.sc-calcite-combobox{opacity:1;transform:translate(0)}/*!@.floating-ui-container--active*/.floating-ui-container--active.sc-calcite-combobox{visibility:visible}@media (forced-colors: active){/*!@.wrapper,\n  .floating-ui-container--active*/.wrapper.sc-calcite-combobox,.floating-ui-container--active.sc-calcite-combobox{border:1px solid canvasText}}/*!@.screen-readers-only*/.screen-readers-only.sc-calcite-combobox{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}/*!@.list-container*/.list-container.sc-calcite-combobox{max-block-size:45vh;overflow-y:auto;background-color:var(--calcite-ui-foreground-1);inline-size:var(--calcite-dropdown-width)}/*!@.list*/.list.sc-calcite-combobox{margin:0px;display:block;padding:0px}/*!@.list--hide*/.list--hide.sc-calcite-combobox{block-size:0px;overflow:hidden}/*!@.chip*/.chip.sc-calcite-combobox{margin-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);margin-inline:0 var(--calcite-combobox-item-spacing-unit-s);max-inline-size:100%}/*!@.chip--active*/.chip--active.sc-calcite-combobox{background-color:var(--calcite-ui-foreground-3)}/*!@.item*/.item.sc-calcite-combobox{display:block}/*!@::slotted(input[slot=hidden-form-input])*/.sc-calcite-combobox-s>input[slot=hidden-form-input]{margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}/*!@:host([hidden])*/[hidden].sc-calcite-combobox-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-combobox{display:none}/*!@::slotted(calcite-combobox-item-group:not(:first-child))*/.sc-calcite-combobox-s>calcite-combobox-item-group:not(:first-child){padding-block-start:var(--calcite-combobox-item-spacing-unit-l)}";
 
 const isGroup = (el) => el.tagName === ComboboxItemGroup$1;
 const itemUidPrefix = "combobox-item-";
@@ -19097,7 +19109,7 @@ class Combobox {
       if (this.allowCustomValues && this.text.trim().length) {
         this.addCustomChip(this.text);
       }
-      if (this.selectionMode === "single") {
+      if (isSingleLike(this.selectionMode)) {
         if (this.textInput) {
           this.textInput.value = "";
         }
@@ -19168,6 +19180,10 @@ class Combobox {
       this.selectedItems = this.getSelectedItems();
       this.filteredItems = this.getFilteredItems();
       this.needsIcon = this.getNeedsIcon();
+      this.items.forEach((item) => {
+        item.selectionMode = this.selectionMode;
+        item.scale = this.scale;
+      });
       if (!this.allowCustomValues) {
         this.setMaxScrollerHeight();
       }
@@ -19254,6 +19270,9 @@ class Combobox {
   overlayPositioningHandler() {
     this.reposition(true);
   }
+  handlePropsChange() {
+    this.updateItems();
+  }
   valueHandler(value) {
     if (!this.internalValueChangeFlag) {
       const items = this.getItems();
@@ -19338,12 +19357,13 @@ class Combobox {
     connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
+    connectLabel(this);
+    connectForm(this);
     this.internalValueChangeFlag = true;
     this.value = this.getValue();
     this.internalValueChangeFlag = false;
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
-    connectLabel(this);
-    connectForm(this);
+    this.updateItems();
     this.setFilteredPlacements();
     this.reposition(true);
     if (this.open) {
@@ -19537,7 +19557,7 @@ class Combobox {
     }));
   }
   getNeedsIcon() {
-    return this.selectionMode === "single" && this.items.some((item) => item.icon);
+    return isSingleLike(this.selectionMode) && this.items.some((item) => item.icon);
   }
   resetText() {
     if (this.textInput) {
@@ -19640,7 +19660,7 @@ class Combobox {
     }
   }
   isMulti() {
-    return this.selectionMode !== "single";
+    return this.selectionMode !== "single" && this.selectionMode !== "single-persist";
   }
   //--------------------------------------------------------------------------
   //
@@ -19662,7 +19682,7 @@ class Combobox {
   }
   renderInput() {
     const { guid, disabled, placeholder, selectionMode, selectedItems, open } = this;
-    const single = selectionMode === "single";
+    const single = isSingleLike(selectionMode);
     const selectedItem = selectedItems[0];
     const showLabel = !open && single && !!selectedItem;
     return (hAsync("span", { class: {
@@ -19678,7 +19698,7 @@ class Combobox {
         "input--hidden": showLabel,
         "input--icon": !!this.placeholderIcon,
       }, disabled: disabled, id: `${inputUidPrefix}${guid}`, key: "input", onBlur: this.comboboxBlurHandler, onFocus: this.comboboxFocusHandler, onInput: this.inputHandler, placeholder: placeholder, type: "text",
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.textInput = el) })));
   }
   renderListBoxOptions() {
@@ -19695,16 +19715,16 @@ class Combobox {
         "floating-ui-container": true,
         "floating-ui-container--active": open,
       },
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: setFloatingEl }, hAsync("div", { class: classes,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: setContainerEl }, hAsync("ul", { class: { list: true, "list--hide": !open } }, hAsync("slot", null)))));
   }
   renderIconStart() {
     const { selectedItems, placeholderIcon, selectionMode, placeholderIconFlipRtl } = this;
     const selectedItem = selectedItems[0];
     const selectedIcon = selectedItem?.icon;
-    const singleSelectionMode = selectionMode === "single";
+    const singleSelectionMode = isSingleLike(selectionMode);
     const iconAtStart = !this.open && selectedItem
       ? !!selectedIcon && singleSelectionMode
       : !!this.placeholderIcon && (!selectedItem || singleSelectionMode);
@@ -19716,14 +19736,14 @@ class Combobox {
   }
   render() {
     const { guid, label, open } = this;
-    const single = this.selectionMode === "single";
+    const single = isSingleLike(this.selectionMode);
     const isClearable = !this.clearDisabled && this.value?.length > 0;
     return (hAsync(Host, { onClick: this.comboboxFocusHandler }, hAsync("div", { "aria-autocomplete": "list", "aria-controls": `${listboxUidPrefix}${guid}`, "aria-expanded": toAriaBoolean(open), "aria-haspopup": "listbox", "aria-label": getLabelText(this), "aria-live": "polite", "aria-owns": `${listboxUidPrefix}${guid}`, class: {
         wrapper: true,
         "wrapper--single": single || !this.selectedItems.length,
         "wrapper--active": open,
       }, onClick: this.clickHandler, onKeyDown: this.keyDownHandler, role: "combobox",
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setReferenceEl }, hAsync("div", { class: "grid-input" }, this.renderIconStart(), !single && this.renderChips(), hAsync("label", { class: "screen-readers-only", htmlFor: `${inputUidPrefix}${guid}`, id: `${labelUidPrefix}${guid}` }, label), this.renderInput()), isClearable ? (hAsync(XButton, { disabled: this.disabled, key: "close-button", label: this.messages.clear, scale: this.scale })) : null, this.renderIconEnd()), hAsync("ul", { "aria-labelledby": `${labelUidPrefix}${guid}`, "aria-multiselectable": "true", class: "screen-readers-only", id: `${listboxUidPrefix}${guid}`, role: "listbox", tabIndex: -1 }, this.renderListBoxOptions()), this.renderFloatingUIContainer(), hAsync(HiddenFormInputSlot, { component: this })));
   }
   static get assetsDirs() { return ["assets"]; }
@@ -19733,6 +19753,8 @@ class Combobox {
     "disabled": ["handleDisabledChange"],
     "maxItems": ["maxItemsHandler"],
     "overlayPositioning": ["overlayPositioningHandler"],
+    "selectionMode": ["handlePropsChange"],
+    "scale": ["handlePropsChange"],
     "value": ["valueHandler"],
     "messageOverrides": ["onMessagesChange"],
     "flipPlacements": ["flipPlacementsHandler"],
@@ -19807,8 +19829,6 @@ class ComboboxItem {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.calciteComboboxItemChange = createEvent(this, "calciteComboboxItemChange", 6);
-    /** Specifies the scale of the combobox-item controlled by parent, defaults to m */
-    this.scale = "m";
     this.itemClickHandler = (event) => {
       event.preventDefault();
       this.toggleSelected();
@@ -19823,6 +19843,8 @@ class ComboboxItem {
     this.textLabel = undefined;
     this.value = undefined;
     this.filterDisabled = undefined;
+    this.selectionMode = "multiple";
+    this.scale = "m";
   }
   selectedWatchHandler() {
     this.calciteComboboxItemChange.emit();
@@ -19834,7 +19856,6 @@ class ComboboxItem {
   // --------------------------------------------------------------------------
   connectedCallback() {
     this.ancestors = getAncestors(this.el);
-    this.scale = getElementProp(this.el, "scale", this.scale);
     connectConditionalSlotComponent(this);
     connectInteractive(this);
   }
@@ -19851,7 +19872,8 @@ class ComboboxItem {
   //
   // --------------------------------------------------------------------------
   toggleSelected() {
-    if (this.disabled) {
+    const isSinglePersistSelect = this.selectionMode === "single-persist";
+    if (this.disabled || (isSinglePersistSelect && this.selected)) {
       return;
     }
     this.selected = !this.selected;
@@ -19886,7 +19908,7 @@ class ComboboxItem {
     return null;
   }
   render() {
-    const isSingleSelect = getElementProp(this.el, "selection-mode", "multiple") === "single";
+    const isSingleSelect = isSingleLike(this.selectionMode);
     const showDot = isSingleSelect && !this.disabled;
     const defaultIcon = isSingleSelect ? "dot" : "check";
     const iconPath = this.disabled ? "circle-disallowed" : defaultIcon;
@@ -19917,11 +19939,13 @@ class ComboboxItem {
       "iconFlipRtl": [516, "icon-flip-rtl"],
       "textLabel": [513, "text-label"],
       "value": [8],
-      "filterDisabled": [516, "filter-disabled"]
+      "filterDisabled": [516, "filter-disabled"],
+      "selectionMode": [513, "selection-mode"],
+      "scale": [1]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": [["disabled", "disabled"], ["selected", "selected"], ["active", "active"], ["guid", "guid"], ["icon", "icon"], ["iconFlipRtl", "icon-flip-rtl"], ["textLabel", "text-label"], ["filterDisabled", "filter-disabled"]]
+    "$attrsToReflect$": [["disabled", "disabled"], ["selected", "selected"], ["active", "active"], ["guid", "guid"], ["icon", "icon"], ["iconFlipRtl", "icon-flip-rtl"], ["textLabel", "text-label"], ["filterDisabled", "filter-disabled"], ["selectionMode", "selection-mode"]]
   }; }
 }
 
@@ -19940,10 +19964,10 @@ class ComboboxItemGroup {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.guid = guid();
-    this.scale = "m";
     this.afterEmptyGroup = false;
     this.ancestors = undefined;
     this.label = undefined;
+    this.scale = "m";
   }
   // --------------------------------------------------------------------------
   //
@@ -19952,7 +19976,6 @@ class ComboboxItemGroup {
   // --------------------------------------------------------------------------
   connectedCallback() {
     this.ancestors = getAncestors(this.el);
-    this.scale = getElementProp(this.el, "scale", this.scale);
   }
   // --------------------------------------------------------------------------
   //
@@ -19972,7 +19995,8 @@ class ComboboxItemGroup {
     "$members$": {
       "afterEmptyGroup": [516, "after-empty-group"],
       "ancestors": [1040],
-      "label": [1]
+      "label": [1],
+      "scale": [1]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -21078,7 +21102,7 @@ class DatePickerMonth {
         "focused--start": isFocusedOnStart,
         "focused--end": !isFocusedOnStart,
       }, currentMonth: currentMonth, dateTimeFormat: this.dateTimeFormat, day: day, disabled: !inRange(date, this.min, this.max), endOfRange: this.isEndOfRange(date), highlighted: this.betweenSelectedRange(date), onCalciteDaySelect: this.daySelect, onCalciteInternalDayHover: this.dayHover, range: !!this.startDate && !!this.endDate && !sameDate(this.startDate, this.endDate), rangeEdge: dayInWeek === 0 ? "start" : dayInWeek === 6 ? "end" : undefined, rangeHover: this.isRangeHover(date), scale: this.scale, selected: this.isSelected(date), startOfRange: this.isStartOfRange(date), value: date,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => {
         // when moving via keyboard, focus must be updated on active date
         if (ref && active && this.activeFocus) {
@@ -21265,7 +21289,7 @@ class DatePickerMonthHeader {
         year: true,
         [CSS$N.yearSuffix]: !!suffix,
       }, inputmode: "numeric", maxlength: "4", minlength: "1", onChange: this.onYearChange, onInput: this.onYearInput, onKeyDown: this.onYearKey, pattern: "\\d*", type: "text", value: localizedYear,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.yearInput = el) }), suffix && hAsync("span", { class: CSS$N.suffix }, suffix))), hAsync("a", { "aria-disabled": `${this.nextMonthDate.getMonth() === activeMonth}`, "aria-label": messages.nextMonth, class: CSS$N.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() {
@@ -21396,6 +21420,7 @@ class Dropdown {
         .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);
       this.updateSelectedItems();
       this.reposition(true);
+      this.items.forEach((item) => (item.scale = this.scale));
     };
     this.updateGroups = (event) => {
       const groups = event.target
@@ -21497,10 +21522,10 @@ class Dropdown {
     this.maxItems = 0;
     this.overlayPositioning = "absolute";
     this.placement = defaultMenuPlacement;
-    this.scale = "m";
     this.selectedItems = [];
     this.type = "click";
     this.width = undefined;
+    this.scale = "m";
   }
   openHandler(value) {
     if (!this.disabled) {
@@ -21530,6 +21555,9 @@ class Dropdown {
   placementHandler() {
     this.reposition(true);
   }
+  handlePropsChange() {
+    this.updateItems();
+  }
   //--------------------------------------------------------------------------
   //
   //  Public Methods
@@ -21554,6 +21582,7 @@ class Dropdown {
       onToggleOpenCloseComponent(this);
     }
     connectInteractive(this);
+    this.updateItems();
   }
   componentWillLoad() {
     setUpLoadableComponent(this);
@@ -21574,15 +21603,15 @@ class Dropdown {
   render() {
     const { open, guid } = this;
     return (hAsync(Host, null, hAsync("div", { class: "calcite-trigger-container", id: `${guid}-menubutton`, onClick: this.openCalciteDropdown, onKeyDown: this.keyDownHandler,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setReferenceEl }, hAsync("slot", { "aria-controls": `${guid}-menu`, "aria-expanded": toAriaBoolean(open), "aria-haspopup": "menu", name: SLOTS$n.dropdownTrigger, onSlotchange: this.updateTriggers })), hAsync("div", { "aria-hidden": toAriaBoolean(!open), class: "calcite-dropdown-wrapper",
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setFloatingEl }, hAsync("div", { "aria-labelledby": `${guid}-menubutton`, class: {
         ["calcite-dropdown-content"]: true,
         [FloatingCSS.animation]: true,
         [FloatingCSS.animationActive]: open,
       }, id: `${guid}-menu`, role: "menu",
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setScrollerAndTransitionEl }, hAsync("slot", { onSlotchange: this.updateGroups })))));
   }
   //--------------------------------------------------------------------------
@@ -21736,7 +21765,8 @@ class Dropdown {
     "flipPlacements": ["flipPlacementsHandler"],
     "maxItems": ["maxItemsHandler"],
     "overlayPositioning": ["overlayPositioningHandler"],
-    "placement": ["placementHandler"]
+    "placement": ["placementHandler"],
+    "scale": ["handlePropsChange"]
   }; }
   static get style() { return dropdownCss; }
   static get cmpMeta() { return {
@@ -21750,23 +21780,30 @@ class Dropdown {
       "maxItems": [514, "max-items"],
       "overlayPositioning": [513, "overlay-positioning"],
       "placement": [513],
-      "scale": [513],
       "selectedItems": [1040],
       "type": [513],
       "width": [513],
+      "scale": [513],
       "setFocus": [64],
       "reposition": [64]
     },
     "$listeners$": [[9, "pointerdown", "closeCalciteDropdownOnClick"], [0, "calciteInternalDropdownCloseRequest", "closeCalciteDropdownOnEvent"], [8, "calciteDropdownOpen", "closeCalciteDropdownOnOpenEvent"], [1, "pointerenter", "pointerEnterHandler"], [1, "pointerleave", "pointerLeaveHandler"], [0, "calciteInternalDropdownItemKeyEvent", "calciteInternalDropdownItemKeyEvent"], [0, "calciteInternalDropdownItemSelect", "handleItemSelect"]],
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": [["open", "open"], ["closeOnSelectDisabled", "close-on-select-disabled"], ["disabled", "disabled"], ["maxItems", "max-items"], ["overlayPositioning", "overlay-positioning"], ["placement", "placement"], ["scale", "scale"], ["type", "type"], ["width", "width"]]
+    "$attrsToReflect$": [["open", "open"], ["closeOnSelectDisabled", "close-on-select-disabled"], ["disabled", "disabled"], ["maxItems", "max-items"], ["overlayPositioning", "overlay-positioning"], ["placement", "placement"], ["type", "type"], ["width", "width"], ["scale", "scale"]]
   }; }
 }
 
 const CSS$M = {
-  containerSmall: "container--s",
-  containerMedium: "container--m",
-  containerLarge: "container--l",
+  container: "container",
+  containerLink: "container--link",
+  containerMulti: "container--multi-selection",
+  containerSingle: "container--single-selection",
+  containerNone: "container--none-selection",
+  icon: "dropdown-item-icon",
+  iconEnd: "dropdown-item-icon-end",
+  iconStart: "dropdown-item-icon-start",
+  itemContent: "dropdown-item-content",
+  link: "dropdown-link",
 };
 
 const dropdownGroupCss = "/*!@:host*/.sc-calcite-dropdown-group-h{position:relative;display:block}/*!@.container*/.container.sc-calcite-dropdown-group{text-align:start}/*!@.container--s*/.container--s.sc-calcite-dropdown-group{font-size:var(--calcite-font-size--2);line-height:1rem}/*!@.container--s .dropdown-title*/.container--s.sc-calcite-dropdown-group .dropdown-title.sc-calcite-dropdown-group{padding:0.5rem}/*!@.container--m*/.container--m.sc-calcite-dropdown-group{font-size:var(--calcite-font-size--1);line-height:1rem}/*!@.container--m .dropdown-title*/.container--m.sc-calcite-dropdown-group .dropdown-title.sc-calcite-dropdown-group{padding:0.75rem}/*!@.container--l*/.container--l.sc-calcite-dropdown-group{font-size:var(--calcite-font-size-0);line-height:1.25rem}/*!@.container--l .dropdown-title*/.container--l.sc-calcite-dropdown-group .dropdown-title.sc-calcite-dropdown-group{padding:1rem}/*!@.dropdown-title*/.dropdown-title.sc-calcite-dropdown-group{margin-block-end:-1px;display:block;cursor:default;overflow-wrap:break-word;border-width:0px;border-block-end-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);font-weight:var(--calcite-font-weight-bold);color:var(--calcite-ui-text-2)}/*!@.dropdown-separator*/.dropdown-separator.sc-calcite-dropdown-group{display:block;block-size:1px;background-color:var(--calcite-ui-border-3)}/*!@:host([hidden])*/[hidden].sc-calcite-dropdown-group-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-dropdown-group{display:none}";
@@ -21778,28 +21815,35 @@ class DropdownGroup {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.calciteInternalDropdownItemChange = createEvent(this, "calciteInternalDropdownItemChange", 6);
+    this.updateItems = () => {
+      Array.from(this.el.querySelectorAll("calcite-dropdown-item")).forEach((item) => (item.selectionMode = this.selectionMode));
+    };
+    this.mutationObserver = createObserver();
     this.groupTitle = undefined;
+    this.scale = "m";
     this.selectionMode = "single";
-    this.scale = undefined;
+  }
+  handlePropsChange() {
+    this.updateItems();
   }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  connectedCallback() {
+    this.updateItems();
+  }
   componentWillLoad() {
     this.groupPosition = this.getGroupPosition();
   }
   render() {
-    const scale = this.scale || getElementProp(this.el, "scale", "m");
     const groupTitle = this.groupTitle ? (hAsync("span", { "aria-hidden": "true", class: "dropdown-title" }, this.groupTitle)) : null;
     const dropdownSeparator = this.groupPosition > 0 ? hAsync("div", { class: "dropdown-separator", role: "separator" }) : null;
     return (hAsync(Host, { "aria-label": this.groupTitle, role: "group" }, hAsync("div", { class: {
-        container: true,
-        [CSS$M.containerSmall]: scale === "s",
-        [CSS$M.containerMedium]: scale === "m",
-        [CSS$M.containerLarge]: scale === "l",
-      }, title: this.groupTitle }, dropdownSeparator, groupTitle, hAsync("slot", null))));
+        [CSS$M.container]: true,
+        [`${CSS$M.container}--${this.scale}`]: true,
+      } }, dropdownSeparator, groupTitle, hAsync("slot", null))));
   }
   //--------------------------------------------------------------------------
   //
@@ -21824,36 +21868,24 @@ class DropdownGroup {
   }
   static get delegatesFocus() { return true; }
   get el() { return getElement(this); }
+  static get watchers() { return {
+    "selectionMode": ["handlePropsChange"]
+  }; }
   static get style() { return dropdownGroupCss; }
   static get cmpMeta() { return {
     "$flags$": 25,
     "$tagName$": "calcite-dropdown-group",
     "$members$": {
       "groupTitle": [513, "group-title"],
-      "selectionMode": [513, "selection-mode"],
-      "scale": [513]
+      "scale": [1],
+      "selectionMode": [513, "selection-mode"]
     },
     "$listeners$": [[0, "calciteInternalDropdownItemSelect", "updateActiveItemOnChange"]],
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": [["groupTitle", "group-title"], ["selectionMode", "selection-mode"], ["scale", "scale"]]
+    "$attrsToReflect$": [["groupTitle", "group-title"], ["selectionMode", "selection-mode"]]
   }; }
 }
 
-const CSS$L = {
-  containerLink: "container--link",
-  containerSmall: "container--s",
-  containerMedium: "container--m",
-  containerLarge: "container--l",
-  containerMulti: "container--multi-selection",
-  containerSingle: "container--single-selection",
-  containerNone: "container--none-selection",
-  icon: "dropdown-item-icon",
-  iconEnd: "dropdown-item-icon-end",
-  iconStart: "dropdown-item-icon-start",
-  itemContent: "dropdown-item-content",
-  link: "dropdown-link",
-};
-
 const dropdownItemCss = "/*!@.container--s*/.container--s.sc-calcite-dropdown-item{padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;padding-inline-end:0.5rem;padding-inline-start:1.5rem}/*!@.container--m*/.container--m.sc-calcite-dropdown-item{padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem;padding-inline-end:0.75rem;padding-inline-start:2rem}/*!@.container--l*/.container--l.sc-calcite-dropdown-item{padding-block:0.625rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;padding-inline-end:1rem;padding-inline-start:2.5rem}/*!@.container--s.container--none-selection*/.container--s.container--none-selection.sc-calcite-dropdown-item{padding-inline-start:0.25rem}/*!@.container--s.container--none-selection .dropdown-link*/.container--s.container--none-selection.sc-calcite-dropdown-item .dropdown-link.sc-calcite-dropdown-item{padding-inline-start:0px}/*!@.container--m.container--none-selection*/.container--m.container--none-selection.sc-calcite-dropdown-item{padding-inline-start:0.5rem}/*!@.container--m.container--none-selection .dropdown-link*/.container--m.container--none-selection.sc-calcite-dropdown-item .dropdown-link.sc-calcite-dropdown-item{padding-inline-start:0px}/*!@.container--l.container--none-selection*/.container--l.container--none-selection.sc-calcite-dropdown-item{padding-inline-start:0.75rem}/*!@.container--l.container--none-selection .dropdown-link*/.container--l.container--none-selection.sc-calcite-dropdown-item .dropdown-link.sc-calcite-dropdown-item{padding-inline-start:0px}/*!@:host*/.sc-calcite-dropdown-item-h{position:relative;display:flex;flex-grow:1;align-items:center}/*!@.container*/.container.sc-calcite-dropdown-item{position:relative;display:flex;flex-grow:1;cursor:pointer;align-items:center;color:var(--calcite-ui-text-3);text-decoration-line:none;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);text-align:start}/*!@.dropdown-item-content*/.dropdown-item-content.sc-calcite-dropdown-item{flex:1 1 auto;padding-block:0.125rem;padding-inline-end:auto;padding-inline-start:0.25rem}/*!@:host,\n.container--link a*/.sc-calcite-dropdown-item-h,.container--link.sc-calcite-dropdown-item a.sc-calcite-dropdown-item{outline-color:transparent}/*!@:host(:focus)*/.sc-calcite-dropdown-item-h:focus{outline:2px solid transparent;outline-offset:2px;outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}/*!@.container--link*/.container--link.sc-calcite-dropdown-item{padding:0px}/*!@.container--link a*/.container--link.sc-calcite-dropdown-item a.sc-calcite-dropdown-item{position:relative;display:flex;flex-grow:1;cursor:pointer;align-items:center;color:var(--calcite-ui-text-3);text-decoration-line:none;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}/*!@.container--s .dropdown-link*/.container--s.sc-calcite-dropdown-item .dropdown-link.sc-calcite-dropdown-item{padding-block:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;padding-inline-end:0.5rem;padding-inline-start:1.5rem}/*!@.container--m .dropdown-link*/.container--m.sc-calcite-dropdown-item .dropdown-link.sc-calcite-dropdown-item{padding-block:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem;padding-inline-end:0.75rem;padding-inline-start:2rem}/*!@.container--l .dropdown-link*/.container--l.sc-calcite-dropdown-item .dropdown-link.sc-calcite-dropdown-item{padding-block:0.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;padding-inline-end:1rem;padding-inline-start:2.5rem}/*!@:host(:hover) .container,\n:host(:active) .container*/.sc-calcite-dropdown-item-h:hover .container.sc-calcite-dropdown-item,.sc-calcite-dropdown-item-h:active .container.sc-calcite-dropdown-item{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1);text-decoration-line:none}/*!@:host(:hover) .container--link .dropdown-link,\n:host(:active) .container--link .dropdown-link*/.sc-calcite-dropdown-item-h:hover .container--link.sc-calcite-dropdown-item .dropdown-link.sc-calcite-dropdown-item,.sc-calcite-dropdown-item-h:active .container--link.sc-calcite-dropdown-item .dropdown-link.sc-calcite-dropdown-item{color:var(--calcite-ui-text-1)}/*!@:host(:focus) .container*/.sc-calcite-dropdown-item-h:focus .container.sc-calcite-dropdown-item{color:var(--calcite-ui-text-1);text-decoration-line:none}/*!@:host(:active) .container*/.sc-calcite-dropdown-item-h:active .container.sc-calcite-dropdown-item{background-color:var(--calcite-ui-foreground-3)}/*!@:host(:hover) .container:before,\n:host(:active) .container:before,\n:host(:focus) .container:before*/.sc-calcite-dropdown-item-h:hover .container.sc-calcite-dropdown-item:before,.sc-calcite-dropdown-item-h:active .container.sc-calcite-dropdown-item:before,.sc-calcite-dropdown-item-h:focus .container.sc-calcite-dropdown-item:before{opacity:1}/*!@:host([selected]) .container:not(.container--none-selection),\n:host([selected]) .container--link .dropdown-link*/[selected].sc-calcite-dropdown-item-h .container.sc-calcite-dropdown-item:not(.container--none-selection),[selected].sc-calcite-dropdown-item-h .container--link.sc-calcite-dropdown-item .dropdown-link.sc-calcite-dropdown-item{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}/*!@:host([selected]) .container:not(.container--none-selection):before,\n:host([selected]) .container--link .dropdown-link:before*/[selected].sc-calcite-dropdown-item-h .container.sc-calcite-dropdown-item:not(.container--none-selection):before,[selected].sc-calcite-dropdown-item-h .container--link.sc-calcite-dropdown-item .dropdown-link.sc-calcite-dropdown-item:before{opacity:1;color:var(--calcite-ui-brand)}/*!@:host([selected]) .container:not(.container--none-selection) calcite-icon,\n:host([selected]) .container--link .dropdown-link calcite-icon*/[selected].sc-calcite-dropdown-item-h .container.sc-calcite-dropdown-item:not(.container--none-selection) calcite-icon.sc-calcite-dropdown-item,[selected].sc-calcite-dropdown-item-h .container--link.sc-calcite-dropdown-item .dropdown-link.sc-calcite-dropdown-item calcite-icon.sc-calcite-dropdown-item{color:var(--calcite-ui-brand)}/*!@.container--multi-selection:before,\n.container--none-selection:before*/.container--multi-selection.sc-calcite-dropdown-item:before,.container--none-selection.sc-calcite-dropdown-item:before{display:none}/*!@.container--s:before*/.container--s.sc-calcite-dropdown-item:before{inset-inline-start:0.5rem}/*!@.container--m:before*/.container--m.sc-calcite-dropdown-item:before{inset-inline-start:0.75rem}/*!@.container--l:before*/.container--l.sc-calcite-dropdown-item:before{inset-inline-start:1rem}/*!@.dropdown-item-icon*/.dropdown-item-icon.sc-calcite-dropdown-item{position:absolute;opacity:0;transition-duration:150ms;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transform:scale(0.9)}/*!@.container--s .dropdown-item-icon*/.container--s.sc-calcite-dropdown-item .dropdown-item-icon.sc-calcite-dropdown-item{inset-inline-start:0.25rem}/*!@.container--m .dropdown-item-icon*/.container--m.sc-calcite-dropdown-item .dropdown-item-icon.sc-calcite-dropdown-item{inset-inline-start:0.5rem}/*!@.container--l .dropdown-item-icon*/.container--l.sc-calcite-dropdown-item .dropdown-item-icon.sc-calcite-dropdown-item{inset-inline-start:0.75rem}/*!@:host(:hover) .dropdown-item-icon*/.sc-calcite-dropdown-item-h:hover .dropdown-item-icon.sc-calcite-dropdown-item{color:var(--calcite-ui-border-1);opacity:1}/*!@:host([selected]) .dropdown-item-icon*/[selected].sc-calcite-dropdown-item-h .dropdown-item-icon.sc-calcite-dropdown-item{color:var(--calcite-ui-brand);opacity:1}/*!@.container--s .dropdown-item-icon-start*/.container--s.sc-calcite-dropdown-item .dropdown-item-icon-start.sc-calcite-dropdown-item{margin-inline-end:0.5rem;margin-inline-start:0.25rem}/*!@.container--s .dropdown-item-icon-end*/.container--s.sc-calcite-dropdown-item .dropdown-item-icon-end.sc-calcite-dropdown-item{margin-inline-start:0.5rem}/*!@.container--m .dropdown-item-icon-start*/.container--m.sc-calcite-dropdown-item .dropdown-item-icon-start.sc-calcite-dropdown-item{margin-inline-end:0.75rem;margin-inline-start:0.25rem}/*!@.container--m .dropdown-item-icon-end*/.container--m.sc-calcite-dropdown-item .dropdown-item-icon-end.sc-calcite-dropdown-item{margin-inline-start:0.75rem}/*!@.container--l .dropdown-item-icon-start*/.container--l.sc-calcite-dropdown-item .dropdown-item-icon-start.sc-calcite-dropdown-item{margin-inline-end:1rem;margin-inline-start:0.25rem}/*!@.container--l .dropdown-item-icon-end*/.container--l.sc-calcite-dropdown-item .dropdown-item-icon-end.sc-calcite-dropdown-item{margin-inline-start:1rem}/*!@:host([hidden])*/[hidden].sc-calcite-dropdown-item-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-dropdown-item{display:none}";
 
 /**
@@ -21866,8 +21898,6 @@ class DropdownItem {
     this.calciteInternalDropdownItemSelect = createEvent(this, "calciteInternalDropdownItemSelect", 6);
     this.calciteInternalDropdownItemKeyEvent = createEvent(this, "calciteInternalDropdownItemKeyEvent", 6);
     this.calciteInternalDropdownCloseRequest = createEvent(this, "calciteInternalDropdownCloseRequest", 6);
-    /** Specifies the scale of dropdown-item controlled by the parent, defaults to m */
-    this.scale = "m";
     this.selected = false;
     this.iconFlipRtl = undefined;
     this.iconStart = undefined;
@@ -21876,6 +21906,8 @@ class DropdownItem {
     this.label = undefined;
     this.rel = undefined;
     this.target = undefined;
+    this.selectionMode = "single";
+    this.scale = "m";
   }
   //--------------------------------------------------------------------------
   //
@@ -21903,11 +21935,10 @@ class DropdownItem {
     this.initialize();
   }
   render() {
-    const scale = getElementProp(this.el, "scale", this.scale);
-    const { href, selectionMode, label, iconFlipRtl } = this;
-    const iconStartEl = (hAsync("calcite-icon", { class: CSS$L.iconStart, flipRtl: iconFlipRtl === "start" || iconFlipRtl === "both", icon: this.iconStart, scale: scale === "l" ? "m" : "s" }));
-    const contentNode = (hAsync("span", { class: CSS$L.itemContent }, hAsync("slot", null)));
-    const iconEndEl = (hAsync("calcite-icon", { class: CSS$L.iconEnd, flipRtl: iconFlipRtl === "end" || iconFlipRtl === "both", icon: this.iconEnd, scale: scale === "l" ? "m" : "s" }));
+    const { href, selectionMode, label, iconFlipRtl, scale } = this;
+    const iconStartEl = (hAsync("calcite-icon", { class: CSS$M.iconStart, flipRtl: iconFlipRtl === "start" || iconFlipRtl === "both", icon: this.iconStart, scale: scale === "l" ? "m" : "s" }));
+    const contentNode = (hAsync("span", { class: CSS$M.itemContent }, hAsync("slot", null)));
+    const iconEndEl = (hAsync("calcite-icon", { class: CSS$M.iconEnd, flipRtl: iconFlipRtl === "end" || iconFlipRtl === "both", icon: this.iconEnd, scale: scale === "l" ? "m" : "s" }));
     const slottedContent = this.iconStart && this.iconEnd
       ? [iconStartEl, contentNode, iconEndEl]
       : this.iconStart
@@ -21915,8 +21946,8 @@ class DropdownItem {
         : this.iconEnd
           ? [contentNode, iconEndEl]
           : contentNode;
-    const contentEl = !href ? (slottedContent) : (hAsync("a", { "aria-label": label, class: CSS$L.link, href: href, rel: this.rel, tabIndex: -1, target: this.target,
-      // eslint-disable-next-line react/jsx-sort-props
+    const contentEl = !href ? (slottedContent) : (hAsync("a", { "aria-label": label, class: CSS$M.link, href: href, rel: this.rel, tabIndex: -1, target: this.target,
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.childLink = el) }, slottedContent));
     const itemRole = href
       ? null
@@ -21927,15 +21958,13 @@ class DropdownItem {
           : "menuitem";
     const itemAria = selectionMode !== "none" ? toAriaBoolean(this.selected) : null;
     return (hAsync(Host, { "aria-checked": itemAria, "aria-label": !href ? label : "", role: itemRole, tabindex: "0" }, hAsync("div", { class: {
-        container: true,
-        [CSS$L.containerLink]: !!href,
-        [CSS$L.containerSmall]: scale === "s",
-        [CSS$L.containerMedium]: scale === "m",
-        [CSS$L.containerLarge]: scale === "l",
-        [CSS$L.containerMulti]: selectionMode === "multiple",
-        [CSS$L.containerSingle]: selectionMode === "single",
-        [CSS$L.containerNone]: selectionMode === "none",
-      } }, selectionMode !== "none" ? (hAsync("calcite-icon", { class: CSS$L.icon, icon: selectionMode === "multiple" ? "check" : "bullet-point", scale: scale === "l" ? "m" : "s" })) : null, contentEl)));
+        [CSS$M.container]: true,
+        [CSS$M.containerLink]: !!href,
+        [`${CSS$M.container}--${scale}`]: true,
+        [CSS$M.containerMulti]: selectionMode === "multiple",
+        [CSS$M.containerSingle]: selectionMode === "single",
+        [CSS$M.containerNone]: selectionMode === "none",
+      } }, selectionMode !== "none" ? (hAsync("calcite-icon", { class: CSS$M.icon, icon: selectionMode === "multiple" ? "check" : "bullet-point", scale: scale === "l" ? "m" : "s" })) : null, contentEl)));
   }
   //--------------------------------------------------------------------------
   //
@@ -21986,7 +22015,6 @@ class DropdownItem {
   //
   //--------------------------------------------------------------------------
   initialize() {
-    this.selectionMode = getElementProp(this.el, "selection-mode", "single");
     this.parentDropdownGroupEl = this.el.closest("calcite-dropdown-group");
     if (this.selectionMode === "none") {
       this.selected = false;
@@ -22033,6 +22061,8 @@ class DropdownItem {
       "label": [1],
       "rel": [513],
       "target": [513],
+      "selectionMode": [1, "selection-mode"],
+      "scale": [1],
       "setFocus": [64]
     },
     "$listeners$": [[0, "click", "onClick"], [0, "keydown", "keyDownHandler"], [16, "calciteInternalDropdownItemChange", "updateActiveItemOnChange"]],
@@ -22041,7 +22071,7 @@ class DropdownItem {
   }; }
 }
 
-const CSS$K = {
+const CSS$L = {
   button: "button",
 };
 const ICONS$c = {
@@ -22102,8 +22132,8 @@ class Fab {
   render() {
     const { appearance, kind, disabled, loading, scale, textEnabled, icon, label, text, iconFlipRtl, } = this;
     const title = !textEnabled ? label || text || null : null;
-    return (hAsync("calcite-button", { appearance: appearance === "solid" ? "solid" : "outline-fill", class: CSS$K.button, disabled: disabled, iconFlipRtl: iconFlipRtl ? "start" : null, iconStart: icon, kind: kind, label: label, loading: loading, round: true, scale: scale, title: title, type: "button", width: "auto",
-      // eslint-disable-next-line react/jsx-sort-props
+    return (hAsync("calcite-button", { appearance: appearance === "solid" ? "solid" : "outline-fill", class: CSS$L.button, disabled: disabled, iconFlipRtl: iconFlipRtl ? "start" : null, iconStart: icon, kind: kind, label: label, loading: loading, round: true, scale: scale, title: title, type: "button", width: "auto",
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (buttonEl) => {
         this.buttonEl = buttonEl;
       } }, this.textEnabled ? this.text : null));
@@ -22132,7 +22162,7 @@ class Fab {
   }; }
 }
 
-const CSS$J = {
+const CSS$K = {
   container: "container",
   searchIcon: "search-icon",
 };
@@ -22261,8 +22291,8 @@ class Filter {
   // --------------------------------------------------------------------------
   render() {
     const { disabled, scale } = this;
-    return (hAsync(Fragment, null, hAsync("div", { class: CSS$J.container }, hAsync("label", null, hAsync("calcite-input", { "aria-label": this.messages.label, clearable: true, disabled: disabled, icon: ICONS$b.search, messageOverrides: { clear: this.messages.clear }, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, scale: scale, type: "text", value: this.value,
-      // eslint-disable-next-line react/jsx-sort-props
+    return (hAsync(Fragment, null, hAsync("div", { class: CSS$K.container }, hAsync("label", null, hAsync("calcite-input", { "aria-label": this.messages.label, clearable: true, disabled: disabled, icon: ICONS$b.search, messageOverrides: { clear: this.messages.clear }, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, scale: scale, type: "text", value: this.value,
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => {
         this.textInput = el;
       } })))));
@@ -22300,7 +22330,7 @@ class Filter {
   }; }
 }
 
-const CSS$I = {
+const CSS$J = {
   frame: "frame",
   frameAdvancing: "frame--advancing",
   frameRetreating: "frame--retreating",
@@ -22367,7 +22397,13 @@ class Flow {
     const beforeBack = lastItem.beforeBack
       ? lastItem.beforeBack
       : () => Promise.resolve();
-    await beforeBack.call(lastItem);
+    try {
+      await beforeBack.call(lastItem);
+    }
+    catch (_error) {
+      // back prevented
+      return;
+    }
     lastItem.remove();
     return lastItem;
   }
@@ -22415,9 +22451,9 @@ class Flow {
   render() {
     const { flowDirection } = this;
     const frameDirectionClasses = {
-      [CSS$I.frame]: true,
-      [CSS$I.frameAdvancing]: flowDirection === "advancing",
-      [CSS$I.frameRetreating]: flowDirection === "retreating",
+      [CSS$J.frame]: true,
+      [CSS$J.frameAdvancing]: flowDirection === "advancing",
+      [CSS$J.frameRetreating]: flowDirection === "retreating",
     };
     return (hAsync("div", { class: frameDirectionClasses }, hAsync("slot", null)));
   }
@@ -22439,7 +22475,7 @@ class Flow {
   }; }
 }
 
-const CSS$H = {
+const CSS$I = {
   actionBarContainer: "action-bar-container",
   backButton: "back-button",
   container: "container",
@@ -22474,7 +22510,7 @@ const SLOTS$m = {
   footerActions: "footer-actions",
 };
 
-const CSS$G = {
+const CSS$H = {
   backButton: "back-button",
 };
 const ICONS$9 = {
@@ -22622,14 +22658,14 @@ class FlowItem {
     const { showBackButton, backButtonClick, messages } = this;
     const label = messages.back;
     const icon = rtl ? ICONS$9.backRight : ICONS$9.backLeft;
-    return showBackButton ? (hAsync("calcite-action", { "aria-label": label, class: CSS$G.backButton, icon: icon, key: "flow-back-button", onClick: backButtonClick, scale: "s", slot: "header-actions-start", text: label, title: label,
-      // eslint-disable-next-line react/jsx-sort-props
+    return showBackButton ? (hAsync("calcite-action", { "aria-label": label, class: CSS$H.backButton, icon: icon, key: "flow-back-button", onClick: backButtonClick, scale: "s", slot: "header-actions-start", text: label, title: label,
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setBackRef })) : null;
   }
   render() {
     const { closable, closed, description, disabled, heading, headingLevel, loading, menuOpen, messages, } = this;
     return (hAsync(Host, null, hAsync("calcite-panel", { closable: closable, closed: closed, description: description, disabled: disabled, heading: heading, headingLevel: headingLevel, loading: loading, menuOpen: menuOpen, messageOverrides: messages, onCalcitePanelClose: this.handlePanelClose, onCalcitePanelScroll: this.handlePanelScroll,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setContainerRef }, this.renderBackButton(), hAsync("slot", { name: SLOTS$l.actionBar, slot: SLOTS$m.actionBar }), hAsync("slot", { name: SLOTS$l.headerActionsStart, slot: SLOTS$m.headerActionsStart }), hAsync("slot", { name: SLOTS$l.headerActionsEnd, slot: SLOTS$m.headerActionsEnd }), hAsync("slot", { name: SLOTS$l.headerContent, slot: SLOTS$m.headerContent }), hAsync("slot", { name: SLOTS$l.headerMenuActions, slot: SLOTS$m.headerMenuActions }), hAsync("slot", { name: SLOTS$l.fab, slot: SLOTS$m.fab }), hAsync("slot", { name: SLOTS$l.footerActions, slot: SLOTS$m.footerActions }), hAsync("slot", { name: SLOTS$l.footer, slot: SLOTS$m.footer }), hAsync("slot", null))));
   }
   static get assetsDirs() { return ["assets"]; }
@@ -22886,7 +22922,7 @@ class Graph {
   }; }
 }
 
-const CSS$F = {
+const CSS$G = {
   handle: "handle",
   handleActivated: "handle--activated",
 };
@@ -23009,8 +23045,8 @@ class Handle {
   render() {
     return (
     // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486
-    hAsync("span", { "aria-label": this.getAriaText("label"), "aria-pressed": toAriaBoolean(this.activated), class: { [CSS$F.handle]: true, [CSS$F.handleActivated]: this.activated }, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, role: "button", tabindex: "0", title: this.messages?.dragHandle,
-      // eslint-disable-next-line react/jsx-sort-props
+    hAsync("span", { "aria-label": this.getAriaText("label"), "aria-pressed": toAriaBoolean(this.activated), class: { [CSS$G.handle]: true, [CSS$G.handleActivated]: this.activated }, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, role: "button", tabindex: "0", title: this.messages?.dragHandle,
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => {
         this.handleButton = el;
       } }, hAsync("calcite-icon", { icon: ICONS$8.drag, scale: "s" })));
@@ -23048,7 +23084,7 @@ class Handle {
   }; }
 }
 
-const CSS$E = {
+const CSS$F = {
   icon: "icon",
   flipRtl: "flip-rtl",
 };
@@ -23096,7 +23132,7 @@ class Icon {
     const semantic = !!textLabel;
     const paths = [].concat(pathData || "");
     return (hAsync(Host, { "aria-hidden": toAriaBoolean(!semantic), "aria-label": semantic ? textLabel : null, role: semantic ? "img" : null }, hAsync("svg", { "aria-hidden": "true", class: {
-        [CSS$E.flipRtl]: dir === "rtl" && flipRtl,
+        [CSS$F.flipRtl]: dir === "rtl" && flipRtl,
         svg: true,
       }, fill: "currentColor", height: "100%", viewBox: `0 0 ${size} ${size}`, width: "100%", xmlns: "http://www.w3.org/2000/svg" }, paths.map((path) => typeof path === "string" ? (hAsync("path", { d: path })) : (hAsync("path", { d: path.d, opacity: "opacity" in path ? path.opacity : 1 }))))));
   }
@@ -23142,7 +23178,7 @@ class Icon {
   }; }
 }
 
-const CSS$D = {
+const CSS$E = {
   wrapper: "wrapper",
   confirmChangesButton: "confirm-changes-button",
   cancelEditingButton: "cancel-editing-button",
@@ -23292,17 +23328,17 @@ class InlineEditable {
     updateHostInteraction(this);
   }
   render() {
-    return (hAsync("div", { class: CSS$D.wrapper, onClick: this.enableEditingHandler, onKeyDown: this.escapeKeyHandler }, hAsync("div", { class: CSS$D.inputWrapper }, hAsync("slot", null)), hAsync("div", { class: CSS$D.controlsWrapper }, hAsync("calcite-button", { appearance: "transparent", class: CSS$D.enableEditingButton, disabled: this.disabled, iconStart: "pencil", kind: "neutral", label: this.messages.enableEditing, onClick: this.enableEditingHandler, scale: this.scale, style: {
+    return (hAsync("div", { class: CSS$E.wrapper, onClick: this.enableEditingHandler, onKeyDown: this.escapeKeyHandler }, hAsync("div", { class: CSS$E.inputWrapper }, hAsync("slot", null)), hAsync("div", { class: CSS$E.controlsWrapper }, hAsync("calcite-button", { appearance: "transparent", class: CSS$E.enableEditingButton, disabled: this.disabled, iconStart: "pencil", kind: "neutral", label: this.messages.enableEditing, onClick: this.enableEditingHandler, scale: this.scale, style: {
         opacity: this.editingEnabled ? "0" : "1",
         width: this.editingEnabled ? "0" : "inherit",
       }, type: "button",
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.enableEditingButton = el) }), this.shouldShowControls && [
-      hAsync("div", { class: CSS$D.cancelEditingButtonWrapper }, hAsync("calcite-button", { appearance: "transparent", class: CSS$D.cancelEditingButton, disabled: this.disabled, iconStart: "x", kind: "neutral", label: this.messages.cancelEditing, onClick: this.cancelEditingHandler, scale: this.scale, type: "button",
-        // eslint-disable-next-line react/jsx-sort-props
+      hAsync("div", { class: CSS$E.cancelEditingButtonWrapper }, hAsync("calcite-button", { appearance: "transparent", class: CSS$E.cancelEditingButton, disabled: this.disabled, iconStart: "x", kind: "neutral", label: this.messages.cancelEditing, onClick: this.cancelEditingHandler, scale: this.scale, type: "button",
+        // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
         ref: (el) => (this.cancelEditingButton = el) })),
-      hAsync("calcite-button", { appearance: "solid", class: CSS$D.confirmChangesButton, disabled: this.disabled, iconStart: "check", kind: "brand", label: this.messages.confirmChanges, loading: this.loading, onClick: this.confirmChangesHandler, scale: this.scale, type: "button",
-        // eslint-disable-next-line react/jsx-sort-props
+      hAsync("calcite-button", { appearance: "solid", class: CSS$E.confirmChangesButton, disabled: this.disabled, iconStart: "check", kind: "brand", label: this.messages.confirmChanges, loading: this.loading, onClick: this.confirmChangesHandler, scale: this.scale, type: "button",
+        // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
         ref: (el) => (this.confirmEditingButton = el) }),
     ])));
   }
@@ -23387,7 +23423,7 @@ class InlineEditable {
   }; }
 }
 
-const CSS$C = {
+const CSS$D = {
   loader: "loader",
   clearButton: "clear-button",
   editingEnabled: "editing-enabled",
@@ -23971,38 +24007,38 @@ class Input {
   // --------------------------------------------------------------------------
   render() {
     const dir = getElementDir(this.el);
-    const loader = (hAsync("div", { class: CSS$C.loader }, hAsync("calcite-progress", { label: this.messages.loading, type: "indeterminate" })));
-    const inputClearButton = (hAsync("button", { "aria-label": this.messages.clear, class: CSS$C.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
-    const iconEl = (hAsync("calcite-icon", { class: CSS$C.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: this.scale === "l" ? "m" : "s" }));
+    const loader = (hAsync("div", { class: CSS$D.loader }, hAsync("calcite-progress", { label: this.messages.loading, type: "indeterminate" })));
+    const inputClearButton = (hAsync("button", { "aria-label": this.messages.clear, class: CSS$D.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
+    const iconEl = (hAsync("calcite-icon", { class: CSS$D.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: this.scale === "l" ? "m" : "s" }));
     const isHorizontalNumberButton = this.numberButtonType === "horizontal";
     const numberButtonsHorizontalUp = (hAsync("button", { "aria-hidden": "true", class: {
-        [CSS$C.numberButtonItem]: true,
-        [CSS$C.buttonItemHorizontal]: isHorizontalNumberButton,
+        [CSS$D.numberButtonItem]: true,
+        [CSS$D.buttonItemHorizontal]: isHorizontalNumberButton,
       }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onPointerDown: this.numberButtonPointerDownHandler, onPointerOut: this.numberButtonPointerUpAndOutHandler, onPointerUp: this.numberButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { icon: "chevron-up", scale: this.scale === "l" ? "m" : "s" })));
     const numberButtonsHorizontalDown = (hAsync("button", { "aria-hidden": "true", class: {
-        [CSS$C.numberButtonItem]: true,
-        [CSS$C.buttonItemHorizontal]: isHorizontalNumberButton,
+        [CSS$D.numberButtonItem]: true,
+        [CSS$D.buttonItemHorizontal]: isHorizontalNumberButton,
       }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.numberButtonPointerDownHandler, onPointerOut: this.numberButtonPointerUpAndOutHandler, onPointerUp: this.numberButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { icon: "chevron-down", scale: this.scale === "l" ? "m" : "s" })));
-    const numberButtonsVertical = (hAsync("div", { class: CSS$C.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
-    const prefixText = hAsync("div", { class: CSS$C.prefix }, this.prefixText);
-    const suffixText = hAsync("div", { class: CSS$C.suffix }, this.suffixText);
+    const numberButtonsVertical = (hAsync("div", { class: CSS$D.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
+    const prefixText = hAsync("div", { class: CSS$D.prefix }, this.prefixText);
+    const suffixText = hAsync("div", { class: CSS$D.suffix }, this.suffixText);
     const localeNumberInput = this.type === "number" ? (hAsync("input", { accept: this.accept, "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: this.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.enterKeyHint, inputMode: this.inputMode, key: "localized-input", maxLength: this.maxLength, minLength: this.minLength, multiple: this.multiple, name: undefined, onBlur: this.inputBlurHandler, onFocus: this.inputFocusHandler, onInput: this.inputNumberInputHandler, onKeyDown: this.inputNumberKeyDownHandler, onKeyUp: this.inputKeyUpHandler, pattern: this.pattern, placeholder: this.placeholder || "", readOnly: this.readOnly, type: "text", value: this.localizedValue,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setChildNumberElRef })) : null;
     const childEl = this.type !== "number"
       ? [
         hAsync(this.childElType, { accept: this.accept, "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: this.autofocus ? true : null, class: {
-            [CSS$C.editingEnabled]: this.editingEnabled,
-            [CSS$C.inlineChild]: !!this.inlineEditableEl,
+            [CSS$D.editingEnabled]: this.editingEnabled,
+            [CSS$D.inlineChild]: !!this.inlineEditableEl,
           }, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.enterKeyHint, inputMode: this.inputMode, max: this.maxString, maxLength: this.maxLength, min: this.minString, minLength: this.minLength, multiple: this.multiple, name: this.name, onBlur: this.inputBlurHandler, onChange: this.inputChangeHandler, onFocus: this.inputFocusHandler, onInput: this.inputInputHandler, onKeyDown: this.inputKeyDownHandler, onKeyUp: this.inputKeyUpHandler, pattern: this.pattern, placeholder: this.placeholder || "", readOnly: this.readOnly, required: this.required ? true : null, step: this.step, tabIndex: this.disabled || (this.inlineEditableEl && !this.editingEnabled) ? -1 : null, type: this.type, value: this.value,
-          // eslint-disable-next-line react/jsx-sort-props
+          // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
           ref: this.setChildElRef }),
-        this.isTextarea ? (hAsync("div", { class: CSS$C.resizeIconWrapper }, hAsync("calcite-icon", { icon: "chevron-down", scale: this.scale === "l" ? "m" : "s" }))) : null,
+        this.isTextarea ? (hAsync("div", { class: CSS$D.resizeIconWrapper }, hAsync("calcite-icon", { icon: "chevron-down", scale: this.scale === "l" ? "m" : "s" }))) : null,
       ]
       : null;
-    return (hAsync(Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, hAsync("div", { class: { [CSS$C.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly
+    return (hAsync(Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, hAsync("div", { class: { [CSS$D.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly
       ? numberButtonsHorizontalDown
-      : null, this.prefixText ? prefixText : null, hAsync("div", { class: CSS$C.wrapper }, localeNumberInput, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), hAsync("div", { class: CSS$C.actionWrapper }, hAsync("slot", { name: SLOTS$k.action })), this.type === "number" && this.numberButtonType === "vertical" && !this.readOnly
+      : null, this.prefixText ? prefixText : null, hAsync("div", { class: CSS$D.wrapper }, localeNumberInput, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), hAsync("div", { class: CSS$D.actionWrapper }, hAsync("slot", { name: SLOTS$k.action })), this.type === "number" && this.numberButtonType === "vertical" && !this.readOnly
       ? numberButtonsVertical
       : null, this.suffixText ? suffixText : null, this.type === "number" && this.numberButtonType === "horizontal" && !this.readOnly
       ? numberButtonsHorizontalUp
@@ -24077,7 +24113,7 @@ class Input {
   }; }
 }
 
-const CSS$B = {
+const CSS$C = {
   assistiveText: "assistive-text",
   menu: "menu-container",
   menuActive: "menu-container--active",
@@ -25509,34 +25545,34 @@ class InputDatePicker {
       useGrouping: false,
     };
     return (hAsync(Host, { onBlur: this.deactivate, onKeyDown: this.keyDownHandler }, this.localeData && (hAsync("div", { class: "input-container" }, hAsync("div", { class: "input-wrapper", onClick: this.onInputWrapperClick,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setStartWrapper }, hAsync("calcite-input", { "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-describedby": this.placeholderTextId, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", class: `input ${this.layout === "vertical" && this.range ? `no-bottom-border` : ``}`, disabled: disabled, icon: "calendar", "number-button-type": "none", numberingSystem: numberingSystem, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.startInputFocus, onFocus: this.startEndInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, role: "combobox", scale: this.scale, type: "text",
-      // eslint-disable-next-line react/jsx-sort-props
-      ref: this.setStartInput }), !this.readOnly && this.renderToggleIcon(this.open && this.focusedInput === "start"), hAsync("span", { "aria-hidden": "true", class: CSS$B.assistiveText, id: this.placeholderTextId }, "Date Format: ", this.localeData?.placeholder)), hAsync("div", { "aria-hidden": toAriaBoolean(!this.open), "aria-label": messages.chooseDate, "aria-live": "polite", "aria-modal": "true", class: {
-        [CSS$B.menu]: true,
-        [CSS$B.menuActive]: this.open,
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+      ref: this.setStartInput }), !this.readOnly && this.renderToggleIcon(this.open && this.focusedInput === "start"), hAsync("span", { "aria-hidden": "true", class: CSS$C.assistiveText, id: this.placeholderTextId }, "Date Format: ", this.localeData?.placeholder)), hAsync("div", { "aria-hidden": toAriaBoolean(!this.open), "aria-label": messages.chooseDate, "aria-live": "polite", "aria-modal": "true", class: {
+        [CSS$C.menu]: true,
+        [CSS$C.menuActive]: this.open,
       }, id: this.dialogId, role: "dialog",
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setFloatingEl }, hAsync("div", { class: {
         ["calendar-picker-wrapper"]: true,
         ["calendar-picker-wrapper--end"]: this.focusedInput === "end",
         [FloatingCSS.animation]: true,
         [FloatingCSS.animationActive]: this.open,
       },
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setTransitionEl }, hAsync("calcite-date-picker", { activeDate: this.datePickerActiveDate, activeRange: this.focusedInput, headingLevel: this.headingLevel, max: this.max, maxAsDate: this.maxAsDate, messageOverrides: this.messageOverrides, min: this.min, minAsDate: this.minAsDate, numberingSystem: numberingSystem, onCalciteDatePickerChange: this.handleDateChange, onCalciteDatePickerRangeChange: this.handleDateRangeChange, proximitySelectionDisabled: this.proximitySelectionDisabled, range: this.range, scale: this.scale, tabIndex: this.open ? undefined : -1, valueAsDate: this.valueAsDate,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setDatePickerRef }))), this.range && this.layout === "horizontal" && (hAsync("div", { class: "horizontal-arrow-container" }, hAsync("calcite-icon", { flipRtl: true, icon: "arrow-right", scale: this.scale === "l" ? "m" : "s" }))), this.range && this.layout === "vertical" && this.scale !== "s" && (hAsync("div", { class: "vertical-arrow-container" }, hAsync("calcite-icon", { icon: "arrow-down", scale: this.scale === "l" ? "m" : "s" }))), this.range && (hAsync("div", { class: "input-wrapper", onClick: this.onInputWrapperClick,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setEndWrapper }, hAsync("calcite-input", { "aria-autocomplete": "none", "aria-controls": this.dialogId, "aria-expanded": toAriaBoolean(this.open), "aria-haspopup": "dialog", class: {
         input: true,
         "border-top-color-one": this.layout === "vertical" && this.range,
       }, disabled: disabled, icon: "calendar", "number-button-type": "none", numberingSystem: numberingSystem, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputBlur: this.calciteInternalInputBlurHandler, onCalciteInternalInputFocus: this.endInputFocus, onFocus: this.startEndInputFocus, placeholder: this.localeData?.placeholder, readOnly: readOnly, role: "combobox", scale: this.scale, type: "text",
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setEndInput }), !this.readOnly && this.renderToggleIcon(this.open && this.focusedInput === "end"))))), hAsync(HiddenFormInputSlot, { component: this })));
   }
   renderToggleIcon(open) {
-    return (hAsync("span", { class: CSS$B.toggleIcon }, hAsync("calcite-icon", { icon: open ? "chevron-up" : "chevron-down", scale: "s" })));
+    return (hAsync("span", { class: CSS$C.toggleIcon }, hAsync("calcite-icon", { icon: open ? "chevron-up" : "chevron-down", scale: "s" })));
   }
   setReferenceEl() {
     const { focusedInput, layout, endWrapper, startWrapper } = this;
@@ -25784,7 +25820,7 @@ class InputMessage {
   }; }
 }
 
-const CSS$A = {
+const CSS$B = {
   loader: "loader",
   clearButton: "clear-button",
   editingEnabled: "editing-enabled",
@@ -26293,27 +26329,27 @@ class InputNumber {
   // --------------------------------------------------------------------------
   render() {
     const dir = getElementDir(this.el);
-    const loader = (hAsync("div", { class: CSS$A.loader }, hAsync("calcite-progress", { label: this.messages.loading, type: "indeterminate" })));
-    const inputClearButton = (hAsync("button", { "aria-label": this.messages.clear, class: CSS$A.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
-    const iconEl = (hAsync("calcite-icon", { class: CSS$A.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: this.scale === "l" ? "m" : "s" }));
+    const loader = (hAsync("div", { class: CSS$B.loader }, hAsync("calcite-progress", { label: this.messages.loading, type: "indeterminate" })));
+    const inputClearButton = (hAsync("button", { "aria-label": this.messages.clear, class: CSS$B.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputValue, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
+    const iconEl = (hAsync("calcite-icon", { class: CSS$B.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: this.scale === "l" ? "m" : "s" }));
     const isHorizontalNumberButton = this.numberButtonType === "horizontal";
     const numberButtonsHorizontalUp = (hAsync("button", { "aria-hidden": "true", class: {
-        [CSS$A.numberButtonItem]: true,
-        [CSS$A.buttonItemHorizontal]: isHorizontalNumberButton,
+        [CSS$B.numberButtonItem]: true,
+        [CSS$B.buttonItemHorizontal]: isHorizontalNumberButton,
       }, "data-adjustment": "up", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerUpAndOutHandler, onPointerUp: this.nudgeButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { icon: "chevron-up", scale: this.scale === "l" ? "m" : "s" })));
     const numberButtonsHorizontalDown = (hAsync("button", { "aria-hidden": "true", class: {
-        [CSS$A.numberButtonItem]: true,
-        [CSS$A.buttonItemHorizontal]: isHorizontalNumberButton,
+        [CSS$B.numberButtonItem]: true,
+        [CSS$B.buttonItemHorizontal]: isHorizontalNumberButton,
       }, "data-adjustment": "down", disabled: this.disabled || this.readOnly, onPointerDown: this.nudgeButtonPointerDownHandler, onPointerOut: this.nudgeButtonPointerUpAndOutHandler, onPointerUp: this.nudgeButtonPointerUpAndOutHandler, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { icon: "chevron-down", scale: this.scale === "l" ? "m" : "s" })));
-    const numberButtonsVertical = (hAsync("div", { class: CSS$A.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
-    const prefixText = hAsync("div", { class: CSS$A.prefix }, this.prefixText);
-    const suffixText = hAsync("div", { class: CSS$A.suffix }, this.suffixText);
+    const numberButtonsVertical = (hAsync("div", { class: CSS$B.numberButtonWrapper }, numberButtonsHorizontalUp, numberButtonsHorizontalDown));
+    const prefixText = hAsync("div", { class: CSS$B.prefix }, this.prefixText);
+    const suffixText = hAsync("div", { class: CSS$B.suffix }, this.suffixText);
     const childEl = (hAsync("input", { "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: this.autofocus ? true : null, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.enterKeyHint, inputMode: this.inputMode, key: "localized-input", maxLength: this.maxLength, minLength: this.minLength, name: undefined, onBlur: this.inputNumberBlurHandler, onFocus: this.inputNumberFocusHandler, onInput: this.inputNumberInputHandler, onKeyDown: this.inputNumberKeyDownHandler, onKeyUp: this.inputNumberKeyUpHandler, placeholder: this.placeholder || "", readOnly: this.readOnly, type: "text", value: this.localizedValue,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setChildNumberElRef }));
-    return (hAsync(Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, hAsync("div", { class: { [CSS$A.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.numberButtonType === "horizontal" && !this.readOnly
+    return (hAsync(Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, hAsync("div", { class: { [CSS$B.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.numberButtonType === "horizontal" && !this.readOnly
       ? numberButtonsHorizontalDown
-      : null, this.prefixText ? prefixText : null, hAsync("div", { class: CSS$A.wrapper }, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), hAsync("div", { class: CSS$A.actionWrapper }, hAsync("slot", { name: SLOTS$j.action })), this.numberButtonType === "vertical" && !this.readOnly ? numberButtonsVertical : null, this.suffixText ? suffixText : null, this.numberButtonType === "horizontal" && !this.readOnly
+      : null, this.prefixText ? prefixText : null, hAsync("div", { class: CSS$B.wrapper }, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), hAsync("div", { class: CSS$B.actionWrapper }, hAsync("slot", { name: SLOTS$j.action })), this.numberButtonType === "vertical" && !this.readOnly ? numberButtonsVertical : null, this.suffixText ? suffixText : null, this.numberButtonType === "horizontal" && !this.readOnly
       ? numberButtonsHorizontalUp
       : null, hAsync(HiddenFormInputSlot, { component: this }))));
   }
@@ -26380,7 +26416,7 @@ class InputNumber {
   }; }
 }
 
-const CSS$z = {
+const CSS$A = {
   loader: "loader",
   clearButton: "clear-button",
   editingEnabled: "editing-enabled",
@@ -26680,18 +26716,18 @@ class InputText {
   // --------------------------------------------------------------------------
   render() {
     const dir = getElementDir(this.el);
-    const loader = (hAsync("div", { class: CSS$z.loader }, hAsync("calcite-progress", { label: this.messages.loading, type: "indeterminate" })));
-    const inputClearButton = (hAsync("button", { "aria-label": this.messages.clear, class: CSS$z.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputTextValue, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
-    const iconEl = (hAsync("calcite-icon", { class: CSS$z.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: this.scale === "l" ? "m" : "s" }));
-    const prefixText = hAsync("div", { class: CSS$z.prefix }, this.prefixText);
-    const suffixText = hAsync("div", { class: CSS$z.suffix }, this.suffixText);
+    const loader = (hAsync("div", { class: CSS$A.loader }, hAsync("calcite-progress", { label: this.messages.loading, type: "indeterminate" })));
+    const inputClearButton = (hAsync("button", { "aria-label": this.messages.clear, class: CSS$A.clearButton, disabled: this.disabled || this.readOnly, onClick: this.clearInputTextValue, tabIndex: -1, type: "button" }, hAsync("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
+    const iconEl = (hAsync("calcite-icon", { class: CSS$A.inputIcon, flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: this.scale === "l" ? "m" : "s" }));
+    const prefixText = hAsync("div", { class: CSS$A.prefix }, this.prefixText);
+    const suffixText = hAsync("div", { class: CSS$A.suffix }, this.suffixText);
     const childEl = (hAsync("input", { "aria-label": getLabelText(this), autocomplete: this.autocomplete, autofocus: this.autofocus ? true : null, class: {
-        [CSS$z.editingEnabled]: this.editingEnabled,
-        [CSS$z.inlineChild]: !!this.inlineEditableEl,
+        [CSS$A.editingEnabled]: this.editingEnabled,
+        [CSS$A.inlineChild]: !!this.inlineEditableEl,
       }, defaultValue: this.defaultValue, disabled: this.disabled ? true : null, enterKeyHint: this.enterKeyHint, inputMode: this.inputMode, maxLength: this.maxLength, minLength: this.minLength, name: this.name, onBlur: this.inputTextBlurHandler, onFocus: this.inputTextFocusHandler, onInput: this.inputTextInputHandler, onKeyDown: this.inputTextKeyDownHandler, pattern: this.pattern, placeholder: this.placeholder || "", readOnly: this.readOnly, required: this.required ? true : null, tabIndex: this.disabled || (this.inlineEditableEl && !this.editingEnabled) ? -1 : null, type: "text", value: this.value,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setChildElRef }));
-    return (hAsync(Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, hAsync("div", { class: { [CSS$z.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.prefixText ? prefixText : null, hAsync("div", { class: CSS$z.wrapper }, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), hAsync("div", { class: CSS$z.actionWrapper }, hAsync("slot", { name: SLOTS$i.action })), this.suffixText ? suffixText : null, hAsync(HiddenFormInputSlot, { component: this }))));
+    return (hAsync(Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, hAsync("div", { class: { [CSS$A.inputWrapper]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.prefixText ? prefixText : null, hAsync("div", { class: CSS$A.wrapper }, childEl, this.isClearable ? inputClearButton : null, this.requestedIcon ? iconEl : null, this.loading ? loader : null), hAsync("div", { class: CSS$A.actionWrapper }, hAsync("slot", { name: SLOTS$i.action })), this.suffixText ? suffixText : null, hAsync(HiddenFormInputSlot, { component: this }))));
   }
   static get assetsDirs() { return ["assets"]; }
   get el() { return getElement(this); }
@@ -26929,7 +26965,7 @@ function toISOTimeString(value, includeSeconds = true) {
   return isoTimeString;
 }
 
-const CSS$y = {
+const CSS$z = {
   toggleIcon: "toggle-icon",
 };
 
@@ -28593,15 +28629,15 @@ class InputTimePicker {
   render() {
     const { disabled, messages, readOnly, dialogId } = this;
     return (hAsync(Host, { onBlur: this.hostBlurHandler, onKeyDown: this.keyDownHandler }, hAsync("div", { class: "input-wrapper", onClick: this.onInputWrapperClick }, hAsync("calcite-input", { "aria-autocomplete": "none", "aria-haspopup": "dialog", disabled: disabled, icon: "clock", id: this.referenceElementId, label: getLabelText(this), lang: this.effectiveLocale, onCalciteInputInput: this.calciteInternalInputInputHandler, onCalciteInternalInputFocus: this.calciteInternalInputFocusHandler, readOnly: readOnly, role: "combobox", scale: this.scale, step: this.step,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setCalciteInputEl }), !this.readOnly && this.renderToggleIcon(this.open)), hAsync("calcite-popover", { focusTrapDisabled: true, id: dialogId, label: messages.chooseTime, lang: this.effectiveLocale, onCalcitePopoverClose: this.popoverCloseHandler, onCalcitePopoverOpen: this.popoverOpenHandler, open: this.open, overlayPositioning: this.overlayPositioning, placement: this.placement, referenceElement: this.referenceElementId, triggerDisabled: true,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setCalcitePopoverEl }, hAsync("calcite-time-picker", { lang: this.effectiveLocale, messageOverrides: this.messageOverrides, numberingSystem: this.numberingSystem, onCalciteInternalTimePickerChange: this.timePickerChangeHandler, scale: this.scale, step: this.step, tabIndex: this.open ? undefined : -1, value: this.value,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setCalciteTimePickerEl })), hAsync(HiddenFormInputSlot, { component: this })));
   }
   renderToggleIcon(open) {
-    return (hAsync("span", { class: CSS$y.toggleIcon }, hAsync("calcite-icon", { icon: open ? "chevron-up" : "chevron-down", scale: "s" })));
+    return (hAsync("span", { class: CSS$z.toggleIcon }, hAsync("calcite-icon", { icon: open ? "chevron-up" : "chevron-down", scale: "s" })));
   }
   static get delegatesFocus() { return true; }
   static get assetsDirs() { return ["assets"]; }
@@ -28804,7 +28840,7 @@ class InputTimeZone {
   }
   render() {
     return (hAsync(Host, null, hAsync("calcite-combobox", { clearDisabled: true, disabled: this.disabled, label: this.messages.chooseTimeZone, lang: this.effectiveLocale, onCalciteComboboxBeforeClose: this.onComboboxBeforeClose, onCalciteComboboxBeforeOpen: this.onComboboxBeforeOpen, onCalciteComboboxChange: this.onComboboxChange, onCalciteComboboxClose: this.onComboboxClose, onCalciteComboboxOpen: this.onComboboxOpen, open: this.open, overlayPositioning: this.overlayPositioning, scale: this.scale, selectionMode: "single",
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setComboboxRef }, this.timeZoneGroups.map((group) => {
       const selected = this.selectedTimeZoneGroup === group;
       const label = group.offsetLabel;
@@ -28845,7 +28881,7 @@ class InputTimeZone {
   }; }
 }
 
-const CSS$x = {
+const CSS$y = {
   container: "container",
 };
 
@@ -28885,7 +28921,7 @@ class Label {
     document.dispatchEvent(new CustomEvent(labelDisconnectedEvent));
   }
   render() {
-    return (hAsync(Host, { onClick: this.labelClickHandler }, hAsync("div", { class: CSS$x.container }, hAsync("slot", null))));
+    return (hAsync(Host, { onClick: this.labelClickHandler }, hAsync("div", { class: CSS$y.container }, hAsync("slot", null))));
   }
   get el() { return getElement(this); }
   static get style() { return labelCss; }
@@ -28971,7 +29007,7 @@ class Link {
       This works around that issue for now.
       */
       download: Tag === "a" && (download === "" || download) ? download : null, href: Tag === "a" && this.href, onClick: this.childElClickHandler, rel: Tag === "a" && this.rel, role: role, tabIndex: tabIndex, target: Tag === "a" && this.target,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.storeTagRef }, this.iconStart ? iconStartEl : null, hAsync("slot", null), this.iconEnd ? iconEndEl : null)));
   }
   //--------------------------------------------------------------------------
@@ -29020,7 +29056,7 @@ class Link {
   }; }
 }
 
-const CSS$w = {
+const CSS$x = {
   container: "container",
   containerBorderSelected: "container--border-selected",
   containerBorderUnselected: "container--border-unselected",
@@ -29087,7 +29123,7 @@ function getDepth(element, includeGroup = false) {
   }
 }
 
-const CSS$v = {
+const CSS$w = {
   container: "container",
   table: "table",
   scrim: "scrim",
@@ -32198,7 +32234,7 @@ function onSortingEnd(activeComponent) {
   getNestedSortableComponents(activeComponent).forEach((component) => inactiveSortableComponentSet.delete(component));
 }
 
-const CSS$u = {
+const CSS$v = {
   container: "container",
   actionsStart: "actions-start",
   contentStart: "content-start",
@@ -32502,7 +32538,11 @@ class List$1 {
   //  Public Methods
   //
   // --------------------------------------------------------------------------
-  /** Sets focus on the component's first focusable element. */
+  /**
+   * Sets focus on the component's first focusable element.
+   *
+   * @returns {Promise<void>}
+   */
   async setFocus() {
     await componentFocusable(this);
     if (this.filterEnabled) {
@@ -32517,9 +32557,9 @@ class List$1 {
   // --------------------------------------------------------------------------
   render() {
     const { loading, label, disabled, dataForFilter, filterEnabled, filterPlaceholder, filterText, hasFilterActionsStart, hasFilterActionsEnd, } = this;
-    return (hAsync("div", { class: CSS$v.container }, this.dragEnabled ? (hAsync("span", { "aria-live": "assertive", class: CSS$v.assistiveText }, this.assistiveText)) : null, loading ? hAsync("calcite-scrim", { class: CSS$v.scrim, loading: loading }) : null, hAsync("table", { "aria-busy": toAriaBoolean(loading), "aria-label": label || "", class: CSS$v.table, onKeyDown: this.handleListKeydown, role: "treegrid" }, filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? (hAsync("thead", null, hAsync("tr", { class: { [CSS$v.sticky]: true } }, hAsync("th", { colSpan: MAX_COLUMNS }, hAsync("calcite-stack", { class: CSS$v.stack }, hAsync("slot", { name: SLOTS$g.filterActionsStart, onSlotchange: this.handleFilterActionsStartSlotChange, slot: SLOTS$f.actionsStart }), hAsync("calcite-filter", { "aria-label": filterPlaceholder, disabled: loading || disabled, items: dataForFilter, onCalciteFilterChange: this.handleFilterChange, placeholder: filterPlaceholder, value: filterText,
-      // eslint-disable-next-line react/jsx-sort-props
-      ref: this.setFilterEl }), hAsync("slot", { name: SLOTS$g.filterActionsEnd, onSlotchange: this.handleFilterActionsEndSlotChange, slot: SLOTS$f.actionsEnd })))))) : null, hAsync("tbody", { class: CSS$v.tableContainer }, hAsync("slot", { onSlotchange: this.handleDefaultSlotChange })))));
+    return (hAsync("div", { class: CSS$w.container }, this.dragEnabled ? (hAsync("span", { "aria-live": "assertive", class: CSS$w.assistiveText }, this.assistiveText)) : null, loading ? hAsync("calcite-scrim", { class: CSS$w.scrim, loading: loading }) : null, hAsync("table", { "aria-busy": toAriaBoolean(loading), "aria-label": label || "", class: CSS$w.table, onKeyDown: this.handleListKeydown, role: "treegrid" }, filterEnabled || hasFilterActionsStart || hasFilterActionsEnd ? (hAsync("thead", null, hAsync("tr", { class: { [CSS$w.sticky]: true } }, hAsync("th", { colSpan: MAX_COLUMNS }, hAsync("calcite-stack", { class: CSS$w.stack }, hAsync("slot", { name: SLOTS$g.filterActionsStart, onSlotchange: this.handleFilterActionsStartSlotChange, slot: SLOTS$f.actionsStart }), hAsync("calcite-filter", { "aria-label": filterPlaceholder, disabled: loading || disabled, items: dataForFilter, onCalciteFilterChange: this.handleFilterChange, placeholder: filterPlaceholder, value: filterText,
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+      ref: this.setFilterEl }), hAsync("slot", { name: SLOTS$g.filterActionsEnd, onSlotchange: this.handleFilterActionsEndSlotChange, slot: SLOTS$f.actionsEnd })))))) : null, hAsync("tbody", { class: CSS$w.tableContainer }, hAsync("slot", { onSlotchange: this.handleDefaultSlotChange })))));
   }
   // --------------------------------------------------------------------------
   //
@@ -32934,47 +32974,47 @@ class ListItem {
     if (selectionMode === "none" || selectionAppearance === "border") {
       return null;
     }
-    return (hAsync("td", { class: CSS$w.selectionContainer, key: "selection-container", onClick: this.itemClicked }, hAsync("calcite-icon", { icon: selected
+    return (hAsync("td", { class: CSS$x.selectionContainer, key: "selection-container", onClick: this.itemClicked }, hAsync("calcite-icon", { icon: selected
         ? selectionMode === "multiple"
           ? ICONS$7.selectedMultiple
           : ICONS$7.selectedSingle
         : ICONS$7.unselected, scale: "s" })));
   }
   renderDragHandle() {
-    return this.dragHandle ? (hAsync("td", { class: CSS$w.dragContainer, key: "drag-handle-container" }, hAsync("calcite-handle", { label: this.label, setPosition: this.setPosition, setSize: this.setSize }))) : null;
+    return this.dragHandle ? (hAsync("td", { class: CSS$x.dragContainer, key: "drag-handle-container" }, hAsync("calcite-handle", { label: this.label, setPosition: this.setPosition, setSize: this.setSize }))) : null;
   }
   renderOpen() {
     const { el, open, openable, parentListEl } = this;
     const dir = getElementDir(el);
-    return openable ? (hAsync("td", { class: CSS$w.openContainer, key: "open-container", onClick: this.toggleOpen }, hAsync("calcite-icon", { icon: open ? ICONS$7.open : dir === "rtl" ? ICONS$7.closedRTL : ICONS$7.closedLTR, scale: "s" }))) : parentListEl?.openable ? (hAsync("td", { class: CSS$w.openContainer, key: "open-container", onClick: this.itemClicked }, hAsync("calcite-icon", { icon: ICONS$7.blank, scale: "s" }))) : null;
+    return openable ? (hAsync("td", { class: CSS$x.openContainer, key: "open-container", onClick: this.toggleOpen }, hAsync("calcite-icon", { icon: open ? ICONS$7.open : dir === "rtl" ? ICONS$7.closedRTL : ICONS$7.closedLTR, scale: "s" }))) : parentListEl?.openable ? (hAsync("td", { class: CSS$x.openContainer, key: "open-container", onClick: this.itemClicked }, hAsync("calcite-icon", { icon: ICONS$7.blank, scale: "s" }))) : null;
   }
   renderActionsStart() {
     const { label, hasActionsStart } = this;
-    return (hAsync("td", { "aria-label": label, class: CSS$w.actionsStart, hidden: !hasActionsStart, key: "actions-start-container", role: "gridcell",
-      // eslint-disable-next-line react/jsx-sort-props
+    return (hAsync("td", { "aria-label": label, class: CSS$x.actionsStart, hidden: !hasActionsStart, key: "actions-start-container", role: "gridcell",
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.actionsStartEl = el) }, hAsync("slot", { name: SLOTS$h.actionsStart, onSlotchange: this.handleActionsStartSlotChange })));
   }
   renderActionsEnd() {
     const { label, hasActionsEnd, closable, messages } = this;
-    return (hAsync("td", { "aria-label": label, class: CSS$w.actionsEnd, hidden: !(hasActionsEnd || closable), key: "actions-end-container", role: "gridcell",
-      // eslint-disable-next-line react/jsx-sort-props
+    return (hAsync("td", { "aria-label": label, class: CSS$x.actionsEnd, hidden: !(hasActionsEnd || closable), key: "actions-end-container", role: "gridcell",
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.actionsEndEl = el) }, hAsync("slot", { name: SLOTS$h.actionsEnd, onSlotchange: this.handleActionsEndSlotChange }), closable ? (hAsync("calcite-action", { appearance: "transparent", icon: ICONS$7.close, key: "close-action", label: messages.close, onClick: this.closeClickHandler, text: messages.close })) : null));
   }
   renderContentStart() {
     const { hasContentStart } = this;
-    return (hAsync("div", { class: CSS$w.contentStart, hidden: !hasContentStart }, hAsync("slot", { name: SLOTS$h.contentStart, onSlotchange: this.handleContentStartSlotChange })));
+    return (hAsync("div", { class: CSS$x.contentStart, hidden: !hasContentStart }, hAsync("slot", { name: SLOTS$h.contentStart, onSlotchange: this.handleContentStartSlotChange })));
   }
   renderCustomContent() {
     const { hasCustomContent } = this;
-    return (hAsync("div", { class: CSS$w.customContent, hidden: !hasCustomContent }, hAsync("slot", { name: SLOTS$h.content, onSlotchange: this.handleContentSlotChange })));
+    return (hAsync("div", { class: CSS$x.customContent, hidden: !hasCustomContent }, hAsync("slot", { name: SLOTS$h.content, onSlotchange: this.handleContentSlotChange })));
   }
   renderContentEnd() {
     const { hasContentEnd } = this;
-    return (hAsync("div", { class: CSS$w.contentEnd, hidden: !hasContentEnd }, hAsync("slot", { name: SLOTS$h.contentEnd, onSlotchange: this.handleContentEndSlotChange })));
+    return (hAsync("div", { class: CSS$x.contentEnd, hidden: !hasContentEnd }, hAsync("slot", { name: SLOTS$h.contentEnd, onSlotchange: this.handleContentEndSlotChange })));
   }
   renderContentProperties() {
     const { label, description, hasCustomContent } = this;
-    return !hasCustomContent && (!!label || !!description) ? (hAsync("div", { class: CSS$w.content, key: "content" }, label ? (hAsync("div", { class: CSS$w.label, key: "label" }, label)) : null, description ? (hAsync("div", { class: CSS$w.description, key: "description" }, description)) : null)) : null;
+    return !hasCustomContent && (!!label || !!description) ? (hAsync("div", { class: CSS$x.content, key: "content" }, label ? (hAsync("div", { class: CSS$x.label, key: "label" }, label)) : null, description ? (hAsync("div", { class: CSS$x.description, key: "description" }, description)) : null)) : null;
   }
   renderContentContainer() {
     const { description, label, selectionMode, hasCustomContent } = this;
@@ -32986,11 +33026,11 @@ class ListItem {
       this.renderContentEnd(),
     ];
     return (hAsync("td", { "aria-label": label, class: {
-        [CSS$w.contentContainer]: true,
-        [CSS$w.contentContainerSelectable]: selectionMode !== "none",
-        [CSS$w.contentContainerHasCenterContent]: hasCenterContent,
+        [CSS$x.contentContainer]: true,
+        [CSS$x.contentContainerSelectable]: selectionMode !== "none",
+        [CSS$x.contentContainerHasCenterContent]: hasCenterContent,
       }, key: "content-container", onClick: this.itemClicked, role: "gridcell",
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.contentEl = el) }, content));
   }
   render() {
@@ -32999,14 +33039,14 @@ class ListItem {
     const borderSelected = showBorder && selected;
     const borderUnselected = showBorder && !selected;
     return (hAsync(Host, null, hAsync("tr", { "aria-expanded": openable ? toAriaBoolean(open) : null, "aria-label": label, "aria-level": level, "aria-posinset": setPosition, "aria-selected": toAriaBoolean(selected), "aria-setsize": setSize, class: {
-        [CSS$w.container]: true,
-        [CSS$w.containerBorderSelected]: borderSelected,
-        [CSS$w.containerBorderUnselected]: borderUnselected,
+        [CSS$x.container]: true,
+        [CSS$x.containerBorderSelected]: borderSelected,
+        [CSS$x.containerBorderUnselected]: borderUnselected,
       }, hidden: closed, onFocus: this.focusCellNull, onKeyDown: this.handleItemKeyDown, role: "row", style: { "--calcite-list-item-spacing-indent-multiplier": `${this.visualLevel}` }, tabIndex: active ? 0 : -1,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.containerEl = el) }, this.renderDragHandle(), this.renderSelected(), this.renderOpen(), this.renderActionsStart(), this.renderContentContainer(), this.renderActionsEnd()), hAsync("div", { class: {
-        [CSS$w.nestedContainer]: true,
-        [CSS$w.nestedContainerHidden]: openable && !open,
+        [CSS$x.nestedContainer]: true,
+        [CSS$x.nestedContainerHidden]: openable && !open,
       } }, hAsync("slot", { onSlotchange: this.handleDefaultSlotChange, ref: (el) => (this.defaultSlotEl = el) }))));
   }
   // --------------------------------------------------------------------------
@@ -33096,7 +33136,7 @@ class ListItem {
   }; }
 }
 
-const CSS$t = {
+const CSS$u = {
   container: "container",
   heading: "heading",
 };
@@ -33145,7 +33185,7 @@ class ListItemGroup {
   // --------------------------------------------------------------------------
   render() {
     const { heading, visualLevel } = this;
-    return (hAsync(Host, null, hAsync("tr", { class: CSS$t.container, style: { "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` } }, hAsync("td", { class: CSS$t.heading, colSpan: MAX_COLUMNS }, heading)), hAsync("slot", { onSlotchange: this.handleDefaultSlotChange })));
+    return (hAsync(Host, null, hAsync("tr", { class: CSS$u.container, style: { "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` } }, hAsync("td", { class: CSS$u.heading, colSpan: MAX_COLUMNS }, heading)), hAsync("slot", { onSlotchange: this.handleDefaultSlotChange })));
   }
   get el() { return getElement(this); }
   static get style() { return listItemGroupCss; }
@@ -33163,7 +33203,7 @@ class ListItemGroup {
   }; }
 }
 
-const loaderCss = "@charset \"UTF-8\";@media (prefers-reduced-motion: reduce){/*!@:root*/.sc-calcite-loader:root{--calcite-internal-duration-factor:0}}/*!@:host*/.sc-calcite-loader-h{position:relative;margin-inline:auto;display:none;align-items:center;justify-content:center;opacity:1;min-block-size:var(--calcite-loader-size);font-size:var(--calcite-loader-font-size);stroke:var(--calcite-ui-brand);stroke-width:3;fill:none;transform:scale(1, 1);animation:loader-color-shift calc(var(--calcite-internal-animation-timing-slow) / var(--calcite-internal-duration-factor) * 2 / var(--calcite-internal-duration-factor)) alternate-reverse infinite linear;padding-block:var(--calcite-loader-padding, 4rem)}/*!@:host([scale=s])*/[scale=s].sc-calcite-loader-h{--calcite-loader-font-size:var(--calcite-font-size--2);--calcite-loader-size:2rem;--calcite-loader-size-inline:0.75rem}/*!@:host([scale=m])*/[scale=m].sc-calcite-loader-h{--calcite-loader-font-size:var(--calcite-font-size-0);--calcite-loader-size:4rem;--calcite-loader-size-inline:1rem}/*!@:host([scale=l])*/[scale=l].sc-calcite-loader-h{--calcite-loader-font-size:var(--calcite-font-size-2);--calcite-loader-size:6rem;--calcite-loader-size-inline:1.5rem}/*!@:host([no-padding])*/[no-padding].sc-calcite-loader-h{padding-block:0px}/*!@:host*/.sc-calcite-loader-h{display:flex}/*!@.loader__text*/.loader__text.sc-calcite-loader{display:block;text-align:center;font-size:var(--calcite-font-size--2);line-height:1rem;color:var(--calcite-ui-text-1);margin-block-start:calc(var(--calcite-loader-size) + 1.5rem)}/*!@.loader__percentage*/.loader__percentage.sc-calcite-loader{position:absolute;display:block;text-align:center;color:var(--calcite-ui-text-1);font-size:var(--calcite-loader-font-size);inline-size:var(--calcite-loader-size);inset-inline-start:50%;margin-inline-start:calc(var(--calcite-loader-size) / 2 * -1);line-height:0.25;transform:scale(1, 1)}/*!@.loader__svgs*/.loader__svgs.sc-calcite-loader{position:absolute;overflow:visible;opacity:1;inline-size:var(--calcite-loader-size);block-size:var(--calcite-loader-size);inset-inline-start:50%;margin-inline-start:calc(var(--calcite-loader-size) / 2 * -1);transform:scale(1, 1)}/*!@.loader__svg*/.loader__svg.sc-calcite-loader{position:absolute;inset-block-start:0px;transform-origin:center;overflow:visible;inset-inline-start:0;inline-size:var(--calcite-loader-size);block-size:var(--calcite-loader-size);animation-iteration-count:infinite;animation-timing-function:linear;animation-name:loader-clockwise}@supports (display: grid){/*!@.loader__svg--1*/.loader__svg--1.sc-calcite-loader{animation-name:loader-offset-1}/*!@.loader__svg--2*/.loader__svg--2.sc-calcite-loader{animation-name:loader-offset-2}/*!@.loader__svg--3*/.loader__svg--3.sc-calcite-loader{animation-name:loader-offset-3}}/*!@:host([type=determinate])*/[type=determinate].sc-calcite-loader-h{animation:none;stroke:var(--calcite-ui-border-3)}/*!@:host([type=determinate]) .loader__svg--3*/[type=determinate].sc-calcite-loader-h .loader__svg--3.sc-calcite-loader{animation:none;stroke:var(--calcite-ui-brand);stroke-dasharray:150.79632;transform:rotate(-90deg);transition:all var(--calcite-internal-animation-timing-fast) linear}/*!@:host([inline])*/[inline].sc-calcite-loader-h{position:relative;margin:0px;animation:none;stroke:currentColor;stroke-width:2;padding-block:0px;block-size:var(--calcite-loader-size-inline);min-block-size:var(--calcite-loader-size-inline);inline-size:var(--calcite-loader-size-inline);margin-inline-end:calc(var(--calcite-loader-size-inline) * 0.5);vertical-align:calc(var(--calcite-loader-size-inline) * -1 * 0.2)}/*!@:host([inline]) .loader__svgs*/[inline].sc-calcite-loader-h .loader__svgs.sc-calcite-loader{inset-block-start:0px;margin:0px;inset-inline-start:0;inline-size:var(--calcite-loader-size-inline);block-size:var(--calcite-loader-size-inline)}/*!@:host([inline]) .loader__svg*/[inline].sc-calcite-loader-h .loader__svg.sc-calcite-loader{inline-size:var(--calcite-loader-size-inline);block-size:var(--calcite-loader-size-inline)}/*!@:host([complete])*/[complete].sc-calcite-loader-h{opacity:0;transform:scale(0.75, 0.75);transform-origin:center;transition:opacity var(--calcite-internal-animation-timing-medium) linear 1000ms, transform var(--calcite-internal-animation-timing-medium) linear 1000ms}/*!@:host([complete]) .loader__svgs*/[complete].sc-calcite-loader-h .loader__svgs.sc-calcite-loader{opacity:0;transform:scale(0.75, 0.75);transform-origin:center;transition:opacity calc(180ms * var(--calcite-internal-duration-factor)) linear 800ms, transform calc(180ms * var(--calcite-internal-duration-factor)) linear 800ms}/*!@:host([complete]) .loader__percentage*/[complete].sc-calcite-loader-h .loader__percentage.sc-calcite-loader{color:var(--calcite-ui-brand);transform:scale(1.05, 1.05);transform-origin:center;transition:color var(--calcite-internal-animation-timing-medium) linear, transform var(--calcite-internal-animation-timing-medium) linear}/*!@.loader__svg--1*/.loader__svg--1.sc-calcite-loader{stroke-dasharray:27.9252444444% 139.6262222222%;animation-duration:calc(var(--calcite-internal-animation-timing-slow) / var(--calcite-internal-duration-factor) * 2.4 / var(--calcite-internal-duration-factor))}@keyframes loader-offset-1{0%{stroke-dasharray:27.9252444444% 251.3272%;stroke-dashoffset:0}50%{stroke-dasharray:139.6262222222% 139.6262222222%;stroke-dashoffset:-83.7757333333%}100%{stroke-dasharray:27.9252444444% 251.3272%;stroke-dashoffset:-279.2524444444%}}/*!@.loader__svg--2*/.loader__svg--2.sc-calcite-loader{stroke-dasharray:55.8504888889% 139.6262222222%;animation-duration:calc(var(--calcite-internal-animation-timing-slow) / var(--calcite-internal-duration-factor) * 3.2 / var(--calcite-internal-duration-factor))}@keyframes loader-offset-2{0%{stroke-dasharray:55.8504888889% 223.4019555556%;stroke-dashoffset:0}50%{stroke-dasharray:139.6262222222% 139.6262222222%;stroke-dashoffset:-97.7383555556%}100%{stroke-dasharray:55.8504888889% 223.4019555556%;stroke-dashoffset:-279.2524444444%}}/*!@.loader__svg--3*/.loader__svg--3.sc-calcite-loader{stroke-dasharray:13.9626222222% 139.6262222222%;animation-duration:calc(var(--calcite-internal-animation-timing-slow) / var(--calcite-internal-duration-factor) * 3.867 / var(--calcite-internal-duration-factor))}@keyframes loader-offset-3{0%{stroke-dasharray:13.9626222222% 265.2898222222%;stroke-dashoffset:0}50%{stroke-dasharray:139.6262222222% 139.6262222222%;stroke-dashoffset:-76.7944222222%}100%{stroke-dasharray:13.9626222222% 265.2898222222%;stroke-dashoffset:-279.2524444444%}}@keyframes loader-color-shift{0%{stroke:var(--calcite-ui-brand)}33%{stroke:var(--calcite-ui-brand-press)}66%{stroke:var(--calcite-ui-brand-hover)}100%{stroke:var(--calcite-ui-brand)}}@keyframes loader-clockwise{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}/*!@:host([hidden])*/[hidden].sc-calcite-loader-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-loader{display:none}";
+const loaderCss = "@charset \"UTF-8\";@media (prefers-reduced-motion: reduce){/*!@:root*/.sc-calcite-loader:root{--calcite-internal-duration-factor:0}}/*!@:host*/.sc-calcite-loader-h{position:relative;margin-inline:auto;display:none;align-items:center;justify-content:center;opacity:1;min-block-size:var(--calcite-loader-size);font-size:var(--calcite-loader-font-size);stroke:var(--calcite-ui-brand);stroke-width:3;fill:none;transform:scale(1, 1);animation:loader-color-shift calc(var(--calcite-internal-animation-timing-slow) / var(--calcite-internal-duration-factor) * 2 / var(--calcite-internal-duration-factor)) alternate-reverse infinite linear;padding-block:var(--calcite-loader-padding, 4rem)}/*!@:host([scale=s])*/[scale=s].sc-calcite-loader-h{--calcite-loader-font-size:var(--calcite-font-size--2);--calcite-loader-size:2rem;--calcite-loader-size-inline:0.75rem}/*!@:host([scale=m])*/[scale=m].sc-calcite-loader-h{--calcite-loader-font-size:var(--calcite-font-size-0);--calcite-loader-size:4rem;--calcite-loader-size-inline:1rem}/*!@:host([scale=l])*/[scale=l].sc-calcite-loader-h{--calcite-loader-font-size:var(--calcite-font-size-2);--calcite-loader-size:6rem;--calcite-loader-size-inline:1.5rem}/*!@:host([no-padding])*/[no-padding].sc-calcite-loader-h{padding-block:0px}/*!@:host*/.sc-calcite-loader-h{display:flex}/*!@.loader__text*/.loader__text.sc-calcite-loader{display:block;text-align:center;font-size:var(--calcite-font-size--2);line-height:1rem;color:var(--calcite-ui-text-1);margin-block-start:calc(var(--calcite-loader-size) + 1.5rem)}/*!@.loader__percentage*/.loader__percentage.sc-calcite-loader{position:absolute;display:block;text-align:center;color:var(--calcite-ui-text-1);font-size:var(--calcite-loader-font-size);inline-size:var(--calcite-loader-size);inset-inline-start:50%;margin-inline-start:calc(var(--calcite-loader-size) / 2 * -1);line-height:0.25;transform:scale(1, 1)}/*!@.loader__svgs*/.loader__svgs.sc-calcite-loader{position:absolute;overflow:visible;opacity:1;inline-size:var(--calcite-loader-size);block-size:var(--calcite-loader-size);inset-inline-start:50%;margin-inline-start:calc(var(--calcite-loader-size) / 2 * -1);animation-iteration-count:infinite;animation-timing-function:linear;animation-duration:calc(var(--calcite-internal-animation-timing-slow) / var(--calcite-internal-duration-factor) * 6.66 / var(--calcite-internal-duration-factor));animation-name:loader-clockwise}/*!@.loader__svg*/.loader__svg.sc-calcite-loader{position:absolute;inset-block-start:0px;transform-origin:center;overflow:visible;inset-inline-start:0;inline-size:var(--calcite-loader-size);block-size:var(--calcite-loader-size);animation-iteration-count:infinite;animation-timing-function:linear}@supports (display: grid){/*!@.loader__svg--1*/.loader__svg--1.sc-calcite-loader{animation-name:loader-offset-1}/*!@.loader__svg--2*/.loader__svg--2.sc-calcite-loader{animation-name:loader-offset-2}/*!@.loader__svg--3*/.loader__svg--3.sc-calcite-loader{animation-name:loader-offset-3}}/*!@:host([type=determinate])*/[type=determinate].sc-calcite-loader-h{animation:none;stroke:var(--calcite-ui-border-3)}/*!@:host([type=determinate]) .loader__svgs*/[type=determinate].sc-calcite-loader-h .loader__svgs.sc-calcite-loader{animation:none}/*!@:host([type=determinate]) .loader__svg--3*/[type=determinate].sc-calcite-loader-h .loader__svg--3.sc-calcite-loader{animation:none;stroke:var(--calcite-ui-brand);stroke-dasharray:150.79632;transform:rotate(-90deg);transition:all var(--calcite-internal-animation-timing-fast) linear}/*!@:host([inline])*/[inline].sc-calcite-loader-h{position:relative;margin:0px;animation:none;stroke:currentColor;stroke-width:2;padding-block:0px;block-size:var(--calcite-loader-size-inline);min-block-size:var(--calcite-loader-size-inline);inline-size:var(--calcite-loader-size-inline);margin-inline-end:calc(var(--calcite-loader-size-inline) * 0.5);vertical-align:calc(var(--calcite-loader-size-inline) * -1 * 0.2)}/*!@:host([inline]) .loader__svgs*/[inline].sc-calcite-loader-h .loader__svgs.sc-calcite-loader{inset-block-start:0px;margin:0px;inset-inline-start:0;inline-size:var(--calcite-loader-size-inline);block-size:var(--calcite-loader-size-inline)}/*!@:host([inline]) .loader__svg*/[inline].sc-calcite-loader-h .loader__svg.sc-calcite-loader{inline-size:var(--calcite-loader-size-inline);block-size:var(--calcite-loader-size-inline)}/*!@:host([complete])*/[complete].sc-calcite-loader-h{opacity:0;transform:scale(0.75, 0.75);transform-origin:center;transition:opacity var(--calcite-internal-animation-timing-medium) linear 1000ms, transform var(--calcite-internal-animation-timing-medium) linear 1000ms}/*!@:host([complete]) .loader__svgs*/[complete].sc-calcite-loader-h .loader__svgs.sc-calcite-loader{opacity:0;transform:scale(0.75, 0.75);transform-origin:center;transition:opacity calc(180ms * var(--calcite-internal-duration-factor)) linear 800ms, transform calc(180ms * var(--calcite-internal-duration-factor)) linear 800ms}/*!@:host([complete]) .loader__percentage*/[complete].sc-calcite-loader-h .loader__percentage.sc-calcite-loader{color:var(--calcite-ui-brand);transform:scale(1.05, 1.05);transform-origin:center;transition:color var(--calcite-internal-animation-timing-medium) linear, transform var(--calcite-internal-animation-timing-medium) linear}/*!@.loader__svg--1*/.loader__svg--1.sc-calcite-loader{stroke-dasharray:27.9252444444 139.6262222222;animation-duration:calc(var(--calcite-internal-animation-timing-slow) / var(--calcite-internal-duration-factor) * 4.8 / var(--calcite-internal-duration-factor))}@keyframes loader-offset-1{0%{stroke-dasharray:27.9252444444 251.3272;stroke-dashoffset:0}50%{stroke-dasharray:139.6262222222 139.6262222222;stroke-dashoffset:-83.7757333333}100%{stroke-dasharray:27.9252444444 251.3272;stroke-dashoffset:-279.2524444444}}/*!@.loader__svg--2*/.loader__svg--2.sc-calcite-loader{stroke-dasharray:55.8504888889 139.6262222222;animation-duration:calc(var(--calcite-internal-animation-timing-slow) / var(--calcite-internal-duration-factor) * 6.4 / var(--calcite-internal-duration-factor))}@keyframes loader-offset-2{0%{stroke-dasharray:55.8504888889 223.4019555556;stroke-dashoffset:0}50%{stroke-dasharray:139.6262222222 139.6262222222;stroke-dashoffset:-97.7383555556}100%{stroke-dasharray:55.8504888889 223.4019555556;stroke-dashoffset:-279.2524444444}}/*!@.loader__svg--3*/.loader__svg--3.sc-calcite-loader{stroke-dasharray:13.9626222222 139.6262222222;animation-duration:calc(var(--calcite-internal-animation-timing-slow) / var(--calcite-internal-duration-factor) * 7.734 / var(--calcite-internal-duration-factor))}@keyframes loader-offset-3{0%{stroke-dasharray:13.9626222222 265.2898222222;stroke-dashoffset:0}50%{stroke-dasharray:139.6262222222 139.6262222222;stroke-dashoffset:-76.7944222222}100%{stroke-dasharray:13.9626222222 265.2898222222;stroke-dashoffset:-279.2524444444}}@keyframes loader-color-shift{0%{stroke:var(--calcite-ui-brand)}33%{stroke:var(--calcite-ui-brand-press)}66%{stroke:var(--calcite-ui-brand-hover)}100%{stroke:var(--calcite-ui-brand)}}@keyframes loader-clockwise{100%{transform:rotate(360deg)}}/*!@:host([hidden])*/[hidden].sc-calcite-loader-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-loader{display:none}";
 
 class Loader {
   constructor(hostRef) {
@@ -33245,7 +33285,7 @@ class Loader {
   }; }
 }
 
-const CSS$s = {
+const CSS$t = {
   container: "container",
   fill: "fill",
   stepLine: "step-line",
@@ -33395,16 +33435,16 @@ class Meter {
     const aboveHighest = value >= highest;
     const belowHighest = value < highest;
     if (!value || (!low && belowHighest) || belowLowest) {
-      return CSS$s.success;
+      return CSS$t.success;
     }
     else if (aboveLowest && belowHighest) {
-      return CSS$s.warning;
+      return CSS$t.warning;
     }
     else if (aboveHighest) {
-      return CSS$s.danger;
+      return CSS$t.danger;
     }
     else {
-      return CSS$s.success;
+      return CSS$t.success;
     }
   }
   intersects(el1, el2) {
@@ -33418,7 +33458,7 @@ class Meter {
     const minHighOverlap = this.intersects(minLabelEl, highLabelEl);
     const minLowOverlap = this.intersects(minLabelEl, lowLabelEl);
     const minMaxOverlap = this.intersects(minLabelEl, maxLabelEl);
-    const hiddenClass = CSS$s.labelHidden;
+    const hiddenClass = CSS$t.labelHidden;
     if (lowLabelEl) {
       if (minLowOverlap || lowMaxOverlap || lowHighOverlap) {
         lowLabelEl.classList.add(hiddenClass);
@@ -33467,26 +33507,26 @@ class Meter {
   renderMeterFill() {
     const { currentPercent, fillType } = this;
     const kindClass = this.getMeterKindCssClass();
-    return (hAsync("div", { class: { [CSS$s.fill]: true, [kindClass]: fillType !== "single" }, style: { width: `${currentPercent}%` } }));
+    return (hAsync("div", { class: { [CSS$t.fill]: true, [kindClass]: fillType !== "single" }, style: { width: `${currentPercent}%` } }));
   }
   renderRangeLine(position) {
     const style = { insetInlineStart: `${position}%` };
-    return hAsync("div", { class: CSS$s.stepLine, style: style });
+    return hAsync("div", { class: CSS$t.stepLine, style: style });
   }
   renderValueLabel() {
     const { currentPercent, valueLabelType, unitLabel, value } = this;
     const label = this.formatLabel(valueLabelType === "percent" ? currentPercent / 100 : value || 0, valueLabelType);
-    return (hAsync("div", { class: { [CSS$s.label]: true, [CSS$s.labelValue]: true }, key: "low-label-line",
+    return (hAsync("div", { class: { [CSS$t.label]: true, [CSS$t.labelValue]: true }, key: "low-label-line",
       // eslint-disable-next-line react/jsx-sort-props
-      ref: (el) => (this.valueLabelEl = el) }, label, unitLabel && valueLabelType !== "percent" && (hAsync("span", { class: CSS$s.unitLabel }, "\u00A0", unitLabel))));
+      ref: (el) => (this.valueLabelEl = el) }, label, unitLabel && valueLabelType !== "percent" && (hAsync("span", { class: CSS$t.unitLabel }, "\u00A0", unitLabel))));
   }
   renderMinLabel() {
     const { rangeLabelType, min, minPercent, unitLabel } = this;
     const style = { insetInlineStart: `${minPercent}%` };
     const labelMin = this.formatLabel(rangeLabelType === "percent" ? minPercent : min, rangeLabelType);
-    return (hAsync("div", { class: { [CSS$s.label]: true, [CSS$s.labelRange]: true }, key: "min-label-line", style: style,
+    return (hAsync("div", { class: { [CSS$t.label]: true, [CSS$t.labelRange]: true }, key: "min-label-line", style: style,
       // eslint-disable-next-line react/jsx-sort-props
-      ref: (el) => (this.minLabelEl = el) }, labelMin, unitLabel && rangeLabelType !== "percent" && (hAsync("span", { class: CSS$s.unitLabel }, "\u00A0", unitLabel))));
+      ref: (el) => (this.minLabelEl = el) }, labelMin, unitLabel && rangeLabelType !== "percent" && (hAsync("span", { class: CSS$t.unitLabel }, "\u00A0", unitLabel))));
   }
   renderLowLabel() {
     const { rangeLabelType, low, lowPercent, highPercent, labelFlipProximity } = this;
@@ -33496,7 +33536,7 @@ class Meter {
     const styleDefault = { insetInlineStart: `${lowPercent}%` };
     const styleFlipped = { insetInlineEnd: `${100 - lowPercent}%` };
     const style = (highPercent - lowPercent) / 100 < labelFlipProximity ? styleFlipped : styleDefault;
-    return (hAsync("div", { class: { [CSS$s.label]: true, [CSS$s.labelRange]: true }, key: "low-label-line", style: style,
+    return (hAsync("div", { class: { [CSS$t.label]: true, [CSS$t.labelRange]: true }, key: "low-label-line", style: style,
       // eslint-disable-next-line react/jsx-sort-props
       ref: (el) => (this.lowLabelEl = el) }, label));
   }
@@ -33508,7 +33548,7 @@ class Meter {
     const styleDefault = { insetInlineStart: `${highPercent}%` };
     const styleFlipped = { insetInlineEnd: `${100 - highPercent}%` };
     const style = highPercent / 100 >= labelFlipMax ? styleFlipped : styleDefault;
-    return (hAsync("div", { class: { [CSS$s.label]: true, [CSS$s.labelRange]: true }, key: "high-label-line", style: style,
+    return (hAsync("div", { class: { [CSS$t.label]: true, [CSS$t.labelRange]: true }, key: "high-label-line", style: style,
       // eslint-disable-next-line react/jsx-sort-props
       ref: (el) => (this.highLabelEl = el) }, label));
   }
@@ -33516,7 +33556,7 @@ class Meter {
     const { rangeLabelType, max, maxPercent } = this;
     const style = { insetInlineEnd: `${100 - maxPercent}%` };
     const labelMax = this.formatLabel(rangeLabelType === "percent" ? maxPercent / 100 : max, rangeLabelType);
-    return (hAsync("div", { class: { [CSS$s.label]: true, [CSS$s.labelRange]: true }, key: "max-label-line", style: style,
+    return (hAsync("div", { class: { [CSS$t.label]: true, [CSS$t.labelRange]: true }, key: "max-label-line", style: style,
       // eslint-disable-next-line react/jsx-sort-props
       ref: (el) => (this.maxLabelEl = el) }, labelMax));
   }
@@ -33530,9 +33570,9 @@ class Meter {
         ? textUnitLabel
         : undefined;
     return (hAsync(Host, null, hAsync("div", { "aria-label": label, "aria-valuemax": rangeLabelType === "percent" ? maxPercent : max, "aria-valuemin": rangeLabelType === "percent" ? minPercent : min, "aria-valuenow": valueLabelType === "percent" ? currentPercent : value, "aria-valuetext": valueText, class: {
-        [CSS$s.container]: true,
-        [CSS$s.stepsVisible]: rangeLabels,
-        [CSS$s.valueVisible]: valueLabel,
+        [CSS$t.container]: true,
+        [CSS$t.stepsVisible]: rangeLabels,
+        [CSS$t.valueVisible]: valueLabel,
         [appearance]: appearance !== "outline-fill",
       }, role: "meter",
       // eslint-disable-next-line react/jsx-sort-props
@@ -33588,7 +33628,7 @@ class Meter {
   }; }
 }
 
-const CSS$r = {
+const CSS$s = {
   modal: "modal",
   title: "title",
   header: "header",
@@ -33625,7 +33665,7 @@ const SLOTS$e = {
   primary: "primary",
 };
 
-const modalCss = "/*!@:host*/.sc-calcite-modal-h{position:absolute;inset:0px;z-index:var(--calcite-app-z-index-overlay);display:flex;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);--calcite-modal-scrim-background-internal:rgba(0, 0, 0, 0.85)}/*!@.content-top[hidden],\n.content-bottom[hidden]*/.content-top[hidden].sc-calcite-modal,.content-bottom[hidden].sc-calcite-modal{display:none}/*!@.container*/.container.sc-calcite-modal{position:fixed;inset:0px;z-index:var(--calcite-app-z-index-overlay);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-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-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-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:var(--calcite-modal-scrim-background, var(--calcite-modal-scrim-background-internal));position:fixed;inset:0px;display:flex;overflow-y:hidden}/*!@.modal*/.modal.sc-calcite-modal{pointer-events:none;z-index:var(--calcite-app-z-index-modal);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}/*!@.container--open*/.container--open.sc-calcite-modal{opacity:1;visibility:visible !important;transition-delay:0ms}/*!@.container--open .modal*/.container--open.sc-calcite-modal .modal.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:var(--calcite-app-z-index-header);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;padding-block:var(--calcite-modal-padding-internal);padding-inline: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-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}/*!@.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-internal);padding-inline: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-internal)}/*!@.content*/.content.sc-calcite-modal{position:relative;box-sizing:border-box;display:block;block-size:100%;overflow:auto;padding:0px;background-color:var(--calcite-modal-content-background, var(--calcite-ui-foreground-1));max-block-size:100%;padding:var(--calcite-modal-content-padding, var(--calcite-modal-padding-internal))}/*!@.content-top,\n.content-bottom*/.content-top.sc-calcite-modal,.content-bottom.sc-calcite-modal{z-index:var(--calcite-app-z-index-header);display:flex;border-width:0px;border-style:solid;border-color:var(--calcite-ui-border-3);background-color:var(--calcite-ui-foreground-1);flex:0 0 auto;padding:var(--calcite-modal-padding-internal)}/*!@.content-top*/.content-top.sc-calcite-modal{min-inline-size:0px;max-inline-size:100%;border-block-end-width:1px}/*!@.content-bottom*/.content-bottom.sc-calcite-modal{margin-block-start:auto;box-sizing:border-box;inline-size:100%;justify-content:space-between;border-block-start-width:1px}/*!@.content-top:not(.header ~ .content-top)*/.content-top.sc-calcite-modal:not(.header~.content-top).sc-calcite-modal{border-start-start-radius:0.25rem;border-start-end-radius:0.25rem}/*!@.content-bottom:not(.content-bottom ~ .footer),\n.content--no-footer*/.content-bottom.sc-calcite-modal:not(.content-bottom~.footer).sc-calcite-modal,.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-context-text-internal)}/*!@.footer*/.footer.sc-calcite-modal{z-index:var(--calcite-app-z-index-header);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-internal);padding-inline: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-block-size:100%;max-inline-size:100%;inline-size:var(--calcite-modal-width, 32rem);block-size:var(--calcite-modal-height, auto)}@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%}/*!@: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]) .container*/[width=s][docked].sc-calcite-modal-h .container.sc-calcite-modal{align-items:flex-end}}/*!@:host([width=m]) .modal*/[width=m].sc-calcite-modal-h .modal.sc-calcite-modal{max-block-size:100%;max-inline-size:100%;inline-size:var(--calcite-modal-width, 48rem);block-size:var(--calcite-modal-height, auto)}@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%}/*!@: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]) .container*/[width=m][docked].sc-calcite-modal-h .container.sc-calcite-modal{align-items:flex-end}}/*!@:host([width=l]) .modal*/[width=l].sc-calcite-modal-h .modal.sc-calcite-modal{max-block-size:100%;max-inline-size:100%;inline-size:var(--calcite-modal-width, 94rem);block-size:var(--calcite-modal-height, auto)}@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%}/*!@: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]) .container*/[width=l][docked].sc-calcite-modal-h .container.sc-calcite-modal{align-items:flex-end}}/*!@: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%;border-radius:0px;--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,\n:host([open][fullscreen]) .footer,\n:host([open][fullscreen]) .content-top,\n:host([open][fullscreen]) .content-bottom*/[open][fullscreen].sc-calcite-modal-h .header.sc-calcite-modal,[open][fullscreen].sc-calcite-modal-h .footer.sc-calcite-modal,[open][fullscreen].sc-calcite-modal-h .content-top.sc-calcite-modal,[open][fullscreen].sc-calcite-modal-h .content-bottom.sc-calcite-modal{border-radius:0}/*!@:host([docked]) .modal*/[docked].sc-calcite-modal-h .modal.sc-calcite-modal{block-size:var(--calcite-modal-height, auto)}/*!@:host([docked]) .content*/[docked].sc-calcite-modal-h .content.sc-calcite-modal{block-size:auto;flex:1 1 auto}/*!@:host([kind=brand]) .modal*/[kind=brand].sc-calcite-modal-h .modal.sc-calcite-modal{border-color:var(--calcite-ui-brand)}/*!@:host([kind=danger]) .modal*/[kind=danger].sc-calcite-modal-h .modal.sc-calcite-modal{border-color:var(--calcite-ui-danger)}/*!@:host([kind=info]) .modal*/[kind=info].sc-calcite-modal-h .modal.sc-calcite-modal{border-color:var(--calcite-ui-info)}/*!@:host([kind=success]) .modal*/[kind=success].sc-calcite-modal-h .modal.sc-calcite-modal{border-color:var(--calcite-ui-success)}/*!@:host([kind=warning]) .modal*/[kind=warning].sc-calcite-modal-h .modal.sc-calcite-modal{border-color:var(--calcite-ui-warning)}/*!@:host([kind=brand]) .modal,\n:host([kind=danger]) .modal,\n:host([kind=info]) .modal,\n:host([kind=success]) .modal,\n:host([kind=warning]) .modal*/[kind=brand].sc-calcite-modal-h .modal.sc-calcite-modal,[kind=danger].sc-calcite-modal-h .modal.sc-calcite-modal,[kind=info].sc-calcite-modal-h .modal.sc-calcite-modal,[kind=success].sc-calcite-modal-h .modal.sc-calcite-modal,[kind=warning].sc-calcite-modal-h .modal.sc-calcite-modal{border-width:0px;border-block-start-width:4px;border-style:solid}/*!@:host([kind=brand]) .header,\n:host([kind=brand]) .content-top,\n:host([kind=danger]) .header,\n:host([kind=danger]) .content-top,\n:host([kind=info]) .header,\n:host([kind=info]) .content-top,\n:host([kind=success]) .header,\n:host([kind=success]) .content-top,\n:host([kind=warning]) .header,\n:host([kind=warning]) .content-top*/[kind=brand].sc-calcite-modal-h .header.sc-calcite-modal,[kind=brand].sc-calcite-modal-h .content-top.sc-calcite-modal,[kind=danger].sc-calcite-modal-h .header.sc-calcite-modal,[kind=danger].sc-calcite-modal-h .content-top.sc-calcite-modal,[kind=info].sc-calcite-modal-h .header.sc-calcite-modal,[kind=info].sc-calcite-modal-h .content-top.sc-calcite-modal,[kind=success].sc-calcite-modal-h .header.sc-calcite-modal,[kind=success].sc-calcite-modal-h .content-top.sc-calcite-modal,[kind=warning].sc-calcite-modal-h .header.sc-calcite-modal,[kind=warning].sc-calcite-modal-h .content-top.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(content-top),\n  * content-top::slotted([slot=header])*/* slot[name=header].sc-calcite-modal-s>content-top,* content-top.sc-calcite-modal-s>[slot=header]{font-size:var(--calcite-font-size-1)}/*!@.footer,\n  .content-bottom*/.footer.sc-calcite-modal,.content-bottom.sc-calcite-modal{position:sticky;inset-block-end:0px}}@media screen and (max-width: 480px){/*!@.footer,\n  .content-bottom*/.footer.sc-calcite-modal,.content-bottom.sc-calcite-modal{flex-direction:column}/*!@.back,\n  .secondary*/.back.sc-calcite-modal,.secondary.sc-calcite-modal{margin:0px;margin-block-end:0.25rem}}/*!@.container.slotted-in-shell*/.container.slotted-in-shell.sc-calcite-modal{position:absolute;pointer-events:auto}/*!@.container.slotted-in-shell calcite-scrim*/.container.slotted-in-shell.sc-calcite-modal calcite-scrim.sc-calcite-modal{position:absolute}/*!@:host([hidden])*/[hidden].sc-calcite-modal-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-modal{display:none}";
+const modalCss = "/*!@:host*/.sc-calcite-modal-h{position:absolute;inset:0px;z-index:var(--calcite-app-z-index-overlay);display:flex;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);--calcite-modal-scrim-background-internal:rgba(0, 0, 0, 0.85)}/*!@.content-top[hidden],\n.content-bottom[hidden]*/.content-top[hidden].sc-calcite-modal,.content-bottom[hidden].sc-calcite-modal{display:none}/*!@.container*/.container.sc-calcite-modal{position:fixed;inset:0px;z-index:var(--calcite-app-z-index-overlay);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-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-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-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:var(--calcite-modal-scrim-background, var(--calcite-modal-scrim-background-internal));position:fixed;inset:0px;display:flex;overflow-y:hidden}/*!@.modal*/.modal.sc-calcite-modal{pointer-events:none;z-index:var(--calcite-app-z-index-modal);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([opened])*/[opened].sc-calcite-modal-h{opacity:1;visibility:visible !important;transition-delay:0ms}/*!@.container--open*/.container--open.sc-calcite-modal{opacity:1;visibility:visible !important;transition-delay:0ms}/*!@.container--open .modal*/.container--open.sc-calcite-modal .modal.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:var(--calcite-app-z-index-header);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;padding-block:var(--calcite-modal-padding-internal);padding-inline: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-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}/*!@.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-internal);padding-inline: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-internal)}/*!@.content*/.content.sc-calcite-modal{position:relative;box-sizing:border-box;display:block;block-size:100%;overflow:auto;padding:0px;background-color:var(--calcite-modal-content-background, var(--calcite-ui-foreground-1));max-block-size:100%;padding:var(--calcite-modal-content-padding, var(--calcite-modal-padding-internal))}/*!@.content-top,\n.content-bottom*/.content-top.sc-calcite-modal,.content-bottom.sc-calcite-modal{z-index:var(--calcite-app-z-index-header);display:flex;border-width:0px;border-style:solid;border-color:var(--calcite-ui-border-3);background-color:var(--calcite-ui-foreground-1);flex:0 0 auto;padding:var(--calcite-modal-padding-internal)}/*!@.content-top*/.content-top.sc-calcite-modal{min-inline-size:0px;max-inline-size:100%;border-block-end-width:1px}/*!@.content-bottom*/.content-bottom.sc-calcite-modal{margin-block-start:auto;box-sizing:border-box;inline-size:100%;justify-content:space-between;border-block-start-width:1px}/*!@.content-top:not(.header ~ .content-top)*/.content-top.sc-calcite-modal:not(.header~.content-top).sc-calcite-modal{border-start-start-radius:0.25rem;border-start-end-radius:0.25rem}/*!@.content-bottom:not(.content-bottom ~ .footer),\n.content--no-footer*/.content-bottom.sc-calcite-modal:not(.content-bottom~.footer).sc-calcite-modal,.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-context-text-internal)}/*!@.footer*/.footer.sc-calcite-modal{z-index:var(--calcite-app-z-index-header);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-internal);padding-inline: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-block-size:100%;max-inline-size:100%;inline-size:var(--calcite-modal-width, 32rem);block-size:var(--calcite-modal-height, auto)}@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%}/*!@: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]) .container*/[width=s][docked].sc-calcite-modal-h .container.sc-calcite-modal{align-items:flex-end}}/*!@:host([width=m]) .modal*/[width=m].sc-calcite-modal-h .modal.sc-calcite-modal{max-block-size:100%;max-inline-size:100%;inline-size:var(--calcite-modal-width, 48rem);block-size:var(--calcite-modal-height, auto)}@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%}/*!@: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]) .container*/[width=m][docked].sc-calcite-modal-h .container.sc-calcite-modal{align-items:flex-end}}/*!@:host([width=l]) .modal*/[width=l].sc-calcite-modal-h .modal.sc-calcite-modal{max-block-size:100%;max-inline-size:100%;inline-size:var(--calcite-modal-width, 94rem);block-size:var(--calcite-modal-height, auto)}@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%}/*!@: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]) .container*/[width=l][docked].sc-calcite-modal-h .container.sc-calcite-modal{align-items:flex-end}}/*!@: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%;border-radius:0px;--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([opened][fullscreen]) .header,\n:host([opened][fullscreen]) .footer,\n:host([opened][fullscreen]) .content-top,\n:host([opened][fullscreen]) .content-bottom*/[opened][fullscreen].sc-calcite-modal-h .header.sc-calcite-modal,[opened][fullscreen].sc-calcite-modal-h .footer.sc-calcite-modal,[opened][fullscreen].sc-calcite-modal-h .content-top.sc-calcite-modal,[opened][fullscreen].sc-calcite-modal-h .content-bottom.sc-calcite-modal{border-radius:0}/*!@:host([docked]) .modal*/[docked].sc-calcite-modal-h .modal.sc-calcite-modal{block-size:var(--calcite-modal-height, auto)}/*!@:host([docked]) .content*/[docked].sc-calcite-modal-h .content.sc-calcite-modal{block-size:auto;flex:1 1 auto}/*!@:host([kind=brand]) .modal*/[kind=brand].sc-calcite-modal-h .modal.sc-calcite-modal{border-color:var(--calcite-ui-brand)}/*!@:host([kind=danger]) .modal*/[kind=danger].sc-calcite-modal-h .modal.sc-calcite-modal{border-color:var(--calcite-ui-danger)}/*!@:host([kind=info]) .modal*/[kind=info].sc-calcite-modal-h .modal.sc-calcite-modal{border-color:var(--calcite-ui-info)}/*!@:host([kind=success]) .modal*/[kind=success].sc-calcite-modal-h .modal.sc-calcite-modal{border-color:var(--calcite-ui-success)}/*!@:host([kind=warning]) .modal*/[kind=warning].sc-calcite-modal-h .modal.sc-calcite-modal{border-color:var(--calcite-ui-warning)}/*!@:host([kind=brand]) .modal,\n:host([kind=danger]) .modal,\n:host([kind=info]) .modal,\n:host([kind=success]) .modal,\n:host([kind=warning]) .modal*/[kind=brand].sc-calcite-modal-h .modal.sc-calcite-modal,[kind=danger].sc-calcite-modal-h .modal.sc-calcite-modal,[kind=info].sc-calcite-modal-h .modal.sc-calcite-modal,[kind=success].sc-calcite-modal-h .modal.sc-calcite-modal,[kind=warning].sc-calcite-modal-h .modal.sc-calcite-modal{border-width:0px;border-block-start-width:4px;border-style:solid}/*!@:host([kind=brand]) .header,\n:host([kind=brand]) .content-top,\n:host([kind=danger]) .header,\n:host([kind=danger]) .content-top,\n:host([kind=info]) .header,\n:host([kind=info]) .content-top,\n:host([kind=success]) .header,\n:host([kind=success]) .content-top,\n:host([kind=warning]) .header,\n:host([kind=warning]) .content-top*/[kind=brand].sc-calcite-modal-h .header.sc-calcite-modal,[kind=brand].sc-calcite-modal-h .content-top.sc-calcite-modal,[kind=danger].sc-calcite-modal-h .header.sc-calcite-modal,[kind=danger].sc-calcite-modal-h .content-top.sc-calcite-modal,[kind=info].sc-calcite-modal-h .header.sc-calcite-modal,[kind=info].sc-calcite-modal-h .content-top.sc-calcite-modal,[kind=success].sc-calcite-modal-h .header.sc-calcite-modal,[kind=success].sc-calcite-modal-h .content-top.sc-calcite-modal,[kind=warning].sc-calcite-modal-h .header.sc-calcite-modal,[kind=warning].sc-calcite-modal-h .content-top.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(content-top),\n  * content-top::slotted([slot=header])*/* slot[name=header].sc-calcite-modal-s>content-top,* content-top.sc-calcite-modal-s>[slot=header]{font-size:var(--calcite-font-size-1)}/*!@.footer,\n  .content-bottom*/.footer.sc-calcite-modal,.content-bottom.sc-calcite-modal{position:sticky;inset-block-end:0px}}@media screen and (max-width: 480px){/*!@.footer,\n  .content-bottom*/.footer.sc-calcite-modal,.content-bottom.sc-calcite-modal{flex-direction:column}/*!@.back,\n  .secondary*/.back.sc-calcite-modal,.secondary.sc-calcite-modal{margin:0px;margin-block-end:0.25rem}}/*!@.container.slotted-in-shell*/.container.slotted-in-shell.sc-calcite-modal{position:absolute;pointer-events:auto}/*!@.container.slotted-in-shell calcite-scrim*/.container.slotted-in-shell.sc-calcite-modal calcite-scrim.sc-calcite-modal{position:absolute}/*!@:host([hidden])*/[hidden].sc-calcite-modal-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-modal{display:none}";
 
 /**
  * @slot header - A slot for adding header text.
@@ -33643,6 +33683,12 @@ class Modal {
     this.calciteModalClose = createEvent(this, "calciteModalClose", 6);
     this.calciteModalBeforeOpen = createEvent(this, "calciteModalBeforeOpen", 6);
     this.calciteModalOpen = createEvent(this, "calciteModalOpen", 6);
+    //--------------------------------------------------------------------------
+    //
+    //  Private Properties/ State
+    //
+    //--------------------------------------------------------------------------
+    this.ignoreOpenChange = false;
     this.mutationObserver = createObserver();
     this.cssVarObserver = createObserver();
     this.openTransitionProp = "opacity";
@@ -33662,15 +33708,32 @@ class Modal {
       if (this.outsideCloseDisabled) {
         return;
       }
-      this.close();
+      this.closeModal();
     };
     /** Close the modal, first running the `beforeClose` method */
-    this.close = () => {
-      return this.beforeClose(this.el).then(() => {
-        this.open = false;
-        this.isOpen = false;
-        this.removeOverflowHiddenClass();
-      });
+    this.closeModal = async () => {
+      if (this.ignoreOpenChange) {
+        return;
+      }
+      if (this.beforeClose) {
+        try {
+          await this.beforeClose(this.el);
+        }
+        catch (_error) {
+          // close prevented
+          requestAnimationFrame(() => {
+            this.ignoreOpenChange = true;
+            this.open = true;
+            this.ignoreOpenChange = false;
+          });
+          return;
+        }
+      }
+      this.ignoreOpenChange = true;
+      this.open = false;
+      this.opened = false;
+      this.removeOverflowHiddenClass();
+      this.ignoreOpenChange = false;
     };
     this.handleMutationObserver = () => {
       this.updateFooterVisibility();
@@ -33690,7 +33753,8 @@ class Modal {
       this.hasContentBottom = slotChangeHasAssignedElement(event);
     };
     this.open = false;
-    this.beforeClose = () => Promise.resolve();
+    this.opened = false;
+    this.beforeClose = undefined;
     this.closeButtonDisabled = false;
     this.focusTrapDisabled = false;
     this.outsideCloseDisabled = false;
@@ -33708,7 +33772,6 @@ class Modal {
     this.hasFooter = true;
     this.hasContentTop = false;
     this.hasContentBottom = false;
-    this.isOpen = false;
     this.effectiveLocale = undefined;
     this.defaultMessages = undefined;
   }
@@ -33760,50 +33823,50 @@ class Modal {
   }
   render() {
     return (hAsync(Host, { "aria-describedby": this.contentId, "aria-labelledby": this.titleId, "aria-modal": "true", role: "dialog" }, hAsync("div", { class: {
-        [CSS$r.container]: true,
-        [CSS$r.containerOpen]: this.isOpen,
-        [CSS$r.slottedInShell]: this.slottedInShell,
-      } }, hAsync("calcite-scrim", { class: CSS$r.scrim, onClick: this.handleOutsideClose }), this.renderStyle(), hAsync("div", { class: {
-        [CSS$r.modal]: true,
+        [CSS$s.container]: true,
+        [CSS$s.containerOpen]: this.opened,
+        [CSS$s.slottedInShell]: this.slottedInShell,
+      } }, hAsync("calcite-scrim", { class: CSS$s.scrim, onClick: this.handleOutsideClose }), this.renderStyle(), hAsync("div", { class: {
+        [CSS$s.modal]: true,
       },
-      // eslint-disable-next-line react/jsx-sort-props
-      ref: this.setTransitionEl }, hAsync("div", { class: CSS$r.header }, this.renderCloseButton(), hAsync("header", { class: CSS$r.title }, hAsync("slot", { name: CSS$r.header }))), this.renderContentTop(), hAsync("div", { class: {
-        [CSS$r.content]: true,
-        [CSS$r.contentNoFooter]: !this.hasFooter,
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+      ref: this.setTransitionEl }, hAsync("div", { class: CSS$s.header }, this.renderCloseButton(), hAsync("header", { class: CSS$s.title }, hAsync("slot", { name: CSS$s.header }))), this.renderContentTop(), hAsync("div", { class: {
+        [CSS$s.content]: true,
+        [CSS$s.contentNoFooter]: !this.hasFooter,
       },
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.modalContent = el) }, hAsync("slot", { name: SLOTS$e.content })), this.renderContentBottom(), this.renderFooter()))));
   }
   renderFooter() {
-    return this.hasFooter ? (hAsync("div", { class: CSS$r.footer, key: "footer" }, hAsync("span", { class: CSS$r.back }, hAsync("slot", { name: SLOTS$e.back })), hAsync("span", { class: CSS$r.secondary }, hAsync("slot", { name: SLOTS$e.secondary })), hAsync("span", { class: CSS$r.primary }, hAsync("slot", { name: SLOTS$e.primary })))) : null;
+    return this.hasFooter ? (hAsync("div", { class: CSS$s.footer, key: "footer" }, hAsync("span", { class: CSS$s.back }, hAsync("slot", { name: SLOTS$e.back })), hAsync("span", { class: CSS$s.secondary }, hAsync("slot", { name: SLOTS$e.secondary })), hAsync("span", { class: CSS$s.primary }, hAsync("slot", { name: SLOTS$e.primary })))) : null;
   }
   renderContentTop() {
-    return (hAsync("div", { class: CSS$r.contentTop, hidden: !this.hasContentTop }, hAsync("slot", { name: SLOTS$e.contentTop, onSlotchange: this.contentTopSlotChangeHandler })));
+    return (hAsync("div", { class: CSS$s.contentTop, hidden: !this.hasContentTop }, hAsync("slot", { name: SLOTS$e.contentTop, onSlotchange: this.contentTopSlotChangeHandler })));
   }
   renderContentBottom() {
-    return (hAsync("div", { class: CSS$r.contentBottom, hidden: !this.hasContentBottom }, hAsync("slot", { name: SLOTS$e.contentBottom, onSlotchange: this.contentBottomSlotChangeHandler })));
+    return (hAsync("div", { class: CSS$s.contentBottom, hidden: !this.hasContentBottom }, hAsync("slot", { name: SLOTS$e.contentBottom, onSlotchange: this.contentBottomSlotChangeHandler })));
   }
   renderCloseButton() {
-    return !this.closeButtonDisabled ? (hAsync("button", { "aria-label": this.messages.close, class: CSS$r.close, key: "button", onClick: this.close, title: this.messages.close,
-      // eslint-disable-next-line react/jsx-sort-props
+    return !this.closeButtonDisabled ? (hAsync("button", { "aria-label": this.messages.close, class: CSS$s.close, key: "button", onClick: this.closeModal, title: this.messages.close,
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.closeButtonEl = el) }, hAsync("calcite-icon", { icon: ICONS$6.close, scale: this.scale === "s" ? "s" : this.scale === "m" ? "m" : this.scale === "l" ? "l" : null }))) : null;
   }
   renderStyle() {
     if (!this.fullscreen && (this.cssWidth || this.cssHeight)) {
-      return (hAsync("style", null, `.${CSS$r.container} {
+      return (hAsync("style", null, `.${CSS$s.container} {
               ${this.docked && this.cssWidth ? `align-items: center !important;` : ""}
             }
-            .${CSS$r.modal} {
+            .${CSS$s.modal} {
               block-size: ${this.cssHeight ? this.cssHeight : "auto"} !important;
               ${this.cssWidth ? `inline-size: ${this.cssWidth} !important;` : ""}
               ${this.cssWidth ? `max-inline-size: ${this.cssWidth} !important;` : ""}
               ${this.docked ? `border-radius: var(--calcite-border-radius) !important;` : ""}
             }
             @media screen and (max-width: ${this.cssWidth}) {
-              .${CSS$r.container} {
+              .${CSS$s.container} {
                 ${this.docked ? `align-items: flex-end !important;` : ""}
               }
-              .${CSS$r.modal} {
+              .${CSS$s.modal} {
                 max-block-size: 100% !important;
                 inline-size: 100% !important;
                 max-inline-size: 100% !important;
@@ -33829,7 +33892,7 @@ class Modal {
   //--------------------------------------------------------------------------
   handleEscape(event) {
     if (this.open && !this.escapeDisabled && event.key === "Escape" && !event.defaultPrevented) {
-      this.close();
+      this.closeModal();
       event.preventDefault();
     }
   }
@@ -33870,39 +33933,46 @@ class Modal {
     }
   }
   onBeforeOpen() {
-    this.transitionEl.classList.add(CSS$r.openingActive);
+    this.transitionEl.classList.add(CSS$s.openingActive);
     this.calciteModalBeforeOpen.emit();
   }
   onOpen() {
-    this.transitionEl.classList.remove(CSS$r.openingIdle, CSS$r.openingActive);
+    this.transitionEl.classList.remove(CSS$s.openingIdle, CSS$s.openingActive);
     this.calciteModalOpen.emit();
     activateFocusTrap(this);
   }
   onBeforeClose() {
-    this.transitionEl.classList.add(CSS$r.closingActive);
+    this.transitionEl.classList.add(CSS$s.closingActive);
     this.calciteModalBeforeClose.emit();
   }
   onClose() {
-    this.transitionEl.classList.remove(CSS$r.closingIdle, CSS$r.closingActive);
+    this.transitionEl.classList.remove(CSS$s.closingIdle, CSS$s.closingActive);
     this.calciteModalClose.emit();
     deactivateFocusTrap(this);
   }
   async toggleModal(value) {
+    if (this.ignoreOpenChange) {
+      return;
+    }
     onToggleOpenCloseComponent(this);
     if (value) {
-      this.transitionEl?.classList.add(CSS$r.openingIdle);
+      this.transitionEl?.classList.add(CSS$s.openingIdle);
       this.openModal();
     }
     else {
-      this.transitionEl?.classList.add(CSS$r.closingIdle);
-      this.close();
+      this.transitionEl?.classList.add(CSS$s.closingIdle);
+      this.closeModal();
     }
   }
   /** Open the modal */
   openModal() {
+    if (this.ignoreOpenChange) {
+      return;
+    }
+    this.ignoreOpenChange = true;
     this.el.addEventListener("calciteModalOpen", this.openEnd);
     this.open = true;
-    this.isOpen = true;
+    this.opened = true;
     const titleEl = getSlotted(this.el, SLOTS$e.header);
     const contentEl = getSlotted(this.el, SLOTS$e.content);
     this.titleId = ensureId(titleEl);
@@ -33912,6 +33982,7 @@ class Modal {
       // use an inline style instead of a utility class to avoid global class declarations.
       document.documentElement.style.setProperty("overflow", "hidden");
     }
+    this.ignoreOpenChange = false;
   }
   removeOverflowHiddenClass() {
     document.documentElement.style.setProperty("overflow", this.initialOverflowCSS);
@@ -33930,6 +34001,7 @@ class Modal {
     "$tagName$": "calcite-modal",
     "$members$": {
       "open": [1540],
+      "opened": [1540],
       "beforeClose": [16],
       "closeButtonDisabled": [516, "close-button-disabled"],
       "focusTrapDisabled": [516, "focus-trap-disabled"],
@@ -33948,7 +34020,6 @@ class Modal {
       "hasFooter": [32],
       "hasContentTop": [32],
       "hasContentBottom": [32],
-      "isOpen": [32],
       "effectiveLocale": [32],
       "defaultMessages": [32],
       "setFocus": [64],
@@ -33957,7 +34028,7 @@ class Modal {
     },
     "$listeners$": [[8, "keydown", "handleEscape"]],
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": [["open", "open"], ["closeButtonDisabled", "close-button-disabled"], ["focusTrapDisabled", "focus-trap-disabled"], ["outsideCloseDisabled", "outside-close-disabled"], ["docked", "docked"], ["escapeDisabled", "escape-disabled"], ["scale", "scale"], ["width", "width"], ["fullscreen", "fullscreen"], ["kind", "kind"]]
+    "$attrsToReflect$": [["open", "open"], ["opened", "opened"], ["closeButtonDisabled", "close-button-disabled"], ["focusTrapDisabled", "focus-trap-disabled"], ["outsideCloseDisabled", "outside-close-disabled"], ["docked", "docked"], ["escapeDisabled", "escape-disabled"], ["scale", "scale"], ["width", "width"], ["fullscreen", "fullscreen"], ["kind", "kind"]]
   }; }
 }
 
@@ -33967,7 +34038,7 @@ const SLOTS$d = {
   link: "link",
   actionsEnd: "actions-end",
 };
-const CSS$q = {
+const CSS$r = {
   actionsEnd: "actions-end",
   close: "notice-close",
   container: "container",
@@ -34046,11 +34117,11 @@ class Notice {
   }
   render() {
     const { el } = this;
-    const closeButton = (hAsync("button", { "aria-label": this.messages.close, class: CSS$q.close, onClick: this.close,
-      // eslint-disable-next-line react/jsx-sort-props
+    const closeButton = (hAsync("button", { "aria-label": this.messages.close, class: CSS$r.close, onClick: this.close,
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.closeButton = el) }, hAsync("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
     const hasActionEnd = getSlotted(el, SLOTS$d.actionsEnd);
-    return (hAsync("div", { class: CSS$q.container }, this.requestedIcon ? (hAsync("div", { class: CSS$q.icon }, hAsync("calcite-icon", { flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, hAsync("div", { class: CSS$q.content }, hAsync("slot", { name: SLOTS$d.title }), hAsync("slot", { name: SLOTS$d.message }), hAsync("slot", { name: SLOTS$d.link })), hasActionEnd ? (hAsync("div", { class: CSS$q.actionsEnd }, hAsync("slot", { name: SLOTS$d.actionsEnd }))) : null, this.closable ? closeButton : null));
+    return (hAsync("div", { class: CSS$r.container }, this.requestedIcon ? (hAsync("div", { class: CSS$r.icon }, hAsync("calcite-icon", { flipRtl: this.iconFlipRtl, icon: this.requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, hAsync("div", { class: CSS$r.content }, hAsync("slot", { name: SLOTS$d.title }), hAsync("slot", { name: SLOTS$d.message }), hAsync("slot", { name: SLOTS$d.link })), hasActionEnd ? (hAsync("div", { class: CSS$r.actionsEnd }, hAsync("slot", { name: SLOTS$d.actionsEnd }))) : null, this.closable ? closeButton : null));
   }
   //--------------------------------------------------------------------------
   //
@@ -34229,7 +34300,7 @@ class OptionGroup {
   }; }
 }
 
-const CSS$p = {
+const CSS$q = {
   page: "page",
   selected: "is-selected",
   previous: "previous",
@@ -34387,8 +34458,8 @@ class Pagination {
     const displayedPage = numberStringFormatter.localize(page.toString());
     const selected = start === this.startItem;
     return (hAsync("button", { "aria-current": selected ? "page" : "false", class: {
-        [CSS$p.page]: true,
-        [CSS$p.selected]: selected,
+        [CSS$q.page]: true,
+        [CSS$q.selected]: selected,
       }, onClick: () => {
         this.startItem = start;
         this.emitUpdate();
@@ -34396,12 +34467,12 @@ class Pagination {
   }
   renderLeftEllipsis() {
     if (this.totalItems / this.pageSize > maxPagesDisplayed && this.showLeftEllipsis()) {
-      return hAsync("span", { class: `${CSS$p.ellipsis} ${CSS$p.ellipsisStart}` }, "\u2026");
+      return hAsync("span", { class: `${CSS$q.ellipsis} ${CSS$q.ellipsisStart}` }, "\u2026");
     }
   }
   renderRightEllipsis() {
     if (this.totalItems / this.pageSize > maxPagesDisplayed && this.showRightEllipsis()) {
-      return hAsync("span", { class: `${CSS$p.ellipsis} ${CSS$p.ellipsisEnd}` }, "\u2026");
+      return hAsync("span", { class: `${CSS$q.ellipsis} ${CSS$q.ellipsisEnd}` }, "\u2026");
     }
   }
   render() {
@@ -34409,11 +34480,11 @@ class Pagination {
     const prevDisabled = pageSize === 1 ? startItem <= pageSize : startItem < pageSize;
     const nextDisabled = pageSize === 1 ? startItem + pageSize > totalItems : startItem + pageSize > totalItems;
     return (hAsync(Fragment, null, hAsync("button", { "aria-label": this.messages.previous, class: {
-        [CSS$p.previous]: true,
-        [CSS$p.disabled]: prevDisabled,
+        [CSS$q.previous]: true,
+        [CSS$q.disabled]: prevDisabled,
       }, disabled: prevDisabled, onClick: this.previousClicked }, hAsync("calcite-icon", { flipRtl: true, icon: "chevronLeft", scale: this.scale === "l" ? "m" : "s" })), totalItems > pageSize ? this.renderPage(1) : null, this.renderLeftEllipsis(), this.renderPages(), this.renderRightEllipsis(), this.renderPage(this.getLastStart()), hAsync("button", { "aria-label": this.messages.next, class: {
-        [CSS$p.next]: true,
-        [CSS$p.disabled]: nextDisabled,
+        [CSS$q.next]: true,
+        [CSS$q.disabled]: nextDisabled,
       }, disabled: nextDisabled, onClick: this.nextClicked }, hAsync("calcite-icon", { flipRtl: true, icon: "chevronRight", scale: this.scale === "l" ? "m" : "s" }))));
   }
   static get delegatesFocus() { return true; }
@@ -34624,32 +34695,32 @@ class Panel {
   // --------------------------------------------------------------------------
   renderHeaderContent() {
     const { heading, headingLevel, description, hasHeaderContent } = this;
-    const headingNode = heading ? (hAsync(Heading, { class: CSS$H.heading, level: headingLevel }, heading)) : null;
-    const descriptionNode = description ? hAsync("span", { class: CSS$H.description }, description) : null;
-    return !hasHeaderContent && (headingNode || descriptionNode) ? (hAsync("div", { class: CSS$H.headerContent, key: "header-content" }, headingNode, descriptionNode)) : null;
+    const headingNode = heading ? (hAsync(Heading, { class: CSS$I.heading, level: headingLevel }, heading)) : null;
+    const descriptionNode = description ? hAsync("span", { class: CSS$I.description }, description) : null;
+    return !hasHeaderContent && (headingNode || descriptionNode) ? (hAsync("div", { class: CSS$I.headerContent, key: "header-content" }, headingNode, descriptionNode)) : null;
   }
   renderActionBar() {
-    return (hAsync("div", { class: CSS$H.actionBarContainer, hidden: !this.hasActionBar }, hAsync("slot", { name: SLOTS$m.actionBar, onSlotchange: this.handleActionBarSlotChange })));
+    return (hAsync("div", { class: CSS$I.actionBarContainer, hidden: !this.hasActionBar }, hAsync("slot", { name: SLOTS$m.actionBar, onSlotchange: this.handleActionBarSlotChange })));
   }
   /**
    * Allows user to override the entire header-content node.
    */
   renderHeaderSlottedContent() {
-    return (hAsync("div", { class: CSS$H.headerContent, hidden: !this.hasHeaderContent, key: "slotted-header-content" }, hAsync("slot", { name: SLOTS$m.headerContent, onSlotchange: this.handleHeaderContentSlotChange })));
+    return (hAsync("div", { class: CSS$I.headerContent, hidden: !this.hasHeaderContent, key: "slotted-header-content" }, hAsync("slot", { name: SLOTS$m.headerContent, onSlotchange: this.handleHeaderContentSlotChange })));
   }
   renderHeaderStartActions() {
     const { hasStartActions } = this;
-    return (hAsync("div", { class: { [CSS$H.headerActionsStart]: true, [CSS$H.headerActions]: true }, hidden: !hasStartActions, key: "header-actions-start" }, hAsync("slot", { name: SLOTS$m.headerActionsStart, onSlotchange: this.handleHeaderActionsStartSlotChange })));
+    return (hAsync("div", { class: { [CSS$I.headerActionsStart]: true, [CSS$I.headerActions]: true }, hidden: !hasStartActions, key: "header-actions-start" }, hAsync("slot", { name: SLOTS$m.headerActionsStart, onSlotchange: this.handleHeaderActionsStartSlotChange })));
   }
   renderHeaderActionsEnd() {
     const { close, hasEndActions, messages, closable, hasMenuItems } = this;
     const text = messages.close;
     const closableNode = closable ? (hAsync("calcite-action", { "aria-label": text, "data-test": "close", icon: ICONS$a.close, onClick: close, text: text, title: text,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setCloseRef })) : null;
     const slotNode = (hAsync("slot", { name: SLOTS$m.headerActionsEnd, onSlotchange: this.handleHeaderActionsEndSlotChange }));
     const showContainer = hasEndActions || closableNode || hasMenuItems;
-    return (hAsync("div", { class: { [CSS$H.headerActionsEnd]: true, [CSS$H.headerActions]: true }, hidden: !showContainer, key: "header-actions-end" }, slotNode, this.renderMenu(), closableNode));
+    return (hAsync("div", { class: { [CSS$I.headerActionsEnd]: true, [CSS$I.headerActions]: true }, hidden: !showContainer, key: "header-actions-end" }, slotNode, this.renderMenu(), closableNode));
   }
   renderMenu() {
     const { hasMenuItems, messages, menuOpen } = this;
@@ -34665,25 +34736,25 @@ class Panel {
       closable ||
       hasMenuItems;
     this.showHeaderContent = showHeaderContent;
-    return (hAsync("header", { class: CSS$H.header, hidden: !(showHeaderContent || hasActionBar) }, hAsync("div", { class: { [CSS$H.headerContainer]: true, [CSS$H.headerContainerBorderEnd]: hasActionBar }, hidden: !showHeaderContent }, this.renderHeaderStartActions(), this.renderHeaderSlottedContent(), headerContentNode, this.renderHeaderActionsEnd()), this.renderActionBar()));
+    return (hAsync("header", { class: CSS$I.header, hidden: !(showHeaderContent || hasActionBar) }, hAsync("div", { class: { [CSS$I.headerContainer]: true, [CSS$I.headerContainerBorderEnd]: hasActionBar }, hidden: !showHeaderContent }, this.renderHeaderStartActions(), this.renderHeaderSlottedContent(), headerContentNode, this.renderHeaderActionsEnd()), this.renderActionBar()));
   }
   renderFooterNode() {
     const { hasFooterContent, hasFooterActions } = this;
     const showFooter = hasFooterContent || hasFooterActions;
-    return (hAsync("footer", { class: CSS$H.footer, hidden: !showFooter }, hAsync("slot", { key: "footer-slot", name: SLOTS$m.footer, onSlotchange: this.handleFooterSlotChange }), hAsync("slot", { key: "footer-actions-slot", name: SLOTS$m.footerActions, onSlotchange: this.handleFooterActionsSlotChange })));
+    return (hAsync("footer", { class: CSS$I.footer, hidden: !showFooter }, hAsync("slot", { key: "footer-slot", name: SLOTS$m.footer, onSlotchange: this.handleFooterSlotChange }), hAsync("slot", { key: "footer-actions-slot", name: SLOTS$m.footerActions, onSlotchange: this.handleFooterActionsSlotChange })));
   }
   renderContent() {
-    return (hAsync("div", { class: CSS$H.contentWrapper, onScroll: this.panelScrollHandler,
-      // eslint-disable-next-line react/jsx-sort-props
+    return (hAsync("div", { class: CSS$I.contentWrapper, onScroll: this.panelScrollHandler,
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setPanelScrollEl }, hAsync("slot", null), this.renderFab()));
   }
   renderFab() {
-    return (hAsync("div", { class: CSS$H.fabContainer, hidden: !this.hasFab }, hAsync("slot", { name: SLOTS$m.fab, onSlotchange: this.handleFabSlotChange })));
+    return (hAsync("div", { class: CSS$I.fabContainer, hidden: !this.hasFab }, hAsync("slot", { name: SLOTS$m.fab, onSlotchange: this.handleFabSlotChange })));
   }
   render() {
     const { loading, panelKeyDownHandler, closed, closable } = this;
-    const panelNode = (hAsync("article", { "aria-busy": toAriaBoolean(loading), class: CSS$H.container, hidden: closed, onKeyDown: panelKeyDownHandler, tabIndex: closable ? 0 : -1,
-      // eslint-disable-next-line react/jsx-sort-props
+    const panelNode = (hAsync("article", { "aria-busy": toAriaBoolean(loading), class: CSS$I.container, hidden: closed, onKeyDown: panelKeyDownHandler, tabIndex: closable ? 0 : -1,
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setContainerRef }, this.renderHeaderNode(), this.renderContent(), this.renderFooterNode()));
     return (hAsync(Fragment, null, loading ? hAsync("calcite-scrim", { loading: loading }) : null, panelNode));
   }
@@ -34728,7 +34799,7 @@ class Panel {
   }; }
 }
 
-const CSS$o = {
+const CSS$p = {
   sticky: "sticky-pos",
 };
 var ICON_TYPES$1;
@@ -34741,7 +34812,7 @@ const SLOTS$c = {
   menuActions: "menu-actions",
 };
 
-const CSS$n = {
+const CSS$o = {
   heading: "heading",
   container: "container",
   indented: "container--indented",
@@ -35065,11 +35136,11 @@ const List = ({ props: { disabled, loading, filterEnabled, dataForFilter, handle
   return (hAsync(Host, { "aria-busy": toAriaBoolean(loading), role: "menu", ...rest },
     hAsync("section", null,
       dragEnabled ? (hAsync("span", { "aria-live": "assertive", class: "assistive-text", 
-        // eslint-disable-next-line react/jsx-sort-props
+        // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
         ref: storeAssistiveEl })) : null,
-      hAsync("header", { class: { [CSS$o.sticky]: true } },
+      hAsync("header", { class: { [CSS$p.sticky]: true } },
         filterEnabled ? (hAsync("calcite-filter", { "aria-label": filterPlaceholder, disabled: loading || disabled, items: dataForFilter, onCalciteFilterChange: handleFilterEvent, placeholder: filterPlaceholder, value: filterText, 
-          // eslint-disable-next-line react/jsx-sort-props
+          // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
           ref: setFilterEl })) : null,
         hAsync("slot", { name: SLOTS$c.menuActions })),
       loading ? hAsync("calcite-scrim", { loading: loading }) : null,
@@ -35258,14 +35329,14 @@ class PickListGroup {
     const { el, groupTitle, headingLevel } = this;
     const hasParentItem = getSlotted(el, SLOTS$b.parentItem) !== null;
     const sectionClasses = {
-      [CSS$n.container]: true,
-      [CSS$n.indented]: hasParentItem,
+      [CSS$o.container]: true,
+      [CSS$o.indented]: hasParentItem,
     };
     const title = groupTitle;
     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$n.heading, level: level }, title)) : null, hAsync("slot", { name: SLOTS$b.parentItem }), hAsync("section", { class: sectionClasses }, hAsync("slot", null))));
+    return (hAsync(Fragment, null, title ? (hAsync(Heading, { class: CSS$o.heading, level: level }, title)) : null, hAsync("slot", { name: SLOTS$b.parentItem }), hAsync("section", { class: sectionClasses }, hAsync("slot", null))));
   }
   get el() { return getElement(this); }
   static get style() { return pickListGroupCss; }
@@ -35282,7 +35353,7 @@ class PickListGroup {
   }; }
 }
 
-const CSS$m = {
+const CSS$n = {
   actions: "actions",
   actionsEnd: "actions--end",
   actionsStart: "actions--start",
@@ -35444,28 +35515,28 @@ class PickListItem {
       return null;
     }
     return (hAsync("span", { class: {
-        [CSS$m.icon]: true,
-        [CSS$m.iconDot]: icon === ICON_TYPES$1.circle,
+        [CSS$n.icon]: true,
+        [CSS$n.iconDot]: icon === ICON_TYPES$1.circle,
       }, onClick: this.pickListClickHandler }, icon === ICON_TYPES$1.square ? (hAsync("calcite-icon", { flipRtl: iconFlipRtl, icon: ICONS$5.checked, scale: "s" })) : null));
   }
   renderRemoveAction() {
-    return this.removable ? (hAsync("calcite-action", { class: CSS$m.remove, icon: ICONS$5.remove, onClick: this.removeClickHandler, slot: SLOTS$a.actionsEnd, text: this.messages.remove })) : null;
+    return this.removable ? (hAsync("calcite-action", { class: CSS$n.remove, icon: ICONS$5.remove, onClick: this.removeClickHandler, slot: SLOTS$a.actionsEnd, text: this.messages.remove })) : null;
   }
   renderActionsStart() {
     const { el } = this;
     const hasActionsStart = getSlotted(el, SLOTS$a.actionsStart);
-    return hasActionsStart ? (hAsync("div", { class: { [CSS$m.actions]: true, [CSS$m.actionsStart]: true } }, hAsync("slot", { name: SLOTS$a.actionsStart }))) : null;
+    return hasActionsStart ? (hAsync("div", { class: { [CSS$n.actions]: true, [CSS$n.actionsStart]: true } }, hAsync("slot", { name: SLOTS$a.actionsStart }))) : null;
   }
   renderActionsEnd() {
     const { el, removable } = this;
     const hasActionsEnd = getSlotted(el, SLOTS$a.actionsEnd);
-    return hasActionsEnd || removable ? (hAsync("div", { class: { [CSS$m.actions]: true, [CSS$m.actionsEnd]: true } }, hAsync("slot", { name: SLOTS$a.actionsEnd }), this.renderRemoveAction())) : null;
+    return hasActionsEnd || removable ? (hAsync("div", { class: { [CSS$n.actions]: true, [CSS$n.actionsEnd]: true } }, hAsync("slot", { name: SLOTS$a.actionsEnd }), this.renderRemoveAction())) : null;
   }
   render() {
     const { description, label } = this;
-    return (hAsync(Fragment, null, this.renderIcon(), this.renderActionsStart(), hAsync("label", { "aria-label": label, class: CSS$m.label, onClick: this.pickListClickHandler, onKeyDown: this.pickListKeyDownHandler, tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
-      ref: (focusEl) => (this.focusEl = focusEl) }, hAsync("div", { "aria-checked": toAriaBoolean(this.selected), class: CSS$m.textContainer, role: "menuitemcheckbox" }, hAsync("span", { class: CSS$m.title }, label), description ? hAsync("span", { class: CSS$m.description }, description) : null)), this.renderActionsEnd()));
+    return (hAsync(Fragment, null, this.renderIcon(), this.renderActionsStart(), hAsync("label", { "aria-label": label, class: CSS$n.label, onClick: this.pickListClickHandler, onKeyDown: this.pickListKeyDownHandler, tabIndex: 0,
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+      ref: (focusEl) => (this.focusEl = focusEl) }, hAsync("div", { "aria-checked": toAriaBoolean(this.selected), class: CSS$n.textContainer, role: "menuitemcheckbox" }, hAsync("span", { class: CSS$n.title }, label), description ? hAsync("span", { class: CSS$n.description }, description) : null)), this.renderActionsEnd()));
   }
   static get assetsDirs() { return ["assets"]; }
   get el() { return getElement(this); }
@@ -35508,7 +35579,7 @@ class PickListItem {
   }; }
 }
 
-const CSS$l = {
+const CSS$m = {
   container: "container",
   imageContainer: "image-container",
   closeButtonContainer: "close-button-container",
@@ -35602,7 +35673,7 @@ class PopoverManager {
   }
 }
 
-const CSS$k = {
+const CSS$l = {
   arrow: "calcite-floating-ui-arrow",
   arrowStroke: "calcite-floating-ui-arrow__stroke",
 };
@@ -35632,8 +35703,8 @@ const FloatingArrow = ({ floatingLayout, key, ref, }) => {
     ` L${width - svgX},${height}` +
     ` Q${svgX},${height} ${svgX},${height}` +
     " Z";
-  return (hAsync("svg", { "aria-hidden": "true", class: CSS$k.arrow, height: width, key: key, ref: ref, viewBox: `0 0 ${width} ${width + (!isVertical ? strokeWidth : 0)}`, width: width + (isVertical ? strokeWidth : 0) },
-    strokeWidth > 0 && (hAsync("path", { class: CSS$k.arrowStroke, d: dValue, fill: "none", "stroke-width": strokeWidth + 1 })),
+  return (hAsync("svg", { "aria-hidden": "true", class: CSS$l.arrow, height: width, key: key, ref: ref, viewBox: `0 0 ${width} ${width + (!isVertical ? strokeWidth : 0)}`, width: width + (isVertical ? strokeWidth : 0) },
+    strokeWidth > 0 && (hAsync("path", { class: CSS$l.arrowStroke, d: dValue, fill: "none", "stroke-width": strokeWidth + 1 })),
     hAsync("path", { d: dValue, stroke: "none" })));
 };
 
@@ -35885,31 +35956,31 @@ class Popover {
   // --------------------------------------------------------------------------
   renderCloseButton() {
     const { messages, closable } = this;
-    return closable ? (hAsync("div", { class: CSS$l.closeButtonContainer, key: CSS$l.closeButtonContainer }, hAsync("calcite-action", { appearance: "transparent", class: CSS$l.closeButton, onClick: this.hide, scale: this.scale, text: messages.close,
-      // eslint-disable-next-line react/jsx-sort-props
+    return closable ? (hAsync("div", { class: CSS$m.closeButtonContainer, key: CSS$m.closeButtonContainer }, hAsync("calcite-action", { appearance: "transparent", class: CSS$m.closeButton, onClick: this.hide, scale: this.scale, text: messages.close,
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (closeButtonEl) => (this.closeButtonEl = closeButtonEl) }, hAsync("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : this.scale })))) : null;
   }
   renderHeader() {
     const { heading, headingLevel } = this;
-    const headingNode = heading ? (hAsync(Heading, { class: CSS$l.heading, level: headingLevel }, heading)) : null;
-    return headingNode ? (hAsync("div", { class: CSS$l.header, key: CSS$l.header }, headingNode, this.renderCloseButton())) : null;
+    const headingNode = heading ? (hAsync(Heading, { class: CSS$m.heading, level: headingLevel }, heading)) : null;
+    return headingNode ? (hAsync("div", { class: CSS$m.header, key: CSS$m.header }, headingNode, this.renderCloseButton())) : null;
   }
   render() {
     const { effectiveReferenceElement, heading, label, open, pointerDisabled, floatingLayout } = this;
     const displayed = effectiveReferenceElement && open;
     const hidden = !displayed;
     const arrowNode = !pointerDisabled ? (hAsync(FloatingArrow, { floatingLayout: floatingLayout, key: "floating-arrow",
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.storeArrowEl })) : null;
     return (hAsync(Host, { "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "aria-live": "polite", "calcite-hydrated-hidden": hidden, id: this.getId(), role: "dialog" }, hAsync("div", { class: {
         [FloatingCSS.animation]: true,
         [FloatingCSS.animationActive]: displayed,
       },
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setTransitionEl }, arrowNode, hAsync("div", { class: {
-        [CSS$l.hasHeader]: !!heading,
-        [CSS$l.container]: true,
-      } }, this.renderHeader(), hAsync("div", { class: CSS$l.content }, hAsync("slot", null)), !heading ? this.renderCloseButton() : null))));
+        [CSS$m.hasHeader]: !!heading,
+        [CSS$m.container]: true,
+      } }, this.renderHeader(), hAsync("div", { class: CSS$m.content }, hAsync("slot", null)), !heading ? this.renderCloseButton() : null))));
   }
   static get assetsDirs() { return ["assets"]; }
   get el() { return getElement(this); }
@@ -36003,7 +36074,7 @@ class Progress {
   }; }
 }
 
-const CSS$j = {
+const CSS$k = {
   container: "container",
 };
 
@@ -36280,8 +36351,8 @@ class RadioButton {
   // --------------------------------------------------------------------------
   render() {
     const tabIndex = this.getTabIndex();
-    return (hAsync(Host, { onClick: this.clickHandler, onKeyDown: this.handleKeyDown }, hAsync("div", { "aria-checked": toAriaBoolean(this.checked), "aria-label": getLabelText(this), class: CSS$j.container, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, role: "radio", tabIndex: tabIndex,
-      // eslint-disable-next-line react/jsx-sort-props
+    return (hAsync(Host, { onClick: this.clickHandler, onKeyDown: this.handleKeyDown }, hAsync("div", { "aria-checked": toAriaBoolean(this.checked), "aria-label": getLabelText(this), class: CSS$k.container, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, role: "radio", tabIndex: tabIndex,
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setContainerEl }, hAsync("div", { class: "radio" })), hAsync(HiddenFormInputSlot, { component: this })));
   }
   get el() { return getElement(this); }
@@ -36454,7 +36525,7 @@ const StarIcon = ({ full, scale, partial }) => (hAsync("calcite-icon", { ...{
     scale,
   } }));
 
-const ratingCss = "/*!@:host([disabled])*/[disabled].sc-calcite-rating-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host([read-only]) *, :host([disabled]) *,\n:host([read-only]) ::slotted(*),\n:host([disabled]) ::slotted(*)*/[read-only].sc-calcite-rating-h *.sc-calcite-rating,[disabled].sc-calcite-rating-h *.sc-calcite-rating,.sc-calcite-rating-h[read-only] .sc-calcite-rating-s>*,.sc-calcite-rating-h[disabled] .sc-calcite-rating-s>*{pointer-events:none}/*!@:host*/.sc-calcite-rating-h{position:relative;display:flex;align-items:center;inline-size:-moz-fit-content;inline-size:fit-content}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-rating-h[disabled] .sc-calcite-rating-s>[calcite-hydrated][disabled],[disabled].sc-calcite-rating-h [calcite-hydrated][disabled].sc-calcite-rating{opacity:1}/*!@:host([scale=s])*/[scale=s].sc-calcite-rating-h{block-size:1.5rem;--calcite-rating-spacing-unit:0.25rem}/*!@:host([scale=m])*/[scale=m].sc-calcite-rating-h{block-size:2rem;--calcite-rating-spacing-unit:0.5rem}/*!@:host([scale=l])*/[scale=l].sc-calcite-rating-h{block-size:2.75rem;--calcite-rating-spacing-unit:0.75rem}/*!@.fieldset*/.fieldset.sc-calcite-rating{margin:0;display:flex;border-width:0;padding:0;align-items:center;gap:var(--calcite-rating-spacing-unit)}/*!@.wrapper*/.wrapper.sc-calcite-rating{display:inline-block}/*!@.star*/.star.sc-calcite-rating{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;position:relative;display:flex;flex-direction:column;cursor:pointer;color:var(--calcite-ui-border-input)}/*!@.focused*/.focused.sc-calcite-rating{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}/*!@.average,\n.fraction*/.average.sc-calcite-rating,.fraction.sc-calcite-rating{color:var(--calcite-ui-warning)}/*!@.hovered,\n.selected*/.hovered.sc-calcite-rating,.selected.sc-calcite-rating{color:var(--calcite-ui-brand)}/*!@.fraction*/.fraction.sc-calcite-rating{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;position:absolute;pointer-events:none;inset-block-start:0;overflow:hidden;inset-inline-start:0}/*!@calcite-chip*/calcite-chip.sc-calcite-rating{pointer-events:none;cursor:default}/*!@.number--average*/.number--average.sc-calcite-rating{font-weight:bold}/*!@.number--count*/.number--count.sc-calcite-rating{color:var(--calcite-ui-text-2);font-style:italic}/*!@.number--count:not(:first-child)*/.number--count.sc-calcite-rating:not(:first-child){margin-inline-start:var(--calcite-rating-spacing-unit)}/*!@.visually-hidden*/.visually-hidden.sc-calcite-rating{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}/*!@::slotted(input[slot=hidden-form-input])*/.sc-calcite-rating-s>input[slot=hidden-form-input]{margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}/*!@:host([hidden])*/[hidden].sc-calcite-rating-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-rating{display:none}";
+const ratingCss = "/*!@:host([disabled])*/[disabled].sc-calcite-rating-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host([read-only]) *, :host([disabled]) *,\n:host([read-only]) ::slotted(*),\n:host([disabled]) ::slotted(*)*/[read-only].sc-calcite-rating-h *.sc-calcite-rating,[disabled].sc-calcite-rating-h *.sc-calcite-rating,.sc-calcite-rating-h[read-only] .sc-calcite-rating-s>*,.sc-calcite-rating-h[disabled] .sc-calcite-rating-s>*{pointer-events:none}/*!@:host*/.sc-calcite-rating-h{position:relative;display:flex;align-items:center;inline-size:-moz-fit-content;inline-size:fit-content}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-rating-h[disabled] .sc-calcite-rating-s>[calcite-hydrated][disabled],[disabled].sc-calcite-rating-h [calcite-hydrated][disabled].sc-calcite-rating{opacity:1}/*!@:host([scale=s])*/[scale=s].sc-calcite-rating-h{block-size:1.5rem;--calcite-rating-spacing-unit:0.25rem}/*!@:host([scale=m])*/[scale=m].sc-calcite-rating-h{block-size:2rem;--calcite-rating-spacing-unit:0.5rem}/*!@:host([scale=l])*/[scale=l].sc-calcite-rating-h{block-size:2.75rem;--calcite-rating-spacing-unit:0.75rem}/*!@.fieldset*/.fieldset.sc-calcite-rating{margin:0;display:flex;border-width:0;padding:0;align-items:center;gap:var(--calcite-rating-spacing-unit)}/*!@.wrapper*/.wrapper.sc-calcite-rating{display:inline-block}/*!@.star*/.star.sc-calcite-rating{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;position:relative;display:flex;flex-direction:column;cursor:pointer;color:var(--calcite-ui-border-input)}/*!@.star:focus*/.star.sc-calcite-rating:focus{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}/*!@.average,\n.fraction*/.average.sc-calcite-rating,.fraction.sc-calcite-rating{color:var(--calcite-ui-warning)}/*!@.hovered,\n.selected*/.hovered.sc-calcite-rating,.selected.sc-calcite-rating{color:var(--calcite-ui-brand)}/*!@.fraction*/.fraction.sc-calcite-rating{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;position:absolute;pointer-events:none;inset-block-start:0;overflow:hidden;inset-inline-start:0}/*!@calcite-chip*/calcite-chip.sc-calcite-rating{pointer-events:none;cursor:default}/*!@.number--average*/.number--average.sc-calcite-rating{font-weight:bold}/*!@.number--count*/.number--count.sc-calcite-rating{color:var(--calcite-ui-text-2);font-style:italic}/*!@.number--count:not(:first-child)*/.number--count.sc-calcite-rating:not(:first-child){margin-inline-start:var(--calcite-rating-spacing-unit)}/*!@.visually-hidden*/.visually-hidden.sc-calcite-rating{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}/*!@::slotted(input[slot=hidden-form-input])*/.sc-calcite-rating-s>input[slot=hidden-form-input]{margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}/*!@:host([hidden])*/[hidden].sc-calcite-rating-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-rating{display:none}";
 
 class Rating {
   constructor(hostRef) {
@@ -36466,29 +36537,12 @@ class Rating {
     this.handleRatingPointerOut = () => {
       this.isKeyboardInteraction = true;
       this.hoverValue = null;
-      this.focusValue = null;
-      this.hasFocus = false;
-    };
-    this.handleRatingFocusIn = () => {
-      const selectedInput = this.value > 0 ? this.value - 1 : 0;
-      const focusInput = this.inputRefs[selectedInput];
-      const focusValue = Number(focusInput.value);
-      focusInput.select();
-      this.focusValue = focusValue;
-      this.hoverValue = focusValue;
-      this.hasFocus = true;
-    };
-    this.handleRatingFocusLeave = () => {
-      this.focusValue = null;
-      this.hoverValue = null;
-      this.hasFocus = false;
     };
     this.handleHostKeyDown = () => {
       this.isKeyboardInteraction = true;
     };
-    this.handleInputKeyDown = (event) => {
-      const target = event.currentTarget;
-      const inputVal = Number(target.value);
+    this.handleLabelKeyDown = (event) => {
+      const inputValue = this.getValueFromLabelEvent(event);
       const key = event.key;
       const numberKey = key == " " ? undefined : Number(key);
       this.emit = true;
@@ -36496,20 +36550,20 @@ class Rating {
         switch (key) {
           case "Enter":
           case " ":
-            this.value = !this.required && this.value === inputVal ? 0 : inputVal;
+            this.value = !this.required && this.value === inputValue ? 0 : inputValue;
             break;
           case "ArrowLeft":
-            this.value = inputVal - 1;
+            this.value = this.getPreviousRatingValue(inputValue);
+            this.updateFocus();
+            event.preventDefault();
             break;
           case "ArrowRight":
-            this.value = inputVal + 1;
+            this.value = this.getNextRatingValue(inputValue);
+            this.updateFocus();
+            event.preventDefault();
             break;
           case "Tab":
-            if (this.hasFocus) {
-              this.hasFocus = false;
-              this.focusValue = null;
-              this.hoverValue = null;
-            }
+            this.hoverValue = null;
         }
       }
       else {
@@ -36519,33 +36573,42 @@ class Rating {
         else if (this.required && numberKey > 0 && numberKey <= this.max) {
           this.value = numberKey;
         }
+        this.updateFocus();
       }
     };
     this.handleInputChange = (event) => {
       if (this.isKeyboardInteraction === true) {
         const inputVal = Number(event.target["value"]);
-        this.focusValue = inputVal;
         this.hoverValue = inputVal;
         this.value = inputVal;
       }
     };
     this.handleLabelPointerOver = (event) => {
-      const target = event.currentTarget;
-      const newPointerValue = Number(target.firstChild["value"] || 0);
-      this.hoverValue = newPointerValue;
-      this.focusValue = null;
+      this.hoverValue = this.getValueFromLabelEvent(event);
     };
     this.handleLabelPointerDown = (event) => {
       const target = event.currentTarget;
-      const inputVal = Number(target.firstChild["value"] || 0);
-      this.focusValue = null;
-      this.hoverValue = null;
+      const inputValue = this.getValueFromLabelEvent(event);
+      this.hoverValue = inputValue;
       this.emit = true;
-      this.value = !this.required && this.value === inputVal ? 0 : inputVal;
+      this.value = !this.required && this.value === inputValue ? 0 : inputValue;
+      target.focus();
+    };
+    this.handleLabelClick = (event) => {
+      //preventing pointerdown event will supress any compatability mouse events except for click event.
+      event.preventDefault();
+    };
+    this.handleLabelFocus = (event) => {
+      const inputValue = this.getValueFromLabelEvent(event);
+      this.hoverValue = inputValue;
+    };
+    this.setLabelEl = (el) => {
+      this.labelElements.push(el);
     };
     this.emit = false;
     this.guid = `calcite-ratings-${guid()}`;
     this.isKeyboardInteraction = true;
+    this.labelElements = [];
     this.max = 5;
     this.average = undefined;
     this.count = undefined;
@@ -36562,15 +36625,12 @@ class Rating {
     this.effectiveLocale = "";
     this.defaultMessages = undefined;
     this.hoverValue = undefined;
-    this.focusValue = undefined;
-    this.hasFocus = undefined;
   }
   onMessagesChange() {
     /* wired up by t9n util */
   }
   handleValueUpdate(newValue) {
     this.hoverValue = newValue;
-    this.focusValue = newValue;
     if (this.emit) {
       this.calciteRatingChange.emit();
     }
@@ -36594,39 +36654,28 @@ class Rating {
   async componentWillLoad() {
     await setUpMessages(this);
     setUpLoadableComponent(this);
-    this.inputRefs = Array(this.max);
   }
   componentWillRender() {
     this.starsMap = Array.from({ length: this.max }, (_, i) => {
       const value = i + 1;
-      const average = !this.focusValue &&
-        !this.hoverValue &&
-        this.average &&
-        !this.value &&
-        value <= this.average;
+      const average = !this.hoverValue && this.average && !this.value && value <= this.average;
       const checked = value === this.value;
-      const focused = this.isKeyboardInteraction && this.hasFocus && this.focusValue === value;
       const fraction = this.average && this.average + 1 - value;
       const hovered = value <= this.hoverValue;
       const id = `${this.guid}-${value}`;
-      const partial = !this.focusValue &&
-        !this.hoverValue &&
-        !this.value &&
-        !hovered &&
-        fraction > 0 &&
-        fraction < 1;
+      const partial = !this.hoverValue && !this.value && !hovered && fraction > 0 && fraction < 1;
       const selected = this.value >= value;
+      const tabIndex = this.getTabIndex(value);
       return {
         average,
         checked,
-        focused,
         fraction,
         hovered,
         id,
-        idx: i,
         partial,
         selected,
         value,
+        tabIndex,
       };
     });
   }
@@ -36644,21 +36693,16 @@ class Rating {
     updateHostInteraction(this);
   }
   render() {
-    return (hAsync(Host, { onBlur: this.handleRatingFocusLeave, onFocus: this.handleRatingFocusIn, onKeyDown: this.handleHostKeyDown, onPointerOut: this.handleRatingPointerOut, onPointerOver: this.handleRatingPointerOver }, hAsync("span", { class: "wrapper" }, hAsync("fieldset", { class: "fieldset", disabled: this.disabled }, hAsync("legend", { class: "visually-hidden" }, this.messages.rating), this.starsMap.map(({ average, checked, focused, fraction, hovered, id, idx, partial, selected, value, }) => {
+    return (hAsync(Host, { onKeyDown: this.handleHostKeyDown, onPointerOut: this.handleRatingPointerOut, onPointerOver: this.handleRatingPointerOver }, hAsync("span", { class: "wrapper" }, hAsync("fieldset", { class: "fieldset", disabled: this.disabled }, hAsync("legend", { class: "visually-hidden" }, this.messages.rating), this.starsMap.map(({ average, checked, fraction, hovered, id, partial, selected, value, tabIndex }) => {
       return (hAsync("label", { class: {
           star: true,
-          focused,
           selected,
           hovered,
           average,
           partial,
-        }, htmlFor: id, onPointerDown: this.handleLabelPointerDown, onPointerOver: this.handleLabelPointerOver }, hAsync("input", { checked: checked, class: "visually-hidden", disabled: this.disabled || this.readOnly, id: id, name: this.guid, onChange: this.handleInputChange, onKeyDown: this.handleInputKeyDown, type: "radio", value: value,
+        }, "data-value": value, htmlFor: id, onClick: this.handleLabelClick, onFocus: this.handleLabelFocus, onKeyDown: this.handleLabelKeyDown, onPointerDown: this.handleLabelPointerDown, onPointerOver: this.handleLabelPointerOver, tabIndex: tabIndex,
         // eslint-disable-next-line react/jsx-sort-props
-        ref: (el) => {
-          this.inputRefs[idx] = el;
-          return ((value === 1 || value === this.value) &&
-            (this.inputFocusRef = el));
-        } }), hAsync(StarIcon, { full: selected || average, scale: this.scale }), partial && (hAsync("div", { class: "fraction", style: { width: `${fraction * 100}%` } }, hAsync(StarIcon, { full: true, partial: true, scale: this.scale }))), hAsync("span", { class: "visually-hidden" }, this.messages.stars.replace("{num}", `${value}`))));
+        ref: this.setLabelEl }, hAsync("input", { checked: checked, class: "visually-hidden", disabled: this.disabled || this.readOnly, id: id, name: this.guid, onChange: this.handleInputChange, tabIndex: -1, type: "radio", value: value }), hAsync(StarIcon, { full: selected || average, scale: this.scale }), partial && (hAsync("div", { class: "fraction", style: { width: `${fraction * 100}%` } }, hAsync(StarIcon, { full: true, partial: true, scale: this.scale }))), hAsync("span", { class: "visually-hidden" }, this.messages.stars.replace("{num}", `${value}`))));
     }), (this.count || this.average) && this.showChip ? (hAsync("calcite-chip", { scale: this.scale, value: this.count?.toString() }, !!this.average && hAsync("span", { class: "number--average" }, this.average.toString()), !!this.count && hAsync("span", { class: "number--count" }, "(", this.count?.toString(), ")"))) : null), hAsync(HiddenFormInputSlot, { component: this }))));
   }
   //--------------------------------------------------------------------------
@@ -36669,6 +36713,26 @@ class Rating {
   onLabelClick() {
     this.setFocus();
   }
+  updateFocus() {
+    this.hoverValue = this.value;
+    this.labelElements[this.value - 1].focus();
+  }
+  getTabIndex(value) {
+    if (this.readOnly || (this.value !== value && (this.value || value !== 1))) {
+      return -1;
+    }
+    return 0;
+  }
+  getValueFromLabelEvent(event) {
+    const target = event.currentTarget;
+    return Number(target.getAttribute("data-value"));
+  }
+  getNextRatingValue(currentValue) {
+    return currentValue === 5 ? 1 : currentValue + 1;
+  }
+  getPreviousRatingValue(currentValue) {
+    return currentValue === 1 ? 5 : currentValue - 1;
+  }
   //--------------------------------------------------------------------------
   //
   //  Public Methods
@@ -36677,7 +36741,7 @@ class Rating {
   /** Sets focus on the component. */
   async setFocus() {
     await componentFocusable(this);
-    this.inputFocusRef?.focus();
+    focusFirstTabbable(this.el);
   }
   static get assetsDirs() { return ["assets"]; }
   get el() { return getElement(this); }
@@ -36706,8 +36770,6 @@ class Rating {
       "effectiveLocale": [32],
       "defaultMessages": [32],
       "hoverValue": [32],
-      "focusValue": [32],
-      "hasFocus": [32],
       "setFocus": [64]
     },
     "$listeners$": undefined,
@@ -36716,7 +36778,7 @@ class Rating {
   }; }
 }
 
-const CSS$i = {
+const CSS$j = {
   scrim: "scrim",
   content: "content",
 };
@@ -36786,7 +36848,7 @@ class Scrim {
   // --------------------------------------------------------------------------
   render() {
     const { hasContent, loading, messages } = this;
-    return (hAsync("div", { class: CSS$i.scrim }, loading ? (hAsync("calcite-loader", { label: messages.loading, ref: this.storeLoaderEl, scale: this.loaderScale })) : null, hAsync("div", { class: CSS$i.content, hidden: !hasContent }, hAsync("slot", { onSlotchange: this.handleDefaultSlotChange }))));
+    return (hAsync("div", { class: CSS$j.scrim }, loading ? (hAsync("calcite-loader", { label: messages.loading, ref: this.storeLoaderEl, scale: this.loaderScale })) : null, hAsync("div", { class: CSS$j.content, hidden: !hasContent }, hAsync("slot", { onSlotchange: this.handleDefaultSlotChange }))));
   }
   getScale(size) {
     if (size < BREAKPOINTS.s) {
@@ -36853,17 +36915,21 @@ class SegmentedControl {
         this.selectItem(event.target, true);
       }
     };
+    this.mutationObserver = createObserver();
     this.appearance = "solid";
     this.disabled = false;
     this.form = undefined;
     this.required = false;
-    this.layout = "horizontal";
     this.name = undefined;
+    this.layout = "horizontal";
     this.scale = "m";
     this.value = null;
     this.selectedItem = undefined;
     this.width = "auto";
   }
+  handlePropsChange() {
+    this.handleItemPropChange();
+  }
   valueHandler(value) {
     const items = this.getItems();
     items.forEach((item) => (item.checked = item.value === value));
@@ -36889,14 +36955,7 @@ class SegmentedControl {
   //--------------------------------------------------------------------------
   componentWillLoad() {
     setUpLoadableComponent(this);
-    const items = this.getItems();
-    const lastChecked = items.filter((item) => item.checked).pop();
-    if (lastChecked) {
-      this.selectItem(lastChecked);
-    }
-    else if (items[0]) {
-      items[0].tabIndex = 0;
-    }
+    this.setUpItems();
   }
   componentDidLoad() {
     afterConnectDefaultValueSet(this, this.value);
@@ -36906,11 +36965,14 @@ class SegmentedControl {
     connectInteractive(this);
     connectLabel(this);
     connectForm(this);
+    this.mutationObserver?.observe(this.el, { childList: true });
+    this.handleItemPropChange();
   }
   disconnectedCallback() {
     disconnectInteractive(this);
     disconnectLabel(this);
     disconnectForm(this);
+    this.mutationObserver?.unobserve(this.el);
   }
   componentDidRender() {
     updateHostInteraction(this);
@@ -36977,6 +37039,14 @@ class SegmentedControl {
     await componentFocusable(this);
     (this.selectedItem || this.getItems()[0])?.focus();
   }
+  handleItemPropChange() {
+    const items = this.getItems();
+    items.forEach((item) => {
+      item.appearance = this.appearance;
+      item.layout = this.layout;
+      item.scale = this.scale;
+    });
+  }
   //--------------------------------------------------------------------------
   //
   //  Private Methods
@@ -37009,8 +37079,21 @@ class SegmentedControl {
     });
     this.selectedItem = match;
   }
+  setUpItems() {
+    const items = this.getItems();
+    const lastChecked = items.filter((item) => item.checked).pop();
+    if (lastChecked) {
+      this.selectItem(lastChecked);
+    }
+    else if (items[0]) {
+      items[0].tabIndex = 0;
+    }
+  }
   get el() { return getElement(this); }
   static get watchers() { return {
+    "appearance": ["handlePropsChange"],
+    "layout": ["handlePropsChange"],
+    "scale": ["handlePropsChange"],
     "value": ["valueHandler"],
     "selectedItem": ["handleSelectedItemChange"]
   }; }
@@ -37023,8 +37106,8 @@ class SegmentedControl {
       "disabled": [516],
       "form": [513],
       "required": [516],
-      "layout": [513],
       "name": [513],
+      "layout": [513],
       "scale": [513],
       "value": [1025],
       "selectedItem": [1040],
@@ -37033,14 +37116,14 @@ class SegmentedControl {
     },
     "$listeners$": [[0, "calciteInternalSegmentedControlItemChange", "handleSelected"], [0, "keydown", "handleKeyDown"]],
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": [["appearance", "appearance"], ["disabled", "disabled"], ["form", "form"], ["required", "required"], ["layout", "layout"], ["name", "name"], ["scale", "scale"], ["width", "width"]]
+    "$attrsToReflect$": [["appearance", "appearance"], ["disabled", "disabled"], ["form", "form"], ["required", "required"], ["name", "name"], ["layout", "layout"], ["scale", "scale"], ["width", "width"]]
   }; }
 }
 
 const SLOTS$9 = {
   input: "input",
 };
-const CSS$h = {
+const CSS$i = {
   segmentedControlItemIcon: "segmented-control-item-icon",
 };
 
@@ -37055,17 +37138,22 @@ class SegmentedControlItem {
     this.iconStart = undefined;
     this.iconEnd = undefined;
     this.value = undefined;
+    this.appearance = "solid";
+    this.layout = "horizontal";
+    this.scale = "m";
   }
   handleCheckedChange() {
     this.calciteInternalSegmentedControlItemChange.emit();
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
   render() {
-    const { checked, value } = this;
-    const scale = getElementProp(this.el, "scale", "m");
-    const appearance = getElementProp(this.el, "appearance", "solid");
-    const layout = getElementProp(this.el, "layout", "horizontal");
-    const iconStartEl = this.iconStart ? (hAsync("calcite-icon", { class: CSS$h.segmentedControlItemIcon, flipRtl: this.iconFlipRtl, icon: this.iconStart, key: "icon-start", scale: "s" })) : null;
-    const iconEndEl = this.iconEnd ? (hAsync("calcite-icon", { class: CSS$h.segmentedControlItemIcon, flipRtl: this.iconFlipRtl, icon: this.iconEnd, key: "icon-end", scale: "s" })) : null;
+    const { appearance, checked, layout, scale, value } = this;
+    const iconStartEl = this.iconStart ? (hAsync("calcite-icon", { class: CSS$i.segmentedControlItemIcon, flipRtl: this.iconFlipRtl, icon: this.iconStart, key: "icon-start", scale: "s" })) : null;
+    const iconEndEl = this.iconEnd ? (hAsync("calcite-icon", { class: CSS$i.segmentedControlItemIcon, flipRtl: this.iconFlipRtl, icon: this.iconEnd, key: "icon-end", scale: "s" })) : null;
     return (hAsync(Host, { "aria-checked": toAriaBoolean(checked), "aria-label": value, role: "radio" }, hAsync("label", { class: {
         "label--scale-s": scale === "s",
         "label--scale-m": scale === "m",
@@ -37088,7 +37176,10 @@ class SegmentedControlItem {
       "iconFlipRtl": [516, "icon-flip-rtl"],
       "iconStart": [513, "icon-start"],
       "iconEnd": [513, "icon-end"],
-      "value": [1032]
+      "value": [1032],
+      "appearance": [1],
+      "layout": [1],
+      "scale": [1]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -37096,7 +37187,7 @@ class SegmentedControlItem {
   }; }
 }
 
-const CSS$g = {
+const CSS$h = {
   icon: "icon",
   iconContainer: "icon-container",
   select: "select",
@@ -37283,11 +37374,11 @@ class Select {
   //
   //--------------------------------------------------------------------------
   renderChevron() {
-    return (hAsync("div", { class: CSS$g.iconContainer }, hAsync("calcite-icon", { class: CSS$g.icon, icon: "chevron-down", scale: this.scale === "l" ? "m" : "s" })));
+    return (hAsync("div", { class: CSS$h.iconContainer }, hAsync("calcite-icon", { class: CSS$h.icon, icon: "chevron-down", scale: this.scale === "l" ? "m" : "s" })));
   }
   render() {
-    return (hAsync(Fragment, null, hAsync("select", { "aria-label": getLabelText(this), class: CSS$g.select, disabled: this.disabled, onChange: this.handleInternalSelectChange,
-      // eslint-disable-next-line react/jsx-sort-props
+    return (hAsync(Fragment, null, hAsync("select", { "aria-label": getLabelText(this), class: CSS$h.select, disabled: this.disabled, onChange: this.handleInternalSelectChange,
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.storeSelectRef }, hAsync("slot", null)), this.renderChevron(), hAsync(HiddenFormInputSlot, { component: this })));
   }
   get el() { return getElement(this); }
@@ -37317,6 +37408,239 @@ class Select {
   }; }
 }
 
+const CSS$g = {
+  scrim: "scrim",
+  container: "container",
+  containerOpen: "container--open",
+  content: "content",
+  containerSlottedInShell: "container--slotted-in-shell",
+};
+
+const sheetCss = "/*!@:host*/.sc-calcite-sheet-h{position:absolute;inset:0px;z-index:var(--calcite-app-z-index-overlay);display:flex;visibility:hidden !important;--calcite-sheet-scrim-background-internal:rgba(0, 0, 0, 0.85);--calcite-scrim-shadow-block-start-internal:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--calcite-scrim-shadow-block-end-internal:0 -4px 8px -1px rgba(0, 0, 0, 0.08), 0 -2px 4px -1px rgba(0, 0, 0, 0.04);--calcite-scrim-shadow-inline-start-internal:4px 0 8px -1px rgba(0, 0, 0, 0.08), 2px 0 4px -1px rgba(0, 0, 0, 0.04);--calcite-scrim-shadow-inline-end-internal:-4px 0 8px -1px rgba(0, 0, 0, 0.08), -2px 0 4px -1px rgba(0, 0, 0, 0.04)}/*!@.calcite--rtl*/.calcite--rtl.sc-calcite-sheet{--calcite-scrim-shadow-inline-start-internal:-4px 0 8px -1px rgba(0, 0, 0, 0.08), -2px 0 4px -1px rgba(0, 0, 0, 0.04);--calcite-scrim-shadow-inline-end-internal:4px 0 8px -1px rgba(0, 0, 0, 0.08), 2px 0 4px -1px rgba(0, 0, 0, 0.04)}/*!@.container*/.container.sc-calcite-sheet{visibility:hidden;position:fixed;z-index:var(--calcite-app-z-index-overlay);display:flex;overflow-y:hidden;color:var(--calcite-ui-text-2);opacity:0;transition:visibility 0ms linear var(--calcite-internal-animation-timing-medium), opacity var(--calcite-internal-animation-timing-medium) cubic-bezier(0.215, 0.44, 0.42, 0.88)}/*!@:host([position=inline-start]) .container*/[position=inline-start].sc-calcite-sheet-h .container.sc-calcite-sheet{justify-content:flex-start;inset-block:0;inset-inline:0 auto;--calcite-sheet-hidden-position-internal:translate3d(-1rem, 0, 0)}/*!@:host([position=inline-end]) .container*/[position=inline-end].sc-calcite-sheet-h .container.sc-calcite-sheet{justify-content:flex-end;inset-block:0;inset-inline:auto 0;--calcite-sheet-hidden-position-internal:translate3d(1rem, 0, 0)}/*!@:host([position=block-start]) .container*/[position=block-start].sc-calcite-sheet-h .container.sc-calcite-sheet{align-items:flex-start;inset-block:0 auto;inset-inline:0;--calcite-sheet-hidden-position-internal:translate3d(0, -1rem, 0)}/*!@:host([position=block-end]) .container*/[position=block-end].sc-calcite-sheet-h .container.sc-calcite-sheet{align-items:flex-end;inset-block:auto 0;inset-inline:0;--calcite-sheet-hidden-position-internal:translate3d(0, 1rem, 0)}/*!@:host([display-mode=float]) .container*/[display-mode=float].sc-calcite-sheet-h .container.sc-calcite-sheet{--tw-shadow:0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);--tw-shadow-colored:0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -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)}/*!@:host([display-mode=overlay][position=inline-start]) .container*/[display-mode=overlay][position=inline-start].sc-calcite-sheet-h .container.sc-calcite-sheet{box-shadow:var(--calcite-scrim-shadow-inline-start-internal)}/*!@:host([display-mode=overlay][position=inline-end]) .container*/[display-mode=overlay][position=inline-end].sc-calcite-sheet-h .container.sc-calcite-sheet{box-shadow:var(--calcite-scrim-shadow-inline-end-internal)}/*!@:host([display-mode=overlay][position=block-start]) .container*/[display-mode=overlay][position=block-start].sc-calcite-sheet-h .container.sc-calcite-sheet{box-shadow:var(--calcite-scrim-shadow-block-start-internal)}/*!@:host([display-mode=overlay][position=block-end]) .container*/[display-mode=overlay][position=block-end].sc-calcite-sheet-h .container.sc-calcite-sheet{box-shadow:var(--calcite-scrim-shadow-block-end-internal)}/*!@:host([position^=inline]) .container,\n:host([position^=inline]) .content*/[position^=inline].sc-calcite-sheet-h .container.sc-calcite-sheet,[position^=inline].sc-calcite-sheet-h .content.sc-calcite-sheet{inline-size:var(--calcite-sheet-width-internal);max-inline-size:var(--calcite-sheet-max-width-internal);min-inline-size:var(--calcite-sheet-min-width-internal)}/*!@:host([position^=block]) .container,\n:host([position^=block]) .content*/[position^=block].sc-calcite-sheet-h .container.sc-calcite-sheet,[position^=block].sc-calcite-sheet-h .content.sc-calcite-sheet{block-size:var(--calcite-sheet-height-internal);max-block-size:var(--calcite-sheet-max-height-internal);min-block-size:var(--calcite-sheet-min-height-internal)}/*!@:host([display-mode=float][position^=inline]) .container*/[display-mode=float][position^=inline].sc-calcite-sheet-h .container.sc-calcite-sheet{block-size:calc(100% - 1.5rem);max-block-size:calc(100% - 1.5rem);min-block-size:calc(100% - 1.5rem)}/*!@:host([display-mode=float][position^=block]) .container*/[display-mode=float][position^=block].sc-calcite-sheet-h .container.sc-calcite-sheet{inline-size:calc(100% - 1.5rem);max-inline-size:calc(100% - 1.5rem);min-inline-size:calc(100% - 1.5rem)}/*!@:host([position^=inline][width-scale=s])*/[position^=inline][width-scale=s].sc-calcite-sheet-h{--calcite-sheet-width-internal:var(--calcite-sheet-width, 20vw);--calcite-sheet-max-width-internal:var(--calcite-sheet-max-width, 20vw);--calcite-sheet-min-width-internal:var(--calcite-sheet-min-width, 20vw)}/*!@:host([position^=inline][width-scale=m])*/[position^=inline][width-scale=m].sc-calcite-sheet-h{--calcite-sheet-width-internal:var(--calcite-sheet-width, 30vw);--calcite-sheet-max-width-internal:var(--calcite-sheet-max-width, 30vw);--calcite-sheet-min-width-internal:var(--calcite-sheet-min-width, 30vw)}/*!@:host([position^=inline][width-scale=l])*/[position^=inline][width-scale=l].sc-calcite-sheet-h{--calcite-sheet-width-internal:var(--calcite-sheet-width, 40vw);--calcite-sheet-max-width-internal:var(--calcite-sheet-max-width, 40vw);--calcite-sheet-min-width-internal:var(--calcite-sheet-min-width, 40vw)}/*!@:host([position^=block][height-scale=s])*/[position^=block][height-scale=s].sc-calcite-sheet-h{--calcite-sheet-min-height-internal:var(--calcite-sheet-min-height, 10vh);--calcite-sheet-height-internal:var(--calcite-sheet-height, 20vh);--calcite-sheet-max-height-internal:var(--calcite-sheet-max-height, 30vh)}/*!@:host([position^=block][height-scale=m])*/[position^=block][height-scale=m].sc-calcite-sheet-h{--calcite-sheet-min-height-internal:var(--calcite-sheet-min-height, 10vh);--calcite-sheet-height-internal:var(--calcite-sheet-height, 40vh);--calcite-sheet-max-height-internal:var(--calcite-sheet-max-height, 50vh)}/*!@:host([position^=block][height-scale=l])*/[position^=block][height-scale=l].sc-calcite-sheet-h{--calcite-sheet-min-height-internal:var(--calcite-sheet-min-height, 10vh);--calcite-sheet-height-internal:var(--calcite-sheet-height, 60vh);--calcite-sheet-max-height-internal:var(--calcite-sheet-max-height, 70vh)}/*!@.scrim*/.scrim.sc-calcite-sheet{--calcite-scrim-background:var(--calcite-sheet-scrim-background, var(--calcite-sheet-scrim-background-internal));position:fixed;inset:0px;display:flex;overflow-y:hidden}/*!@:host([opened])*/[opened].sc-calcite-sheet-h{visibility:visible !important}/*!@.content*/.content.sc-calcite-sheet{position:relative;z-index:var(--calcite-app-z-index-modal);box-sizing:border-box;display:block;max-block-size:100%;max-inline-size:100%;overflow-y:hidden;padding:0px;background-color:var(--calcite-ui-foreground-1);max-block-size:100%;visibility:hidden;transition:transform var(--calcite-internal-animation-timing-medium) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear var(--calcite-internal-animation-timing-medium), opacity var(--calcite-internal-animation-timing-medium) cubic-bezier(0.215, 0.44, 0.42, 0.88);transform:var(--calcite-sheet-hidden-position-internal)}/*!@.container--open .content*/.container--open.sc-calcite-sheet .content.sc-calcite-sheet{transform:translate3d(0, 0, 0)}/*!@:host([display-mode=float]) .content,\n:host([display-mode=float]) .container*/[display-mode=float].sc-calcite-sheet-h .content.sc-calcite-sheet,[display-mode=float].sc-calcite-sheet-h .container.sc-calcite-sheet{border-radius:0.25rem}/*!@:host([display-mode=float]) .container*/[display-mode=float].sc-calcite-sheet-h .container.sc-calcite-sheet{padding:0.75rem}/*!@.container--open*/.container--open.sc-calcite-sheet{visibility:visible;opacity:1;transition-delay:0ms}/*!@.container--open .content*/.container--open.sc-calcite-sheet .content.sc-calcite-sheet{pointer-events:auto;visibility:visible;opacity:1;transition:transform var(--calcite-internal-animation-timing-medium) cubic-bezier(0.215, 0.44, 0.42, 0.88), visibility 0ms linear, opacity var(--calcite-internal-animation-timing-medium) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-inline-size var(--calcite-internal-animation-timing-medium) cubic-bezier(0.215, 0.44, 0.42, 0.88), max-block-size var(--calcite-internal-animation-timing-medium) cubic-bezier(0.215, 0.44, 0.42, 0.88);transition-delay:0ms}/*!@:host([position=inline-start]) .content,\n:host([position=inline-end]) .content*/[position=inline-start].sc-calcite-sheet-h .content.sc-calcite-sheet,[position=inline-end].sc-calcite-sheet-h .content.sc-calcite-sheet{block-size:100%}/*!@:host([position=block-start]) .content,\n:host([position=block-end]) .content*/[position=block-start].sc-calcite-sheet-h .content.sc-calcite-sheet,[position=block-end].sc-calcite-sheet-h .content.sc-calcite-sheet{inline-size:100%}/*!@:host([position]) .container--slotted-in-shell*/[position].sc-calcite-sheet-h .container--slotted-in-shell.sc-calcite-sheet{pointer-events:auto;position:absolute;inline-size:100%;max-inline-size:100%;min-inline-size:100%;block-size:100%;max-block-size:100%;min-block-size:100%}/*!@:host([position]) .container--slotted-in-shell calcite-scrim*/[position].sc-calcite-sheet-h .container--slotted-in-shell.sc-calcite-sheet calcite-scrim.sc-calcite-sheet{position:absolute}/*!@:host([hidden])*/[hidden].sc-calcite-sheet-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-sheet{display:none}";
+
+class Sheet {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.calciteSheetBeforeClose = createEvent(this, "calciteSheetBeforeClose", 6);
+    this.calciteSheetClose = createEvent(this, "calciteSheetClose", 6);
+    this.calciteSheetBeforeOpen = createEvent(this, "calciteSheetBeforeOpen", 6);
+    this.calciteSheetOpen = createEvent(this, "calciteSheetOpen", 6);
+    //--------------------------------------------------------------------------
+    //
+    //  Private Properties/ State
+    //
+    //--------------------------------------------------------------------------
+    this.openTransitionProp = "opacity";
+    this.ignoreOpenChange = false;
+    this.mutationObserver = createObserver();
+    this.setTransitionEl = (el) => {
+      this.transitionEl = el;
+      this.contentId = ensureId(el);
+    };
+    this.openEnd = () => {
+      this.setFocus();
+      this.el.removeEventListener("calciteSheetOpen", this.openEnd);
+    };
+    this.handleOutsideClose = () => {
+      if (this.outsideCloseDisabled) {
+        return;
+      }
+      this.closeSheet();
+    };
+    this.closeSheet = async () => {
+      if (this.ignoreOpenChange) {
+        return;
+      }
+      if (this.beforeClose) {
+        try {
+          await this.beforeClose(this.el);
+        }
+        catch (_error) {
+          // close prevented
+          requestAnimationFrame(() => {
+            this.ignoreOpenChange = true;
+            this.open = true;
+            this.ignoreOpenChange = false;
+          });
+          return;
+        }
+      }
+      this.ignoreOpenChange = true;
+      this.open = false;
+      this.opened = false;
+      this.removeOverflowHiddenClass();
+      this.ignoreOpenChange = false;
+    };
+    this.beforeClose = undefined;
+    this.displayMode = "overlay";
+    this.escapeDisabled = false;
+    this.heightScale = "m";
+    this.focusTrapDisabled = false;
+    this.label = undefined;
+    this.open = false;
+    this.opened = false;
+    this.outsideCloseDisabled = false;
+    this.position = "inline-start";
+    this.slottedInShell = undefined;
+    this.widthScale = "m";
+  }
+  handleFocusTrapDisabled(focusTrapDisabled) {
+    if (!this.open) {
+      return;
+    }
+    focusTrapDisabled ? deactivateFocusTrap(this) : activateFocusTrap(this);
+  }
+  async toggleSheet(value) {
+    if (this.ignoreOpenChange) {
+      return;
+    }
+    onToggleOpenCloseComponent(this);
+    if (value) {
+      this.openSheet();
+    }
+    else {
+      this.closeSheet();
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  //--------------------------------------------------------------------------
+  async componentWillLoad() {
+    setUpLoadableComponent(this);
+    // when sheet initially renders, if active was set we need to open as watcher doesn't fire
+    if (this.open) {
+      onToggleOpenCloseComponent(this);
+      requestAnimationFrame(() => this.openSheet());
+    }
+  }
+  componentDidLoad() {
+    setComponentLoaded(this);
+  }
+  connectedCallback() {
+    this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
+    connectFocusTrap(this);
+  }
+  disconnectedCallback() {
+    this.removeOverflowHiddenClass();
+    this.mutationObserver?.disconnect();
+    deactivateFocusTrap(this);
+    this.slottedInShell = false;
+  }
+  render() {
+    const dir = getElementDir(this.el);
+    return (hAsync(Host, { "aria-describedby": this.contentId, "aria-label": this.label, "aria-modal": "true", role: "dialog" }, hAsync("div", { class: {
+        [CSS$g.container]: true,
+        [CSS$g.containerOpen]: this.opened,
+        [CSS$g.containerSlottedInShell]: this.slottedInShell,
+        [CSS_UTILITY.rtl]: dir === "rtl",
+      } }, hAsync("calcite-scrim", { class: CSS$g.scrim, onClick: this.handleOutsideClose }), hAsync("div", { class: {
+        [CSS$g.content]: true,
+      },
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+      ref: this.setTransitionEl }, hAsync("slot", null)))));
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Event Listeners
+  //
+  //--------------------------------------------------------------------------
+  handleEscape(event) {
+    if (this.open && !this.escapeDisabled && event.key === "Escape" && !event.defaultPrevented) {
+      this.closeSheet();
+      event.preventDefault();
+    }
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Public Methods
+  //
+  //--------------------------------------------------------------------------
+  /**
+   * Sets focus on the component's "close" button (the first focusable item).
+   *
+   */
+  async setFocus() {
+    await componentFocusable(this);
+    focusFirstTabbable(this.el);
+  }
+  /**
+   * Updates the element(s) that are used within the focus-trap of the component.
+   */
+  async updateFocusTrapElements() {
+    updateFocusTrapElements(this);
+  }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  onBeforeOpen() {
+    this.calciteSheetBeforeOpen.emit();
+  }
+  onOpen() {
+    this.calciteSheetOpen.emit();
+    activateFocusTrap(this);
+  }
+  onBeforeClose() {
+    this.calciteSheetBeforeClose.emit();
+  }
+  onClose() {
+    this.calciteSheetClose.emit();
+    deactivateFocusTrap(this);
+  }
+  openSheet() {
+    if (this.ignoreOpenChange) {
+      return;
+    }
+    this.el.addEventListener("calciteSheetOpen", this.openEnd);
+    this.open = true;
+    this.opened = true;
+    if (!this.slottedInShell) {
+      this.initialOverflowCSS = document.documentElement.style.overflow;
+      // use an inline style instead of a utility class to avoid global class declarations.
+      document.documentElement.style.setProperty("overflow", "hidden");
+    }
+    this.ignoreOpenChange = false;
+  }
+  removeOverflowHiddenClass() {
+    document.documentElement.style.setProperty("overflow", this.initialOverflowCSS);
+  }
+  handleMutationObserver() {
+    this.updateFocusTrapElements();
+  }
+  get el() { return getElement(this); }
+  static get watchers() { return {
+    "focusTrapDisabled": ["handleFocusTrapDisabled"],
+    "open": ["toggleSheet"]
+  }; }
+  static get style() { return sheetCss; }
+  static get cmpMeta() { return {
+    "$flags$": 9,
+    "$tagName$": "calcite-sheet",
+    "$members$": {
+      "beforeClose": [16],
+      "displayMode": [513, "display-mode"],
+      "escapeDisabled": [516, "escape-disabled"],
+      "heightScale": [513, "height-scale"],
+      "focusTrapDisabled": [516, "focus-trap-disabled"],
+      "label": [1],
+      "open": [1540],
+      "opened": [1540],
+      "outsideCloseDisabled": [516, "outside-close-disabled"],
+      "position": [513],
+      "slottedInShell": [4, "slotted-in-shell"],
+      "widthScale": [513, "width-scale"],
+      "setFocus": [64],
+      "updateFocusTrapElements": [64]
+    },
+    "$listeners$": [[8, "keydown", "handleEscape"]],
+    "$lazyBundleId$": "-",
+    "$attrsToReflect$": [["displayMode", "display-mode"], ["escapeDisabled", "escape-disabled"], ["heightScale", "height-scale"], ["focusTrapDisabled", "focus-trap-disabled"], ["open", "open"], ["opened", "opened"], ["outsideCloseDisabled", "outside-close-disabled"], ["position", "position"], ["widthScale", "width-scale"]]
+  }; }
+}
+
 const CSS$f = {
   main: "main",
   content: "content",
@@ -37335,6 +37659,7 @@ const SLOTS$8 = {
   header: "header",
   footer: "footer",
   alerts: "alerts",
+  sheets: "sheets",
   modals: "modals",
 };
 
@@ -37351,6 +37676,7 @@ const shellCss = "/*!@:host*/.sc-calcite-shell-h{box-sizing:border-box;backgroun
  * @slot center-row - [Deprecated] Use the `"panel-bottom"` slot instead. A slot for adding the bottom `calcite-shell-center-row`.
  * @slot modals - A slot for adding `calcite-modal` components. When placed in this slot, the modal position will be constrained to the extent of the shell.
  * @slot alerts - A slot for adding `calcite-alert` components. When placed in this slot, the alert position will be constrained to the extent of the shell.
+ * @slot sheets - A slot for adding `calcite-sheet` components. When placed in this slot, the alert position will be constrained to the extent of the shell.
  */
 class Shell {
   constructor(hostRef) {
@@ -37374,6 +37700,14 @@ class Shell {
         }
       });
     };
+    this.handleSheetsSlotChange = (event) => {
+      this.hasSheets = !!slotChangeHasAssignedElement(event);
+      slotChangeGetAssignedElements(event)?.map((el) => {
+        if (el.nodeName === "CALCITE-SHEET") {
+          el.slottedInShell = true;
+        }
+      });
+    };
     this.handleModalsSlotChange = (event) => {
       this.hasModals = !!slotChangeHasAssignedElement(event);
       slotChangeGetAssignedElements(event)?.map((el) => {
@@ -37387,6 +37721,7 @@ class Shell {
     this.hasFooter = false;
     this.hasAlerts = false;
     this.hasModals = false;
+    this.hasSheets = false;
   }
   // --------------------------------------------------------------------------
   //
@@ -37413,6 +37748,9 @@ class Shell {
   renderAlerts() {
     return (hAsync("div", { hidden: !this.hasAlerts }, hAsync("slot", { key: "alerts", name: SLOTS$8.alerts, onSlotchange: this.handleAlertsSlotChange })));
   }
+  renderSheets() {
+    return (hAsync("div", { hidden: !this.hasSheets }, hAsync("slot", { key: "sheets", name: SLOTS$8.sheets, onSlotchange: this.handleSheetsSlotChange })));
+  }
   renderModals() {
     return (hAsync("div", { hidden: !this.hasModals }, hAsync("slot", { key: "modals", name: SLOTS$8.modals, onSlotchange: this.handleModalsSlotChange })));
   }
@@ -37439,7 +37777,7 @@ class Shell {
     return (hAsync("div", { class: CSS$f.main }, hAsync("slot", { name: SLOTS$8.panelStart }), this.renderContent(), hAsync("slot", { name: SLOTS$8.panelEnd })));
   }
   renderPositionedSlots() {
-    return (hAsync("div", { class: CSS$f.positionedSlotWrapper }, this.renderAlerts(), this.renderModals()));
+    return (hAsync("div", { class: CSS$f.positionedSlotWrapper }, this.renderAlerts(), this.renderModals(), this.renderSheets()));
   }
   render() {
     return (hAsync(Fragment, null, this.renderHeader(), this.renderMain(), this.renderFooter(), this.renderPositionedSlots()));
@@ -37454,7 +37792,8 @@ class Shell {
       "hasHeader": [32],
       "hasFooter": [32],
       "hasAlerts": [32],
-      "hasModals": [32]
+      "hasModals": [32],
+      "hasSheets": [32]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
@@ -37807,7 +38146,7 @@ class ShellPanel {
     const separatorNode = !collapsed && allowResizing ? (hAsync("div", { "aria-label": this.messages.resize, "aria-orientation": layout === "horizontal" ? "vertical" : "horizontal", "aria-valuemax": layout == "horizontal" ? contentHeightMax : contentWidthMax, "aria-valuemin": layout == "horizontal" ? contentHeightMin : contentWidthMin, "aria-valuenow": layout == "horizontal"
         ? contentHeight ?? initialContentHeight
         : contentWidth ?? initialContentWidth, class: CSS$d.separator, key: "separator", onKeyDown: this.separatorKeyDown, role: "separator", tabIndex: 0, "touch-action": "none",
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.connectSeparator })) : null;
     const getAnimationDir = () => {
       if (layout === "horizontal") {
@@ -37828,7 +38167,7 @@ class ShellPanel {
         [CSS_UTILITY.calciteAnimate]: displayMode === "overlay",
         [getAnimationDir()]: displayMode === "overlay",
       }, hidden: collapsed, key: "content", style: style,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.storeContentEl }, this.renderHeader(), hAsync("div", { class: CSS$d.contentBody }, hAsync("slot", null)), separatorNode));
     const actionBarNode = (hAsync("slot", { key: "action-bar", name: SLOTS$6.actionBar, onSlotchange: this.handleActionBarSlotChange }));
     const mainNodes = [actionBarNode, contentNode];
@@ -38142,21 +38481,21 @@ class Slider {
         "thumb--value": true,
         "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: (event) => this.pointerDownDragStart(event, maxProp), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.maxHandle = el) }, hAsync("div", { class: "handle" })));
     const labeledHandle = (hAsync("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
         thumb: true,
         "thumb--value": true,
         "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: (event) => this.pointerDownDragStart(event, maxProp), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.maxHandle = el) }, hAsync("span", { "aria-hidden": "true", class: handleLabelValueClasses }, displayedValue), hAsync("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} static` }, displayedValue), hAsync("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} transformed` }, displayedValue), hAsync("div", { class: "handle" })));
     const histogramLabeledHandle = (hAsync("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
         thumb: true,
         "thumb--value": true,
         "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: (event) => this.pointerDownDragStart(event, maxProp), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.maxHandle = el) }, hAsync("div", { class: "handle" }), hAsync("span", { "aria-hidden": "true", class: handleLabelValueClasses }, displayedValue), hAsync("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} static` }, displayedValue), hAsync("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} transformed` }, displayedValue)));
     const preciseHandle = (hAsync("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
         thumb: true,
@@ -38164,7 +38503,7 @@ class Slider {
         "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
         "thumb--precise": true,
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: (event) => this.pointerDownDragStart(event, maxProp), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.maxHandle = el) }, hAsync("div", { class: "handle" }), hAsync("div", { class: "handle-extension" })));
     const histogramPreciseHandle = (hAsync("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
         thumb: true,
@@ -38172,7 +38511,7 @@ class Slider {
         "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
         "thumb--precise": true,
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: (event) => this.pointerDownDragStart(event, maxProp), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.maxHandle = el) }, hAsync("div", { class: "handle-extension" }), hAsync("div", { class: "handle" })));
     const labeledPreciseHandle = (hAsync("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
         thumb: true,
@@ -38180,7 +38519,7 @@ class Slider {
         "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
         "thumb--precise": true,
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: (event) => this.pointerDownDragStart(event, maxProp), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.maxHandle = el) }, hAsync("span", { "aria-hidden": "true", class: handleLabelValueClasses }, displayedValue), hAsync("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} static` }, displayedValue), hAsync("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} transformed` }, displayedValue), hAsync("div", { class: "handle" }), hAsync("div", { class: "handle-extension" })));
     const histogramLabeledPreciseHandle = (hAsync("div", { "aria-disabled": this.disabled, "aria-label": valueIsRange ? this.maxLabel : this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": value, class: {
         thumb: true,
@@ -38188,28 +38527,28 @@ class Slider {
         "thumb--active": this.lastDragProp !== "minMaxValue" && this.dragProp === maxProp,
         "thumb--precise": true,
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = maxProp), onPointerDown: (event) => this.pointerDownDragStart(event, maxProp), role: "slider", style: { right: rightThumbOffset }, tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.maxHandle = el) }, hAsync("div", { class: "handle-extension" }), hAsync("div", { class: "handle" }), hAsync("span", { "aria-hidden": "true", class: handleLabelValueClasses }, displayedValue), hAsync("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} static` }, displayedValue), hAsync("span", { "aria-hidden": "true", class: `${handleLabelValueClasses} transformed` }, displayedValue)));
     const minHandle = (hAsync("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
         thumb: true,
         "thumb--minValue": true,
         "thumb--active": this.dragProp === "minValue",
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: (event) => this.pointerDownDragStart(event, "minValue"), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.minHandle = el) }, hAsync("div", { class: "handle" })));
     const minLabeledHandle = (hAsync("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
         thumb: true,
         "thumb--minValue": true,
         "thumb--active": this.dragProp === "minValue",
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: (event) => this.pointerDownDragStart(event, "minValue"), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.minHandle = el) }, hAsync("span", { "aria-hidden": "true", class: handleLabelMinValueClasses }, displayedMinValue), hAsync("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} static` }, displayedMinValue), hAsync("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} transformed` }, displayedMinValue), hAsync("div", { class: "handle" })));
     const minHistogramLabeledHandle = (hAsync("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
         thumb: true,
         "thumb--minValue": true,
         "thumb--active": this.dragProp === "minValue",
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: (event) => this.pointerDownDragStart(event, "minValue"), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.minHandle = el) }, hAsync("div", { class: "handle" }), hAsync("span", { "aria-hidden": "true", class: handleLabelMinValueClasses }, displayedMinValue), hAsync("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} static` }, displayedMinValue), hAsync("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} transformed` }, displayedMinValue)));
     const minPreciseHandle = (hAsync("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
         thumb: true,
@@ -38217,7 +38556,7 @@ class Slider {
         "thumb--active": this.dragProp === "minValue",
         "thumb--precise": true,
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: (event) => this.pointerDownDragStart(event, "minValue"), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.minHandle = el) }, hAsync("div", { class: "handle-extension" }), hAsync("div", { class: "handle" })));
     const minLabeledPreciseHandle = (hAsync("div", { "aria-disabled": this.disabled, "aria-label": this.minLabel, "aria-orientation": "horizontal", "aria-valuemax": this.max, "aria-valuemin": this.min, "aria-valuenow": this.minValue, class: {
         thumb: true,
@@ -38225,14 +38564,14 @@ class Slider {
         "thumb--active": this.dragProp === "minValue",
         "thumb--precise": true,
       }, onBlur: () => (this.activeProp = null), onFocus: () => (this.activeProp = "minValue"), onPointerDown: (event) => this.pointerDownDragStart(event, "minValue"), role: "slider", style: { left: leftThumbOffset }, tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.minHandle = el) }, hAsync("div", { class: "handle-extension" }), hAsync("div", { class: "handle" }), hAsync("span", { "aria-hidden": "true", class: handleLabelMinValueClasses }, displayedMinValue), hAsync("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} static` }, displayedMinValue), hAsync("span", { "aria-hidden": "true", class: `${handleLabelMinValueClasses} transformed` }, displayedMinValue)));
     return (hAsync(Host, { id: id, onTouchStart: this.handleTouchStart }, hAsync("div", { "aria-label": getLabelText(this), class: {
         ["container"]: true,
         ["container--range"]: valueIsRange,
         [`scale--${this.scale}`]: true,
       } }, this.renderGraph(), hAsync("div", { class: "track",
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.storeTrackRef }, hAsync("div", { class: "track__range", onPointerDown: (event) => this.pointerDownDragStart(event, "minMaxValue"), style: {
         left: `${mirror ? 100 - maxInterval : minInterval}%`,
         right: `${mirror ? minInterval : 100 - maxInterval}%`,
@@ -38994,7 +39333,7 @@ const CSS$a = {
   widthFull: "width-full",
 };
 
-const splitButtonCss = "/*!@:host([disabled])*/[disabled].sc-calcite-split-button-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-split-button-h *.sc-calcite-split-button,.sc-calcite-split-button-h[disabled] .sc-calcite-split-button-s>*{pointer-events:none}/*!@:host*/.sc-calcite-split-button-h{display:inline-block}/*!@:host .split-button__container*/.sc-calcite-split-button-h .split-button__container.sc-calcite-split-button{display:flex;align-items:stretch}/*!@:host .split-button__container > calcite-dropdown > calcite-button*/.sc-calcite-split-button-h .split-button__container.sc-calcite-split-button>calcite-dropdown.sc-calcite-split-button>calcite-button.sc-calcite-split-button{block-size:100%;vertical-align:top}/*!@:host:host([kind=brand])*/.sc-calcite-split-button-h([kind=brand]).sc-calcite-split-button-h{--calcite-split-button-background:var(--calcite-ui-brand);--calcite-split-button-divider:var(--calcite-ui-foreground-1)}/*!@:host:host([kind=danger])*/.sc-calcite-split-button-h([kind=danger]).sc-calcite-split-button-h{--calcite-split-button-background:var(--calcite-ui-danger);--calcite-split-button-divider:var(--calcite-ui-foreground-1)}/*!@:host:host([kind=neutral])*/.sc-calcite-split-button-h([kind=neutral]).sc-calcite-split-button-h{--calcite-split-button-background:var(--calcite-ui-foreground-3);--calcite-split-button-divider:var(--calcite-ui-text-1)}/*!@:host:host([kind=inverse])*/.sc-calcite-split-button-h([kind=inverse]).sc-calcite-split-button-h{--calcite-split-button-background:var(--calcite-ui-inverse);--calcite-split-button-divider:var(--calcite-ui-foreground-1)}/*!@:host([appearance=transparent]):host([kind=brand])*/[appearance=transparent].sc-calcite-split-button-h([kind=brand]).sc-calcite-split-button-h{--calcite-split-button-divider:var(--calcite-ui-brand)}/*!@:host([appearance=transparent]):host([kind=danger])*/[appearance=transparent].sc-calcite-split-button-h([kind=danger]).sc-calcite-split-button-h{--calcite-split-button-divider:var(--calcite-ui-danger)}/*!@:host([appearance=transparent]):host([kind=neutral])*/[appearance=transparent].sc-calcite-split-button-h([kind=neutral]).sc-calcite-split-button-h{--calcite-split-button-divider:var(--calcite-ui-text-1)}/*!@:host([appearance=transparent]):host([kind=inverse])*/[appearance=transparent].sc-calcite-split-button-h([kind=inverse]).sc-calcite-split-button-h{--calcite-split-button-divider:var(--calcite-ui-foreground-1);--calcite-split-button-background:transparent}/*!@:host([appearance=outline]),\n:host([appearance=transparent])*/[appearance=outline].sc-calcite-split-button-h,[appearance=transparent].sc-calcite-split-button-h{--calcite-split-button-background:transparent}/*!@:host([appearance=outline-fill])*/[appearance=outline-fill].sc-calcite-split-button-h{--calcite-split-button-background:var(--calcite-ui-foreground-1)}/*!@:host([appearance=outline]):host([kind=brand]),\n:host([appearance=outline-fill]):host([kind=brand])*/[appearance=outline].sc-calcite-split-button-h([kind=brand]).sc-calcite-split-button-h,[appearance=outline-fill].sc-calcite-split-button-h([kind=brand]).sc-calcite-split-button-h{--calcite-split-button-divider:var(--calcite-ui-brand)}/*!@:host([appearance=outline]):host([kind=danger]),\n:host([appearance=outline-fill]):host([kind=danger])*/[appearance=outline].sc-calcite-split-button-h([kind=danger]).sc-calcite-split-button-h,[appearance=outline-fill].sc-calcite-split-button-h([kind=danger]).sc-calcite-split-button-h{--calcite-split-button-divider:var(--calcite-ui-danger)}/*!@:host([appearance=outline]):host([kind=neutral]),\n:host([appearance=outline-fill]):host([kind=neutral])*/[appearance=outline].sc-calcite-split-button-h([kind=neutral]).sc-calcite-split-button-h,[appearance=outline-fill].sc-calcite-split-button-h([kind=neutral]).sc-calcite-split-button-h{--calcite-split-button-divider:var(--calcite-ui-foreground-3)}/*!@:host([appearance=outline]):host([kind=inverse]),\n:host([appearance=outline-fill]):host([kind=inverse])*/[appearance=outline].sc-calcite-split-button-h([kind=inverse]).sc-calcite-split-button-h,[appearance=outline-fill].sc-calcite-split-button-h([kind=inverse]).sc-calcite-split-button-h{--calcite-split-button-divider:var(--calcite-ui-inverse)}/*!@.width-auto*/.width-auto.sc-calcite-split-button{inline-size:auto}/*!@.width-half*/.width-half.sc-calcite-split-button{inline-size:50%}/*!@.width-full*/.width-full.sc-calcite-split-button{inline-size:100%}/*!@.split-button__divider-container*/.split-button__divider-container.sc-calcite-split-button{display:flex;inline-size:1px;align-items:stretch;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;background-color:var(--calcite-split-button-background)}/*!@.split-button__divider*/.split-button__divider.sc-calcite-split-button{margin-block:0.25rem;display:inline-block;inline-size:1px;background-color:var(--calcite-split-button-divider)}/*!@:host([appearance=outline-fill]) .split-button__divider-container,\n:host([appearance=outline]) .split-button__divider-container*/[appearance=outline-fill].sc-calcite-split-button-h .split-button__divider-container.sc-calcite-split-button,[appearance=outline].sc-calcite-split-button-h .split-button__divider-container.sc-calcite-split-button{border-block:1px solid var(--calcite-split-button-divider)}/*!@:host([appearance=outline-fill]):hover .split-button__divider-container,\n:host([appearance=outline]):hover .split-button__divider-container*/[appearance=outline-fill].sc-calcite-split-button-h:hover .split-button__divider-container.sc-calcite-split-button,[appearance=outline].sc-calcite-split-button-h:hover .split-button__divider-container.sc-calcite-split-button{background-color:var(--calcite-split-button-divider)}/*!@:host([appearance=outline-fill]:hover) .split-button__divider-container,\n:host([appearance=outline]:hover) .split-button__divider-container*/[appearance=outline-fill].sc-calcite-split-button-h:hover .split-button__divider-container.sc-calcite-split-button,[appearance=outline].sc-calcite-split-button-h:hover .split-button__divider-container.sc-calcite-split-button{background-color:var(--calcite-split-button-divider)}/*!@:host([appearance=outline-fill]:focus-within):host([kind=brand]),\n:host([appearance=outline]:focus-within):host([kind=brand])*/[appearance=outline-fill].sc-calcite-split-button-h:focus-within.sc-calcite-split-button-h([kind=brand]),[appearance=outline].sc-calcite-split-button-h:focus-within.sc-calcite-split-button-h([kind=brand]){--calcite-split-button-divider:var(--calcite-ui-brand-press)}/*!@:host([appearance=outline-fill]:focus-within):host([kind=danger]),\n:host([appearance=outline]:focus-within):host([kind=danger])*/[appearance=outline-fill].sc-calcite-split-button-h:focus-within.sc-calcite-split-button-h([kind=danger]),[appearance=outline].sc-calcite-split-button-h:focus-within.sc-calcite-split-button-h([kind=danger]){--calcite-split-button-divider:var(--calcite-ui-danger-press)}/*!@:host([appearance=outline-fill]:focus-within) .split-button__divider-container,\n:host([appearance=outline]:focus-within) .split-button__divider-container*/[appearance=outline-fill].sc-calcite-split-button-h:focus-within .split-button__divider-container.sc-calcite-split-button,[appearance=outline].sc-calcite-split-button-h:focus-within .split-button__divider-container.sc-calcite-split-button{background-color:var(--calcite-split-button-divider)}/*!@:host([disabled]) .split-button__divider-container*/[disabled].sc-calcite-split-button-h .split-button__divider-container.sc-calcite-split-button{opacity:var(--calcite-ui-opacity-disabled)}/*!@:host([disabled]) calcite-dropdown > calcite-button*/[disabled].sc-calcite-split-button-h calcite-dropdown.sc-calcite-split-button>calcite-button.sc-calcite-split-button{pointer-events:none}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-split-button-h[disabled] .sc-calcite-split-button-s>[calcite-hydrated][disabled],[disabled].sc-calcite-split-button-h [calcite-hydrated][disabled].sc-calcite-split-button{opacity:1}/*!@:host([hidden])*/[hidden].sc-calcite-split-button-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-split-button{display:none}";
+const splitButtonCss = "/*!@:host([disabled])*/[disabled].sc-calcite-split-button-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-split-button-h *.sc-calcite-split-button,.sc-calcite-split-button-h[disabled] .sc-calcite-split-button-s>*{pointer-events:none}/*!@:host*/.sc-calcite-split-button-h{display:inline-block}/*!@:host .split-button__container*/.sc-calcite-split-button-h .split-button__container.sc-calcite-split-button{display:flex;align-items:stretch}/*!@:host .split-button__container > calcite-dropdown > calcite-button*/.sc-calcite-split-button-h .split-button__container.sc-calcite-split-button>calcite-dropdown.sc-calcite-split-button>calcite-button.sc-calcite-split-button{block-size:100%;vertical-align:top}/*!@:host:host([kind=brand])*/.sc-calcite-split-button-h([kind=brand]).sc-calcite-split-button-h{--calcite-split-button-background:var(--calcite-ui-brand);--calcite-split-button-divider:var(--calcite-ui-foreground-1)}/*!@:host:host([kind=danger])*/.sc-calcite-split-button-h([kind=danger]).sc-calcite-split-button-h{--calcite-split-button-background:var(--calcite-ui-danger);--calcite-split-button-divider:var(--calcite-ui-foreground-1)}/*!@:host:host([kind=neutral])*/.sc-calcite-split-button-h([kind=neutral]).sc-calcite-split-button-h{--calcite-split-button-background:var(--calcite-ui-foreground-3);--calcite-split-button-divider:var(--calcite-ui-text-1)}/*!@:host:host([kind=inverse])*/.sc-calcite-split-button-h([kind=inverse]).sc-calcite-split-button-h{--calcite-split-button-background:var(--calcite-ui-inverse);--calcite-split-button-divider:var(--calcite-ui-foreground-1)}/*!@:host([appearance=transparent]):host([kind=brand])*/[appearance=transparent].sc-calcite-split-button-h([kind=brand]).sc-calcite-split-button-h{--calcite-split-button-divider:var(--calcite-ui-brand);--calcite-split-button-background:transparent}/*!@:host([appearance=transparent]):host([kind=danger])*/[appearance=transparent].sc-calcite-split-button-h([kind=danger]).sc-calcite-split-button-h{--calcite-split-button-divider:var(--calcite-ui-danger);--calcite-split-button-background:transparent}/*!@:host([appearance=transparent]):host([kind=neutral])*/[appearance=transparent].sc-calcite-split-button-h([kind=neutral]).sc-calcite-split-button-h{--calcite-split-button-divider:var(--calcite-ui-text-1);--calcite-split-button-background:transparent}/*!@:host([appearance=transparent]):host([kind=inverse])*/[appearance=transparent].sc-calcite-split-button-h([kind=inverse]).sc-calcite-split-button-h{--calcite-split-button-divider:var(--calcite-ui-foreground-1);--calcite-split-button-background:transparent}/*!@:host([appearance=outline])*/[appearance=outline].sc-calcite-split-button-h{--calcite-split-button-background:transparent}/*!@:host([appearance=outline-fill])*/[appearance=outline-fill].sc-calcite-split-button-h{--calcite-split-button-background:var(--calcite-ui-foreground-1)}/*!@:host([appearance=outline]):host([kind=brand]),\n:host([appearance=outline-fill]):host([kind=brand])*/[appearance=outline].sc-calcite-split-button-h([kind=brand]).sc-calcite-split-button-h,[appearance=outline-fill].sc-calcite-split-button-h([kind=brand]).sc-calcite-split-button-h{--calcite-split-button-divider:var(--calcite-ui-brand)}/*!@:host([appearance=outline]):host([kind=danger]),\n:host([appearance=outline-fill]):host([kind=danger])*/[appearance=outline].sc-calcite-split-button-h([kind=danger]).sc-calcite-split-button-h,[appearance=outline-fill].sc-calcite-split-button-h([kind=danger]).sc-calcite-split-button-h{--calcite-split-button-divider:var(--calcite-ui-danger)}/*!@:host([appearance=outline]):host([kind=neutral]),\n:host([appearance=outline-fill]):host([kind=neutral])*/[appearance=outline].sc-calcite-split-button-h([kind=neutral]).sc-calcite-split-button-h,[appearance=outline-fill].sc-calcite-split-button-h([kind=neutral]).sc-calcite-split-button-h{--calcite-split-button-divider:var(--calcite-ui-border-1);--calcite-split-button-background:var(--calcite-ui-border-1)}/*!@:host([appearance=outline]):host([kind=inverse]),\n:host([appearance=outline-fill]):host([kind=inverse])*/[appearance=outline].sc-calcite-split-button-h([kind=inverse]).sc-calcite-split-button-h,[appearance=outline-fill].sc-calcite-split-button-h([kind=inverse]).sc-calcite-split-button-h{--calcite-split-button-divider:var(--calcite-ui-inverse)}/*!@.width-auto*/.width-auto.sc-calcite-split-button{inline-size:auto}/*!@.width-half*/.width-half.sc-calcite-split-button{inline-size:50%}/*!@.width-full*/.width-full.sc-calcite-split-button{inline-size:100%}/*!@.split-button__divider-container*/.split-button__divider-container.sc-calcite-split-button{display:flex;inline-size:1px;align-items:stretch;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;background-color:var(--calcite-split-button-background)}/*!@.split-button__divider*/.split-button__divider.sc-calcite-split-button{margin-block:0.25rem;display:inline-block;inline-size:1px;background-color:var(--calcite-split-button-divider)}/*!@:host([appearance=outline-fill]) .split-button__divider-container,\n:host([appearance=outline]) .split-button__divider-container*/[appearance=outline-fill].sc-calcite-split-button-h .split-button__divider-container.sc-calcite-split-button,[appearance=outline].sc-calcite-split-button-h .split-button__divider-container.sc-calcite-split-button{border-block:1px solid var(--calcite-split-button-divider)}/*!@:host([appearance=outline-fill]):hover .split-button__divider-container,\n:host([appearance=outline]):hover .split-button__divider-container*/[appearance=outline-fill].sc-calcite-split-button-h:hover .split-button__divider-container.sc-calcite-split-button,[appearance=outline].sc-calcite-split-button-h:hover .split-button__divider-container.sc-calcite-split-button{background-color:var(--calcite-split-button-divider)}/*!@:host([appearance=outline-fill]:hover) .split-button__divider-container,\n:host([appearance=outline]:hover) .split-button__divider-container*/[appearance=outline-fill].sc-calcite-split-button-h:hover .split-button__divider-container.sc-calcite-split-button,[appearance=outline].sc-calcite-split-button-h:hover .split-button__divider-container.sc-calcite-split-button{background-color:var(--calcite-split-button-divider)}/*!@:host([appearance=outline-fill]:focus-within):host([kind=brand]),\n:host([appearance=outline]:focus-within):host([kind=brand])*/[appearance=outline-fill].sc-calcite-split-button-h:focus-within.sc-calcite-split-button-h([kind=brand]),[appearance=outline].sc-calcite-split-button-h:focus-within.sc-calcite-split-button-h([kind=brand]){--calcite-split-button-divider:var(--calcite-ui-brand-press)}/*!@:host([appearance=outline-fill]:focus-within):host([kind=danger]),\n:host([appearance=outline]:focus-within):host([kind=danger])*/[appearance=outline-fill].sc-calcite-split-button-h:focus-within.sc-calcite-split-button-h([kind=danger]),[appearance=outline].sc-calcite-split-button-h:focus-within.sc-calcite-split-button-h([kind=danger]){--calcite-split-button-divider:var(--calcite-ui-danger-press)}/*!@:host([appearance=outline-fill]:focus-within) .split-button__divider-container,\n:host([appearance=outline]:focus-within) .split-button__divider-container*/[appearance=outline-fill].sc-calcite-split-button-h:focus-within .split-button__divider-container.sc-calcite-split-button,[appearance=outline].sc-calcite-split-button-h:focus-within .split-button__divider-container.sc-calcite-split-button{background-color:var(--calcite-split-button-divider)}/*!@:host([disabled]) .split-button__divider-container*/[disabled].sc-calcite-split-button-h .split-button__divider-container.sc-calcite-split-button{opacity:var(--calcite-ui-opacity-disabled)}/*!@:host([disabled]) calcite-dropdown > calcite-button*/[disabled].sc-calcite-split-button-h calcite-dropdown.sc-calcite-split-button>calcite-button.sc-calcite-split-button{pointer-events:none}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-split-button-h[disabled] .sc-calcite-split-button-s>[calcite-hydrated][disabled],[disabled].sc-calcite-split-button-h [calcite-hydrated][disabled].sc-calcite-split-button{opacity:1}/*!@:host([hidden])*/[hidden].sc-calcite-split-button-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-split-button{display:none}";
 
 /**
  * @slot - A slot for adding `calcite-dropdown` content.
@@ -39157,25 +39496,25 @@ class Stack {
   // --------------------------------------------------------------------------
   renderActionsStart() {
     const { hasActionsStart } = this;
-    return (hAsync("div", { class: CSS$u.actionsStart, hidden: !hasActionsStart, key: "actions-start-container" }, hAsync("slot", { name: SLOTS$f.actionsStart, onSlotchange: this.handleActionsStartSlotChange })));
+    return (hAsync("div", { class: CSS$v.actionsStart, hidden: !hasActionsStart, key: "actions-start-container" }, hAsync("slot", { name: SLOTS$f.actionsStart, onSlotchange: this.handleActionsStartSlotChange })));
   }
   renderActionsEnd() {
     const { hasActionsEnd } = this;
-    return (hAsync("div", { class: CSS$u.actionsEnd, hidden: !hasActionsEnd, key: "actions-end-container" }, hAsync("slot", { name: SLOTS$f.actionsEnd, onSlotchange: this.handleActionsEndSlotChange })));
+    return (hAsync("div", { class: CSS$v.actionsEnd, hidden: !hasActionsEnd, key: "actions-end-container" }, hAsync("slot", { name: SLOTS$f.actionsEnd, onSlotchange: this.handleActionsEndSlotChange })));
   }
   renderContentStart() {
     const { hasContentStart } = this;
-    return (hAsync("div", { class: CSS$u.contentStart, hidden: !hasContentStart }, hAsync("slot", { name: SLOTS$f.contentStart, onSlotchange: this.handleContentStartSlotChange })));
+    return (hAsync("div", { class: CSS$v.contentStart, hidden: !hasContentStart }, hAsync("slot", { name: SLOTS$f.contentStart, onSlotchange: this.handleContentStartSlotChange })));
   }
   renderDefaultContent() {
-    return (hAsync("div", { class: CSS$u.content }, hAsync("slot", null)));
+    return (hAsync("div", { class: CSS$v.content }, hAsync("slot", null)));
   }
   renderContentEnd() {
     const { hasContentEnd } = this;
-    return (hAsync("div", { class: CSS$u.contentEnd, hidden: !hasContentEnd }, hAsync("slot", { name: SLOTS$f.contentEnd, onSlotchange: this.handleContentEndSlotChange })));
+    return (hAsync("div", { class: CSS$v.contentEnd, hidden: !hasContentEnd }, hAsync("slot", { name: SLOTS$f.contentEnd, onSlotchange: this.handleContentEndSlotChange })));
   }
   render() {
-    return (hAsync(Host, null, hAsync("div", { class: CSS$u.container }, this.renderActionsStart(), this.renderContentStart(), this.renderDefaultContent(), this.renderContentEnd(), this.renderActionsEnd())));
+    return (hAsync(Host, null, hAsync("div", { class: CSS$v.container }, this.renderActionsStart(), this.renderContentStart(), this.renderDefaultContent(), this.renderContentEnd(), this.renderActionsEnd())));
   }
   static get style() { return stackCss; }
   static get cmpMeta() { return {
@@ -39528,7 +39867,7 @@ class StepperItem {
     return (hAsync(Host, { "aria-expanded": toAriaBoolean(this.selected), onClick: this.handleItemClick, onKeyDown: this.keyDownHandler }, hAsync("div", { class: "container" }, hAsync("div", { class: "stepper-item-header", tabIndex: 
       /* additional tab index logic needed because of display: contents */
       this.layout === "horizontal" && !this.disabled ? 0 : null,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.headerEl = el) }, this.icon ? this.renderIcon() : null, this.numbered ? hAsync("div", { class: "stepper-item-number" }, this.renderNumbers(), ".") : null, hAsync("div", { class: "stepper-item-header-text" }, hAsync("span", { class: "stepper-item-heading" }, this.heading), hAsync("span", { class: "stepper-item-description" }, this.description))), hAsync("div", { class: "stepper-item-content" }, hAsync("slot", null)))));
   }
   //--------------------------------------------------------------------------
@@ -39702,7 +40041,7 @@ class Switch {
   // --------------------------------------------------------------------------
   render() {
     return (hAsync(Host, { onClick: this.clickHandler, onKeyDown: this.keyDownHandler }, hAsync("div", { "aria-checked": toAriaBoolean(this.checked), "aria-label": getLabelText(this), class: "container", role: "switch", tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setSwitchEl }, hAsync("div", { class: "track" }, hAsync("div", { class: "handle" })), hAsync(HiddenFormInputSlot, { component: this }))));
   }
   get el() { return getElement(this); }
@@ -39936,11 +40275,11 @@ class TabNav {
     const offset = `${this.indicatorOffset}px`;
     const indicatorStyle = dir !== "rtl" ? { width, left: offset } : { width, right: offset };
     return (hAsync(Host, { role: "tablist" }, hAsync("div", { class: "tab-nav", onScroll: this.handleContainerScroll,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.tabNavEl = el) }, hAsync("slot", null), hAsync("div", { class: "tab-nav-active-indicator-container",
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.activeIndicatorContainerEl = el) }, hAsync("div", { class: "tab-nav-active-indicator", style: indicatorStyle,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.activeIndicatorEl = el) })))));
   }
   //--------------------------------------------------------------------------
@@ -40199,13 +40538,13 @@ class TabTitle {
         container: true,
         [CSS$9.iconPresent]: !!this.iconStart || !!this.iconEnd,
       }, hidden: closed,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => this.resizeObserver?.observe(el) }, hAsync("div", { class: { [CSS$9.content]: true, [CSS$9.contentHasText]: this.hasText } }, this.iconStart ? iconStartEl : null, hAsync("slot", null), this.iconEnd ? iconEndEl : null), this.renderCloseButton())));
   }
   renderCloseButton() {
     const { closable, messages } = this;
     return closable ? (hAsync("button", { "aria-label": messages.close, class: CSS$9.closeButton, disabled: false, key: CSS$9.closeButton, onClick: this.closeClickHandler, title: messages.close, type: "button",
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.closeButtonEl = el) }, hAsync("calcite-icon", { icon: ICONS$4.close, scale: this.scale === "l" ? "m" : "s" }))) : null;
   }
   async componentDidLoad() {
@@ -40649,7 +40988,7 @@ class TextArea {
         [CSS$8.blockSizeFull]: !hasFooter,
         [CSS$8.borderColor]: !hasFooter,
       }, cols: this.columns, disabled: this.disabled, name: this.name, onChange: this.handleChange, onInput: this.handleInput, placeholder: this.placeholder, readonly: this.readOnly, required: this.required, rows: this.rows, value: this.value, wrap: this.wrap,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setTextAreaEl }), hAsync("span", { class: { [CSS$8.content]: true } }, hAsync("slot", { onSlotchange: this.contentSlotChangeHandler })), hAsync("footer", { class: {
         [CSS$8.footer]: true,
         [CSS$8.readOnly]: this.readOnly,
@@ -41715,7 +42054,7 @@ class TimePicker {
         [CSS$6.input]: true,
         [CSS$6.hour]: true,
       }, onFocus: this.focusHandler, onKeyDown: this.hourKeyDownHandler, role: "spinbutton", tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setHourEl }, this.localizedHour || "--"), hAsync("span", { "aria-label": this.messages.hourDown, class: {
         [CSS$6.button]: true,
         [CSS$6.buttonHourDown]: true,
@@ -41727,7 +42066,7 @@ class TimePicker {
         [CSS$6.input]: true,
         [CSS$6.minute]: true,
       }, onFocus: this.focusHandler, onKeyDown: this.minuteKeyDownHandler, role: "spinbutton", tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setMinuteEl }, this.localizedMinute || "--"), hAsync("span", { "aria-label": this.messages.minuteDown, class: {
         [CSS$6.button]: true,
         [CSS$6.buttonMinuteDown]: true,
@@ -41738,7 +42077,7 @@ class TimePicker {
         [CSS$6.input]: true,
         [CSS$6.second]: true,
       }, onFocus: this.focusHandler, onKeyDown: this.secondKeyDownHandler, role: "spinbutton", tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setSecondEl }, this.localizedSecond || "--"), hAsync("span", { "aria-label": this.messages.secondDown, class: {
         [CSS$6.button]: true,
         [CSS$6.buttonSecondDown]: true,
@@ -41753,7 +42092,7 @@ class TimePicker {
         [CSS$6.input]: true,
         [CSS$6.meridiem]: true,
       }, onFocus: this.focusHandler, onKeyDown: this.meridiemKeyDownHandler, role: "spinbutton", tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setMeridiemEl }, this.localizedMeridiem || "--"), hAsync("span", { "aria-label": this.messages.meridiemDown, class: {
         [CSS$6.button]: true,
         [CSS$6.buttonMeridiemDown]: true,
@@ -42135,7 +42474,7 @@ class TipManager {
       return null;
     }
     return (hAsync("section", { "aria-hidden": toAriaBoolean(closed), class: CSS$4.container, hidden: closed, onKeyDown: this.tipManagerKeyDownHandler, tabIndex: 0,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.storeContainerRef }, hAsync("header", { class: CSS$4.header }, hAsync(Heading, { class: CSS$4.heading, level: headingLevel }, groupTitle), hAsync("calcite-action", { class: CSS$4.close, onClick: this.hideTipManager, scale: "m", text: closeLabel }, hAsync("calcite-icon", { icon: ICONS$2.close, scale: "m" }))), hAsync("div", { class: {
         [CSS$4.tipContainer]: true,
         [CSS$4.tipContainerAdvancing]: !closed && direction === "advancing",
@@ -42566,9 +42905,9 @@ class Tooltip {
         [FloatingCSS.animation]: true,
         [FloatingCSS.animationActive]: displayed,
       },
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setTransitionEl }, hAsync(FloatingArrow, { floatingLayout: floatingLayout,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (arrowEl) => (this.arrowEl = arrowEl) }), hAsync("div", { class: CSS$3.container }, hAsync("slot", null)))));
   }
   get el() { return getElement(this); }
@@ -42820,7 +43159,8 @@ class Tree {
   }
   updateAncestorTree(event) {
     const item = event.target;
-    if (item.disabled) {
+    const updateItem = event.detail.updateItem;
+    if (item.disabled || (item.indeterminate && !updateItem)) {
       return;
     }
     const ancestors = [];
@@ -42832,9 +43172,13 @@ class Tree {
     const childItems = Array.from(item.querySelectorAll("calcite-tree-item:not([disabled])"));
     const childItemsWithNoChildren = childItems.filter((child) => !child.hasChildren);
     const childItemsWithChildren = childItems.filter((child) => child.hasChildren);
-    const futureSelected = item.hasChildren
-      ? !(item.selected || item.indeterminate)
-      : !item.selected;
+    let futureSelected;
+    if (updateItem) {
+      futureSelected = item.hasChildren ? !(item.selected || item.indeterminate) : !item.selected;
+    }
+    else {
+      futureSelected = item.selected;
+    }
     childItemsWithNoChildren.forEach((el) => {
       el.selected = futureSelected;
       el.indeterminate = false;
@@ -42849,12 +43193,14 @@ class Tree {
       const directChildItems = Array.from(el.querySelectorAll(":scope > calcite-tree > calcite-tree-item"));
       updateItemState(directChildItems, el);
     });
-    if (item.hasChildren) {
-      updateItemState(childItems, item);
-    }
-    else {
-      item.selected = futureSelected;
-      item.indeterminate = false;
+    if (updateItem) {
+      if (item.hasChildren) {
+        updateItemState(childItems, item);
+      }
+      else {
+        item.selected = futureSelected;
+        item.indeterminate = false;
+      }
     }
     ancestors.forEach((ancestor) => {
       const descendants = nodeListToArray(ancestor.querySelectorAll("calcite-tree-item"));
@@ -42869,7 +43215,9 @@ class Tree {
       ancestor.selected = !indeterminate;
     });
     this.selectedItems = nodeListToArray(this.el.querySelectorAll("calcite-tree-item")).filter((i) => i.selected);
-    this.calciteTreeSelect.emit();
+    if (updateItem) {
+      this.calciteTreeSelect.emit();
+    }
   }
   // --------------------------------------------------------------------------
   //
@@ -42921,7 +43269,7 @@ const ICONS$1 = {
   blank: "blank",
 };
 
-const treeItemCss = "/*!@:host([disabled])*/[disabled].sc-calcite-tree-item-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-tree-item-h *.sc-calcite-tree-item,.sc-calcite-tree-item-h[disabled] .sc-calcite-tree-item-s>*{pointer-events:none}/*!@:host*/.sc-calcite-tree-item-h{display:block;max-inline-size:100%;cursor:pointer;color:var(--calcite-ui-text-3)}/*!@.node-actions-container*/.node-actions-container.sc-calcite-tree-item{display:flex;justify-content:space-between}/*!@:host([calcite-hydrated-hidden])*/[calcite-hydrated-hidden].sc-calcite-tree-item-h{visibility:hidden !important;pointer-events:none}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-tree-item-h[disabled] .sc-calcite-tree-item-s>[calcite-hydrated][disabled],[disabled].sc-calcite-tree-item-h [calcite-hydrated][disabled].sc-calcite-tree-item{opacity:1}/*!@:host([scale=s])*/[scale=s].sc-calcite-tree-item-h{font-size:var(--calcite-font-size--2);line-height:1rem}/*!@:host([scale=s]) .node-actions-container*/[scale=s].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item{min-block-size:1.5rem}/*!@:host([scale=s]) .node-actions-container .node-container .checkbox,\n:host([scale=s]) .node-actions-container .node-container .chevron,\n:host([scale=s]) .node-actions-container .node-container .checkmark,\n:host([scale=s]) .node-actions-container .node-container .bullet-point*/[scale=s].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .checkbox.sc-calcite-tree-item,[scale=s].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .chevron.sc-calcite-tree-item,[scale=s].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .checkmark.sc-calcite-tree-item,[scale=s].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .bullet-point.sc-calcite-tree-item{margin-inline:0.25rem}/*!@:host([scale=s]) .node-actions-container .node-container .icon-start*/[scale=s].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .icon-start.sc-calcite-tree-item{margin-inline:0.75rem}/*!@:host([scale=m])*/[scale=m].sc-calcite-tree-item-h{font-size:var(--calcite-font-size--1);line-height:1rem}/*!@:host([scale=m]) .node-actions-container*/[scale=m].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item{min-block-size:2rem}/*!@:host([scale=m]) .node-actions-container .node-container .checkbox,\n:host([scale=m]) .node-actions-container .node-container .chevron,\n:host([scale=m]) .node-actions-container .node-container .checkmark,\n:host([scale=m]) .node-actions-container .node-container .bullet-point*/[scale=m].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .checkbox.sc-calcite-tree-item,[scale=m].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .chevron.sc-calcite-tree-item,[scale=m].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .checkmark.sc-calcite-tree-item,[scale=m].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .bullet-point.sc-calcite-tree-item{margin-inline:0.5rem}/*!@:host([scale=m]) .node-actions-container .node-container .icon-start*/[scale=m].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .icon-start.sc-calcite-tree-item{margin-inline:0.75rem}/*!@:host([scale=l])*/[scale=l].sc-calcite-tree-item-h{font-size:var(--calcite-font-size-0);line-height:1.25rem}/*!@:host([scale=l]) .node-actions-container*/[scale=l].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item{min-block-size:2.75rem}/*!@:host([scale=l]) .node-actions-container .node-container .checkbox,\n:host([scale=l]) .node-actions-container .node-container .chevron,\n:host([scale=l]) .node-actions-container .node-container .checkmark,\n:host([scale=l]) .node-actions-container .node-container .bullet-point*/[scale=l].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .checkbox.sc-calcite-tree-item,[scale=l].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .chevron.sc-calcite-tree-item,[scale=l].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .checkmark.sc-calcite-tree-item,[scale=l].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .bullet-point.sc-calcite-tree-item{margin-inline:0.75rem}/*!@:host([scale=l]) .node-actions-container .node-container .icon-start*/[scale=l].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .icon-start.sc-calcite-tree-item{margin-inline:0.75rem}/*!@:host([lines]) .children-container:after*/[lines].sc-calcite-tree-item-h .children-container.sc-calcite-tree-item:after{position:absolute;inset-block-start:0px;z-index:var(--calcite-app-z-index);inline-size:1px;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;block-size:96%;content:\"\";background-color:var(--calcite-ui-border-2)}/*!@:host(:not([lines])) .node-container:after*/.sc-calcite-tree-item-h:not([lines]) .node-container.sc-calcite-tree-item:after{display:none}/*!@::slotted(*)*/.sc-calcite-tree-item-s>*{min-inline-size:0px;max-inline-size:100%;overflow-wrap:break-word;color:inherit;text-decoration:none !important}/*!@::slotted(*):hover*/.sc-calcite-tree-item-s>*:hover{text-decoration:none !important}/*!@::slotted(a)*/.sc-calcite-tree-item-s>a{inline-size:100%;text-decoration-line:none}/*!@:host*/.sc-calcite-tree-item-h{outline-color:transparent}/*!@:host:focus, :host:active*/.sc-calcite-tree-item-h:focus,.sc-calcite-tree-item-h:active{outline:2px solid transparent;outline-offset:2px;outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}/*!@:host(:focus:not([disabled]))*/.sc-calcite-tree-item-h:focus:not([disabled]){outline:2px solid transparent;outline-offset:2px;outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}/*!@.actions-end*/.actions-end.sc-calcite-tree-item{display:flex;flex-direction:row;align-items:center;align-self:stretch}/*!@.checkbox*/.checkbox.sc-calcite-tree-item{line-height:0}/*!@.checkbox-label*/.checkbox-label.sc-calcite-tree-item{pointer-events:none;display:flex;align-items:center}/*!@.checkbox:focus*/.checkbox.sc-calcite-tree-item:focus{outline:2px solid transparent;outline-offset:2px}/*!@.children-container*/.children-container.sc-calcite-tree-item{position:relative;block-size:0px;transform-origin:top;overflow:hidden;opacity:0;margin-inline-start:1.25rem;transform:scaleY(0);transition:var(--calcite-animation-timing) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-animation-timing) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out}/*!@.item--expanded > .children-container*/.item--expanded.sc-calcite-tree-item>.children-container.sc-calcite-tree-item{overflow:visible;opacity:1;transform:none;block-size:auto}/*!@.node-container*/.node-container.sc-calcite-tree-item{position:relative;display:flex;min-inline-size:0px;align-items:center}/*!@.node-container .checkmark,\n.node-container .bullet-point*/.node-container.sc-calcite-tree-item .checkmark.sc-calcite-tree-item,.node-container.sc-calcite-tree-item .bullet-point.sc-calcite-tree-item{opacity:0;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;color:var(--calcite-ui-border-1)}/*!@.node-container:hover .checkmark,\n.node-container:hover .bullet-point,\n:host([selected]) .node-container:hover .checkmark,\n:host([selected]) .node-container:hover .bullet-point,\n:host(:focus:not([disabled])) .node-container .checkmark,\n:host(:focus:not([disabled])) .node-container .bullet-point*/.node-container.sc-calcite-tree-item:hover .checkmark.sc-calcite-tree-item,.node-container.sc-calcite-tree-item:hover .bullet-point.sc-calcite-tree-item,[selected].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item:hover .checkmark.sc-calcite-tree-item,[selected].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item:hover .bullet-point.sc-calcite-tree-item,.sc-calcite-tree-item-h:focus:not([disabled]) .node-container.sc-calcite-tree-item .checkmark.sc-calcite-tree-item,.sc-calcite-tree-item-h:focus:not([disabled]) .node-container.sc-calcite-tree-item .bullet-point.sc-calcite-tree-item{opacity:1}/*!@:host([selected]) .node-container,\n:host([selected]) .node-container:hover*/[selected].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item,[selected].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item:hover{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}/*!@:host([selected]) .node-container .bullet-point,\n:host([selected]) .node-container .checkmark,\n:host([selected]) .node-container:hover .bullet-point,\n:host([selected]) .node-container:hover .checkmark*/[selected].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item .bullet-point.sc-calcite-tree-item,[selected].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item .checkmark.sc-calcite-tree-item,[selected].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item:hover .bullet-point.sc-calcite-tree-item,[selected].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item:hover .checkmark.sc-calcite-tree-item{opacity:1;color:var(--calcite-ui-brand)}/*!@:host([selection-mode=none]:not([has-children])):host([scale=s]) .node-container*/[selection-mode=none].sc-calcite-tree-item-h:not([has-children]).sc-calcite-tree-item-h([scale=s]) .node-container.sc-calcite-tree-item{padding-inline-start:0.5rem}/*!@:host([selection-mode=none]:not([has-children])):host([scale=m]) .node-container*/[selection-mode=none].sc-calcite-tree-item-h:not([has-children]).sc-calcite-tree-item-h([scale=m]) .node-container.sc-calcite-tree-item{padding-inline-start:1rem}/*!@:host([selection-mode=none]:not([has-children])):host([scale=l]) .node-container*/[selection-mode=none].sc-calcite-tree-item-h:not([has-children]).sc-calcite-tree-item-h([scale=l]) .node-container.sc-calcite-tree-item{padding-inline-start:1.5rem}/*!@:host(:not([has-children])):host([scale=s]) .node-container[data-selection-mode=ancestors] .checkbox*/.sc-calcite-tree-item-h:not([has-children]).sc-calcite-tree-item-h([scale=s]) .node-container[data-selection-mode=ancestors].sc-calcite-tree-item .checkbox.sc-calcite-tree-item{padding-inline-start:1.25rem}/*!@:host(:not([has-children])):host([scale=m]) .node-container[data-selection-mode=ancestors] .checkbox*/.sc-calcite-tree-item-h:not([has-children]).sc-calcite-tree-item-h([scale=m]) .node-container[data-selection-mode=ancestors].sc-calcite-tree-item .checkbox.sc-calcite-tree-item{padding-inline-start:1.5rem}/*!@:host(:not([has-children])):host([scale=l]) .node-container[data-selection-mode=ancestors] .checkbox*/.sc-calcite-tree-item-h:not([has-children]).sc-calcite-tree-item-h([scale=l]) .node-container[data-selection-mode=ancestors].sc-calcite-tree-item .checkbox.sc-calcite-tree-item{padding-inline-start:1.75rem}/*!@:host([has-children]) .node-container[data-selection-mode=ancestors] .checkbox*/[has-children].sc-calcite-tree-item-h .node-container[data-selection-mode=ancestors].sc-calcite-tree-item .checkbox.sc-calcite-tree-item{margin-inline-start:0}/*!@:host([has-children]) .node-container .bullet-point,\n:host([has-children]) .node-container .checkmark*/[has-children].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item .bullet-point.sc-calcite-tree-item,[has-children].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item .checkmark.sc-calcite-tree-item{display:none}/*!@:host([has-children][expanded]:not([selected]):not([selection-mode=none])) .node-container ::slotted(*)*/.sc-calcite-tree-item-h[has-children][expanded]:not([selected]):not([selection-mode=none]) .node-container .sc-calcite-tree-item-s>*{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}/*!@:host([has-children][selected]) .node-container[data-selection-mode=children], :host([has-children][selected]) .node-container[data-selection-mode=multichildren]*/[has-children][selected].sc-calcite-tree-item-h .node-container[data-selection-mode=children].sc-calcite-tree-item,[has-children][selected].sc-calcite-tree-item-h .node-container[data-selection-mode=multichildren].sc-calcite-tree-item{color:var(--calcite-ui-brand)}/*!@.chevron*/.chevron.sc-calcite-tree-item{position:relative;align-self:center;color:var(--calcite-ui-text-3);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;flex:0 0 auto;transform:rotate(0deg)}/*!@.calcite--rtl .chevron*/.calcite--rtl.sc-calcite-tree-item .chevron.sc-calcite-tree-item{transform:rotate(180deg)}/*!@.item--expanded .node-container > .chevron*/.item--expanded.sc-calcite-tree-item .node-container.sc-calcite-tree-item>.chevron.sc-calcite-tree-item{transform:rotate(90deg)}/*!@:host([selected]) .checkmark,\n:host([selected]) .bullet-point*/[selected].sc-calcite-tree-item-h .checkmark.sc-calcite-tree-item,[selected].sc-calcite-tree-item-h .bullet-point.sc-calcite-tree-item{color:var(--calcite-ui-brand)}/*!@:host([hidden])*/[hidden].sc-calcite-tree-item-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-tree-item{display:none}";
+const treeItemCss = "/*!@:host([disabled])*/[disabled].sc-calcite-tree-item-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-tree-item-h *.sc-calcite-tree-item,.sc-calcite-tree-item-h[disabled] .sc-calcite-tree-item-s>*{pointer-events:none}/*!@:host*/.sc-calcite-tree-item-h{display:block;max-inline-size:100%;cursor:pointer;color:var(--calcite-ui-text-3)}/*!@.node-actions-container*/.node-actions-container.sc-calcite-tree-item{display:flex}/*!@:host([calcite-hydrated-hidden])*/[calcite-hydrated-hidden].sc-calcite-tree-item-h{visibility:hidden !important;pointer-events:none}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-tree-item-h[disabled] .sc-calcite-tree-item-s>[calcite-hydrated][disabled],[disabled].sc-calcite-tree-item-h [calcite-hydrated][disabled].sc-calcite-tree-item{opacity:1}/*!@:host([scale=s])*/[scale=s].sc-calcite-tree-item-h{font-size:var(--calcite-font-size--2);line-height:1rem}/*!@:host([scale=s]) .node-actions-container*/[scale=s].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item{min-block-size:1.5rem}/*!@:host([scale=s]) .node-actions-container .node-container .checkbox,\n:host([scale=s]) .node-actions-container .node-container .chevron,\n:host([scale=s]) .node-actions-container .node-container .checkmark,\n:host([scale=s]) .node-actions-container .node-container .bullet-point*/[scale=s].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .checkbox.sc-calcite-tree-item,[scale=s].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .chevron.sc-calcite-tree-item,[scale=s].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .checkmark.sc-calcite-tree-item,[scale=s].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .bullet-point.sc-calcite-tree-item{margin-inline:0.25rem}/*!@:host([scale=s]) .node-actions-container .node-container .icon-start*/[scale=s].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .icon-start.sc-calcite-tree-item{margin-inline:0.75rem}/*!@:host([scale=m])*/[scale=m].sc-calcite-tree-item-h{font-size:var(--calcite-font-size--1);line-height:1rem}/*!@:host([scale=m]) .node-actions-container*/[scale=m].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item{min-block-size:2rem}/*!@:host([scale=m]) .node-actions-container .node-container .checkbox,\n:host([scale=m]) .node-actions-container .node-container .chevron,\n:host([scale=m]) .node-actions-container .node-container .checkmark,\n:host([scale=m]) .node-actions-container .node-container .bullet-point*/[scale=m].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .checkbox.sc-calcite-tree-item,[scale=m].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .chevron.sc-calcite-tree-item,[scale=m].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .checkmark.sc-calcite-tree-item,[scale=m].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .bullet-point.sc-calcite-tree-item{margin-inline:0.5rem}/*!@:host([scale=m]) .node-actions-container .node-container .icon-start*/[scale=m].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .icon-start.sc-calcite-tree-item{margin-inline:0.75rem}/*!@:host([scale=l])*/[scale=l].sc-calcite-tree-item-h{font-size:var(--calcite-font-size-0);line-height:1.25rem}/*!@:host([scale=l]) .node-actions-container*/[scale=l].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item{min-block-size:2.75rem}/*!@:host([scale=l]) .node-actions-container .node-container .checkbox,\n:host([scale=l]) .node-actions-container .node-container .chevron,\n:host([scale=l]) .node-actions-container .node-container .checkmark,\n:host([scale=l]) .node-actions-container .node-container .bullet-point*/[scale=l].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .checkbox.sc-calcite-tree-item,[scale=l].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .chevron.sc-calcite-tree-item,[scale=l].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .checkmark.sc-calcite-tree-item,[scale=l].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .bullet-point.sc-calcite-tree-item{margin-inline:0.75rem}/*!@:host([scale=l]) .node-actions-container .node-container .icon-start*/[scale=l].sc-calcite-tree-item-h .node-actions-container.sc-calcite-tree-item .node-container.sc-calcite-tree-item .icon-start.sc-calcite-tree-item{margin-inline:0.75rem}/*!@:host([lines]) .children-container:after*/[lines].sc-calcite-tree-item-h .children-container.sc-calcite-tree-item:after{position:absolute;inset-block-start:0px;z-index:var(--calcite-app-z-index);inline-size:1px;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;block-size:96%;content:\"\";background-color:var(--calcite-ui-border-2)}/*!@:host(:not([lines])) .node-container:after*/.sc-calcite-tree-item-h:not([lines]) .node-container.sc-calcite-tree-item:after{display:none}/*!@::slotted(*)*/.sc-calcite-tree-item-s>*{min-inline-size:0px;max-inline-size:100%;overflow-wrap:break-word;color:inherit;text-decoration:none !important}/*!@::slotted(*):hover*/.sc-calcite-tree-item-s>*:hover{text-decoration:none !important}/*!@::slotted(a)*/.sc-calcite-tree-item-s>a{inline-size:100%;text-decoration-line:none}/*!@:host*/.sc-calcite-tree-item-h{outline:2px solid transparent;outline-offset:2px}/*!@:host .node-container*/.sc-calcite-tree-item-h .node-container.sc-calcite-tree-item{outline-color:transparent}/*!@:host:focus .node-container, :host:active .node-container*/.sc-calcite-tree-item-h:focus .node-container.sc-calcite-tree-item,.sc-calcite-tree-item-h:active .node-container.sc-calcite-tree-item{outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}/*!@:host(:focus:not([disabled])) .node-container*/.sc-calcite-tree-item-h:focus:not([disabled]) .node-container.sc-calcite-tree-item{outline:2px solid transparent;outline-offset:2px;outline:2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));outline-offset:calc(\n            -2px *\n            calc(\n              1 -\n              2 * clamp(\n                0,\n                var(--calcite-ui-focus-offset-invert),\n                1\n              )\n            )\n          )}/*!@.actions-end*/.actions-end.sc-calcite-tree-item{display:flex;flex-direction:row;align-items:center;align-self:stretch}/*!@.checkbox*/.checkbox.sc-calcite-tree-item{line-height:0}/*!@.checkbox-label*/.checkbox-label.sc-calcite-tree-item{pointer-events:none;display:flex;align-items:center}/*!@.checkbox:focus*/.checkbox.sc-calcite-tree-item:focus{outline:2px solid transparent;outline-offset:2px}/*!@.children-container*/.children-container.sc-calcite-tree-item{position:relative;block-size:0px;transform-origin:top;overflow:hidden;opacity:0;margin-inline-start:1.25rem;transform:scaleY(0);transition:var(--calcite-animation-timing) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-animation-timing) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out}/*!@.item--expanded > .children-container*/.item--expanded.sc-calcite-tree-item>.children-container.sc-calcite-tree-item{overflow:visible;opacity:1;transform:none;block-size:auto}/*!@.node-container*/.node-container.sc-calcite-tree-item{position:relative;display:flex;min-inline-size:0px;flex-grow:1;align-items:center}/*!@.node-container .checkmark,\n.node-container .bullet-point*/.node-container.sc-calcite-tree-item .checkmark.sc-calcite-tree-item,.node-container.sc-calcite-tree-item .bullet-point.sc-calcite-tree-item{opacity:0;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;color:var(--calcite-ui-border-1)}/*!@.node-container:hover .checkmark,\n.node-container:hover .bullet-point,\n:host([selected]) .node-container:hover .checkmark,\n:host([selected]) .node-container:hover .bullet-point,\n:host(:focus:not([disabled])) .node-container .checkmark,\n:host(:focus:not([disabled])) .node-container .bullet-point*/.node-container.sc-calcite-tree-item:hover .checkmark.sc-calcite-tree-item,.node-container.sc-calcite-tree-item:hover .bullet-point.sc-calcite-tree-item,[selected].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item:hover .checkmark.sc-calcite-tree-item,[selected].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item:hover .bullet-point.sc-calcite-tree-item,.sc-calcite-tree-item-h:focus:not([disabled]) .node-container.sc-calcite-tree-item .checkmark.sc-calcite-tree-item,.sc-calcite-tree-item-h:focus:not([disabled]) .node-container.sc-calcite-tree-item .bullet-point.sc-calcite-tree-item{opacity:1}/*!@:host([selected]) .node-container,\n:host([selected]) .node-container:hover*/[selected].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item,[selected].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item:hover{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}/*!@:host([selected]) .node-container .bullet-point,\n:host([selected]) .node-container .checkmark,\n:host([selected]) .node-container:hover .bullet-point,\n:host([selected]) .node-container:hover .checkmark*/[selected].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item .bullet-point.sc-calcite-tree-item,[selected].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item .checkmark.sc-calcite-tree-item,[selected].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item:hover .bullet-point.sc-calcite-tree-item,[selected].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item:hover .checkmark.sc-calcite-tree-item{opacity:1;color:var(--calcite-ui-brand)}/*!@:host([selection-mode=none]:not([has-children])):host([scale=s]) .node-container*/[selection-mode=none].sc-calcite-tree-item-h:not([has-children]).sc-calcite-tree-item-h([scale=s]) .node-container.sc-calcite-tree-item{padding-inline-start:0.5rem}/*!@:host([selection-mode=none]:not([has-children])):host([scale=m]) .node-container*/[selection-mode=none].sc-calcite-tree-item-h:not([has-children]).sc-calcite-tree-item-h([scale=m]) .node-container.sc-calcite-tree-item{padding-inline-start:1rem}/*!@:host([selection-mode=none]:not([has-children])):host([scale=l]) .node-container*/[selection-mode=none].sc-calcite-tree-item-h:not([has-children]).sc-calcite-tree-item-h([scale=l]) .node-container.sc-calcite-tree-item{padding-inline-start:1.5rem}/*!@:host(:not([has-children])):host([scale=s]) .node-container[data-selection-mode=ancestors] .checkbox*/.sc-calcite-tree-item-h:not([has-children]).sc-calcite-tree-item-h([scale=s]) .node-container[data-selection-mode=ancestors].sc-calcite-tree-item .checkbox.sc-calcite-tree-item{padding-inline-start:1.25rem}/*!@:host(:not([has-children])):host([scale=m]) .node-container[data-selection-mode=ancestors] .checkbox*/.sc-calcite-tree-item-h:not([has-children]).sc-calcite-tree-item-h([scale=m]) .node-container[data-selection-mode=ancestors].sc-calcite-tree-item .checkbox.sc-calcite-tree-item{padding-inline-start:1.5rem}/*!@:host(:not([has-children])):host([scale=l]) .node-container[data-selection-mode=ancestors] .checkbox*/.sc-calcite-tree-item-h:not([has-children]).sc-calcite-tree-item-h([scale=l]) .node-container[data-selection-mode=ancestors].sc-calcite-tree-item .checkbox.sc-calcite-tree-item{padding-inline-start:1.75rem}/*!@:host([has-children]) .node-container[data-selection-mode=ancestors] .checkbox*/[has-children].sc-calcite-tree-item-h .node-container[data-selection-mode=ancestors].sc-calcite-tree-item .checkbox.sc-calcite-tree-item{margin-inline-start:0}/*!@:host([has-children]) .node-container .bullet-point,\n:host([has-children]) .node-container .checkmark*/[has-children].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item .bullet-point.sc-calcite-tree-item,[has-children].sc-calcite-tree-item-h .node-container.sc-calcite-tree-item .checkmark.sc-calcite-tree-item{display:none}/*!@:host([has-children][expanded]:not([selected]):not([selection-mode=none])) .node-container ::slotted(*)*/.sc-calcite-tree-item-h[has-children][expanded]:not([selected]):not([selection-mode=none]) .node-container .sc-calcite-tree-item-s>*{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}/*!@:host([has-children][selected]) .node-container[data-selection-mode=children], :host([has-children][selected]) .node-container[data-selection-mode=multichildren]*/[has-children][selected].sc-calcite-tree-item-h .node-container[data-selection-mode=children].sc-calcite-tree-item,[has-children][selected].sc-calcite-tree-item-h .node-container[data-selection-mode=multichildren].sc-calcite-tree-item{color:var(--calcite-ui-brand)}/*!@.chevron*/.chevron.sc-calcite-tree-item{position:relative;align-self:center;color:var(--calcite-ui-text-3);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;flex:0 0 auto;transform:rotate(0deg)}/*!@.calcite--rtl .chevron*/.calcite--rtl.sc-calcite-tree-item .chevron.sc-calcite-tree-item{transform:rotate(180deg)}/*!@.item--expanded .node-container > .chevron*/.item--expanded.sc-calcite-tree-item .node-container.sc-calcite-tree-item>.chevron.sc-calcite-tree-item{transform:rotate(90deg)}/*!@:host([selected]) .checkmark,\n:host([selected]) .bullet-point*/[selected].sc-calcite-tree-item-h .checkmark.sc-calcite-tree-item,[selected].sc-calcite-tree-item-h .bullet-point.sc-calcite-tree-item{color:var(--calcite-ui-brand)}/*!@:host([hidden])*/[hidden].sc-calcite-tree-item-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-tree-item{display:none}";
 
 /**
  * @slot - A slot for adding text.
@@ -42937,6 +43285,7 @@ class TreeItem {
       this.expanded = !this.expanded;
     };
     this.childrenClickHandler = (event) => event.stopPropagation();
+    this.userChangedValue = false;
     this.updateParentIsExpanded = (el, expanded) => {
       const items = getSlotted(el, SLOTS$1.children, {
         all: true,
@@ -42959,12 +43308,24 @@ class TreeItem {
     this.scale = undefined;
     this.indeterminate = false;
     this.selectionMode = undefined;
-    this.updateAfterInitialRender = false;
     this.hasEndActions = false;
+    this.updateAfterInitialRender = false;
   }
   expandedHandler(newValue) {
     this.updateParentIsExpanded(this.el, newValue);
   }
+  handleSelectedChange(value) {
+    if (this.selectionMode === "ancestors" && !this.userChangedValue) {
+      if (value) {
+        this.indeterminate = false;
+      }
+      this.calciteInternalTreeItemSelect.emit({
+        modifyCurrentSelection: true,
+        forceToggle: false,
+        updateItem: false,
+      });
+    }
+  }
   getSelectionMode() {
     this.isSelectionMultiLike =
       this.selectionMode === "multiple" || this.selectionMode === "multichildren";
@@ -43050,7 +43411,7 @@ class TreeItem {
         [CSS$2.nodeContainer]: true,
         [CSS_UTILITY.rtl]: rtl,
       }, "data-selection-mode": this.selectionMode,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.defaultSlotWrapper = el) }, chevron, itemIndicator, this.iconStart ? iconStartEl : null, checkbox ? checkbox : defaultSlotNode), hAsync("div", { class: CSS$2.actionsEnd, hidden: !hasEndActions, ref: (el) => (this.actionSlotWrapper = el) }, slotNode)), hAsync("div", { class: {
         [CSS$2.childrenContainer]: true,
         [CSS_UTILITY.rtl]: rtl,
@@ -43075,7 +43436,9 @@ class TreeItem {
     this.calciteInternalTreeItemSelect.emit({
       modifyCurrentSelection: this.selectionMode === "ancestors" || this.isSelectionMultiLike,
       forceToggle: false,
+      updateItem: true,
     });
+    this.userChangedValue = true;
   }
   keyDownHandler(event) {
     let root;
@@ -43087,9 +43450,11 @@ class TreeItem {
         if (this.selectionMode === "none") {
           return;
         }
+        this.userChangedValue = true;
         this.calciteInternalTreeItemSelect.emit({
           modifyCurrentSelection: this.isSelectionMultiLike,
           forceToggle: false,
+          updateItem: true,
         });
         event.preventDefault();
         break;
@@ -43099,6 +43464,7 @@ class TreeItem {
         }
         // activates a node, i.e., performs its default action. For parent nodes, one possible default action is to open or close the node. In single-select trees where selection does not follow focus (see note below), the default action is typically to select the focused node.
         const link = nodeListToArray(this.el.children).find((el) => el.matches("a"));
+        this.userChangedValue = true;
         if (link) {
           link.click();
           this.selected = true;
@@ -43107,6 +43473,7 @@ class TreeItem {
           this.calciteInternalTreeItemSelect.emit({
             modifyCurrentSelection: this.isSelectionMultiLike,
             forceToggle: false,
+            updateItem: true,
           });
         }
         event.preventDefault();
@@ -43159,6 +43526,11 @@ class TreeItem {
       else if (selectedSiblings.length > 0) {
         parentItem.indeterminate = true;
       }
+      const childItems = Array.from(this.el.querySelectorAll("calcite-tree-item:not([disabled])"));
+      childItems.forEach((item) => {
+        item.selected = true;
+        item.indeterminate = false;
+      });
     }
     else if (this.indeterminate) {
       const parentItem = this.parentTreeItem;
@@ -43168,6 +43540,7 @@ class TreeItem {
   get el() { return getElement(this); }
   static get watchers() { return {
     "expanded": ["expandedHandler"],
+    "selected": ["handleSelectedChange"],
     "selectionMode": ["getSelectionMode"]
   }; }
   static get style() { return treeItemCss; }
@@ -43187,8 +43560,8 @@ class TreeItem {
       "scale": [1537],
       "indeterminate": [516],
       "selectionMode": [1537, "selection-mode"],
-      "updateAfterInitialRender": [32],
-      "hasEndActions": [32]
+      "hasEndActions": [32],
+      "updateAfterInitialRender": [32]
     },
     "$listeners$": [[0, "click", "onClick"], [0, "keydown", "keyDownHandler"]],
     "$lazyBundleId$": "-",
@@ -43626,14 +43999,14 @@ class ValueListItem {
     const { icon, iconFlipRtl } = this;
     if (icon === ICON_TYPES$1.grip) {
       return (hAsync("span", { class: {
-          [CSS$m.handle]: true,
-          [CSS$m.handleActivated]: this.handleActivated,
+          [CSS$n.handle]: true,
+          [CSS$n.handleActivated]: this.handleActivated,
         }, "data-js-handle": true, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => (this.handleEl = el), role: "button", tabindex: "0" }, hAsync("calcite-icon", { flipRtl: iconFlipRtl, icon: ICONS.drag, scale: "s" })));
     }
   }
   render() {
     return (hAsync(Host, { id: this.el.id || this.guid }, this.renderHandle(), hAsync("calcite-pick-list-item", { description: this.description, deselectDisabled: this.deselectDisabled, disabled: this.disabled, label: this.label, metadata: this.metadata, nonInteractive: this.nonInteractive, onCalciteListItemChange: this.handleSelectChange, removable: this.removable, selected: this.selected, value: this.value,
-      // eslint-disable-next-line react/jsx-sort-props
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.getPickListRef }, this.renderActionsStart(), this.renderActionsEnd())));
   }
   get el() { return getElement(this); }
@@ -43738,6 +44111,7 @@ registerComponents([
   SegmentedControl,
   SegmentedControlItem,
   Select,
+  Sheet,
   Shell,
   ShellCenterRow,
   ShellPanel,