@esri/calcite-components 5.0.0-next.8 → 5.0.0-next.80

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

@@ -1,153 +1,165 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { FlipPlacement, FloatingLayout, FloatingUIComponent, LogicalPlacement, OverlayPositioning, ReferenceElement } from '../../utils/floating-ui';
-import { HeadingLevel } from '../functional/Heading';
-import { Scale } from '../interfaces';
-import { FocusTrapOptions } from '../../controllers/useFocusTrap';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { FlipPlacement, LogicalPlacement, OverlayPositioning, ReferenceElement } from "../../utils/floating-ui.js";
+import type { HeadingLevel } from "../functional/Heading.js";
+import type { Scale } from "../interfaces.js";
+import type { FocusTrapOptions } from "../../controllers/useFocusTrap.js";
 
-/** @slot  - A slot for adding custom content. */
-export declare class Popover extends LitElement {
-    /**
-     * When `true`, clicking outside of the component automatically closes open `calcite-popover`s.
-     *
-     * @default false
-     */
-    autoClose: boolean;
-    /**
-     * When `true`, displays a close button within the component.
-     *
-     * @default false
-     */
-    closable: boolean;
-    /**
-     * When `true`, prevents flipping the component's placement when overlapping its `referenceElement`.
-     *
-     * @default false
-     */
-    flipDisabled: boolean;
-    /** Specifies the component's fallback `placement` when it's initial or specified `placement` has insufficient space available. */
-    flipPlacements: FlipPlacement[];
-    /**
-     * When `true`, prevents focus trapping.
-     *
-     * @default false
-     */
-    focusTrapDisabled: boolean;
-    /**
-     * Specifies custom focus trap configuration on the component, where
-     *
-     * `"allowOutsideClick`" allows outside clicks,
-     * `"initialFocus"` enables initial focus,
-     * `"returnFocusOnDeactivate"` returns focus when not active, and
-     * `"extraContainers"` specifies additional focusable elements external to the trap (e.g., 3rd-party components appending elements to the document body).
-     * `"setReturnFocus"` customizes the element to which focus is returned when the trap is deactivated. Return `false` to prevent focus return, or `undefined` to use the default behavior (returning focus to the element focused before activation).
-     */
-    focusTrapOptions: Partial<FocusTrapOptions>;
-    /** The component header text. */
-    heading: string;
-    /** Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. */
-    headingLevel: HeadingLevel;
-    /**
-     * Accessible name for the component.
-     *
-     * @required
-     */
-    label: string;
-    /** Use this property to override individual strings used by the component. */
-    messageOverrides?: typeof this.messages._overrides;
-    /**
-     * Offsets the position of the popover away from the `referenceElement`.
-     *
-     * @default 6
-     */
-    offsetDistance: number;
-    /**
-     * Offsets the position of the component along the `referenceElement`.
-     *
-     * @default 0
-     */
-    offsetSkidding: number;
-    /**
-     * When `true`, displays and positions the component.
-     *
-     * @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.
-     *
-     * `"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;
-    /**
-     * When `true`, removes the caret pointer.
-     *
-     * @default false
-     */
-    pointerDisabled: boolean;
-    /**
-     * The `referenceElement` used to position the component according to its `placement` value.
-     *
-     * Setting 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.
-     *
-     * @required
-     */
-    referenceElement: ReferenceElement | string;
-    /**
-     * Specifies the size of the component.
-     *
-     * @default "m"
-     */
-    scale: Scale;
-    /**
-     * When `true`, disables automatically toggling the component when its `referenceElement` has been triggered.
-     *
-     * This property can be set to `true` to manage when the component is open.
-     *
-     * @default false
-     */
-    triggerDisabled: boolean;
-    /**
-     * Updates the position of the component.
-     *
-     * @param delayed
-     */
-    reposition(delayed?: boolean): Promise<void>;
-    /**
-     * Sets focus on the component's first focusable element.
-     *
-     * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-     * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
-     */
-    setFocus(options?: FocusOptions): Promise<void>;
-    /** Updates the element(s) that are used within the focus-trap of the component. */
-    updateFocusTrapElements(): Promise<void>;
-    /** Fires when the component is requested to be closed and before the closing transition begins. */
-    readonly calcitePopoverBeforeClose: TargetedEvent<this, void>;
-    /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
-    readonly calcitePopoverBeforeOpen: TargetedEvent<this, void>;
-    /** Fires when the component is closed and animation is complete. */
-    readonly calcitePopoverClose: TargetedEvent<this, void>;
-    /** Fires when the component is open and animation is complete. */
-    readonly calcitePopoverOpen: TargetedEvent<this, void>;
-    private messages: Partial<{
-        close: string;
-    }> & import('@arcgis/lumina/controllers').T9nMeta<{
-        close: string;
-    }>;
-}
+/**
+ * @cssproperty [--calcite-popover-background-color] - Specifies the component's background color.
+ * @cssproperty [--calcite-popover-border-color] - Specifies the component's border color.
+ * @cssproperty [--calcite-popover-corner-radius] - Specifies the component's corner radius.
+ * @cssproperty [--calcite-popover-max-size-x] - Specifies the component's maximum width.
+ * @cssproperty [--calcite-popover-text-color] - Specifies the component's text color.
+ * @slot  - A slot for adding custom content.
+ */
+export abstract class Popover extends LitElement {
+  /**
+   * When `true`, clicking outside of the component automatically closes open `calcite-popover`s.
+   *
+   * @default false
+   */
+  accessor autoClose: boolean;
+  /**
+   * When `true`, displays a close button in the component.
+   *
+   * @default false
+   */
+  accessor closable: boolean;
+  /**
+   * When `true`, prevents flipping the component's placement when overlapping its `referenceElement`.
+   *
+   * @default false
+   */
+  accessor flipDisabled: boolean;
+  /** Specifies the component's fallback `placement` for slotted content when it's initial or specified `placement` has insufficient space available. */
+  accessor flipPlacements: FlipPlacement[];
+  /**
+   * When `true`, prevents focus trapping.
+   *
+   * @default false
+   */
+  accessor focusTrapDisabled: boolean;
+  /**
+   * Specifies custom focus trap configuration on the component, where
+   *
+   * `"allowOutsideClick`" allows outside clicks,
+   * `"initialFocus"` enables initial focus,
+   * `"returnFocusOnDeactivate"` returns focus when not active,
+   * `"extraContainers"` specifies additional focusable elements external to the trap, such as 3rd-party components appending elements to the document body, and
+   * `"setReturnFocus"` customizes the element to which focus is returned when the trap is deactivated. Return `false` to prevent focus return, or `undefined` to use the default behavior (returning focus to the element focused before activation).
+   */
+  accessor focusTrapOptions: Partial<FocusTrapOptions>;
+  /** Specifies the component's heading text. */
+  accessor heading: string;
+  /** Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling. */
+  accessor headingLevel: HeadingLevel;
+  /**
+   * Specifies an accessible label for the component.
+   *
+   * @required
+   */
+  accessor label: string;
+  /** Overrides individual strings used by the component. */
+  accessor messageOverrides: { close?: string; };
+  /** Offsets the position of the popover away from the `referenceElement`. */
+  accessor offsetDistance: number;
+  /**
+   * Offsets the position of the component along the `referenceElement`.
+   *
+   * @default 0
+   */
+  accessor offsetSkidding: number;
+  /**
+   * When `true`, displays and positions the component.
+   *
+   * @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;
+  /**
+   * When `true`, removes the caret pointer.
+   *
+   * @default false
+   */
+  accessor pointerDisabled: boolean;
+  /**
+   * The `referenceElement` used to position the component according to its `placement` value.
+   *
+   * Setting 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.
+   *
+   * @required
+   */
+  accessor referenceElement: ReferenceElement | string;
+  /**
+   * Specifies the size of the component.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
+  /**
+   * 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;
+  /**
+   * When `true`, disables automatically toggling the component when its `referenceElement` has been triggered.
+   *
+   * This property can be set to `true` to manage when the component is open.
+   *
+   * @default false
+   */
+  accessor triggerDisabled: boolean;
+  /**
+   * Updates the position of the component.
+   *
+   * @param delayed
+   */
+  reposition(delayed?: boolean): Promise<void>;
+  /**
+   * Sets focus on the component's first focusable element.
+   *
+   * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
+   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   */
+  setFocus(options?: FocusOptions): Promise<void>;
+  /** Updates the element(s) that are used within the focus-trap of the component. */
+  updateFocusTrapElements(): Promise<void>;
+  /** Fires when the component is requested to be closed and before the closing transition begins. */
+  readonly calcitePopoverBeforeClose: 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 calcitePopoverBeforeOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component is closed and animation is complete. */
+  readonly calcitePopoverClose: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component is open and animation is complete. */
+  readonly calcitePopoverOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calcitePopoverBeforeClose: Popover["calcitePopoverBeforeClose"]["detail"];
+    calcitePopoverBeforeOpen: Popover["calcitePopoverBeforeOpen"]["detail"];
+    calcitePopoverClose: Popover["calcitePopoverClose"]["detail"];
+    calcitePopoverOpen: Popover["calcitePopoverOpen"]["detail"];
+  };
+}

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

