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

package/dist/components/calcite-time-picker/customElement.js

@@ -1,3 +1,6 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
@@ -48,7 +51,7 @@ const ICONS = {
   chevronUp: "chevron-up",
   chevronDown: "chevron-down"
 };
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host{display:inline-block}.time-picker{display:flex;-webkit-user-select:none;user-select:none;align-items:center;border-width:1px;border-style:solid;font-weight:var(--calcite-font-weight-medium);border-color:var(--calcite-time-picker-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round));color:var(--calcite-time-picker-color, var(--calcite-color-text-1));background-color:var(--calcite-time-picker-background-color, var(--calcite-color-foreground-1));overflow:hidden}.time-picker .column{display:flex;flex-direction:column}.time-picker .meridiem--start{order:-1}.time-picker .button{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;background-color:var(--calcite-time-picker-background-color, var(--calcite-color-foreground-1))}.time-picker .button:hover,.time-picker .button:focus{outline:2px solid transparent;outline-offset:2px;z-index:var(--calcite-z-index-header);outline-offset:0;background-color:var(--calcite-time-picker-button-background-color-hover, var(--calcite-color-foreground-2))}.time-picker .button:active{background-color:var(--calcite-time-picker-button-background-color-press, var(--calcite-color-foreground-3))}.time-picker .button.top-left{border-start-start-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round))}.time-picker .button.bottom-left{border-end-start-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round))}.time-picker .button.top-right{border-start-end-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round))}.time-picker .button.bottom-right{border-end-end-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round))}.time-picker .button calcite-icon{color:var(--calcite-time-picker-icon-color, var(--calcite-color-text-3))}.time-picker .input{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;font-weight:var(--calcite-font-weight-medium);background-color:var(--calcite-time-picker-background-color, var(--calcite-color-foreground-1))}.time-picker .input:hover{box-shadow:inset 0 0 0 2px var(--calcite-time-picker-input-border-color-hover, var(--calcite-color-foreground-2));z-index:var(--calcite-z-index-header)}.time-picker .input:focus,.time-picker .input:hover:focus{outline:2px solid transparent;outline-offset:2px;outline-offset:0}.time-picker .input.inputFocus,.time-picker .input:hover.inputFocus{box-shadow:inset 0 0 0 2px var(--calcite-time-picker-input-border-color-press, var(--calcite-color-brand));z-index:var(--calcite-z-index-header)}.time-picker.scale-s{font-size:var(--calcite-font-size--1)}.time-picker.scale-s .button,.time-picker.scale-s .input{padding-inline:var(--calcite-spacing-sm);padding-block:var(--calcite-spacing-xxs)}.time-picker.scale-s:not(.show-meridiem) .delimiter:last-child{padding-inline-end:var(--calcite-spacing-md)}.time-picker.scale-m{font-size:var(--calcite-font-size-0)}.time-picker.scale-m .button,.time-picker.scale-m .input{padding-inline:var(--calcite-spacing-md);padding-block:var(--calcite-spacing-sm)}.time-picker.scale-m:not(.show-meridiem) .delimiter:last-child{padding-inline-end:var(--calcite-spacing-xl)}.time-picker.scale-l{font-size:var(--calcite-font-size-1)}.time-picker.scale-l .button,.time-picker.scale-l .input{padding-inline:var(--calcite-spacing-lg);padding-block:var(--calcite-spacing-md)}.time-picker.scale-l:not(.show-meridiem) .delimiter:last-child{padding-inline-end:var(--calcite-spacing-xxl)}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{display:inline-block}.time-picker{display:flex;-webkit-user-select:none;user-select:none;align-items:center;border-width:1px;border-style:solid;font-weight:var(--calcite-font-weight-medium);border-color:var(--calcite-time-picker-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round));color:var(--calcite-time-picker-color, var(--calcite-color-text-1));background-color:var(--calcite-time-picker-background-color, var(--calcite-color-foreground-1));overflow:hidden}.time-picker .column{display:flex;flex-direction:column}.time-picker .meridiem--start{order:-1}.time-picker .button{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;background-color:var(--calcite-time-picker-background-color, var(--calcite-color-foreground-1))}.time-picker .button:hover,.time-picker .button:focus{outline:2px solid transparent;outline-offset:2px;z-index:var(--calcite-z-index-header);outline-offset:0;background-color:var(--calcite-time-picker-button-background-color-hover, var(--calcite-color-foreground-2))}.time-picker .button:active{background-color:var(--calcite-time-picker-button-background-color-press, var(--calcite-color-foreground-3))}.time-picker .button.top-left{border-start-start-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round))}.time-picker .button.bottom-left{border-end-start-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round))}.time-picker .button.top-right{border-start-end-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round))}.time-picker .button.bottom-right{border-end-end-radius:var(--calcite-time-picker-corner-radius, var(--calcite-border-radius-round))}.time-picker .button calcite-icon{color:var(--calcite-time-picker-icon-color, var(--calcite-color-text-3))}.time-picker .input{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;font-weight:var(--calcite-font-weight-medium);background-color:var(--calcite-time-picker-background-color, var(--calcite-color-foreground-1))}.time-picker .input:hover{box-shadow:inset 0 0 0 2px var(--calcite-time-picker-input-border-color-hover, var(--calcite-color-foreground-2));z-index:var(--calcite-z-index-header)}.time-picker .input:focus,.time-picker .input:hover:focus{outline:2px solid transparent;outline-offset:2px;outline-offset:0}.time-picker .input.inputFocus,.time-picker .input:hover.inputFocus{box-shadow:inset 0 0 0 2px var(--calcite-time-picker-input-border-color-press, var(--calcite-color-brand));z-index:var(--calcite-z-index-header)}.time-picker.scale-s{font-size:var(--calcite-font-size-relative-base)}.time-picker.scale-s .button,.time-picker.scale-s .input{padding-inline:var(--calcite-spacing-sm);padding-block:var(--calcite-spacing-xxs)}.time-picker.scale-s:not(.show-meridiem) .delimiter:last-child{padding-inline-end:var(--calcite-spacing-md)}.time-picker.scale-m{font-size:var(--calcite-font-size-relative-md)}.time-picker.scale-m .button,.time-picker.scale-m .input{padding-inline:var(--calcite-spacing-md);padding-block:var(--calcite-spacing-sm)}.time-picker.scale-m:not(.show-meridiem) .delimiter:last-child{padding-inline-end:var(--calcite-spacing-xl)}.time-picker.scale-l{font-size:var(--calcite-font-size-relative-lg)}.time-picker.scale-l .button,.time-picker.scale-l .input{padding-inline:var(--calcite-spacing-lg);padding-block:var(--calcite-spacing-md)}.time-picker.scale-l:not(.show-meridiem) .delimiter:last-child{padding-inline-end:var(--calcite-spacing-xxl)}:host([hidden]){display:none}[hidden]{display:none}`;
 class TimePicker extends LitElement {
   constructor() {
     super();
@@ -315,7 +318,7 @@ class TimePicker extends LitElement {
     })} @click=${this.inputClickHandler} @focus=${this.focusHandler} @keydown=${handleFractionalSecondKeyDownEvent} role=spinbutton tabindex=0 ${ref(this.fractionalSecondRef)}>${localizedFractionalSecond || "".padStart(this.stepPrecision, "-")}</span><span .ariaLabel=${messages.fractionalSecondDown} class=${safeClassMap({
       [CSS.button]: true,
       [CSS.buttonFractionalSecondDown]: true
-    })} @click=${this.fractionalSecondDownClickHandler} role=button><calcite-icon .icon=${ICONS.chevronDown} .scale=${iconScale}></calcite-icon></span></div>` || ""}${showSecondSuffix && html`<span class=${safeClassMap({ [CSS.delimiter]: true, [CSS.secondSuffix]: true })}>${localizedSecondSuffix}</span>` || ""}${showMeridiem && html`<div class=${safeClassMap({
+    })} @click=${this.fractionalSecondDownClickHandler} role=button><calcite-icon .icon=${ICONS.chevronDown} .scale=${iconScale}></calcite-icon></span></div>` || ""}${showSecondSuffix && html`<span class=${safeClassMap({ [CSS.delimiter]: true, [CSS.secondSuffix]: true })}>${localizedSecondSuffix.trim()}</span>` || ""}${showMeridiem && html`<div class=${safeClassMap({
       [CSS.column]: true,
       [CSS.meridiemStart]: meridiemOrder === 0 || getElementDir(this.el) === "rtl"
     })} role=group><span .ariaLabel=${messages.meridiemUp} class=${safeClassMap({

package/dist/components/calcite-time-picker/index.d.ts

@@ -1,2 +1 @@
-import "../calcite-icon/index.js";
 export * from "./customElement.js";

package/dist/components/calcite-tooltip/customElement.d.ts

@@ -1,78 +1,95 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { FloatingLayout, FloatingUIComponent, LogicalPlacement, OverlayPositioning, ReferenceElement } from '../../utils/floating-ui';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { LogicalPlacement, OverlayPositioning, ReferenceElement } from "../../utils/floating-ui.js";
 
-/** @slot  - A slot for adding text. */
-export declare class Tooltip extends LitElement {
-    /**
-     * Closes the component when the `referenceElement` is clicked.
-     *
-     * @default false
-     */
-    closeOnClick: boolean;
-    /**
-     * Accessible name for the component.
-     *
-     * @deprecated in v1.5.0, removal target v6.0.0 - No longer necessary. Overrides the context of the component's text description, which could confuse assistive technology users.
-     */
-    label: string;
-    /**
-     * Offset the position of the component away from the `referenceElement`.
-     *
-     * @default 6
-     */
-    offsetDistance: number;
-    /**
-     * Offset the position of the component along the `referenceElement`.
-     *
-     * @default 0
-     */
-    offsetSkidding: number;
-    /**
-     * When `true`, the component is open.
-     *
-     * @default false
-     */
-    open: boolean;
-    /**
-     * Determines the type of positioning to use for the overlaid content.
-     *
-     * 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"`.
-     *
-     * @default "absolute"
-     */
-    overlayPositioning: OverlayPositioning;
-    /**
-     * Determines where the component will be positioned relative to the `referenceElement`.
-     *
-     * @default "auto"
-     */
-    placement: LogicalPlacement;
-    /**
-     * The `referenceElement` to position the component according to its `"placement"` value.
-     *
-     * Setting to the `HTMLElement` is preferred so the component does not need to query the DOM for the `referenceElement`.
-     *
-     * However, a string ID of the reference element can be used.
-     *
-     * The component should not be placed within its own `referenceElement` to avoid unintended behavior.
-     */
-    referenceElement: ReferenceElement | string;
-    /**
-     * Updates the position of the component.
-     *
-     * @param delayed
-     */
-    reposition(delayed?: boolean): Promise<void>;
-    /** Fires when the component is requested to be closed and before the closing transition begins. */
-    readonly calciteTooltipBeforeClose: TargetedEvent<this, void>;
-    /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
-    readonly calciteTooltipBeforeOpen: TargetedEvent<this, void>;
-    /** Fires when the component is closed and animation is complete. */
-    readonly calciteTooltipClose: TargetedEvent<this, void>;
-    /** Fires when the component is open and animation is complete. */
-    readonly calciteTooltipOpen: TargetedEvent<this, void>;
-}
+/**
+ * @cssproperty [--calcite-tooltip-background-color] - Specifies the component's background color.
+ * @cssproperty [--calcite-tooltip-border-color] - Specifies the component's border color.
+ * @cssproperty [--calcite-tooltip-corner-radius] - Specifies the component's corner radius.
+ * @cssproperty [--calcite-tooltip-max-size-x] - Specifies the component's maximum width.
+ * @cssproperty [--calcite-tooltip-text-color] - Specifies the component's text color.
+ * @slot  - A slot for adding text.
+ */
+export abstract class Tooltip extends LitElement {
+  /**
+   * Closes the component when the `referenceElement` is clicked.
+   *
+   * @default false
+   */
+  accessor closeOnClick: boolean;
+  /**
+   * Specifies an accessible label for the component.
+   *
+   * @deprecated in v1.5.0, removal target v6.0.0 - No longer necessary. Overrides the context of the component's text description, which could confuse assistive technology users.
+   */
+  accessor label: string;
+  /** Specifies the distance to position the component away from the `referenceElement`. */
+  accessor offsetDistance: number;
+  /**
+   * Specifies the distance to position the component along the `referenceElement`.
+   *
+   * @default 0
+   */
+  accessor offsetSkidding: number;
+  /**
+   * When `true`, the component is open.
+   *
+   * @default false
+   */
+  accessor open: boolean;
+  /**
+   * Specifies the type of positioning to use for overlaid content, where:
+   *
+   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   *
+   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   *
+   * @default "absolute"
+   */
+  accessor overlayPositioning: OverlayPositioning;
+  /**
+   * Determines where the component will be positioned relative to the `referenceElement`.
+   *
+   * @default "auto"
+   */
+  accessor placement: LogicalPlacement;
+  /**
+   * The `referenceElement` is used to position the component according to its `placement` value.
+   *
+   * Setting the value to an `HTMLElement` is preferred so the component does not need to query the DOM.
+   *
+   * However, a string `id` of the reference element can also be used.
+   *
+   * The component should not be placed within its own `referenceElement` to avoid unintended behavior.
+   */
+  accessor referenceElement: ReferenceElement | string;
+  /**
+   * When `true` and the component is `open`, disables top layer placement.
+   *
+   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   *
+   * @default false
+   * @mdn [Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
+   */
+  accessor topLayerDisabled: boolean;
+  /**
+   * Updates the position of the component.
+   *
+   * @param delayed
+   */
+  reposition(delayed?: boolean): Promise<void>;
+  /** Fires when the component is requested to be closed and before the closing transition begins. */
+  readonly calciteTooltipBeforeClose: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
+  readonly calciteTooltipBeforeOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component is closed and animation is complete. */
+  readonly calciteTooltipClose: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component is open and animation is complete. */
+  readonly calciteTooltipOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteTooltipBeforeClose: Tooltip["calciteTooltipBeforeClose"]["detail"];
+    calciteTooltipBeforeOpen: Tooltip["calciteTooltipBeforeOpen"]["detail"];
+    calciteTooltipClose: Tooltip["calciteTooltipClose"]["detail"];
+    calciteTooltipOpen: Tooltip["calciteTooltipOpen"]["detail"];
+  };
+}

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

