@esri/calcite-components 1.9.0-next.9 → 1.9.0

package/hydrate/index.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.9
+ * v1.9.0
  */
 'use strict';
 
@@ -9117,7 +9117,7 @@ var baseFor = createBaseFor();
  * }, _.now());
  * // => Logs the number of milliseconds it took for the deferred invocation.
  */
-var now = function() {
+var now$1 = function() {
   return root.Date.now();
 };
 
@@ -9246,7 +9246,7 @@ function debounce(func, wait, options) {
   }
 
   function timerExpired() {
-    var time = now();
+    var time = now$1();
     if (shouldInvoke(time)) {
       return trailingEdge(time);
     }
@@ -9275,11 +9275,11 @@ function debounce(func, wait, options) {
   }
 
   function flush() {
-    return timerId === undefined ? result : trailingEdge(now());
+    return timerId === undefined ? result : trailingEdge(now$1());
   }
 
   function debounced() {
-    var time = now(),
+    var time = now$1(),
         isInvoking = shouldInvoke(time);
 
     lastArgs = arguments;
@@ -9468,6 +9468,7 @@ const SLOTS$w = {
 const ICONS$j = {
   menu: "ellipsis",
 };
+const activeAttr = "data-active";
 
 const overflowActionsDebounceInMs = 150;
 const groupBufferPx = 2;
@@ -9681,9 +9682,12 @@ class ActionBar {
     this.updateGroups();
   }
   overflowDisabledHandler(overflowActionsDisabled) {
-    overflowActionsDisabled
-      ? this.resizeObserver.disconnect()
-      : this.resizeObserver.observe(this.el);
+    if (overflowActionsDisabled) {
+      this.resizeObserver?.disconnect();
+      return;
+    }
+    this.resizeObserver?.observe(this.el);
+    this.overflowActions();
   }
   onMessagesChange() {
     /* wired up by t9n util */
@@ -9928,7 +9932,7 @@ function getRoundRobinIndex(index, total) {
   return (index + total) % total;
 }
 
-const actionMenuCss = "/*!@:host*/.sc-calcite-action-menu-h{box-sizing:border-box;display:flex;flex-direction:column;font-size:var(--calcite-font-size-1);color:var(--calcite-ui-text-2)}/*!@.menu ::slotted(calcite-action)*/.menu .sc-calcite-action-menu-s>calcite-action{margin:0.125rem;display:flex;outline-color:transparent}/*!@.menu ::slotted(calcite-action[active])*/.menu .sc-calcite-action-menu-s>calcite-action[active]{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          );outline-offset:0px}/*!@.default-trigger*/.default-trigger.sc-calcite-action-menu{position:relative;block-size:100%;flex:0 1 auto;align-self:stretch}/*!@slot[name=trigger]::slotted(calcite-action),\ncalcite-action::slotted([slot=trigger])*/slot[name=trigger].sc-calcite-action-menu-s>calcite-action,calcite-action.sc-calcite-action-menu-s>[slot=trigger]{position:relative;block-size:100%;flex:0 1 auto;align-self:stretch}/*!@.menu*/.menu.sc-calcite-action-menu{flex-direction:column;flex-wrap:nowrap;outline:2px solid transparent;outline-offset:2px}/*!@:host([hidden])*/[hidden].sc-calcite-action-menu-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-action-menu{display:none}";
+const actionMenuCss = "/*!@:host*/.sc-calcite-action-menu-h{box-sizing:border-box;display:flex;flex-direction:column;font-size:var(--calcite-font-size-1);color:var(--calcite-ui-text-2)}/*!@.menu ::slotted(calcite-action)*/.menu .sc-calcite-action-menu-s>calcite-action{margin:0.125rem;display:flex;outline-color:transparent}/*!@.menu ::slotted(calcite-action[data-active])*/.menu .sc-calcite-action-menu-s>calcite-action[data-active]{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          );outline-offset:0px}/*!@.default-trigger*/.default-trigger.sc-calcite-action-menu{position:relative;block-size:100%;flex:0 1 auto;align-self:stretch}/*!@slot[name=trigger]::slotted(calcite-action),\ncalcite-action::slotted([slot=trigger])*/slot[name=trigger].sc-calcite-action-menu-s>calcite-action,calcite-action.sc-calcite-action-menu-s>[slot=trigger]{position:relative;block-size:100%;flex:0 1 auto;align-self:stretch}/*!@.menu*/.menu.sc-calcite-action-menu{flex-direction:column;flex-wrap:nowrap;outline:2px solid transparent;outline-offset:2px}/*!@:host([hidden])*/[hidden].sc-calcite-action-menu-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-action-menu{display:none}";
 
 const SUPPORTED_MENU_NAV_KEYS = ["ArrowUp", "ArrowDown", "End", "Home"];
 /**
@@ -10036,7 +10040,8 @@ class ActionMenu {
       if (!action.id) {
         action.id = id;
       }
-      action.active = index === activeMenuItemIndex;
+      // data attribute is used to style the "activeMenuItemIndex" action using token focus styling.
+      action.toggleAttribute(activeAttr, index === activeMenuItemIndex);
     };
     this.updateActions = (actions) => {
       actions?.forEach(this.updateAction);
@@ -10482,12 +10487,58 @@ const SLOTS$t = {
 };
 const CSS$17 = {
   actionsEnd: "actions-end",
+  close: "close",
   container: "container",
-  close: "alert-close",
-  slottedInShell: "slotted-in-shell",
+  containerBottom: "container--bottom",
+  containerBottomEnd: "container--bottom-end",
+  containerBottomStart: "container--bottom-start",
+  containerQueued: "container--queued",
+  containerTop: "container--top",
+  containerTopEnd: "container--top-end",
+  containerTopStart: "container--top-start",
+  content: "content",
+  contentContainer: "content-container",
+  dismissProgress: "dismiss-progress",
+  footer: "footer",
+  icon: "icon",
+  containerSlottedInShell: "container--slotted-in-shell",
+  queueCount: "queue-count",
+  queueCountActive: "queue-count--active",
+  textContainer: "text-container",
 };
 
-const alertCss = "/*!@:host([scale=s])*/[scale=s].sc-calcite-alert-h{--calcite-alert-width:40em;--calcite-alert-spacing-token-small:0.5rem;--calcite-alert-spacing-token-large:0.75rem}/*!@:host([scale=s]) slot[name=title]::slotted(*),\n:host([scale=s]) *::slotted([slot=title])*/.sc-calcite-alert-h[scale=s] slot[name=title].sc-calcite-alert-s>*,.sc-calcite-alert-h[scale=s] *.sc-calcite-alert-s>[slot=title]{font-size:var(--calcite-font-size--1);line-height:1.375}/*!@:host([scale=s]) slot[name=message]::slotted(*),\n:host([scale=s]) *::slotted([slot=message])*/.sc-calcite-alert-h[scale=s] slot[name=message].sc-calcite-alert-s>*,.sc-calcite-alert-h[scale=s] *.sc-calcite-alert-s>[slot=message]{font-size:var(--calcite-font-size--2);line-height:1.375}/*!@:host([scale=s]) slot[name=link]::slotted(*),\n:host([scale=s]) *::slotted([slot=link])*/.sc-calcite-alert-h[scale=s] slot[name=link].sc-calcite-alert-s>*,.sc-calcite-alert-h[scale=s] *.sc-calcite-alert-s>[slot=link]{font-size:var(--calcite-font-size--2);line-height:1.375}/*!@:host([scale=s]) .alert-queue-count*/[scale=s].sc-calcite-alert-h .alert-queue-count.sc-calcite-alert{margin-inline:0.5rem}/*!@:host([scale=s]) .container*/[scale=s].sc-calcite-alert-h .container.sc-calcite-alert{--calcite-alert-min-height:3.5rem}/*!@:host([scale=s]) .alert-close*/[scale=s].sc-calcite-alert-h .alert-close.sc-calcite-alert{padding:0.5rem}/*!@:host([scale=m])*/[scale=m].sc-calcite-alert-h{--calcite-alert-width:50em;--calcite-alert-spacing-token-small:0.75rem;--calcite-alert-spacing-token-large:1rem}/*!@:host([scale=m]) slot[name=title]::slotted(*),\n:host([scale=m]) *::slotted([slot=title])*/.sc-calcite-alert-h[scale=m] slot[name=title].sc-calcite-alert-s>*,.sc-calcite-alert-h[scale=m] *.sc-calcite-alert-s>[slot=title]{font-size:var(--calcite-font-size-0);line-height:1.375}/*!@:host([scale=m]) slot[name=message]::slotted(*),\n:host([scale=m]) *::slotted([slot=message])*/.sc-calcite-alert-h[scale=m] slot[name=message].sc-calcite-alert-s>*,.sc-calcite-alert-h[scale=m] *.sc-calcite-alert-s>[slot=message]{font-size:var(--calcite-font-size--1);line-height:1.375}/*!@:host([scale=m]) slot[name=link]::slotted(*),\n:host([scale=m]) *::slotted([slot=link])*/.sc-calcite-alert-h[scale=m] slot[name=link].sc-calcite-alert-s>*,.sc-calcite-alert-h[scale=m] *.sc-calcite-alert-s>[slot=link]{font-size:var(--calcite-font-size--1);line-height:1.375}/*!@:host([scale=m]) .alert-queue-count*/[scale=m].sc-calcite-alert-h .alert-queue-count.sc-calcite-alert{margin-inline:0.75rem}/*!@:host([scale=m]) .container*/[scale=m].sc-calcite-alert-h .container.sc-calcite-alert{--calcite-alert-min-height:4.1875rem}/*!@:host([scale=l])*/[scale=l].sc-calcite-alert-h{--calcite-alert-width:60em;--calcite-alert-spacing-token-small:1rem;--calcite-alert-spacing-token-large:1.25rem}/*!@:host([scale=l]) slot[name=title]::slotted(*),\n:host([scale=l]) *::slotted([slot=title])*/.sc-calcite-alert-h[scale=l] slot[name=title].sc-calcite-alert-s>*,.sc-calcite-alert-h[scale=l] *.sc-calcite-alert-s>[slot=title]{margin-block-end:0.25rem;font-size:var(--calcite-font-size-1);line-height:1.375}/*!@:host([scale=l]) slot[name=message]::slotted(*),\n:host([scale=l]) *::slotted([slot=message])*/.sc-calcite-alert-h[scale=l] slot[name=message].sc-calcite-alert-s>*,.sc-calcite-alert-h[scale=l] *.sc-calcite-alert-s>[slot=message]{font-size:var(--calcite-font-size-0);line-height:1.375}/*!@:host([scale=l]) slot[name=link]::slotted(*),\n:host([scale=l]) *::slotted([slot=link])*/.sc-calcite-alert-h[scale=l] slot[name=link].sc-calcite-alert-s>*,.sc-calcite-alert-h[scale=l] *.sc-calcite-alert-s>[slot=link]{font-size:var(--calcite-font-size-0);line-height:1.375}/*!@:host([scale=l]) .alert-queue-count*/[scale=l].sc-calcite-alert-h .alert-queue-count.sc-calcite-alert{margin-inline:1rem}/*!@:host([scale=l]) .container*/[scale=l].sc-calcite-alert-h .container.sc-calcite-alert{--calcite-alert-min-height:5.625rem}/*!@:host*/.sc-calcite-alert-h{--calcite-alert-edge-distance:2rem;display:block}/*!@:host .container*/.sc-calcite-alert-h .container.sc-calcite-alert{pointer-events:none;position:fixed;z-index:var(--calcite-app-z-index-toast);margin-block:0px;margin-inline:auto;display:flex;align-items:center;justify-content:center;background-color:var(--calcite-ui-foreground-1);opacity:0;--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);border-radius:var(--calcite-border-radius);border-block-start:0px solid transparent;border-inline:1px solid var(--calcite-ui-border-3);border-block-end:1px solid var(--calcite-ui-border-3);min-block-size:var(--calcite-alert-min-height);inline-size:var(--calcite-alert-width);max-inline-size:calc(100% - (var(--calcite-alert-edge-distance) * 2 + 2px));max-block-size:0;transition:var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out}/*!@:host .container.bottom, :host .container.top*/.sc-calcite-alert-h .container.bottom.sc-calcite-alert,.sc-calcite-alert-h .container.top.sc-calcite-alert{inset-inline-end:0;inset-inline-start:0}/*!@:host .container[class*=bottom]*/.sc-calcite-alert-h .container[class*=bottom].sc-calcite-alert{transform:translate3d(0, var(--calcite-alert-edge-distance), 0);inset-block-end:var(--calcite-alert-edge-distance)}/*!@:host .container[class*=top]*/.sc-calcite-alert-h .container[class*=top].sc-calcite-alert{transform:translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), 0);inset-block-start:var(--calcite-alert-edge-distance)}/*!@:host .container[class*=-start]*/.sc-calcite-alert-h .container[class*=-start].sc-calcite-alert{inset-inline-start:var(--calcite-alert-edge-distance);inset-inline-end:auto}/*!@:host .container[class*=-end]*/.sc-calcite-alert-h .container[class*=-end].sc-calcite-alert{inset-inline-end:var(--calcite-alert-edge-distance);inset-inline-start:auto}/*!@:host([calcite-hydrated-hidden])*/[calcite-hydrated-hidden].sc-calcite-alert-h{visibility:hidden !important;pointer-events:none}/*!@.container*/.container.sc-calcite-alert{display:flex;inline-size:100%;align-items:center;justify-content:center}/*!@.alert-close*/.alert-close.sc-calcite-alert{outline-color:transparent}/*!@.alert-close:focus*/.alert-close.sc-calcite-alert: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([open]) .container:not(.queued)*/[open].sc-calcite-alert-h .container.sc-calcite-alert:not(.queued){max-block-size:100%;border-block-start-width:2px;opacity:1;pointer-events:initial}/*!@:host([open]) .container:not(.queued)[class*=bottom]*/[open].sc-calcite-alert-h .container.sc-calcite-alert:not(.queued)[class*=bottom]{transform:translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), inherit)}/*!@:host([open]) .container:not(.queued)[class*=top]*/[open].sc-calcite-alert-h .container.sc-calcite-alert:not(.queued)[class*=top]{transform:translate3d(0, var(--calcite-alert-edge-distance), inherit)}/*!@slot[name=title]::slotted(*),\n*::slotted([slot=title])*/slot[name=title].sc-calcite-alert-s>*,*.sc-calcite-alert-s>[slot=title]{font-size:var(--calcite-font-size-0);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}/*!@slot[name=message]::slotted(*),\n*::slotted([slot=message])*/slot[name=message].sc-calcite-alert-s>*,*.sc-calcite-alert-s>[slot=message]{margin:0px;display:inline;font-size:var(--calcite-font-size--1);line-height:1.375;font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-2);margin-inline-end:0.5rem}/*!@slot[name=link]::slotted(*),\n*::slotted([slot=link])*/slot[name=link].sc-calcite-alert-s>*,*.sc-calcite-alert-s>[slot=link]{display:inline-flex;color:var(--calcite-ui-text-link)}/*!@.alert-content*/.alert-content.sc-calcite-alert{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;padding-inline:var(--calcite-alert-spacing-token-large);flex:0 0 auto;display:flex;flex-direction:column;overflow-wrap:break-word;background-color:var(--calcite-ui-foreground-1);flex:1 1 0;min-inline-size:0;padding-block:var(--calcite-alert-spacing-token-small);padding-inline:0 var(--calcite-alert-spacing-token-small);border-radius:var(--calcite-border-radius)}/*!@.alert-content:first-of-type:not(:only-child)*/.alert-content.sc-calcite-alert:first-of-type:not(:only-child){padding-inline-start:var(--calcite-alert-spacing-token-large)}/*!@.alert-content:only-child*/.alert-content.sc-calcite-alert:only-child{padding:var(--calcite-alert-spacing-token-small)}/*!@.alert-icon*/.alert-icon.sc-calcite-alert{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;padding-block:var(--calcite-alert-spacing-token-small);padding-inline:var(--calcite-alert-spacing-token-large);flex:0 0 auto;display:flex;align-items:center;align-self:stretch;background-color:var(--calcite-ui-foreground-1);padding-block:0px;border-start-start-radius:var(--calcite-border-radius);border-end-start-radius:var(--calcite-border-radius)}/*!@.alert-close*/.alert-close.sc-calcite-alert{transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;padding-block:var(--calcite-alert-spacing-token-small);padding-inline:var(--calcite-alert-spacing-token-large);flex:0 0 auto;cursor:pointer;align-self:stretch;overflow:hidden;border-style:none;background-color:var(--calcite-ui-foreground-1);padding-block:0px;color:var(--calcite-ui-text-3);outline:2px solid transparent;outline-offset:2px;border-end-end-radius:var(--calcite-border-radius);border-start-end-radius:var(--calcite-border-radius)}/*!@.alert-close:hover, .alert-close:focus*/.alert-close.sc-calcite-alert:hover,.alert-close.sc-calcite-alert:focus{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-text-1)}/*!@.alert-close:open*/.alert-close.sc-calcite-alert:open{background-color:var(--calcite-ui-foreground-3)}/*!@.alert-queue-count*/.alert-queue-count.sc-calcite-alert{visibility:hidden;display:flex;cursor:default;align-items:center;justify-content:space-around;align-self:stretch;overflow:hidden;background-color:var(--calcite-ui-foreground-1);text-align:center;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-2);opacity:0;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;border-inline:0px solid transparent;border-start-end-radius:0}/*!@.alert-queue-count.active*/.alert-queue-count.active.sc-calcite-alert{visibility:visible;opacity:1}/*!@:host([auto-close]) > .alert-queue-count*/[auto-close].sc-calcite-alert-h>.alert-queue-count.sc-calcite-alert{border-inline-end:0px solid transparent}/*!@.alert-dismiss-progress*/.alert-dismiss-progress.sc-calcite-alert{position:absolute;display:block;inline-size:100%;overflow:hidden;inset-inline:0;inset-block-start:-2px;block-size:2px;border-radius:var(--calcite-border-radius) var(--calcite-border-radius) 0 0}/*!@.alert-dismiss-progress:after*/.alert-dismiss-progress.sc-calcite-alert:after{position:absolute;inset-block-start:0px;display:block;block-size:2px;content:\"\";background-color:var(--calcite-alert-dismiss-progress-background);inset-inline-end:0}/*!@.actions-end*/.actions-end.sc-calcite-alert{display:flex;align-self:stretch}/*!@:host([kind=brand]) .container*/[kind=brand].sc-calcite-alert-h .container.sc-calcite-alert{border-block-start-color:var(--calcite-ui-brand)}/*!@:host([kind=brand]) .container .alert-icon*/[kind=brand].sc-calcite-alert-h .container.sc-calcite-alert .alert-icon.sc-calcite-alert{color:var(--calcite-ui-brand)}/*!@:host([kind=info]) .container*/[kind=info].sc-calcite-alert-h .container.sc-calcite-alert{border-block-start-color:var(--calcite-ui-info)}/*!@:host([kind=info]) .container .alert-icon*/[kind=info].sc-calcite-alert-h .container.sc-calcite-alert .alert-icon.sc-calcite-alert{color:var(--calcite-ui-info)}/*!@:host([kind=danger]) .container*/[kind=danger].sc-calcite-alert-h .container.sc-calcite-alert{border-block-start-color:var(--calcite-ui-danger)}/*!@:host([kind=danger]) .container .alert-icon*/[kind=danger].sc-calcite-alert-h .container.sc-calcite-alert .alert-icon.sc-calcite-alert{color:var(--calcite-ui-danger)}/*!@:host([kind=success]) .container*/[kind=success].sc-calcite-alert-h .container.sc-calcite-alert{border-block-start-color:var(--calcite-ui-success)}/*!@:host([kind=success]) .container .alert-icon*/[kind=success].sc-calcite-alert-h .container.sc-calcite-alert .alert-icon.sc-calcite-alert{color:var(--calcite-ui-success)}/*!@:host([kind=warning]) .container*/[kind=warning].sc-calcite-alert-h .container.sc-calcite-alert{border-block-start-color:var(--calcite-ui-warning)}/*!@:host([kind=warning]) .container .alert-icon*/[kind=warning].sc-calcite-alert-h .container.sc-calcite-alert .alert-icon.sc-calcite-alert{color:var(--calcite-ui-warning)}/*!@:host([auto-close-duration=fast]) .alert-dismiss-progress:after*/[auto-close-duration=fast].sc-calcite-alert-h .alert-dismiss-progress.sc-calcite-alert:after{animation:dismissProgress 6000ms ease-out}/*!@:host(:hover[auto-close-duration=fast]) .alert-dismiss-progress:after*/.sc-calcite-alert-h:hover[auto-close-duration=fast] .alert-dismiss-progress.sc-calcite-alert:after{animation-play-state:paused}/*!@:host([auto-close-duration=medium]) .alert-dismiss-progress:after*/[auto-close-duration=medium].sc-calcite-alert-h .alert-dismiss-progress.sc-calcite-alert:after{animation:dismissProgress 10000ms ease-out}/*!@:host(:hover[auto-close-duration=medium]) .alert-dismiss-progress:after*/.sc-calcite-alert-h:hover[auto-close-duration=medium] .alert-dismiss-progress.sc-calcite-alert:after{animation-play-state:paused}/*!@:host([auto-close-duration=slow]) .alert-dismiss-progress:after*/[auto-close-duration=slow].sc-calcite-alert-h .alert-dismiss-progress.sc-calcite-alert:after{animation:dismissProgress 14000ms ease-out}/*!@:host(:hover[auto-close-duration=slow]) .alert-dismiss-progress:after*/.sc-calcite-alert-h:hover[auto-close-duration=slow] .alert-dismiss-progress.sc-calcite-alert:after{animation-play-state:paused}@keyframes dismissProgress{0%{inline-size:0px;opacity:0.75}100%{inline-size:100%;opacity:1}}/*!@.container.slotted-in-shell*/.container.slotted-in-shell.sc-calcite-alert{position:absolute}/*!@:host([hidden])*/[hidden].sc-calcite-alert-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-alert{display:none}";
+let getBreakpointsPromise;
+function breakpointTokenToNumericalValue(style, tokenName) {
+  return parseInt(style.getPropertyValue(tokenName));
+}
+/**
+ * This util will return a breakpoints lookup object.
+ *
+ * Note that the breakpoints will be evaluated at the root and cached for reuse.
+ *
+ * @returns {Promise<Breakpoints>} The Breakpoints object.
+ */
+async function getBreakpoints() {
+  if (getBreakpointsPromise) {
+    return getBreakpointsPromise;
+  }
+  getBreakpointsPromise = new Promise((resolve) => {
+    requestAnimationFrame(() => {
+      const rootStyles = getComputedStyle(document.body);
+      resolve({
+        width: {
+          large: breakpointTokenToNumericalValue(rootStyles, "--calcite-app-breakpoint-width-lg"),
+          medium: breakpointTokenToNumericalValue(rootStyles, "--calcite-app-breakpoint-width-md"),
+          small: breakpointTokenToNumericalValue(rootStyles, "--calcite-app-breakpoint-width-sm"),
+          xsmall: breakpointTokenToNumericalValue(rootStyles, "--calcite-app-breakpoint-width-xs"),
+        },
+      });
+    });
+  });
+  return getBreakpointsPromise;
+}
+
+const alertCss = "/*!@:host*/.sc-calcite-alert-h {\n  --calcite-alert-edge-distance: 2rem;\n  display: block;\n}\n\n/*!@.container*/.container.sc-calcite-alert {\n  pointer-events: none;\n  position: fixed;\n  z-index: var(--calcite-app-z-index-toast);\n  margin-inline: auto;\n  margin-block: 0px;\n  box-sizing: border-box;\n  display: flex;\n  inline-size: 100%;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--calcite-ui-foreground-1);\n  text-align: start;\n  opacity: 0;\n  --tw-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.1), 0 4px 12px -2px rgba(0, 0, 0, 0.08);\n  --tw-shadow-colored: 0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n  container: responsive-container/inline-size;\n  border-radius: var(--calcite-border-radius);\n  border-block-start: 0 solid transparent;\n  border-inline: 1px solid var(--calcite-ui-border-3);\n  border-block-end: 1px solid var(--calcite-ui-border-3);\n  inline-size: var(--calcite-alert-width);\n  max-inline-size: calc(100% - var(--calcite-alert-edge-distance) * 2);\n  transition: var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out;\n}\n/*!@.container--bottom, .container--top*/.container--bottom.sc-calcite-alert, .container--top.sc-calcite-alert {\n  inset-inline-end: 0;\n  inset-inline-start: 0;\n}\n/*!@.container[class*=bottom]*/.container[class*=bottom].sc-calcite-alert {\n  transform: translate3d(0, var(--calcite-alert-edge-distance), 0);\n  inset-block-end: var(--calcite-alert-edge-distance);\n}\n/*!@.container[class*=top]*/.container[class*=top].sc-calcite-alert {\n  transform: translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), 0);\n  inset-block-start: var(--calcite-alert-edge-distance);\n}\n/*!@.container[class*=start]*/.container[class*=start].sc-calcite-alert {\n  inset-inline-start: var(--calcite-alert-edge-distance);\n  inset-inline-end: auto;\n}\n/*!@.container[class*=end]*/.container[class*=end].sc-calcite-alert {\n  inset-inline-end: var(--calcite-alert-edge-distance);\n  inset-inline-start: auto;\n}\n\n/*!@.content*/.content.sc-calcite-alert {\n  box-sizing: border-box;\n  display: flex;\n  flex: 1 1 auto;\n  flex-direction: column;\n  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;\n  padding-block: var(--calcite-alert-spacing-token-small);\n  padding-inline: var(--calcite-alert-spacing-token-large) var(--calcite-alert-spacing-token-small);\n}\n\n/*!@.icon*/.icon.sc-calcite-alert {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: flex-start;\n  padding: 0px;\n  margin-block-end: var(--calcite-alert-spacing-token-large);\n  margin-inline-end: auto;\n}\n\n/*!@.close*/.close.sc-calcite-alert {\n  display: flex;\n  cursor: pointer;\n  align-items: flex-start;\n  justify-content: flex-end;\n  align-self: flex-start;\n  border-style: none;\n  background-color: transparent;\n  color: var(--calcite-ui-text-3);\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n  -webkit-appearance: none;\n  padding: var(--calcite-alert-spacing-token-large);\n  outline-color: transparent;\n}\n/*!@.close:focus*/.close.sc-calcite-alert:focus {\n  outline: 2px solid var(--calcite-ui-focus-color, var(--calcite-ui-brand));\n  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          );\n}\n/*!@.close:hover, .close:focus*/.close.sc-calcite-alert:hover, .close.sc-calcite-alert:focus {\n  background-color: var(--calcite-ui-foreground-2);\n  color: var(--calcite-ui-text-1);\n}\n/*!@.close:active*/.close.sc-calcite-alert:active {\n  background-color: var(--calcite-ui-foreground-3);\n}\n\n/*!@.queue-count*/.queue-count.sc-calcite-alert {\n  visibility: hidden;\n  display: flex;\n  cursor: default;\n  align-items: center;\n  justify-content: space-around;\n  align-self: stretch;\n  overflow: hidden;\n  background-color: var(--calcite-ui-foreground-1);\n  text-align: center;\n  font-weight: var(--calcite-font-weight-medium);\n  color: var(--calcite-ui-text-2);\n  opacity: 0;\n  transition: all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;\n  border-inline: 0 solid transparent;\n  border-start-end-radius: 0;\n}\n/*!@.queue-count--active*/.queue-count--active.sc-calcite-alert {\n  visibility: visible;\n  opacity: 1;\n}\n\n/*!@.dismiss-progress*/.dismiss-progress.sc-calcite-alert {\n  position: absolute;\n  display: block;\n  inline-size: 100%;\n  overflow: hidden;\n  inset-inline: 0;\n  inset-block-start: -2px;\n  block-size: 2px;\n  border-radius: var(--calcite-border-radius) var(--calcite-border-radius) 0 0;\n}\n/*!@.dismiss-progress:after*/.dismiss-progress.sc-calcite-alert:after {\n  position: absolute;\n  inset-block-start: 0px;\n  display: block;\n  block-size: 2px;\n  content: \"\";\n  background-color: var(--calcite-alert-dismiss-progress-background);\n  inset-inline-end: 0;\n}\n\n/*!@.actions-end*/.actions-end.sc-calcite-alert {\n  display: flex;\n  align-self: stretch;\n}\n\n/*!@.text-container*/.text-container.sc-calcite-alert {\n  display: flex;\n  min-inline-size: 0px;\n  flex: 1 1 0%;\n  flex-direction: column;\n  overflow-wrap: break-word;\n}\n\n/*!@.content-container*/.content-container.sc-calcite-alert {\n  display: flex;\n  flex: 1 1 0%;\n}\n\n/*!@.footer*/.footer.sc-calcite-alert {\n  position: relative;\n  order: 1;\n  display: flex;\n  inline-size: 100%;\n  justify-content: flex-end;\n  padding-block-start: 1px;\n  block-size: var(--calcite-alert-footer-height);\n}\n/*!@.footer:before*/.footer.sc-calcite-alert:before {\n  content: \"\";\n  position: absolute;\n  inset-block-start: 0px;\n  inset-inline: var(--calcite-alert-footer-divider-gap);\n  border-block-start: 1px solid var(--calcite-ui-border-3);\n}\n\n/*!@:host([scale=s])*/[scale=s].sc-calcite-alert-h {\n  --calcite-alert-width: 40em;\n  --calcite-alert-spacing-token-small: 0.5rem;\n  --calcite-alert-spacing-token-large: 0.75rem;\n  --calcite-alert-footer-height: 2rem;\n  --calcite-alert-footer-divider-gap: 0.125rem;\n}\n/*!@:host([scale=s]) slot[name=title]::slotted(*),\n:host([scale=s]) *::slotted([slot=title])*/.sc-calcite-alert-h[scale=s] slot[name=title].sc-calcite-alert-s > *, .sc-calcite-alert-h[scale=s] *.sc-calcite-alert-s > [slot=title] {\n  font-size: var(--calcite-font-size--1);\n  line-height: 1.375;\n}\n/*!@:host([scale=s]) slot[name=message]::slotted(*),\n:host([scale=s]) *::slotted([slot=message])*/.sc-calcite-alert-h[scale=s] slot[name=message].sc-calcite-alert-s > *, .sc-calcite-alert-h[scale=s] *.sc-calcite-alert-s > [slot=message] {\n  font-size: var(--calcite-font-size--2);\n  line-height: 1.375;\n}\n/*!@:host([scale=s]) slot[name=link]::slotted(*),\n:host([scale=s]) *::slotted([slot=link])*/.sc-calcite-alert-h[scale=s] slot[name=link].sc-calcite-alert-s > *, .sc-calcite-alert-h[scale=s] *.sc-calcite-alert-s > [slot=link] {\n  font-size: var(--calcite-font-size--2);\n  line-height: 1.375;\n}\n/*!@:host([scale=s]) .queue-count*/[scale=s].sc-calcite-alert-h .queue-count.sc-calcite-alert {\n  margin-inline: 0.5rem;\n}\n/*!@:host([scale=s]) .container*/[scale=s].sc-calcite-alert-h .container.sc-calcite-alert {\n  --calcite-alert-min-height: 3.5rem;\n}\n\n/*!@:host([scale=m])*/[scale=m].sc-calcite-alert-h {\n  --calcite-alert-width: 50em;\n  --calcite-alert-spacing-token-small: 0.75rem;\n  --calcite-alert-spacing-token-large: 1rem;\n  --calcite-alert-footer-height: 3rem;\n  --calcite-alert-footer-divider-gap: 0.25rem;\n}\n/*!@:host([scale=m]) slot[name=title]::slotted(*),\n:host([scale=m]) *::slotted([slot=title])*/.sc-calcite-alert-h[scale=m] slot[name=title].sc-calcite-alert-s > *, .sc-calcite-alert-h[scale=m] *.sc-calcite-alert-s > [slot=title] {\n  font-size: var(--calcite-font-size-0);\n  line-height: 1.375;\n}\n/*!@:host([scale=m]) slot[name=message]::slotted(*),\n:host([scale=m]) *::slotted([slot=message])*/.sc-calcite-alert-h[scale=m] slot[name=message].sc-calcite-alert-s > *, .sc-calcite-alert-h[scale=m] *.sc-calcite-alert-s > [slot=message] {\n  font-size: var(--calcite-font-size--1);\n  line-height: 1.375;\n}\n/*!@:host([scale=m]) slot[name=link]::slotted(*),\n:host([scale=m]) *::slotted([slot=link])*/.sc-calcite-alert-h[scale=m] slot[name=link].sc-calcite-alert-s > *, .sc-calcite-alert-h[scale=m] *.sc-calcite-alert-s > [slot=link] {\n  font-size: var(--calcite-font-size--1);\n  line-height: 1.375;\n}\n/*!@:host([scale=m]) .queue-count*/[scale=m].sc-calcite-alert-h .queue-count.sc-calcite-alert {\n  margin-inline: 0.75rem;\n}\n/*!@:host([scale=m]) .container*/[scale=m].sc-calcite-alert-h .container.sc-calcite-alert {\n  --calcite-alert-min-height: 4.1875rem;\n}\n\n/*!@:host([scale=l])*/[scale=l].sc-calcite-alert-h {\n  --calcite-alert-width: 60em;\n  --calcite-alert-spacing-token-small: 1rem;\n  --calcite-alert-spacing-token-large: 1.25rem;\n  --calcite-alert-footer-height: 4rem;\n  --calcite-alert-footer-divider-gap: 0.5rem;\n}\n/*!@:host([scale=l]) slot[name=title]::slotted(*),\n:host([scale=l]) *::slotted([slot=title])*/.sc-calcite-alert-h[scale=l] slot[name=title].sc-calcite-alert-s > *, .sc-calcite-alert-h[scale=l] *.sc-calcite-alert-s > [slot=title] {\n  margin-block-end: 0.25rem;\n  font-size: var(--calcite-font-size-1);\n  line-height: 1.375;\n}\n/*!@:host([scale=l]) slot[name=message]::slotted(*),\n:host([scale=l]) *::slotted([slot=message])*/.sc-calcite-alert-h[scale=l] slot[name=message].sc-calcite-alert-s > *, .sc-calcite-alert-h[scale=l] *.sc-calcite-alert-s > [slot=message] {\n  font-size: var(--calcite-font-size-0);\n  line-height: 1.375;\n}\n/*!@:host([scale=l]) slot[name=link]::slotted(*),\n:host([scale=l]) *::slotted([slot=link])*/.sc-calcite-alert-h[scale=l] slot[name=link].sc-calcite-alert-s > *, .sc-calcite-alert-h[scale=l] *.sc-calcite-alert-s > [slot=link] {\n  font-size: var(--calcite-font-size-0);\n  line-height: 1.375;\n}\n/*!@:host([scale=l]) .queue-count*/[scale=l].sc-calcite-alert-h .queue-count.sc-calcite-alert {\n  margin-inline: 1rem;\n}\n/*!@:host([scale=l]) .container*/[scale=l].sc-calcite-alert-h .container.sc-calcite-alert {\n  --calcite-alert-min-height: 5.625rem;\n}\n\n/*!@:host([open]) .container:not(.container--queued)*/[open].sc-calcite-alert-h .container.sc-calcite-alert:not(.container--queued) {\n  border-block-start-width: 2px;\n  opacity: 1;\n  pointer-events: initial;\n}\n/*!@:host([open]) .container:not(.container--queued)[class*=bottom]*/[open].sc-calcite-alert-h .container.sc-calcite-alert:not(.container--queued)[class*=bottom] {\n  transform: translate3d(0, calc(-1 * var(--calcite-alert-edge-distance)), inherit);\n}\n/*!@:host([open]) .container:not(.container--queued)[class*=top]*/[open].sc-calcite-alert-h .container.sc-calcite-alert:not(.container--queued)[class*=top] {\n  transform: translate3d(0, var(--calcite-alert-edge-distance), inherit);\n}\n\n/*!@:host([auto-close]) > .queue-count*/[auto-close].sc-calcite-alert-h > .queue-count.sc-calcite-alert {\n  border-inline-end: 0 solid transparent;\n}\n\n/*!@slot[name=title]::slotted(*),\n*::slotted([slot=title])*/slot[name=title].sc-calcite-alert-s > *, *.sc-calcite-alert-s > [slot=title] {\n  font-size: var(--calcite-font-size-0);\n  line-height: 1.375;\n  font-weight: var(--calcite-font-weight-medium);\n  color: var(--calcite-ui-text-1);\n}\n\n/*!@slot[name=message]::slotted(*),\n*::slotted([slot=message])*/slot[name=message].sc-calcite-alert-s > *, *.sc-calcite-alert-s > [slot=message] {\n  margin: 0px;\n  display: inline;\n  font-size: var(--calcite-font-size--1);\n  line-height: 1.375;\n  font-weight: var(--calcite-font-weight-normal);\n  color: var(--calcite-ui-text-2);\n  margin-inline-end: 0.5rem;\n}\n\n/*!@slot[name=link]::slotted(*),\n*::slotted([slot=link])*/slot[name=link].sc-calcite-alert-s > *, *.sc-calcite-alert-s > [slot=link] {\n  display: inline-flex;\n  color: var(--calcite-ui-text-link);\n}\n\n/*!@:host([kind=brand]) .container*/[kind=brand].sc-calcite-alert-h .container.sc-calcite-alert {\n  border-block-start-color: var(--calcite-ui-brand);\n}\n/*!@:host([kind=brand]) .container .icon*/[kind=brand].sc-calcite-alert-h .container.sc-calcite-alert .icon.sc-calcite-alert {\n  color: var(--calcite-ui-brand);\n}\n\n/*!@:host([kind=info]) .container*/[kind=info].sc-calcite-alert-h .container.sc-calcite-alert {\n  border-block-start-color: var(--calcite-ui-info);\n}\n/*!@:host([kind=info]) .container .icon*/[kind=info].sc-calcite-alert-h .container.sc-calcite-alert .icon.sc-calcite-alert {\n  color: var(--calcite-ui-info);\n}\n\n/*!@:host([kind=danger]) .container*/[kind=danger].sc-calcite-alert-h .container.sc-calcite-alert {\n  border-block-start-color: var(--calcite-ui-danger);\n}\n/*!@:host([kind=danger]) .container .icon*/[kind=danger].sc-calcite-alert-h .container.sc-calcite-alert .icon.sc-calcite-alert {\n  color: var(--calcite-ui-danger);\n}\n\n/*!@:host([kind=success]) .container*/[kind=success].sc-calcite-alert-h .container.sc-calcite-alert {\n  border-block-start-color: var(--calcite-ui-success);\n}\n/*!@:host([kind=success]) .container .icon*/[kind=success].sc-calcite-alert-h .container.sc-calcite-alert .icon.sc-calcite-alert {\n  color: var(--calcite-ui-success);\n}\n\n/*!@:host([kind=warning]) .container*/[kind=warning].sc-calcite-alert-h .container.sc-calcite-alert {\n  border-block-start-color: var(--calcite-ui-warning);\n}\n/*!@:host([kind=warning]) .container .icon*/[kind=warning].sc-calcite-alert-h .container.sc-calcite-alert .icon.sc-calcite-alert {\n  color: var(--calcite-ui-warning);\n}\n\n/*!@:host([auto-close-duration=fast]) .dismiss-progress:after*/[auto-close-duration=fast].sc-calcite-alert-h .dismiss-progress.sc-calcite-alert:after {\n  animation: dismissProgress 6000ms ease-out;\n}\n\n/*!@:host(:hover[auto-close-duration=fast]) .dismiss-progress:after*/.sc-calcite-alert-h:hover[auto-close-duration=fast] .dismiss-progress.sc-calcite-alert:after {\n  animation-play-state: paused;\n}\n\n/*!@:host([auto-close-duration=medium]) .dismiss-progress:after*/[auto-close-duration=medium].sc-calcite-alert-h .dismiss-progress.sc-calcite-alert:after {\n  animation: dismissProgress 10000ms ease-out;\n}\n\n/*!@:host(:hover[auto-close-duration=medium]) .dismiss-progress:after*/.sc-calcite-alert-h:hover[auto-close-duration=medium] .dismiss-progress.sc-calcite-alert:after {\n  animation-play-state: paused;\n}\n\n/*!@:host([auto-close-duration=slow]) .dismiss-progress:after*/[auto-close-duration=slow].sc-calcite-alert-h .dismiss-progress.sc-calcite-alert:after {\n  animation: dismissProgress 14000ms ease-out;\n}\n\n/*!@:host(:hover[auto-close-duration=slow]) .dismiss-progress:after*/.sc-calcite-alert-h:hover[auto-close-duration=slow] .dismiss-progress.sc-calcite-alert:after {\n  animation-play-state: paused;\n}\n\n@keyframes dismissProgress {\n  0% {\n    inline-size: 0px;\n    opacity: 0.75;\n  }\n  100% {\n    inline-size: 100%;\n    opacity: 1;\n  }\n}\n\n/*!@.container--slotted-in-shell*/.container--slotted-in-shell.sc-calcite-alert {\n  position: absolute;\n}\n\n@container responsive-container (min-width: 476px) {\n  .content {\n    flex-direction: row;\n  }\n  .close {\n    align-items: center;\n    align-self: stretch;\n  }\n  .icon {\n    justify-content: center;\n    margin-inline-end: 0;\n    margin-block: 0;\n    padding-inline-end: var(--calcite-alert-spacing-token-large);\n  }\n}\n@container responsive-container (min-width: 768px) {\n  .close {\n    align-self: stretch;\n  }\n  .footer {\n    inline-size: auto;\n    align-self: stretch;\n    order: initial;\n    block-size: inherit;\n  }\n  .footer:before {\n    content: none;\n  }\n  .icon {\n    padding-inline: var(--calcite-alert-spacing-token-large) 0;\n  }\n}\n/*!@:host([hidden])*/[hidden].sc-calcite-alert-h {\n  display: none;\n}\n\n/*!@[hidden]*/[hidden].sc-calcite-alert {\n  display: none;\n}\n\n/*!@:host([calcite-hydrated-hidden])*/[calcite-hydrated-hidden].sc-calcite-alert-h {\n  visibility: hidden !important;\n  pointer-events: none;\n}";
 
 /**
  * Alerts are meant to provide a way to communicate urgent or important information to users, frequently as a result of an action they took in your app. Alerts are positioned
@@ -10509,6 +10560,7 @@ class Alert {
     this.calciteInternalAlertSync = createEvent(this, "calciteInternalAlertSync", 6);
     this.calciteInternalAlertRegister = createEvent(this, "calciteInternalAlertRegister", 6);
     this.autoCloseTimeoutId = null;
+    this.resizeObserver = createObserver();
     this.totalOpenTime = 0;
     this.totalHoverTime = 0;
     this.openTransitionProp = "opacity";
@@ -10556,13 +10608,13 @@ class Alert {
     this.messages = undefined;
     this.messageOverrides = undefined;
     this.slottedInShell = undefined;
-    this.effectiveLocale = "";
     this.defaultMessages = undefined;
+    this.effectiveLocale = "";
     this.hasEndActions = false;
     this.queue = [];
     this.queueLength = 0;
     this.queued = false;
-    this.requestedIcon = undefined;
+    this.responsiveContainerWidth = undefined;
   }
   openHandler() {
     onToggleOpenCloseComponent(this);
@@ -10577,9 +10629,6 @@ class Alert {
   onMessagesChange() {
     /* wired up by t9n util */
   }
