@esri/calcite-components 5.2.0-next.9 → 5.2.0-next.90

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

@@ -1,16 +1,25 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { NumberingSystem } from "../../utils/locale.js";
-import type { Scale } from "../interfaces.js";
+import type { Scale } from "../types.js";
+
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's item color. */
+  "--calcite-pagination-color": "*";
+  /** Specifies the component's item color when hovered or selected. */
+  "--calcite-pagination-color-hover": "*";
+  /** Specifies the component's item bottom border color when hovered. */
+  "--calcite-pagination-color-border-hover": "*";
+  /** Specifies the component's item bottom border color when selected. */
+  "--calcite-pagination-color-border-active": "*";
+  /** Specifies the component's item background color when active. */
+  "--calcite-pagination-background-color": "*";
+  /** Specifies the component's chevron item background color when hovered. */
+  "--calcite-pagination-icon-color-background-hover": "*";
+}
+}
 
-/**
- * @cssproperty [--calcite-pagination-color] - Specifies the component's item color.
- * @cssproperty [--calcite-pagination-color-hover] - Specifies the component's item color when hovered or selected.
- * @cssproperty [--calcite-pagination-color-border-hover] - Specifies the component's item bottom border color when hovered.
- * @cssproperty [--calcite-pagination-color-border-active] - Specifies the component's item bottom border color when selected.
- * @cssproperty [--calcite-pagination-background-color] - Specifies the component's item background color when active.
- * @cssproperty [--calcite-pagination-icon-color-background-hover] - Specifies the component's chevron item background color when hovered.
- */
 export abstract class Pagination extends LitElement {
   /**
    * When `true`, number values are displayed with a group separator corresponding to the language and country format.
@@ -18,12 +27,16 @@ export abstract class Pagination extends LitElement {
    * @default false
    */
   accessor groupSeparator: boolean;
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      next?: string;
-      previous?: string;
-      first?: string;
-      last?: string;
+      next?: string | undefined;
+      previous?: string | undefined;
+      first?: string | undefined;
+      last?: string | undefined;
   };
   /** Specifies the Unicode numeral system used by the component for localization. */
   accessor numberingSystem: NumberingSystem | undefined;

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

@@ -8,7 +8,7 @@ import { c as createObserver } from "../../chunks/observers.js";
 import { b as breakpoints } from "../../chunks/responsive.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 const CSS = {
   list: "list",
   listItem: "list-item",
