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

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

@@ -1,17 +1,35 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { InteractiveComponent } from '../../utils/interactive';
-import { HeadingLevel } from '../functional/Heading';
-import { FlipPlacement, LogicalPlacement, OverlayPositioning } from '../../utils/floating-ui';
-import { CollapseDirection, Scale } from '../interfaces';
-import { IconName } from '../calcite-icon/interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { HeadingLevel } from "../functional/Heading.js";
+import type { FlipPlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui.js";
+import type { CollapseDirection, Scale } from "../interfaces.js";
+import type { IconName } from "../calcite-icon/interfaces.js";
 
 /**
+ * @cssproperty [--calcite-panel-corner-radius] - Specifies the component's corner radius.
+ * @cssproperty [--calcite-panel-heading-text-color] - Specifies the text color of the component's `heading`.
+ * @cssproperty [--calcite-panel-icon-color] - Specifies the color of the component's icon.
+ * @cssproperty [--calcite-panel-description-text-color] - Specifies the text color of the component's `description`.
+ * @cssproperty [--calcite-panel-border-color] - Specifies the component's border color.
+ * @cssproperty [--calcite-panel-background-color] - Specifies the component's background color.
+ * @cssproperty [--calcite-panel-header-background-color] - Specifies the background color of the component's header.
+ * @cssproperty [--calcite-panel-header-action-background-color] - Specifies the background color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions`.
+ * @cssproperty [--calcite-panel-header-action-background-color-hover] - Specifies the background color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when hovered.
+ * @cssproperty [--calcite-panel-header-action-background-color-press] - Specifies the background color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when pressed.
+ * @cssproperty [--calcite-panel-header-action-text-color] - Specifies the text color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions`.
+ * @cssproperty [--calcite-panel-header-action-text-color-press] - Specifies the text color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when pressed or hovered.
+ * @cssproperty [--calcite-panel-footer-background-color] - Specifies the background color of the component's footer.
+ * @cssproperty [--calcite-panel-space] - Specifies the padding of the component's `"unnamed (default)"` slot.
+ * @cssproperty [--calcite-panel-header-content-space] - Specifies the padding of the `"header-content"` slot.
+ * @cssproperty [--calcite-panel-footer-space] - Specifies the padding of the component's footer.
+ * @cssproperty [--calcite-popover-border-color] - Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s.
+ * @cssproperty [--calcite-panel-content-space] - [Deprecated] Use `--calcite-panel-space` instead. Specifies the padding of the component's content.
+ * @cssproperty [--calcite-panel-footer-padding] - [Deprecated] Use `--calcite-panel-footer-space` instead. Specifies the padding of the component's footer.
+ * @cssproperty [--calcite-panel-header-border-block-end] - [Deprecated] Use `--calcite-panel-border-color` instead. Specifies the component header's block end border.
  * @slot  - A slot for adding custom content.
  * @slot [action-bar] - A slot for adding a `calcite-action-bar` to the component.
  * @slot [alerts] - A slot for adding `calcite-alert`s to the component.
- * @slot [content-bottom] - A slot for adding content below the unnamed (default) slot and above the footer slot (if populated)
+ * @slot [content-bottom] - A slot for adding content below the unnamed (default) slot and above the footer slot (if populated).
  * @slot [content-top] - A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated).
  * @slot [header-actions-start] - A slot for adding actions or content to the start side of the header.
  * @slot [header-actions-end] - A slot for adding actions or content to the end side of the header.
@@ -19,140 +37,149 @@ import { IconName } from '../calcite-icon/interfaces';
  * @slot [header-menu-actions] - A slot for adding an overflow menu with actions inside a `calcite-dropdown`.
  * @slot [fab] - A slot for adding a `calcite-fab` (floating action button) to perform an action.
  * @slot [footer] - A slot for adding custom content to the component's footer. Should not be used with the `"footer-start"` or `"footer-end"` slots.
- * @slot [footer-end] - A slot for adding a trailing footer custom content. Should not be used with the `"footer"` slot.
- * @slot [footer-start] - A slot for adding a leading footer custom content. Should not be used with the `"footer"` slot.
+ * @slot [footer-end] - A slot for adding custom content to a trailing footer. Should not be used with the `"footer"` slot.
+ * @slot [footer-start] - A slot for adding custom content to a leading footer. Should not be used with the `"footer"` slot.
  */
-export declare class Panel extends LitElement {
-    /** Passes a function to run before the component closes. */
-    beforeClose: () => Promise<void>;
-    /**
-     * When `true`, displays a close button in the trailing side of the header.
-     *
-     * @default false
-     */
-    closable: boolean;
-    /**
-     * When `true`, the component will be hidden.
-     *
-     * @default false
-     */
-    get closed(): boolean;
-    set closed(value: boolean);
-    /**
-     * When `collapsible` is present, specifies the direction of the collapse icon.
-     *
-     * @default "down"
-     */
-    collapseDirection: CollapseDirection;
-    /**
-     * When `true`, hides the component's content area.
-     *
-     * @default false
-     */
-    collapsed: boolean;
-    /**
-     * When `true`, the component is collapsible.
-     *
-     * @default false
-     */
-    collapsible: boolean;
-    /** A description for the component. */
-    description: string;
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     *
-     * @default false
-     */
-    disabled: boolean;
-    /** 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;
-    /** Specifies an icon to display. */
-    icon: IconName;
-    /**
-     * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
-     *
-     * @default false
-     */
-    iconFlipRtl: boolean;
-    /**
-     * When `true`, a busy indicator is displayed.
-     *
-     * @default false
-     */
-    loading: boolean;
-    /** Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available. */
-    menuFlipPlacements: FlipPlacement[];
-    /**
-     * When `true`, the action menu items in the `header-menu-actions` slot are open.
-     *
-     * @default false
-     */
-    menuOpen: boolean;
-    /**
-     * Determines where the action menu will be positioned.
-     *
-     * @default "bottom-end"
-     */
-    menuPlacement: LogicalPlacement;
-    /** Use this property to override individual strings used by the component. */
-    messageOverrides?: typeof this.messages._overrides;
-    /**
-     * 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"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
-     *
-     * @default "absolute"
-     */
-    overlayPositioning: OverlayPositioning;
-    /**
-     * Specifies the size of the component.
-     *
-     * @default "m"
-     */
-    scale: Scale;
-    /**
-     * Scrolls the component's content to a specified set of coordinates.
-     *
-     * @example
-     * myCalciteFlowItem.scrollContentTo({
-     *   left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.
-     *   top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element
-     *   behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).
-     * });
-     * @param options - allows specific coordinates to be defined.
-     * @returns - promise that resolves once the content is scrolled to.
-     */
-    scrollContentTo(options?: ScrollToOptions): 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>;
-    /** Fires when the close button is clicked. */
-    readonly calcitePanelClose: TargetedEvent<this, void>;
-    /** Fires when the component's content area is collapsed. */
-    readonly calcitePanelCollapse: TargetedEvent<this, void>;
-    /** Fires when the component's content area is expanded. */
-    readonly calcitePanelExpand: TargetedEvent<this, void>;
-    /** Fires when the content is scrolled. */
-    readonly calcitePanelScroll: TargetedEvent<this, void>;
-    /** Fires when the collapse button is clicked. */
-    readonly calcitePanelToggle: TargetedEvent<this, void>;
-    private messages: Partial<{
-        close: string;
-        options: string;
-        collapse: string;
-        expand: string;
-    }> & import('@arcgis/lumina/controllers').T9nMeta<{
-        close: string;
-        options: string;
-        collapse: string;
-        expand: string;
-    }>;
-}
+export abstract class Panel extends LitElement {
+  /** Passes a function to run before the component closes. */
+  accessor beforeClose: () => Promise<void>;
+  /**
+   * When `true`, displays a close button in the component.
+   *
+   * @default false
+   */
+  accessor closable: boolean;
+  /**
+   * When `true`, the component will be hidden.
+   *
+   * @default false
+   */
+  accessor closed: boolean;
+  /**
+   * When `true`, hides the component's content area.
+   *
+   * @default false
+   */
+  accessor collapsed: boolean;
+  /**
+   * When `collapsible` is `true`, specifies the direction of the collapse icon.
+   *
+   * @default "down"
+   */
+  accessor collapseDirection: CollapseDirection;
+  /**
+   * When `true`, the component is collapsible.
+   *
+   * @default false
+   */
+  accessor collapsible: boolean;
+  /** Specifies a description for the component. */
+  accessor description: string;
+  /**
+   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /** 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 icon to display. */
+  accessor icon: IconName;
+  /**
+   * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
+   *
+   * @default false
+   */
+  accessor iconFlipRtl: boolean;
+  /**
+   * When `true`, a busy indicator is displayed.
+   *
+   * @default false
+   */
+  accessor loading: boolean;
+  /** Specifies the component's fallback `menuPlacement` when it's initial or specified `menuPlacement` has insufficient space available. */
+  accessor menuFlipPlacements: FlipPlacement[];
+  /**
+   * When `true`, the action menu items in the `header-menu-actions` slot are open.
+   *
+   * @default false
+   */
+  accessor menuOpen: boolean;
+  /**
+   * Determines where the action menu will be positioned.
+   *
+   * @default "bottom-end"
+   */
+  accessor menuPlacement: LogicalPlacement;
+  /** Overrides individual strings used by the component. */
+  accessor messageOverrides: {
+      close?: string;
+      options?: string;
+      collapse?: string;
+      expand?: string;
+  };
+  /**
+   * 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;
+  /**
+   * 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;
+  /**
+   * Scrolls the component's content to a specified set of coordinates.
+   *
+   * @param options - allows specific coordinates to be defined.
+   * @returns promise that resolves once the content is scrolled to.
+   * @example
+   * myCalciteFlowItem.scrollContentTo({
+   *   left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.
+   *   top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element
+   *   behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).
+   * });
+   */
+  scrollContentTo(options?: ScrollToOptions): 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>;
+  /** Fires when the close button is clicked. */
+  readonly calcitePanelClose: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component's content area is collapsed. */
+  readonly calcitePanelCollapse: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component's content area is expanded. */
+  readonly calcitePanelExpand: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the content is scrolled. */
+  readonly calcitePanelScroll: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the collapse button is clicked. */
+  readonly calcitePanelToggle: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calcitePanelClose: Panel["calcitePanelClose"]["detail"];
+    calcitePanelCollapse: Panel["calcitePanelCollapse"]["detail"];
+    calcitePanelExpand: Panel["calcitePanelExpand"]["detail"];
+    calcitePanelScroll: Panel["calcitePanelScroll"]["detail"];
+    calcitePanelToggle: Panel["calcitePanelToggle"]["detail"];
+  };
+}

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