-  updateRequestedIcon() {
-    this.requestedIcon = setRequestedIcon(KindIcons, this.icon, this.kind);
-  }
   updateDuration() {
     if (this.autoClose && this.autoCloseTimeoutId) {
       window.clearTimeout(this.autoCloseTimeoutId);
@@ -10598,17 +10647,21 @@ class Alert {
     if (open && !this.queued) {
       this.calciteInternalAlertRegister.emit();
     }
+    if (this.transitionEl) {
+      this.resizeObserver?.observe(this.transitionEl);
+    }
   }
   async componentWillLoad() {
     setUpLoadableComponent(this);
-    this.requestedIcon = setRequestedIcon(KindIcons, this.icon, this.kind);
-    await setUpMessages(this);
+    const [, breakpoints] = await Promise.all([setUpMessages(this), getBreakpoints()]);
+    this.breakpoints = breakpoints;
     if (this.open) {
       onToggleOpenCloseComponent(this);
     }
   }
   componentDidLoad() {
     setComponentLoaded(this);
+    this.resizeObserver?.observe(this.transitionEl);
   }
   disconnectedCallback() {
     window.dispatchEvent(new CustomEvent("calciteInternalAlertUnregister", {
@@ -10619,32 +10672,50 @@ class Alert {
     disconnectLocalized(this);
     disconnectMessages(this);
     this.slottedInShell = false;
+    this.resizeObserver?.disconnect();
   }
   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 -- 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,
       numberingSystem: this.numberingSystem,
       signDisplay: "always",
     };
-    const queueNumber = this.queueLength > 2 ? this.queueLength - 1 : 1;
-    const queueText = numberStringFormatter.numberFormatter.format(queueNumber);
-    const queueCount = (hAsync("div", { class: `${this.queueLength > 1 ? "active " : ""}alert-queue-count` }, hAsync("calcite-chip", { scale: this.scale, value: queueText }, queueText)));
-    const { open, autoClose, label, placement, queued, requestedIcon, iconFlipRtl } = this;
+    const { hasEndActions } = this;
+    const { open, autoClose, responsiveContainerWidth, label, placement, queued } = this;
     const role = autoClose ? "alert" : "alertdialog";
+    const widthBreakpoints = this.breakpoints.width;
+    const lessThanSmall = responsiveContainerWidth < widthBreakpoints.small;
+    const greaterOrEqualThanSmall = responsiveContainerWidth >= widthBreakpoints.small;
     const hidden = !open;
-    const slotNode = (hAsync("slot", { key: "actionsEndSlot", name: SLOTS$t.actionsEnd, onSlotchange: this.actionsEndSlotChangeHandler }));
+    const effectiveIcon = setRequestedIcon(KindIcons, this.icon, this.kind);
+    const hasQueuedAlerts = this.queueLength > 1;
     return (hAsync(Host, { "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "calcite-hydrated-hidden": hidden, role: role }, hAsync("div", { class: {
-        container: true,
-        queued,
-        [placement]: true,
-        [CSS$17.slottedInShell]: this.slottedInShell,
+        [CSS$17.container]: true,
+        [CSS$17.containerQueued]: queued,
+        [`${CSS$17.container}--${placement}`]: true,
+        [CSS$17.containerSlottedInShell]: 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 -- 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$t.title }), hAsync("slot", { name: SLOTS$t.message }), hAsync("slot", { name: SLOTS$t.link })), hAsync("div", { class: CSS$17.actionsEnd, hidden: !hasEndActions }, slotNode), this.queueLength > 1 ? queueCount : null, closeButton, open && !queued && autoClose ? hAsync("div", { class: "alert-dismiss-progress" }) : null)));
+      ref: this.setTransitionEl }, hAsync("div", { class: CSS$17.contentContainer }, effectiveIcon && greaterOrEqualThanSmall ? this.renderIcon(effectiveIcon) : null, hAsync("div", { class: CSS$17.content }, effectiveIcon && lessThanSmall ? this.renderIcon(effectiveIcon) : null, hAsync("div", { class: CSS$17.textContainer }, hAsync("slot", { name: SLOTS$t.title }), hAsync("slot", { name: SLOTS$t.message }), hAsync("slot", { name: SLOTS$t.link })))), lessThanSmall ? this.renderCloseButton() : null, hAsync("div", { class: CSS$17.footer, hidden: !hasEndActions && !hasQueuedAlerts }, this.renderActionsEnd(), hasQueuedAlerts ? this.renderQueueCount() : null), greaterOrEqualThanSmall ? this.renderCloseButton() : null, open && !queued && autoClose ? hAsync("div", { class: CSS$17.dismissProgress }) : null)));
+  }
+  renderCloseButton() {
+    return (hAsync("button", { "aria-label": this.messages.close, class: CSS$17.close, key: "close", onClick: this.closeAlert, type: "button",
+      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
+      ref: (el) => (this.closeButton = el) }, hAsync("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
+  }
+  renderQueueCount() {
+    const queueNumber = this.queueLength > 2 ? this.queueLength - 1 : 1;
+    const queueText = numberStringFormatter.numberFormatter.format(queueNumber);
+    return (hAsync("div", { class: {
+        [CSS$17.queueCount]: true,
+        [CSS$17.queueCountActive]: this.queueLength > 1,
+      }, key: "queue-count" }, hAsync("calcite-chip", { scale: this.scale, value: queueText }, queueText)));
+  }
+  renderActionsEnd() {
+    return (hAsync("div", { class: CSS$17.actionsEnd }, hAsync("slot", { name: SLOTS$t.actionsEnd, onSlotchange: this.actionsEndSlotChangeHandler })));
+  }
+  renderIcon(icon) {
+    return (hAsync("div", { class: CSS$17.icon }, hAsync("calcite-icon", { flipRtl: this.iconFlipRtl, icon: icon, scale: this.scale === "l" ? "m" : "s" })));
   }
   // when an alert is opened or closed, update queue and determine active alert
   alertSync(event) {
@@ -10729,8 +10800,6 @@ class Alert {
   static get watchers() { return {
     "open": ["openHandler"],
     "messageOverrides": ["onMessagesChange"],
-    "icon": ["updateRequestedIcon"],
-    "kind": ["updateRequestedIcon"],
     "autoCloseDuration": ["updateDuration"],
     "effectiveLocale": ["effectiveLocaleChange"]
   }; }
@@ -10752,13 +10821,13 @@ class Alert {
       "messages": [1040],
       "messageOverrides": [1040],
       "slottedInShell": [1028, "slotted-in-shell"],
-      "effectiveLocale": [32],
       "defaultMessages": [32],
+      "effectiveLocale": [32],
       "hasEndActions": [32],
       "queue": [32],
       "queueLength": [32],
       "queued": [32],
-      "requestedIcon": [32],
+      "responsiveContainerWidth": [32],
       "setFocus": [64]
     },
     "$listeners$": [[8, "calciteInternalAlertSync", "alertSync"], [8, "calciteInternalAlertRegister", "alertRegister"], [8, "calciteInternalAlertUnregister", "alertUnregister"]],
@@ -11902,6 +11971,67 @@ const CSS$14 = {
   buttonPaddingShrunk: "button-padding--shrunk",
 };
 
+const allowedGlobalAttributes = ["lang", "role", "aria-expanded"];
+const elementToComponentAndObserverOptionsMap = new Map();
+let mutationObserver;
+function updateGlobalAttributes(component, attributeFilter, reuseAttributes = false) {
+  const { el } = component;
+  const updatedAttributes = reuseAttributes ? component.globalAttributes : {};
+  attributeFilter
+    .filter((attr) => !!allowedGlobalAttributes.includes(attr) && !!el.hasAttribute(attr))
+    .forEach((attr) => {
+    const value = el.getAttribute(attr);
+    if (value !== null) {
+      updatedAttributes[attr] = value;
+    }
+  });
+  component.globalAttributes = updatedAttributes;
+}
+function processMutations(mutations) {
+  mutations.forEach(({ target }) => {
+    const [component, options] = elementToComponentAndObserverOptionsMap.get(target);
+    updateGlobalAttributes(component, options.attributeFilter);
+  });
+}
+/**
+ * Helper to set up listening for changes to global attributes.
+ *
+ * render(): VNode {
+ * return (<Host>
+ * <ul {...this.globalAttributes}></div>
+ * </Host>);
+ * }
+ *
+ * @param component
+ * @param attributeFilter
+ */
+function watchGlobalAttributes(component, attributeFilter) {
+  const { el } = component;
+  const observerOptions = { attributeFilter };
+  elementToComponentAndObserverOptionsMap.set(el, [component, observerOptions]);
+  updateGlobalAttributes(component, attributeFilter, true);
+  if (!mutationObserver) {
+    mutationObserver = createObserver();
+  }
+  mutationObserver.observe(el, observerOptions);
+}
+/**
+ * Helper remove listening for changes to inherited attributes.
+ *
+ * @param component
+ */
+function unwatchGlobalAttributes(component) {
+  elementToComponentAndObserverOptionsMap.delete(component.el);
+  // we explicitly process queued mutations and disconnect and reconnect
+  // the observer until MutationObserver gets an `unobserve` method
+  // see https://github.com/whatwg/dom/issues/126
+  processMutations(mutationObserver.takeRecords());
+  mutationObserver.disconnect();
+  for (const [element, [, observerOptions]] of elementToComponentAndObserverOptionsMap.entries()) {
+    mutationObserver.observe(element, observerOptions);
+  }
+}
+
 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. */
@@ -11965,6 +12095,9 @@ class Button {
     this.effectiveLocale = "";
     this.defaultMessages = undefined;
     this.tooltipText = undefined;
+    this.globalAttributes = {
+      ariaExpanded: undefined,
+    };
   }
   loadingChanged(newValue, oldValue) {
     if (!!newValue && !oldValue) {
@@ -11988,6 +12121,7 @@ class Button {
     connectInteractive(this);
     connectLocalized(this);
     connectMessages(this);
+    watchGlobalAttributes(this, ["aria-expanded"]);
     this.hasLoader = this.loading;
     this.setupTextContentObserver();
     connectLabel(this);
@@ -12001,6 +12135,7 @@ class Button {
     disconnectMessages(this);
     this.resizeObserver?.disconnect();
     this.formEl = null;
+    unwatchGlobalAttributes(this);
   }
   async componentWillLoad() {
     setUpLoadableComponent(this);
@@ -12026,7 +12161,7 @@ class Button {
         [CSS$14.contentSlotted]: this.hasContent,
         [CSS$14.iconStartEmpty]: !this.iconStart,
         [CSS$14.iconEndEmpty]: !this.iconEnd,
-      }, disabled: this.disabled || this.loading, href: childElType === "a" && this.href, name: childElType === "button" && this.name, onClick: this.handleClick, ref: this.setChildEl, rel: childElType === "a" && this.rel, tabIndex: this.disabled || this.loading ? -1 : null, target: childElType === "a" && this.target, title: this.tooltipText, type: childElType === "button" && this.type }, loaderNode, this.iconStart ? iconStartEl : null, this.hasContent ? contentEl : null, this.iconEnd ? iconEndEl : null));
+      }, disabled: this.disabled || this.loading, href: childElType === "a" && this.href, name: childElType === "button" && this.name, onClick: this.handleClick, ref: this.setChildEl, rel: childElType === "a" && this.rel, tabIndex: this.disabled || this.loading ? -1 : null, target: childElType === "a" && this.target, title: this.tooltipText, type: childElType === "button" && this.type, ...this.globalAttributes }, loaderNode, this.iconStart ? iconStartEl : null, this.hasContent ? contentEl : null, this.iconEnd ? iconEndEl : null));
   }
   //--------------------------------------------------------------------------
   //
@@ -12098,6 +12233,7 @@ class Button {
       "effectiveLocale": [32],
       "defaultMessages": [32],
       "tooltipText": [32],
+      "globalAttributes": [32],
       "setFocus": [64]
     },
     "$listeners$": undefined,
@@ -12106,67 +12242,6 @@ class Button {
   }; }
 }
 