@@ -1,12 +1,16 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, setAttribute, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { d as defaultOffsetDistance, r as reposition, a as disconnectFloatingUI, h as hideFloatingUI, c as connectFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
+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 { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
 import { F as FloatingArrow } from "../../chunks/FloatingArrow.js";
-import { q as queryElementRoots, c as getShadowRootNode } from "../../chunks/dom.js";
+import { u as useTopLayer } from "../../chunks/useTopLayer.js";
+import { q as queryElementRoots, D as getShadowRootNode } from "../../chunks/dom.js";
 const CSS = {
   positionContainer: "position-container",
   container: "container"
@@ -261,7 +265,7 @@ class TooltipManager {
     return referenceEl instanceof Element ? getShadowRootNode(referenceEl) : null;
   }
 }
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host{display:contents}.position-container{inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0}@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--2);line-height:1.375;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 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();
 class Tooltip extends LitElement {
   constructor() {
@@ -270,6 +274,10 @@ class Tooltip extends LitElement {
     this.guid = IDS.host(guid());
     this.transitionProp = "opacity";
     this.transitionRef = createRef();
+    this.topLayer = useTopLayer({
+      disabledOverride: () => this.open && !this.referenceEl,
+      target: () => this.floatingEl
+    })(this);
     this.floatingLayout = "vertical";
     this.closeOnClick = false;
     this.offsetDistance = defaultOffsetDistance;
@@ -277,13 +285,14 @@ class Tooltip extends LitElement {
     this.open = false;
     this.overlayPositioning = "absolute";
     this.placement = "auto";
+    this.topLayerDisabled = false;
     this.calciteTooltipBeforeClose = createEvent({ cancelable: false });
     this.calciteTooltipBeforeOpen = createEvent({ cancelable: false });
     this.calciteTooltipClose = createEvent({ cancelable: false });
     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 };
+    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 }] };
   }
   static {
     this.styles = styles;
@@ -314,6 +323,9 @@ class Tooltip extends LitElement {
     }
     if (changes.has("referenceElement")) {
       this.setUpReferenceElement();
+      if (!this.referenceElement && this.open) {
+        this.topLayer.hide();
+      }
     }
   }
   loaded() {
@@ -326,24 +338,13 @@ class Tooltip extends LitElement {
     this.removeReferences();
     disconnectFloatingUI(this);
   }
-  async handlePopover() {
-    await this.componentOnReady();
-    if (!this.floatingEl) {
-      return;
-    }
-    if (this.open && this.referenceEl) {
-      this.floatingEl.showPopover();
-    } else {
-      this.floatingEl.hidePopover();
-    }
-  }
   openHandler() {
     toggleOpenClose(this);
     this.reposition(true);
-    this.handlePopover();
   }
   onBeforeOpen() {
     this.calciteTooltipBeforeOpen.emit();
+    this.topLayer.show();
   }
   onOpen() {
     this.calciteTooltipOpen.emit();
@@ -354,6 +355,7 @@ class Tooltip extends LitElement {
   onClose() {
     this.calciteTooltipClose.emit();
     hideFloatingUI(this);
+    this.topLayer.hide();
   }
   setFloatingEl(el) {
     this.floatingEl = el;
@@ -372,7 +374,6 @@ class Tooltip extends LitElement {
       });
     }
     this.addReferences();
-    this.handlePopover();
   }
   getId() {
     return this.el.id || this.guid;

package/dist/components/calcite-tree/customElement.d.ts

@@ -1,45 +1,47 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { Scale, SelectionMode } from '../interfaces';
-import { TreeItem } from '../calcite-tree-item/customElement.js';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { Scale, SelectionMode } from "../interfaces.js";
+import type { TreeItem } from "../calcite-tree-item/customElement.js";
 
 /** @slot  - A slot for `calcite-tree-item` elements. */
-export declare class Tree extends LitElement {
-    /**
-     * When `true`, displays indentation guide lines.
-     *
-     * @default false
-     */
-    lines: boolean;
-    /**
-     * Specifies the size of the component.
-     *
-     * @default "m"
-     */
-    scale: Scale;
-    /** Specifies the component's selected items. */
-    readonly selectedItems: HTMLCalciteTreeItemElement[];
-    /**
-     * Specifies the selection mode of the component, where:
-     *
-     * `"ancestors"` displays with a checkbox and allows any number of selections from corresponding parent and child selections,
-     *
-     * `"children"` allows any number of selections from one parent from corresponding parent and child selections,
-     *
-     * `"multichildren"` allows any number of selections from corresponding parent and child selections,
-     *
-     * `"multiple"` allows any number of selections,
-     *
-     * `"none"` allows no selections,
-     *
-     * `"single"` allows one selection, and
-     *
-     * `"single-persist"` allows and requires one selection.
-     *
-     * @default "single"
-     */
-    selectionMode: SelectionMode;
-    /** Fires when the user selects/deselects `calcite-tree-items`. */
-    readonly calciteTreeSelect: TargetedEvent<this, void>;
-}
+export abstract class Tree extends LitElement {
+  /**
+   * When `true`, displays indentation guide lines.
+   *
+   * @default false
+   */
+  accessor lines: boolean;
+  /**
+   * Specifies the component's size.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
+  /** Specifies the component's selected items. */
+  get selectedItems(): TreeItem[];
+  /**
+   * Specifies the selection mode of the component, where:
+   *
+   * `"ancestors"` displays with a checkbox and allows any number of selections from corresponding parent and child selections,
+   *
+   * `"children"` allows any number of selections from one parent from corresponding parent and child selections,
+   *
+   * `"multichildren"` allows any number of selections from corresponding parent and child selections,
+   *
+   * `"multiple"` allows any number of selections,
+   *
+   * `"none"` allows no selections,
+   *
+   * `"single"` allows one selection, and
+   *
+   * `"single-persist"` allows and requires one selection.
+   *
+   * @default "single"
+   */
+  accessor selectionMode: SelectionMode;
+  /** Fires when the user selects/deselects `calcite-tree-items`. */
+  readonly calciteTreeSelect: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteTreeSelect: Tree["calciteTreeSelect"]["detail"];
+  };
+}

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

@@ -1,7 +1,10 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, setAttribute } from "@arcgis/lumina";
-import { b as focusElement, n as nodeListToArray, s as slotChangeGetAssignedElements, t as toAriaBoolean } from "../../chunks/dom.js";
+import { j as focusElement, o as nodeListToArray, b as slotChangeGetAssignedElements, t as toAriaBoolean } from "../../chunks/dom.js";
 function isTreeItem(element) {
   return element?.tagName === "CALCITE-TREE-ITEM";
 }
