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

package/dist/components/calcite-date-picker-month-header/customElement.js

@@ -1,15 +1,15 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as customElement } from "../../chunks/runtime.js";
 import { live } from "lit/directives/live.js";
-import { h as calciteSpacingXxs, i as calciteSpacingBase, j as calciteSpacingSm } from "../../chunks/global.js";
+import { calciteSpacingXxs, calciteSpacingBase, calciteSpacingSm } from "@esri/calcite-design-tokens/dist/es6/global.js";
 import { css, html, nothing } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { b as dateFromRange, n as nextMonth, p as prevMonth, f as formatCalendarYear, e as parseCalendarYear, j as getDateInMonth, i as inRange, h as hasSameMonthAndYear, k as getOrder } from "../../chunks/date.js";
-import { c as closestElementCrossShadowBoundary, l as getTextWidth } from "../../chunks/dom.js";
+import { c as closestElementCrossShadowBoundary, k as getTextWidth } from "../../chunks/dom.js";
 import { i as isActivationKey } from "../../chunks/key.js";
 import { n as numberStringFormatter } from "../../chunks/locale.js";
-const styles = css`:host{display:block}.header{display:flex;block-size:100%;align-items:center;justify-content:space-between}.chevron-container{display:flex;align-items:center}:host([scale=s]){block-size:24px;margin:var(--calcite-spacing-xs);margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .chevron-container,:host([scale=s]) .chevron{min-inline-size:24px;block-size:24px}:host([scale=m]){block-size:32px;margin:var(--calcite-spacing-sm);margin-inline-start:var(--calcite-spacing-sm-plus)}:host([scale=m]) .chevron-container,:host([scale=m]) .chevron{min-inline-size:32px;block-size:32px;--calcite-internal-action-padding-block: var(--calcite-spacing-xxs)}:host([scale=l]){block-size:44px;margin:var(--calcite-spacing-xs);margin-inline-start:var(--calcite-spacing-sm)}:host([scale=l]) .chevron-container,:host([scale=l]) .chevron{min-inline-size:44px;block-size:44px;--calcite-internal-action-padding-block: var(--calcite-spacing-sm-plus)}.chevron{box-sizing:content-box;display:flex;block-size:100%;inline-size:100%;flex-grow:0;cursor:pointer;align-items:center;justify-content:center;border-style:none;outline-color:transparent;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;--calcite-internal-action-padding-block: 0;--calcite-action-background-color: var(--calcite-date-picker-header-action-background-color);--calcite-action-background-color-hover: var(--calcite-date-picker-header-action-background-color-hover);--calcite-action-background-color-press: var(--calcite-date-picker-header-action-background-color-press);--calcite-action-text-color: var(--calcite-date-picker-header-action-text-color);--calcite-action-text-color-press: var(--calcite-date-picker-header-action-text-color-press)}.chevron:focus{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))))}.chevron[aria-disabled=true]{pointer-events:none}.month-year-container{display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;align-items:center;justify-content:flex-start;text-align:center;line-height:1;gap:var(--calcite-spacing-xxs)}.month-year-container.range-calendar{justify-content:center}.year-container{position:relative;display:flex;block-size:100%}.suffix{display:flex;align-items:center}.year,.suffix{margin-inline:var(--calcite-spacing-xxs);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-date-picker-year-text-color, var(--calcite-color-text-1));font-size:var(--calcite-font-size-md);line-height:var(--calcite-font-line-height-fixed-lg)}.year{position:relative;display:inline-block;border-style:none;background-color:transparent;text-align:center;font-family:inherit;outline-color:transparent;inline-size:44px}.year:hover{transition-timing-function:cubic-bezier(.4,0,.2,1);transition-property:outline-color;outline:2px solid var(--calcite-color-border-2);outline-offset:-2px}.year:focus{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))))}.month-select{--calcite-select-internal-border-width: 0;--calcite-select-internal-icon-border-inline-end-width: 0;--calcite-internal-select-spacing-inline: var(--calcite-spacing-xxs);--calcite-select-font-size: var(--calcite-date-picker-month-select-font-size, var(--calcite-font-size-md));--calcite-select-text-color: var(--calcite-date-picker-month-select-text-color, var(--calcite-color-text-1));--calcite-select-icon-color: var(--calcite-date-picker-month-select-icon-color);--calcite-select-icon-color-hover: var(--calcite-date-picker-month-select-icon-color-hover);--calcite-internal-select-spacing-block: var(--calcite-spacing-xxs);--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-xxs);--calcite-internal-select-line-height: var(--calcite-font-line-height-fixed-lg);--calcite-internal-select-font-weight: var(--calcite-font-weight-medium)}:host([scale=s]) .month-year-container .month-select{--calcite-internal-select-spacing-inline: var(--calcite-spacing-base);--calcite-select-font-size: var(--calcite-date-picker-month-select-font-size, var(--calcite-font-size));--calcite-internal-select-spacing-block: var(--calcite-spacing-base);--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-base);--calcite-internal-select-block-size: 24px;--calcite-internal-select-line-height: var(--calcite-font-line-height-fixed-base)}:host([scale=s]) .month-year-container .year{inline-size:40px}:host([scale=s]) .month-year-container .year,:host([scale=s]) .month-year-container .suffix{font-size:var(--calcite-font-size);line-height:var(--calcite-font-line-height-fixed-base)}:host([scale=l]) .month-year-container .month-select{--calcite-internal-select-spacing-inline: var(--calcite-spacing-sm);--calcite-select-font-size: var(--calcite-date-picker-month-select-font-size, var(--calcite-font-size-lg));--calcite-internal-select-spacing-block: var(--calcite-spacing-sm);--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-sm);--calcite-internal-select-block-size: 44px;--calcite-internal-select-line-height: var(--calcite-font-line-height-fixed-xl)}:host([scale=l]) .month-year-container .year{inline-size:48px}:host([scale=l]) .month-year-container .year,:host([scale=l]) .month-year-container .suffix{font-size:var(--calcite-font-size-lg);line-height:var(--calcite-font-line-height-fixed-xl)}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{display:block}.header{display:flex;block-size:100%;align-items:center;justify-content:space-between}.chevron-container{display:flex;align-items:center}:host([scale=s]){block-size:24px;margin:var(--calcite-spacing-xs);margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .chevron-container,:host([scale=s]) .chevron{min-inline-size:24px;block-size:24px}:host([scale=m]){block-size:32px;margin:var(--calcite-spacing-sm);margin-inline-start:var(--calcite-spacing-sm-plus)}:host([scale=m]) .chevron-container,:host([scale=m]) .chevron{min-inline-size:32px;block-size:32px;--calcite-internal-action-padding-block: var(--calcite-spacing-xxs)}:host([scale=l]){block-size:44px;margin:var(--calcite-spacing-xs);margin-inline-start:var(--calcite-spacing-sm)}:host([scale=l]) .chevron-container,:host([scale=l]) .chevron{min-inline-size:44px;block-size:44px;--calcite-internal-action-padding-block: var(--calcite-spacing-sm-plus)}.chevron{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;box-sizing:content-box;display:flex;block-size:100%;inline-size:100%;flex-grow:0;cursor:pointer;align-items:center;justify-content:center;border-style:none;outline-color:transparent;--calcite-internal-action-padding-block: 0;--calcite-action-background-color: var(--calcite-date-picker-header-action-background-color);--calcite-action-background-color-hover: var(--calcite-date-picker-header-action-background-color-hover);--calcite-action-background-color-press: var(--calcite-date-picker-header-action-background-color-press);--calcite-action-text-color: var(--calcite-date-picker-header-action-text-color);--calcite-action-text-color-press: var(--calcite-date-picker-header-action-text-color-press)}.chevron:focus{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))))}.chevron[aria-disabled=true]{pointer-events:none}.month-year-container{display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;align-items:center;justify-content:flex-start;text-align:center;line-height:1;gap:var(--calcite-spacing-xxs)}.month-year-container.range-calendar{justify-content:center}.year-container{position:relative;display:flex;block-size:100%}.suffix{display:flex;align-items:center}.year,.suffix{margin-inline:var(--calcite-spacing-xxs);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-date-picker-year-text-color, var(--calcite-color-text-1));font-size:var(--calcite-font-size-md);line-height:var(--calcite-font-line-height-fixed-lg)}.year{position:relative;display:inline-block;border-style:none;background-color:transparent;text-align:center;font-family:inherit;outline-color:transparent;inline-size:44px}.year:hover{transition-timing-function:cubic-bezier(.4,0,.2,1);transition-property:outline-color;outline:2px solid var(--calcite-color-border-2);outline-offset:-2px}.year:focus{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))))}.month-select{--calcite-select-internal-border-width: 0;--calcite-select-internal-icon-border-inline-end-width: 0;--calcite-internal-select-spacing-inline: var(--calcite-spacing-xxs);--calcite-select-font-size: var(--calcite-date-picker-month-select-font-size, var(--calcite-font-size-md));--calcite-select-text-color: var(--calcite-date-picker-month-select-text-color, var(--calcite-color-text-1));--calcite-select-icon-color: var(--calcite-date-picker-month-select-icon-color);--calcite-select-icon-color-hover: var(--calcite-date-picker-month-select-icon-color-hover);--calcite-internal-select-spacing-block: var(--calcite-spacing-xxs);--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-xxs);--calcite-internal-select-line-height: var(--calcite-font-line-height-fixed-lg);--calcite-internal-select-font-weight: var(--calcite-font-weight-medium)}:host([scale=s]) .month-year-container .month-select{--calcite-internal-select-spacing-inline: var(--calcite-spacing-base);--calcite-select-font-size: var(--calcite-date-picker-month-select-font-size, var(--calcite-font-size));--calcite-internal-select-spacing-block: var(--calcite-spacing-base);--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-base);--calcite-internal-select-block-size: 24px;--calcite-internal-select-line-height: var(--calcite-font-line-height-fixed-base)}:host([scale=s]) .month-year-container .year{inline-size:40px}:host([scale=s]) .month-year-container .year,:host([scale=s]) .month-year-container .suffix{font-size:var(--calcite-font-size);line-height:var(--calcite-font-line-height-fixed-base)}:host([scale=l]) .month-year-container .month-select{--calcite-internal-select-spacing-inline: var(--calcite-spacing-sm);--calcite-select-font-size: var(--calcite-date-picker-month-select-font-size, var(--calcite-font-size-lg));--calcite-internal-select-spacing-block: var(--calcite-spacing-sm);--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-sm);--calcite-internal-select-block-size: 44px;--calcite-internal-select-line-height: var(--calcite-font-line-height-fixed-xl)}:host([scale=l]) .month-year-container .year{inline-size:48px}:host([scale=l]) .month-year-container .year,:host([scale=l]) .month-year-container .suffix{font-size:var(--calcite-font-size-lg);line-height:var(--calcite-font-line-height-fixed-xl)}:host([hidden]){display:none}[hidden]{display:none}`;
 const CSS = {
   header: "header",
   chevron: "chevron",
@@ -33,6 +33,7 @@ class DatePickerMonthHeader extends LitElement {
     this.nextMonthActionRef = createRef();
     this.prevMonthActionRef = createRef();
     this.yearInputRef = createRef();
+    this.scale = "m";
     this.calciteInternalDatePickerMonthHeaderSelectChange = createEvent({ cancelable: false });
   }
   static {

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

@@ -1,43 +1,13 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Kind, Scale, Width } from "../interfaces.js";
+import type { Kind, Scale, Width } from "../types.js";
 import type { HeadingLevel } from "../functional/Heading.js";
 import type { OverlayPositioning } from "../../utils/floating-ui.js";
 import type { FocusTrapOptions } from "../../controllers/useFocusTrap.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
-import type { DialogPlacement } from "./interfaces.js";
+import type { IconName } from "../calcite-icon/types.js";
+import type { DialogPlacement } from "./types.js";
 
 /**
- * @cssproperty [--calcite-dialog-scrim-background-color] - Specifies the background color of the component's scrim.
- * @cssproperty [--calcite-dialog-size-x] - When `placement` is `"cover"`, specifies the component's width, using `px`, `em`, `rem`, `vw`, or `%`. Does not exceed the viewport's width.
- * @cssproperty [--calcite-dialog-min-size-x] - Specifies the component's minimum width, using `px`, `em`, `rem`, `vw`, or `%`.
- * @cssproperty [--calcite-dialog-max-size-x] - Specifies the component's maximum width, using `px`, `em`, `rem`, `vw`, or `%`.
- * @cssproperty [--calcite-dialog-size-y] - When `placement` is `"cover"`, specifies the component's height, using `px`, `em`, `rem`, `vh`, or `%`. Does not exceed the viewport's height.
- * @cssproperty [--calcite-dialog-min-size-y] - Specifies the component's minimum height, using `px`, `em`, `rem`, `vh`, or `%`.
- * @cssproperty [--calcite-dialog-max-size-y] - Specifies the component's maximum height, using `px`, `em`, `rem`, `vh`, or `%`.
- * @cssproperty [--calcite-dialog-content-space] - Specifies the padding of the component's content.
- * @cssproperty [--calcite-dialog-content-top-space] - Specifies the padding of the component's `content-top` slot.
- * @cssproperty [--calcite-dialog-content-bottom-space] - Specifies the padding of the component's `content-bottom` slot.
- * @cssproperty [--calcite-dialog-footer-space] - Specifies the padding of the component's footer.
- * @cssproperty [--calcite-dialog-border-color] - Specifies the component's border color.
- * @cssproperty [--calcite-dialog-offset-x] - Specifies the component's horizontal offset.
- * @cssproperty [--calcite-dialog-offset-y] - Specifies the component's vertical offset.
- * @cssproperty [--calcite-dialog-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-dialog-icon-color] - Specifies the color of the component's icon.
- * @cssproperty [--calcite-dialog-accent-color] - When `kind` is specified, specifies the component's accent color.
- * @cssproperty [--calcite-dialog-corner-radius] - Specifies the component's corner radius.
- * @cssproperty [--calcite-dialog-heading-text-color] - Specifies the text color of the component's `heading`.
- * @cssproperty [--calcite-dialog-description-text-color] - Specifies the text color of the component's `description`.
- * @cssproperty [--calcite-dialog-header-background-color] - Specifies the background color of the component's header.
- * @cssproperty [--calcite-dialog-header-action-background-color] - Specifies the background color of the component's `closable`, `collapsible`, and slotted `header-menu-actions` `calcite-action`s.
- * @cssproperty [--calcite-dialog-header-action-background-color-hover] - Specifies the background color of the component's `closable`, `collapsible`, and slotted `header-menu-actions` `calcite-action`s when hovered.
- * @cssproperty [--calcite-dialog-header-action-background-color-press] - Specifies the background color of the component's `closable`, `collapsible`, and slotted `header-menu-actions` `calcite-action`s when pressed.
- * @cssproperty [--calcite-dialog-header-action-text-color] - Specifies the text color of the component's `closable`, `collapsible`, and slotted `header-menu-actions` `calcite-action`s.
- * @cssproperty [--calcite-dialog-header-action-text-color-press] - Specifies the text color of the component's `closable`, `collapsible`, and slotted `header-menu-actions` `calcite-action`s when pressed or hovered.
- * @cssproperty [--calcite-dialog-footer-background-color] - Specifies the background color of the component's footer.
- * @cssproperty [--calcite-dialog-space] - Specifies the padding of the component's `unnamed (default)` slot.
- * @cssproperty [--calcite-dialog-header-content-space] - Specifies the padding of the component's `header-content` slot.
- * @cssproperty [--calcite-dialog-action-menu-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.
  * @slot  - A slot for adding content.
  * @slot [custom-content] - A slot for displaying custom content. Will prevent the rendering of any default component UI, except for `box-shadow` and `corner-radius`.
  * @slot [action-bar] - A slot for adding a `calcite-action-bar` to the component.
@@ -47,6 +17,7 @@ import type { DialogPlacement } from "./interfaces.js";
  * @slot [header-actions-start] - A slot for adding actions or content to the starting side of the component's header.
  * @slot [header-actions-end] - A slot for adding actions or content to the ending side of the component's header.
  * @slot [header-content] - A slot for adding custom content to the component's header.
+ * @slot [header-top] - A slot for adding custom content above the header actions and content.
  * @slot [header-menu-actions] - A slot for adding an overflow menu with actions inside a `calcite-dropdown`.
  * @slot [heading] - A slot for adding content to the heading area of the default header. Takes precedence over the `heading` property.
  * @slot [description] - A slot for adding content to the description area of the default header. Takes precedence over the `description` property.
@@ -64,7 +35,7 @@ export abstract class Dialog extends LitElement {
    * @default false
    */
   accessor closeDisabled: boolean;
-  /** Specifies the component's description. */
+  /** Specifies a description for the component. */
   accessor description: string | undefined;
   /**
    * When `true`, the component is draggable.
@@ -88,13 +59,13 @@ export abstract class Dialog 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;
   /**
@@ -110,7 +81,7 @@ export abstract class Dialog extends LitElement {
   /** Specifies an icon to display. */
   accessor icon: IconName | undefined;
   /**
-   * When `true` and the element direction is right-to-left (`"rtl"`), flips the component`s `icon`.
+   * When `true` and the element direction is right-to-left (`"rtl"`), flips the component's `icon`.
    *
    * @default false
    */
@@ -129,11 +100,15 @@ export abstract class Dialog extends LitElement {
    * @default false
    */
   accessor menuOpen: 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: {
-      close?: string;
-      resizeEnabled?: string;
-      dragEnabled?: string;
+      close?: string | undefined;
+      resizeEnabled?: string | undefined;
+      dragEnabled?: string | undefined;
   };
   /**
    * When `true`, displays a scrim blocking interaction underneath the component.
@@ -154,11 +129,11 @@ export abstract class Dialog extends LitElement {
    */
   accessor outsideCloseDisabled: 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-dialog/customElement.js

@@ -1,49 +1,22 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { b as resizeShiftStep, c as customElement } from "../../chunks/runtime.js";
+import { d as resizeShiftStep, c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { u as useSizeOverride, i as interact } from "../../chunks/useSizeOverride.js";
 import { css, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { g as getStylePixelValue } from "../../chunks/dom.js";
+import { l as getStylePixelValue } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { g as getDimensionClass } from "../../chunks/dynamicClasses.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
-import { S as SLOTS$1 } from "../../chunks/resources8.js";
+import { S as SLOTS$1 } from "../../chunks/resources14.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useFocusTrap } from "../../chunks/useFocusTrap.js";
 import { u as usePreventDocumentScroll } from "../../chunks/usePreventDocumentScroll.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useTopLayer } from "../../chunks/useTopLayer.js";
-const CSS = {
-  dialog: "dialog",
-  panel: "panel",
-  scrim: "scrim",
-  container: "container",
-  containerOpen: "container--open",
-  containerEmbedded: "container--embedded",
-  assistiveText: "assistive-text"
-};
-const SLOTS = {
-  actionBar: "action-bar",
-  alerts: "alerts",
-  customContent: "custom-content",
-  contentTop: "content-top",
-  contentBottom: "content-bottom",
-  headerActionsStart: "header-actions-start",
-  headerActionsEnd: "header-actions-end",
-  description: "description",
-  heading: "heading",
-  headerMenuActions: "header-menu-actions",
-  headerContent: "header-content",
-  fab: "fab",
-  footer: "footer",
-  footerStart: "footer-start",
-  footerEnd: "footer-end"
-};
-const initialDragPosition = { x: 0, y: 0 };
-const initialResizePosition = { top: 0, right: 0, bottom: 0, left: 0 };
-const styles = css`:host{--calcite-dialog-scrim-background-color: rgba(0, 0, 0, .85);pointer-events:none;inset:0;display:flex;--calcite-internal-dialog-animation-offset: 20px}:host([top-layer-disabled]),:host([top-layer-disabled]) .container,:host([embedded]),.container--embedded{z-index:var(--calcite-z-index-overlay)}:host([embedded][modal]){position:absolute}.container{pointer-events:auto;position:fixed;inset:0;display:flex;block-size:100%;inline-size:100%;align-items:center;justify-content:center;overflow:hidden;color:var(--calcite-color-text-2);opacity:0;visibility:hidden;transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow),opacity var(--calcite-internal-animation-timing-slow) ease-in-out}:host([placement=top]) .container{align-items:flex-start;justify-content:center}:host([placement=top-start]) .container{align-items:flex-start;justify-content:flex-start}:host([placement=top-end]) .container{align-items:flex-start;justify-content:flex-end}:host([placement=bottom]) .container{align-items:flex-end;justify-content:center}:host([placement=bottom-start]) .container{align-items:flex-end;justify-content:flex-start}:host([placement=bottom-end]) .container{align-items:flex-end;justify-content:flex-end}:host(:not([modal])) .container{pointer-events:none}:host([scale=s]){--calcite-internal-dialog-content-padding: var(--calcite-dialog-content-space, var(--calcite-spacing-sm));--calcite-internal-dialog-min-size-x: 198px;--calcite-internal-dialog-min-size-y: 140px}:host([scale=m]){--calcite-internal-dialog-content-padding: var(--calcite-dialog-content-space, var(--calcite-spacing-md));--calcite-internal-dialog-min-size-x: 288px;--calcite-internal-dialog-min-size-y: 180px}:host([scale=l]){--calcite-internal-dialog-content-padding: var(--calcite-dialog-content-space, var(--calcite-spacing-md-plus));--calcite-internal-dialog-min-size-x: 388px;--calcite-internal-dialog-min-size-y: 220px}.scrim{--calcite-scrim-background: var(--calcite-dialog-scrim-background-color, var(--calcite-color-transparent-scrim));--calcite-scrim-background-color: var( --calcite-dialog-scrim-background-color, var(--calcite-color-transparent-scrim) );position:fixed;inset:0;display:flex;overflow-y:hidden;z-index:calc(var(--calcite-z-index) * -1)}:host([top-layer-disabled]) .scrim{z-index:unset}calcite-panel{--calcite-panel-content-space: var(--calcite-dialog-content-space, var(--calcite-internal-dialog-content-padding));--calcite-panel-content-top-space: var( --calcite-dialog-content-top-space, var(--calcite-internal-dialog-content-padding) );--calcite-panel-content-bottom-space: var( --calcite-dialog-content-bottom-space, var(--calcite-internal-dialog-content-padding) );--calcite-panel-footer-space: var(--calcite-dialog-footer-space);--calcite-panel-border-color: var(--calcite-dialog-border-color);--calcite-panel-background-color: var(--calcite-dialog-background-color, var(--calcite-color-foreground-1));--calcite-panel-icon-color: var(--calcite-dialog-icon-color);--calcite-panel-heading-text-color: var(--calcite-dialog-heading-text-color);--calcite-panel-description-text-color: var(--calcite-dialog-description-text-color);--calcite-panel-header-background-color: var(--calcite-dialog-header-background-color);--calcite-panel-header-action-background-color: var(--calcite-dialog-header-action-background-color);--calcite-panel-header-action-background-color-hover: var(--calcite-dialog-header-action-background-color-hover);--calcite-panel-header-action-background-color-press: var(--calcite-dialog-header-action-background-color-press);--calcite-panel-header-action-text-color: var(--calcite-dialog-header-action-text-color);--calcite-panel-header-action-text-color-press: var(--calcite-dialog-header-action-text-color-press);--calcite-panel-footer-background-color: var(--calcite-dialog-footer-background-color);--calcite-panel-space: var(--calcite-dialog-space, var(--calcite-internal-dialog-content-padding));--calcite-panel-header-content-space: var(--calcite-dialog-header-content-space, var(--calcite-dialog-content-space));--calcite-popover-border-color: var(--calcite-dialog-action-menu-border-color, var(--calcite-color-border-1));--calcite-panel-corner-radius: var(--calcite-dialog-corner-radius)}:host([kind=brand]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-brand))}:host([kind=danger]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-status-danger))}:host([kind=info]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-status-info))}:host([kind=success]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-status-success))}:host([kind=warning]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-status-warning))}::slotted(*){--calcite-panel-background-color: initial}[popover]{padding:0;border:none;background-color:transparent;position:fixed;display:flex}[popover]:popover-open{display:flex}.dialog{pointer-events:none;position:relative;margin:1.5rem;box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;opacity:0;box-shadow:var(--calcite-shadow-md);-webkit-overflow-scrolling:touch;visibility:hidden;transition:inset-block-start var(--calcite-internal-animation-timing-slow) ease-in-out allow-discrete,opacity var(--calcite-internal-animation-timing-slow) ease-in-out;border-radius:var(--calcite-dialog-corner-radius, var(--calcite-corner-radius-sm));min-inline-size:var(--calcite-dialog-min-size-x, var(--calcite-internal-dialog-min-size-x));max-inline-size:var(--calcite-dialog-max-size-x, 100%);min-block-size:var(--calcite-dialog-min-size-y, var(--calcite-internal-dialog-min-size-y));max-block-size:var(--calcite-dialog-max-size-y, 100%);--calcite-internal-dialog-hidden-position: calc( var(--calcite-dialog-offset-y, 0px) + var(--calcite-internal-dialog-animation-offset) );--calcite-internal-dialog-shown-position: var(--calcite-dialog-offset-y, 0);inset-inline-start:var(--calcite-dialog-offset-x, 0);inset-block-start:var(--calcite-internal-dialog-hidden-position)}:host([top-layer-disabled]) .dialog,:host([embedded]) .dialog{z-index:var(--calcite-z-index-modal)}:host([menu-open]) .dialog{transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow),opacity var(--calcite-internal-animation-timing-slow) ease-in-out}.panel{visibility:hidden;opacity:0;border-radius:var(--calcite-dialog-corner-radius, var(--calcite-corner-radius-sm));transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow),opacity var(--calcite-internal-animation-timing-slow) ease-in-out}.container--open .panel{visibility:visible;opacity:1;transition:visibility 0ms linear,opacity var(--calcite-internal-animation-timing-slow) ease-in-out}.container--open{opacity:1;visibility:visible;transition-delay:0ms}.container--open .dialog{pointer-events:auto;visibility:visible;opacity:1;transition:inset-block-start var(--calcite-internal-animation-timing-slow) ease-in-out allow-discrete,opacity var(--calcite-internal-animation-timing-slow) ease-in-out;transition-delay:0ms}.width-s{inline-size:auto;inline-size:var(--calcite-dialog-size-x, 32rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width:35rem){:host(:not([fullscreen-disabled])) .width-s{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}}.width-m{inline-size:var(--calcite-dialog-size-x, 48rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width:51rem){:host(:not([fullscreen-disabled])) .width-m{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}}.width-l{inline-size:var(--calcite-dialog-size-x, 94rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width:97rem){:host(:not([fullscreen-disabled])) .width-l{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}}:host([placement=cover]) .dialog{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0}:host([placement=cover]) .panel{border-radius:0}:host([kind]) .panel{border-start-start-radius:0px;border-start-end-radius:0px}:host([kind]) .dialog{overflow:hidden}:host([kind=brand]) .dialog{border-color:var(--calcite-color-brand)}:host([kind=danger]) .dialog{border-color:var(--calcite-dialog-accent-color, var(--calcite-color-status-danger))}:host([kind=info]) .dialog{border-color:var(--calcite-dialog-accent-color, var(--calcite-color-status-info))}:host([kind=success]) .dialog{border-color:var(--calcite-dialog-accent-color, var(--calcite-color-status-success))}:host([kind=warning]) .dialog{border-color:var(--calcite-dialog-accent-color, var(--calcite-color-status-warning))}:host([open]) .dialog{inset-block-start:var(--calcite-internal-dialog-shown-position)}@starting-style{:host([open]) .dialog{inset-block-start:var(--calcite-internal-dialog-hidden-position);opacity:0}}:host([kind=brand][open]) .dialog,:host([kind=danger][open]) .dialog,:host([kind=info][open]) .dialog,:host([kind=success][open]) .dialog,:host([kind=warning][open]) .dialog{border-width:0px;border-block-start-width:4px;border-style:solid}.container--embedded{position:absolute;pointer-events:auto}.container--embedded calcite-scrim{position:absolute}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}`;
+import { i as initialDragPosition, a as initialResizePosition, S as SLOTS, C as CSS } from "../../chunks/resources15.js";
+const styles = css`:host{--calcite-dialog-scrim-background-color: rgba(0, 0, 0, .85);pointer-events:none;inset:0;display:flex;--calcite-internal-dialog-animation-offset: 20px}:host([top-layer-disabled]),:host([top-layer-disabled]) .container,:host([embedded]),.container--embedded{z-index:var(--calcite-z-index-overlay)}:host([embedded][modal]){position:absolute}.container{pointer-events:auto;position:fixed;inset:0;display:flex;block-size:100%;inline-size:100%;align-items:center;justify-content:center;overflow:hidden;color:var(--calcite-color-text-2);opacity:0;visibility:hidden;transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow),opacity var(--calcite-internal-animation-timing-slow) ease-in-out}:host([placement=top]) .container{align-items:flex-start;justify-content:center}:host([placement=top-start]) .container{align-items:flex-start;justify-content:flex-start}:host([placement=top-end]) .container{align-items:flex-start;justify-content:flex-end}:host([placement=bottom]) .container{align-items:flex-end;justify-content:center}:host([placement=bottom-start]) .container{align-items:flex-end;justify-content:flex-start}:host([placement=bottom-end]) .container{align-items:flex-end;justify-content:flex-end}:host(:not([modal])) .container{pointer-events:none}:host([scale=s]){--calcite-internal-dialog-content-padding: var(--calcite-dialog-content-space, var(--calcite-spacing-sm));--calcite-internal-dialog-min-size-x: 198px;--calcite-internal-dialog-min-size-y: 140px}:host([scale=m]){--calcite-internal-dialog-content-padding: var(--calcite-dialog-content-space, var(--calcite-spacing-md));--calcite-internal-dialog-min-size-x: 288px;--calcite-internal-dialog-min-size-y: 180px}:host([scale=l]){--calcite-internal-dialog-content-padding: var(--calcite-dialog-content-space, var(--calcite-spacing-md-plus));--calcite-internal-dialog-min-size-x: 388px;--calcite-internal-dialog-min-size-y: 220px}.scrim{--calcite-scrim-background: var(--calcite-dialog-scrim-background-color, var(--calcite-color-transparent-scrim));--calcite-scrim-background-color: var( --calcite-dialog-scrim-background-color, var(--calcite-color-transparent-scrim) );position:fixed;inset:0;display:flex;overflow-y:hidden;z-index:calc(var(--calcite-z-index) * -1)}:host([top-layer-disabled]) .scrim{z-index:unset}calcite-panel{--calcite-panel-content-space: var(--calcite-dialog-content-space, var(--calcite-internal-dialog-content-padding));--calcite-panel-content-top-space: var( --calcite-dialog-content-top-space, var(--calcite-internal-dialog-content-padding) );--calcite-panel-content-bottom-space: var( --calcite-dialog-content-bottom-space, var(--calcite-internal-dialog-content-padding) );--calcite-panel-footer-space: var(--calcite-dialog-footer-space);--calcite-panel-border-color: var(--calcite-dialog-border-color);--calcite-panel-background-color: var(--calcite-dialog-background-color, var(--calcite-color-foreground-1));--calcite-panel-icon-color: var(--calcite-dialog-icon-color);--calcite-panel-heading-text-color: var(--calcite-dialog-heading-text-color);--calcite-panel-description-text-color: var(--calcite-dialog-description-text-color);--calcite-panel-header-background-color: var(--calcite-dialog-header-background-color);--calcite-panel-header-action-background-color: var(--calcite-dialog-header-action-background-color);--calcite-panel-header-action-background-color-hover: var(--calcite-dialog-header-action-background-color-hover);--calcite-panel-header-action-background-color-press: var(--calcite-dialog-header-action-background-color-press);--calcite-panel-header-action-text-color: var(--calcite-dialog-header-action-text-color);--calcite-panel-header-action-text-color-press: var(--calcite-dialog-header-action-text-color-press);--calcite-panel-footer-background-color: var(--calcite-dialog-footer-background-color);--calcite-panel-space: var(--calcite-dialog-space, var(--calcite-internal-dialog-content-padding));--calcite-panel-header-content-space: var(--calcite-dialog-header-content-space, var(--calcite-dialog-content-space));--calcite-panel-header-top-space: var(--calcite-dialog-header-top-space);--calcite-popover-border-color: var(--calcite-dialog-action-menu-border-color, var(--calcite-color-border-1));--calcite-panel-corner-radius: var(--calcite-dialog-corner-radius)}:host([kind=brand]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-brand))}:host([kind=danger]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-status-danger))}:host([kind=info]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-status-info))}:host([kind=success]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-status-success))}:host([kind=warning]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-status-warning))}::slotted(*){--calcite-panel-background-color: initial}[popover]{padding:0;border:none;background-color:transparent;position:fixed;display:flex}[popover]:popover-open{display:flex}.dialog{pointer-events:none;position:relative;margin:1.5rem;box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;opacity:0;box-shadow:var(--calcite-shadow-md);-webkit-overflow-scrolling:touch;visibility:hidden;transition:inset-block-start var(--calcite-internal-animation-timing-slow) ease-in-out allow-discrete,opacity var(--calcite-internal-animation-timing-slow) ease-in-out;border-radius:var(--calcite-dialog-corner-radius, var(--calcite-corner-radius-sm));min-inline-size:var(--calcite-dialog-min-size-x, var(--calcite-internal-dialog-min-size-x));max-inline-size:var(--calcite-dialog-max-size-x, 100%);min-block-size:var(--calcite-dialog-min-size-y, var(--calcite-internal-dialog-min-size-y));max-block-size:var(--calcite-dialog-max-size-y, 100%);--calcite-internal-dialog-hidden-position: calc( var(--calcite-dialog-offset-y, 0px) + var(--calcite-internal-dialog-animation-offset) );--calcite-internal-dialog-shown-position: var(--calcite-dialog-offset-y, 0);inset-inline-start:var(--calcite-dialog-offset-x, 0);inset-block-start:var(--calcite-internal-dialog-hidden-position)}:host([top-layer-disabled]) .dialog,:host([embedded]) .dialog{z-index:var(--calcite-z-index-modal)}:host([menu-open]) .dialog{transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow),opacity var(--calcite-internal-animation-timing-slow) ease-in-out}.panel{visibility:hidden;opacity:0;border-radius:var(--calcite-dialog-corner-radius, var(--calcite-corner-radius-sm));transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow),opacity var(--calcite-internal-animation-timing-slow) ease-in-out}.container--open .panel{visibility:visible;opacity:1;transition:visibility 0ms linear,opacity var(--calcite-internal-animation-timing-slow) ease-in-out}.container--open{opacity:1;visibility:visible;transition-delay:0ms}.container--open .dialog{pointer-events:auto;visibility:visible;opacity:1;transition:inset-block-start var(--calcite-internal-animation-timing-slow) ease-in-out allow-discrete,opacity var(--calcite-internal-animation-timing-slow) ease-in-out;transition-delay:0ms}.width-s{inline-size:auto;inline-size:var(--calcite-dialog-size-x, 32rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width:35rem){:host(:not([fullscreen-disabled])) .width-s{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}}.width-m{inline-size:var(--calcite-dialog-size-x, 48rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width:51rem){:host(:not([fullscreen-disabled])) .width-m{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}}.width-l{inline-size:var(--calcite-dialog-size-x, 94rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width:97rem){:host(:not([fullscreen-disabled])) .width-l{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}}:host([placement=cover]) .dialog{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0}:host([placement=cover]) .panel{border-radius:0}:host([kind]) .panel{border-start-start-radius:0px;border-start-end-radius:0px}:host([kind]) .dialog{overflow:hidden}:host([kind=brand]) .dialog{border-color:var(--calcite-color-brand)}:host([kind=danger]) .dialog{border-color:var(--calcite-dialog-accent-color, var(--calcite-color-status-danger))}:host([kind=info]) .dialog{border-color:var(--calcite-dialog-accent-color, var(--calcite-color-status-info))}:host([kind=success]) .dialog{border-color:var(--calcite-dialog-accent-color, var(--calcite-color-status-success))}:host([kind=warning]) .dialog{border-color:var(--calcite-dialog-accent-color, var(--calcite-color-status-warning))}:host([open]) .dialog{inset-block-start:var(--calcite-internal-dialog-shown-position)}@starting-style{:host([open]) .dialog{inset-block-start:var(--calcite-internal-dialog-hidden-position);opacity:0}}:host([kind=brand][open]) .dialog,:host([kind=danger][open]) .dialog,:host([kind=info][open]) .dialog,:host([kind=success][open]) .dialog,:host([kind=warning][open]) .dialog{border-width:0px;border-block-start-width:4px;border-style:solid}.container--embedded{position:absolute;pointer-events:auto}.container--embedded calcite-scrim{position:absolute}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}`;
 class Dialog extends LitElement {
   constructor() {
     super(...arguments);
@@ -124,7 +97,7 @@ class Dialog extends LitElement {
     this.calciteDialogScroll = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { assistiveText: [16, {}, { state: true }], hasContentBottom: [16, {}, { state: true }], hasContentTop: [16, {}, { state: true }], hasFooter: [16, {}, { state: true }], opened: [16, {}, { state: true }], resizeValues: [16, {}, { state: true }], beforeClose: [0, {}, { attribute: false }], closeDisabled: [7, {}, { reflect: true, type: Boolean }], description: 1, dragEnabled: [7, {}, { reflect: true, type: Boolean }], embedded: [7, {}, { reflect: true, type: Boolean }], escapeDisabled: [7, {}, { reflect: true, type: Boolean }], focusTrapOptions: [0, {}, { attribute: false }], fullscreenDisabled: [7, {}, { reflect: true, type: Boolean }], heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], kind: [3, {}, { reflect: true }], icon: [3, { type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], loading: [7, {}, { reflect: true, type: Boolean }], menuOpen: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], modal: [7, {}, { reflect: true, type: Boolean }], focusTrapDisabled: [7, {}, { reflect: true, type: Boolean }], open: [7, {}, { reflect: true, type: Boolean }], outsideCloseDisabled: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placement: [3, {}, { reflect: true }], resizable: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], widthScale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }] };
+    this.properties = { assistiveText: [16, {}, { state: true }], hasContentBottom: [16, {}, { state: true }], hasContentTop: [16, {}, { state: true }], hasFooter: [16, {}, { state: true }], opened: [16, {}, { state: true }], resizeValues: [16, {}, { state: true }], beforeClose: [0, {}, { attribute: false }], closeDisabled: [7, {}, { reflect: true, type: Boolean }], description: 1, dragEnabled: [7, {}, { reflect: true, type: Boolean }], embedded: [7, {}, { reflect: true, type: Boolean }], escapeDisabled: [7, {}, { reflect: true, type: Boolean }], focusTrapOptions: [0, {}, { attribute: false }], fullscreenDisabled: [7, {}, { reflect: true, type: Boolean }], heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], kind: [3, {}, { reflect: true }], icon: [3, {}, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], loading: [7, {}, { reflect: true, type: Boolean }], menuOpen: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], modal: [7, {}, { reflect: true, type: Boolean }], focusTrapDisabled: [7, {}, { reflect: true, type: Boolean }], open: [7, {}, { reflect: true, type: Boolean }], outsideCloseDisabled: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placement: [3, {}, { reflect: true }], resizable: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], widthScale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
@@ -493,7 +466,7 @@ class Dialog extends LitElement {
     })} .popover=${!this.embedded ? "manual" : void 0} role=dialog ${ref(this.popoverRef)}>${this.modal ? html`<calcite-scrim class=${safeClassMap(CSS.scrim)} @click=${this.handleOutsideClose}></calcite-scrim>` : null}<div class=${safeClassMap({
       [CSS.dialog]: true,
       [getDimensionClass("width", this.width, this.widthScale)]: !!(this.width || this.widthScale)
-    })} @keydown=${this.handleKeyDown} ${ref(this.setTransitionEl)}>${assistiveText ? keyed("assistive-text", html`<div aria-live=polite class=${safeClassMap(CSS.assistiveText)}>${assistiveText}</div>`) : null}<slot name=${SLOTS.customContent}><calcite-panel class=${safeClassMap(CSS.panel)} .closable=${!this.closeDisabled} .description=${description} .heading=${heading} .headingLevel=${this.headingLevel} .hidden=${!this.opened} .icon=${icon} .iconFlipRtl=${iconFlipRtl} .loading=${this.loading} .menuOpen=${this.menuOpen} .messageOverrides=${this.messageOverrides} @calcitePanelClose=${this.handleInternalPanelCloseClick} @calcitePanelScroll=${this.handleInternalPanelScroll} @keydown=${this.handlePanelKeyDown} .overlayPositioning=${this.overlayPositioning} .scale=${this.scale} .topLayerDisabled=${this.topLayerDisabled} ${ref(this.panelRef)}><slot name=${SLOTS.actionBar} slot=${SLOTS$1.actionBar}></slot><slot name=${SLOTS.alerts} slot=${SLOTS$1.alerts}></slot><slot name=${SLOTS.headerActionsStart} slot=${SLOTS$1.headerActionsStart}></slot><slot name=${SLOTS.headerActionsEnd} slot=${SLOTS$1.headerActionsEnd}></slot><slot name=${SLOTS.description} slot=${SLOTS$1.description}></slot><slot name=${SLOTS.heading} slot=${SLOTS$1.heading}></slot><slot name=${SLOTS.headerContent} slot=${SLOTS$1.headerContent}></slot><slot name=${SLOTS.headerMenuActions} slot=${SLOTS$1.headerMenuActions}></slot><slot name=${SLOTS.fab} slot=${SLOTS$1.fab}></slot><slot name=${SLOTS.contentTop} slot=${SLOTS$1.contentTop}></slot><slot name=${SLOTS.contentBottom} slot=${SLOTS$1.contentBottom}></slot><slot name=${SLOTS.footerStart} slot=${SLOTS$1.footerStart}></slot><slot name=${SLOTS.footer} slot=${SLOTS$1.footer}></slot><slot name=${SLOTS.footerEnd} slot=${SLOTS$1.footerEnd}></slot><slot></slot></calcite-panel></slot></div></div>`;
+    })} @keydown=${this.handleKeyDown} ${ref(this.setTransitionEl)}>${assistiveText ? keyed("assistive-text", html`<div aria-live=polite class=${safeClassMap(CSS.assistiveText)}>${assistiveText}</div>`) : null}<slot name=${SLOTS.customContent}><calcite-panel class=${safeClassMap(CSS.panel)} .closable=${!this.closeDisabled} .description=${description} .heading=${heading} .headingLevel=${this.headingLevel} .hidden=${!this.opened} .icon=${icon} .iconFlipRtl=${iconFlipRtl} .loading=${this.loading} .menuOpen=${this.menuOpen} .messageOverrides=${this.messageOverrides} @calcitePanelClose=${this.handleInternalPanelCloseClick} @calcitePanelScroll=${this.handleInternalPanelScroll} @keydown=${this.handlePanelKeyDown} .overlayPositioning=${this.overlayPositioning} .scale=${this.scale} .topLayerDisabled=${this.topLayerDisabled} ${ref(this.panelRef)}><slot name=${SLOTS.actionBar} slot=${SLOTS$1.actionBar}></slot><slot name=${SLOTS.alerts} slot=${SLOTS$1.alerts}></slot><slot name=${SLOTS.headerActionsStart} slot=${SLOTS$1.headerActionsStart}></slot><slot name=${SLOTS.headerActionsEnd} slot=${SLOTS$1.headerActionsEnd}></slot><slot name=${SLOTS.description} slot=${SLOTS$1.description}></slot><slot name=${SLOTS.heading} slot=${SLOTS$1.heading}></slot><slot name=${SLOTS.headerContent} slot=${SLOTS$1.headerContent}></slot><slot name=${SLOTS.headerTop} slot=${SLOTS$1.headerTop}></slot><slot name=${SLOTS.headerMenuActions} slot=${SLOTS$1.headerMenuActions}></slot><slot name=${SLOTS.fab} slot=${SLOTS$1.fab}></slot><slot name=${SLOTS.contentTop} slot=${SLOTS$1.contentTop}></slot><slot name=${SLOTS.contentBottom} slot=${SLOTS$1.contentBottom}></slot><slot name=${SLOTS.footerStart} slot=${SLOTS$1.footerStart}></slot><slot name=${SLOTS.footer} slot=${SLOTS$1.footer}></slot><slot name=${SLOTS.footerEnd} slot=${SLOTS$1.footerEnd}></slot><slot></slot></calcite-panel></slot></div></div>`;
   }
 }
 customElement("calcite-dialog", Dialog);

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