@@ -40,8 +40,8 @@ class Pagination extends LitElement {
     super(...arguments);
     this.resizeHandler = ({ contentRect: { width } }) => this.setMaxItemsToBreakpoint(width);
     this.resizeObserver = createObserver("resize", (entries) => entries.forEach(this.resizeHandler));
-    this.messages = useT9n();
-    this.focusSetter = useSetFocus()(this);
+    this.messages = useT9n({ blocking: true });
+    this.focusSetter = useFocusable()(this);
     this.isXXSmall = false;
     this.lastStartItem = 1;
     this.maxItems = maxItemBreakpoints.xxsmall;

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

@@ -2,37 +2,79 @@
 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";
+import type { CollapseDirection, Scale } from "../types.js";
+import type { IconName } from "../calcite-icon/types.js";
+
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's corner radius. */
+  "--calcite-panel-corner-radius": "*";
+  /** Specifies the text color of the component's `heading`. */
+  "--calcite-panel-heading-text-color": "*";
+  /** Specifies the color of the component's icon. */
+  "--calcite-panel-icon-color": "*";
+  /** Specifies the text color of the component's `description`. */
+  "--calcite-panel-description-text-color": "*";
+  /** Specifies the component's border color. */
+  "--calcite-panel-border-color": "*";
+  /** Specifies the component's background color. */
+  "--calcite-panel-background-color": "*";
+  /** Specifies the padding of the component's `content-top` slot. */
+  "--calcite-panel-content-top-space": "*";
+  /** Specifies the padding of the component's `content-bottom` slot. */
+  "--calcite-panel-content-bottom-space": "*";
+  /** Specifies the padding of the component's `header-top` slot. */
+  "--calcite-panel-header-top-space": "*";
+  /** Specifies the background color of the component's header. */
+  "--calcite-panel-header-background-color": "*";
+  /** Specifies the background color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions`. */
+  "--calcite-panel-header-action-background-color": "*";
+  /** Specifies the background color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when hovered. */
+  "--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 pressed. */
+  "--calcite-panel-header-action-background-color-press": "*";
+  /** Specifies the text color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions`. */
+  "--calcite-panel-header-action-text-color": "*";
+  /** Specifies the text color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when pressed or hovered. */
+  "--calcite-panel-header-action-text-color-press": "*";
+  /** Specifies the background color of the component's footer. */
+  "--calcite-panel-footer-background-color": "*";
+  /** Specifies the padding of the component's `unnamed (default)` slot. */
+  "--calcite-panel-space": "*";
+  /** Specifies the padding of the component's `header-content` slot. */
+  "--calcite-panel-header-content-space": "*";
+  /** Specifies the padding of the component's footer. */
+  "--calcite-panel-footer-space": "*";
+  /** 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. */
+  "--calcite-popover-border-color": "*";
+  /**
+   * Specifies the padding of the component's content.
+   *
+   * @deprecated in v3.0.0, removal target v6.0.0 - Use `--calcite-panel-space` instead.
+   */
+  "--calcite-panel-content-space": "*";
+  /**
+   * Specifies the padding of the component's footer.
+   *
+   * @deprecated in v3.0.0, removal target v6.0.0 - Use `--calcite-panel-footer-space` instead.
+   */
+  "--calcite-panel-footer-padding": "*";
+  /**
+   * Specifies the component header's block end border.
+   *
+   * @deprecated in v3.0.0, removal target v6.0.0 - Use `--calcite-panel-border-color` instead.
+   */
+  "--calcite-panel-header-border-block-end": "*";
+}
+}
 
 /**
- * @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-content-top-space] - Specifies the padding of the component's `content-top` slot.
- * @cssproperty [--calcite-panel-content-bottom-space] - Specifies the padding of the component's `content-bottom` slot.
- * @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 component's `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] in v3.0.0, removal target v6.0.0 - Use `--calcite-panel-space` instead. Specifies the padding of the component's content.
- * @cssproperty [--calcite-panel-footer-padding] - [Deprecated] in v3.0.0, removal target v6.0.0 - Use `--calcite-panel-footer-space` instead. Specifies the padding of the component's footer.
- * @cssproperty [--calcite-panel-header-border-block-end] - [Deprecated] in v3.0.0, removal target v6.0.0 - 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-top] - A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated).
+ * @slot [header-top] - A slot for adding custom content above the header actions and content.
  * @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.
  * @slot [header-content] - A slot for adding custom content to the header.
@@ -117,19 +159,23 @@ export abstract class Panel extends LitElement {
    * @default "bottom-end"
    */
   accessor menuPlacement: LogicalPlacement;
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      close?: string;
-      options?: string;
-      collapse?: string;
-      expand?: string;
+      close?: string | undefined;
+      options?: string | undefined;
+      collapse?: string | undefined;
+      expand?: string | undefined;
   };
   /**
-   * Specifies the type of positioning to use for overlaid content, where:
+   * Specifies the type of positioning to use for overlaid content.
    *
-   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   * - `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout.
    *
-   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   * - `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
    *
    * @default "absolute"
    */

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

@@ -4,18 +4,21 @@ 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/directives/ref.js";
-import { s as slotChangeHasAssignedElement, a as slotChangeGetAssignedElements, A as slotChangeHasTextContent, h as hasVisibleContent } from "../../chunks/dom.js";
+import { s as slotChangeHasAssignedElement, b as slotChangeGetAssignedElements, d as slotChangeHasTextContent, u as hasVisibleContent } 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 { H as Heading } from "../../chunks/Heading.js";
-import { b as defaultEndMenuPlacement } from "../../chunks/floating-ui.js";
+import { d as defaultEndMenuPlacement } from "../../chunks/floating-ui.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { i as isActionBar } from "../../chunks/resources12.js";
+import { u as useFocusable } from "../../chunks/useFocusable.js";
 import { s as styles$1 } from "../../chunks/header.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
