@esri/calcite-components 1.0.0-beta.94 → 1.0.0-beta.96

package/dist/cjs/calcite-tooltip_2.cjs.entry.js

@@ -1,18 +1,18 @@
 /*!
  * 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-beta.94
+ * v1.0.0-beta.96
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1dbd01a1.js');
-const guid = require('./guid-938d9fa3.js');
-const floatingUi = require('./floating-ui-12d7babb.js');
-const dom = require('./dom-72e6c4dd.js');
-const debounce = require('./debounce-d6bda11c.js');
-require('./resources-ed85e818.js');
+const index = require('./index-89b75f9d.js');
+const guid = require('./guid-ba414ece.js');
+const floatingUi = require('./floating-ui-84635bb5.js');
+const dom = require('./dom-fdaf919a.js');
+require('./debounce-1ad9c9c5.js');
+require('./resources-e0dc19ba.js');
 
 const CSS = {
   container: "container",
@@ -57,10 +57,14 @@ class TooltipManager$1 {
       this.hoverEvent(event, false);
     };
     this.clickHandler = (event) => {
+      if (!dom.isPrimaryPointerButton(event)) {
+        return;
+      }
       const clickedTooltip = this.queryTooltip(event.composedPath());
       this.clickedTooltip = clickedTooltip;
       if (clickedTooltip === null || clickedTooltip === void 0 ? void 0 : clickedTooltip.closeOnClick) {
         this.toggleTooltip(clickedTooltip, false);
+        this.clearHoverTimeout(clickedTooltip);
       }
     };
     this.focusShow = (event) => {
@@ -100,16 +104,16 @@ class TooltipManager$1 {
   }
   addListeners() {
     document.addEventListener("keydown", this.keyDownHandler);
-    document.addEventListener("mouseover", this.mouseEnterShow, { capture: true });
-    document.addEventListener("mouseout", this.mouseLeaveHide, { capture: true });
+    document.addEventListener("pointerover", this.mouseEnterShow, { capture: true });
+    document.addEventListener("pointerout", this.mouseLeaveHide, { capture: true });
     document.addEventListener("pointerdown", this.clickHandler, { capture: true });
     document.addEventListener("focusin", this.focusShow, { capture: true });
     document.addEventListener("focusout", this.blurHide, { capture: true });
   }
   removeListeners() {
     document.removeEventListener("keydown", this.keyDownHandler);
-    document.removeEventListener("mouseover", this.mouseEnterShow, { capture: true });
-    document.removeEventListener("mouseout", this.mouseLeaveHide, { capture: true });
+    document.removeEventListener("pointerover", this.mouseEnterShow, { capture: true });
+    document.removeEventListener("pointerout", this.mouseLeaveHide, { capture: true });
     document.removeEventListener("pointerdown", this.clickHandler, { capture: true });
     document.removeEventListener("focusin", this.focusShow, { capture: true });
     document.removeEventListener("focusout", this.blurHide, { capture: true });
@@ -152,10 +156,10 @@ class TooltipManager$1 {
     if (!activeTooltipEl) {
       return;
     }
-    if (type === "mouseover" && event.composedPath().includes(activeTooltipEl)) {
+    if (type === "pointerover" && event.composedPath().includes(activeTooltipEl)) {
       this.clearHoverTimeout(activeTooltipEl);
     }
-    else if (type === "mouseout" && !hoverTimeouts.has(activeTooltipEl)) {
+    else if (type === "pointerout" && !hoverTimeouts.has(activeTooltipEl)) {
       this.hoverTooltip(activeTooltipEl, false);
     }
   }
@@ -177,7 +181,7 @@ class TooltipManager$1 {
   }
 }
 
-const tooltipCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}: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{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:block;position:absolute;z-index:999;-webkit-transform:scale(0);transform:scale(0)}.calcite-floating-ui-anim{position:relative;-webkit-transition:var(--calcite-floating-ui-transition);transition:var(--calcite-floating-ui-transition);visibility:hidden;-webkit-transition-property:visibility, opacity, -webkit-transform;transition-property:visibility, opacity, -webkit-transform;transition-property:transform, visibility, opacity;transition-property:transform, visibility, opacity, -webkit-transform;opacity:0;-webkit-box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:1;border-radius:0.25rem}:host([data-placement^=bottom]) .calcite-floating-ui-anim{-webkit-transform:translateY(-5px);transform:translateY(-5px)}:host([data-placement^=top]) .calcite-floating-ui-anim{-webkit-transform:translateY(5px);transform:translateY(5px)}:host([data-placement^=left]) .calcite-floating-ui-anim{-webkit-transform:translateX(5px);transform:translateX(5px)}:host([data-placement^=right]) .calcite-floating-ui-anim{-webkit-transform:translateX(-5px);transform:translateX(-5px)}:host([data-placement]) .calcite-floating-ui-anim--active{opacity:1;visibility:visible;-webkit-transform:translate(0);transform:translate(0)}:host([calcite-hydrated-hidden]){visibility:hidden !important;pointer-events:none}.arrow,.arrow::before{position:absolute;inline-size:8px;block-size:8px;z-index:-1}.arrow::before{content:\"\";--tw-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);-webkit-transform:rotate(45deg);transform:rotate(45deg);background:var(--calcite-ui-foreground-1)}:host([data-placement^=top]) .arrow{inset-block-end:-4px}:host([data-placement^=bottom]) .arrow{inset-block-start:-4px}:host([data-placement^=left]) .arrow{direction:ltr;inset-inline-end:-4px}:host([data-placement^=right]) .arrow{direction:ltr;inset-inline-start:-4px}.container{position:relative;overflow:hidden;border-radius:0.25rem;background-color:var(--calcite-ui-foreground-1);padding-block:0.75rem;padding-inline:1rem;font-size:var(--calcite-font-size--2);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);max-inline-size:20rem;max-block-size:20rem;text-align:start}.calcite-floating-ui-anim{border-radius:0.25rem;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);background-color:var(--calcite-ui-foreground-1)}.arrow::before{outline:1px solid var(--calcite-ui-border-3)}";
+const tooltipCss = "@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{--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{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:block;position:absolute;z-index:999}.calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);visibility:hidden;transition-property:transform, visibility, opacity;opacity:0;box-shadow:0 0 16px 0 rgba(0, 0, 0, 0.16);z-index:1;border-radius:0.25rem}:host([data-placement^=bottom]) .calcite-floating-ui-anim{transform:translateY(-5px)}:host([data-placement^=top]) .calcite-floating-ui-anim{transform:translateY(5px)}:host([data-placement^=left]) .calcite-floating-ui-anim{transform:translateX(5px)}:host([data-placement^=right]) .calcite-floating-ui-anim{transform:translateX(-5px)}:host([data-placement]) .calcite-floating-ui-anim--active{opacity:1;visibility:visible;transform:translate(0)}:host([calcite-hydrated-hidden]){visibility:hidden !important;pointer-events:none}.arrow,.arrow::before{position:absolute;inline-size:8px;block-size:8px;z-index:-1}.arrow::before{content:\"\";--tw-shadow:0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);--tw-shadow-colored:0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);transform:rotate(45deg);background:var(--calcite-ui-foreground-1)}:host([data-placement^=top]) .arrow{inset-block-end:-4px}:host([data-placement^=bottom]) .arrow{inset-block-start:-4px}:host([data-placement^=left]) .arrow{direction:ltr;inset-inline-end:-4px}:host([data-placement^=right]) .arrow{direction:ltr;inset-inline-start:-4px}.container{position:relative;overflow:hidden;border-radius:0.25rem;background-color:var(--calcite-ui-foreground-1);padding-block:0.75rem;padding-inline:1rem;font-size:var(--calcite-font-size--2);line-height:1.375;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1);max-inline-size:20rem;max-block-size:20rem;text-align:start}.calcite-floating-ui-anim{border-radius:0.25rem;border-width:1px;border-style:solid;border-color:var(--calcite-ui-border-3);background-color:var(--calcite-ui-foreground-1)}.arrow::before{outline:1px solid var(--calcite-ui-border-3)}";
 
 const manager = new TooltipManager$1();
 const Tooltip = class {
@@ -201,13 +205,15 @@ const Tooltip = class {
      */
     this.offsetSkidding = 0;
     /**
-     * When true, the component is open.
+     * When `true`, the component is open.
      */
     this.open = false;
     /**
      * Determines the type of positioning to use for the overlaid content.
      *
-     * Using the "absolute" value will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. The "fixed" value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is "fixed".
+     * Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
+     *
+     * The `"fixed"` value should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
      *
      */
     this.overlayPositioning = "absolute";