@@ -21,7 +24,7 @@ function getTraversableItems(root) {
     }
   );
 }
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host{display:block}:host(:focus){outline:2px solid transparent;outline-offset:2px}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{display:block}:host(:focus){outline:2px solid transparent;outline-offset:2px}:host([hidden]){display:none}[hidden]{display:none}`;
 class Tree extends LitElement {
   constructor() {
     super();

package/dist/components/calcite-tree-item/customElement.d.ts

@@ -1,45 +1,50 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { InteractiveComponent } from '../../utils/interactive';
-import { FlipContext, Scale, SelectionMode } from '../interfaces';
-import { IconName } from '../calcite-icon/interfaces';
-import { TreeItemSelectDetail } from './interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { FlipContext } from "../interfaces.js";
+import type { IconName } from "../calcite-icon/interfaces.js";
 
 /**
+ * @cssproperty [--calcite-tree-text-color] - Specifies the component's text color.
+ * @cssproperty [--calcite-tree-text-color-selected] - When 'selected', specifies the component's text color.
+ * @cssproperty [--calcite-tree-selected-icon-color] - Specifies the component's selection icon color.
  * @slot  - A slot for adding text.
  * @slot [children] - A slot for adding nested `calcite-tree` elements.
  * @slot [actions-end] - A slot for adding actions to the end of the component. It is recommended to use two or fewer actions.
  */
-export declare class TreeItem extends LitElement {
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     *
-     * @default false
-     */
-    disabled: boolean;
-    /**
-     * When `true`, expands the component and its contents.
-     *
-     * @default false
-     */
-    expanded: boolean;
-    /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
-    iconFlipRtl: FlipContext;
-    /** Specifies an icon to display at the start of the component. */
-    iconStart: IconName;
-    /** Accessible name for the component. */
-    label: string;
-    /**
-     * When `true`, the component is selected.
-     *
-     * @default false
-     */
-    selected: boolean;
-    /** Fires when the component's content area is collapsed. */
-    readonly calciteTreeItemCollapse: TargetedEvent<this, void>;
-    /** Fires when the component's content area is expanded. */
-    readonly calciteTreeItemExpand: TargetedEvent<this, void>;
-    /** Fires when the component is selected or deselected. */
-    readonly calciteTreeItemSelect: TargetedEvent<this, void>;
-}
+export abstract class TreeItem extends LitElement {
+  /**
+   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /**
+   * When `true`, expands the component and its contents.
+   *
+   * @default false
+   */
+  accessor expanded: boolean;
+  /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+  accessor iconFlipRtl: FlipContext;
+  /** Specifies an icon to display at the start of the component. */
+  accessor iconStart: IconName;
+  /** Specifies an accessible label for the component. */
+  accessor label: string;
+  /**
+   * When `true`, the component is selected.
+   *
+   * @default false
+   */
+  accessor selected: boolean;
+  /** Fires when the component's content area is collapsed. */
+  readonly calciteTreeItemCollapse: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component's content area is expanded. */
+  readonly calciteTreeItemExpand: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component is selected or deselected. */
+  readonly calciteTreeItemSelect: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteTreeItemCollapse: TreeItem["calciteTreeItemCollapse"]["detail"];
+    calciteTreeItemExpand: TreeItem["calciteTreeItemExpand"]["detail"];
+    calciteTreeItemSelect: TreeItem["calciteTreeItemSelect"]["detail"];
+  };
+}