@esri/calcite-components 5.0.0-next.41 → 5.0.0-next.43

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

@@ -1,6 +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-next.41 */
+v5.0.0-next.43 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html as html$1, nothing } from "lit";
 import { safeClassMap, LitElement, createEvent } from "@arcgis/lumina";

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

@@ -1,6 +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-next.41 */
+v5.0.0-next.43 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, nothing, html } from "lit";
 import { createRef, ref } from "lit-html/directives/ref.js";

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

@@ -1,6 +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-next.41 */
+v5.0.0-next.43 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, html, nothing, svg } from "lit";

package/dist/components/calcite-swatch-group/customElement.js

@@ -1,6 +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-next.41 */
+v5.0.0-next.43 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { createRef, ref } from "lit-html/directives/ref.js";

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

@@ -1,6 +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-next.41 */
+v5.0.0-next.43 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";

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

@@ -1,6 +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-next.41 */
+v5.0.0-next.43 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, setAttribute, safeClassMap } from "@arcgis/lumina";

package/dist/components/calcite-tab-nav/customElement.js

@@ -1,6 +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-next.41 */
+v5.0.0-next.43 */
 import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { ref } from "lit/directives/ref.js";
 import { keyed } from "lit/directives/keyed.js";

package/dist/components/calcite-tab-title/customElement.js

@@ -1,6 +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-next.41 */
+v5.0.0-next.43 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, isServer, html } from "lit";

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

@@ -1,6 +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-next.41 */
+v5.0.0-next.43 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { isServer, css, nothing, html } from "lit";
 import { render } from "lit-html";

package/dist/components/calcite-table-cell/customElement.js

@@ -1,6 +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-next.41 */
+v5.0.0-next.43 */
 import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { css, nothing, html } from "lit";
 import { createRef, ref } from "lit-html/directives/ref.js";

package/dist/components/calcite-table-header/customElement.js

@@ -1,6 +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-next.41 */
+v5.0.0-next.43 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, nothing, html } from "lit";
 import { createRef, ref } from "lit-html/directives/ref.js";

package/dist/components/calcite-table-row/customElement.js

@@ -1,6 +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-next.41 */
+v5.0.0-next.43 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, html } from "lit";

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

@@ -1,6 +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-next.41 */
+v5.0.0-next.43 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";

package/dist/components/calcite-text-area/customElement.js

@@ -1,6 +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-next.41 */
+v5.0.0-next.43 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { live } from "lit/directives/live.js";
 import { css, html } from "lit";

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

@@ -1,6 +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-next.41 */
+v5.0.0-next.43 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { ref } from "lit/directives/ref.js";

package/dist/components/calcite-tile-group/customElement.js

@@ -1,6 +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-next.41 */
+v5.0.0-next.43 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { ref } from "lit/directives/ref.js";
 import { css, html } from "lit";

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

@@ -1,6 +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-next.41 */
+v5.0.0-next.43 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";

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

@@ -1,6 +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-next.41 */
+v5.0.0-next.43 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, setAttribute, safeClassMap } from "@arcgis/lumina";
@@ -9,6 +9,7 @@ import { d as defaultOffsetDistance, r as reposition, a as disconnectFloatingUI,
 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 { u as useTopLayer } from "../../chunks/useTopLayer.js";
 import { q as queryElementRoots, c as getShadowRootNode } from "../../chunks/dom.js";
 const CSS = {
   positionContainer: "position-container",
@@ -273,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;
@@ -318,7 +323,7 @@ class Tooltip extends LitElement {
     if (changes.has("referenceElement")) {
       this.setUpReferenceElement();
       if (!this.referenceElement && this.open) {
-        this.handlePopover();
+        this.topLayer.hide();
       }
     }
   }
@@ -332,24 +337,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);
   }
   onBeforeOpen() {
     this.calciteTooltipBeforeOpen.emit();
-    this.handlePopover();
+    this.topLayer.show();
   }
   onOpen() {
     this.calciteTooltipOpen.emit();
@@ -360,7 +354,7 @@ class Tooltip extends LitElement {
   onClose() {
     this.calciteTooltipClose.emit();
     hideFloatingUI(this);
-    this.handlePopover();
+    this.topLayer.hide();
   }
   setFloatingEl(el) {
     this.floatingEl = el;

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

@@ -1,6 +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-next.41 */
+v5.0.0-next.43 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, setAttribute } from "@arcgis/lumina";

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

@@ -1,6 +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-next.41 */
+v5.0.0-next.43 */
 import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, html, nothing } from "lit";

package/dist/controllers/useTopLayer.d.ts

@@ -0,0 +1,34 @@
+import { makeGenericController } from '@arcgis/lumina/controllers';
+import { LitElement } from '@arcgis/lumina';
+import { Ref } from 'lit/directives/ref.js';
+export interface UseTopLayer {
+    /**
+     * Shows the target element on the top layer.
+     */
+    show: () => Promise<void>;
+    /**
+     * Hides the target element from the top layer.
+     */
+    hide: () => Promise<void>;
+}
+export interface UseTopLayerOptions {
+    /**
+     * When true, the top-layer placement will be disabled regardless of `topLayerDisabled`.
+     */
+    disabledOverride?: () => boolean;
+    /**
+     * The target element or a Ref to the target element to show on the top layer.
+     */
+    target: (() => HTMLElement | undefined) | Ref<HTMLElement>;
+}
+export interface TopLayerComponent extends LitElement {
+    /**
+     * When true, disables top layer placement when the component is open.
+     *
+     * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+     *
+     * @mdn [Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
+     */
+    topLayerDisabled?: boolean;
+}
+export declare const useTopLayer: <T extends TopLayerComponent>(options: UseTopLayerOptions) => ReturnType<typeof makeGenericController<UseTopLayer, T>>;

package/dist/docs/api.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-12-29T22:02:54",
+  "timestamp": "2025-12-31T18:21:23",
   "compiler": {
     "name": "@arcgis/lumina-compiler",
     "version": "5.0.0-next.76",
@@ -18390,6 +18390,28 @@
               ],
               "signature": "(options?: FocusOptions): Promise<void>"
             },