@@ -1,13 +1,10 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { FlipPlacement, LogicalPlacement, OverlayPositioning, ReferenceElement } from "../../utils/floating-ui.js";
-import type { Scale, Width } from "../interfaces.js";
+import type { Scale, Width } from "../types.js";
 import type { DropdownItem } from "../calcite-dropdown-item/customElement.js";
 
 /**
- * @cssproperty [--calcite-dropdown-width] - Specifies the width of the component's wrapper.
- * @cssproperty [--calcite-dropdown-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-dropdown-max-height] - Specifies the maximum height of the component's wrapper.
  * @slot  - A slot for adding `calcite-dropdown-group` elements. Every `calcite-dropdown-item` must have a parent `calcite-dropdown-group`, even if the `groupTitle` property is not set.
  * @slot [trigger] - [deprecated] in v5.1.0, removal target v7.0.0 - Use the `referenceElement` property instead. A slot for the element that triggers the component.
  */
@@ -54,11 +51,11 @@ export abstract class Dropdown 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-dropdown/customElement.js

@@ -1,15 +1,16 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as customElement } from "../../chunks/runtime.js";
-import { ref } from "lit/directives/ref.js";
 import { css, html } from "lit";
+import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { useDirection } from "@arcgis/lumina/controllers";
-import { u as nextFrame } from "../../chunks/dom.js";
-import { d as defaultMenuPlacement, r as reposition, c as connectFloatingUI, a as disconnectFloatingUI, f as filterValidFlipPlacements, h as hideFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
+import { A as nextFrame } from "../../chunks/dom.js";
+import { a as defaultMenuPlacement, r as reposition, c as connectFloatingUI, b as disconnectFloatingUI, f as filterValidFlipPlacements, h as hideFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
 import { i as isActivationKey } from "../../chunks/key.js";
 import { c as createObserver, u as updateRefObserver } from "../../chunks/observers.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
 import { g as getDimensionClass } from "../../chunks/dynamicClasses.js";
+import { i as isDropdownGroup } from "../../chunks/resources16.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { u as useTopLayer } from "../../chunks/useTopLayer.js";
@@ -22,7 +23,7 @@ const CSS = {
   wrapper: "wrapper",
   triggerContainer: "trigger-container"
 };
-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{display:inline-block}.wrapper{inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0;z-index:var(--calcite-floating-ui-z-index)}@starting-style{.wrapper{opacity:0;inset-block-start:0;left:0}}:host([top-layer-disabled]) .wrapper{--calcite-floating-ui-z-index: var(--calcite-z-index-dropdown)}.wrapper[popover]{padding:0;margin:0;border:none;background-color:transparent;overflow:visible;display:none}.wrapper:popover-open{display:block}.wrapper .calcite-floating-ui-anim{position:relative;transition-duration:var(--calcite-floating-ui-transition);transition-property:inset-block-start,left,opacity,display;transition-behavior:allow-discrete;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.wrapper[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.wrapper[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.wrapper[data-placement^=left] .calcite-floating-ui-anim{left:5px}.wrapper[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.wrapper[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{.wrapper[data-placement] .calcite-floating-ui-anim--active{opacity:0}}.wrapper .calcite-floating-ui-anim{box-shadow:var(--calcite-shadow-md)}.content{width:auto;overflow-y:auto;overflow-x:hidden;inline-size:var(--calcite-dropdown-width, var(--calcite-internal-dropdown-width));background-color:var(--calcite-dropdown-background-color, var(--calcite-color-foreground-1));max-block-size:var(--calcite-dropdown-max-height, 45vh)}.trigger-container{position:relative;display:flex;height:100%;flex:1 1 auto;word-wrap:break-word;word-break:break-word}.width-s{--calcite-internal-dropdown-width: 12rem}.width-m{--calcite-internal-dropdown-width: 14rem}.width-l{--calcite-internal-dropdown-width: 16rem}@media(forced-colors:active){:host([open]) .wrapper{border:var(--calcite-border-width-sm) solid canvasText}}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
+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{display:inline-block}.wrapper{inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0;z-index:var(--calcite-floating-ui-z-index)}@starting-style{.wrapper{opacity:0;inset-block-start:0;left:0}}:host([top-layer-disabled]) .wrapper{--calcite-floating-ui-z-index: var(--calcite-z-index-dropdown)}.wrapper[popover]{padding:0;margin:0;border:none;background-color:transparent;overflow:visible;display:none}.wrapper:popover-open{display:block}.wrapper .calcite-floating-ui-anim{position:relative;transition-duration:var(--calcite-floating-ui-transition);transition-property:inset-block-start,left,opacity,display;transition-behavior:allow-discrete;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.wrapper[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.wrapper[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.wrapper[data-placement^=left] .calcite-floating-ui-anim{left:5px}.wrapper[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.wrapper[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{.wrapper[data-placement] .calcite-floating-ui-anim--active{opacity:0}}.wrapper .calcite-floating-ui-anim{box-shadow:var(--calcite-shadow-md)}.content{width:auto;overflow-y:auto;overflow-x:hidden;inline-size:var(--calcite-dropdown-width, var(--calcite-internal-dropdown-width));background-color:var(--calcite-dropdown-background-color, var(--calcite-color-foreground-1));max-block-size:var(--calcite-dropdown-max-height, 45vh)}.trigger-container{position:relative;display:flex;height:100%;flex:1 1 auto;overflow-wrap:break-word;word-break:break-word}.width-s{--calcite-internal-dropdown-width: 12rem}.width-m{--calcite-internal-dropdown-width: 14rem}.width-l{--calcite-internal-dropdown-width: 16rem}@media(forced-colors:active){:host([open]) .wrapper{border:var(--calcite-border-width-sm) solid canvasText}}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
 const manager = referenceElementManager({ click: true, hover: true });
 class Dropdown extends LitElement {
   constructor() {
@@ -36,6 +37,7 @@ class Dropdown extends LitElement {
     this.mutationObserver = createObserver("mutation", () => this.updateItems());
     this.transitionProp = "opacity";
     this.resizeObserver = createObserver("resize", (entries) => this.resizeObserverCallback(entries));
+    this.triggerSlotRef = createRef();
     this.onReferenceElementKeyDown = (event) => this.keyDownHandler(event);
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
@@ -77,6 +79,9 @@ class Dropdown extends LitElement {
   get referenceElementType() {
     return this.referenceElement ? this.type : void 0;
   }
+  get autoClose() {
+    return true;
+  }
   async reposition(delayed = false) {
     const { filteredFlipPlacements, floatingEl, offsetDistance, offsetSkidding, overlayPositioning, placement, referenceEl } = this;
     return reposition(this, {
@@ -126,6 +131,11 @@ class Dropdown extends LitElement {
   }
   updated(changes) {
     if (changes.has("referenceEl") && this.referenceElementType) {
+      const previousReferenceEl = changes.get("referenceEl");
+      if (previousReferenceEl instanceof HTMLElement) {
+        previousReferenceEl.ariaActiveDescendantElement = null;
+      }
+      this.syncActiveDescendantOwnerElement();
       connectFloatingUI(this);
     }
   }
@@ -135,6 +145,13 @@ class Dropdown extends LitElement {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
+    const triggerSlotEl = this.triggerSlotRef.value;
+    if (triggerSlotEl) {
+      triggerSlotEl.ariaActiveDescendantElement = null;
+    }
+    if (this.referenceEl instanceof HTMLElement) {
+      this.referenceEl.ariaActiveDescendantElement = null;
+    }
     this.mutationObserver?.disconnect();
     this.resizeObserver?.disconnect();
     disconnectFloatingUI(this);
@@ -208,7 +225,7 @@ class Dropdown extends LitElement {
     this.items.forEach((item) => item.scale = this.scale);
   }
   updateGroups(event) {
-    const groups = event.target.assignedElements({ flatten: true }).filter((el) => el?.matches("calcite-dropdown-group"));
+    const groups = event.target.assignedElements({ flatten: true }).filter(isDropdownGroup);
     this.groups = groups;
     this.updateItems();
     this.updateGroupProps();
@@ -262,6 +279,7 @@ class Dropdown extends LitElement {
   }
   onClose() {
     this.calciteDropdownClose.emit();
+    this.syncActiveDescendantOwnerElement();
     hideFloatingUI(this);
     this.topLayer.hide();
   }
@@ -273,12 +291,16 @@ class Dropdown extends LitElement {
       return;
     }
     this.referenceEl = el;
+    this.syncActiveDescendantOwnerElement();
     connectFloatingUI(this);
   }
   setFloatingEl(el) {
     this.floatingEl = el;
     connectFloatingUI(this);
   }
+  handleTriggerSlotChange() {
+    this.syncActiveDescendantOwnerElement();
+  }
   keyDownHandler(event) {
     if (!(this.referenceEl instanceof HTMLElement) || !event.composedPath().includes(this.referenceEl)) {
       return;
@@ -339,11 +361,11 @@ class Dropdown extends LitElement {
     this.selectedItems = this.items.filter((item) => item.selected);
   }
   getYDistanceFromScroller(last) {
-    if (!last) {
+    const { scrollerEl } = this;
+    if (!last || !scrollerEl) {
       return NaN;
     }
-    const style = last.getBoundingClientRect();
-    return last.offsetTop + style.height;
+    return last.getBoundingClientRect().bottom - scrollerEl.getBoundingClientRect().top + scrollerEl.scrollTop;
   }
   closeCalciteDropdown() {
     this.open = false;
@@ -384,6 +406,21 @@ class Dropdown extends LitElement {
       item.activeDescendant = item === activeItem;
     });
     this.activeDescendantElement = activeItem ?? void 0;
+    this.syncActiveDescendantOwnerElement();
+  }
+  syncActiveDescendantOwnerElement() {
+    const { referenceEl, referenceElementType } = this;
+    const triggerSlotEl = this.triggerSlotRef.value;
+    const activeDescendantEl = this.open ? this.activeDescendantElement ?? null : null;
+    const referenceOwnerEl = referenceEl instanceof HTMLElement ? referenceEl : null;
+    const isReferenceMode = Boolean(referenceElementType);
+    if (triggerSlotEl) {
+      triggerSlotEl.ariaActiveDescendantElement = isReferenceMode ? null : activeDescendantEl;
+    }
+    if (!referenceOwnerEl) {
+      return;
+    }
+    referenceOwnerEl.ariaActiveDescendantElement = isReferenceMode ? activeDescendantEl : null;
   }
   navigateActiveItem(direction) {
     const traversableItems = this.getTraversableItems();
@@ -449,7 +486,7 @@ class Dropdown extends LitElement {
   }
   render() {
     const { open } = this;
-    return this.interactiveContainer({ disabled: this.disabled, children: html`${!this.referenceElementType ? html`<div class=${safeClassMap(CSS.triggerContainer)} @click=${this.toggleClickDropdown} @focusin=${this.openHoverDropdown} @focusout=${this.closeHoverDropdown} @keydown=${this.keyDownHandler} ${ref(this.setReferenceEl)}><slot .ariaActiveDescendantElement=${this.activeDescendantElement ?? void 0} .ariaControlsElements=${this.scrollerEl ? [this.scrollerEl] : void 0} .ariaExpanded=${open} aria-haspopup=menu name=${SLOTS.trigger}></slot></div>` : null}<div class=${safeClassMap({
+    return this.interactiveContainer({ disabled: this.disabled, children: html`${!this.referenceElementType ? html`<div class=${safeClassMap(CSS.triggerContainer)} @click=${this.toggleClickDropdown} @focusin=${this.openHoverDropdown} @focusout=${this.closeHoverDropdown} @keydown=${this.keyDownHandler} ${ref(this.setReferenceEl)}><slot .ariaControlsElements=${this.scrollerEl ? [this.scrollerEl] : void 0} .ariaExpanded=${open} aria-haspopup=menu name=${SLOTS.trigger} @slotchange=${this.handleTriggerSlotChange} ${ref(this.triggerSlotRef)}></slot></div>` : null}<div class=${safeClassMap({
       [CSS.wrapper]: true,
       [getDimensionClass("width", this.width, this.widthScale)]: !!(this.width || this.widthScale)
     })} .inert=${!open} popover=manual ${ref(this.setFloatingEl)}><div .ariaLabelledByElements=${this.referenceEl instanceof HTMLElement ? [this.referenceEl] : void 0} class=${safeClassMap({

package/dist/components/calcite-dropdown-group/customElement.d.ts

@@ -1,12 +1,8 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { SelectionMode } from "../interfaces.js";
+import type { SelectionMode } from "../types.js";
 
-/**
- * @cssproperty [--calcite-dropdown-group-border-color] - Specifies the component's border color.
- * @cssproperty [--calcite-dropdown-group-title-text-color] - Specifies the component's `groupTitle` color.
- * @slot  - A slot for adding `calcite-dropdown-item`s.
- */
+/** @slot  - A slot for adding `calcite-dropdown-item`s. */
 export abstract class DropdownGroup extends LitElement {
   /** When specified, displays a group title. */
   accessor groupTitle: string | undefined;
@@ -18,13 +14,11 @@ export abstract class DropdownGroup extends LitElement {
    */
   accessor position: number;
   /**
-   * Specifies the selection mode of the component, where:
+   * Specifies the selection mode of the component.
    *
-   * `"multiple"` allows any number of selections,
-   *
-   * `"single"` allows only one selection, and
-   *
-   * `"none"` does not allow any selections.
+   * - `"multiple"` allows any number of selections.
+   * - `"single"` allows only one selection.
+   * - `"none"` does not allow any selections.
    *
    * @default "single"
    */

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

@@ -3,17 +3,16 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { c as createObserver } from "../../chunks/observers.js";
-import { C as CSS$1 } from "../../chunks/resources9.js";
-const CSS = {
-  title: "title",
-  firstTitle: "first-title",
-  separator: "separator"
-};
+import { C as CSS$1 } from "../../chunks/resources17.js";
+import { C as CSS } from "../../chunks/resources16.js";
 const styles = css`:host{display:block}.container{text-align:start}.title{margin-block-end:-1px;display:block;cursor:default;overflow-wrap:break-word;border-width:0px;font-weight:var(--calcite-font-weight-bold);color:var(--calcite-dropdown-group-title-text-color, var(--calcite-color-text-1))}.separator{display:block;block-size:1px;background-color:var(--calcite-dropdown-group-border-color, var(--calcite-color-border-3))}:host([scale=s]){font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm)}:host([scale=s]) .title{padding-block:var(--calcite-spacing-xxs);padding-inline:var(--calcite-spacing-sm)}:host([scale=s]) .first-title{padding-block-start:var(--calcite-spacing-sm)}:host([scale=s]) .separator{margin-block:var(--calcite-spacing-xxs);margin-inline:var(--calcite-spacing-sm)}:host([scale=m]){font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}:host([scale=m]) .title{padding-block:var(--calcite-spacing-sm);padding-inline:var(--calcite-spacing-md)}:host([scale=m]) .first-title{padding-block-start:var(--calcite-spacing-lg)}:host([scale=m]) .separator{margin-block:var(--calcite-spacing-sm);margin-inline:var(--calcite-spacing-md)}:host([scale=l]){font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md)}:host([scale=l]) .title{padding-block:var(--calcite-spacing-sm-plus);padding-inline:var(--calcite-spacing-lg)}:host([scale=l]) .first-title{padding-block-start:var(--calcite-spacing-xl)}:host([scale=l]) .separator{margin-block:var(--calcite-spacing-sm-plus);margin-inline:var(--calcite-spacing-lg)}:host([hidden]){display:none}[hidden]{display:none}`;
 class DropdownGroup extends LitElement {
   constructor() {
     super();
     this.mutationObserver = createObserver("mutation", () => this.updateItems());
+    this.items = [];
+    this.describedItems = /* @__PURE__ */ new Set();
+    this.currentItems = /* @__PURE__ */ new Set();
     this.position = -1;
     this.scale = "m";
     this.selectionMode = "single";
@@ -39,9 +38,20 @@ class DropdownGroup extends LitElement {
       this.updateItems();
     }
   }
+  updated(changes) {
+    if (changes.has("groupTitle")) {
+      this.syncItemGroupDescriptions(this.getItems());
+    }
+  }
   disconnectedCallback() {
     super.disconnectedCallback();
     this.mutationObserver?.disconnect();
+    this.describedItems.forEach((item) => {
+      item.ariaDescribedByElements = item.ariaDescribedByElements?.filter((el) => el !== this.el) ?? null;
+    });
+    this.describedItems.clear();
+    this.currentItems.clear();
+    this.items = [];
   }
   updateActiveItemOnChange(event) {
     this.requestedDropdownGroup = event.detail.requestedDropdownGroup;
@@ -52,7 +62,35 @@ class DropdownGroup extends LitElement {
     });
   }
   updateItems() {
-    Array.from(this.el.querySelectorAll("calcite-dropdown-item")).forEach((item) => item.selectionMode = this.selectionMode);
+    const items = this.getItems();
+    this.items = items;
+    items.forEach((item) => {
+      item.selectionMode = this.selectionMode;
+    });
+    this.syncItemGroupDescriptions(items);
+  }
+  getItems() {
+    return Array.from(this.el.querySelectorAll("calcite-dropdown-item"));
+  }
+  syncItemGroupDescriptions(items = this.items) {
+    const descriptionEl = this.groupTitle ? this.el : null;
+    const currentItems = this.currentItems;
+    currentItems.clear();
+    items.forEach((item) => currentItems.add(item));
+    const staleItems = [];
+    this.describedItems.forEach((item) => {
+      if (!currentItems.has(item)) {
+        item.ariaDescribedByElements = item.ariaDescribedByElements?.filter((el) => el !== this.el) ?? null;
+        staleItems.push(item);
+      }
+    });
+    staleItems.forEach((item) => this.describedItems.delete(item));
+    currentItems.forEach((item) => {
+      const currentDescriptions = item.ariaDescribedByElements?.filter((el) => el !== this.el) ?? [];
+      item.ariaDescribedByElements = descriptionEl ? [...currentDescriptions, descriptionEl] : currentDescriptions;
+      this.describedItems.add(item);
+    });
+    this.items = items;
   }
   render() {
     const groupTitle = this.groupTitle ? html`<span aria-hidden=true class=${safeClassMap({ [CSS.title]: true, [CSS.firstTitle]: this.position === 0 })}>${this.groupTitle}</span>` : null;