@@ -1,19 +1,22 @@
+/* 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.80 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap, setAttribute } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { d as defaultOffsetDistance, r as reposition, a as disconnectFloatingUI, f as filterValidFlipPlacements, c as connectFloatingUI, h as hideFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
-import { i as isPrimaryPointerButton, u as isKeyboardTriggeredClick, t as toAriaBoolean, q as queryElementRoots } from "../../chunks/dom.js";
+import { e as defaultOffsetDistance, r as reposition, a as disconnectFloatingUI, f as filterValidFlipPlacements, c as connectFloatingUI, h as hideFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
+import { k as isPrimaryPointerButton, z as isKeyboardTriggeredClick, t as toAriaBoolean, q as queryElementRoots } from "../../chunks/dom.js";
 import { g as guid } from "../../chunks/guid.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
 import { H as Heading } from "../../chunks/Heading.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { F as FloatingArrow } from "../../chunks/FloatingArrow.js";
-import { g as getIconScale } from "../../chunks/component.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useFocusTrap } from "../../chunks/useFocusTrap.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useTopLayer } from "../../chunks/useTopLayer.js";
 import { i as isActivationKey } from "../../chunks/key.js";
 const clickTolerance = 5;
 function isDrag({
@@ -122,7 +125,7 @@ const CSS = {
 const defaultPopoverPlacement = "auto";
 const ARIA_CONTROLS = "aria-controls";
 const ARIA_EXPANDED = "aria-expanded";
-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-popover-max-size-x, 100vw)}.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]) .heading{padding:.5rem .75rem;font-size:var(--calcite-font-size--1);line-height:1.375}:host([scale=m]) .heading{padding:.75rem 1rem;font-size:var(--calcite-font-size-0);line-height:1.375}:host([scale=l]) .heading{padding:1rem 1.25rem;font-size:var(--calcite-font-size-1);line-height:1.375}.position-container .calcite-floating-ui-anim{border-width:1px;border-style:solid;background-color:var(--calcite-popover-background-color, var(--calcite-color-foreground-1));border-color:var(--calcite-popover-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-popover-corner-radius, var(--calcite-corner-radius-round))}.calcite-floating-ui-arrow{fill:var(--calcite-popover-background-color, var(--calcite-color-foreground-1))}.calcite-floating-ui-arrow__stroke{stroke:var(--calcite-popover-border-color, var(--calcite-color-border-3))}.header{display:flex;flex:1 1 auto;align-items:stretch;justify-content:flex-start;border-width:0px;border-bottom-width:1px;border-style:solid;border-block-end-color:var(--calcite-popover-border-color, var(--calcite-color-border-3))}.heading{margin:0;display:block;flex:1 1 auto;align-self:center;white-space:normal;font-weight:var(--calcite-font-weight-medium);word-wrap:break-word;word-break:break-word;color:var(--calcite-popover-text-color, var(--calcite-color-text-1))}.header-container{position:relative;display:flex;height:100%;flex-direction:row;flex-wrap:nowrap;border-radius:.25rem;color:var(--calcite-popover-text-color, var(--calcite-color-text-1))}.header-container.has-header{flex-direction:column}.content{display:flex;height:100%;width:100%;flex-direction:column;flex-wrap:nowrap;align-self:center;word-wrap:break-word;word-break:break-word}.close-button-container{display:flex;overflow:hidden;flex:0 0 auto;border-start-end-radius:var(--calcite-popover-corner-radius, var(--calcite-corner-radius-round));border-end-end-radius:var(--calcite-popover-corner-radius, var(--calcite-corner-radius-round));--calcite-action-corner-radius-start-end: var(--calcite-popover-corner-radius, var(--calcite-corner-radius-sharp));--calcite-action-corner-radius-end-end: var(--calcite-popover-corner-radius, var(--calcite-corner-radius-sharp))}::slotted(calcite-panel),::slotted(calcite-flow){height:100%}: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-popup)}.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-popover-max-size-x, 100vw)}.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]) .heading{padding:.5rem .75rem;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-relative-snug)}:host(:is([scale=s],[scale=m])){--calcite-internal-popover-close-spacing: var(--calcite-spacing-xs)}:host([scale=m]) .heading{padding:.75rem 1rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-relative-snug)}:host([scale=l]){--calcite-internal-popover-close-spacing: var(--calcite-spacing-sm)}:host([scale=l]) .heading{padding:1rem 1.25rem;font-size:var(--calcite-font-size-relative-lg);line-height:var(--calcite-font-line-height-relative-snug)}.position-container .calcite-floating-ui-anim{border-width:1px;border-style:solid;background-color:var(--calcite-popover-background-color, var(--calcite-color-foreground-1));border-color:var(--calcite-popover-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-popover-corner-radius, var(--calcite-corner-radius-round))}.calcite-floating-ui-arrow{fill:var(--calcite-popover-background-color, var(--calcite-color-foreground-1))}.calcite-floating-ui-arrow__stroke{stroke:var(--calcite-popover-border-color, var(--calcite-color-border-3))}.header{display:flex;flex:1 1 auto;align-items:stretch;justify-content:flex-start;border-width:0px;border-bottom-width:1px;border-style:solid;border-block-end-color:var(--calcite-popover-border-color, var(--calcite-color-border-3))}.heading{margin:0;display:block;flex:1 1 auto;align-self:center;white-space:normal;font-weight:var(--calcite-font-weight-medium);word-wrap:break-word;word-break:break-word;color:var(--calcite-popover-text-color, var(--calcite-color-text-1))}.header-container{position:relative;display:flex;height:100%;flex-direction:row;flex-wrap:nowrap;border-radius:.25rem;color:var(--calcite-popover-text-color, var(--calcite-color-text-1))}.header-container.has-header{flex-direction:column}.content{display:flex;height:100%;width:100%;flex-direction:column;flex-wrap:nowrap;align-self:center;word-wrap:break-word;word-break:break-word}.close-button{margin:auto;margin-inline-end:var(--calcite-internal-popover-close-spacing)}.close-button-container{display:flex;flex:0 0 auto}::slotted(calcite-panel),::slotted(calcite-flow){height:100%}:host([hidden]){display:none}[hidden]{display:none}`;
 const manager = new PopoverManager();
 class Popover extends LitElement {
   constructor() {
@@ -147,6 +150,10 @@ class Popover extends LitElement {
     this.transitionRef = createRef();
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
+    this.topLayer = useTopLayer({
+      disabledOverride: () => this.open && !this.referenceEl,
+      target: () => this.floatingEl
+    })(this);
     this.floatingLayout = "vertical";
     this.autoClose = false;
     this.closable = false;
@@ -159,6 +166,7 @@ class Popover extends LitElement {
     this.placement = defaultPopoverPlacement;
     this.pointerDisabled = false;
     this.scale = "m";
+    this.topLayerDisabled = false;
     this.triggerDisabled = false;
     this.calcitePopoverBeforeClose = createEvent({ cancelable: false });
     this.calcitePopoverBeforeOpen = createEvent({ cancelable: false });
@@ -166,7 +174,7 @@ class Popover extends LitElement {
     this.calcitePopoverOpen = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { floatingLayout: [16, {}, { state: true }], referenceEl: [16, {}, { state: true }], autoClose: [7, {}, { reflect: true, type: Boolean }], closable: [7, {}, { reflect: true, type: Boolean }], flipDisabled: [7, {}, { reflect: true, type: Boolean }], flipPlacements: [0, {}, { attribute: false }], focusTrapDisabled: [7, {}, { reflect: true, type: Boolean }], focusTrapOptions: [0, {}, { attribute: false }], heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], label: 1, messageOverrides: [0, {}, { attribute: false }], 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 }], triggerDisabled: [7, {}, { reflect: true, type: Boolean }] };
+    this.properties = { floatingLayout: [16, {}, { state: true }], referenceEl: [16, {}, { state: true }], autoClose: [7, {}, { reflect: true, type: Boolean }], closable: [7, {}, { reflect: true, type: Boolean }], flipDisabled: [7, {}, { reflect: true, type: Boolean }], flipPlacements: [0, {}, { attribute: false }], focusTrapDisabled: [7, {}, { reflect: true, type: Boolean }], focusTrapOptions: [0, {}, { attribute: false }], heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], label: 1, messageOverrides: [0, {}, { attribute: false }], 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 }], triggerDisabled: [7, {}, { reflect: true, type: Boolean }] };
   }
   static {
     this.styles = styles;
@@ -210,6 +218,9 @@ class Popover extends LitElement {
     }
     if (changes.has("referenceElement")) {
       this.referenceElementHandler();
+      if (!this.referenceElement && this.open) {
+        this.topLayer.hide();
+      }
     }
   }
   loaded() {
@@ -224,17 +235,6 @@ class Popover 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();
-    }
-  }
   flipPlacementsHandler() {
     this.setFilteredPlacements();
     this.reposition(true);
@@ -243,7 +243,6 @@ class Popover extends LitElement {
     toggleOpenClose(this);
     this.reposition(true);
     this.setExpandedAttr();
-    this.handlePopover();
   }
   referenceElementHandler() {
     this.setUpReferenceElement();
@@ -270,7 +269,6 @@ class Popover extends LitElement {
       });
     }
     this.addReferences();
-    this.handlePopover();
   }
   getId() {
     return this.el.id || this.guid;
@@ -316,6 +314,7 @@ class Popover extends LitElement {
   }
   onBeforeOpen() {
     this.calcitePopoverBeforeOpen.emit();
+    this.topLayer.show();
   }
   onOpen() {
     this.calcitePopoverOpen.emit();
@@ -328,6 +327,7 @@ class Popover extends LitElement {
     this.calcitePopoverClose.emit();
     hideFloatingUI(this);
     this.focusTrap.deactivate();
+    this.topLayer.hide();
   }
   setArrowEl(el) {
     this.arrowEl = el;
@@ -335,7 +335,7 @@ class Popover extends LitElement {
   }
   renderCloseButton() {
     const { messages, closable } = this;
-    return closable ? keyed(CSS.closeButtonContainer, html`<div class=${safeClassMap(CSS.closeButtonContainer)}><calcite-action appearance=transparent class=${safeClassMap(CSS.closeButton)} @click=${this.hide} .scale=${this.scale} .text=${messages.close}><calcite-icon icon=x .scale=${getIconScale(this.scale)}></calcite-icon></calcite-action></div>`) : null;
+    return closable ? keyed(CSS.closeButtonContainer, html`<div class=${safeClassMap(CSS.closeButtonContainer)}><calcite-action class=${safeClassMap(CSS.closeButton)} icon=x @click=${this.hide} .scale=${this.scale} .text=${messages.close}></calcite-action></div>`) : null;
   }
   renderHeader() {
     const { heading, headingLevel } = this;

package/dist/components/calcite-popover/index.d.ts

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

package/dist/components/calcite-popover/index.js

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

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

@@ -1,29 +1,34 @@
 /// <reference path="../../index.d.ts" />
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 
-export declare class Progress extends LitElement {
-    /** Accessible name for the component. */
-    label: string;
-    /**
-     * When `true` and type is `"indeterminate"`, reverses the animation direction.
-     *
-     * @default false
-     */
-    reversed: boolean;
-    /** Text that displays under the component's indicator. */
-    text: string;
-    /**
-     * Specifies the component type.
-     *
-     * Use `"indeterminate"` if finding actual progress value is impossible.
-     *
-     * @default "determinate"
-     */
-    type: "indeterminate" | "determinate";
-    /**
-     * When `type` is `"determinate"`, specifies the component's value with a range of 0 to 100.
-     *
-     * @default 0
-     */
-    value: number;
-}
+/**
+ * @cssproperty [--calcite-progress-background-color] - Specifies the component's background color.
+ * @cssproperty [--calcite-progress-fill-color] - Specifies the component's fill color.
+ * @cssproperty [--calcite-progress-text-color] - Specifies the component's text color.
+ */
+export abstract class Progress extends LitElement {
+  /** Specifies an accessible label for the component. */
+  accessor label: string;
+  /**
+   * When `true` and type is `"indeterminate"`, reverses the animation direction.
+   *
+   * @default false
+   */
+  accessor reversed: boolean;
+  /** Text that displays under the component's indicator. */
+  accessor text: string;
+  /**
+   * Specifies the component type.
+   *
+   * Use `"indeterminate"` if finding actual progress value is impossible.
+   *
+   * @default "determinate"
+   */
+  accessor type: "indeterminate" | "determinate";
+  /**
+   * When `type` is `"determinate"`, specifies the component's value with a range of 0 to 100.
+   *
+   * @default 0
+   */
+  accessor value: number;
+}

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