+            {
+              "kind": "field",
+              "name": "topLayerDisabled",
+              "description": "When true, disables top layer placement when the component is open.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.",
+              "type": {
+                "text": "boolean",
+                "values": [
+                  {
+                    "type": "boolean"
+                  }
+                ]
+              },
+              "default": "false",
+              "attribute": "top-layer-disabled",
+              "reflects": true,
+              "docsTags": [
+                {
+                  "name": "mdn",
+                  "text": "[Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)"
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "updateFocusTrapElements",
@@ -18877,6 +18899,20 @@
               "default": "\"m\"",
               "fieldName": "scale"
             },
+            {
+              "name": "top-layer-disabled",
+              "description": "When true, disables top layer placement when the component is open.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.",
+              "type": {
+                "text": "boolean",
+                "values": [
+                  {
+                    "type": "boolean"
+                  }
+                ]
+              },
+              "default": "false",
+              "fieldName": "topLayerDisabled"
+            },
             {
               "name": "width",
               "description": "Specifies the width of the component.",
@@ -32202,14 +32238,18 @@
             {
               "kind": "field",
               "name": "selectionAppearance",
-              "description": "Specifies the selection appearance - `\"icon\"` (displays a checkmark or dot) or `\"border\"` (displays a border).",
+              "description": "Specifies the selection appearance - `\"icon\"` (displays a checkmark or dot), `\"border\"` (displays a border) or `\"highlight\"` (displays background highlight). [Deprecated] The `\"border\"` value is deprecated, use `\"highlight\"` instead.",
               "type": {
-                "text": "\"border\" | \"icon\"",
+                "text": "\"border\" | \"highlight\" | \"icon\"",
                 "values": [
                   {
                     "value": "border",
                     "type": "string"
                   },
+                  {
+                    "value": "highlight",
+                    "type": "string"
+                  },
                   {
                     "value": "icon",
                     "type": "string"
@@ -32525,14 +32565,18 @@
             },
             {
               "name": "selection-appearance",
-              "description": "Specifies the selection appearance - `\"icon\"` (displays a checkmark or dot) or `\"border\"` (displays a border).",
+              "description": "Specifies the selection appearance - `\"icon\"` (displays a checkmark or dot), `\"border\"` (displays a border) or `\"highlight\"` (displays background highlight). [Deprecated] The `\"border\"` value is deprecated, use `\"highlight\"` instead.",
               "type": {
-                "text": "\"border\" | \"icon\"",
+                "text": "\"border\" | \"highlight\" | \"icon\"",
                 "values": [
                   {
                     "value": "border",
                     "type": "string"
                   },
+                  {
+                    "value": "highlight",
+                    "type": "string"
+                  },
                   {
                     "value": "icon",
                     "type": "string"
@@ -43559,6 +43603,28 @@
               ],
               "signature": "(options?: FocusOptions): Promise<void>"
             },
+            {
+              "kind": "field",
+              "name": "topLayerDisabled",
+              "description": "When true, disables top layer placement when the component is open.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.",
+              "type": {
+                "text": "boolean",
+                "values": [
+                  {
+                    "type": "boolean"
+                  }
+                ]
+              },
+              "default": "false",
+              "attribute": "top-layer-disabled",
+              "reflects": true,
+              "docsTags": [
+                {
+                  "name": "mdn",
+                  "text": "[Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)"
+                }
+              ]
+            },
             {
               "kind": "method",
               "name": "updateFocusTrapElements",
@@ -43876,6 +43942,20 @@
               "default": "false",
               "fieldName": "resizable"
             },
+            {
+              "name": "top-layer-disabled",
+              "description": "When true, disables top layer placement when the component is open.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.",
+              "type": {
+                "text": "boolean",
+                "values": [
+                  {
+                    "type": "boolean"
+                  }
+                ]
+              },
+              "default": "false",
+              "fieldName": "topLayerDisabled"
+            },
             {
               "name": "width",
               "description": "Specifies the width of the component.",

package/dist/docs/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2025-12-29T22:02:54",
+  "timestamp": "2025-12-31T18:21:23",
   "compiler": {
     "name": "@arcgis/lumina-compiler",
     "version": "5.0.0-next.76",
@@ -15492,6 +15492,33 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "topLayerDisabled",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "top-layer-disabled",
+          "reflectToAttr": true,
+          "docs": "When true, disables top layer placement when the component is open.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.",
+          "docsTags": [
+            {
+              "name": "mdn",
+              "text": "[Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "width",
           "type": "\"l\" | \"m\" | \"s\"",
@@ -27244,16 +27271,16 @@
         },
         {
           "name": "selectionAppearance",
-          "type": "\"border\" | \"icon\"",
+          "type": "\"border\" | \"highlight\" | \"icon\"",
           "complexType": {
-            "original": "\"border\" | \"icon\"",
-            "resolved": "\"border\" | \"icon\"",
+            "original": "\"border\" | \"highlight\" | \"icon\"",
+            "resolved": "\"border\" | \"highlight\" | \"icon\"",
             "references": {}
           },
           "mutable": true,
           "attr": "selection-appearance",
           "reflectToAttr": true,
-          "docs": "Specifies the selection appearance - `\"icon\"` (displays a checkmark or dot) or `\"border\"` (displays a border).",
+          "docs": "Specifies the selection appearance - `\"icon\"` (displays a checkmark or dot), `\"border\"` (displays a border) or `\"highlight\"` (displays background highlight). [Deprecated] The `\"border\"` value is deprecated, use `\"highlight\"` instead.",
           "docsTags": [],
           "default": "\"icon\"",
           "values": [
@@ -27261,6 +27288,10 @@
               "value": "border",
               "type": "string"
             },
+            {
+              "value": "highlight",
+              "type": "string"
+            },
             {
               "value": "icon",
               "type": "string"
@@ -36768,6 +36799,33 @@
           "optional": true,
           "required": false
         },
+        {
+          "name": "topLayerDisabled",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": true,
+          "attr": "top-layer-disabled",
+          "reflectToAttr": true,
+          "docs": "When true, disables top layer placement when the component is open.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.",
+          "docsTags": [
+            {
+              "name": "mdn",
+              "text": "[Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": true,
+          "required": false
+        },
         {
           "name": "width",
           "type": "\"l\" | \"m\" | \"s\"",

package/dist/docs/vscode.html-custom-data.json

@@ -3217,6 +3217,11 @@
             }
           ]
         },
+        {
+          "name": "top-layer-disabled",
+          "description": "When true, disables top layer placement when the component is open.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.",
+          "values": []
+        },
         {
           "name": "width",
           "description": "Specifies the width of the component.",
@@ -5345,11 +5350,14 @@
         },
         {
           "name": "selection-appearance",
-          "description": "Specifies the selection appearance - `\"icon\"` (displays a checkmark or dot) or `\"border\"` (displays a border).",
+          "description": "Specifies the selection appearance - `\"icon\"` (displays a checkmark or dot), `\"border\"` (displays a border) or `\"highlight\"` (displays background highlight). [Deprecated] The `\"border\"` value is deprecated, use `\"highlight\"` instead.",
           "values": [
             {
               "name": "border"
             },
+            {
+              "name": "highlight"
+            },
             {
               "name": "icon"
             }
@@ -7159,6 +7167,11 @@
           "description": "When `true`, the component is resizable.",
           "values": []
         },
+        {
+          "name": "top-layer-disabled",
+          "description": "When true, disables top layer placement when the component is open.\n\nOnly set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.",
+          "values": []
+        },
         {
           "name": "width",
           "description": "Specifies the width of the component.",