@esri/calcite-components 1.0.0-next.637 → 1.0.0-next.638

package/hydrate/index.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.637
+ * v1.0.0-next.638
  */
 'use strict';
 
@@ -6152,6 +6152,34 @@ function intersects(rect1, rect2) {
 function toAriaBoolean(value) {
   return Boolean(value).toString();
 }
+/**
+ * This helper returns `true` if the target `slot` element from the `onSlotchange` event has an assigned element.
+ *
+ * ```
+ * <slot onSlotchange={(event) => this.mySlotHasElement = slotChangeHasAssignedElement(event)} />}
+ * ```
+ *
+ * @param event
+ * @returns {boolean} Whether the slot has any assigned elements.
+ */
+function slotChangeHasAssignedElement(event) {
+  return !!slotChangeGetAssignedElements(event).length;
+}
+/**
+ * This helper returns the assigned elements on a `slot` element from the `onSlotchange` event.
+ *
+ * ```
+ * <slot onSlotchange={(event) => this.mySlotElements = slotChangeGetAssignedElements(event)} />}
+ * ```
+ *
+ * @param event
+ * @returns {boolean} Whether the slot has any assigned elements.
+ */
+function slotChangeGetAssignedElements(event) {
+  return event.target.assignedElements({
+    flatten: true
+  });
+}
 /**
  * This helper returns true if the pointer event fired from the primary button of the device.
  *
@@ -6227,7 +6255,7 @@ const SLOTS$u = {
   actionsStart: "actions-start",
   actionsEnd: "actions-end"
 };
-const CSS$U = {
+const CSS$V = {
   icon: "icon",
   header: "header",
   headerContent: "header-content",
@@ -6325,27 +6353,27 @@ class AccordionItem {
   // --------------------------------------------------------------------------
   renderActionsStart() {
     const { el } = this;
-    return getSlotted(el, SLOTS$u.actionsStart) ? (hAsync("div", { class: CSS$U.actionsStart }, hAsync("slot", { name: SLOTS$u.actionsStart }))) : null;
+    return getSlotted(el, SLOTS$u.actionsStart) ? (hAsync("div", { class: CSS$V.actionsStart }, hAsync("slot", { name: SLOTS$u.actionsStart }))) : null;
   }
   renderActionsEnd() {
     const { el } = this;
-    return getSlotted(el, SLOTS$u.actionsEnd) ? (hAsync("div", { class: CSS$U.actionsEnd }, hAsync("slot", { name: SLOTS$u.actionsEnd }))) : null;
+    return getSlotted(el, SLOTS$u.actionsEnd) ? (hAsync("div", { class: CSS$V.actionsEnd }, hAsync("slot", { name: SLOTS$u.actionsEnd }))) : null;
   }
   render() {
     const dir = getElementDir(this.el);
-    const iconStartEl = this.iconStart ? (hAsync("calcite-icon", { class: CSS$U.iconStart, icon: this.iconStart, key: "icon-start", scale: "s" })) : null;
-    const iconEndEl = this.iconEnd ? (hAsync("calcite-icon", { class: CSS$U.iconEnd, icon: this.iconEnd, key: "icon-end", scale: "s" })) : null;
+    const iconStartEl = this.iconStart ? (hAsync("calcite-icon", { class: CSS$V.iconStart, icon: this.iconStart, key: "icon-start", scale: "s" })) : null;
+    const iconEndEl = this.iconEnd ? (hAsync("calcite-icon", { class: CSS$V.iconEnd, icon: this.iconEnd, key: "icon-end", scale: "s" })) : null;
     const description = this.description || this.itemSubtitle;
     return (hAsync(Host, null, hAsync("div", { class: {
         [`icon-position--${this.iconPosition}`]: true,
         [`icon-type--${this.iconType}`]: true
-      } }, hAsync("div", { class: { [CSS$U.header]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.renderActionsStart(), hAsync("div", { "aria-expanded": toAriaBoolean(this.active || this.expanded), class: CSS$U.headerContent, onClick: this.itemHeaderClickHandler, role: "button", tabindex: "0" }, hAsync("div", { class: CSS$U.headerContainer }, iconStartEl, hAsync("div", { class: CSS$U.headerText }, hAsync("span", { class: CSS$U.heading }, this.heading || this.itemTitle), description ? hAsync("span", { class: CSS$U.description }, description) : null), iconEndEl), hAsync("calcite-icon", { class: CSS$U.expandIcon, icon: this.iconType === "chevron"
+      } }, hAsync("div", { class: { [CSS$V.header]: true, [CSS_UTILITY.rtl]: dir === "rtl" } }, this.renderActionsStart(), hAsync("div", { "aria-expanded": toAriaBoolean(this.active || this.expanded), class: CSS$V.headerContent, onClick: this.itemHeaderClickHandler, role: "button", tabindex: "0" }, hAsync("div", { class: CSS$V.headerContainer }, iconStartEl, hAsync("div", { class: CSS$V.headerText }, hAsync("span", { class: CSS$V.heading }, this.heading || this.itemTitle), description ? hAsync("span", { class: CSS$V.description }, description) : null), iconEndEl), hAsync("calcite-icon", { class: CSS$V.expandIcon, icon: this.iconType === "chevron"
         ? "chevronDown"
         : this.iconType === "caret"
           ? "caretDown"
           : this.expanded || this.active
             ? "minus"
-            : "plus", scale: "s" })), this.renderActionsEnd()), hAsync("div", { class: CSS$U.content }, hAsync("slot", null)))));
+            : "plus", scale: "s" })), this.renderActionsEnd()), hAsync("div", { class: CSS$V.content }, hAsync("slot", null)))));
   }
   //--------------------------------------------------------------------------
   //
@@ -6439,7 +6467,7 @@ class AccordionItem {
   }; }
 }
 
-const CSS$T = {
+const CSS$U = {
   button: "button",
   buttonTextVisible: "button--text-visible",
   buttonCompact: "button--compact",
@@ -6664,8 +6692,8 @@ class Action {
   renderTextContainer() {
     const { text, textEnabled } = this;
     const textContainerClasses = {
-      [CSS$T.textContainer]: true,
-      [CSS$T.textContainerVisible]: textEnabled
+      [CSS$U.textContainer]: true,
+      [CSS$U.textContainerVisible]: textEnabled
     };
     return text ? (hAsync("div", { class: textContainerClasses, key: "text-container" }, text)) : null;
   }
@@ -6679,18 +6707,18 @@ class Action {
     const iconNode = calciteLoaderNode || calciteIconNode;
     const hasIconToDisplay = iconNode || ((_a = el.children) === null || _a === void 0 ? void 0 : _a.length);
     const slotContainerNode = (hAsync("div", { class: {
-        [CSS$T.slotContainer]: true,
-        [CSS$T.slotContainerHidden]: loading
+        [CSS$U.slotContainer]: true,
+        [CSS$U.slotContainerHidden]: loading
       } }, hAsync("slot", null)));
-    return hasIconToDisplay ? (hAsync("div", { "aria-hidden": "true", class: CSS$T.iconContainer, key: "icon-container" }, iconNode, slotContainerNode)) : null;
+    return hasIconToDisplay ? (hAsync("div", { "aria-hidden": "true", class: CSS$U.iconContainer, key: "icon-container" }, iconNode, slotContainerNode)) : null;
   }
   render() {
     const { compact, disabled, loading, textEnabled, label, text } = this;
     const ariaLabel = label || text;
     const buttonClasses = {
-      [CSS$T.button]: true,
-      [CSS$T.buttonTextVisible]: textEnabled,
-      [CSS$T.buttonCompact]: compact
+      [CSS$U.button]: true,
+      [CSS$U.buttonTextVisible]: textEnabled,
+      [CSS$U.buttonCompact]: compact
     };
     return (hAsync(Host, { onClick: this.calciteActionClickHandler }, hAsync("button", { "aria-busy": toAriaBoolean(loading), "aria-disabled": toAriaBoolean(disabled), "aria-label": ariaLabel, class: buttonClasses, disabled: disabled, ref: (buttonEl) => (this.buttonEl = buttonEl) }, this.renderIconContainer(), this.renderTextContainer()), hAsync("slot", { name: SLOTS$t.tooltip, onSlotchange: this.handleTooltipSlotChange })));
   }
@@ -6721,7 +6749,7 @@ class Action {
   }; }
 }
 
-const CSS$S = {
+const CSS$T = {
   menu: "menu",
   defaultTrigger: "default-trigger"
 };
@@ -6729,7 +6757,7 @@ const SLOTS$s = {
   tooltip: "tooltip",
   trigger: "trigger"
 };
-const ICONS$g = {
+const ICONS$h = {
   menu: "ellipsis"
 };
 
@@ -6740,7 +6768,7 @@ const SLOTS$r = {
 const TEXT$t = {
   more: "More"
 };
-const ICONS$f = {
+const ICONS$g = {
   menu: "ellipsis"
 };
 
@@ -6794,7 +6822,7 @@ const overflowActions = ({ actionGroups, expanded, overflowCount }) => {
   });
 };
 
-const ICONS$e = {
+const ICONS$f = {
   chevronsLeft: "chevrons-left",
   chevronsRight: "chevrons-right"
 };
@@ -6822,7 +6850,7 @@ const setTooltipReference = ({ tooltip, referenceElement, expanded, ref }) => {
 const ExpandToggle = ({ expanded, intlExpand, intlCollapse, toggle, el, position, tooltip, ref, scale }) => {
   const rtl = getElementDir(el) === "rtl";
   const expandText = expanded ? intlCollapse : intlExpand;
-  const icons = [ICONS$e.chevronsLeft, ICONS$e.chevronsRight];
+  const icons = [ICONS$f.chevronsLeft, ICONS$f.chevronsRight];
   if (rtl) {
     icons.reverse();
   }
@@ -6833,7 +6861,7 @@ const ExpandToggle = ({ expanded, intlExpand, intlCollapse, toggle, el, position
   return actionNode;
 };
 
-const CSS$R = {
+const CSS$S = {
   actionGroupBottom: "action-group--bottom"
 };
 const SLOTS$q = {
@@ -8283,7 +8311,7 @@ class ActionBar {
     const expandLabel = intlExpand || TEXT$s.expand;
     const collapseLabel = intlCollapse || TEXT$s.collapse;
     const expandToggleNode = !expandDisabled ? (hAsync(ExpandToggle, { el: el, expanded: expanded, intlCollapse: collapseLabel, intlExpand: expandLabel, position: position, ref: this.setExpandToggleRef, scale: scale, toggle: toggleExpand, tooltip: tooltip })) : null;
-    return getSlotted(el, SLOTS$q.bottomActions) || expandToggleNode ? (hAsync("calcite-action-group", { class: CSS$R.actionGroupBottom, layout: layout, scale: scale }, hAsync("slot", { name: SLOTS$q.bottomActions }), hAsync("slot", { name: SLOTS$q.expandTooltip }), expandToggleNode)) : null;
+    return getSlotted(el, SLOTS$q.bottomActions) || expandToggleNode ? (hAsync("calcite-action-group", { class: CSS$S.actionGroupBottom, layout: layout, scale: scale }, hAsync("slot", { name: SLOTS$q.bottomActions }), hAsync("slot", { name: SLOTS$q.expandTooltip }), expandToggleNode)) : null;
   }
   render() {
     return (hAsync(Host, { onCalciteActionMenuOpenChange: this.actionMenuOpenChangeHandler }, hAsync("slot", null), this.renderBottomActionGroup()));
@@ -8379,7 +8407,7 @@ class ActionGroup {
   renderMenu() {
     const { el, expanded, intlMore, menuOpen, scale, layout } = this;
     const hasMenuItems = getSlotted(el, SLOTS$r.menuActions);
-    return hasMenuItems ? (hAsync("calcite-action-menu", { expanded: expanded, flipPlacements: ["left", "right"], label: intlMore || TEXT$t.more, onCalciteActionMenuOpenChange: this.setMenuOpen, open: menuOpen, placement: layout === "horizontal" ? "bottom-leading" : "leading-start", scale: scale }, hAsync("calcite-action", { icon: ICONS$f.menu, scale: scale, slot: SLOTS$s.trigger, text: intlMore || TEXT$t.more, textEnabled: expanded }), hAsync("slot", { name: SLOTS$r.menuActions }), this.renderTooltip())) : null;
+    return hasMenuItems ? (hAsync("calcite-action-menu", { expanded: expanded, flipPlacements: ["left", "right"], label: intlMore || TEXT$t.more, onCalciteActionMenuOpenChange: this.setMenuOpen, open: menuOpen, placement: layout === "horizontal" ? "bottom-leading" : "leading-start", scale: scale }, hAsync("calcite-action", { icon: ICONS$g.menu, scale: scale, slot: SLOTS$s.trigger, text: intlMore || TEXT$t.more, textEnabled: expanded }), hAsync("slot", { name: SLOTS$r.menuActions }), this.renderTooltip())) : null;
   }
   render() {
     return (hAsync(Fragment, null, hAsync("slot", null), this.renderMenu()));
@@ -8679,14 +8707,14 @@ class ActionMenu {
   }
   renderMenuButton() {
     const { label, scale, expanded } = this;
-    const menuButtonSlot = (hAsync("slot", { name: SLOTS$s.trigger, onSlotchange: this.setMenuButtonEl }, hAsync("calcite-action", { class: CSS$S.defaultTrigger, icon: ICONS$g.menu, ref: this.setDefaultMenuButtonEl, scale: scale, text: label, textEnabled: expanded })));
+    const menuButtonSlot = (hAsync("slot", { name: SLOTS$s.trigger, onSlotchange: this.setMenuButtonEl }, hAsync("calcite-action", { class: CSS$T.defaultTrigger, icon: ICONS$h.menu, ref: this.setDefaultMenuButtonEl, scale: scale, text: label, textEnabled: expanded })));
     return menuButtonSlot;
   }
   renderMenuItems() {
     const { actionElements, activeMenuItemIndex, open, menuId, menuButtonEl, label, placement, overlayPositioning, flipPlacements } = this;
     const activeAction = actionElements[activeMenuItemIndex];
     const activeDescendantId = (activeAction === null || activeAction === void 0 ? void 0 : activeAction.id) || null;
-    return (hAsync("calcite-popover", { disableFocusTrap: true, disablePointer: true, flipPlacements: flipPlacements, label: label, offsetDistance: 0, open: open, overlayPositioning: overlayPositioning, placement: placement, referenceElement: menuButtonEl }, hAsync("div", { "aria-activedescendant": activeDescendantId, "aria-labelledby": menuButtonEl === null || menuButtonEl === void 0 ? void 0 : menuButtonEl.id, class: CSS$S.menu, id: menuId, onClick: this.handleCalciteActionClick, role: "menu", tabIndex: -1 }, hAsync("slot", { onSlotchange: this.handleDefaultSlotChange }))));
+    return (hAsync("calcite-popover", { disableFocusTrap: true, disablePointer: true, flipPlacements: flipPlacements, label: label, offsetDistance: 0, open: open, overlayPositioning: overlayPositioning, placement: placement, referenceElement: menuButtonEl }, hAsync("div", { "aria-activedescendant": activeDescendantId, "aria-labelledby": menuButtonEl === null || menuButtonEl === void 0 ? void 0 : menuButtonEl.id, class: CSS$T.menu, id: menuId, onClick: this.handleCalciteActionClick, role: "menu", tabIndex: -1 }, hAsync("slot", { onSlotchange: this.handleDefaultSlotChange }))));
   }
   render() {
     return (hAsync(Fragment, null, this.renderMenuButton(), this.renderMenuItems(), hAsync("slot", { name: SLOTS$s.tooltip, onSlotchange: this.updateTooltip })));
@@ -8722,7 +8750,7 @@ class ActionMenu {
   }; }
 }
 
-const CSS$Q = {
+const CSS$R = {
   actionGroupBottom: "action-group--bottom",
   container: "container"
 };
@@ -8836,10 +8864,10 @@ class ActionPad {
     const expandLabel = intlExpand || TEXT$r.expand;
     const collapseLabel = intlCollapse || TEXT$r.collapse;
     const expandToggleNode = !expandDisabled ? (hAsync(ExpandToggle, { el: el, expanded: expanded, intlCollapse: collapseLabel, intlExpand: expandLabel, position: position, ref: this.setExpandToggleRef, scale: scale, toggle: toggleExpand, tooltip: tooltip })) : null;
-    return expandToggleNode ? (hAsync("calcite-action-group", { class: CSS$Q.actionGroupBottom, layout: layout, scale: scale }, hAsync("slot", { name: SLOTS$p.expandTooltip }), expandToggleNode)) : null;
+    return expandToggleNode ? (hAsync("calcite-action-group", { class: CSS$R.actionGroupBottom, layout: layout, scale: scale }, hAsync("slot", { name: SLOTS$p.expandTooltip }), expandToggleNode)) : null;
   }
   render() {
-    return (hAsync(Host, { onCalciteActionMenuOpenChange: this.actionMenuOpenChangeHandler }, hAsync("div", { class: CSS$Q.container }, hAsync("slot", null), this.renderBottomActionGroup())));
+    return (hAsync(Host, { onCalciteActionMenuOpenChange: this.actionMenuOpenChangeHandler }, hAsync("div", { class: CSS$R.container }, hAsync("slot", null), this.renderBottomActionGroup())));
   }
   get el() { return getElement(this); }
   static get watchers() { return {
@@ -8874,10 +8902,15 @@ const DURATIONS = {
   fast: 6000
 };
 const SLOTS$o = {
+  actionsEnd: "actions-end",
   title: "title",
   message: "message",
   link: "link"
 };
+const CSS$Q = {
+  actionsEnd: "actions-end",
+  container: "container"
+};
 
 var StatusIcons;
 (function (StatusIcons) {
@@ -9293,7 +9326,7 @@ class NumberStringFormat {
 }
 const numberStringFormatter = new NumberStringFormat();
 
-const alertCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-alert:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}/*!@.calcite-animate*/.calcite-animate.sc-calcite-alert{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-alert{animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-alert{animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-alert{animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-alert{animation-name:in-scale}@media (prefers-reduced-motion: reduce){/*!@:root*/.sc-calcite-alert:root{--calcite-internal-duration-factor:0.01}}/*!@:root*/.sc-calcite-alert:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-alert-h{display:none}/*!@: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:500;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-brand);outline-offset:-2px}/*!@: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;overflow-wrap:break-word;background-color:var(--calcite-ui-foreground-1);flex:1 1 auto;min-inline-size:0;padding-block:var(--calcite-alert-spacing-token-small);padding-inline:0 var(--calcite-alert-spacing-token-small);border-end-start-radius:var(--calcite-border-radius);border-end-end-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}/*!@.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)}/*!@.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-dismiss]) > .alert-queue-count*/[auto-dismiss].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}/*!@:host([color=blue]) .container*/[color=blue].sc-calcite-alert-h .container.sc-calcite-alert{border-block-start-color:var(--calcite-ui-info)}/*!@:host([color=blue]) .container .alert-icon*/[color=blue].sc-calcite-alert-h .container.sc-calcite-alert .alert-icon.sc-calcite-alert{color:var(--calcite-ui-info)}/*!@:host([color=red]) .container*/[color=red].sc-calcite-alert-h .container.sc-calcite-alert{border-block-start-color:var(--calcite-ui-danger)}/*!@:host([color=red]) .container .alert-icon*/[color=red].sc-calcite-alert-h .container.sc-calcite-alert .alert-icon.sc-calcite-alert{color:var(--calcite-ui-danger)}/*!@:host([color=yellow]) .container*/[color=yellow].sc-calcite-alert-h .container.sc-calcite-alert{border-block-start-color:var(--calcite-ui-warning)}/*!@:host([color=yellow]) .container .alert-icon*/[color=yellow].sc-calcite-alert-h .container.sc-calcite-alert .alert-icon.sc-calcite-alert{color:var(--calcite-ui-warning)}/*!@:host([color=green]) .container*/[color=green].sc-calcite-alert-h .container.sc-calcite-alert{border-block-start-color:var(--calcite-ui-success)}/*!@:host([color=green]) .container .alert-icon*/[color=green].sc-calcite-alert-h .container.sc-calcite-alert .alert-icon.sc-calcite-alert{color:var(--calcite-ui-success)}/*!@:host([auto-dismiss-duration=fast]) .alert-dismiss-progress:after*/[auto-dismiss-duration=fast].sc-calcite-alert-h .alert-dismiss-progress.sc-calcite-alert:after{animation:dismissProgress 6000ms ease-out}/*!@:host([auto-dismiss-duration=medium]) .alert-dismiss-progress:after*/[auto-dismiss-duration=medium].sc-calcite-alert-h .alert-dismiss-progress.sc-calcite-alert:after{animation:dismissProgress 10000ms ease-out}/*!@:host([auto-dismiss-duration=slow]) .alert-dismiss-progress:after*/[auto-dismiss-duration=slow].sc-calcite-alert-h .alert-dismiss-progress.sc-calcite-alert:after{animation:dismissProgress 14000ms ease-out}@keyframes dismissProgress{0%{inline-size:0px;opacity:0.75}100%{inline-size:100%;opacity:1}}";
+const alertCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-alert:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}/*!@.calcite-animate*/.calcite-animate.sc-calcite-alert{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-alert{animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-alert{animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-alert{animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-alert{animation-name:in-scale}@media (prefers-reduced-motion: reduce){/*!@:root*/.sc-calcite-alert:root{--calcite-internal-duration-factor:0.01}}/*!@:root*/.sc-calcite-alert:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-alert-h{display:none}/*!@: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:500;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}/*!@[hidden]*/[hidden].sc-calcite-alert{display: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-brand);outline-offset:-2px}/*!@: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;overflow-wrap:break-word;background-color:var(--calcite-ui-foreground-1);flex:1 1 auto;min-inline-size:0;padding-block:var(--calcite-alert-spacing-token-small);padding-inline:0 var(--calcite-alert-spacing-token-small);border-end-start-radius:var(--calcite-border-radius);border-end-end-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}/*!@.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)}/*!@.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-dismiss]) > .alert-queue-count*/[auto-dismiss].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([color=blue]) .container*/[color=blue].sc-calcite-alert-h .container.sc-calcite-alert{border-block-start-color:var(--calcite-ui-info)}/*!@:host([color=blue]) .container .alert-icon*/[color=blue].sc-calcite-alert-h .container.sc-calcite-alert .alert-icon.sc-calcite-alert{color:var(--calcite-ui-info)}/*!@:host([color=red]) .container*/[color=red].sc-calcite-alert-h .container.sc-calcite-alert{border-block-start-color:var(--calcite-ui-danger)}/*!@:host([color=red]) .container .alert-icon*/[color=red].sc-calcite-alert-h .container.sc-calcite-alert .alert-icon.sc-calcite-alert{color:var(--calcite-ui-danger)}/*!@:host([color=yellow]) .container*/[color=yellow].sc-calcite-alert-h .container.sc-calcite-alert{border-block-start-color:var(--calcite-ui-warning)}/*!@:host([color=yellow]) .container .alert-icon*/[color=yellow].sc-calcite-alert-h .container.sc-calcite-alert .alert-icon.sc-calcite-alert{color:var(--calcite-ui-warning)}/*!@:host([color=green]) .container*/[color=green].sc-calcite-alert-h .container.sc-calcite-alert{border-block-start-color:var(--calcite-ui-success)}/*!@:host([color=green]) .container .alert-icon*/[color=green].sc-calcite-alert-h .container.sc-calcite-alert .alert-icon.sc-calcite-alert{color:var(--calcite-ui-success)}/*!@:host([auto-dismiss-duration=fast]) .alert-dismiss-progress:after*/[auto-dismiss-duration=fast].sc-calcite-alert-h .alert-dismiss-progress.sc-calcite-alert:after{animation:dismissProgress 6000ms ease-out}/*!@:host([auto-dismiss-duration=medium]) .alert-dismiss-progress:after*/[auto-dismiss-duration=medium].sc-calcite-alert-h .alert-dismiss-progress.sc-calcite-alert:after{animation:dismissProgress 10000ms ease-out}/*!@:host([auto-dismiss-duration=slow]) .alert-dismiss-progress:after*/[auto-dismiss-duration=slow].sc-calcite-alert-h .alert-dismiss-progress.sc-calcite-alert:after{animation:dismissProgress 14000ms ease-out}@keyframes dismissProgress{0%{inline-size:0px;opacity:0.75}100%{inline-size:100%;opacity:1}}";
 
 /**
  * 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
@@ -9303,6 +9336,7 @@ const alertCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{
  * @slot title - A slot for optionally adding a title to the component.
  * @slot message - A slot for adding main text to the component.
  * @slot link - A slot for optionally adding an action to take from the alert (undo, try again, link to page, etc.)
+ * @slot actions-end - A slot for adding actions to the end of the component. It is recommended to use two or fewer actions.
  */
 class Alert {
   constructor(hostRef) {
@@ -9348,6 +9382,7 @@ class Alert {
     //
     //--------------------------------------------------------------------------
     this.effectiveLocale = "";
+    this.hasEndActions = false;
     /** the list of queued alerts */
     this.queue = [];
     /** the count of queued alerts */
@@ -9375,6 +9410,9 @@ class Alert {
       this.determineActiveAlert();
       this.calciteInternalAlertSync.emit({ queue: this.queue });
     };
+    this.actionsEndSlotChangeHandler = (event) => {
+      this.hasEndActions = slotChangeHasAssignedElement(event);
+    };
   }
   activeHandler(value) {
     this.open = value;
@@ -9427,6 +9465,7 @@ class Alert {
     disconnectLocalized(this);
   }
   render() {
+    const { hasEndActions } = this;
     const closeButton = (hAsync("button", { "aria-label": this.intlClose, class: "alert-close", onClick: this.closeAlert, ref: (el) => (this.closeButton = el), type: "button" }, hAsync("calcite-icon", { icon: "x", scale: this.scale === "l" ? "m" : "s" })));
     numberStringFormatter.numberFormatOptions = {
       locale: this.effectiveLocale,
@@ -9439,11 +9478,12 @@ class Alert {
     const { active, autoDismiss, label, placement, queued, requestedIcon } = this;
     const role = autoDismiss ? "alert" : "alertdialog";
     const hidden = !active;
+    const slotNode = (hAsync("slot", { key: "actionsEndSlot", name: SLOTS$o.actionsEnd, onSlotchange: this.actionsEndSlotChangeHandler }));
     return (hAsync(Host, { "aria-hidden": toAriaBoolean(hidden), "aria-label": label, "calcite-hydrated-hidden": hidden, role: role }, hAsync("div", { class: {
         container: true,
         queued,
         [placement]: true
-      }, ref: this.setTransitionEl }, requestedIcon ? (hAsync("div", { class: "alert-icon" }, hAsync("calcite-icon", { icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, hAsync("div", { class: "alert-content" }, hAsync("slot", { name: SLOTS$o.title }), hAsync("slot", { name: SLOTS$o.message }), hAsync("slot", { name: SLOTS$o.link })), queueCount, !autoDismiss ? closeButton : null, active && !queued && autoDismiss ? hAsync("div", { class: "alert-dismiss-progress" }) : null)));
+      }, ref: this.setTransitionEl }, requestedIcon ? (hAsync("div", { class: "alert-icon" }, hAsync("calcite-icon", { icon: requestedIcon, scale: this.scale === "l" ? "m" : "s" }))) : null, hAsync("div", { class: "alert-content" }, hAsync("slot", { name: SLOTS$o.title }), hAsync("slot", { name: SLOTS$o.message }), hAsync("slot", { name: SLOTS$o.link })), hAsync("div", { class: CSS$Q.actionsEnd, hidden: !hasEndActions }, slotNode), this.queueLength > 1 ? queueCount : null, !autoDismiss ? closeButton : null, active && !queued && autoDismiss ? hAsync("div", { class: "alert-dismiss-progress" }) : null)));
   }
   // when an alert is opened or closed, update queue and determine active alert
   alertSync(event) {
@@ -9538,6 +9578,7 @@ class Alert {
       "placement": [513],
       "scale": [513],
       "effectiveLocale": [32],
+      "hasEndActions": [32],
       "queue": [32],
       "queueLength": [32],
       "queued": [32],
@@ -9839,7 +9880,7 @@ const SLOTS$n = {
   control: "control",
   headerMenuActions: "header-menu-actions"
 };
-const ICONS$d = {
+const ICONS$e = {
   opened: "chevron-up",
   closed: "chevron-down",
   valid: "check-circle",
@@ -9966,7 +10007,7 @@ class Block {
   renderIcon() {
     const { el, status } = this;
     const showingLoadingStatus = this.loading && !this.open;
-    const statusIcon = showingLoadingStatus ? ICONS$d.refresh : ICONS$d[status];
+    const statusIcon = showingLoadingStatus ? ICONS$e.refresh : ICONS$e[status];
     const hasIcon = getSlotted(el, SLOTS$n.icon) || statusIcon;
     const iconEl = !statusIcon ? (hAsync("slot", { key: "icon-slot", name: SLOTS$n.icon })) : (hAsync("calcite-icon", { class: {
         [CSS$P.statusIcon]: true,
@@ -9986,7 +10027,7 @@ class Block {
     const headerContent = (hAsync("header", { class: CSS$P.header }, this.renderIcon(), this.renderTitle()));
     const hasControl = !!getSlotted(el, SLOTS$n.control);
     const hasMenuActions = !!getSlotted(el, SLOTS$n.headerMenuActions);
-    const collapseIcon = open ? ICONS$d.opened : ICONS$d.closed;
+    const collapseIcon = open ? ICONS$e.opened : ICONS$e.closed;
     const { guid } = this;
     const regionId = `${guid}-region`;
     const buttonId = `${guid}-button`;
@@ -10042,7 +10083,7 @@ const TEXT$o = {
   collapse: "Collapse",
   expand: "Expand"
 };
-const ICONS$c = {
+const ICONS$d = {
   menuOpen: "chevron-down",
   menuClosedLeft: "chevron-left",
   menuClosedRight: "chevron-right",
@@ -10097,7 +10138,7 @@ class BlockSection {
   renderStatusIcon() {
     var _a;
     const { status } = this;
-    const statusIcon = (_a = ICONS$c[status]) !== null && _a !== void 0 ? _a : false;
+    const statusIcon = (_a = ICONS$d[status]) !== null && _a !== void 0 ? _a : false;
     const statusIconClasses = {
       [CSS$O.statusIcon]: true,
       [CSS$O.valid]: status == "valid",
@@ -10109,10 +10150,10 @@ class BlockSection {
     const { el, intlCollapse, intlExpand, open, text, toggleDisplay } = this;
     const dir = getElementDir(el);
     const arrowIcon = open
-      ? ICONS$c.menuOpen
+      ? ICONS$d.menuOpen
       : dir === "rtl"
-        ? ICONS$c.menuClosedLeft
-        : ICONS$c.menuClosedRight;
+        ? ICONS$d.menuClosedLeft
+        : ICONS$d.menuClosedRight;
     const toggleLabel = open ? intlCollapse || TEXT$o.collapse : intlExpand || TEXT$o.expand;
     const { guid } = this;
     const regionId = `${guid}-region`;
@@ -11030,7 +11071,7 @@ const TEXT$l = {
 const SLOTS$l = {
   image: "image"
 };
-const ICONS$b = {
+const ICONS$c = {
   close: "x"
 };
 
@@ -11137,7 +11178,7 @@ class Chip {
   }
   render() {
     const iconEl = (hAsync("calcite-icon", { class: CSS$L.chipIcon, flipRtl: this.iconFlipRtl, icon: this.icon, scale: "s" }));
-    const closeButton = (hAsync("button", { "aria-describedby": this.guid, "aria-label": this.dismissLabel, class: CSS$L.close, onClick: this.closeClickHandler, ref: (el) => (this.closeButton = el) }, hAsync("calcite-icon", { class: CSS$L.closeIcon, icon: ICONS$b.close, scale: "s" })));
+    const closeButton = (hAsync("button", { "aria-describedby": this.guid, "aria-label": this.dismissLabel, class: CSS$L.close, onClick: this.closeClickHandler, ref: (el) => (this.closeButton = el) }, hAsync("calcite-icon", { class: CSS$L.closeIcon, icon: ICONS$c.close, scale: "s" })));
     return (hAsync("div", { class: "container" }, this.renderChipImage(), this.icon ? iconEl : null, hAsync("span", { class: CSS$L.title, id: this.guid }, hAsync("slot", null)), this.closable ? closeButton : null));
   }
   get el() { return getElement(this); }
@@ -16282,7 +16323,7 @@ function hasActiveChildren(node) {
   const items = nodeListToArray(node.querySelectorAll("calcite-combobox-item"));
   return items.filter((item) => item.selected).length > 0;
 }
-function getDepth(element) {
+function getDepth$1(element) {
   {
     return 0;
   }
@@ -17290,7 +17331,7 @@ class ComboboxItem {
       [CSS$H.active]: this.active,
       [CSS$H.single]: isSingleSelect
     };
-    const depth = getDepth();
+    const depth = getDepth$1();
     return (hAsync(Host, { "aria-hidden": "true" }, hAsync("div", { class: `container scale--${this.scale}`, style: { "--calcite-combobox-item-spacing-indent-multiplier": `${depth}` } }, hAsync("li", { class: classes, id: this.guid, onClick: this.itemClickHandler }, this.renderIcon(isSingleSelect), hAsync("span", { class: CSS$H.title }, this.textLabel)), this.renderChildren())));
   }
   get el() { return getElement(this); }
@@ -17353,7 +17394,7 @@ class ComboboxItemGroup {
   // --------------------------------------------------------------------------
   render() {
     const { el, scale } = this;
-    const indent = `${CSS$G.label}--indent-${getDepth()}`;
+    const indent = `${CSS$G.label}--indent-${getDepth$1()}`;
     return (hAsync("ul", { "aria-labelledby": this.guid, class: { [CSS$G.list]: true, [`scale--${scale}`]: true }, role: "group" }, hAsync("li", { class: { [CSS$G.label]: true, [indent]: true }, id: this.guid, role: "presentation" }, hAsync("span", { class: CSS$G.title }, this.label)), hAsync("slot", null)));
   }
   get el() { return getElement(this); }
@@ -19451,7 +19492,7 @@ class DropdownItem {
 const CSS$D = {
   button: "button"
 };
-const ICONS$a = {
+const ICONS$b = {
   plus: "plus"
 };
 
@@ -19482,7 +19523,7 @@ class Fab {
      *
      * @default "plus"
      */
-    this.icon = ICONS$a.plus;
+    this.icon = ICONS$b.plus;
     /**
      * When true, content is waiting to be loaded. This state shows a busy indicator.
      */
@@ -19563,7 +19604,7 @@ const TEXT$h = {
   filterLabel: "Filter",
   clear: "Clear filter"
 };
-const ICONS$9 = {
+const ICONS$a = {
   search: "search",
   close: "x"
 };
@@ -19674,7 +19715,7 @@ class Filter {
   // --------------------------------------------------------------------------
   render() {
     const { disabled, scale } = this;
-    return (hAsync(Fragment, null, hAsync("div", { class: CSS$C.container }, hAsync("label", null, hAsync("calcite-input", { "aria-label": this.intlLabel || TEXT$h.filterLabel, clearable: true, disabled: disabled, icon: ICONS$9.search, intlClear: this.intlClear || TEXT$h.clear, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, ref: (el) => {
+    return (hAsync(Fragment, null, hAsync("div", { class: CSS$C.container }, hAsync("label", null, hAsync("calcite-input", { "aria-label": this.intlLabel || TEXT$h.filterLabel, clearable: true, disabled: disabled, icon: ICONS$a.search, intlClear: this.intlClear || TEXT$h.clear, onCalciteInputInput: this.inputHandler, onKeyDown: this.keyDownHandler, placeholder: this.placeholder, ref: (el) => {
         this.textInput = el;
       }, scale: scale, type: "text", value: this.value })))));
   }
@@ -19832,7 +19873,7 @@ class Flow {
 const CSS$A = {
   backButton: "back-button"
 };
-const ICONS$8 = {
+const ICONS$9 = {
   backLeft: "chevron-left",
   backRight: "chevron-right"
 };
@@ -19866,7 +19907,7 @@ const CSS$z = {
   fabContainer: "fab-container",
   footer: "footer"
 };
-const ICONS$7 = {
+const ICONS$8 = {
   close: "x",
   menu: "ellipsis",
   backLeft: "chevron-left",
@@ -20015,7 +20056,7 @@ class FlowItem {
     const rtl = getElementDir(el) === "rtl";
     const { showBackButton, backButtonClick } = this;
     const label = this.getBackLabel();
-    const icon = rtl ? ICONS$8.backRight : ICONS$8.backLeft;
+    const icon = rtl ? ICONS$9.backRight : ICONS$9.backLeft;
     return showBackButton ? (hAsync("calcite-action", { "aria-label": label, class: CSS$A.backButton, icon: icon, key: "flow-back-button", onClick: backButtonClick, ref: this.setBackRef, scale: "s", slot: "header-actions-start", text: label })) : null;
   }
   render() {
@@ -20289,7 +20330,7 @@ const CSS$y = {
   handle: "handle",
   handleActivated: "handle--activated"
 };
-const ICONS$6 = {
+const ICONS$7 = {
   drag: "drag"
 };
 
@@ -20370,7 +20411,7 @@ class Handle {
     // Needs to be a span because of https://github.com/SortableJS/Sortable/issues/1486
     hAsync("span", { "aria-pressed": toAriaBoolean(this.activated), class: { [CSS$y.handle]: true, [CSS$y.handleActivated]: this.activated }, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown, ref: (el) => {
         this.handleButton = el;
-      }, role: "button", tabindex: "0", title: this.textTitle }, hAsync("calcite-icon", { icon: ICONS$6.drag, scale: "s" })));
+      }, role: "button", tabindex: "0", title: this.textTitle }, hAsync("calcite-icon", { icon: ICONS$7.drag, scale: "s" })));
   }
   get el() { return getElement(this); }
   static get style() { return handleCss; }
@@ -23907,11 +23948,75 @@ class Link {
 }
 
 const CSS$q = {
-  container: "container"
+  container: "container",
+  table: "table",
+  scrim: "scrim",
+  tableContainer: "table-container",
+  sticky: "sticky-pos"
+};
+const debounceTimeout = 100;
+
+const listItemGroupSelector = "calcite-list-item-group";
+const listItemSelector$1 = "calcite-list-item";
+function getListItemChildren(event) {
+  const assignedElements = event.target.assignedElements({ flatten: true });
+  const listItemGroupChildren = assignedElements.filter((el) => el === null || el === void 0 ? void 0 : el.matches(listItemGroupSelector))
+    .map((group) => Array.from(group.querySelectorAll(listItemSelector$1)))
+    .reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);
+  const listItemChildren = assignedElements.filter((el) => el === null || el === void 0 ? void 0 : el.matches(listItemSelector$1));
+  return [...listItemGroupChildren, ...listItemChildren];
+}
+function updateListItemChildren(listItemChildren) {
+  listItemChildren.forEach((listItem) => {
+    listItem.setPosition = listItemChildren.indexOf(listItem) + 1;
+    listItem.setSize = listItemChildren.length;
+  });
+}
+function getDepth(element, includeGroup = false) {
+  {
+    return 0;
+  }
+}
+
+const CSS$p = {
+  container: "container",
+  containerBorderSelected: "container--border-selected",
+  containerBorderUnselected: "container--border-unselected",
+  contentContainer: "content-container",
+  contentContainerSelectable: "content-container--selectable",
+  contentContainerHasCenterContent: "content-container--has-center-content",
+  nestedContainer: "nested-container",
+  nestedContainerHidden: "nested-container--hidden",
+  content: "content",
+  actionsStart: "actions-start",
+  contentStart: "content-start",
+  label: "label",
+  description: "description",
+  contentEnd: "content-end",
+  actionsEnd: "actions-end",
+  selectionContainer: "selection-container",
+  openContainer: "open-container"
+};
+const SLOTS$e = {
+  actionsStart: "actions-start",
+  contentStart: "content-start",
+  contentEnd: "content-end",
+  actionsEnd: "actions-end"
+};
+const MAX_COLUMNS = 5;
+const ICONS$6 = {
+  selectedMultiple: "check-circle-f",
+  selectedSingle: "circle-f",
+  unselected: "blank",
+  closedLTR: "caret-right",
+  closedRTL: "caret-left",
+  open: "caret-down",
+  blank: "blank"
 };
 
-const listCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-list:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}/*!@.calcite-animate*/.calcite-animate.sc-calcite-list{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-list{animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-list{animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-list{animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-list{animation-name:in-scale}@media (prefers-reduced-motion: reduce){/*!@:root*/.sc-calcite-list:root{--calcite-internal-duration-factor:0.01}}/*!@:root*/.sc-calcite-list:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-list-h{display:none}/*!@:host([disabled])*/[disabled].sc-calcite-list-h{pointer-events:none;cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host*/.sc-calcite-list-h{display:block}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-list-h[disabled] .sc-calcite-list-s>[calcite-hydrated][disabled],[disabled].sc-calcite-list-h [calcite-hydrated][disabled].sc-calcite-list{opacity:1}/*!@.container*/.container.sc-calcite-list{box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;background-color:transparent}/*!@.container **/.container.sc-calcite-list *.sc-calcite-list{box-sizing:border-box}/*!@::slotted(calcite-list-item)*/.sc-calcite-list-s>calcite-list-item{margin-block-end:1px;--tw-shadow:0 1px 0 var(--calcite-ui-border-3);--tw-shadow-colored:0 1px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}/*!@::slotted(calcite-list-item:last-child)*/.sc-calcite-list-s>calcite-list-item:last-child{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}";
+const listCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-list:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}/*!@.calcite-animate*/.calcite-animate.sc-calcite-list{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-list{animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-list{animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-list{animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-list{animation-name:in-scale}@media (prefers-reduced-motion: reduce){/*!@:root*/.sc-calcite-list:root{--calcite-internal-duration-factor:0.01}}/*!@:root*/.sc-calcite-list:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-list-h{display:none}/*!@:host([disabled])*/[disabled].sc-calcite-list-h{pointer-events:none;cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host*/.sc-calcite-list-h{display:block}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-list-h[disabled] .sc-calcite-list-s>[calcite-hydrated][disabled],[disabled].sc-calcite-list-h [calcite-hydrated][disabled].sc-calcite-list{opacity:1}/*!@.container*/.container.sc-calcite-list{position:relative}/*!@.table-container*/.table-container.sc-calcite-list{position:relative;z-index:1;box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;background-color:transparent}/*!@.table-container **/.table-container.sc-calcite-list *.sc-calcite-list{box-sizing:border-box}/*!@.table*/.table.sc-calcite-list{inline-size:100%}/*!@::slotted(calcite-list-item)*/.sc-calcite-list-s>calcite-list-item{margin-block-end:1px;--tw-shadow:0 1px 0 var(--calcite-ui-border-3);--tw-shadow-colored:0 1px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}/*!@::slotted(calcite-list-item:last-child)*/.sc-calcite-list-s>calcite-list-item:last-child{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}/*!@.sticky-pos*/.sticky-pos.sc-calcite-list{position:sticky;inset-block-start:0px;z-index:300}/*!@calcite-filter*/calcite-filter.sc-calcite-list{margin-block-end:1px}";
 
+const listItemSelector = "calcite-list-item";
 /**
  * A general purpose list that enables users to construct list items that conform to Calcite styling.
  *
@@ -23920,6 +24025,7 @@ const listCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0
 class List$1 {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.calciteListFilter = createEvent(this, "calciteListFilter", 6);
     // --------------------------------------------------------------------------
     //
     //  Properties
@@ -23929,21 +24035,240 @@ class List$1 {
      * When `true`, interaction is prevented and the component is displayed with lower opacity.
      */
     this.disabled = false;
+    /**
+     * When true, an input appears at the top of the list that can be used by end users to filter items in the list.
+     */
+    this.filterEnabled = false;
+    /**
+     * **read-only** The currently filtered items
+     *
+     * @readonly
+     */
+    this.filteredItems = [];
+    /**
+     * **read-only** The currently filtered items
+     *
+     * @readonly
+     */
+    this.filteredData = [];
+    /**
+     * When true, content is waiting to be loaded. This state shows a busy indicator.
+     */
+    this.loading = false;
+    /**
+     * One of the items within the list can be opened.
+     *
+     * @internal
+     */
+    this.openable = false;
+    /**
+     * **read-only** The currently selected items
+     *
+     * @readonly
+     */
+    this.selectedItems = [];
+    /**
+     * specify the selection mode - multiple (allow any number of (or no) selected items), single (allow and require one selected item), none (no selected items), defaults to single
+     */
+    this.selectionMode = "none";
+    /**
+     * specify the selection appearance - icon (displays a checkmark or dot), border (displays a border), defaults to icon
+     */
+    this.selectionAppearance = "icon";
+    this.listItems = [];
+    this.enabledListItems = [];
+    this.mutationObserver = createObserver();
+    this.dataForFilter = [];
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.handleDefaultSlotChange = (event) => {
+      updateListItemChildren(getListItemChildren(event));
+    };
+    this.setActiveListItem = () => {
+      const { enabledListItems } = this;
+      if (!enabledListItems.some((item) => item.active)) {
+        if (enabledListItems[0]) {
+          enabledListItems[0].active = true;
+        }
+      }
+    };
+    this.updateSelectedItems = debounce(() => {
+      this.selectedItems = this.enabledListItems.filter((item) => item.selected);
+    }, debounceTimeout);
+    this.updateFilteredItems = debounce(() => {
+      const { listItems, filteredData, filterText } = this;
+      const values = filteredData.map((item) => item.value);
+      const groups = new Set();
+      const filteredItems = (listItems === null || listItems === void 0 ? void 0 : listItems.filter((item) => {
+        const parent = item.parentElement;
+        const grouped = parent.matches("calcite-list-item-group");
+        if (grouped) {
+          groups.add(parent);
+        }
+        const matches = filterText ? values.includes(item.value) : true;
+        item.hidden = !matches;
+        return matches;
+      })) || [];
+      this.filteredItems = filteredItems;
+      groups.forEach((group) => {
+        const hasAtLeastOneMatch = filteredItems.some((item) => group.contains(item));
+        group.hidden = !hasAtLeastOneMatch;
+        if (!hasAtLeastOneMatch) {
+          return;
+        }
+        const parentItem = group.closest("calcite-list-item");
+        if (parentItem) {
+          parentItem.hidden = false;
+          if (filteredItems.includes(parentItem)) {
+            Array.from(group.querySelectorAll("calcite-list-item")).forEach((child) => (child.hidden = false));
+          }
+        }
+      });
+      groups.clear();
+    });
+    this.handleFilter = (event) => {
+      event.stopPropagation();
+      const { filteredItems, value } = event.currentTarget;
+      this.filteredData = filteredItems;
+      this.filterText = value;
+      this.updateFilteredItems();
+      this.calciteListFilter.emit();
+    };
+    this.getItemData = () => {
+      return this.listItems.map((item) => ({
+        label: item.label,
+        description: item.description,
+        metadata: item.metadata,
+        value: item.value
+      }));
+    };
+    this.updateListItems = debounce(() => {
+      const { selectionAppearance, selectionMode } = this;
+      const items = this.queryListItems();
+      items.forEach((item) => {
+        item.selectionAppearance = selectionAppearance;
+        item.selectionMode = selectionMode;
+      });
+      this.listItems = items;
+      this.enabledListItems = items.filter((item) => !item.disabled);
+      if (this.filterEnabled) {
+        this.dataForFilter = this.getItemData();
+      }
+      this.setActiveListItem();
+      this.updateSelectedItems();
+      this.updateFilteredItems();
+    }, debounceTimeout);
+    this.queryListItems = () => {
+      return Array.from(this.el.querySelectorAll(listItemSelector));
+    };
+    this.focusRow = (focusEl) => {
+      const { enabledListItems } = this;
+      if (!focusEl) {
+        return;
+      }
+      enabledListItems.forEach((listItem) => (listItem.active = listItem === focusEl));
+      focusEl.setFocus();
+    };
+    this.isNavigable = (listItem) => {
+      var _a;
+      const parentListItemEl = (_a = listItem.parentElement) === null || _a === void 0 ? void 0 : _a.closest(listItemSelector);
+      if (!parentListItemEl) {
+        return true;
+      }
+      return parentListItemEl.open && this.isNavigable(parentListItemEl);
+    };
+    this.handleListKeydown = (event) => {
+      const { key } = event;
+      const filteredItems = this.enabledListItems.filter((listItem) => this.isNavigable(listItem));
+      const currentIndex = filteredItems.findIndex((listItem) => listItem.active);
+      if (key === "ArrowDown") {
+        event.preventDefault();
+        const nextIndex = currentIndex + 1;
+        if (filteredItems[nextIndex]) {
+          this.focusRow(filteredItems[nextIndex]);
+        }
+      }
+      else if (key === "ArrowUp") {
+        event.preventDefault();
+        const prevIndex = currentIndex - 1;
+        if (filteredItems[prevIndex]) {
+          this.focusRow(filteredItems[prevIndex]);
+        }
+      }
+      else if (key === "Home") {
+        event.preventDefault();
+        const homeItem = filteredItems[0];
+        if (homeItem) {
+          this.focusRow(homeItem);
+        }
+      }
+      else if (key === "End") {
+        event.preventDefault();
+        const endItem = filteredItems[filteredItems.length - 1];
+        if (endItem) {
+          this.focusRow(endItem);
+        }
+      }
+    };
+  }
+  handleFilterEnabledChange() {
+    this.updateListItems();
+  }
+  handleSelectionAppearanceChange() {
+    this.updateListItems();
+  }
+  handleCalciteInternalFocusPreviousItem(event) {
+    event.stopPropagation();
+    const { enabledListItems } = this;
+    const currentIndex = enabledListItems.findIndex((listItem) => listItem.active);
+    const prevIndex = currentIndex - 1;
+    if (enabledListItems[prevIndex]) {
+      this.focusRow(enabledListItems[prevIndex]);
+    }
+  }
+  handleCalciteListItemSelect(event) {
+    const target = event.target;
+    const { listItems, selectionMode } = this;
+    listItems.forEach((listItem) => {
+      listItem.active = listItem === target;
+      if (selectionMode === "single") {
+        listItem.selected = listItem === target;
+      }
+    });
+    this.updateSelectedItems();
   }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+  connectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.observe(this.el, { childList: true, subtree: true });
+    this.updateListItems();
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+  }
   componentWillLoad() {
     setUpLoadableComponent(this);
   }
-  componentDidLoad() {
-    setComponentLoaded(this);
-  }
   componentDidRender() {
     updateHostInteraction(this);
   }
+  componentDidLoad() {
+    setComponentLoaded(this);
+    const { filterEl } = this;
+    const filteredItems = filterEl === null || filterEl === void 0 ? void 0 : filterEl.filteredItems;
+    if (filteredItems) {
+      this.filteredData = filteredItems;
+    }
+    this.updateFilteredItems();
+  }
   // --------------------------------------------------------------------------
   //
   //  Public Methods
@@ -23951,9 +24276,9 @@ class List$1 {
   // --------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
+    var _a;
     await componentLoaded(this);
-    const firstListItem = this.el.querySelector(`calcite-list-item:not([non-interactive])`);
-    firstListItem === null || firstListItem === void 0 ? void 0 : firstListItem.setFocus();
+    (_a = this.enabledListItems.find((listItem) => listItem.active)) === null || _a === void 0 ? void 0 : _a.setFocus();
   }
   // --------------------------------------------------------------------------
   //
@@ -23961,47 +24286,46 @@ class List$1 {
   //
   // --------------------------------------------------------------------------
   render() {
-    return (hAsync(Host, { role: "list" }, hAsync("div", { class: CSS$q.container }, hAsync("slot", null))));
+    const { loading, label, disabled, dataForFilter, filterEnabled, filterPlaceholder, filterText } = this;
+    return (hAsync("div", { class: CSS$q.container }, loading ? hAsync("calcite-scrim", { class: CSS$q.scrim, loading: loading }) : null, hAsync("table", { "aria-busy": toAriaBoolean(loading), "aria-label": label || "", class: CSS$q.table, onKeyDown: this.handleListKeydown, role: "treegrid" }, filterEnabled ? (hAsync("thead", null, hAsync("tr", { class: { [CSS$q.sticky]: true } }, hAsync("th", { colSpan: MAX_COLUMNS }, hAsync("calcite-filter", { "aria-label": filterPlaceholder, disabled: loading || disabled, items: dataForFilter, onCalciteFilterChange: this.handleFilter, placeholder: filterPlaceholder, ref: (el) => (this.filterEl = el), value: filterText }))))) : null, hAsync("tbody", { class: CSS$q.tableContainer }, hAsync("slot", { onSlotchange: this.handleDefaultSlotChange })))));
   }
   get el() { return getElement(this); }
+  static get watchers() { return {
+    "filterEnabled": ["handleFilterEnabledChange"],
+    "selectionMode": ["handleSelectionAppearanceChange"],
+    "selectionAppearance": ["handleSelectionAppearanceChange"]
+  }; }
   static get style() { return listCss; }
   static get cmpMeta() { return {
     "$flags$": 9,
     "$tagName$": "calcite-list",
     "$members$": {
       "disabled": [516],
+      "filterEnabled": [516, "filter-enabled"],
+      "filteredItems": [1040],
+      "filteredData": [1040],
+      "filterPlaceholder": [513, "filter-placeholder"],
+      "filterText": [1537, "filter-text"],
       "headingLevel": [514, "heading-level"],
+      "label": [1],
+      "loading": [516],
+      "openable": [4],
+      "selectedItems": [1040],
+      "selectionMode": [513, "selection-mode"],
+      "selectionAppearance": [513, "selection-appearance"],
+      "dataForFilter": [32],
       "setFocus": [64]
     },
-    "$listeners$": undefined,
+    "$listeners$": [[0, "calciteInternalFocusPreviousItem", "handleCalciteInternalFocusPreviousItem"], [0, "calciteInternalListItemSelect", "handleCalciteListItemSelect"]],
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": [["disabled", "disabled"], ["headingLevel", "heading-level"]]
+    "$attrsToReflect$": [["disabled", "disabled"], ["filterEnabled", "filter-enabled"], ["filterPlaceholder", "filter-placeholder"], ["filterText", "filter-text"], ["headingLevel", "heading-level"], ["loading", "loading"], ["selectionMode", "selection-mode"], ["selectionAppearance", "selection-appearance"]]
   }; }
 }
 
-const CSS$p = {
-  container: "container",
-  contentContainer: "content-container",
-  nestedContainer: "nested-container",
-  contentContainerButton: "content-container--button",
-  content: "content",
-  actionsStart: "actions-start",
-  contentStart: "content-start",
-  label: "label",
-  description: "description",
-  contentEnd: "content-end",
-  actionsEnd: "actions-end",
-  hasCenterContent: "has-center-content"
-};
-const SLOTS$e = {
-  actionsStart: "actions-start",
-  contentStart: "content-start",
-  contentEnd: "content-end",
-  actionsEnd: "actions-end"
-};
-
-const listItemCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-list-item:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}/*!@.calcite-animate*/.calcite-animate.sc-calcite-list-item{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-list-item{animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-list-item{animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-list-item{animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-list-item{animation-name:in-scale}@media (prefers-reduced-motion: reduce){/*!@:root*/.sc-calcite-list-item:root{--calcite-internal-duration-factor:0.01}}/*!@:root*/.sc-calcite-list-item:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-list-item-h{display:none}/*!@:host([disabled])*/[disabled].sc-calcite-list-item-h{pointer-events:none;cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host*/.sc-calcite-list-item-h{display:flex;flex-direction:column}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-list-item-h[disabled] .sc-calcite-list-item-s>[calcite-hydrated][disabled],[disabled].sc-calcite-list-item-h [calcite-hydrated][disabled].sc-calcite-list-item{opacity:1}/*!@.container*/.container.sc-calcite-list-item{box-sizing:border-box;display:flex;flex:1 1 0%;background-color:var(--calcite-ui-foreground-1);font-family:var(--calcite-sans-family)}/*!@.container **/.container.sc-calcite-list-item *.sc-calcite-list-item{box-sizing:border-box}/*!@.nested-container*/.nested-container.sc-calcite-list-item{display:flex;flex-direction:column;background-color:var(--calcite-ui-foreground-1)}/*!@.content-container*/.content-container.sc-calcite-list-item{display:flex;flex:1 1 auto;align-items:stretch;padding:0px;font-family:var(--calcite-sans-family);font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-2);outline-color:transparent}/*!@.content-container--button*/.content-container--button.sc-calcite-list-item{cursor:pointer;border-style:none;background-color:var(--calcite-ui-foreground-1);outline-color:transparent;text-align:initial}/*!@.content-container--button:hover*/.content-container--button.sc-calcite-list-item:hover{background-color:var(--calcite-ui-foreground-2)}/*!@.content-container--button:hover .label,\n.content-container--button:hover .description*/.content-container--button.sc-calcite-list-item:hover .label.sc-calcite-list-item,.content-container--button.sc-calcite-list-item:hover .description.sc-calcite-list-item{color:var(--calcite-ui-text-1)}/*!@.content-container--button:focus*/.content-container--button.sc-calcite-list-item:focus{outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}/*!@.content-container--button .content-start,\n.content-container--button .content-end*/.content-container--button.sc-calcite-list-item .content-start.sc-calcite-list-item,.content-container--button.sc-calcite-list-item .content-end.sc-calcite-list-item{pointer-events:none}/*!@.content*/.content.sc-calcite-list-item{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;padding-inline:0.75rem;padding-block:0.5rem;font-size:var(--calcite-font-size--2);line-height:1.375}/*!@.label,\n.description*/.label.sc-calcite-list-item,.description.sc-calcite-list-item{font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal);word-wrap:break-word;word-break:break-word}/*!@.label:only-child,\n.description:only-child*/.label.sc-calcite-list-item:only-child,.description.sc-calcite-list-item:only-child{margin:0px;padding-block:0.25rem}/*!@.label*/.label.sc-calcite-list-item{color:var(--calcite-ui-text-1)}/*!@.description*/.description.sc-calcite-list-item{margin-block-start:0.125rem;color:var(--calcite-ui-text-3)}/*!@.content-start*/.content-start.sc-calcite-list-item{justify-content:flex-start}/*!@.content-end*/.content-end.sc-calcite-list-item{justify-content:flex-end}/*!@.content-start,\n.content-end*/.content-start.sc-calcite-list-item,.content-end.sc-calcite-list-item{flex:1 1 auto}/*!@.has-center-content .content-start,\n.has-center-content .content-end*/.has-center-content.sc-calcite-list-item .content-start.sc-calcite-list-item,.has-center-content.sc-calcite-list-item .content-end.sc-calcite-list-item{flex:0 1 auto}/*!@.actions-start,\n.actions-end,\n.content-start,\n.content-end*/.actions-start.sc-calcite-list-item,.actions-end.sc-calcite-list-item,.content-start.sc-calcite-list-item,.content-end.sc-calcite-list-item{display:flex;align-items:center}/*!@.content-start ::slotted(calcite-icon),\n.content-end ::slotted(calcite-icon)*/.content-start .sc-calcite-list-item-s>calcite-icon,.content-end .sc-calcite-list-item-s>calcite-icon{margin-inline:0.75rem;align-self:center}/*!@.actions-start ::slotted(calcite-action),\n.actions-end ::slotted(calcite-action)*/.actions-start .sc-calcite-list-item-s>calcite-action,.actions-end .sc-calcite-list-item-s>calcite-action{align-self:stretch;color:inherit}/*!@::slotted(calcite-list-item-group),\n::slotted(calcite-list-item)*/.sc-calcite-list-item-s>calcite-list-item-group,.sc-calcite-list-item-s>calcite-list-item{padding-inline-start:0.5rem}";
+const listItemCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-list-item:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}/*!@.calcite-animate*/.calcite-animate.sc-calcite-list-item{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-list-item{animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-list-item{animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-list-item{animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-list-item{animation-name:in-scale}@media (prefers-reduced-motion: reduce){/*!@:root*/.sc-calcite-list-item:root{--calcite-internal-duration-factor:0.01}}/*!@:root*/.sc-calcite-list-item:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-list-item-h{display:none}/*!@:host([disabled])*/[disabled].sc-calcite-list-item-h{pointer-events:none;cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host*/.sc-calcite-list-item-h{display:flex;flex-direction:column;--calcite-list-item-icon-color:var(--calcite-ui-brand);--calcite-list-item-spacing-indent:1rem}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-list-item-h[disabled] .sc-calcite-list-item-s>[calcite-hydrated][disabled],[disabled].sc-calcite-list-item-h [calcite-hydrated][disabled].sc-calcite-list-item{opacity:1}/*!@.container*/.container.sc-calcite-list-item{box-sizing:border-box;display:flex;flex:1 1 0%;background-color:var(--calcite-ui-foreground-1);font-family:var(--calcite-sans-family);padding-inline-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier))}/*!@.container **/.container.sc-calcite-list-item *.sc-calcite-list-item{box-sizing:border-box}/*!@.container--border-selected*/.container--border-selected.sc-calcite-list-item{border-inline-start:4px solid var(--calcite-ui-brand)}/*!@.container--border-unselected*/.container--border-unselected.sc-calcite-list-item{border-inline-start:4px solid transparent}/*!@.nested-container*/.nested-container.sc-calcite-list-item{display:flex;flex-direction:column;background-color:var(--calcite-ui-foreground-1)}/*!@.nested-container--hidden*/.nested-container--hidden.sc-calcite-list-item{display:none}/*!@.content-container*/.content-container.sc-calcite-list-item{display:flex;flex:1 1 auto;align-items:stretch;padding:0px;font-family:var(--calcite-sans-family);font-weight:var(--calcite-font-weight-normal);color:var(--calcite-ui-text-2)}/*!@.content-container--selectable*/.content-container--selectable.sc-calcite-list-item{cursor:pointer}/*!@tr,\ntd*/tr.sc-calcite-list-item,td.sc-calcite-list-item{outline-color:transparent}/*!@tr:focus,\ntd:focus*/tr.sc-calcite-list-item:focus,td.sc-calcite-list-item:focus{z-index:300;outline:2px solid var(--calcite-ui-brand)}/*!@.content*/.content.sc-calcite-list-item{display:flex;flex:1 1 auto;flex-direction:column;justify-content:center;padding-inline:0.75rem;padding-block:0.5rem;font-size:var(--calcite-font-size--2);line-height:1.375}/*!@.label,\n.description*/.label.sc-calcite-list-item,.description.sc-calcite-list-item{font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal);word-wrap:break-word;word-break:break-word}/*!@.label:only-child,\n.description:only-child*/.label.sc-calcite-list-item:only-child,.description.sc-calcite-list-item:only-child{margin:0px;padding-block:0.25rem}/*!@.label*/.label.sc-calcite-list-item{color:var(--calcite-ui-text-1)}/*!@.description*/.description.sc-calcite-list-item{margin-block-start:0.125rem;color:var(--calcite-ui-text-3)}/*!@.content-start*/.content-start.sc-calcite-list-item{justify-content:flex-start}/*!@.content-end*/.content-end.sc-calcite-list-item{justify-content:flex-end}/*!@.content-start,\n.content-end*/.content-start.sc-calcite-list-item,.content-end.sc-calcite-list-item{flex:1 1 auto}/*!@.content-container--has-center-content .content-start,\n.content-container--has-center-content .content-end*/.content-container--has-center-content.sc-calcite-list-item .content-start.sc-calcite-list-item,.content-container--has-center-content.sc-calcite-list-item .content-end.sc-calcite-list-item{flex:0 1 auto}/*!@.selection-container*/.selection-container.sc-calcite-list-item{display:flex;padding-inline:0.75rem;color:var(--calcite-list-item-icon-color)}/*!@.actions-start,\n.actions-end,\n.content-start,\n.content-end,\n.selection-container,\n.open-container*/.actions-start.sc-calcite-list-item,.actions-end.sc-calcite-list-item,.content-start.sc-calcite-list-item,.content-end.sc-calcite-list-item,.selection-container.sc-calcite-list-item,.open-container.sc-calcite-list-item{display:flex;align-items:center}/*!@.open-container,\n.selection-container*/.open-container.sc-calcite-list-item,.selection-container.sc-calcite-list-item{cursor:pointer}/*!@.content-start ::slotted(calcite-icon),\n.content-end ::slotted(calcite-icon)*/.content-start .sc-calcite-list-item-s>calcite-icon,.content-end .sc-calcite-list-item-s>calcite-icon{margin-inline:0.75rem;align-self:center}/*!@.actions-start ::slotted(calcite-action),\n.actions-end ::slotted(calcite-action)*/.actions-start .sc-calcite-list-item-s>calcite-action,.actions-end .sc-calcite-list-item-s>calcite-action{align-self:stretch;color:inherit}/*!@::slotted(calcite-list-item)*/.sc-calcite-list-item-s>calcite-list-item{border-width:0px;border-block-start-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3)}/*!@[hidden]*/[hidden].sc-calcite-list-item{display:none}";
 
+const focusMap = new Map();
+const listSelector = "calcite-list";
 /**
  * @slot - A slot for adding `calcite-list-item` and `calcite-list-item-group` elements.
  * @slot actions-start - A slot for adding actionable `calcite-action` elements before the content of the component.
@@ -24012,25 +24336,208 @@ const listItemCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-do
 class ListItem {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.calciteListItemSelect = createEvent(this, "calciteListItemSelect", 6);
+    this.calciteInternalListItemSelect = createEvent(this, "calciteInternalListItemSelect", 6);
+    this.calciteInternalFocusPreviousItem = createEvent(this, "calciteInternalFocusPreviousItem", 6);
     // --------------------------------------------------------------------------
     //
     //  Properties
     //
     // --------------------------------------------------------------------------
     /**
-     * When `true`, prevents the content of the component from user interaction.
+     * Sets the item as focusable. Only one item should be focusable within a list.
+     *
+     * @internal
      */
-    this.nonInteractive = false;
+    this.active = false;
     /**
      * When `true`, interaction is prevented and the component is displayed with lower opacity.
      */
     this.disabled = false;
+    /**
+     * When `true`, prevents the content of the component from user interaction.
+     *
+     * @deprecated no longer necessary.
+     */
+    this.nonInteractive = false;
+    /**
+     * When true, item is open to show child components.
+     */
+    this.open = false;
+    /**
+     * Used to specify the aria-setsize attribute to define the number of items in the current set of list for accessibility.
+     *
+     * @internal
+     */
+    this.setSize = null;
+    /**
+     * Used to specify the aria-posinset attribute to define the number or position in the current set of list items for accessibility.
+     *
+     * @internal
+     */
+    this.setPosition = null;
+    /**
+     * When true, the component is selected.
+     */
+    this.selected = false;
+    /**
+     * specify the selection mode - multiple (allow any number of (or no) selected items), single (allow and require one selected item), none (no selected items), defaults to single
+     *
+     * @internal
+     */
+    this.selectionMode = null;
+    /**
+     * specify the selection appearance - icon (displays a checkmark or dot), border (displays a border), defaults to icon
+     *
+     * @internal
+     */
+    this.selectionAppearance = null;
+    this.level = null;
+    this.visualLevel = null;
+    this.openable = false;
+    this.hasActionsStart = false;
+    this.hasActionsEnd = false;
+    this.hasContentStart = false;
+    this.hasContentEnd = false;
+    // --------------------------------------------------------------------------
+    //
+    //  Private Methods
+    //
+    // --------------------------------------------------------------------------
+    this.handleActionsStartSlotChange = (event) => {
+      const elements = event.target.assignedElements({
+        flatten: true
+      });
+      this.hasActionsStart = !!elements.length;
+    };
+    this.handleActionsEndSlotChange = (event) => {
+      const elements = event.target.assignedElements({
+        flatten: true
+      });
+      this.hasActionsEnd = !!elements.length;
+    };
+    this.handleContentStartSlotChange = (event) => {
+      const elements = event.target.assignedElements({
+        flatten: true
+      });
+      this.hasContentStart = !!elements.length;
+    };
+    this.handleContentEndSlotChange = (event) => {
+      const elements = event.target.assignedElements({
+        flatten: true
+      });
+      this.hasContentEnd = !!elements.length;
+    };
+    this.handleDefaultSlotChange = (event) => {
+      const { parentListEl } = this;
+      const listItemChildren = getListItemChildren(event);
+      updateListItemChildren(listItemChildren);
+      const openable = !!listItemChildren.length;
+      if (openable && parentListEl && !parentListEl.openable) {
+        parentListEl.openable = true;
+      }
+      this.openable = openable;
+      if (!openable) {
+        this.open = false;
+      }
+    };
+    this.toggleOpen = () => {
+      this.open = !this.open;
+    };
+    this.toggleSelected = () => {
+      if (this.disabled) {
+        return;
+      }
+      if (this.selectionMode !== "none") {
+        this.selected = !this.selected;
+      }
+      this.calciteListItemSelect.emit();
+    };
+    this.handleItemKeyDown = (event) => {
+      const { key } = event;
+      const composedPath = event.composedPath();
+      const { containerEl, contentEl, actionsStartEl, actionsEndEl, open, openable } = this;
+      const cells = [actionsStartEl, contentEl, actionsEndEl].filter(Boolean);
+      const currentIndex = cells.findIndex((cell) => composedPath.includes(cell));
+      if (key === " ") {
+        event.preventDefault();
+        this.toggleSelected();
+      }
+      else if (key === "ArrowRight") {
+        event.preventDefault();
+        const nextIndex = currentIndex + 1;
+        if (currentIndex === -1) {
+          if (!open && openable) {
+            this.open = true;
+            this.focusCell(null);
+          }
+          else if (cells[0]) {
+            this.focusCell(cells[0]);
+          }
+        }
+        else if (cells[currentIndex] && cells[nextIndex]) {
+          this.focusCell(cells[nextIndex]);
+        }
+      }
+      else if (key === "ArrowLeft") {
+        event.preventDefault();
+        const prevIndex = currentIndex - 1;
+        if (currentIndex === -1) {
+          this.focusCell(null);
+          if (open && openable) {
+            this.open = false;
+          }
+          else {
+            this.calciteInternalFocusPreviousItem.emit();
+          }
+        }
+        else if (currentIndex === 0) {
+          this.focusCell(null);
+          containerEl.focus();
+        }
+        else if (cells[currentIndex] && cells[prevIndex]) {
+          this.focusCell(cells[prevIndex]);
+        }
+      }
+    };
+    this.focusCellNull = () => {
+      this.focusCell(null);
+    };
+    this.focusCell = (focusEl, saveFocusIndex = true) => {
+      const { contentEl, actionsStartEl, actionsEndEl, parentListEl } = this;
+      if (saveFocusIndex) {
+        focusMap.set(parentListEl, null);
+      }
+      [actionsStartEl, contentEl, actionsEndEl].filter(Boolean).forEach((tableCell, cellIndex) => {
+        const tabIndexAttr = "tabindex";
+        if (tableCell === focusEl) {
+          tableCell.setAttribute(tabIndexAttr, "0");
+          saveFocusIndex && focusMap.set(parentListEl, cellIndex);
+        }
+        else {
+          tableCell.removeAttribute(tabIndexAttr);
+        }
+      });
+      focusEl === null || focusEl === void 0 ? void 0 : focusEl.focus();
+    };
+  }
+  activeHandler(active) {
+    if (!active) {
+      this.focusCell(null, false);
+    }
+  }
+  handleSelectedChange(value) {
+    if (value) {
+      this.calciteInternalListItemSelect.emit();
+    }
+  }
+  connectedCallback() {
+    const { el } = this;
+    this.parentListEl = el.closest(listSelector);
+    this.level = getDepth() + 1;
+    this.visualLevel = getDepth(el, true);
+    this.setSelectionDefaults();
   }
-  //--------------------------------------------------------------------------
-  //
-  //  Lifecycle
-  //
-  //--------------------------------------------------------------------------
   componentWillLoad() {
     setUpLoadableComponent(this);
   }
@@ -24038,13 +24545,7 @@ class ListItem {
     setComponentLoaded(this);
   }
   componentDidRender() {
-    updateHostInteraction(this);
-  }
-  connectedCallback() {
-    connectConditionalSlotComponent(this);
-  }
-  disconnectedCallback() {
-    disconnectConditionalSlotComponent(this);
+    updateHostInteraction(this, "managed");
   }
   // --------------------------------------------------------------------------
   //
@@ -24053,72 +24554,143 @@ class ListItem {
   // --------------------------------------------------------------------------
   /** Sets focus on the component. */
   async setFocus() {
-    var _a;
     await componentLoaded(this);
-    (_a = this.focusEl) === null || _a === void 0 ? void 0 : _a.focus();
+    const { containerEl, contentEl, actionsStartEl, actionsEndEl, parentListEl } = this;
+    const focusIndex = focusMap.get(parentListEl);
+    if (typeof focusIndex === "number") {
+      const cells = [actionsStartEl, contentEl, actionsEndEl].filter(Boolean);
+      if (cells[focusIndex]) {
+        this.focusCell(cells[focusIndex]);
+      }
+      else {
+        containerEl === null || containerEl === void 0 ? void 0 : containerEl.focus();
+      }
+      return;
+    }
+    containerEl === null || containerEl === void 0 ? void 0 : containerEl.focus();
   }
   // --------------------------------------------------------------------------
   //
   //  Render Methods
   //
   // --------------------------------------------------------------------------
+  renderSelected() {
+    const { selected, selectionMode, selectionAppearance } = this;
+    if (selectionMode === "none" || selectionAppearance === "border") {
+      return null;
+    }
+    return (hAsync("td", { class: CSS$p.selectionContainer, key: "selection-container", onClick: this.toggleSelected }, hAsync("calcite-icon", { icon: selected
+        ? selectionMode === "multiple"
+          ? ICONS$6.selectedMultiple
+          : ICONS$6.selectedSingle
+        : ICONS$6.unselected, scale: "s" })));
+  }
+  renderOpen() {
+    const { el, open, openable, parentListEl } = this;
+    const dir = getElementDir(el);
+    return openable ? (hAsync("td", { class: CSS$p.openContainer, key: "open-container", onClick: this.toggleOpen }, hAsync("calcite-icon", { icon: open ? ICONS$6.open : dir === "rtl" ? ICONS$6.closedRTL : ICONS$6.closedLTR, scale: "s" }))) : (parentListEl === null || parentListEl === void 0 ? void 0 : parentListEl.openable) ? (hAsync("td", { class: CSS$p.openContainer, key: "open-container", onClick: this.toggleSelected }, hAsync("calcite-icon", { icon: ICONS$6.blank, scale: "s" }))) : null;
+  }
   renderActionsStart() {
-    const { el } = this;
-    return getSlotted(el, SLOTS$e.actionsStart) ? (hAsync("div", { class: CSS$p.actionsStart }, hAsync("slot", { name: SLOTS$e.actionsStart }))) : null;
+    const { label, hasActionsStart } = this;
+    return (hAsync("td", { "aria-label": label, class: CSS$p.actionsStart, hidden: !hasActionsStart, key: "actions-start-container", ref: (el) => (this.actionsStartEl = el), role: "gridcell" }, hAsync("slot", { name: SLOTS$e.actionsStart, onSlotchange: this.handleActionsStartSlotChange })));
   }
   renderActionsEnd() {
-    const { el } = this;
-    return getSlotted(el, SLOTS$e.actionsEnd) ? (hAsync("div", { class: CSS$p.actionsEnd }, hAsync("slot", { name: SLOTS$e.actionsEnd }))) : null;
+    const { label, hasActionsEnd } = this;
+    return (hAsync("td", { "aria-label": label, class: CSS$p.actionsEnd, hidden: !hasActionsEnd, key: "actions-end-container", ref: (el) => (this.actionsEndEl = el), role: "gridcell" }, hAsync("slot", { name: SLOTS$e.actionsEnd, onSlotchange: this.handleActionsEndSlotChange })));
   }
   renderContentStart() {
-    const { el } = this;
-    return getSlotted(el, SLOTS$e.contentStart) ? (hAsync("div", { class: CSS$p.contentStart }, hAsync("slot", { name: SLOTS$e.contentStart }))) : null;
+    const { hasContentStart } = this;
+    return (hAsync("div", { class: CSS$p.contentStart, hidden: !hasContentStart }, hAsync("slot", { name: SLOTS$e.contentStart, onSlotchange: this.handleContentStartSlotChange })));
   }
   renderContentEnd() {
-    const { el } = this;
-    return getSlotted(el, SLOTS$e.contentEnd) ? (hAsync("div", { class: CSS$p.contentEnd }, hAsync("slot", { name: SLOTS$e.contentEnd }))) : null;
+    const { hasContentEnd } = this;
+    return (hAsync("div", { class: CSS$p.contentEnd, hidden: !hasContentEnd }, hAsync("slot", { name: SLOTS$e.contentEnd, onSlotchange: this.handleContentEndSlotChange })));
   }
   renderContent() {
     const { label, description } = this;
-    return !!label || !!description ? (hAsync("div", { class: CSS$p.content }, label ? hAsync("div", { class: CSS$p.label }, label) : null, description ? hAsync("div", { class: CSS$p.description }, description) : null)) : null;
+    return !!label || !!description ? (hAsync("div", { class: CSS$p.content, key: "content" }, label ? (hAsync("div", { class: CSS$p.label, key: "label" }, label)) : null, description ? (hAsync("div", { class: CSS$p.description, key: "description" }, description)) : null)) : null;
   }
   renderContentContainer() {
-    const { description, disabled, label, nonInteractive } = this;
+    const { description, label, selectionMode } = this;
     const hasCenterContent = !!label || !!description;
     const content = [this.renderContentStart(), this.renderContent(), this.renderContentEnd()];
-    return !nonInteractive ? (hAsync("button", { class: {
+    return (hAsync("td", { "aria-label": label, class: {
         [CSS$p.contentContainer]: true,
-        [CSS$p.contentContainerButton]: true,
-        [CSS$p.hasCenterContent]: hasCenterContent
-      }, disabled: disabled, ref: (focusEl) => (this.focusEl = focusEl) }, content)) : (hAsync("div", { class: { [CSS$p.contentContainer]: true, [CSS$p.hasCenterContent]: hasCenterContent }, ref: () => (this.focusEl = null) }, content));
+        [CSS$p.contentContainerSelectable]: selectionMode !== "none",
+        [CSS$p.contentContainerHasCenterContent]: hasCenterContent
+      }, key: "content-container", onClick: this.toggleSelected, ref: (el) => (this.contentEl = el), role: "gridcell" }, content));
   }
   render() {
-    return (hAsync(Host, { role: "listitem" }, hAsync("div", { class: CSS$p.container }, this.renderActionsStart(), this.renderContentContainer(), this.renderActionsEnd()), hAsync("div", { class: CSS$p.nestedContainer }, hAsync("slot", null))));
+    const { openable, open, level, setPosition, setSize, active, label, selected, selectionAppearance, selectionMode } = this;
+    const showBorder = selectionMode !== "none" && selectionAppearance === "border";
+    const borderSelected = showBorder && selected;
+    const borderUnselected = showBorder && !selected;
+    return (hAsync(Host, null, hAsync("tr", { "aria-expanded": openable ? toAriaBoolean(open) : null, "aria-label": label, "aria-level": level, "aria-posinset": setPosition, "aria-selected": toAriaBoolean(selected), "aria-setsize": setSize, class: {
+        [CSS$p.container]: true,
+        [CSS$p.containerBorderSelected]: borderSelected,
+        [CSS$p.containerBorderUnselected]: borderUnselected
+      }, onFocus: this.focusCellNull, onKeyDown: this.handleItemKeyDown, ref: (el) => (this.containerEl = el), role: "row", style: { "--calcite-list-item-spacing-indent-multiplier": `${this.visualLevel}` }, tabIndex: active ? 0 : -1 }, this.renderSelected(), this.renderOpen(), this.renderActionsStart(), this.renderContentContainer(), this.renderActionsEnd()), hAsync("div", { class: {
+        [CSS$p.nestedContainer]: true,
+        [CSS$p.nestedContainerHidden]: openable && !open
+      } }, hAsync("slot", { onSlotchange: this.handleDefaultSlotChange }))));
+  }
+  setSelectionDefaults() {
+    const { parentListEl, selectionMode, selectionAppearance } = this;
+    if (!parentListEl) {
+      return;
+    }
+    if (!selectionMode) {
+      this.selectionMode = parentListEl.selectionMode;
+    }
+    if (!selectionAppearance) {
+      this.selectionAppearance = parentListEl.selectionAppearance;
+    }
   }
   get el() { return getElement(this); }
+  static get watchers() { return {
+    "active": ["activeHandler"],
+    "selected": ["handleSelectedChange"]
+  }; }
   static get style() { return listItemCss; }
   static get cmpMeta() { return {
     "$flags$": 9,
     "$tagName$": "calcite-list-item",
     "$members$": {
-      "nonInteractive": [516, "non-interactive"],
+      "active": [4],
       "description": [1],
       "disabled": [516],
       "label": [1],
+      "metadata": [16],
+      "nonInteractive": [516, "non-interactive"],
+      "open": [1540],
+      "setSize": [2, "set-size"],
+      "setPosition": [2, "set-position"],
+      "selected": [1540],
+      "value": [8],
+      "selectionMode": [1025, "selection-mode"],
+      "selectionAppearance": [1025, "selection-appearance"],
+      "level": [32],
+      "visualLevel": [32],
+      "parentListEl": [32],
+      "openable": [32],
+      "hasActionsStart": [32],
+      "hasActionsEnd": [32],
+      "hasContentStart": [32],
+      "hasContentEnd": [32],
       "setFocus": [64]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": [["nonInteractive", "non-interactive"], ["disabled", "disabled"]]
+    "$attrsToReflect$": [["disabled", "disabled"], ["nonInteractive", "non-interactive"], ["open", "open"], ["selected", "selected"]]
   }; }
 }
 
 const CSS$o = {
-  heading: "heading",
-  container: "container"
+  container: "container",
+  heading: "heading"
 };
 
-const listItemGroupCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-list-item-group:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}/*!@.calcite-animate*/.calcite-animate.sc-calcite-list-item-group{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-list-item-group{animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-list-item-group{animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-list-item-group{animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-list-item-group{animation-name:in-scale}@media (prefers-reduced-motion: reduce){/*!@:root*/.sc-calcite-list-item-group:root{--calcite-internal-duration-factor:0.01}}/*!@:root*/.sc-calcite-list-item-group:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-list-item-group-h{display:none}/*!@:host*/.sc-calcite-list-item-group-h{display:flex;flex-direction:column}/*!@.heading*/.heading.sc-calcite-list-item-group{margin:0px;display:flex;flex:1 1 0%;background-color:var(--calcite-ui-foreground-2);padding:0.75rem;font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--1);font-weight:var(--calcite-font-weight-bold);color:var(--calcite-ui-text-2)}/*!@.container*/.container.sc-calcite-list-item-group{display:flex;inline-size:100%;flex-direction:column;background-color:var(--calcite-ui-foreground-1)}/*!@::slotted(calcite-list-item-group)*/.sc-calcite-list-item-group-s>calcite-list-item-group{padding-inline-start:0.5rem}";
+const listItemGroupCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-list-item-group:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}/*!@.calcite-animate*/.calcite-animate.sc-calcite-list-item-group{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-list-item-group{animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-list-item-group{animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-list-item-group{animation-name:in-up}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-list-item-group{animation-name:in-scale}@media (prefers-reduced-motion: reduce){/*!@:root*/.sc-calcite-list-item-group:root{--calcite-internal-duration-factor:0.01}}/*!@:root*/.sc-calcite-list-item-group:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}/*!@:host([hidden])*/[hidden].sc-calcite-list-item-group-h{display:none}/*!@:host([disabled])*/[disabled].sc-calcite-list-item-group-h{pointer-events:none;cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host*/.sc-calcite-list-item-group-h{display:flex;flex-direction:column;background-color:var(--calcite-ui-foreground-1);--calcite-list-item-spacing-indent:1rem}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-list-item-group-h[disabled] .sc-calcite-list-item-group-s>[calcite-hydrated][disabled],[disabled].sc-calcite-list-item-group-h [calcite-hydrated][disabled].sc-calcite-list-item-group{opacity:1}/*!@.container*/.container.sc-calcite-list-item-group{margin:0px;display:flex;flex:1 1 0%;background-color:var(--calcite-ui-foreground-2);padding:0.75rem;font-family:var(--calcite-sans-family);font-size:var(--calcite-font-size--1);font-weight:var(--calcite-font-weight-bold);color:var(--calcite-ui-text-2)}/*!@.heading*/.heading.sc-calcite-list-item-group{padding-inline-start:calc(var(--calcite-list-item-spacing-indent) * var(--calcite-list-item-spacing-indent-multiplier))}/*!@::slotted(calcite-list-item)*/.sc-calcite-list-item-group-s>calcite-list-item{margin-block-end:1px;--tw-shadow:0 1px 0 var(--calcite-ui-border-3);--tw-shadow-colored:0 1px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}/*!@::slotted(calcite-list-item:last-child)*/.sc-calcite-list-item-group-s>calcite-list-item:last-child{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}";
 
 /**
  * @slot - A slot for adding `calcite-list-item` and `calcite-list-item-group` elements.
@@ -24126,6 +24698,28 @@ const listItemGroupCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes
 class ListItemGroup {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    // --------------------------------------------------------------------------
+    //
+    //  Properties
+    //
+    // --------------------------------------------------------------------------
+    /**
+     * When true, interaction is prevented and the component is displayed with lower opacity.
+     */
+    this.disabled = false;
+    this.visualLevel = null;
+  }
+  // --------------------------------------------------------------------------
+  //
+  //  Lifecycle
+  //
+  // --------------------------------------------------------------------------
+  connectedCallback() {
+    const { el } = this;
+    this.visualLevel = getDepth(el, true);
+  }
+  componentDidRender() {
+    updateHostInteraction(this);
   }
   // --------------------------------------------------------------------------
   //
@@ -24133,12 +24727,8 @@ class ListItemGroup {
   //
   // --------------------------------------------------------------------------
   render() {
-    var _a;
-    const { el, heading, headingLevel } = this;
-    const parentLevel = (_a = el.closest("calcite-list, calcite-list-item-group")) === null || _a === void 0 ? void 0 : _a.headingLevel;
-    const relativeLevel = parentLevel ? constrainHeadingLevel(parentLevel + 1) : null;
-    const level = headingLevel || relativeLevel;
-    return (hAsync(Host, null, heading ? (hAsync(Heading, { class: CSS$o.heading, level: level }, heading)) : null, hAsync("div", { class: CSS$o.container, role: "group" }, hAsync("slot", null))));
+    const { heading, visualLevel } = this;
+    return (hAsync(Host, null, hAsync("tr", { class: CSS$o.container, style: { "--calcite-list-item-spacing-indent-multiplier": `${visualLevel}` } }, hAsync("td", { class: CSS$o.heading, colSpan: MAX_COLUMNS }, heading)), hAsync("slot", null)));
   }
   get el() { return getElement(this); }
   static get style() { return listItemGroupCss; }
@@ -24146,12 +24736,14 @@ class ListItemGroup {
     "$flags$": 9,
     "$tagName$": "calcite-list-item-group",
     "$members$": {
+      "disabled": [516],
       "heading": [513],
-      "headingLevel": [514, "heading-level"]
+      "headingLevel": [514, "heading-level"],
+      "visualLevel": [32]
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": [["heading", "heading"], ["headingLevel", "heading-level"]]
+    "$attrsToReflect$": [["disabled", "disabled"], ["heading", "heading"], ["headingLevel", "heading-level"]]
   }; }
 }
 
@@ -26676,7 +27268,7 @@ class Panel {
     const rtl = getElementDir(el) === "rtl";
     const { showBackButton, intlBack, backButtonClick } = this;
     const label = intlBack || TEXT$f.back;
-    const icon = rtl ? ICONS$7.backRight : ICONS$7.backLeft;
+    const icon = rtl ? ICONS$8.backRight : ICONS$8.backLeft;
     return showBackButton ? (hAsync("calcite-action", { "aria-label": label, class: CSS$z.backButton, icon: icon, key: "back-button", onClick: backButtonClick, ref: this.setBackRef, scale: "s", slot: SLOTS$i.headerActionsStart, text: label })) : null;
   }
   renderHeaderContent() {
@@ -26698,14 +27290,14 @@ class Panel {
   renderHeaderActionsEnd() {
     const { close, hasEndActions, intlClose, closable } = this;
     const text = intlClose || TEXT$f.close;
-    const closableNode = closable ? (hAsync("calcite-action", { "aria-label": text, icon: ICONS$7.close, onClick: close, ref: this.setCloseRef, text: text })) : null;
+    const closableNode = closable ? (hAsync("calcite-action", { "aria-label": text, icon: ICONS$8.close, onClick: close, ref: this.setCloseRef, text: text })) : null;
     const slotNode = (hAsync("slot", { name: SLOTS$i.headerActionsEnd, onSlotchange: this.handleHeaderActionsEndSlotChange }));
     const showContainer = hasEndActions || closableNode;
     return (hAsync("div", { class: { [CSS$z.headerActionsEnd]: true, [CSS$z.headerActions]: true }, hidden: !showContainer, key: "header-actions-end" }, slotNode, closableNode));
   }
   renderMenu() {
     const { hasMenuItems, intlOptions, menuOpen } = this;
-    return (hAsync("calcite-action-menu", { flipPlacements: ["top", "bottom"], hidden: !hasMenuItems, key: "menu", label: intlOptions || TEXT$f.options, open: menuOpen, placement: "bottom-end" }, hAsync("calcite-action", { icon: ICONS$7.menu, slot: SLOTS$s.trigger, text: intlOptions || TEXT$f.options }), hAsync("slot", { name: SLOTS$i.headerMenuActions, onSlotchange: this.handleHeaderMenuActionsSlotChange })));
+    return (hAsync("calcite-action-menu", { flipPlacements: ["top", "bottom"], hidden: !hasMenuItems, key: "menu", label: intlOptions || TEXT$f.options, open: menuOpen, placement: "bottom-end" }, hAsync("calcite-action", { icon: ICONS$8.menu, slot: SLOTS$s.trigger, text: intlOptions || TEXT$f.options }), hAsync("slot", { name: SLOTS$i.headerMenuActions, onSlotchange: this.handleHeaderMenuActionsSlotChange })));
   }
   renderHeaderNode() {
     const { showBackButton, hasHeaderContent, hasStartActions, hasEndActions, closable, hasMenuItems } = this;