@@ -1,8 +1,11 @@
+/* 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.80 */
 import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, safeClassMap, safeStyleMap } from "@arcgis/lumina";
 import { g as getElementDir } from "../../chunks/dom.js";
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host{position:relative;display:block;inline-size:100%}.track,.bar{position:absolute;inset-block-start:0px;block-size:2px}.track{z-index:var(--calcite-z-index);inline-size:100%;overflow:hidden;background-color:var(--calcite-progress-background-color, var(--calcite-color-border-3))}.bar{z-index:var(--calcite-z-index);background-color:var(--calcite-progress-fill-color, var(--calcite-color-brand))}@media(forced-colors:active){.track{background-color:highlightText}.bar{background-color:linkText}}.indeterminate{inline-size:20%;animation:looping-progress-bar-ani calc(var(--calcite-internal-animation-timing-medium) / var(--calcite-internal-duration-factor) * 11 / var(--calcite-internal-duration-factor)) linear infinite}.indeterminate.calcite--rtl{animation-name:looping-progress-bar-ani-rtl}.reversed{animation-direction:reverse}.text{padding-inline:0px;padding-block:1rem 0px;text-align:center;font-size:var(--calcite-font-size--2);line-height:1rem;font-weight:var(--calcite-font-weight-medium);color:var(--calcite-progress-text-color, var(--calcite-color-text-2))}@keyframes looping-progress-bar-ani{0%{transform:translate3d(-100%,0,0)}50%{inline-size:40%}to{transform:translate3d(600%,0,0)}}@keyframes looping-progress-bar-ani-rtl{0%{transform:translate3d(100%,0,0)}50%{inline-size:40%}to{transform:translate3d(-600%,0,0)}}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{position:relative;display:block;inline-size:100%}.track,.bar{position:absolute;inset-block-start:0px;block-size:2px}.track{z-index:var(--calcite-z-index);inline-size:100%;overflow:hidden;background-color:var(--calcite-progress-background-color, var(--calcite-color-border-3))}.bar{z-index:var(--calcite-z-index);background-color:var(--calcite-progress-fill-color, var(--calcite-color-brand))}@media(forced-colors:active){.track{background-color:highlightText}.bar{background-color:linkText}}.indeterminate{inline-size:20%;animation:looping-progress-bar-ani calc(var(--calcite-internal-animation-timing-medium) / var(--calcite-internal-duration-factor) * 11 / var(--calcite-internal-duration-factor)) linear infinite}.indeterminate.calcite--rtl{animation-name:looping-progress-bar-ani-rtl}.reversed{animation-direction:reverse}.text{padding-inline:0px;padding-block:1rem 0px;text-align:center;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-progress-text-color, var(--calcite-color-text-2))}@keyframes looping-progress-bar-ani{0%{transform:translate3d(-100%,0,0)}50%{inline-size:40%}to{transform:translate3d(600%,0,0)}}@keyframes looping-progress-bar-ani-rtl{0%{transform:translate3d(100%,0,0)}50%{inline-size:40%}to{transform:translate3d(-600%,0,0)}}:host([hidden]){display:none}[hidden]{display:none}`;
 const CSS = {
   track: "track",
   bar: "bar",