@esri/calcite-components 5.1.0-next.6 → 5.1.0-next.60

package/dist/components/calcite-tooltip/customElement.js

@@ -1,277 +1,27 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as customElement } from "../../chunks/runtime.js";
+import { keyed } from "lit/directives/keyed.js";
 import { css, html } from "lit";
-import { LitElement, createEvent, setAttribute, safeClassMap } from "@arcgis/lumina";
+import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { useDirection } from "@arcgis/lumina/controllers";
-import { e as defaultOffsetDistance, r as reposition, a as disconnectFloatingUI, h as hideFloatingUI, c as connectFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
-import { g as guid } from "../../chunks/guid.js";
+import { e as defaultOffsetDistance, r as reposition, c as connectFloatingUI, a as disconnectFloatingUI, h as hideFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
 import { F as FloatingArrow } from "../../chunks/FloatingArrow.js";
 import { u as useTopLayer } from "../../chunks/useTopLayer.js";
-import { q as queryElementRoots, B as getShadowRootNode } from "../../chunks/dom.js";
+import { u as useReferenceElement, r as referenceElementManager } from "../../chunks/manager.js";
 const CSS = {
   positionContainer: "position-container",
   container: "container"
 };
-const idPrefix = "calcite-tooltip";
-const IDS = {
-  host: (id) => `${idPrefix}-${id}`
-};
-const TOOLTIP_OPEN_DELAY_MS = 300;
-const TOOLTIP_QUICK_OPEN_DELAY_MS = TOOLTIP_OPEN_DELAY_MS / 3;
-const TOOLTIP_CLOSE_DELAY_MS = TOOLTIP_OPEN_DELAY_MS * 1.5;
-const ARIA_DESCRIBED_BY = "aria-describedby";
-function getEffectiveReferenceElement(tooltip) {
-  const { referenceElement } = tooltip;
-  return (typeof referenceElement === "string" ? queryElementRoots(tooltip, { id: referenceElement }) : referenceElement) || null;
-}
-class TooltipManager {
-  constructor() {
-    this.registeredElements = /* @__PURE__ */ new WeakMap();
-    this.registeredShadowRootCounts = /* @__PURE__ */ new WeakMap();
-    this.hoverOpenTimeout = null;
-    this.hoverCloseTimeout = null;
-    this.activeTooltip = null;
-    this.registeredElementCount = 0;
-    this.clickedTooltip = null;
-    this.hoveredTooltip = null;
-    this.queryTooltip = (composedPath) => {
-      const { registeredElements } = this;
-      const registeredElement = composedPath.find((pathEl) => registeredElements.has(pathEl));
-      return registeredElements.get(registeredElement);
-    };
-    this.keyDownHandler = (event) => {
-      if (event.key === "Escape" && !event.defaultPrevented) {
-        const { activeTooltip } = this;
-        if (activeTooltip?.open) {
-          this.clearHoverTimeout();
-          this.closeActiveTooltip();
-          const referenceElement = getEffectiveReferenceElement(activeTooltip);
-          const composedPath = event.composedPath();
-          if (referenceElement instanceof Element && composedPath.includes(referenceElement) || composedPath.includes(activeTooltip)) {
-            event.preventDefault();
-          }
-        }
-      }
-    };
-    this.pointerLeaveHandler = (event) => {
-      if (event.defaultPrevented) {
-        return;
-      }
-      this.clearHoverTimeout();
-      this.closeHoveredTooltip();
-    };
-    this.pointerMoveHandler = (event) => {
-      if (event.defaultPrevented) {
-        this.closeHoveredTooltip();
-        return;
-      }
-      const composedPath = event.composedPath();
-      const tooltip = this.queryTooltip(composedPath);
-      if (this.pathHasOpenTooltip(tooltip, composedPath)) {
-        this.clearHoverTimeout();
-        return;
-      }
-      if (tooltip === this.clickedTooltip) {
-        return;
-      }
-      if (tooltip !== this.hoveredTooltip) {
-        this.clearHoverOpenTimeout();
-      }
-      this.hoveredTooltip = tooltip;
-      if (tooltip) {
-        this.openHoveredTooltip(tooltip);
-      } else if (this.activeTooltip?.open) {
-        this.closeHoveredTooltip();
-      }
-      this.clickedTooltip = null;
-    };
-    this.clickHandler = (event) => {
-      if (event.defaultPrevented) {
-        return;
-      }
-      this.clickedTooltip = null;
-      const composedPath = event.composedPath();
-      const tooltip = this.queryTooltip(composedPath);
-      if (this.pathHasOpenTooltip(tooltip, composedPath)) {
-        this.clearHoverTimeout();
-        return;
-      }
-      this.closeActiveTooltip();
-      if (!tooltip) {
-        return;
-      }
-      this.clearHoverTimeout();
-      if (tooltip.closeOnClick) {
-        this.clickedTooltip = tooltip;
-        this.toggleTooltip(tooltip, false);
-        return;
-      }
-      this.toggleTooltip(tooltip, true);
-    };
-    this.blurHandler = () => {
-      this.closeActiveTooltip();
-    };
-    this.focusInHandler = (event) => {
-      if (event.defaultPrevented) {
-        return;
-      }
-      const composedPath = event.composedPath();
-      const tooltip = this.queryTooltip(composedPath);
-      if (this.pathHasOpenTooltip(tooltip, composedPath)) {
-        this.clearHoverTimeout();
-        return;
-      }
-      if (tooltip === this.clickedTooltip) {
-        return;
-      }
-      this.clickedTooltip = null;
-      this.closeTooltipIfNotActive(tooltip);
-      if (!tooltip) {
-        return;
-      }
-      this.toggleFocusedTooltip(tooltip, true);
-    };
-    this.openHoveredTooltip = (tooltip) => {
-      this.hoverOpenTimeout = window.setTimeout(
-        () => {
-          if (this.hoverOpenTimeout === null || tooltip !== this.hoveredTooltip) {
-            return;
-          }
-          this.clearHoverCloseTimeout();
-          this.closeTooltipIfNotActive(tooltip);
-          this.toggleTooltip(tooltip, true);
-        },
-        this.activeTooltip?.open ? TOOLTIP_QUICK_OPEN_DELAY_MS : TOOLTIP_OPEN_DELAY_MS
-      );
-    };
-    this.closeHoveredTooltip = () => {
-      this.hoverCloseTimeout = window.setTimeout(() => {
-        if (this.hoverCloseTimeout === null) {
-          return;
-        }
-        this.closeActiveTooltip();
-      }, TOOLTIP_CLOSE_DELAY_MS);
-    };
-  }
-  // --------------------------------------------------------------------------
-  //
-  //  Public Methods
-  //
-  // --------------------------------------------------------------------------
-  registerElement(referenceEl, tooltip) {
-    this.registeredElementCount++;
-    this.registeredElements.set(referenceEl, tooltip);
-    const shadowRoot = this.getReferenceElShadowRootNode(referenceEl);
-    if (shadowRoot) {
-      this.registerShadowRoot(shadowRoot);
-    }
-    if (this.registeredElementCount === 1) {
-      this.addListeners();
-    }
-  }
-  unregisterElement(referenceEl) {
-    const shadowRoot = this.getReferenceElShadowRootNode(referenceEl);
-    if (shadowRoot) {
-      this.unregisterShadowRoot(shadowRoot);
-    }
-    if (this.registeredElements.delete(referenceEl)) {
-      this.registeredElementCount--;
-    }
-    if (this.registeredElementCount === 0) {
-      this.removeListeners();
-    }
-  }
-  pathHasOpenTooltip(tooltip, composedPath) {
-    const { activeTooltip } = this;
-    return activeTooltip?.open && composedPath.includes(activeTooltip) || tooltip?.open && composedPath.includes(tooltip);
-  }
-  addShadowListeners(shadowRoot) {
-    shadowRoot.addEventListener("focusin", this.focusInHandler);
-  }
-  removeShadowListeners(shadowRoot) {
-    shadowRoot.removeEventListener("focusin", this.focusInHandler);
-  }
-  addListeners() {
-    window.addEventListener("keydown", this.keyDownHandler);
-    window.addEventListener("pointermove", this.pointerMoveHandler);
-    window.addEventListener("click", this.clickHandler);
-    window.addEventListener("focusin", this.focusInHandler);
-    window.addEventListener("blur", this.blurHandler);
-    document.addEventListener("pointerleave", this.pointerLeaveHandler);
-  }
-  removeListeners() {
-    window.removeEventListener("keydown", this.keyDownHandler);
-    window.removeEventListener("pointermove", this.pointerMoveHandler);
-    window.removeEventListener("click", this.clickHandler);
-    window.removeEventListener("focusin", this.focusInHandler);
-    window.removeEventListener("blur", this.blurHandler);
-    document.removeEventListener("pointerleave", this.pointerLeaveHandler);
-  }
-  clearHoverOpenTimeout() {
-    window.clearTimeout(this.hoverOpenTimeout);
-    this.hoverOpenTimeout = null;
-  }
-  clearHoverCloseTimeout() {
-    window.clearTimeout(this.hoverCloseTimeout);
-    this.hoverCloseTimeout = null;
-  }
-  clearHoverTimeout() {
-    this.clearHoverOpenTimeout();
-    this.clearHoverCloseTimeout();
-  }
-  closeTooltipIfNotActive(tooltip) {
-    if (this.activeTooltip !== tooltip) {
-      this.closeActiveTooltip();
-    }
-  }
-  closeActiveTooltip() {
-    const { activeTooltip } = this;
-    if (activeTooltip?.open) {
-      this.toggleTooltip(activeTooltip, false);
-    }
-  }
-  toggleFocusedTooltip(tooltip, open) {
-    if (open) {
-      this.clearHoverTimeout();
-    }
-    this.toggleTooltip(tooltip, open);
-  }
-  toggleTooltip(tooltip, open) {
-    tooltip.open = open;
-    this.activeTooltip = open ? tooltip : null;
-  }
-  registerShadowRoot(shadowRoot) {
-    const { registeredShadowRootCounts } = this;
-    const count = registeredShadowRootCounts.get(shadowRoot);
-    const newCount = Math.min((typeof count === "number" ? count : 0) + 1, 1);
-    if (newCount === 1) {
-      this.addShadowListeners(shadowRoot);
-    }
-    registeredShadowRootCounts.set(shadowRoot, newCount);
-  }
-  unregisterShadowRoot(shadowRoot) {
-    const { registeredShadowRootCounts } = this;
-    const count = registeredShadowRootCounts.get(shadowRoot);
-    const newCount = Math.max((typeof count === "number" ? count : 1) - 1, 0);
-    if (newCount === 0) {
-      this.removeShadowListeners(shadowRoot);
-    }
-    registeredShadowRootCounts.set(shadowRoot, newCount);
-  }
-  getReferenceElShadowRootNode(referenceEl) {
-    return referenceEl instanceof Element ? getShadowRootNode(referenceEl) : null;
-  }
-}
-const styles = css`:host{display:contents}:host([top-layer-disabled]){--calcite-floating-ui-z-index: var(--calcite-z-index-tooltip)}.position-container{inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0;z-index:var(--calcite-floating-ui-z-index)}@starting-style{.position-container{opacity:0;inset-block-start:0;left:0}}.position-container{max-inline-size:var(--calcite-tooltip-max-size-x, 20rem);max-block-size:20rem}.position-container[popover]{padding:0;margin:0;border:none;background-color:transparent;overflow:visible;display:none}.position-container:popover-open{display:block}.position-container .calcite-floating-ui-anim{position:relative;transition-duration:var(--calcite-floating-ui-transition);transition-property:inset-block-start,left,opacity,display;transition-behavior:allow-discrete;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.position-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.position-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.position-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}.position-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.position-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{.position-container[data-placement] .calcite-floating-ui-anim--active{opacity:0}}.calcite-floating-ui-arrow{pointer-events:none;position:absolute;z-index:calc(var(--calcite-z-index) * -1);fill:var(--calcite-color-foreground-1)}.calcite-floating-ui-arrow__stroke{stroke:var(--calcite-color-border-3)}.container{position:relative;overflow:hidden;padding:.75rem 1rem;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug);font-weight:var(--calcite-font-weight-medium);word-wrap:break-word;word-break:break-word;border-radius:var(--calcite-tooltip-corner-radius, var(--calcite-corner-radius-round));color:var(--calcite-tooltip-text-color, var(--calcite-color-text-1));text-align:start}.position-container .calcite-floating-ui-anim{border-width:1px;border-style:solid;background-color:var(--calcite-tooltip-background-color, var(--calcite-color-foreground-1));border-color:var(--calcite-tooltip-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-tooltip-corner-radius, var(--calcite-corner-radius-round))}.calcite-floating-ui-arrow{fill:var(--calcite-tooltip-background-color, var(--calcite-color-foreground-1))}.calcite-floating-ui-arrow__stroke{stroke:var(--calcite-tooltip-border-color, var(--calcite-color-border-3))}:host([hidden]){display:none}[hidden]{display:none}`;
-const manager = new TooltipManager();
+const styles = css`:host{display:contents;--calcite-internal-tooltip-padding-block: var(--calcite-spacing-sm);--calcite-internal-tooltip-padding-inline: var(--calcite-spacing-md)}:host([top-layer-disabled]){--calcite-floating-ui-z-index: var(--calcite-z-index-tooltip)}.position-container{inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0;z-index:var(--calcite-floating-ui-z-index)}@starting-style{.position-container{opacity:0;inset-block-start:0;left:0}}.position-container{max-inline-size:var(--calcite-tooltip-max-size-x, 20rem);max-block-size:20rem}.position-container[popover]{padding:0;margin:0;border:none;background-color:transparent;overflow:visible;display:none}.position-container:popover-open{display:block}.position-container .calcite-floating-ui-anim{position:relative;transition-duration:var(--calcite-floating-ui-transition);transition-property:inset-block-start,left,opacity,display;transition-behavior:allow-discrete;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.position-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.position-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.position-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}.position-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.position-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{.position-container[data-placement] .calcite-floating-ui-anim--active{opacity:0}}.calcite-floating-ui-arrow{pointer-events:none;position:absolute;z-index:calc(var(--calcite-z-index) * -1);fill:var(--calcite-color-foreground-1)}.calcite-floating-ui-arrow__stroke{stroke:var(--calcite-color-border-3)}:host([scale=s]){--calcite-internal-tooltip-padding-block: var(--calcite-spacing-xxs);--calcite-internal-tooltip-padding-inline: var(--calcite-spacing-sm)}:host([scale=s]) .container{font-size:var(--calcite-font-size-relative-xs);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=l]) .container{font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-relative-snug)}.container{position:relative;overflow:hidden;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug);font-weight:var(--calcite-font-weight-medium);word-wrap:break-word;word-break:break-word;padding-block:var(--calcite-internal-tooltip-padding-block);padding-inline:var(--calcite-internal-tooltip-padding-inline);border-radius:var(--calcite-tooltip-corner-radius, var(--calcite-corner-radius-round));color:var(--calcite-tooltip-text-color, var(--calcite-color-text-1));text-align:start}.position-container .calcite-floating-ui-anim{border-width:1px;border-style:solid;box-shadow:var(--calcite-shadow-md);background-color:var(--calcite-tooltip-background-color, var(--calcite-color-foreground-1));border-color:var(--calcite-tooltip-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-tooltip-corner-radius, var(--calcite-corner-radius-round))}.calcite-floating-ui-arrow{fill:var(--calcite-tooltip-background-color, var(--calcite-color-foreground-1))}.calcite-floating-ui-arrow__stroke{stroke:var(--calcite-tooltip-border-color, var(--calcite-color-border-3))}:host([hidden]){display:none}[hidden]{display:none}`;
+const manager = referenceElementManager({ hover: true });
 class Tooltip extends LitElement {
   constructor() {
     super(...arguments);
-    this.arrowRef = createRef();
     this.direction = useDirection();
-    this.guid = IDS.host(guid());
+    this.referenceElementType = "hover";
+    this.referenceElementController = useReferenceElement({ manager })(this);
     this.transitionProp = "opacity";
     this.transitionRef = createRef();
     this.topLayer = useTopLayer({
@@ -285,6 +35,8 @@ class Tooltip extends LitElement {
     this.open = false;
     this.overlayPositioning = "absolute";
     this.placement = "auto";
+    this.pointerDisabled = false;
+    this.scale = "m";
     this.topLayerDisabled = false;
     this.calciteTooltipBeforeClose = createEvent({ cancelable: false });
     this.calciteTooltipBeforeOpen = createEvent({ cancelable: false });
@@ -292,13 +44,13 @@ class Tooltip extends LitElement {
     this.calciteTooltipOpen = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { floatingLayout: [16, {}, { state: true }], referenceEl: [16, {}, { state: true }], closeOnClick: [7, {}, { reflect: true, type: Boolean }], label: 1, offsetDistance: [11, {}, { type: Number, reflect: true }], offsetSkidding: [11, {}, { reflect: true, type: Number }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placement: [3, {}, { reflect: true }], referenceElement: 1, topLayerDisabled: [7, {}, { reflect: true, type: Boolean }] };
+    this.properties = { floatingLayout: [16, {}, { state: true }], referenceEl: [16, {}, { state: true }], closeOnClick: [7, {}, { reflect: true, type: Boolean }], label: 1, offsetDistance: [11, {}, { type: Number, reflect: true }], offsetSkidding: [11, {}, { reflect: true, type: Number }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placement: [3, {}, { reflect: true }], pointerDisabled: [7, {}, { reflect: true, type: Boolean }], referenceElement: 1, scale: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }] };
   }
   static {
     this.styles = styles;
   }
   async reposition(delayed = false) {
-    const { referenceEl, placement, overlayPositioning, offsetDistance, offsetSkidding, arrowRef, floatingEl } = this;
+    const { referenceEl, placement, overlayPositioning, offsetDistance, offsetSkidding, arrowEl, floatingEl } = this;
     return reposition(this, {
       direction: this.direction,
       floatingEl,
@@ -307,14 +59,10 @@ class Tooltip extends LitElement {
       placement,
       offsetDistance,
       offsetSkidding,
-      arrowEl: arrowRef.value,
+      arrowEl,
       type: "tooltip"
     }, delayed);
   }
-  connectedCallback() {
-    super.connectedCallback();
-    this.setUpReferenceElement(true);
-  }
   willUpdate(changes) {
     if (changes.has("offsetDistance") && (this.hasUpdated || this.offsetDistance !== defaultOffsetDistance) || changes.has("offsetSkidding") && (this.hasUpdated || this.offsetSkidding !== 0) || changes.has("overlayPositioning") && (this.hasUpdated || this.overlayPositioning !== "absolute") || changes.has("placement") && (this.hasUpdated || this.placement !== "auto")) {
       this.reposition(true);
@@ -322,21 +70,17 @@ class Tooltip extends LitElement {
     if (changes.has("open") && (this.hasUpdated || this.open !== false)) {
       this.openHandler();
     }
-    if (changes.has("referenceElement")) {
-      this.setUpReferenceElement();
-      if (!this.referenceElement && this.open) {
-        this.topLayer.hide();
-      }
+    if (changes.has("referenceElement") && !this.referenceElement && this.open) {
+      this.topLayer.hide();
     }
   }
-  loaded() {
-    if (this.referenceElement && !this.referenceEl) {
-      this.setUpReferenceElement();
+  updated(changes) {
+    if (changes.has("referenceEl")) {
+      connectFloatingUI(this);
     }
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeReferences();
     disconnectFloatingUI(this);
   }
   openHandler() {
@@ -360,59 +104,24 @@ class Tooltip extends LitElement {
   }
   setFloatingEl(el) {
     this.floatingEl = el;
-    if (el) {
-      requestAnimationFrame(() => this.setUpReferenceElement());
-    }
-  }
-  setUpReferenceElement(warn = true) {
-    this.removeReferences();
-    this.referenceEl = getEffectiveReferenceElement(this.el);
-    connectFloatingUI(this);
-    const { el, referenceElement, referenceEl } = this;
-    if (warn && referenceElement && !referenceEl) {
-      console.warn(`${el.tagName}: reference-element id "${referenceElement}" was not found.`, {
-        el
-      });
-    }
-    this.addReferences();
-  }
-  getId() {
-    return this.el.id || this.guid;
-  }
-  addReferences() {
-    const { referenceEl } = this;
-    if (!referenceEl) {
-      return;
-    }
-    const id = this.getId();
-    if ("setAttribute" in referenceEl) {
-      referenceEl.setAttribute(ARIA_DESCRIBED_BY, id);
-    }
-    manager.registerElement(referenceEl, this.el);
   }
-  removeReferences() {
-    const { referenceEl } = this;
-    if (!referenceEl) {
-      return;
-    }
-    if ("removeAttribute" in referenceEl) {
-      referenceEl.removeAttribute(ARIA_DESCRIBED_BY);
-    }
-    manager.unregisterElement(referenceEl);
+  setArrowEl(el) {
+    this.arrowEl = el;
+    this.reposition(true);
   }
   render() {
-    const { referenceEl, label, open, floatingLayout } = this;
+    const { referenceEl, label, open, pointerDisabled, floatingLayout } = this;
     const displayed = referenceEl && open;
     const hidden = !displayed;
+    const arrowNode = !pointerDisabled ? keyed("floating-arrow", FloatingArrow({ floatingLayout, ref: this.setArrowEl })) : null;
     this.el.inert = hidden;
     this.el.ariaLabel = label;
     this.el.ariaLive = "polite";
-    setAttribute(this.el, "id", this.getId());
     this.el.role = "tooltip";
     return html`<div class=${safeClassMap(CSS.positionContainer)} popover=manual ${ref(this.setFloatingEl)}><div class=${safeClassMap({
       [FloatingCSS.animation]: true,
       [FloatingCSS.animationActive]: displayed
-    })} ${ref(this.transitionRef)}>${FloatingArrow({ floatingLayout, ref: this.arrowRef })}<div class=${safeClassMap(CSS.container)}><slot></slot></div></div></div>`;
+    })} ${ref(this.transitionRef)}>${arrowNode}<div class=${safeClassMap(CSS.container)}><slot></slot></div></div></div>`;
   }
 }
 customElement("calcite-tooltip", Tooltip);

package/dist/components/calcite-tree/customElement.js

@@ -59,7 +59,7 @@ class Tree extends LitElement {
   onFocus() {
     if (!this.child) {
       const focusTarget = this.el.querySelector("calcite-tree-item[selected]:not([disabled])") || this.el.querySelector("calcite-tree-item:not([disabled])");
-      focusElement(focusTarget);
+      focusElement(focusTarget, true, "focusable");
     }
   }
   onFocusIn(event) {

package/dist/components/calcite-tree-item/customElement.js

@@ -5,7 +5,7 @@ import { css, html, nothing } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap, setAttribute } from "@arcgis/lumina";
 import { useDirection } from "@arcgis/lumina/controllers";
-import { z as filterDirectChildren, a as slotChangeGetAssignedElements, s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
+import { C as filterDirectChildren, a as slotChangeGetAssignedElements, s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
 import { t as toAriaBoolean } from "../../chunks/aria.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
@@ -35,7 +35,7 @@ const ICONS = {
   minusSquareF: "minus-square-f",
   square: "square"
 };
-const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]){--calcite-internal-tree-item-spacing-unit: .25rem;--calcite-internal-tree-item-padding-block: .25rem;--calcite-internal-tree-item-children-container-padding: 1.25rem;--calcite-internal-tree-item-line-left-position: .75rem;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm)}:host(:is([scale=s],[scale=m])){--calcite-internal-tree-item-action-spacing: var(--calcite-spacing-xxs)}:host([scale=m]){--calcite-internal-tree-item-spacing-unit: .5rem;--calcite-internal-tree-item-padding-block: .5rem;--calcite-internal-tree-item-children-container-padding: 1.5rem;--calcite-internal-tree-item-line-left-position: 1rem;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}:host([scale=l]){--calcite-internal-tree-item-action-spacing: var(--calcite-spacing-xs);--calcite-internal-tree-item-spacing-unit: .75rem;--calcite-internal-tree-item-padding-block: .625rem;--calcite-internal-tree-item-children-container-padding: 2.25rem;--calcite-internal-tree-item-line-left-position: 1.5rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md)}:host{display:block;max-inline-size:100%;cursor:pointer}:host .children-container ::slotted(*){padding-inline-start:var(--calcite-internal-tree-item-children-container-padding)}.node-actions-container{display:flex}.node-actions-container .node-container,.node-actions-container .checkbox-container{gap:var(--calcite-internal-tree-item-spacing-unit)}.node-actions-container .node-container{padding-inline:var(--calcite-internal-tree-item-spacing-unit);padding-block:var(--calcite-internal-tree-item-padding-block)}.node-actions-container{color:var(--calcite-tree-text-color, var(--calcite-color-text-1))}.icon-start{--calcite-icon-color: var(--calcite-color-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}.interaction-container{display:contents}:host([lines]) .children-container:after{position:absolute;inset-block-start:0px;z-index:var(--calcite-z-index);inline-size:1px;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;block-size:100%;inset-inline-start:var(--calcite-internal-tree-item-line-left-position);content:"";background-color:var(--calcite-color-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:2px solid transparent;outline-offset:2px}:host .node-container{outline-color:transparent}:host:focus .node-container,:host:active .node-container{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host(:focus:not([disabled])) .node-container{outline:2px solid transparent;outline-offset:2px;outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host(:focus:not([disabled])) .checkbox{outline:2px solid transparent;outline-offset:2px}.actions-end{display:flex;flex-direction:row;align-items:center;align-self:stretch;gap:var(--calcite-internal-tree-item-action-spacing)}.checkbox-container{display:flex;align-items:center}.checkbox{line-height:0;color:var(--calcite-tree-selected-icon-color, var(--calcite-color-border-input))}.checkbox-label{pointer-events:none;display:flex;align-items:center}.children-container{position:relative;block-size:0px;transform-origin:top;overflow:hidden;opacity:0;transform:scaleY(0);transition:var(--calcite-animation-timing) cubic-bezier(.215,.44,.42,.88),opacity var(--calcite-animation-timing) cubic-bezier(.215,.44,.42,.88),all var(--calcite-animation-timing) ease-in-out}.item--expanded>.children-container{overflow:visible;opacity:1;transform:none;block-size:auto}.node-container{position:relative;display:flex;min-inline-size:0px;flex-grow:1;align-items:center}.node-container .selection-icon{opacity:0;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;color:var(--calcite-color-border-1)}.node-container:hover .selection-icon,:host([selected]) .node-container:hover .selection-icon,:host(:focus:not([disabled])) .node-container .selection-icon{opacity:1}:host([selected]) .node-container,:host([selected]) .node-container:hover{--calcite-internal-tree-item-text-color: var(--calcite-tree-text-color-selected, var(--calcite-color-text-1));font-weight:var(--calcite-font-weight-medium);color:var(--calcite-internal-tree-item-text-color)}:host([selected]) .node-container .icon-start,:host([selected]) .node-container:hover .icon-start{--calcite-icon-color: var(--calcite-internal-tree-item-text-color)}:host([selected]) .node-container .selection-icon,:host([selected]) .node-container:hover .selection-icon{opacity:1;color:var(--calcite-tree-selected-icon-color, var(--calcite-color-brand))}:host([has-children]) .node-container .selection-icon{display:none}.chevron{position:relative;align-self:center;color:var(--calcite-color-text-3);transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;flex:0 0 auto;transform:rotate(0)}.calcite--rtl .chevron{transform:rotate(180deg)}.item--expanded .node-container>.chevron{transform:rotate(90deg)}:host([selected]) .selection-icon{color:var(--calcite-tree-selected-icon-color, var(--calcite-color-brand))}:host([selected]) .checkbox{color:var(--calcite-tree-selected-icon-color, var(--calcite-color-brand))}:host([has-children][indeterminate]) .checkbox{color:var(--calcite-tree-selected-icon-color, var(--calcite-color-brand))}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([scale=s]){--calcite-internal-tree-item-spacing-unit: .25rem;--calcite-internal-tree-item-padding-block: .25rem;--calcite-internal-tree-item-children-container-padding: 1.25rem;--calcite-internal-tree-item-line-left-position: .75rem;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm)}:host(:is([scale=s],[scale=m])){--calcite-internal-tree-item-action-spacing: var(--calcite-spacing-xxs)}:host([scale=m]){--calcite-internal-tree-item-spacing-unit: .5rem;--calcite-internal-tree-item-padding-block: .5rem;--calcite-internal-tree-item-children-container-padding: 1.5rem;--calcite-internal-tree-item-line-left-position: 1rem;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}:host([scale=l]){--calcite-internal-tree-item-action-spacing: var(--calcite-spacing-xs);--calcite-internal-tree-item-spacing-unit: .75rem;--calcite-internal-tree-item-padding-block: .625rem;--calcite-internal-tree-item-children-container-padding: 2.25rem;--calcite-internal-tree-item-line-left-position: 1.5rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md)}:host{display:block;max-inline-size:100%;cursor:pointer}:host .children-container ::slotted(*){padding-inline-start:var(--calcite-internal-tree-item-children-container-padding);overflow:hidden}.node-actions-container{display:flex}.node-actions-container .node-container,.node-actions-container .checkbox-container{gap:var(--calcite-internal-tree-item-spacing-unit)}.node-actions-container .node-container{padding-inline:var(--calcite-internal-tree-item-spacing-unit);padding-block:var(--calcite-internal-tree-item-padding-block)}.node-actions-container{color:var(--calcite-tree-text-color, var(--calcite-color-text-1))}.icon-start{--calcite-icon-color: var(--calcite-color-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}.interaction-container{display:contents}:host([lines]) .children-container:after{position:absolute;inset-block-start:0px;z-index:var(--calcite-z-index);inline-size:1px;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;block-size:100%;inset-inline-start:var(--calcite-internal-tree-item-line-left-position);content:"";background-color:var(--calcite-color-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:2px solid transparent;outline-offset:2px}:host .node-container{outline-color:transparent}:host:focus .node-container,:host:active .node-container{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host(:focus:not([disabled])) .node-container{outline:2px solid transparent;outline-offset:2px;outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}:host(:focus:not([disabled])) .checkbox{outline:2px solid transparent;outline-offset:2px}.actions-end{display:flex;flex-direction:row;align-items:center;align-self:stretch;gap:var(--calcite-internal-tree-item-action-spacing)}.checkbox-container{display:flex;align-items:center}.checkbox{line-height:0;color:var(--calcite-tree-selected-icon-color, var(--calcite-color-border-input))}.checkbox-label{pointer-events:none;display:flex;align-items:center}.children-container{display:grid;grid-template-rows:0fr;max-block-size:max-content;opacity:1;position:relative;transition:opacity var(--calcite-internal-animation-timing-slow) ease-in-out,grid-template-rows var(--calcite-internal-animation-timing-medium) ease-in-out}.item--expanded>.children-container{grid-template-rows:1fr;opacity:1;max-block-size:max-content}@starting-style{.item--expanded>.children-container{opacity:0;grid-template-rows:0fr}}.node-container{position:relative;display:flex;min-inline-size:0px;flex-grow:1;align-items:center}.node-container .selection-icon{opacity:0;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;color:var(--calcite-color-border-1)}.node-container:hover .selection-icon,:host([selected]) .node-container:hover .selection-icon,:host(:focus:not([disabled])) .node-container .selection-icon{opacity:1}:host([selected]) .node-container,:host([selected]) .node-container:hover{--calcite-internal-tree-item-text-color: var(--calcite-tree-text-color-selected, var(--calcite-color-text-1));font-weight:var(--calcite-font-weight-medium);color:var(--calcite-internal-tree-item-text-color)}:host([selected]) .node-container .icon-start,:host([selected]) .node-container:hover .icon-start{--calcite-icon-color: var(--calcite-internal-tree-item-text-color)}:host([selected]) .node-container .selection-icon,:host([selected]) .node-container:hover .selection-icon{opacity:1;color:var(--calcite-tree-selected-icon-color, var(--calcite-color-brand))}:host([has-children]) .node-container .selection-icon{display:none}.chevron{position:relative;align-self:center;color:var(--calcite-color-text-3);transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;flex:0 0 auto;transform:rotate(0)}.calcite--rtl .chevron{transform:rotate(180deg)}.item--expanded .node-container>.chevron{transform:rotate(90deg)}:host([selected]) .selection-icon{color:var(--calcite-tree-selected-icon-color, var(--calcite-color-brand))}:host([selected]) .checkbox{color:var(--calcite-tree-selected-icon-color, var(--calcite-color-brand))}:host([has-children][indeterminate]) .checkbox{color:var(--calcite-tree-selected-icon-color, var(--calcite-color-brand))}:host([hidden]){display:none}[hidden]{display:none}`;
 class TreeItem extends LitElement {
   constructor() {
     super();
@@ -267,7 +267,6 @@ class TreeItem extends LitElement {
     this.el.inert = hidden;
     this.el.ariaLive = "polite";
     this.el.ariaSelected = this.selectionMode === "single" || this.selectionMode === "children" || this.selectionMode === "single-persist" ? toAriaBoolean(this.selected) : void 0;
-    this.el.toggleAttribute("calcite-hydrated-hidden", hidden);
     this.el.role = "treeitem";
     setAttribute(this.el, "tabIndex", this.disabled ? -1 : 0);
     return this.interactiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap({ [CSS.itemExpanded]: isExpanded })}><div class=${safeClassMap(CSS.nodeAndActionsContainer)}><div class=${safeClassMap({

package/dist/controllers/useSortable.d.ts

@@ -0,0 +1,7 @@
+export interface DragDetail<To extends HTMLElement = HTMLElement, From extends HTMLElement = HTMLElement, Drag extends HTMLElement = HTMLElement> {
+  toEl: To;
+  fromEl: From;
+  dragEl: Drag;
+  newIndex: number;
+  oldIndex: number;
+}