-import { C as CSS, S as SLOTS, I as ICONS, a as IDS } from "../../chunks/resources8.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;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))}.content-top{padding:var(--calcite-panel-content-top-space, var(--calcite-internal-panel-default-space))}.content-bottom{padding:var(--calcite-panel-content-bottom-space, var(--calcite-internal-panel-default-space))}.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}`;
+import { u as useFocusTrap } from "../../chunks/useFocusTrap.js";
+import { C as CSS, S as SLOTS, I as ICONS, a as IDS } from "../../chunks/resources14.js";
+import { t as toAriaBoolean } from "../../chunks/aria.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;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))}.content-top{padding:var(--calcite-panel-content-top-space, var(--calcite-internal-panel-default-space))}.content-bottom{padding:var(--calcite-panel-content-bottom-space, var(--calcite-internal-panel-default-space))}.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--no-row{border-block-end:0}.content-top--no-border{border-block-start:0}.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))}.header-top{inline-size:100%;border-block-end:1px solid var(--calcite-panel-border-color, var(--calcite-color-border-3));padding:var(--calcite-panel-header-top-space, var(--calcite-internal-panel-default-space))}.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,7 +26,19 @@ class Panel extends LitElement {
     this.resizeObserver = createObserver("resize", () => this.resizeHandler());
     this.messages = useT9n();
     this._closed = false;
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
+    this.focusTrapController = useFocusTrap({
+      focusTrapOptions: {
+        allowOutsideClick: true,
+        escapeDeactivates: (event) => {
+          if (!event.defaultPrevented && this.closable) {
+            this.emitCloseEvent();
+            event.preventDefault();
+          }
+          return false;
+        }
+      }
+    })(this);
     this.interactiveContainer = useInteractive(this);
     this.hasActionBar = false;
     this.hasContentBottom = false;
@@ -36,6 +51,7 @@ class Panel extends LitElement {
     this.hasHeaderContent = false;
     this.hasHeaderDescription = false;
     this.hasHeaderHeading = false;
+    this.hasHeaderTop = false;
     this.hasMenuItems = false;
     this.hasStartActions = false;
     this.showHeaderContent = false;
@@ -46,6 +62,7 @@ class Panel extends LitElement {
     this.disabled = false;
     this.iconFlipRtl = false;
     this.loading = false;
+    this.focusTrapEnabled = false;
     this.menuOpen = false;
     this.menuPlacement = defaultEndMenuPlacement;
     this.overlayPositioning = "absolute";
@@ -60,11 +77,14 @@ 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 }], hasHeaderDescription: [16, {}, { state: true }], hasHeaderHeading: [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 }] };
+    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 }], hasHeaderDescription: [16, {}, { state: true }], hasHeaderHeading: [16, {}, { state: true }], hasHeaderTop: [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, {}, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], loading: [7, {}, { reflect: true, type: Boolean }], focusTrapEnabled: [7, {}, { reflect: true, type: Boolean }], focusTrapOptions: [0, {}, { attribute: false }], 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];
   }
+  get hasHeaderRow() {
+    return this.hasHeaderContent || !!this.heading || !!this.description || this.hasHeaderHeading || this.hasHeaderDescription || this.hasStartActions || this.hasEndActions || this.collapsible || this.closable || this.hasMenuItems;
+  }
   get closed() {
     return this._closed;
   }