-const allowedGlobalAttributes = ["lang", "role"];
-const elementToComponentAndObserverOptionsMap = new Map();
-let mutationObserver;
-function updateGlobalAttributes(component, attributeFilter, reuseAttributes = false) {
-  const { el } = component;
-  const updatedAttributes = reuseAttributes ? component.globalAttributes : {};
-  attributeFilter
-    .filter((attr) => !!allowedGlobalAttributes.includes(attr) && !!el.hasAttribute(attr))
-    .forEach((attr) => {
-    const value = el.getAttribute(attr);
-    if (value !== null) {
-      updatedAttributes[attr] = value;
-    }
-  });
-  component.globalAttributes = updatedAttributes;
-}
-function processMutations(mutations) {
-  mutations.forEach(({ target }) => {
-    const [component, options] = elementToComponentAndObserverOptionsMap.get(target);
-    updateGlobalAttributes(component, options.attributeFilter);
-  });
-}
-/**
- * Helper to set up listening for changes to global attributes.
- *
- * render(): VNode {
- * return (<Host>
- * <ul {...this.globalAttributes}></div>
- * </Host>);
- * }
- *
- * @param component
- * @param attributeFilter
- */
-function watchGlobalAttributes(component, attributeFilter) {
-  const { el } = component;
-  const observerOptions = { attributeFilter };
-  elementToComponentAndObserverOptionsMap.set(el, [component, observerOptions]);
-  updateGlobalAttributes(component, attributeFilter, true);
-  if (!mutationObserver) {
-    mutationObserver = createObserver();
-  }
-  mutationObserver.observe(el, observerOptions);
-}
-/**
- * Helper remove listening for changes to inherited attributes.
- *
- * @param component
- */
-function unwatchGlobalAttributes(component) {
-  elementToComponentAndObserverOptionsMap.delete(component.el);
-  // we explicitly process queued mutations and disconnect and reconnect
-  // the observer until MutationObserver gets an `unobserve` method
-  // see https://github.com/whatwg/dom/issues/126
-  processMutations(mutationObserver.takeRecords());
-  mutationObserver.disconnect();
-  for (const [element, [, observerOptions]] of elementToComponentAndObserverOptionsMap.entries()) {
-    mutationObserver.observe(element, observerOptions);
-  }
-}
-
 const menuCss = "/*!@:host*/.sc-calcite-menu-h{display:flex}/*!@ul*/ul.sc-calcite-menu{margin:0px;display:inline-flex;block-size:100%;align-items:center;padding:0px}/*!@:host([layout=vertical]) ul*/[layout=vertical].sc-calcite-menu-h ul.sc-calcite-menu{display:flex;inline-size:100%;flex-direction:column}/*!@:host([hidden])*/[hidden].sc-calcite-menu-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-menu{display:none}";
 
 class CalciteMenu {
@@ -21882,10 +21957,14 @@ class DropdownGroup {
   //--------------------------------------------------------------------------
   connectedCallback() {
     this.updateItems();
+    this.mutationObserver?.observe(this.el, { childList: true });
   }
   componentWillLoad() {
     this.groupPosition = this.getGroupPosition();
   }
+  disconnectedCallback() {
+    this.mutationObserver?.disconnect();
+  }
   render() {
     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;
@@ -22552,6 +22631,8 @@ const ICONS$b = {
   menu: "ellipsis",
   backLeft: "chevron-left",
   backRight: "chevron-right",
+  expand: "chevron-up",
+  collapse: "chevron-down",
 };
 const SLOTS$n = {
   actionBar: "action-bar",
@@ -22582,7 +22663,7 @@ const SLOTS$m = {
   footerActions: "footer-actions",
 };
 
-const flowItemCss = "/*!@:host*/.sc-calcite-flow-item-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-flow-item-h *.sc-calcite-flow-item{box-sizing:border-box}/*!@:host([disabled])*/[disabled].sc-calcite-flow-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-flow-item-h *.sc-calcite-flow-item,.sc-calcite-flow-item-h[disabled] .sc-calcite-flow-item-s>*{pointer-events:none}/*!@:host*/.sc-calcite-flow-item-h{position:relative;display:flex;inline-size:100%;flex:1 1 auto;overflow:hidden;--calcite-flow-item-footer-padding:0.5rem}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-flow-item-h[disabled] .sc-calcite-flow-item-s>[calcite-hydrated][disabled],[disabled].sc-calcite-flow-item-h [calcite-hydrated][disabled].sc-calcite-flow-item{opacity:1}/*!@.back-button*/.back-button.sc-calcite-flow-item{border-width:0px;border-style:solid;border-color:var(--calcite-ui-border-3);border-inline-end-width:1px}/*!@calcite-panel*/calcite-panel.sc-calcite-flow-item{--calcite-panel-footer-padding:var(--calcite-flow-item-footer-padding)}/*!@:host([hidden])*/[hidden].sc-calcite-flow-item-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-flow-item{display:none}";
+const flowItemCss = "/*!@:host*/.sc-calcite-flow-item-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-flow-item-h *.sc-calcite-flow-item{box-sizing:border-box}/*!@:host([disabled])*/[disabled].sc-calcite-flow-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-flow-item-h *.sc-calcite-flow-item,.sc-calcite-flow-item-h[disabled] .sc-calcite-flow-item-s>*{pointer-events:none}/*!@:host*/.sc-calcite-flow-item-h{position:relative;display:flex;inline-size:100%;flex:1 1 auto;overflow:hidden}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-flow-item-h[disabled] .sc-calcite-flow-item-s>[calcite-hydrated][disabled],[disabled].sc-calcite-flow-item-h [calcite-hydrated][disabled].sc-calcite-flow-item{opacity:1}/*!@.back-button*/.back-button.sc-calcite-flow-item{border-width:0px;border-style:solid;border-color:var(--calcite-ui-border-3);border-inline-end-width:1px}/*!@calcite-panel*/calcite-panel.sc-calcite-flow-item{--calcite-panel-footer-padding:var(--calcite-flow-item-footer-padding);--calcite-panel-header-border-block-end:var(--calcite-flow-item-header-border-block-end)}/*!@:host([hidden])*/[hidden].sc-calcite-flow-item-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-flow-item{display:none}";
 
 /**
  * @slot - A slot for adding custom content.
@@ -22601,6 +22682,7 @@ class FlowItem {
     this.calciteFlowItemBack = createEvent(this, "calciteFlowItemBack", 7);
     this.calciteFlowItemScroll = createEvent(this, "calciteFlowItemScroll", 6);
     this.calciteFlowItemClose = createEvent(this, "calciteFlowItemClose", 6);
+    this.calciteFlowItemToggle = createEvent(this, "calciteFlowItemToggle", 6);
     // --------------------------------------------------------------------------
     //
     //  Private Methods
@@ -22614,6 +22696,10 @@ class FlowItem {
       event.stopPropagation();
       this.calciteFlowItemClose.emit();
     };
+    this.handlePanelToggle = (event) => {
+      event.stopPropagation();
+      this.calciteFlowItemToggle.emit();
+    };
     this.backButtonClick = () => {
       this.calciteFlowItemBack.emit();
     };
@@ -22625,6 +22711,9 @@ class FlowItem {
     };
     this.closable = false;
     this.closed = false;
+    this.collapsed = false;
+    this.collapseDirection = "down";
+    this.collapsible = false;
     this.beforeBack = undefined;
     this.description = undefined;
     this.disabled = false;
@@ -22676,6 +22765,8 @@ class FlowItem {
   // --------------------------------------------------------------------------
   /**
    * Sets focus on the component.
+   *
+   * @returns promise.
    */
   async setFocus() {
     await componentFocusable(this);
@@ -22696,7 +22787,8 @@ class FlowItem {
    *   top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element
    *   behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).
    * });
-   * @param options
+   * @param options - allows specific coordinates to be defined.
+   * @returns - promise that resolves once the content is scrolled to.
    */
   async scrollContentTo(options) {
     await this.containerEl?.scrollContentTo(options);
@@ -22717,8 +22809,8 @@ class FlowItem {
       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,
+    const { collapsed, collapseDirection, collapsible, closable, closed, description, disabled, heading, headingLevel, loading, menuOpen, messages, } = this;
+    return (hAsync(Host, null, hAsync("calcite-panel", { closable: closable, closed: closed, collapseDirection: collapseDirection, collapsed: collapsed, collapsible: collapsible, description: description, disabled: disabled, heading: heading, headingLevel: headingLevel, loading: loading, menuOpen: menuOpen, messageOverrides: messages, onCalcitePanelClose: this.handlePanelClose, onCalcitePanelScroll: this.handlePanelScroll, onCalcitePanelToggle: this.handlePanelToggle,
       // 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$m.actionBar, slot: SLOTS$n.actionBar }), hAsync("slot", { name: SLOTS$m.headerActionsStart, slot: SLOTS$n.headerActionsStart }), hAsync("slot", { name: SLOTS$m.headerActionsEnd, slot: SLOTS$n.headerActionsEnd }), hAsync("slot", { name: SLOTS$m.headerContent, slot: SLOTS$n.headerContent }), hAsync("slot", { name: SLOTS$m.headerMenuActions, slot: SLOTS$n.headerMenuActions }), hAsync("slot", { name: SLOTS$m.fab, slot: SLOTS$n.fab }), hAsync("slot", { name: SLOTS$m.footerActions, slot: SLOTS$n.footerActions }), hAsync("slot", { name: SLOTS$m.footer, slot: SLOTS$n.footer }), hAsync("slot", null))));
   }
@@ -22735,6 +22827,9 @@ class FlowItem {
     "$members$": {
       "closable": [516],
       "closed": [516],
+      "collapsed": [516],
+      "collapseDirection": [1, "collapse-direction"],
+      "collapsible": [516],
       "beforeBack": [16],
       "description": [1],
       "disabled": [516],
@@ -22752,7 +22847,7 @@ class FlowItem {
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": [["closable", "closable"], ["closed", "closed"], ["disabled", "disabled"], ["headingLevel", "heading-level"], ["loading", "loading"], ["menuOpen", "menu-open"]]
+    "$attrsToReflect$": [["closable", "closable"], ["closed", "closed"], ["collapsed", "collapsed"], ["collapsible", "collapsible"], ["disabled", "disabled"], ["headingLevel", "heading-level"], ["loading", "loading"], ["menuOpen", "menu-open"]]
   }; }
 }
 
@@ -25435,6 +25530,7 @@ class InputDatePicker {
     this.name = undefined;
     this.numberingSystem = undefined;
     this.scale = "m";
+    this.status = "idle";
     this.placement = defaultMenuPlacement;
     this.range = false;
     this.required = false;
@@ -25632,7 +25728,7 @@ class InputDatePicker {
     };
     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 -- 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",
+      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, status: this.status, type: "text",
       // 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$H.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$H.menu]: true,
@@ -25653,7 +25749,7 @@ class InputDatePicker {
       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",
+      }, 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, status: this.status, type: "text",
       // 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 })));
   }
@@ -25837,6 +25933,7 @@ class InputDatePicker {
       "name": [513],
       "numberingSystem": [513, "numbering-system"],
       "scale": [513],
+      "status": [513],
       "placement": [513],
       "range": [516],
       "required": [516],
@@ -25853,7 +25950,7 @@ class InputDatePicker {
     },
     "$listeners$": [[0, "calciteDaySelect", "calciteDaySelectHandler"]],
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": [["disabled", "disabled"], ["focusTrapDisabled", "focus-trap-disabled"], ["form", "form"], ["readOnly", "read-only"], ["headingLevel", "heading-level"], ["open", "open"], ["name", "name"], ["numberingSystem", "numbering-system"], ["scale", "scale"], ["placement", "placement"], ["range", "range"], ["required", "required"], ["overlayPositioning", "overlay-positioning"], ["layout", "layout"]]
+    "$attrsToReflect$": [["disabled", "disabled"], ["focusTrapDisabled", "focus-trap-disabled"], ["form", "form"], ["readOnly", "read-only"], ["headingLevel", "heading-level"], ["open", "open"], ["name", "name"], ["numberingSystem", "numbering-system"], ["scale", "scale"], ["status", "status"], ["placement", "placement"], ["range", "range"], ["required", "required"], ["overlayPositioning", "overlay-positioning"], ["layout", "layout"]]
   }; }
 }
 
@@ -28603,6 +28700,7 @@ class InputTimePicker {
     this.numberingSystem = undefined;
     this.required = false;
     this.scale = "m";
+    this.status = "idle";
     this.overlayPositioning = "absolute";
     this.placement = "auto";
     this.step = 60;
@@ -28942,7 +29040,7 @@ 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,
+    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, status: this.status, step: this.step,
       // 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.setInputAndTransitionEl }), !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 -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
@@ -28983,6 +29081,7 @@ class InputTimePicker {
       "numberingSystem": [1, "numbering-system"],
       "required": [516],
       "scale": [513],
+      "status": [513],
       "overlayPositioning": [1, "overlay-positioning"],
       "placement": [513],
       "step": [2],
@@ -28994,42 +29093,102 @@ class InputTimePicker {
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": [["open", "open"], ["disabled", "disabled"], ["focusTrapDisabled", "focus-trap-disabled"], ["form", "form"], ["readOnly", "read-only"], ["required", "required"], ["scale", "scale"], ["placement", "placement"]]
+    "$attrsToReflect$": [["open", "open"], ["disabled", "disabled"], ["focusTrapDisabled", "focus-trap-disabled"], ["form", "form"], ["readOnly", "read-only"], ["required", "required"], ["scale", "scale"], ["status", "status"], ["placement", "placement"]]
   }; }
 }
 
 const hourToMinutes = 60;
+function timeZoneOffsetToDecimal(shortOffsetTimeZoneName) {
+  const minusSign = "−";
+  const hyphen = "-";
+  return (shortOffsetTimeZoneName
+    .replace(":15", ".25")
+    .replace(":30", ".5")
+    .replace(":45", ".75")
+    // ensures decimal string representation is parseable
+    .replace(minusSign, hyphen));
+}
+function toOffsetValue(timeZoneName, referenceDateInMs) {
+  // we use "en-US" to allow us to reliably remove the standard time token
+  const offset = getTimeZoneShortOffset(timeZoneName, "en-US", referenceDateInMs).replace("GMT", "");
+  if (offset === "") {
+    return 0;
+  }
+  return Number(timeZoneOffsetToDecimal(offset)) * hourToMinutes;
+}
 function getUserTimeZoneOffset() {
   const localDate = new Date();
   return localDate.getTimezoneOffset() * -1;
 }
-function getFallbackTimeZoneGroups() {
-  const timeZoneOffsets = [
-    -11, -10, -9.5, -9, -8, -7, -6, -5, -4, -3, -2.5, -2, -1, 0, 1, 2, 3, 3.5, 4, 4.5, 5, 6, 6.5, 7, 8, 8.75, 9, 9.5,
-    10, 10.5, 11, 12, 12.75, 13, 14,
-  ];
-  return timeZoneOffsets.map((offset) => {
+function getUserTimeZoneName() {
+  const dateFormatter = new Intl.DateTimeFormat();
+  return dateFormatter.resolvedOptions().timeZone;
+}
+/**
+ * The lazy-loaded timezone-groups lib to be used across instances.
+ */
+let timeZoneGroups;
+async function createTimeZoneItems(locale, messages, mode, referenceDate) {
+  const referenceDateInMs = referenceDate.getTime();
+  const timeZoneNames = Intl.supportedValuesOf("timeZone");
+  if (mode === "offset") {
+    if (!timeZoneGroups) {
+      timeZoneGroups = Promise.all([
+        Promise.resolve().then(function () { return index$1; }),
+        Promise.resolve().then(function () { return index; }),
+      ]);
+    }
+    return timeZoneGroups.then(async ([{ groupTimeZones }, { DateEngine }]) => {
+      const timeZoneGroups = await groupTimeZones({
+        dateEngine: new DateEngine(),
+        groupDateRange: 1,
+        startDate: new Date(referenceDateInMs).toISOString(),
+      });
+      const listFormatter = new Intl.ListFormat(locale, { style: "long", type: "conjunction" });
+      return timeZoneGroups
+        .map(({ labelTzIndices, tzs }) => {
+        const groupRepTz = tzs[0];
+        const decimalOffset = timeZoneOffsetToDecimal(getTimeZoneShortOffset(groupRepTz, locale, referenceDateInMs));
+        const value = toOffsetValue(groupRepTz, referenceDateInMs);
+        const label = createTimeZoneOffsetLabel(messages, decimalOffset, listFormatter.format(labelTzIndices.map((index) => messages[tzs[index]])));
+        return {
+          label,
+          value,
+          filterValue: tzs.map((tz) => toUserFriendlyName(tz)),
+        };
+      })
+        .filter((group) => !!group)
+        .sort((groupA, groupB) => groupA.value - groupB.value);
+    });
+  }
+  return timeZoneNames
+    .map((timeZone) => {
+    const label = toUserFriendlyName(timeZone);
+    const value = timeZone;
     return {
-      offsetValue: offset * hourToMinutes,
-      offsetLabel: toGMTLabel(offset),
+      label,
+      value,
+      filterValue: timeZone,
     };
-  });
+  })
+    .filter((group) => !!group)
+    .sort();
 }
 /**
- * Exported for testing-purposes only
+ * Exported for testing purposes only
  *
  * @internal
  */
-function toGMTLabel(offsetInHours) {
-  return `GMT${offsetInHours === 0 ? "" : offsetInHours.toLocaleString("en", { signDisplay: "always" })}`;
+function toUserFriendlyName(timeZoneName) {
+  return timeZoneName.replace(/_/g, " ");
 }
-let timeZoneGeneration;
-async function generateTimeZoneGroups() {
-  if (timeZoneGeneration) {
-    return timeZoneGeneration;
-  }
-  timeZoneGeneration = Promise.resolve(getFallbackTimeZoneGroups());
-  return timeZoneGeneration;
+function createTimeZoneOffsetLabel(messages, offsetLabel, groupLabel) {
+  return messages.timeZoneLabel.replace("{offset}", offsetLabel).replace("{cities}", groupLabel);
+}
+function getTimeZoneShortOffset(timeZone, locale, referenceDateInMs = Date.now()) {
+  const dateTimeFormat = getDateTimeFormat(locale, { timeZone, timeZoneName: "shortOffset" });
+  const parts = dateTimeFormat.formatToParts(referenceDateInMs);
+  return parts.find(({ type }) => type === "timeZoneName").value;
 }
 
 const inputTimeZoneCss = "/*!@:host([disabled])*/[disabled].sc-calcite-input-time-zone-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-input-time-zone-h *.sc-calcite-input-time-zone,.sc-calcite-input-time-zone-h[disabled] .sc-calcite-input-time-zone-s>*{pointer-events:none}/*!@:host*/.sc-calcite-input-time-zone-h{display:block}/*!@:host([hidden])*/[hidden].sc-calcite-input-time-zone-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-input-time-zone{display:none}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-input-time-zone-h[disabled] .sc-calcite-input-time-zone-s>[calcite-hydrated][disabled],[disabled].sc-calcite-input-time-zone-h [calcite-hydrated][disabled].sc-calcite-input-time-zone{opacity:1}/*!@::slotted(input[slot=hidden-form-input])*/.sc-calcite-input-time-zone-s>input[slot=hidden-form-input]{margin:0 !important;opacity:0 !important;outline:none !important;padding:0 !important;position:absolute !important;inset:0 !important;transform:none !important;-webkit-appearance:none !important;z-index:-1 !important}";
@@ -29056,13 +29215,13 @@ class InputTimeZone {
     this.onComboboxChange = (event) => {
       event.stopPropagation();
       const combobox = event.target;
-      const selected = this.timeZoneGroups.find(({ offsetValue }) => combobox.value === `${offsetValue}`);
-      const selectedValue = `${selected.offsetValue}`;
+      const selected = this.findTimeZoneItem(combobox.selectedItems[0].getAttribute("data-value"));
+      const selectedValue = `${selected.value}`;
       if (this.value === selectedValue) {
         return;
       }
       this.value = selectedValue;
-      this.selectedTimeZoneGroup = selected;
+      this.selectedTimeZoneItem = selected;
       this.calciteInputTimeZoneChange.emit();
     };
     this.onComboboxClose = (event) => {
@@ -29080,9 +29239,11 @@ class InputTimeZone {
     this.maxItems = 0;
     this.messages = undefined;
     this.messageOverrides = undefined;
+    this.mode = "offset";
     this.name = undefined;
     this.open = false;
     this.overlayPositioning = "absolute";
+    this.referenceDate = undefined;
     this.required = false;
     this.scale = "m";
     this.value = undefined;
@@ -29092,6 +29253,17 @@ class InputTimeZone {
   onMessagesChange() {
     /* wired up by t9n util */
   }
+  handleTimeZoneItemPropsChange() {
+    this.createTimeZoneItems();
+  }
+  handleValueChange(value, oldValue) {
+    const timeZoneItem = this.findTimeZoneItem(value);
+    if (!timeZoneItem) {
+      this.value = oldValue;
+      return;
+    }
+    this.selectedTimeZoneItem = timeZoneItem;
+  }
   //--------------------------------------------------------------------------
   //
   //  Public Methods
@@ -29112,6 +29284,20 @@ class InputTimeZone {
   onLabelClick() {
     this.setFocus();
   }
+  findTimeZoneItem(value) {
+    const valueToMatch = value;
+    return this.timeZoneItems.find(({ value }) => 
+    // intentional == to match string to number
+    value == valueToMatch);
+  }
+  async createTimeZoneItems() {
+    if (!this.effectiveLocale || !this.messages) {
+      return [];
+    }
+    return createTimeZoneItems(this.effectiveLocale, this.messages, this.mode, this.referenceDate instanceof Date
+      ? this.referenceDate
+      : new Date(this.referenceDate ?? Date.now()));
+  }
   // --------------------------------------------------------------------------
   //
   //  Lifecycle
@@ -29132,13 +29318,14 @@ class InputTimeZone {
   async componentWillLoad() {
     setUpLoadableComponent(this);
     await setUpMessages(this);
-    const timeZoneGroups = await generateTimeZoneGroups();
-    this.timeZoneGroups = timeZoneGroups;
-    const offsetToMatch = this.value ?? getUserTimeZoneOffset();
-    this.selectedTimeZoneGroup = timeZoneGroups.find(({ offsetValue }) => 
-    // intentional == to match string to number
-    offsetValue == offsetToMatch);
-    const selectedValue = `${this.selectedTimeZoneGroup.offsetValue}`;
+    this.timeZoneItems = await this.createTimeZoneItems();
+    const fallbackValue = this.mode === "offset" ? getUserTimeZoneOffset() : getUserTimeZoneName();
+    const valueToMatch = this.value ?? fallbackValue;
+    this.selectedTimeZoneItem = this.findTimeZoneItem(valueToMatch);
+    if (!this.selectedTimeZoneItem) {
+      this.selectedTimeZoneItem = this.findTimeZoneItem(fallbackValue);
+    }
+    const selectedValue = `${this.selectedTimeZoneItem.value}`;
     afterConnectDefaultValueSet(this, selectedValue);
     this.value = selectedValue;
   }
@@ -29151,11 +29338,10 @@ class InputTimeZone {
   render() {
     return (hAsync(Host, null, hAsync("calcite-combobox", { clearDisabled: true, disabled: this.disabled, label: this.messages.chooseTimeZone, lang: this.effectiveLocale, maxItems: this.maxItems, onCalciteComboboxBeforeClose: this.onComboboxBeforeClose, onCalciteComboboxBeforeOpen: this.onComboboxBeforeOpen, onCalciteComboboxChange: this.onComboboxChange, onCalciteComboboxClose: this.onComboboxClose, onCalciteComboboxOpen: this.onComboboxOpen, open: this.open, overlayPositioning: this.overlayPositioning, scale: this.scale, selectionMode: "single-persist",
       // 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;
-      const value = group.offsetValue;
-      return (hAsync("calcite-combobox-item", { key: label, selected: selected, textLabel: label, value: `${value}` }));
+      ref: this.setComboboxRef }, this.timeZoneItems.map((group) => {
+      const selected = this.selectedTimeZoneItem === group;
+      const { label, value } = group;
+      return (hAsync("calcite-combobox-item", { "data-value": value, key: label, selected: selected, textLabel: label, value: `${group.filterValue}` }));
     })), hAsync(HiddenFormInputSlot, { component: this })));
   }
   static get delegatesFocus() { return true; }
@@ -29163,7 +29349,11 @@ class InputTimeZone {
   get el() { return getElement(this); }
   static get watchers() { return {
     "messageOverrides": ["onMessagesChange"],
-    "effectiveLocale": ["effectiveLocaleWatcher"]
+    "effectiveLocale": ["handleTimeZoneItemPropsChange", "effectiveLocaleWatcher"],
+    "messages": ["handleTimeZoneItemPropsChange"],
+    "mode": ["handleTimeZoneItemPropsChange"],
+    "referenceDate": ["handleTimeZoneItemPropsChange"],
+    "value": ["handleValueChange"]
   }; }
   static get style() { return inputTimeZoneCss; }
   static get cmpMeta() { return {
@@ -29175,9 +29365,11 @@ class InputTimeZone {
       "maxItems": [514, "max-items"],
       "messages": [1040],
       "messageOverrides": [1040],
+      "mode": [513],
       "name": [513],
       "open": [1540],
       "overlayPositioning": [513, "overlay-positioning"],
+      "referenceDate": [1, "reference-date"],
       "required": [516],
       "scale": [513],
       "value": [1025],
@@ -29187,7 +29379,7 @@ class InputTimeZone {
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": [["disabled", "disabled"], ["form", "form"], ["maxItems", "max-items"], ["name", "name"], ["open", "open"], ["overlayPositioning", "overlay-positioning"], ["required", "required"], ["scale", "scale"]]
+    "$attrsToReflect$": [["disabled", "disabled"], ["form", "form"], ["maxItems", "max-items"], ["mode", "mode"], ["name", "name"], ["open", "open"], ["overlayPositioning", "overlay-positioning"], ["required", "required"], ["scale", "scale"]]
   }; }
 }
 
@@ -29907,7 +30099,7 @@ function lastChild(el, selector) {
  */
 
 
-function index(el, selector) {
+function index$2(el, selector) {
   var index = 0;
 
   if (!el || !el.parentNode) {
@@ -30775,8 +30967,8 @@ Sortable.prototype =
     } // Get the index of the dragged element within its parent
 
 
-    oldIndex = index(target);
-    oldDraggableIndex = index(target, options.draggable); // Check filter
+    oldIndex = index$2(target);
+    oldDraggableIndex = index$2(target, options.draggable); // Check filter
 
     if (typeof filter === 'function') {
       if (filter.call(this, evt, target, this)) {
@@ -31355,8 +31547,8 @@ Sortable.prototype =
 
 
     function changed() {
-      newIndex = index(dragEl);
-      newDraggableIndex = index(dragEl, options.draggable);
+      newIndex = index$2(dragEl);
+      newDraggableIndex = index$2(dragEl, options.draggable);
 
       _dispatchEvent({
         sortable: _this,
@@ -31482,7 +31674,7 @@ Sortable.prototype =
 
         if (direction !== 0) {
           // Check if target is beside dragEl in respective direction (ignoring hidden elements)
-          var dragIndex = index(dragEl);
+          var dragIndex = index$2(dragEl);
 
           do {
             dragIndex -= direction;
@@ -31565,15 +31757,15 @@ Sortable.prototype =
     var el = this.el,
         options = this.options; // Get the index of the dragged element within its parent
 
-    newIndex = index(dragEl);
-    newDraggableIndex = index(dragEl, options.draggable);
+    newIndex = index$2(dragEl);
+    newDraggableIndex = index$2(dragEl, options.draggable);
     pluginEvent('drop', this, {
       evt: evt
     });
     parentEl = dragEl && dragEl.parentNode; // Get again after plugin event
 
-    newIndex = index(dragEl);
-    newDraggableIndex = index(dragEl, options.draggable);
+    newIndex = index$2(dragEl);
+    newDraggableIndex = index$2(dragEl, options.draggable);
 
     if (Sortable.eventCanceled) {
       this._nulling();
@@ -32037,7 +32229,7 @@ function _getSwapDirection(evt, target, targetRect, vertical, swapThreshold, inv
 
 
 function _getInsertDirection(target) {
-  if (index(dragEl) < index(target)) {
+  if (index$2(dragEl) < index$2(target)) {
     return 1;
   } else {
     return -1;
@@ -32105,7 +32297,7 @@ Sortable.utils = {
   closest: closest,
   toggleClass: toggleClass,
   clone: clone,
-  index: index,
+  index: index$2,
   nextTick: _nextTick,
   cancelNextTick: _cancelNextTick,
   detectDirection: _detectDirection,
@@ -32492,10 +32684,10 @@ function connectSortableComponent(component) {
       group: {
         name: group,
         ...(!!component.canPull && {
-          pull: (to, from, dragEl) => component.canPull({ toEl: to.el, fromEl: from.el, dragEl }),
+          pull: (to, from, dragEl, { newIndex, oldIndex }) => component.canPull({ toEl: to.el, fromEl: from.el, dragEl, newIndex, oldIndex }),
         }),
         ...(!!component.canPut && {
-          put: (to, from, dragEl) => component.canPut({ toEl: to.el, fromEl: from.el, dragEl }),
+          put: (to, from, dragEl, { newIndex, oldIndex }) => component.canPut({ toEl: to.el, fromEl: from.el, dragEl, newIndex, oldIndex }),
         }),
       },
     }),
@@ -32508,8 +32700,8 @@ function connectSortableComponent(component) {
       dragState.active = false;
       onDragEnd();
     },
-    onSort: ({ from: fromEl, item: dragEl, to: toEl }) => {
-      component.onDragSort({ fromEl, dragEl, toEl });
+    onSort: ({ from: fromEl, item: dragEl, to: toEl, newIndex, oldIndex }) => {
+      component.onDragSort({ fromEl, dragEl, toEl, newIndex, oldIndex });
     },
   });
 }
@@ -32952,26 +33144,28 @@ class List$1 {
     const { enabledListItems } = this;
     const sameParentItems = enabledListItems.filter((item) => item.parentElement === parentEl);
     const lastIndex = sameParentItems.length - 1;
-    const startingIndex = sameParentItems.indexOf(sortItem);
+    const oldIndex = sameParentItems.indexOf(sortItem);
     let appendInstead = false;
-    let buddyIndex;
+    let newIndex;
     if (direction === "up") {
-      if (startingIndex === 0) {
+      if (oldIndex === 0) {
         appendInstead = true;
+        newIndex = lastIndex;
       }
       else {
-        buddyIndex = startingIndex - 1;
+        newIndex = oldIndex - 1;
       }
     }
     else {
-      if (startingIndex === lastIndex) {
-        buddyIndex = 0;
+      if (oldIndex === lastIndex) {
+        newIndex = 0;
       }
-      else if (startingIndex === lastIndex - 1) {
+      else if (oldIndex === lastIndex - 1) {
         appendInstead = true;
+        newIndex = lastIndex;
       }
       else {
-        buddyIndex = startingIndex + 2;
+        newIndex = oldIndex + 2;
       }
     }
     this.disconnectObserver();
@@ -32979,14 +33173,16 @@ class List$1 {
       parentEl.appendChild(sortItem);
     }
     else {
-      parentEl.insertBefore(sortItem, sameParentItems[buddyIndex]);
+      parentEl.insertBefore(sortItem, sameParentItems[newIndex]);
     }
     this.updateListItems();
     this.connectObserver();
     this.calciteListOrderChange.emit({
       dragEl: sortItem,
-      fromEl: null,
-      toEl: null,
+      fromEl: parentEl,
+      toEl: parentEl,
+      newIndex,
+      oldIndex,
     });
     handle.setFocus().then(() => {
       handle.activated = true;
@@ -34650,37 +34846,6 @@ const ICONS$6 = {
   previous: "chevronLeft",
 };
 
-let getBreakpointsPromise;
-function breakpointTokenToNumericalValue(style, tokenName) {
-  return parseInt(style.getPropertyValue(tokenName));
-}
-/**
- * This util will return a breakpoints lookup object.
- *
- * Note that the breakpoints will be evaluated at the root and cached for reuse.
- *
- * @returns {Promise<Breakpoints>} The Breakpoints object.
- */
-async function getBreakpoints() {
-  if (getBreakpointsPromise) {
-    return getBreakpointsPromise;
-  }
-  getBreakpointsPromise = new Promise((resolve) => {
-    requestAnimationFrame(() => {
-      const rootStyles = getComputedStyle(document.body);
-      resolve({
-        width: {
-          large: breakpointTokenToNumericalValue(rootStyles, "--calcite-app-breakpoint-width-lg"),
-          medium: breakpointTokenToNumericalValue(rootStyles, "--calcite-app-breakpoint-width-md"),
-          small: breakpointTokenToNumericalValue(rootStyles, "--calcite-app-breakpoint-width-sm"),
-          xsmall: breakpointTokenToNumericalValue(rootStyles, "--calcite-app-breakpoint-width-xs"),
-        },
-      });
-    });
-  });
-  return getBreakpointsPromise;
-}
-
 const paginationCss = "/*!@:host*/.sc-calcite-pagination-h{display:flex;writing-mode:horizontal-tb}/*!@:host([scale=s]) .previous, :host([scale=s]) .next, :host([scale=s]) .page, :host([scale=s]) .ellipsis*/[scale=s].sc-calcite-pagination-h .previous.sc-calcite-pagination,[scale=s].sc-calcite-pagination-h .next.sc-calcite-pagination,[scale=s].sc-calcite-pagination-h .page.sc-calcite-pagination,[scale=s].sc-calcite-pagination-h .ellipsis.sc-calcite-pagination{block-size:1.5rem;padding-inline:0.25rem;font-size:var(--calcite-font-size--2);line-height:1rem;min-inline-size:1.5rem}/*!@:host([scale=m]) .previous, :host([scale=m]) .next, :host([scale=m]) .page, :host([scale=m]) .ellipsis*/[scale=m].sc-calcite-pagination-h .previous.sc-calcite-pagination,[scale=m].sc-calcite-pagination-h .next.sc-calcite-pagination,[scale=m].sc-calcite-pagination-h .page.sc-calcite-pagination,[scale=m].sc-calcite-pagination-h .ellipsis.sc-calcite-pagination{block-size:2rem;padding-inline:0.5rem;font-size:var(--calcite-font-size--1);line-height:1rem;min-inline-size:2rem}/*!@:host([scale=l]) .previous, :host([scale=l]) .next, :host([scale=l]) .page, :host([scale=l]) .ellipsis*/[scale=l].sc-calcite-pagination-h .previous.sc-calcite-pagination,[scale=l].sc-calcite-pagination-h .next.sc-calcite-pagination,[scale=l].sc-calcite-pagination-h .page.sc-calcite-pagination,[scale=l].sc-calcite-pagination-h .ellipsis.sc-calcite-pagination{block-size:2.75rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;min-inline-size:2.75rem}/*!@:host([scale=l]) .previous, :host([scale=l]) .next*/[scale=l].sc-calcite-pagination-h .previous.sc-calcite-pagination,[scale=l].sc-calcite-pagination-h .next.sc-calcite-pagination{padding-inline:0.625rem}/*!@:host([scale=l]) .page, :host([scale=l]) .ellipsis*/[scale=l].sc-calcite-pagination-h .page.sc-calcite-pagination,[scale=l].sc-calcite-pagination-h .ellipsis.sc-calcite-pagination{padding-inline:0.75rem}/*!@:host button*/.sc-calcite-pagination-h button.sc-calcite-pagination{outline-color:transparent}/*!@:host button:focus*/.sc-calcite-pagination-h button.sc-calcite-pagination: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          )}/*!@.previous,\n.next,\n.page,\n.ellipsis*/.previous.sc-calcite-pagination,.next.sc-calcite-pagination,.page.sc-calcite-pagination,.ellipsis.sc-calcite-pagination{margin:0px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;border-style:none;--tw-border-opacity:0;background-color:transparent;padding:0px;vertical-align:baseline;font-family:inherit;font-size:var(--calcite-font-size-0);line-height:1.25rem;color:var(--calcite-ui-text-3)}/*!@.previous,\n.next,\n.page*/.previous.sc-calcite-pagination,.next.sc-calcite-pagination,.page.sc-calcite-pagination{cursor:pointer;border-block:2px solid transparent}/*!@.previous:hover,\n.next:hover,\n.page:hover*/.previous.sc-calcite-pagination:hover,.next.sc-calcite-pagination:hover,.page.sc-calcite-pagination:hover{color:var(--calcite-ui-text-1);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s}/*!@.page:hover*/.page.sc-calcite-pagination:hover{border-block-end-color:var(--calcite-ui-border-2)}/*!@.page.is-selected*/.page.is-selected.sc-calcite-pagination{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);border-block-end-color:var(--calcite-ui-brand)}/*!@.previous:hover,\n.next:hover*/.previous.sc-calcite-pagination:hover,.next.sc-calcite-pagination:hover{background-color:var(--calcite-ui-foreground-2);color:var(--calcite-ui-brand)}/*!@.previous:active,\n.next:active*/.previous.sc-calcite-pagination:active,.next.sc-calcite-pagination:active{background-color:var(--calcite-ui-foreground-3)}/*!@.previous.is-disabled,\n.next.is-disabled*/.previous.is-disabled.sc-calcite-pagination,.next.is-disabled.sc-calcite-pagination{pointer-events:none;background-color:transparent}/*!@.previous.is-disabled > calcite-icon,\n.next.is-disabled > calcite-icon*/.previous.is-disabled.sc-calcite-pagination>calcite-icon.sc-calcite-pagination,.next.is-disabled.sc-calcite-pagination>calcite-icon.sc-calcite-pagination{opacity:var(--calcite-ui-opacity-disabled)}/*!@:host([hidden])*/[hidden].sc-calcite-pagination-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-pagination{display:none}";
 
 const firstAndLastPageCount = 2;
@@ -34953,7 +35118,7 @@ class Pagination {
   }; }
 }
 
-const panelCss = "/*!@:host*/.sc-calcite-panel-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-panel-h *.sc-calcite-panel{box-sizing:border-box}/*!@:host([disabled])*/[disabled].sc-calcite-panel-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-panel-h *.sc-calcite-panel,.sc-calcite-panel-h[disabled] .sc-calcite-panel-s>*{pointer-events:none}/*!@:host*/.sc-calcite-panel-h{position:relative;display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;overflow:hidden;--calcite-min-header-height:calc(var(--calcite-icon-size) * 3);--calcite-panel-footer-padding:0.5rem;--calcite-internal-panel-header-border-block-end:1px solid var(--calcite-ui-border-3)}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-panel-h[disabled] .sc-calcite-panel-s>[calcite-hydrated][disabled],[disabled].sc-calcite-panel-h [calcite-hydrated][disabled].sc-calcite-panel{opacity:1}/*!@.header*/.header.sc-calcite-panel{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-ui-text-2);color:var(--calcite-ui-text-2)}/*!@.heading*/.heading.sc-calcite-panel{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}/*!@.header .heading*/.header.sc-calcite-panel .heading.sc-calcite-panel{flex:1 1 auto;padding:0.5rem}/*!@.container*/.container.sc-calcite-panel{margin:0px;display:flex;inline-size:100%;flex:1 1 auto;flex-direction:column;align-items:stretch;background-color:var(--calcite-ui-background);padding:0px;transition:max-block-size var(--calcite-animation-timing), inline-size var(--calcite-animation-timing)}/*!@.container[hidden]*/.container[hidden].sc-calcite-panel{display:none}/*!@.header*/.header.sc-calcite-panel{z-index:var(--calcite-app-z-index-header);display:flex;flex-direction:column;background-color:var(--calcite-ui-foreground-1);border-block-end:var(--calcite-internal-panel-header-border-block-end)}/*!@.header-container*/.header-container.sc-calcite-panel{display:flex;inline-size:100%;flex-direction:row;align-items:stretch;justify-content:flex-start;flex:0 0 auto}/*!@.header-container--border-end*/.header-container--border-end.sc-calcite-panel{border-block-end:1px solid var(--calcite-ui-border-3)}/*!@.action-bar-container*/.action-bar-container.sc-calcite-panel{inline-size:100%}/*!@.action-bar-container ::slotted(calcite-action-bar)*/.action-bar-container .sc-calcite-panel-s>calcite-action-bar{inline-size:100%}/*!@.header-content*/.header-content.sc-calcite-panel{display:flex;flex-direction:column;overflow:hidden;padding-inline:0.75rem;padding-block:0.875rem;margin-inline-end:auto}/*!@.header-content .heading,\n.header-content .description*/.header-content.sc-calcite-panel .heading.sc-calcite-panel,.header-content.sc-calcite-panel .description.sc-calcite-panel{display:block;overflow-wrap:break-word;padding:0px}/*!@.header-content .heading*/.header-content.sc-calcite-panel .heading.sc-calcite-panel{margin-inline:0px;margin-block:0px 0.25rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;font-weight:var(--calcite-font-weight-medium)}/*!@.header-content .heading:only-child*/.header-content.sc-calcite-panel .heading.sc-calcite-panel:only-child{margin-block-end:0px}/*!@.header-content .description*/.header-content.sc-calcite-panel .description.sc-calcite-panel{font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-ui-text-2)}/*!@.back-button*/.back-button.sc-calcite-panel{border-width:0px;border-style:solid;border-color:var(--calcite-ui-border-3);border-inline-end-width:1px}/*!@.header-actions*/.header-actions.sc-calcite-panel{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch}/*!@.header-actions--end*/.header-actions--end.sc-calcite-panel{margin-inline-start:auto}/*!@.content-wrapper*/.content-wrapper.sc-calcite-panel{display:flex;block-size:100%;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch;overflow:auto;background-color:var(--calcite-ui-background)}/*!@.footer*/.footer.sc-calcite-panel{display:flex;inline-size:100%;justify-content:space-evenly;background-color:var(--calcite-ui-foreground-1);flex:0 0 auto;padding:var(--calcite-panel-footer-padding);border-block-start:1px solid var(--calcite-ui-border-3)}/*!@.fab-container*/.fab-container.sc-calcite-panel{position:sticky;inset-block-end:0px;z-index:var(--calcite-app-z-index-sticky);margin-block:0px;margin-inline:auto;display:block;padding:0.5rem;inset-inline:0;inline-size:-moz-fit-content;inline-size:fit-content}/*!@:host([hidden])*/[hidden].sc-calcite-panel-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-panel{display:none}";
+const panelCss = "/*!@:host*/.sc-calcite-panel-h{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}/*!@:host **/.sc-calcite-panel-h *.sc-calcite-panel{box-sizing:border-box}/*!@:host([disabled])*/[disabled].sc-calcite-panel-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-panel-h *.sc-calcite-panel,.sc-calcite-panel-h[disabled] .sc-calcite-panel-s>*{pointer-events:none}/*!@:host*/.sc-calcite-panel-h{position:relative;display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;overflow:hidden;--calcite-min-header-height:calc(var(--calcite-icon-size) * 3)}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-panel-h[disabled] .sc-calcite-panel-s>[calcite-hydrated][disabled],[disabled].sc-calcite-panel-h [calcite-hydrated][disabled].sc-calcite-panel{opacity:1}/*!@.header*/.header.sc-calcite-panel{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-ui-text-2);color:var(--calcite-ui-text-2)}/*!@.heading*/.heading.sc-calcite-panel{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}/*!@.header .heading*/.header.sc-calcite-panel .heading.sc-calcite-panel{flex:1 1 auto;padding:0.5rem}/*!@.container*/.container.sc-calcite-panel{margin:0px;display:flex;inline-size:100%;flex:1 1 auto;flex-direction:column;align-items:stretch;background-color:var(--calcite-ui-background);padding:0px;transition:max-block-size var(--calcite-animation-timing), inline-size var(--calcite-animation-timing)}/*!@.container[hidden]*/.container[hidden].sc-calcite-panel{display:none}/*!@.header*/.header.sc-calcite-panel{z-index:var(--calcite-app-z-index-header);display:flex;flex-direction:column;background-color:var(--calcite-ui-foreground-1);border-block-end:var(--calcite-panel-header-border-block-end, 1px solid var(--calcite-ui-border-3))}/*!@.header-container*/.header-container.sc-calcite-panel{display:flex;inline-size:100%;flex-direction:row;align-items:stretch;justify-content:flex-start;flex:0 0 auto}/*!@.header-container--border-end*/.header-container--border-end.sc-calcite-panel{border-block-end:1px solid var(--calcite-ui-border-3)}/*!@.action-bar-container*/.action-bar-container.sc-calcite-panel{inline-size:100%}/*!@.action-bar-container ::slotted(calcite-action-bar)*/.action-bar-container .sc-calcite-panel-s>calcite-action-bar{inline-size:100%}/*!@.header-content*/.header-content.sc-calcite-panel{display:flex;flex-direction:column;overflow:hidden;padding-inline:0.75rem;padding-block:0.875rem;margin-inline-end:auto}/*!@.header-content .heading,\n.header-content .description*/.header-content.sc-calcite-panel .heading.sc-calcite-panel,.header-content.sc-calcite-panel .description.sc-calcite-panel{display:block;overflow-wrap:break-word;padding:0px}/*!@.header-content .heading*/.header-content.sc-calcite-panel .heading.sc-calcite-panel{margin-inline:0px;margin-block:0px 0.25rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;font-weight:var(--calcite-font-weight-medium)}/*!@.header-content .heading:only-child*/.header-content.sc-calcite-panel .heading.sc-calcite-panel:only-child{margin-block-end:0px}/*!@.header-content .description*/.header-content.sc-calcite-panel .description.sc-calcite-panel{font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-ui-text-2)}/*!@.back-button*/.back-button.sc-calcite-panel{border-width:0px;border-style:solid;border-color:var(--calcite-ui-border-3);border-inline-end-width:1px}/*!@.header-actions*/.header-actions.sc-calcite-panel{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch}/*!@.header-actions--end*/.header-actions--end.sc-calcite-panel{margin-inline-start:auto}/*!@.content-wrapper*/.content-wrapper.sc-calcite-panel{display:flex;block-size:100%;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch;overflow:auto;background-color:var(--calcite-ui-background)}/*!@.footer*/.footer.sc-calcite-panel{display:flex;inline-size:100%;justify-content:space-evenly;background-color:var(--calcite-ui-foreground-1);flex:0 0 auto;padding:var(--calcite-panel-footer-padding, 0.5rem);border-block-start:1px solid var(--calcite-ui-border-3)}/*!@.fab-container*/.fab-container.sc-calcite-panel{position:sticky;inset-block-end:0px;z-index:var(--calcite-app-z-index-sticky);margin-block:0px;margin-inline:auto;display:block;padding:0.5rem;inset-inline:0;inline-size:-moz-fit-content;inline-size:fit-content}/*!@:host([hidden])*/[hidden].sc-calcite-panel-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-panel{display:none}";
 
 /**
  * @slot - A slot for adding custom content.
@@ -34970,6 +35135,7 @@ class Panel {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.calcitePanelClose = createEvent(this, "calcitePanelClose", 6);
+    this.calcitePanelToggle = createEvent(this, "calcitePanelToggle", 6);
     this.calcitePanelScroll = createEvent(this, "calcitePanelScroll", 6);
     this.resizeObserver = createObserver();
     // --------------------------------------------------------------------------
@@ -34989,12 +35155,6 @@ class Panel {
     this.setContainerRef = (node) => {
       this.containerEl = node;
     };
-    this.setCloseRef = (node) => {
-      this.closeButtonEl = node;
-    };
-    this.setBackRef = (node) => {
-      this.backButtonEl = node;
-    };
     this.panelKeyDownHandler = (event) => {
       if (this.closable && event.key === "Escape" && !event.defaultPrevented) {
         this.close();
@@ -35005,6 +35165,10 @@ class Panel {
       this.closed = true;
       this.calcitePanelClose.emit();
     };
+    this.collapse = () => {
+      this.collapsed = !this.collapsed;
+      this.calcitePanelToggle.emit();
+    };
     this.panelScrollHandler = () => {
       this.calcitePanelScroll.emit();
     };
@@ -35045,6 +35209,9 @@ class Panel {
     this.closed = false;
     this.disabled = false;
     this.closable = false;
+    this.collapsed = false;
+    this.collapseDirection = "down";
+    this.collapsible = false;
     this.headingLevel = undefined;
     this.loading = false;
     this.heading = undefined;
@@ -35117,7 +35284,8 @@ class Panel {
    *   top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element
    *   behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).
    * });
-   * @param options
+   * @param options - allows specific coordinates to be defined.
+   * @returns - promise that resolves once the content is scrolled to.
    */
   async scrollContentTo(options) {
     this.panelScrollEl?.scrollTo(options);
@@ -35136,9 +35304,6 @@ class Panel {
   renderActionBar() {
     return (hAsync("div", { class: CSS$N.actionBarContainer, hidden: !this.hasActionBar }, hAsync("slot", { name: SLOTS$n.actionBar, onSlotchange: this.handleActionBarSlotChange })));
   }
-  /**
-   * Allows user to override the entire header-content node.
-   */
   renderHeaderSlottedContent() {
     return (hAsync("div", { class: CSS$N.headerContent, hidden: !this.hasHeaderContent, key: "slotted-header-content" }, hAsync("slot", { name: SLOTS$n.headerContent, onSlotchange: this.handleHeaderContentSlotChange })));
   }
@@ -35147,26 +35312,30 @@ class Panel {
     return (hAsync("div", { class: { [CSS$N.headerActionsStart]: true, [CSS$N.headerActions]: true }, hidden: !hasStartActions, key: "header-actions-start" }, hAsync("slot", { name: SLOTS$n.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$b.close, onClick: close, text: text, title: text,
-      // 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 { hasEndActions, messages, closable, collapsed, collapseDirection, collapsible, hasMenuItems, } = this;
+    const { collapse, expand, close } = messages;
+    const icons = [ICONS$b.expand, ICONS$b.collapse];
+    if (collapseDirection === "up") {
+      icons.reverse();
+    }
+    const collapseNode = collapsible ? (hAsync("calcite-action", { "aria-expanded": toAriaBoolean(!collapsed), "aria-label": collapse, "data-test": "collapse", icon: collapsed ? icons[0] : icons[1], onClick: this.collapse, text: collapse, title: !collapsed ? expand : collapse })) : null;
+    const closeNode = closable ? (hAsync("calcite-action", { "aria-label": close, "data-test": "close", icon: ICONS$b.close, onClick: this.close, text: close, title: close })) : null;
     const slotNode = (hAsync("slot", { name: SLOTS$n.headerActionsEnd, onSlotchange: this.handleHeaderActionsEndSlotChange }));
-    const showContainer = hasEndActions || closableNode || hasMenuItems;
-    return (hAsync("div", { class: { [CSS$N.headerActionsEnd]: true, [CSS$N.headerActions]: true }, hidden: !showContainer, key: "header-actions-end" }, slotNode, this.renderMenu(), closableNode));
+    const showContainer = hasEndActions || collapseNode || closeNode || hasMenuItems;
+    return (hAsync("div", { class: { [CSS$N.headerActionsEnd]: true, [CSS$N.headerActions]: true }, hidden: !showContainer, key: "header-actions-end" }, slotNode, this.renderMenu(), collapseNode, closeNode));
   }
   renderMenu() {
     const { hasMenuItems, messages, menuOpen } = this;
     return (hAsync("calcite-action-menu", { flipPlacements: ["top", "bottom"], hidden: !hasMenuItems, key: "menu", label: messages.options, open: menuOpen, placement: "bottom-end" }, hAsync("calcite-action", { icon: ICONS$b.menu, slot: SLOTS$w.trigger, text: messages.options }), hAsync("slot", { name: SLOTS$n.headerMenuActions, onSlotchange: this.handleHeaderMenuActionsSlotChange })));
   }
   renderHeaderNode() {
-    const { hasHeaderContent, hasStartActions, hasEndActions, closable, hasMenuItems, hasActionBar, } = this;
+    const { hasHeaderContent, hasStartActions, hasEndActions, closable, collapsible, hasMenuItems, hasActionBar, } = this;
     const headerContentNode = this.renderHeaderContent();
     const showHeaderContent = hasHeaderContent ||
       !!headerContentNode ||
       hasStartActions ||
       hasEndActions ||
+      collapsible ||
       closable ||
       hasMenuItems;
     this.showHeaderContent = showHeaderContent;
@@ -35178,7 +35347,7 @@ class Panel {
     return (hAsync("footer", { class: CSS$N.footer, hidden: !showFooter }, hAsync("slot", { key: "footer-slot", name: SLOTS$n.footer, onSlotchange: this.handleFooterSlotChange }), hAsync("slot", { key: "footer-actions-slot", name: SLOTS$n.footerActions, onSlotchange: this.handleFooterActionsSlotChange })));
   }
   renderContent() {
-    return (hAsync("div", { class: CSS$N.contentWrapper, onScroll: this.panelScrollHandler,
+    return (hAsync("div", { class: CSS$N.contentWrapper, hidden: this.collapsible && this.collapsed, 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()));
   }
@@ -35206,6 +35375,9 @@ class Panel {
       "closed": [1540],
       "disabled": [516],
       "closable": [516],
+      "collapsed": [516],
+      "collapseDirection": [1, "collapse-direction"],
+      "collapsible": [516],
       "headingLevel": [514, "heading-level"],
       "loading": [516],
       "heading": [1],
@@ -35229,7 +35401,7 @@ class Panel {
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": [["closed", "closed"], ["disabled", "disabled"], ["closable", "closable"], ["headingLevel", "heading-level"], ["loading", "loading"], ["menuOpen", "menu-open"]]
+    "$attrsToReflect$": [["closed", "closed"], ["disabled", "disabled"], ["closable", "closable"], ["collapsed", "collapsed"], ["collapsible", "collapsible"], ["headingLevel", "heading-level"], ["loading", "loading"], ["menuOpen", "menu-open"]]
   }; }
 }
 
@@ -41489,7 +41661,7 @@ const CSS$a = {
   assistiveText: "assistive-text",
 };
 
-const tableCellCss = "/*!@:host*/.sc-calcite-table-cell-h{--calcite-internal-table-cell-background-internal:var(--calcite-table-cell-background, transparent);--calcite-internal-table-cell-border-color-internal:var(--calcite-table-cell-border-color, transparent);display:contents}/*!@:host([alignment=center]) td*/[alignment=center].sc-calcite-table-cell-h td.sc-calcite-table-cell{text-align:center}/*!@:host([alignment=end]) td*/[alignment=end].sc-calcite-table-cell-h td.sc-calcite-table-cell{text-align:end}/*!@.assistive-text*/.assistive-text.sc-calcite-table-cell{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}/*!@td*/td.sc-calcite-table-cell{white-space:normal;text-align:start;vertical-align:middle;color:var(--calcite-ui-text-1);outline-color:transparent;background:var(--calcite-internal-table-cell-background);border-inline-end:1px solid var(--calcite-ui-border-3);font-size:var(--calcite-internal-table-cell-font-size);padding:var(--calcite-internal-table-cell-padding)}/*!@td:focus*/td.sc-calcite-table-cell: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          )}/*!@.number-cell*/.number-cell.sc-calcite-table-cell{background-color:var(--calcite-ui-foreground-2)}/*!@.footer-cell*/.footer-cell.sc-calcite-table-cell{background-color:var(--calcite-ui-background);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);border-block-start:1px solid var(--calcite-ui-border-3)}/*!@.number-cell,\n.selection-cell*/.number-cell.sc-calcite-table-cell,.selection-cell.sc-calcite-table-cell{border-inline-end:1px solid var(--calcite-ui-border-3);inline-size:2rem;min-inline-size:2rem}/*!@.selection-cell*/.selection-cell.sc-calcite-table-cell{cursor:pointer;color:var(--calcite-ui-text-3);inset-inline-start:2rem}/*!@.selected-cell:not(.number-cell):not(.footer-cell)*/.selected-cell.sc-calcite-table-cell:not(.number-cell):not(.footer-cell){--calcite-table-cell-background:var(--calcite-ui-foreground-current);background:var(--calcite-ui-foreground-current)}/*!@.selection-cell.selected-cell*/.selection-cell.selected-cell.sc-calcite-table-cell{box-shadow:inset 0.25rem 0 0 0 var(--calcite-ui-brand);color:var(--calcite-ui-brand)}/*!@.selection-cell.selected-cell calcite-icon*/.selection-cell.selected-cell.sc-calcite-table-cell calcite-icon.sc-calcite-table-cell{color:var(--calcite-ui-brand)}/*!@.selection-cell*/.selection-cell.sc-calcite-table-cell{vertical-align:middle}/*!@.selection-cell ::slotted(calcite-icon)*/.selection-cell .sc-calcite-table-cell-s>calcite-icon{pointer-events:none;margin-block-start:0.25rem}";
+const tableCellCss = "/*!@:host*/.sc-calcite-table-cell-h{--calcite-internal-table-cell-background-internal:var(--calcite-table-cell-background, transparent);--calcite-internal-table-cell-border-color-internal:var(--calcite-table-cell-border-color, transparent);display:contents}/*!@:host([alignment=center]) td*/[alignment=center].sc-calcite-table-cell-h td.sc-calcite-table-cell{text-align:center}/*!@:host([alignment=end]) td*/[alignment=end].sc-calcite-table-cell-h td.sc-calcite-table-cell{text-align:end}/*!@.assistive-text*/.assistive-text.sc-calcite-table-cell{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}/*!@td*/td.sc-calcite-table-cell{white-space:normal;text-align:start;vertical-align:middle;color:var(--calcite-ui-text-1);outline-color:transparent;background:var(--calcite-internal-table-cell-background);border-inline-end:1px solid var(--calcite-ui-border-3);font-size:var(--calcite-internal-table-cell-font-size);padding:var(--calcite-internal-table-cell-padding)}/*!@td:focus*/td.sc-calcite-table-cell: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          )}/*!@.number-cell*/.number-cell.sc-calcite-table-cell{background-color:var(--calcite-ui-foreground-2)}/*!@.footer-cell*/.footer-cell.sc-calcite-table-cell{background-color:var(--calcite-ui-background);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);border-block-start:1px solid var(--calcite-ui-border-3)}/*!@.number-cell,\n.selection-cell*/.number-cell.sc-calcite-table-cell,.selection-cell.sc-calcite-table-cell{border-inline-end:1px solid var(--calcite-ui-border-3);inline-size:2rem;min-inline-size:2rem}/*!@.selection-cell*/.selection-cell.sc-calcite-table-cell{cursor:pointer;color:var(--calcite-ui-text-3);inset-inline-start:2rem}/*!@.selected-cell:not(.number-cell):not(.footer-cell)*/.selected-cell.sc-calcite-table-cell:not(.number-cell):not(.footer-cell){--calcite-table-cell-background:var(--calcite-ui-foreground-current);background:var(--calcite-ui-foreground-current)}/*!@.selection-cell.selected-cell*/.selection-cell.selected-cell.sc-calcite-table-cell{box-shadow:inset 0.25rem 0 0 0 var(--calcite-ui-brand);color:var(--calcite-ui-brand)}/*!@.selection-cell.selected-cell calcite-icon*/.selection-cell.selected-cell.sc-calcite-table-cell calcite-icon.sc-calcite-table-cell{color:var(--calcite-ui-brand)}/*!@.calcite--rtl.selection-cell.selected-cell*/.calcite--rtl.selection-cell.selected-cell.sc-calcite-table-cell{box-shadow:inset -0.25rem 0 0 0 var(--calcite-ui-brand)}/*!@.selection-cell*/.selection-cell.sc-calcite-table-cell{vertical-align:middle}/*!@.selection-cell ::slotted(calcite-icon)*/.selection-cell .sc-calcite-table-cell-s>calcite-icon{pointer-events:none;margin-block-start:0.25rem}";
 
 /**
  * @slot - A slot for adding content, usually text content.
@@ -41588,11 +41760,13 @@ class TableCell {
   //
   //--------------------------------------------------------------------------
   render() {
+    const dir = getElementDir(this.el);
     return (hAsync(Host, null, hAsync("td", { "aria-disabled": this.disabled, class: {
         [CSS$a.footerCell]: this.parentRowType === "foot",
         [CSS$a.numberCell]: this.numberCell,
         [CSS$a.selectionCell]: this.selectionCell,
         [CSS$a.selectedCell]: this.parentRowIsSelected,
+        [CSS_UTILITY.rtl]: dir === "rtl",
       }, colSpan: this.colSpan, onBlur: this.onContainerBlur, onFocus: this.onContainerFocus, role: "gridcell", rowSpan: this.rowSpan, tabIndex: this.disabled ? -1 : 0,
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: (el) => (this.containerEl = el) }, (this.selectionCell || this.readCellContentsToAT) && this.focused && (hAsync("span", { "aria-hidden": true, "aria-live": "polite", class: CSS$a.assistiveText }, this.selectionCell && this.selectionText, this.readCellContentsToAT && !this.selectionCell && this.contentsText)), hAsync("slot", { onSlotchange: this.updateScreenReaderContentsText }))));
@@ -44603,17 +44777,15 @@ class Tree {
       this.el.tabIndex = this.getRootTabIndex();
     }
   }
-  onClick(event) {
-    const target = event.target;
-    const childItems = nodeListToArray(target.querySelectorAll("calcite-tree-item"));
+  onInternalTreeItemSelect(event) {
     if (this.child) {
       return;
     }
-    if (!this.child) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-    if (this.selectionMode === "ancestors" && !this.child) {
+    const target = event.target;
+    const childItems = nodeListToArray(target.querySelectorAll("calcite-tree-item"));
+    event.preventDefault();
+    event.stopPropagation();
+    if (this.selectionMode === "ancestors") {
       this.updateAncestorTree(event);
       return;
     }
@@ -44631,62 +44803,51 @@ class Tree {
         childItems.length <= 0) ||
         this.selectionMode === "children" ||
         this.selectionMode === "multichildren");
-    const shouldUpdateExpand = ["children", "multichildren"].includes(this.selectionMode) ||
-      (["single", "multiple"].includes(this.selectionMode) &&
-        target.hasChildren &&
-        !event.detail.forceToggle);
-    if (!this.child) {
-      const targetItems = [];
-      if (shouldSelect) {
-        targetItems.push(target);
-      }
-      if (shouldClearCurrentSelection) {
-        const selectedItems = nodeListToArray(this.el.querySelectorAll("calcite-tree-item[selected]"));
-        selectedItems.forEach((treeItem) => {
-          if (!targetItems.includes(treeItem)) {
-            treeItem.selected = false;
-          }
-        });
-      }
-      if (shouldUpdateExpand) {
-        if (["single", "multiple"].includes(this.selectionMode)) {
-          target.expanded = !target.expanded;
+    const shouldUpdateExpand = ["multiple", "none", "single", "single-persist"].includes(this.selectionMode) &&
+      target.hasChildren;
+    const targetItems = [];
+    if (shouldSelect) {
+      targetItems.push(target);
+    }
+    if (shouldClearCurrentSelection) {
+      const selectedItems = nodeListToArray(this.el.querySelectorAll("calcite-tree-item[selected]"));
+      selectedItems.forEach((treeItem) => {
+        if (!targetItems.includes(treeItem)) {
+          treeItem.selected = false;
         }
-        else if (this.selectionMode === "multichildren") {
-          target.expanded = !target.selected;
+      });
+    }
+    if (shouldUpdateExpand &&
+      ["multiple", "none", "single", "single-persist"].includes(this.selectionMode)) {
+      target.expanded = !target.expanded;
+    }
+    if (shouldDeselectAllChildren) {
+      childItems.forEach((item) => {
+        item.selected = false;
+        if (item.hasChildren) {
+          item.expanded = false;
         }
-        else if (this.selectionMode === "children") {
-          target.expanded = target.selected ? !target.expanded : true;
+      });
+    }
+    if (shouldModifyToCurrentSelection) {
+      window.getSelection().removeAllRanges();
+    }
+    if (shouldModifyToCurrentSelection && target.selected) {
+      targetItems.forEach((treeItem) => {
+        if (!treeItem.disabled) {
+          treeItem.selected = false;
         }
-      }
-      if (shouldDeselectAllChildren) {
-        childItems.forEach((item) => {
-          item.selected = false;
-          if (item.hasChildren) {
-            item.expanded = false;
-          }
-        });
-      }
-      if (shouldModifyToCurrentSelection) {
-        window.getSelection().removeAllRanges();
-      }
-      if ((shouldModifyToCurrentSelection && target.selected) || event.detail.forceToggle) {
-        targetItems.forEach((treeItem) => {
-          if (!treeItem.disabled) {
-            treeItem.selected = false;
-          }
-        });
-      }
-      else if (!isNoneSelectionMode) {
-        targetItems.forEach((treeItem) => {
-          if (!treeItem.disabled) {
-            treeItem.selected = true;
-          }
-        });
-      }
+      });
+    }
+    else if (!isNoneSelectionMode) {
+      targetItems.forEach((treeItem) => {
+        if (!treeItem.disabled) {
+          treeItem.selected = true;
+        }
+      });
     }
     this.selectedItems = isNoneSelectionMode
-      ? [target]
+      ? []
       : nodeListToArray(this.el.querySelectorAll("calcite-tree-item")).filter((i) => i.selected);
     this.calciteTreeSelect.emit();
     event.stopPropagation();
@@ -44773,7 +44934,7 @@ class Tree {
       "selectionMode": [1537, "selection-mode"],
       "selectedItems": [1040]
     },
-    "$listeners$": [[0, "focus", "onFocus"], [0, "focusin", "onFocusIn"], [0, "focusout", "onFocusOut"], [0, "calciteInternalTreeItemSelect", "onClick"]],
+    "$listeners$": [[0, "focus", "onFocus"], [0, "focusin", "onFocusIn"], [0, "focusout", "onFocusOut"], [0, "calciteInternalTreeItemSelect", "onInternalTreeItemSelect"]],
     "$lazyBundleId$": "-",
     "$attrsToReflect$": [["lines", "lines"], ["child", "child"], ["scale", "scale"], ["selectionMode", "selection-mode"]]
   }; }
@@ -44803,7 +44964,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}/*!@: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}";
+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}/*!@.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.
@@ -44855,7 +45016,6 @@ class TreeItem {
       }
       this.calciteInternalTreeItemSelect.emit({
         modifyCurrentSelection: true,
-        forceToggle: false,
         updateItem: false,
       });
     }
@@ -44970,32 +45130,24 @@ class TreeItem {
     }
     this.calciteInternalTreeItemSelect.emit({
       modifyCurrentSelection: this.selectionMode === "ancestors" || this.isSelectionMultiLike,
-      forceToggle: false,
       updateItem: true,
     });
     this.userChangedValue = true;
   }
   keyDownHandler(event) {
-    if (this.isActionEndEvent(event)) {
+    if (this.isActionEndEvent(event) || event.defaultPrevented) {
       return;
     }
     switch (event.key) {
       case " ":
-        if (this.selectionMode === "none") {
-          return;
-        }
         this.userChangedValue = true;
         this.calciteInternalTreeItemSelect.emit({
           modifyCurrentSelection: this.isSelectionMultiLike,
-          forceToggle: false,
           updateItem: true,
         });
         event.preventDefault();
         break;
       case "Enter":
-        if (this.selectionMode === "none") {
-          return;
-        }
         // 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 = Array.from(this.el.children).find((el) => el.matches("a"));
         this.userChangedValue = true;
@@ -45006,7 +45158,6 @@ class TreeItem {
         else {
           this.calciteInternalTreeItemSelect.emit({
             modifyCurrentSelection: this.isSelectionMultiLike,
-            forceToggle: false,
             updateItem: true,
           });
         }
@@ -48603,6 +48754,245 @@ var zhTw = /*#__PURE__*/Object.freeze({
   'default': locale
 });
 
+const supportedTimeZones = Intl.supportedValuesOf('timeZone');
+
+const now = new Date();
+const startDate = now.toISOString();
+const daysInYear = 365;
+const groupDateRange = daysInYear;
+const defaultGroupingOptions = {
+    startDate,
+    groupDateRange,
+    debug: false,
+};
+
+/* eslint-disable @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-return */
+const continentAllowList = new Set([
+    'Europe',
+    'Asia',
+    'America',
+    'America/Argentina',
+    'Africa',
+    'Australia',
+    'Pacific',
+    'Atlantic',
+    'Antarctica',
+    'Arctic',
+    'Indian',
+]);
+const _getDates = (startDate, numberDays, dateEngine) => {
+    const dateArray = [];
+    let date = dateEngine.create(startDate);
+    for (let i = 0; i <= numberDays; i++) {
+        date = dateEngine.increase(date);
+        dateArray.push(dateEngine.formatToIsoDateString(date));
+    }
+    return dateArray;
+};
+const _extractContinent = (label) => {
+    if (label.includes('Istanbul')) {
+        return 'Europe';
+    }
+    const lastIndex = label.lastIndexOf('/');
+    return lastIndex === -1 ? label : label.slice(0, lastIndex);
+};
+const _isRegularContinent = (continent) => continentAllowList.has(continent);
+const generateTimeZoneMetadata = (timeZoneItems, startDate, numberDays, dateEngine, debug = false) => {
+    const processedDates = new Map();
+    if (debug) {
+        console.log(`Initializing data starting ${startDate} with ${numberDays} days in the future, comparing ${timeZoneItems.length} timezones`);
+    }
+    const theDates = _getDates(startDate, numberDays, dateEngine);
+    return timeZoneItems.map((tzItem) => {
+        const label = tzItem.label;
+        const continent = _extractContinent(label);
+        const dates = theDates.map((date) => {
+            const key = `${date}-${label}`;
+            let utc = processedDates.get(key);
+            if (utc) {
+                return utc;
+            }
+            utc = dateEngine.isoToTimeZone(date, label);
+            processedDates.set(key, utc);
+            return utc;
+        });
+        return {
+            ...tzItem,
+            continent,
+            isRegularContinent: _isRegularContinent(continent),
+            dates,
+        };
+    });
+};
+const compareDateArrs = (array1, array2, dateEngine) => array1.length === array2.length &&
+    array1.every((value, index) => dateEngine.same(value, array2[index]));
+const getGroupLabelTimeZoneIndices = (rawTZs, max = 5) => {
+    const shrinkedTzs = rawTZs.filter(({ label }) => _isRegularContinent(_extractContinent(label)));
+    rawTZs = shrinkedTzs.length === 0 ? [rawTZs[0]] : shrinkedTzs;
+    const uniqueLabels = [...new Set(rawTZs.map((_tz, index) => index))];
+    return equallyDistributedSampling(uniqueLabels, max);
+};
+function equallyDistributedSampling(items, maxItems = 5) {
+    const totalItems = items.length;
+    if (totalItems <= maxItems) {
+        return items;
+    }
+    const numberItemsToSelect = Math.min(totalItems - 2, maxItems - 2);
+    const stepSize = (totalItems - 1) / (numberItemsToSelect + 1);
+    return [
+        items[0],
+        ...Array.from({ length: numberItemsToSelect }, (_, i) => items[Math.round((i + 1) * stepSize)]),
+        items[totalItems - 1],
+    ];
+}
+
+async function groupTimeZones(options) {
+    const { debug, groupDateRange, hooks, startDate, dateEngine } = {
+        ...defaultGroupingOptions,
+        ...options,
+    };
+    const grouping = [];
+    if (!dateEngine) {
+        throw new Error('dateEngine is required');
+    }
+    const timeZoneItems = supportedTimeZones.map((tz) => ({ label: tz }));
+    hooks?.onBeforeTimeZoneMetadataCreate?.(timeZoneItems);
+    const timeZoneMetadata = generateTimeZoneMetadata(timeZoneItems, startDate, groupDateRange, dateEngine, debug);
+    hooks?.onTimeZoneMetadataCreate?.(timeZoneMetadata);
+    // We traverse the mappedDB and see if we find matches by comparing each set
+    // of transformed date for that specific TZ.
+    for (const tzMetadatumI of timeZoneMetadata) {
+        const { label, continent, dates } = tzMetadatumI;
+        // ignore if we visited this element already
+        if (tzMetadatumI.visited) {
+            continue;
+        }
+        // Mark element as already visited
+        tzMetadatumI.visited = true;
+        // The grouped timezone that we want as a result
+        const newGroup = {
+            labelTzIndices: undefined,
+            tzs: [{ label }],
+        };
+        hooks?.onGroupCreate?.(newGroup, tzMetadatumI);
+        for (const tzMetadatumJ of timeZoneMetadata.filter((_) => !_.visited)) {
+            const { label: labelJ, continent: continentJ, isRegularContinent: isRegularContinentJ, dates: datesJ, } = tzMetadatumJ;
+            // We define a matching TZ by:
+            // 1) if both continents match (avoid grouping Antarctica with anything else)
+            // 2) if the transformed dates match in both TZs
+            if ((continent === continentJ || !isRegularContinentJ) &&
+                compareDateArrs(dates, datesJ, dateEngine)) {
+                const tzItem = { label: labelJ };
+                newGroup.tzs.push(tzItem);
+                hooks?.onGroupTimeZoneAdd?.(newGroup, tzItem, tzMetadatumJ);
+                // Mark element as already visited
+                tzMetadatumJ.visited = true;
+            }
+        }
+        grouping.push(newGroup);
+        hooks?.onGroupAdd?.(newGroup);
+    }
+    // Now that we have a group, we want an easy way to find a fitting label for the group
+    // which is defined as the list of the most-common 7 cities, shown in alphabetical order
+    const finalGrouping = grouping
+        .map((group) => {
+        hooks?.onBeforeFinalGroupCreate?.(group);
+        const finalGrouping = {
+            labelTzIndices: getGroupLabelTimeZoneIndices(group.tzs, 7),
+            tzs: group.tzs.map((_) => _.label).sort(),
+        };
+        hooks?.onFinalGroupCreate?.(finalGrouping, group);
+        return finalGrouping;
+    })
+        .sort((a, b) => b.tzs.length - a.tzs.length);
+    if (debug) {
+        const missingTzs = supportedTimeZones
+            .map((tz) => (finalGrouping.some((y) => y.tzs.includes(tz)) ? null : tz))
+            .filter(Boolean);
+        if (missingTzs.length > 0) {
+            throw new Error(`There are ${missingTzs.length} missing timezones: ${missingTzs.toString()}`);
+        }
+    }
+    return hooks?.onFinalGroupingCreate
+        ? hooks.onFinalGroupingCreate(finalGrouping)
+        : finalGrouping;
+}
+
+var index$1 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  groupTimeZones: groupTimeZones
+});
+
+class NativeDateEngine {
+    _formatterCache = new Map();
+    _commonDateTimeFormatterOptions = {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        timeZoneName: 'shortOffset',
+    };
+    get name() {
+        return 'native';
+    }
+    create(date) {
+        return new Date(date);
+    }
+    increase(date) {
+        const oneDayInMs = 86400000;
+        return new Date(date.getTime() + oneDayInMs);
+    }
+    formatToIsoDateString(date) {
+        const year = date.getFullYear();
+        const month = date.getMonth() + 1;
+        const day = date.getDate();
+        return `${year}-${month.toString().padStart(2, '0')}-${day
+            .toString()
+            .padStart(2, '0')}`;
+    }
+    isoToTimeZone(isoDate, tz) {
+        const date = this._toDate(isoDate);
+        const formatter = this._getFormatter(tz);
+        const parts = formatter.formatToParts(date);
+        const [month, day, year, offset] = parts
+            .filter(({ type }) => type !== 'literal')
+            .map(({ value }) => value);
+        const tzOffset = this._getTimeZoneOffsetInMins(offset);
+        return new Date(Date.UTC(Number(year), Number(month) - 1, Number(day), 0, -tzOffset));
+    }
+    same(date1, date2) {
+        return date1.getTime() === date2.getTime();
+    }
+    _toDate(isoDate) {
+        const dateParts = isoDate.split('-');
+        const year = Number(dateParts[0]);
+        const month = Number(dateParts[1]) - 1;
+        const day = Number(dateParts[2]);
+        return new Date(year, month, day);
+    }
+    _getFormatter(tz) {
+        let formatter = this._formatterCache.get(tz);
+        if (!formatter) {
+            formatter = new Intl.DateTimeFormat('en-US', {
+                timeZone: tz,
+                ...this._commonDateTimeFormatterOptions,
+            });
+            this._formatterCache.set(tz, formatter);
+        }
+        return formatter;
+    }
+    _getTimeZoneOffsetInMins(gmtTimeZone) {
+        const [sign, ...hoursMinutes] = gmtTimeZone.slice(3);
+        const [hours, minutes] = hoursMinutes.join('').split(':');
+        const signMultiplier = sign === '+' ? 1 : -1;
+        return signMultiplier * (Number(hours) * 60 + Number(minutes || 0));
+    }
+}
+
+var index = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  DateEngine: NativeDateEngine
+});
+
 exports.hydrateApp = hydrateApp;