@@ -1,20 +1,23 @@
+/* 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.81 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, html, nothing } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { createRef, ref } from "lit-html/directives/ref.js";
-import { a as slotChangeHasAssignedElement, s as slotChangeGetAssignedElements } from "../../chunks/dom.js";
-import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { s as slotChangeHasAssignedElement, b as slotChangeGetAssignedElements } from "../../chunks/dom.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { c as createObserver, u as updateRefObserver } from "../../chunks/observers.js";
-import { S as SLOTS$1 } from "../../chunks/resources2.js";
+import { S as SLOTS$1 } from "../../chunks/resources.js";
 import { H as Heading } from "../../chunks/Heading.js";
-import { e as defaultEndMenuPlacement } from "../../chunks/floating-ui.js";
+import { b as defaultEndMenuPlacement } from "../../chunks/floating-ui.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { s as styles$1 } from "../../chunks/header.js";
-import { C as CSS, S as SLOTS, I as ICONS, a as IDS } from "../../chunks/resources3.js";
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;overflow:hidden;border-radius:var(--calcite-panel-corner-radius, var(--calcite-corner-radius-sharp))}slot[name=alerts]::slotted(calcite-alert){block-size:0}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){--calcite-internal-panel-default-space: var(--calcite-spacing-sm);--calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-sm-plus)}:host([scale=s]) .header-content .heading{font-size:var(--calcite-font-size--1)}:host([scale=s]) .header-content .description{font-size:var(--calcite-font-size--2)}:host([scale=s]) .header-content .icon{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]){--calcite-internal-panel-default-space: var(--calcite-spacing-md);--calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-md-plus)}:host([scale=m]) .header-content .heading{font-size:var(--calcite-font-size-0)}:host([scale=m]) .header-content .description{font-size:var(--calcite-font-size--1)}:host([scale=m]) .header-content .icon{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]){--calcite-internal-panel-default-space: var(--calcite-spacing-lg);--calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-xl)}:host([scale=l]) .header-content .heading{font-size:var(--calcite-font-size-1)}:host([scale=l]) .header-content .description{font-size:var(--calcite-font-size-0)}:host([scale=l]) .header-content .icon{margin-inline-end:var(--calcite-spacing-lg)}.content-top,.content-bottom{display:flex;align-items:flex-start;align-self:stretch;padding:var(--calcite-internal-panel-default-space);border-block-start:1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3));background-color:var(--calcite-panel-background-color, var(--calcite-color-foreground-1))}.container{position:relative;margin:0;display:flex;inline-size:100%;flex:1 1 auto;flex-direction:column;align-items:stretch;overflow:hidden;background-color:var(--calcite-color-background);padding:0;color:var(--calcite-color-text-2);transition:max-block-size var(--calcite-animation-timing),inline-size var(--calcite-animation-timing);box-sizing:border-box;font-size:var(--calcite-font-size--1)}.container *{box-sizing:border-box}.header{z-index:var(--calcite-z-index-header);display:flex;flex-direction:column;background-color:var(--calcite-panel-header-background-color, var(--calcite-color-foreground-1));border-block-end:1px solid var(--calcite-panel-border-color, var(--calcite-panel-header-border-block-end, var(--calcite-color-border-3)))}.header-container{display:flex;inline-size:100%;flex-direction:row;align-items:stretch;justify-content:flex-start;flex:0 0 auto}.header-container--border-end{border-block-end:1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3))}.action-bar-container{inline-size:100%}.action-bar-container ::slotted(calcite-action-bar){inline-size:100%}.header-content{display:flex;flex-direction:column;overflow:hidden;padding-inline:.75rem;padding-block:.875rem;margin-inline-end:auto;justify-content:center}.header-content .heading-text-content{flex:1 1 auto;overflow:hidden}.header-content .heading,.header-content .description{display:block;flex:none;overflow-wrap:break-word;padding:0;line-height:var(--calcite-font-line-height-relative-snug)}.header-content .heading{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-panel-heading-text-color, var(--calcite-color-text-1))}.header-content .heading:only-child{margin-block-end:0px}.header-content .description{color:var(--calcite-panel-description-text-color, var(--calcite-color-text-2))}#close,#collapse,.back-button,calcite-action-menu{--calcite-action-background-color: var(--calcite-panel-header-action-background-color);--calcite-action-background-color-hover: var(--calcite-panel-header-action-background-color-hover);--calcite-action-background-color-press: var(--calcite-panel-header-action-background-color-press);--calcite-action-text-color: var(--calcite-panel-header-action-text-color);--calcite-action-text-color-press: var(--calcite-panel-header-action-text-color-press)}.back-button{border-width:0px;border-style:solid;border-inline-end-width:1px;border-color:var(--calcite-panel-border-color, var(--calcite-color-border-3))}.header-actions{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch}.header-actions--end{margin-inline-start:auto}.content-wrapper{position:relative;display:flex;block-size:100%;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch;overflow:auto;color:var(--calcite-color-text-2);outline-color:transparent;padding:var(--calcite-panel-space, var(--calcite-panel-content-space, 0));background:var(--calcite-panel-background-color, var(--calcite-color-background))}.content-wrapper:focus-visible{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus);outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.header-content{flex:1 1 auto;justify-content:center;padding-block:var(--calcite-internal-panel-header-vertical-padding);padding-inline:var(--calcite-internal-panel-default-space)}.header-content.header--slotted-content{padding:var(--calcite-panel-header-content-space, var(--calcite-internal-panel-header-vertical-padding) var(--calcite-internal-panel-default-space))}.header-content.header--non-slotted-content{align-items:center;flex-direction:row}.footer{margin-block-start:auto;display:flex;flex-direction:row;align-content:space-between;align-items:center;justify-content:center;font-size:var(--calcite-font-size--2);line-height:1.375;border-block-start:1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3));padding:var(--calcite-panel-footer-space, var(--calcite-panel-footer-padding, var(--calcite-internal-panel-default-space)));background-color:var(--calcite-panel-footer-background-color, var(--calcite-color-foreground-1))}.footer-content{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:center}.footer-start{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:flex-start;margin-inline-end:auto;gap:var(--calcite-internal-panel-default-space)}.footer-end{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:flex-end;margin-inline-start:auto;gap:var(--calcite-internal-panel-default-space)}.fab-container{position:sticky;inset-block-end:0px;z-index:var(--calcite-z-index-sticky);margin-block:0px;margin-inline:auto;display:block;padding:.5rem;inset-inline:0;inline-size:fit-content}calcite-icon{--calcite-icon-color: var(--calcite-panel-icon-color, var(--calcite-color-text-1))}:host([hidden]){display:none}[hidden]{display:none}`;
+import { u as useInteractive } from "../../chunks/useInteractive.js";
+import { C as CSS, S as SLOTS, I as ICONS, a as IDS } from "../../chunks/resources5.js";
+const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;box-sizing:border-box;display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;overflow:hidden;border-radius:var(--calcite-panel-corner-radius, var(--calcite-corner-radius-sharp))}slot[name=alerts]::slotted(calcite-alert){block-size:0}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){--calcite-internal-panel-default-space: var(--calcite-spacing-sm);--calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-sm-plus)}:host([scale=s]) .header-content .heading{font-size:var(--calcite-font-size--1)}:host([scale=s]) .header-content .description{font-size:var(--calcite-font-size--2)}:host([scale=s]) .header-content .icon{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]){--calcite-internal-panel-default-space: var(--calcite-spacing-md);--calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-md-plus)}:host([scale=m]) .header-content .heading{font-size:var(--calcite-font-size-0)}:host([scale=m]) .header-content .description{font-size:var(--calcite-font-size--1)}:host([scale=m]) .header-content .icon{margin-inline-end:var(--calcite-spacing-md)}:host(:is([scale=s],[scale=m])){--calcite-internal-panel-action-spacing: var(--calcite-spacing-xxs)}:host([scale=l]){--calcite-internal-panel-action-spacing: var(--calcite-spacing-xs);--calcite-internal-panel-default-space: var(--calcite-spacing-lg);--calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-xl)}:host([scale=l]) .header-content .heading{font-size:var(--calcite-font-size-1)}:host([scale=l]) .header-content .description{font-size:var(--calcite-font-size-0)}:host([scale=l]) .header-content .icon{margin-inline-end:var(--calcite-spacing-lg)}.content-top,.content-bottom{display:flex;align-items:flex-start;align-self:stretch;padding:var(--calcite-internal-panel-default-space);border-block-start:1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3));background-color:var(--calcite-panel-background-color, var(--calcite-color-foreground-1))}.container{position:relative;margin:0;display:flex;inline-size:100%;flex:1 1 auto;flex-direction:column;align-items:stretch;overflow:hidden;background-color:var(--calcite-color-background);padding:0;font-size:var(--calcite-font-size-relative-base);color:var(--calcite-color-text-2);transition:max-block-size var(--calcite-animation-timing),inline-size var(--calcite-animation-timing);box-sizing:border-box;font-size:var(--calcite-font-size--1)}.container *{box-sizing:border-box}.header{z-index:var(--calcite-z-index-header);display:flex;flex-direction:column;background-color:var(--calcite-panel-header-background-color, var(--calcite-color-foreground-1));border-block-end:1px solid var(--calcite-panel-border-color, var(--calcite-panel-header-border-block-end, var(--calcite-color-border-3)))}.header-container{display:flex;inline-size:100%;flex-direction:row;align-items:stretch;justify-content:flex-start;flex:0 0 auto}.header-container--border-end{border-block-end:1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3))}.action-bar-container{inline-size:100%}.action-bar-container ::slotted(calcite-action-bar){inline-size:100%}.header-content{display:flex;flex-direction:column;overflow:hidden;padding-inline:.75rem;padding-block:.875rem;margin-inline-end:auto;justify-content:center}.header-content .heading-text-content{flex:1 1 auto;overflow:hidden}.header-content .heading,.header-content .description{display:block;flex:none;overflow-wrap:break-word;padding:0;line-height:var(--calcite-font-line-height-relative-snug)}.header-content .heading{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-panel-heading-text-color, var(--calcite-color-text-1))}.header-content .heading:only-child{margin-block-end:0px}.header-content .description{color:var(--calcite-panel-description-text-color, var(--calcite-color-text-2))}#close,#collapse,calcite-action-menu{--calcite-action-background-color: var(--calcite-panel-header-action-background-color);--calcite-action-background-color-hover: var(--calcite-panel-header-action-background-color-hover);--calcite-action-background-color-press: var(--calcite-panel-header-action-background-color-press);--calcite-action-text-color: var(--calcite-panel-header-action-text-color);--calcite-action-text-color-press: var(--calcite-panel-header-action-text-color-press)}.header-actions{display:flex;flex-direction:row;flex-wrap:nowrap;margin:auto;gap:var(--calcite-internal-panel-action-spacing)}.header-actions--start{margin-inline-start:var(--calcite-internal-panel-action-spacing)}.header-actions--end{margin-inline-end:var(--calcite-internal-panel-action-spacing)}.content-wrapper{position:relative;display:flex;block-size:100%;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch;overflow:auto;color:var(--calcite-color-text-2);outline-color:transparent;padding:var(--calcite-panel-space, var(--calcite-panel-content-space, 0));background:var(--calcite-panel-background-color, var(--calcite-color-background))}.content-wrapper:focus-visible{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.header-content{flex:1 1 auto;justify-content:center;padding-block:var(--calcite-internal-panel-header-vertical-padding);padding-inline:var(--calcite-internal-panel-default-space)}.header-content.header--slotted-content{padding:var(--calcite-panel-header-content-space, var(--calcite-internal-panel-header-vertical-padding) var(--calcite-internal-panel-default-space))}.header-content.header--non-slotted-content{align-items:center;flex-direction:row}.footer{margin-block-start:auto;display:flex;flex-direction:row;align-content:space-between;align-items:center;justify-content:center;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug);border-block-start:1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3));padding:var(--calcite-panel-footer-space, var(--calcite-panel-footer-padding, var(--calcite-internal-panel-default-space)));background-color:var(--calcite-panel-footer-background-color, var(--calcite-color-foreground-1))}.footer-content{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:center}.footer-start{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:flex-start;margin-inline-end:auto;gap:var(--calcite-internal-panel-default-space)}.footer-end{display:flex;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:flex-end;margin-inline-start:auto;gap:var(--calcite-internal-panel-default-space)}.fab-container{position:sticky;inset-block-end:0px;z-index:var(--calcite-z-index-sticky);margin-block:0px;margin-inline:auto;display:block;padding:.5rem;inset-inline:0;inline-size:fit-content}calcite-icon{--calcite-icon-color: var(--calcite-panel-icon-color, var(--calcite-ui-icon-color, var(--calcite-color-text-1)))}:host([hidden]){display:none}[hidden]{display:none}`;
 class Panel extends LitElement {
   constructor() {
     super();
@@ -23,6 +26,7 @@ class Panel extends LitElement {
     this.messages = useT9n();
     this._closed = false;
     this.focusSetter = useSetFocus()(this);
+    this.interactiveContainer = useInteractive(this);
     this.hasActionBar = false;
     this.hasContentBottom = false;
     this.hasContentTop = false;
@@ -46,6 +50,7 @@ class Panel extends LitElement {
     this.menuPlacement = defaultEndMenuPlacement;
     this.overlayPositioning = "absolute";
     this.scale = "m";
+    this.topLayerDisabled = false;
     this.calcitePanelClose = createEvent({ cancelable: true });
     this.calcitePanelCollapse = createEvent({ cancelable: false });
     this.calcitePanelExpand = createEvent({ cancelable: false });
@@ -55,7 +60,7 @@ class Panel extends LitElement {
     this.listen("calcitePanelClose", this.panelCloseHandler);
   }
   static {
-    this.properties = { hasActionBar: [16, {}, { state: true }], hasContentBottom: [16, {}, { state: true }], hasContentTop: [16, {}, { state: true }], hasEndActions: [16, {}, { state: true }], hasFab: [16, {}, { state: true }], hasFooterContent: [16, {}, { state: true }], hasFooterEndContent: [16, {}, { state: true }], hasFooterStartContent: [16, {}, { state: true }], hasHeaderContent: [16, {}, { state: true }], hasMenuItems: [16, {}, { state: true }], hasStartActions: [16, {}, { state: true }], showHeaderContent: [16, {}, { state: true }], beforeClose: [0, {}, { attribute: false }], closable: [7, {}, { reflect: true, type: Boolean }], closed: [7, {}, { reflect: true, type: Boolean }], collapseDirection: 1, collapsed: [7, {}, { reflect: true, type: Boolean }], collapsible: [7, {}, { reflect: true, type: Boolean }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], icon: [3, { type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], loading: [7, {}, { reflect: true, type: Boolean }], menuFlipPlacements: [0, {}, { attribute: false }], menuOpen: [7, {}, { reflect: true, type: Boolean }], menuPlacement: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], overlayPositioning: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }] };
+    this.properties = { hasActionBar: [16, {}, { state: true }], hasContentBottom: [16, {}, { state: true }], hasContentTop: [16, {}, { state: true }], hasEndActions: [16, {}, { state: true }], hasFab: [16, {}, { state: true }], hasFooterContent: [16, {}, { state: true }], hasFooterEndContent: [16, {}, { state: true }], hasFooterStartContent: [16, {}, { state: true }], hasHeaderContent: [16, {}, { state: true }], hasMenuItems: [16, {}, { state: true }], hasStartActions: [16, {}, { state: true }], showHeaderContent: [16, {}, { state: true }], beforeClose: [0, {}, { attribute: false }], closable: [7, {}, { reflect: true, type: Boolean }], closed: [7, {}, { reflect: true, type: Boolean }], collapseDirection: 1, collapsed: [7, {}, { reflect: true, type: Boolean }], collapsible: [7, {}, { reflect: true, type: Boolean }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], icon: [3, { type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], loading: [7, {}, { reflect: true, type: Boolean }], menuFlipPlacements: [0, {}, { attribute: false }], menuOpen: [7, {}, { reflect: true, type: Boolean }], menuPlacement: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], overlayPositioning: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }] };
   }
   static {
     this.styles = [styles$1, styles];
@@ -84,9 +89,6 @@ class Panel extends LitElement {
       }
     }
   }
-  updated() {
-    updateHostInteraction(this);
-  }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.resizeObserver?.disconnect();
@@ -215,8 +217,8 @@ class Panel extends LitElement {
     return keyed("header-actions-end", html`<div class=${safeClassMap({ [CSS.headerActionsEnd]: true, [CSS.headerActions]: true })} .hidden=${!showContainer}>${slotNode}${this.renderMenu()}${collapseNode}${closeNode}</div>`);
   }
   renderMenu() {
-    const { hasMenuItems, messages, menuOpen, menuFlipPlacements, menuPlacement } = this;
-    return keyed("menu", html`<calcite-action-menu .flipPlacements=${menuFlipPlacements ?? ["top", "bottom"]} .hidden=${!hasMenuItems} .label=${messages.options} .open=${menuOpen} .overlayPositioning=${this.overlayPositioning} .placement=${menuPlacement}><calcite-action class=${safeClassMap(CSS.menuAction)} .icon=${ICONS.menu} .scale=${this.scale} slot=${SLOTS$1.trigger} .text=${messages.options}></calcite-action><slot name=${SLOTS.headerMenuActions} @slotchange=${this.handleHeaderMenuActionsSlotChange}></slot></calcite-action-menu>`);
+    const { hasMenuItems, messages, menuOpen, menuFlipPlacements, menuPlacement, scale } = this;
+    return keyed("menu", html`<calcite-action-menu .flipPlacements=${menuFlipPlacements ?? ["top", "bottom"]} .hidden=${!hasMenuItems} .label=${messages.options} .open=${menuOpen} .overlayPositioning=${this.overlayPositioning} .placement=${menuPlacement} .scale=${scale} .topLayerDisabled=${this.topLayerDisabled}><calcite-action class=${safeClassMap(CSS.menuAction)} .icon=${ICONS.menu} .scale=${scale} slot=${SLOTS$1.trigger} .text=${messages.options}></calcite-action><slot name=${SLOTS.headerMenuActions} @slotchange=${this.handleHeaderMenuActionsSlotChange}></slot></calcite-action-menu>`);
   }
   renderHeaderNode() {
     const { hasHeaderContent, hasStartActions, hasEndActions, closable, collapsible, hasMenuItems, hasActionBar, hasContentTop } = this;
@@ -245,7 +247,7 @@ class Panel extends LitElement {
   render() {
     const { disabled, loading, closed } = this;
     const panelNode = html`<article .ariaBusy=${loading} class=${safeClassMap(CSS.container)} .hidden=${closed} ${ref(this.containerRef)}>${this.renderHeaderNode()}${this.renderContent()}${this.renderContentBottom()}${this.renderFooterNode()}${keyed("alerts", html`<slot name=${SLOTS.alerts} @slotchange=${this.handleAlertsSlotChange}></slot>`)}</article>`;
-    return InteractiveContainer({ disabled, children: html`${loading ? html`<calcite-scrim .loading=${loading}></calcite-scrim>` : null}${panelNode}` });
+    return this.interactiveContainer({ disabled, children: html`${loading ? html`<calcite-scrim .loading=${loading}></calcite-scrim>` : null}${panelNode}` });
   }
 }
 customElement("calcite-panel", Panel);

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

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