@@ -224,7 +230,6 @@ const Tooltip = class {
     //  Private Methods
     //
     // --------------------------------------------------------------------------
-    this.debouncedReposition = debounce.debounce(() => this.reposition(), floatingUi.repositionDebounceTimeout);
     this.setUpReferenceElement = (warn = true) => {
       this.removeReferences();
       this.effectiveReferenceElement = this.getReferenceElement();
@@ -263,19 +268,24 @@ const Tooltip = class {
     };
   }
   offsetDistanceOffsetHandler() {
-    this.debouncedReposition();
+    this.reposition(true);
   }
   offsetSkiddingHandler() {
-    this.debouncedReposition();
+    this.reposition(true);
   }
-  openHandler() {
-    this.debouncedReposition();
+  openHandler(value) {
+    if (value) {
+      this.reposition(true);
+    }
+    else {
+      floatingUi.updateAfterClose(this.el);
+    }
   }
   overlayPositioningHandler() {
-    this.debouncedReposition();
+    this.reposition(true);
   }
   placementHandler() {
-    this.debouncedReposition();
+    this.reposition(true);
   }
   referenceElementHandler() {
     this.setUpReferenceElement();
@@ -292,7 +302,7 @@ const Tooltip = class {
     if (this.referenceElement && !this.effectiveReferenceElement) {
       this.setUpReferenceElement();
     }
-    this.debouncedReposition();
+    this.reposition(true);
     this.hasLoaded = true;
   }
   disconnectedCallback() {
@@ -304,19 +314,24 @@ const Tooltip = class {
   //  Public Methods
   //
   // --------------------------------------------------------------------------
-  /** Updates the position of the component. */
-  async reposition() {
+  /**
+   * Updates the position of the component.
+   *
+   * @param delayed
+   */
+  async reposition(delayed = false) {
     const { el, effectiveReferenceElement, placement, overlayPositioning, offsetDistance, offsetSkidding, arrowEl } = this;
-    return floatingUi.positionFloatingUI({
+    return floatingUi.reposition(this, {
       floatingEl: el,
       referenceEl: effectiveReferenceElement,
       overlayPositioning,
       placement,
       offsetDistance,
       offsetSkidding,
+      includeArrow: true,
       arrowEl,
       type: "tooltip"
-    });
+    }, delayed);
   }
   getReferenceElement() {
     const { referenceElement, el } = this;
@@ -350,7 +365,7 @@ const Tooltip = class {
 };
 Tooltip.style = tooltipCss;
 
-const tooltipManagerCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}: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{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{position:relative;display:block}";
+const tooltipManagerCss = "@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{--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{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{position:relative;display:block}";
 
 const TooltipManager = class {
   constructor(hostRef) {

package/dist/cjs/calcite-tree_2.cjs.entry.js

@@ -1,18 +1,19 @@
 /*!
  * 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-beta.94
+ * v1.0.0-beta.96
  */
 'use strict';
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-1dbd01a1.js');
-const dom = require('./dom-72e6c4dd.js');
-const resources = require('./resources-ed85e818.js');
-const conditionalSlot = require('./conditionalSlot-6019633f.js');
-require('./guid-938d9fa3.js');
-require('./observers-b128b31a.js');
+const index = require('./index-89b75f9d.js');
+const dom = require('./dom-fdaf919a.js');
+const resources = require('./resources-e0dc19ba.js');
+const conditionalSlot = require('./conditionalSlot-99e51afe.js');
+const interactive = require('./interactive-9891c7ff.js');
+require('./guid-ba414ece.js');
+require('./observers-b15136c8.js');
 
 var TreeSelectionMode;
 (function (TreeSelectionMode) {
@@ -24,7 +25,24 @@ var TreeSelectionMode;
   TreeSelectionMode["Ancestors"] = "ancestors";
 })(TreeSelectionMode || (TreeSelectionMode = {}));
 
-const treeCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}: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{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:block}:host(:focus){outline:2px solid transparent;outline-offset:2px}";
+function isTreeItem(element) {
+  return element === null || element === void 0 ? void 0 : element.matches("calcite-tree-item");
+}
+function getEnabledSiblingItem(el, direction) {
+  const directionProp = direction === "down" ? "nextElementSibling" : "previousElementSibling";
+  let currentEl = el;
+  let enabledEl = null;
+  while (isTreeItem(currentEl)) {
+    if (!currentEl.disabled) {
+      enabledEl = currentEl;
+      break;
+    }
+    currentEl = currentEl[directionProp];
+  }
+  return enabledEl;
+}
+
+const treeCss = "@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{--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{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:block}:host(:focus){outline:2px solid transparent;outline-offset:2px}";
 
 const Tree = class {
   constructor(hostRef) {
@@ -40,7 +58,7 @@ const Tree = class {
     /**
      * Display input
      *
-     * @deprecated Use "ancestors" selection-mode for checkbox input.
+     * @deprecated Use `selectionMode="ancestors"` for checkbox input.
      */
     this.inputEnabled = false;
     /** Specifies the size of the component. */
@@ -59,7 +77,8 @@ const Tree = class {
   //
   //--------------------------------------------------------------------------
   componentWillRender() {
-    const parent = this.el.parentElement.closest("calcite-tree");
+    var _a;
+    const parent = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.closest("calcite-tree");
     this.lines = parent ? parent.lines : this.lines;
     this.scale = parent ? parent.scale : this.scale;
     this.selectionMode = parent ? parent.selectionMode : this.selectionMode;
@@ -78,8 +97,7 @@ const Tree = class {
   //--------------------------------------------------------------------------
   onFocus() {
     if (!this.child) {
-      const focusTarget = this.el.querySelector("calcite-tree-item[selected]") ||
-        this.el.querySelector("calcite-tree-item");
+      const focusTarget = this.el.querySelector("calcite-tree-item[selected]:not([disabled])") || this.el.querySelector("calcite-tree-item:not([disabled])");
       dom.focusElement(focusTarget);
     }
   }
@@ -157,12 +175,16 @@ const Tree = class {
       if ((shouldModifyToCurrentSelection && target.selected) ||
         (shouldSelectChildren && event.detail.forceToggle)) {
         targetItems.forEach((treeItem) => {
-          treeItem.selected = false;
+          if (!treeItem.disabled) {
+            treeItem.selected = false;
+          }
         });
       }
       else if (!isNoneSelectionMode) {
         targetItems.forEach((treeItem) => {
-          treeItem.selected = true;
+          if (!treeItem.disabled) {
+            treeItem.selected = true;
+          }
         });
       }
     }
@@ -176,88 +198,107 @@ const Tree = class {
     var _a;
     const root = this.el.closest("calcite-tree:not([child])");
     const target = event.target;
-    if (root === this.el && target.tagName === "CALCITE-TREE-ITEM" && this.el.contains(target)) {
-      switch (event.key) {
-        case "ArrowDown":
-          const next = target.nextElementSibling;
-          if (next && next.matches("calcite-tree-item")) {
-            next.focus();
-            event.preventDefault();
-          }
-          break;
-        case "ArrowLeft":
-          // When focus is on an open node, closes the node.
-          if (target.hasChildren && target.expanded) {
-            target.expanded = false;
-            event.preventDefault();
-            break;
-          }
-          // When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.
-          const parentItem = target.parentElement.closest("calcite-tree-item");
-          if (parentItem && (!target.hasChildren || target.expanded === false)) {
-            parentItem.focus();
-            event.preventDefault();
-            break;
-          }
-          // When focus is on a root node that is also either an end node or a closed node, does nothing.
-          break;
-        case "ArrowRight":
-          if (!target.hasChildren) {
-            break;
-          }
-          if (target.expanded && dom.getRootNode(this.el).activeElement === target) {
-            // When focus is on an open node, moves focus to the first child node.
-            (_a = target.querySelector("calcite-tree-item")) === null || _a === void 0 ? void 0 : _a.focus();
-            event.preventDefault();
-          }
-          else {
-            // When focus is on a closed node, opens the node; focus does not move.
-            target.expanded = true;
-            event.preventDefault();
-          }
-          // When focus is on an end node, does nothing.
-          break;
-        case "ArrowUp":
-          const previous = target.previousElementSibling;
-          if (previous && previous.matches("calcite-tree-item")) {
-            previous.focus();
-            event.preventDefault();
-          }
-          break;
+    if (!(root === this.el && target.tagName === "CALCITE-TREE-ITEM" && this.el.contains(target))) {
+      return;
+    }
+    if (event.key === "ArrowDown") {
+      const next = getEnabledSiblingItem(target.nextElementSibling, "down");
+      if (next) {
+        next.focus();
+        event.preventDefault();
       }
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      const previous = getEnabledSiblingItem(target.previousElementSibling, "up");
+      if (previous) {
+        previous.focus();
+        event.preventDefault();
+      }
+    }
+    if (event.key === "ArrowLeft" && !target.disabled) {
+      // When focus is on an open node, closes the node.
+      if (target.hasChildren && target.expanded) {
+        target.expanded = false;
+        event.preventDefault();
+        return;
+      }
+      // When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node.
+      const parentItem = target.parentElement.closest("calcite-tree-item");
+      if (parentItem && (!target.hasChildren || target.expanded === false)) {
+        parentItem.focus();
+        event.preventDefault();
+        return;
+      }
+      // When focus is on a root node that is also either an end node or a closed node, does nothing.
+      return;
+    }
+    if (event.key === "ArrowRight" && !target.disabled) {
+      if (target.hasChildren) {
+        if (target.expanded && dom.getRootNode(this.el).activeElement === target) {
+          // When focus is on an open node, moves focus to the first child node.
+          (_a = getEnabledSiblingItem(target.querySelector("calcite-tree-item"), "down")) === null || _a === void 0 ? void 0 : _a.focus();
+          event.preventDefault();
+        }
+        else {
+          // When focus is on a closed node, opens the node; focus does not move.
+          target.expanded = true;
+          event.preventDefault();
+        }
+      }
+      return;
     }
   }
   updateAncestorTree(event) {
     const item = event.target;
-    const children = item.querySelectorAll("calcite-tree-item");
+    if (item.disabled) {
+      return;
+    }
     const ancestors = [];
     let parent = item.parentElement.closest("calcite-tree-item");
     while (parent) {
       ancestors.push(parent);
       parent = parent.parentElement.closest("calcite-tree-item");
     }
-    item.selected = !item.selected;
-    item.indeterminate = false;
-    if (children === null || children === void 0 ? void 0 : children.length) {
-      children.forEach((el) => {
-        el.selected = item.selected;
-        el.indeterminate = false;
-      });
+    const childItems = Array.from(item.querySelectorAll("calcite-tree-item:not([disabled])"));
+    const childItemsWithNoChildren = childItems.filter((child) => !child.hasChildren);
+    const childItemsWithChildren = childItems.filter((child) => child.hasChildren);
+    const futureSelected = item.hasChildren
+      ? !(item.selected || item.indeterminate)
+      : !item.selected;
+    childItemsWithNoChildren.forEach((el) => {
+      el.selected = futureSelected;
+      el.indeterminate = false;
+    });
+    function updateItemState(childItems, item) {
+      const selected = childItems.filter((child) => child.selected);
+      const unselected = childItems.filter((child) => !child.selected);
+      item.selected = selected.length === childItems.length;
+      item.indeterminate = selected.length > 0 && unselected.length > 0;
     }
-    if (ancestors) {
-      ancestors.forEach((ancestor) => {
-        const descendants = dom.nodeListToArray(ancestor.querySelectorAll("calcite-tree-item"));
-        const activeDescendants = descendants.filter((el) => el.selected);
-        if (activeDescendants.length === 0) {
-          ancestor.selected = false;
-          ancestor.indeterminate = false;
-          return;
-        }
-        const indeterminate = activeDescendants.length < descendants.length;
-        ancestor.indeterminate = indeterminate;
-        ancestor.selected = !indeterminate;
-      });
+    childItemsWithChildren.forEach((el) => {
+      const directChildItems = Array.from(el.querySelectorAll(":scope > calcite-tree > calcite-tree-item"));
+      updateItemState(directChildItems, el);
+    });
+    if (item.hasChildren) {
+      updateItemState(childItems, item);
     }
+    else {
+      item.selected = futureSelected;
+      item.indeterminate = false;
+    }
+    ancestors.forEach((ancestor) => {
+      const descendants = dom.nodeListToArray(ancestor.querySelectorAll("calcite-tree-item"));
+      const activeDescendants = descendants.filter((el) => el.selected);
+      if (activeDescendants.length === 0) {
+        ancestor.selected = false;
+        ancestor.indeterminate = false;
+        return;
+      }
+      const indeterminate = activeDescendants.length < descendants.length;
+      ancestor.indeterminate = indeterminate;
+      ancestor.selected = !indeterminate;
+    });
     this.calciteTreeSelect.emit({
       selected: dom.nodeListToArray(this.el.querySelectorAll("calcite-tree-item")).filter((i) => i.selected)
     });
@@ -293,7 +334,7 @@ const ICONS = {
   blank: "blank"
 };
 
-const treeItemCss = "@-webkit-keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in{0%{opacity:0}100%{opacity:1}}@-webkit-keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-down{0%{opacity:0;-webkit-transform:translate3D(0, -5px, 0);transform:translate3D(0, -5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;-webkit-transform:translate3D(0, 5px, 0);transform:translate3D(0, 5px, 0)}100%{opacity:1;-webkit-transform:translate3D(0, 0, 0);transform:translate3D(0, 0, 0)}}@-webkit-keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}@keyframes in-scale{0%{opacity:0;-webkit-transform:scale3D(0.95, 0.95, 1);transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;-webkit-transform:scale3D(1, 1, 1);transform:scale3D(1, 1, 1)}}: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{opacity:0;-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:var(--calcite-animation-timing);animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{-webkit-animation-name:in;animation-name:in}.calcite-animate__in-down{-webkit-animation-name:in-down;animation-name:in-down}.calcite-animate__in-up{-webkit-animation-name:in-up;animation-name:in-up}.calcite-animate__in-scale{-webkit-animation-name:in-scale;animation-name:in-scale}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host{display:block;max-inline-size:100%;cursor:pointer;color:var(--calcite-ui-text-3)}:host([calcite-hydrated-hidden]){visibility:hidden !important;pointer-events:none}:host([scale=s]){font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=s]) .node-container{--calcite-tree-padding-y:0.25rem}:host([scale=s]) .node-container .checkbox,:host([scale=s]) .node-container .chevron,:host([scale=s]) .node-container .checkmark,:host([scale=s]) .node-container .bullet-point{margin-inline:0.25rem}:host([scale=m]){font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=m]) .node-container{--calcite-tree-padding-y:0.5rem}:host([scale=m]) .node-container .checkbox,:host([scale=m]) .node-container .chevron,:host([scale=m]) .node-container .checkmark,:host([scale=m]) .node-container .bullet-point{margin-inline:0.5rem}:host([scale=l]){font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=l]) .node-container{--calcite-tree-padding-y:0.75rem}:host([scale=l]) .node-container .checkbox,:host([scale=l]) .node-container .chevron,:host([scale=l]) .node-container .checkmark,:host([scale=l]) .node-container .bullet-point{margin-inline:0.75rem}:host([lines]) .children-container:after{position:absolute;inset-block-start:0px;z-index:1;inline-size:1px;transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;-webkit-transition-property:color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;-webkit-transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;block-size:96%;content:\"\";background-color:var(--calcite-ui-border-2)}:host(:not([lines])) .node-container:after{display:none}::slotted(*){min-inline-size:0px;max-inline-size:100%;overflow-wrap:break-word;color:inherit;text-decoration:none !important}::slotted(*):hover{text-decoration:none !important}::slotted(a){inline-size:100%;-webkit-text-decoration-line:none;text-decoration-line:none}:host{outline-color:transparent}:host(:focus){outline:2px solid transparent;outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.checkbox{line-height:0}.checkbox-label{pointer-events:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.checkbox:focus{outline:2px solid transparent;outline-offset:2px}.children-container{position:relative;block-size:0px;overflow:hidden;-webkit-margin-start:1.25rem;margin-inline-start:1.25rem;-webkit-transform:scaleY(0);transform:scaleY(0);opacity:0;-webkit-transition:var(--calcite-animation-timing) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-animation-timing) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out;transition:var(--calcite-animation-timing) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-animation-timing) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out;-webkit-transform-origin:top;transform-origin:top}:host([expanded])>.children-container{-webkit-transform:scaleY(1);transform:scaleY(1);opacity:1;block-size:auto}.node-container{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding-block:var(--calcite-tree-padding-y);padding-inline:0}.node-container .checkmark,.node-container .bullet-point{opacity:0;-webkit-transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;color:var(--calcite-ui-border-1)}.node-container:hover .checkmark,.node-container:hover .bullet-point,:host([selected]) .node-container:hover .checkmark,:host([selected]) .node-container:hover .bullet-point,:host(:focus) .node-container .checkmark,:host(:focus) .node-container .bullet-point{opacity:1}:host([selected])>.node-container,:host([selected])>.node-container:hover{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}:host([selected])>.node-container .bullet-point,:host([selected])>.node-container .checkmark,:host([selected])>.node-container:hover .bullet-point,:host([selected])>.node-container:hover .checkmark{opacity:1;color:var(--calcite-ui-brand)}:host([selection-mode=none]:not([has-children])):host([scale=s])>.node-container{-webkit-padding-start:0.5rem;padding-inline-start:0.5rem}:host([selection-mode=none]:not([has-children])):host([scale=m])>.node-container{-webkit-padding-start:1rem;padding-inline-start:1rem}:host([selection-mode=none]:not([has-children])):host([scale=l])>.node-container{-webkit-padding-start:1.5rem;padding-inline-start:1.5rem}:host(:not([has-children])):host([scale=s])>.node-container[data-selection-mode=ancestors] .checkbox{-webkit-padding-start:1.25rem;padding-inline-start:1.25rem}:host(:not([has-children])):host([scale=m])>.node-container[data-selection-mode=ancestors] .checkbox{-webkit-padding-start:1.5rem;padding-inline-start:1.5rem}:host(:not([has-children])):host([scale=l])>.node-container[data-selection-mode=ancestors] .checkbox{-webkit-padding-start:1.75rem;padding-inline-start:1.75rem}:host([has-children])>.node-container[data-selection-mode=ancestors] .checkbox{-webkit-margin-start:0;margin-inline-start:0}:host([has-children])>.node-container .bullet-point,:host([has-children])>.node-container .checkmark{display:none}:host([has-children][expanded]:not([selected]):not([selection-mode=none]))>.node-container ::slotted(*){font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}:host([has-children][selected])>.node-container[data-selection-mode=children],:host([has-children][selected])>.node-container[data-selection-mode=multi-children]{color:var(--calcite-ui-brand)}.chevron{position:relative;-ms-flex-item-align:center;align-self:center;color:var(--calcite-ui-text-3);-webkit-transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-transform:rotate(0deg);transform:rotate(0deg)}.calcite--rtl .chevron{-webkit-transform:rotate(180deg);transform:rotate(180deg)}:host([expanded])>.node-container>.chevron{-webkit-transform:rotate(90deg);transform:rotate(90deg)}:host([selected]) .checkmark,:host([selected]) .bullet-point{color:var(--calcite-ui-brand)}";
+const treeItemCss = "@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{--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{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-scale{animation-name:in-scale}@media (prefers-reduced-motion: reduce){:root{--calcite-internal-duration-factor:0.01}}:root{--calcite-floating-ui-transition:var(--calcite-animation-timing)}:host([hidden]){display:none}:host([disabled]){pointer-events:none;cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}:host{display:block;max-inline-size:100%;cursor:pointer;color:var(--calcite-ui-text-3)}:host([calcite-hydrated-hidden]){visibility:hidden !important;pointer-events:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}:host([scale=s]){font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=s]) .node-container{--calcite-tree-padding-y:0.25rem}:host([scale=s]) .node-container .checkbox,:host([scale=s]) .node-container .chevron,:host([scale=s]) .node-container .checkmark,:host([scale=s]) .node-container .bullet-point{margin-inline:0.25rem}:host([scale=m]){font-size:var(--calcite-font-size--1);line-height:1rem}:host([scale=m]) .node-container{--calcite-tree-padding-y:0.5rem}:host([scale=m]) .node-container .checkbox,:host([scale=m]) .node-container .chevron,:host([scale=m]) .node-container .checkmark,:host([scale=m]) .node-container .bullet-point{margin-inline:0.5rem}:host([scale=l]){font-size:var(--calcite-font-size-0);line-height:1.25rem}:host([scale=l]) .node-container{--calcite-tree-padding-y:0.75rem}:host([scale=l]) .node-container .checkbox,:host([scale=l]) .node-container .chevron,:host([scale=l]) .node-container .checkmark,:host([scale=l]) .node-container .bullet-point{margin-inline:0.75rem}:host([lines]) .children-container:after{position:absolute;inset-block-start:0px;z-index:1;inline-size:1px;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;block-size:96%;content:\"\";background-color:var(--calcite-ui-border-2)}:host(:not([lines])) .node-container:after{display:none}::slotted(*){min-inline-size:0px;max-inline-size:100%;overflow-wrap:break-word;color:inherit;text-decoration:none !important}::slotted(*):hover{text-decoration:none !important}::slotted(a){inline-size:100%;text-decoration-line:none}:host{outline-color:transparent}:host(:focus:not([disabled])){outline:2px solid transparent;outline:2px solid var(--calcite-ui-brand);outline-offset:-2px}.checkbox{line-height:0}.checkbox-label{pointer-events:none;display:flex;align-items:center}.checkbox:focus{outline:2px solid transparent;outline-offset:2px}.children-container{position:relative;block-size:0px;overflow:hidden;margin-inline-start:1.25rem;transform:scaleY(0);opacity:0;transition:var(--calcite-animation-timing) cubic-bezier(0.215, 0.44, 0.42, 0.88), opacity var(--calcite-animation-timing) cubic-bezier(0.215, 0.44, 0.42, 0.88), all var(--calcite-animation-timing) ease-in-out;transform-origin:top}:host([expanded])>.children-container{transform:scaleY(1);opacity:1;block-size:auto}.node-container{position:relative;display:flex;align-items:center;padding-block:var(--calcite-tree-padding-y);padding-inline:0}.node-container .checkmark,.node-container .bullet-point{opacity:0;transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;color:var(--calcite-ui-border-1)}.node-container:hover .checkmark,.node-container:hover .bullet-point,:host([selected]) .node-container:hover .checkmark,:host([selected]) .node-container:hover .bullet-point,:host(:focus:not([disabled])) .node-container .checkmark,:host(:focus:not([disabled])) .node-container .bullet-point{opacity:1}:host([selected])>.node-container,:host([selected])>.node-container:hover{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}:host([selected])>.node-container .bullet-point,:host([selected])>.node-container .checkmark,:host([selected])>.node-container:hover .bullet-point,:host([selected])>.node-container:hover .checkmark{opacity:1;color:var(--calcite-ui-brand)}:host([selection-mode=none]:not([has-children])):host([scale=s])>.node-container{padding-inline-start:0.5rem}:host([selection-mode=none]:not([has-children])):host([scale=m])>.node-container{padding-inline-start:1rem}:host([selection-mode=none]:not([has-children])):host([scale=l])>.node-container{padding-inline-start:1.5rem}:host(:not([has-children])):host([scale=s])>.node-container[data-selection-mode=ancestors] .checkbox{padding-inline-start:1.25rem}:host(:not([has-children])):host([scale=m])>.node-container[data-selection-mode=ancestors] .checkbox{padding-inline-start:1.5rem}:host(:not([has-children])):host([scale=l])>.node-container[data-selection-mode=ancestors] .checkbox{padding-inline-start:1.75rem}:host([has-children])>.node-container[data-selection-mode=ancestors] .checkbox{margin-inline-start:0}:host([has-children])>.node-container .bullet-point,:host([has-children])>.node-container .checkmark{display:none}:host([has-children][expanded]:not([selected]):not([selection-mode=none]))>.node-container ::slotted(*){font-weight:var(--calcite-font-weight-medium);color:var(--calcite-ui-text-1)}:host([has-children][selected])>.node-container[data-selection-mode=children],:host([has-children][selected])>.node-container[data-selection-mode=multi-children]{color:var(--calcite-ui-brand)}.chevron{position:relative;align-self:center;color:var(--calcite-ui-text-3);transition:all var(--calcite-animation-timing) ease-in-out 0s, outline 0s, outline-offset 0s;flex:0 0 auto;transform:rotate(0deg)}.calcite--rtl .chevron{transform:rotate(180deg)}:host([expanded])>.node-container>.chevron{transform:rotate(90deg)}:host([selected]) .checkmark,:host([selected]) .bullet-point{color:var(--calcite-ui-brand)}";
 
 const TreeItem = class {
   constructor(hostRef) {
@@ -304,9 +345,13 @@ const TreeItem = class {
     //  Properties
     //
     //--------------------------------------------------------------------------
-    /** When true, the component is selected. */
+    /**
+     * When `true`, interaction is prevented and the component is displayed with lower opacity.
+     */
+    this.disabled = false;
+    /** When `true`, the component is selected. */
     this.selected = false;
-    /** When true, the component is expanded. */
+    /** When `true`, the component is expanded. */
     this.expanded = false;
     /**
      * @internal
@@ -338,12 +383,13 @@ const TreeItem = class {
       items.forEach((item) => (item.parentExpanded = expanded));
     };
     this.updateAncestorTree = () => {
+      var _a;
       if (this.selected && this.selectionMode === TreeSelectionMode.Ancestors) {
         const ancestors = [];
         let parent = this.parentTreeItem;
         while (parent) {
           ancestors.push(parent);
-          parent = parent.parentElement.closest("calcite-tree-item");
+          parent = (_a = parent.parentElement) === null || _a === void 0 ? void 0 : _a.closest("calcite-tree-item");
         }
         ancestors.forEach((item) => (item.indeterminate = true));
         return;
@@ -364,7 +410,8 @@ const TreeItem = class {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
-    this.parentTreeItem = this.el.parentElement.closest("calcite-tree-item");
+    var _a;
+    this.parentTreeItem = (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.closest("calcite-tree-item");
     if (this.parentTreeItem) {
       const { expanded } = this.parentTreeItem;
       this.updateParentIsExpanded(this.parentTreeItem, expanded);
@@ -375,6 +422,7 @@ const TreeItem = class {
     conditionalSlot.disconnectConditionalSlotComponent(this);
   }
   componentWillRender() {
+    var _a;
     this.hasChildren = !!this.el.querySelector("calcite-tree");
     this.depth = 0;
     let parentTree = this.el.closest("calcite-tree");
@@ -386,7 +434,7 @@ const TreeItem = class {
     this.lines = parentTree.lines;
     let nextParentTree;
     while (parentTree) {
-      nextParentTree = parentTree.parentElement.closest("calcite-tree");
+      nextParentTree = (_a = parentTree.parentElement) === null || _a === void 0 ? void 0 : _a.closest("calcite-tree");
       if (nextParentTree === parentTree) {
         break;
       }
@@ -399,6 +447,9 @@ const TreeItem = class {
   componentDidLoad() {
     this.updateAncestorTree();
   }
+  componentDidRender() {
+    interactive.updateHostInteraction(this, () => this.parentExpanded || this.depth === 1);
+  }
   render() {
     const rtl = dom.getElementDir(this.el) === "rtl";
     const showBulletPoint = this.selectionMode === TreeSelectionMode.Single ||
@@ -425,7 +476,7 @@ const TreeItem = class {
         [resources.CSS_UTILITY.rtl]: rtl
       }, icon: selectedIcon, scale: "s" })) : null;
     const hidden = !(this.parentExpanded || this.depth === 1);
-    return (index.h(index.Host, { "aria-expanded": this.hasChildren ? dom.toAriaBoolean(this.expanded) : undefined, "aria-hidden": dom.toAriaBoolean(hidden), "aria-selected": this.selected ? "true" : showCheckmark ? "false" : undefined, "calcite-hydrated-hidden": hidden, role: "treeitem", tabindex: this.parentExpanded || this.depth === 1 ? "0" : "-1" }, index.h("div", { class: {
+    return (index.h(index.Host, { "aria-expanded": this.hasChildren ? dom.toAriaBoolean(this.expanded) : undefined, "aria-hidden": dom.toAriaBoolean(hidden), "aria-selected": this.selected ? "true" : showCheckmark ? "false" : undefined, "calcite-hydrated-hidden": hidden, role: "treeitem" }, index.h("div", { class: {
         [CSS.nodeContainer]: true,
         [resources.CSS_UTILITY.rtl]: rtl
       }, "data-selection-mode": this.selectionMode, ref: (el) => (this.defaultSlotWrapper = el) }, chevron, itemIndicator, checkbox ? checkbox : defaultSlotNode), index.h("div", { class: {