@@ -80,6 +100,10 @@ class Panel extends LitElement {
   async setFocus(options) {
     return this.focusSetter(() => this.containerRef.value, options);
   }
+  async updateFocusTrapElements(extraContainers) {
+    this.focusTrapController.setExtraContainers(extraContainers);
+    this.focusTrapController.updateContainerElements();
+  }
   willUpdate(changes) {
     if (changes.has("collapsed") && this.hasUpdated) {
       if (this.collapsed) {
@@ -89,10 +113,22 @@ class Panel extends LitElement {
       }
     }
   }
+  updated(changes) {
+    if (changes.has("focusTrapEnabled") || changes.has("closable") || changes.has("closed")) {
+      if (!this.closed && this.closable && this.focusTrapEnabled) {
+        this.focusTrapController.activate();
+      } else {
+        this.focusTrapController.deactivate();
+      }
+    }
+  }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.resizeObserver?.disconnect();
   }
+  focusTrapDisabledOverride() {
+    return !this.focusTrapEnabled || !this.closable || this.closed;
+  }
   async setClosedState(value) {
     if (this.beforeClose && value) {
       try {
@@ -122,10 +158,11 @@ class Panel extends LitElement {
     this.calcitePanelClose.emit();
   }
   panelKeyDownHandler(event) {
-    if (this.closable && event.key === "Escape" && !event.defaultPrevented) {
-      event.preventDefault();
-      this.emitCloseEvent();
+    if (event.key !== "Escape" || event.defaultPrevented || this.closed || !this.closable) {
+      return;
     }
+    event.preventDefault();
+    this.emitCloseEvent();
   }
   panelCloseHandler(event) {
     if (event.defaultPrevented || event.target !== this.el) {
@@ -150,13 +187,16 @@ class Panel extends LitElement {
     this.hasMenuItems = slotChangeHasAssignedElement(event);
   }
   handleActionBarSlotChange(event) {
-    const actionBars = slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-action-bar"));
+    const actionBars = slotChangeGetAssignedElements(event).filter(isActionBar);
     actionBars.forEach((actionBar) => actionBar.layout = "horizontal");
     this.hasActionBar = !!actionBars.length;
   }
   handleHeaderContentSlotChange(event) {
     this.hasHeaderContent = slotChangeHasAssignedElement(event);
   }
+  handleHeaderTopSlotChange(event) {
+    this.hasHeaderTop = slotChangeHasAssignedElement(event);
+  }
   handleHeaderDescriptionSlotChange(event) {
     this.hasHeaderDescription = slotChangeHasTextContent(event) || slotChangeGetAssignedElements(event).some(hasVisibleContent);
   }
@@ -208,6 +248,9 @@ class Panel extends LitElement {
   renderHeaderSlottedContent() {
     return keyed("slotted-header-content", html`<div class=${safeClassMap({ [CSS.headerContent]: true, [CSS.headerSlottedContent]: true })} .hidden=${!this.hasHeaderContent}><slot name=${SLOTS.headerContent} @slotchange=${this.handleHeaderContentSlotChange}></slot></div>`);
   }
+  renderHeaderTop() {
+    return html`<div class=${safeClassMap(CSS.headerTop)} .hidden=${!this.hasHeaderTop}><slot name=${SLOTS.headerTop} @slotchange=${this.handleHeaderTopSlotChange}></slot></div>`;
+  }
   renderHeaderStartActions() {
     const { hasStartActions } = this;
     return keyed("header-actions-start", html`<div class=${safeClassMap({ [CSS.headerActionsStart]: true, [CSS.headerActions]: true })} .hidden=${!hasStartActions}><slot name=${SLOTS.headerActionsStart} @slotchange=${this.handleHeaderActionsStartSlotChange}></slot></div>`);
@@ -230,12 +273,18 @@ class Panel extends LitElement {
     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, hasHeaderDescription, hasHeaderHeading, hasStartActions, hasEndActions, closable, collapsible, hasMenuItems, hasActionBar, hasContentTop, heading, description } = this;
+    const { hasHeaderContent, hasHeaderDescription, hasHeaderHeading, hasHeaderTop, hasStartActions, hasEndActions, closable, collapsible, hasMenuItems, hasActionBar, hasContentTop, heading, description } = this;
     const headerContentNode = this.renderHeaderContent();
     const hasDefaultHeaderContent = !!heading || !!description || hasHeaderHeading || hasHeaderDescription;
-    const showHeaderContent = hasHeaderContent || hasDefaultHeaderContent || hasStartActions || hasEndActions || collapsible || closable || hasMenuItems || hasActionBar || hasContentTop;
+    const showHeaderContent = hasHeaderContent || hasDefaultHeaderContent || hasHeaderTop || hasStartActions || hasEndActions || collapsible || closable || hasMenuItems || hasActionBar || hasContentTop;
     this.showHeaderContent = showHeaderContent;
-    return html`<header class=${safeClassMap(CSS.header)} .hidden=${!(showHeaderContent || hasActionBar || hasContentTop)}><div class=${safeClassMap({ [CSS.headerContainer]: true, [CSS.headerContainerBorderEnd]: hasActionBar })} .hidden=${!showHeaderContent}>${this.renderHeaderStartActions()}${this.renderHeaderSlottedContent()}${headerContentNode}${this.renderHeaderActionsEnd()}</div>${this.renderActionBar()}${this.renderContentTop()}</header>`;
+    return html`<header class=${safeClassMap({
+      [CSS.header]: true,
+      [CSS.headerNoRow]: hasHeaderTop && !this.hasHeaderRow && !hasActionBar && !hasContentTop
+    })} .hidden=${!(showHeaderContent || hasActionBar || hasContentTop)}>${this.renderHeaderTop()}<div class=${safeClassMap({
+      [CSS.headerContainer]: true,
+      [CSS.headerContainerBorderEnd]: hasActionBar && this.hasHeaderRow
+    })} .hidden=${!showHeaderContent}>${this.renderHeaderStartActions()}${this.renderHeaderSlottedContent()}${headerContentNode}${this.renderHeaderActionsEnd()}</div>${this.renderActionBar()}${this.renderContentTop()}</header>`;
   }
   renderFooterNode() {
     const { hasFooterEndContent, hasFooterStartContent, hasFooterContent } = this;
@@ -249,14 +298,18 @@ class Panel extends LitElement {
     return html`<div class=${safeClassMap(CSS.contentBottom)} .hidden=${!this.hasContentBottom}><slot name=${SLOTS.contentBottom} @slotchange=${this.contentBottomSlotChangeHandler}></slot></div>`;
   }
   renderContentTop() {
-    return html`<div class=${safeClassMap(CSS.contentTop)} .hidden=${!this.hasContentTop}><slot name=${SLOTS.contentTop} @slotchange=${this.contentTopSlotChangeHandler}></slot></div>`;
+    return html`<div class=${safeClassMap({
+      [CSS.contentTop]: true,
+      [CSS.contentTopNoBorder]: this.hasHeaderTop && !this.hasHeaderRow && !this.hasActionBar
+    })} .hidden=${!this.hasContentTop}><slot name=${SLOTS.contentTop} @slotchange=${this.contentTopSlotChangeHandler}></slot></div>`;
   }
   renderFab() {
     return html`<div class=${safeClassMap(CSS.fabContainer)} .hidden=${!this.hasFab}><slot name=${SLOTS.fab} @slotchange=${this.handleFabSlotChange}></slot></div>`;
   }
   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>`;
+    const { disabled, loading, closed, heading, description, focusTrapEnabled, closable } = this;
+    const hasDialogRole = focusTrapEnabled && closable;
+    const panelNode = html`<div .ariaBusy=${toAriaBoolean(loading, void 0)} .ariaDescription=${hasDialogRole && description ? description : void 0} .ariaLabel=${hasDialogRole && heading ? heading : void 0} .ariaLive=${hasDialogRole ? "polite" : void 0} class=${safeClassMap(CSS.container)} .hidden=${closed} .role=${hasDialogRole ? "dialog" : "article"} ${ref(this.containerRef)}>${this.renderHeaderNode()}${this.renderContent()}${this.renderContentBottom()}${this.renderFooterNode()}${keyed("alerts", html`<slot name=${SLOTS.alerts} @slotchange=${this.handleAlertsSlotChange}></slot>`)}</div>`;
     return this.interactiveContainer({ disabled, children: html`${loading ? html`<calcite-scrim .loading=${loading}></calcite-scrim>` : null}${panelNode}` });
   }
 }

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

@@ -2,17 +2,25 @@
 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 { Scale } from "../types.js";
 import type { FocusTrapOptions } from "../../controllers/useFocusTrap.js";
 
-/**
- * @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.
- */
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's background color. */
+  "--calcite-popover-background-color": "*";
+  /** Specifies the component's border color. */
+  "--calcite-popover-border-color": "*";
+  /** Specifies the component's corner radius. */
+  "--calcite-popover-corner-radius": "*";
+  /** Specifies the component's maximum width. */
+  "--calcite-popover-max-size-x": "*";
+  /** Specifies the component's text color. */
+  "--calcite-popover-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.
@@ -41,13 +49,13 @@ export abstract class Popover extends LitElement {
    */
   accessor focusTrapDisabled: boolean;
   /**
-   * Specifies custom focus trap configuration on the component, where
+   * Specifies custom focus trap configuration on the component.
    *
-   * `"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).
+   * - `"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.
+   * - `"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> | undefined;
   /** Specifies the component's heading text. */
@@ -60,8 +68,12 @@ export abstract class Popover extends LitElement {
    * @required
    */
   accessor label: string;
-  /** Overrides individual strings used by the component. */
-  accessor messageOverrides: { close?: string; };
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
+  accessor messageOverrides: { close?: string | undefined; };
   /** Specifies the distance to position the component away from the `referenceElement`. */
   accessor offsetDistance: number;
   /**
@@ -77,11 +89,11 @@ export abstract class Popover extends LitElement {
    */
   accessor open: boolean;
   /**
-   * Specifies the type of positioning to use for overlaid content, where:
+   * Specifies the type of positioning to use for overlaid content.
    *
-   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   * - `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout.
    *
-   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   * - `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
    *
    * @default "absolute"
    */

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

@@ -5,14 +5,14 @@ import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { useDirection } from "@arcgis/lumina/controllers";
-import { e as defaultOffsetDistance, r as reposition, c as connectFloatingUI, a as disconnectFloatingUI, f as filterValidFlipPlacements, h as hideFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
+import { e as defaultOffsetDistance, r as reposition, c as connectFloatingUI, b as disconnectFloatingUI, f as filterValidFlipPlacements, h as hideFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.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 { 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 useFocusable } from "../../chunks/useFocusable.js";
 import { u as useTopLayer } from "../../chunks/useTopLayer.js";
 import { u as useReferenceElement, r as referenceElementManager } from "../../chunks/manager.js";
 const CSS = {
@@ -52,7 +52,7 @@ class Popover extends LitElement {
     this.transitionProp = "opacity";
     this.transitionRef = createRef();
     this.messages = useT9n();
-    this.focusSetter = useSetFocus()(this);
+    this.focusSetter = useFocusable()(this);
     this.topLayer = useTopLayer({
       disabledOverride: () => this.open && !this.referenceEl,
       target: () => this.floatingEl

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

@@ -1,11 +1,17 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 
-/**
- * @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.
- */
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** Specifies the component's background color. */
+  "--calcite-progress-background-color": "*";
+  /** Specifies the component's fill color. */
+  "--calcite-progress-fill-color": "*";
+  /** Specifies the component's text color. */
+  "--calcite-progress-text-color": "*";
+}
+}
+
 export abstract class Progress extends LitElement {
   /** Specifies an accessible label for the component. */
   accessor label: string | undefined;

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

@@ -3,7 +3,7 @@ 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 { useDirection } from "@arcgis/lumina/controllers";
-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 styles = css`:host{position:relative;display:block;inline-size:100%}.track,.bar{position:absolute;inset-block-start:0px;block-size:2px;border-radius:var(--calcite-corner-radius)}.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",