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

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

@@ -1,116 +1,132 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
-import { FlipPlacement, FloatingUIComponent, MenuPlacement, OverlayPositioning } from '../../utils/floating-ui';
-import { InteractiveComponent } from '../../utils/interactive';
-import { Scale, Width } from '../interfaces';
-import { DropdownItem } from '../calcite-dropdown-item/customElement.js';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { FlipPlacement, MenuPlacement, OverlayPositioning } from "../../utils/floating-ui.js";
+import type { Scale, Width } from "../interfaces.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.
  * @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] - A slot for the element that triggers the `calcite-dropdown`.
  */
-export declare class Dropdown extends LitElement {
-    /**
-     * When `true`, the component will remain open after a selection is made.
-     *
-     * If the `selectionMode` of the selected `calcite-dropdown-item`'s containing `calcite-dropdown-group` is `"none"`, the component will always close.
-     *
-     * @default false
-     */
-    closeOnSelectDisabled: boolean;
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     *
-     * @default false
-     */
-    disabled: boolean;
-    /** Specifies the component's fallback `calcite-dropdown-item` `placement` when it's initial or specified `placement` has insufficient space available. */
-    flipPlacements: FlipPlacement[];
-    /**
-     * Specifies the maximum number of `calcite-dropdown-item`s to display before showing a scroller.
-     * Value must be greater than `0`, and does not include `groupTitle`'s from `calcite-dropdown-group`.
-     *
-     * @default 0
-     */
-    maxItems: number;
-    /**
-     * Offset the position of the component away from the `referenceElement`.
-     *
-     * @default 0
-     */
-    offsetDistance: number;
-    /**
-     * Offset the position of the component along the `referenceElement`.
-     *
-     * @default 0
-     */
-    offsetSkidding: number;
-    /**
-     * When `true`, displays and positions the component.
-     *
-     * @default false
-     */
-    open: boolean;
-    /**
-     * Determines the type of positioning to use for the overlaid content.
-     *
-     * Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
-     *
-     * `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
-     *
-     * @default "absolute"
-     */
-    overlayPositioning: OverlayPositioning;
-    /**
-     * Determines where the component will be positioned relative to the container element.
-     *
-     * @default "bottom-start"
-     */
-    placement: MenuPlacement;
-    /**
-     * Specifies the size of the component.
-     *
-     * @default "m"
-     */
-    scale: Scale;
-    /** Specifies the component's selected items. */
-    readonly selectedItems: HTMLCalciteDropdownItemElement[];
-    /**
-     * Specifies the action to open the component from the container element.
-     *
-     * @default "click"
-     */
-    type: "hover" | "click";
-    /**
-     * Specifies the width of the component.
-     *
-     * @deprecated in v3.0.0, removal target v6.0.0 - Use the `width` property instead.
-     */
-    widthScale: Scale;
-    /** Specifies the width of the component. */
-    width: Extract<Width, Scale>;
-    /**
-     * Updates the position of the component.
-     *
-     * @param delayed
-     */
-    reposition(delayed?: boolean): Promise<void>;
-    /**
-     * Sets focus on the component's first focusable element.
-     *
-     * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-     * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
-     */
-    setFocus(options?: FocusOptions): Promise<void>;
-    /** Fires when the component is requested to be closed and before the closing transition begins. */
-    readonly calciteDropdownBeforeClose: TargetedEvent<this, void>;
-    /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
-    readonly calciteDropdownBeforeOpen: TargetedEvent<this, void>;
-    /** Fires when the component is closed and animation is complete. */
-    readonly calciteDropdownClose: TargetedEvent<this, void>;
-    /** Fires when the component is open and animation is complete. */
-    readonly calciteDropdownOpen: TargetedEvent<this, void>;
-    /** Fires when a `calcite-dropdown-item`'s selection changes. */
-    readonly calciteDropdownSelect: TargetedEvent<this, void>;
-}
+export abstract class Dropdown extends LitElement {
+  /**
+   * When `true`, the component will remain open after a selection is made.
+   *
+   * If the `selectionMode` of the selected `calcite-dropdown-item`'s containing `calcite-dropdown-group` is `"none"`, the component will always close.
+   *
+   * @default false
+   */
+  accessor closeOnSelectDisabled: boolean;
+  /**
+   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /** Specifies the component's fallback `placement` for slotted `calcite-dropdown-items` when their initial or specified `placement` has insufficient space available. */
+  accessor flipPlacements: FlipPlacement[];
+  /**
+   * Specifies the maximum number of `calcite-dropdown-item`s to display before showing a scroller.
+   * Value must be greater than `0`, and does not include `groupTitle`'s from `calcite-dropdown-group`.
+   *
+   * @default 0
+   */
+  accessor maxItems: number;
+  /**
+   * Offset the position of the component away from the `referenceElement`.
+   *
+   * @default 0
+   */
+  accessor offsetDistance: number;
+  /**
+   * Offset the position of the component along the `referenceElement`.
+   *
+   * @default 0
+   */
+  accessor offsetSkidding: number;
+  /**
+   * When `true`, displays and positions the component.
+   *
+   * @default false
+   */
+  accessor open: boolean;
+  /**
+   * Specifies the type of positioning to use for overlaid content, where:
+   *
+   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   *
+   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   *
+   * @default "absolute"
+   */
+  accessor overlayPositioning: OverlayPositioning;
+  /**
+   * Determines where the component will be positioned relative to the container element.
+   *
+   * @default "bottom-start"
+   */
+  accessor placement: MenuPlacement;
+  /**
+   * Specifies the size of the component.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
+  /** Specifies the component's selected items. */
+  get selectedItems(): DropdownItem[];
+  /**
+   * When `true` and the component is `open`, disables top layer placement.
+   *
+   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
+   *
+   * @default false
+   * @mdn [Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
+   */
+  accessor topLayerDisabled: boolean;
+  /**
+   * Specifies the action to open the component from the container element.
+   *
+   * @default "click"
+   */
+  accessor type: "hover" | "click";
+  /** Specifies the width of the component. */
+  accessor width: Extract<Width, Scale>;
+  /**
+   * Specifies the width of the component.
+   *
+   * @deprecated in v3.0.0, removal target v6.0.0 - Use the `width` property instead.
+   */
+  accessor widthScale: Scale;
+  /**
+   * Updates the position of the component.
+   *
+   * @param delayed
+   */
+  reposition(delayed?: boolean): Promise<void>;
+  /**
+   * Sets focus on the component's first focusable element.
+   *
+   * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
+   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   */
+  setFocus(options?: FocusOptions): Promise<void>;
+  /** Fires when the component is requested to be closed and before the closing transition begins. */
+  readonly calciteDropdownBeforeClose: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
+  readonly calciteDropdownBeforeOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component is closed and animation is complete. */
+  readonly calciteDropdownClose: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component is open and animation is complete. */
+  readonly calciteDropdownOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when a `calcite-dropdown-item`'s selection changes. */
+  readonly calciteDropdownSelect: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteDropdownBeforeClose: Dropdown["calciteDropdownBeforeClose"]["detail"];
+    calciteDropdownBeforeOpen: Dropdown["calciteDropdownBeforeOpen"]["detail"];
+    calciteDropdownClose: Dropdown["calciteDropdownClose"]["detail"];
+    calciteDropdownOpen: Dropdown["calciteDropdownOpen"]["detail"];
+    calciteDropdownSelect: Dropdown["calciteDropdownSelect"]["detail"];
+  };
+}

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

@@ -1,17 +1,21 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0-next.80 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { ref } from "lit/directives/ref.js";
 import { css, nothing, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { queryAssignedElements } from "lit/decorators.js";
-import { d as focusElementInGroup, b as focusElement, z as nextFrame } from "../../chunks/dom.js";
-import { b 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 { f as focusElementInGroup, j as focusElement, v 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 { g as guid } from "../../chunks/guid.js";
-import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.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 { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useInteractive } from "../../chunks/useInteractive.js";
+import { u as useTopLayer } from "../../chunks/useTopLayer.js";
 const SLOTS = {
   trigger: "trigger"
 };
@@ -25,7 +29,7 @@ const IDS = {
   menuButton: (id) => `${idPrefix}-${id}-menubutton`,
   menu: (id) => `${idPrefix}-${id}-menu`
 };
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:inline-block}.wrapper{inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0}@starting-style{.wrapper{opacity:0;inset-block-start:0;left:0}}.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}}.content{max-height:45vh;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))}.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}}.content{max-height:45vh;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))}.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}`;
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0;
@@ -46,6 +50,10 @@ class Dropdown extends LitElement {
     this.transitionProp = "opacity";
     this.resizeObserver = createObserver("resize", (entries) => this.resizeObserverCallback(entries));
     this.focusSetter = useSetFocus()(this);
+    this.interactiveContainer = useInteractive(this);
+    this.topLayer = useTopLayer({
+      target: () => this.floatingEl
+    })(this);
     this.closeOnSelectDisabled = false;
     this.disabled = false;
     this.maxItems = 0;
@@ -56,6 +64,7 @@ class Dropdown extends LitElement {
     this.placement = defaultMenuPlacement;
     this.scale = "m";
     this.selectedItems = [];
+    this.topLayerDisabled = false;
     this.type = "click";
     this.calciteDropdownBeforeClose = createEvent({ cancelable: false });
     this.calciteDropdownBeforeOpen = createEvent({ cancelable: false });
@@ -71,7 +80,7 @@ class Dropdown extends LitElement {
     this.listen("calciteInternalDropdownItemSelect", this.handleItemSelect);
   }
   static {
-    this.properties = { closeOnSelectDisabled: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], flipPlacements: [0, {}, { attribute: false }], maxItems: [11, {}, { reflect: true, type: Number }], offsetDistance: [11, {}, { type: Number, reflect: true }], offsetSkidding: [11, {}, { reflect: true, type: Number }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placement: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selectedItems: [0, {}, { attribute: false }], type: [3, {}, { reflect: true }], widthScale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }] };
+    this.properties = { closeOnSelectDisabled: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], flipPlacements: [0, {}, { attribute: false }], maxItems: [11, {}, { reflect: true, type: Number }], offsetDistance: [11, {}, { type: Number, reflect: true }], offsetSkidding: [11, {}, { reflect: true, type: Number }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placement: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selectedItems: [0, {}, { attribute: false }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], type: [3, {}, { reflect: true }], widthScale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }] };
   }
   static {
     this.shadowRootOptions = { mode: "open", delegatesFocus: true };
@@ -122,9 +131,6 @@ class Dropdown extends LitElement {
       this.handlePropsChange();
     }
   }
-  updated() {
-    updateHostInteraction(this);
-  }
   loaded() {
     this.updateSelectedItems();
     connectFloatingUI(this);
@@ -135,24 +141,12 @@ class Dropdown extends LitElement {
     this.resizeObserver?.disconnect();
     disconnectFloatingUI(this);
   }
-  async handlePopover() {
-    await this.componentOnReady();
-    if (!this.floatingEl) {
-      return;
-    }
-    if (this.open) {
-      this.floatingEl.showPopover();
-    } else {
-      this.floatingEl.hidePopover();
-    }
-  }
   openHandler() {
-    toggleOpenClose(this);
     if (this.disabled) {
       return;
     }
+    toggleOpenClose(this);
     this.reposition(true);
-    this.handlePopover();
   }
   handleDisabledChange(value) {
     if (!value) {
@@ -285,6 +279,7 @@ class Dropdown extends LitElement {
   onBeforeOpen() {
     this.focusOnFirstActiveOrDefaultItem();
     this.calciteDropdownBeforeOpen.emit();
+    this.topLayer.show();
   }
   onOpen() {
     this.calciteDropdownOpen.emit();
@@ -295,6 +290,7 @@ class Dropdown extends LitElement {
   onClose() {
     this.calciteDropdownClose.emit();
     hideFloatingUI(this);
+    this.topLayer.hide();
   }
   setReferenceEl(el) {
     updateRefObserver(this.resizeObserver, this.referenceEl, el);
@@ -304,7 +300,6 @@ class Dropdown extends LitElement {
   setFloatingEl(el) {
     this.floatingEl = el;
     connectFloatingUI(this);
-    this.handlePopover();
   }
   keyDownHandler(event) {
     if (!event.composedPath().includes(this.referenceEl)) {
@@ -369,7 +364,7 @@ class Dropdown extends LitElement {
   }
   render() {
     const { open, guid: guid2 } = this;
-    return InteractiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap(CSS.triggerContainer)} id=${IDS.menuButton(guid2) ?? nothing} @click=${this.toggleDropdown} @keydown=${this.keyDownHandler} ${ref(this.setReferenceEl)}><slot aria-controls=${IDS.menu(guid2) ?? nothing} .ariaExpanded=${open} aria-haspopup=menu name=${SLOTS.trigger}></slot></div><div .ariaHidden=${!open} class=${safeClassMap({
+    return this.interactiveContainer({ disabled: this.disabled, children: html`<div class=${safeClassMap(CSS.triggerContainer)} id=${IDS.menuButton(guid2) ?? nothing} @click=${this.toggleDropdown} @keydown=${this.keyDownHandler} ${ref(this.setReferenceEl)}><slot aria-controls=${IDS.menu(guid2) ?? nothing} .ariaExpanded=${open} aria-haspopup=menu name=${SLOTS.trigger}></slot></div><div .ariaHidden=${!open} class=${safeClassMap({
       [CSS.wrapper]: true,
       [getDimensionClass("width", this.width, this.widthScale)]: !!(this.width || this.widthScale)
     })} popover=manual ${ref(this.setFloatingEl)}><div aria-labelledby=${IDS.menuButton(guid2) ?? nothing} class=${safeClassMap({

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

@@ -1,30 +1,32 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { Scale, SelectionMode } from '../interfaces';
-import { RequestedItem } from './interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { SelectionMode } from "../interfaces.js";
 
-/** @slot  - A slot for adding `calcite-dropdown-item`s. */
-export declare class DropdownGroup extends LitElement {
-    /** Specifies and displays a group title. */
-    groupTitle: string;
-    /**
-     * The position of the group in the dropdown menu.
-     *
-     * @internal
-     * @default -1
-     */
-    position: number;
-    /**
-     * Specifies the selection mode of the component, where:
-     *
-     * `"multiple"` allows any number of selections,
-     *
-     * `"single"` allows only one selection, and
-     *
-     * `"none"` does not allow any selections.
-     *
-     * @default "single"
-     */
-    selectionMode: Extract<"none" | "single" | "multiple", SelectionMode>;
-}
+/**
+ * @cssproperty [--calcite-dropdown-group-border-color] - Specifies the `calcite-dropdown`'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.
+ */
+export abstract class DropdownGroup extends LitElement {
+  /** Specifies and displays a group title. */
+  accessor groupTitle: string;
+  /**
+   * The position of the group in the dropdown menu.
+   *
+   * @default -1
+   * @internal
+   */
+  accessor position: number;
+  /**
+   * Specifies the selection mode of the component, where:
+   *
+   * `"multiple"` allows any number of selections,
+   *
+   * `"single"` allows only one selection, and
+   *
+   * `"none"` does not allow any selections.
+   *
+   * @default "single"
+   */
+  accessor selectionMode: Extract<"none" | "single" | "multiple", SelectionMode>;
+}

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

@@ -1,14 +1,17 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0-next.80 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { 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/resources7.js";
+import { C as CSS$1 } from "../../chunks/resources6.js";
 const CSS = {
   title: "title",
   firstTitle: "first-title",
   separator: "separator"
 };
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}: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--2);line-height:1rem}: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--1);line-height:1rem}: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-0);line-height:1.25rem}: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}`;
+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();

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

@@ -1,50 +1,58 @@
 /// <reference path="../../index.d.ts" />
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { ItemKeyboardEvent } from '../calcite-dropdown/interfaces';
-import { RequestedItem } from '../calcite-dropdown-group/interfaces';
-import { FlipContext, Scale, SelectionMode } from '../interfaces';
-import { InteractiveComponent } from '../../utils/interactive';
-import { IconName } from '../calcite-icon/interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { FlipContext } from "../interfaces.js";
+import type { IconName } from "../calcite-icon/interfaces.js";
 
-/** @slot  - A slot for adding text. */
-export declare class DropdownItem extends LitElement {
-    /**
-     * When `true`, interaction is prevented and the component is displayed with lower opacity.
-     *
-     * @default false
-     */
-    disabled: boolean;
-    /**
-     * Specifies the URL of the linked resource, which can be set as an absolute or relative path.
-     *
-     * Determines if the component will render as an anchor.
-     */
-    href: string;
-    /** Specifies an icon to display at the end of the component. */
-    iconEnd: IconName;
-    /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
-    iconFlipRtl: FlipContext;
-    /** Specifies an icon to display at the start of the component. */
-    iconStart: IconName;
-    /** Accessible name for the component. */
-    label: string;
-    /** Specifies the relationship to the linked document defined in `href`. */
-    rel: string;
-    /**
-     * When `true`, the component is selected.
-     *
-     * @default false
-     */
-    selected: boolean;
-    /** Specifies the frame or window to open the linked document. */
-    target: string;
-    /**
-     * Sets focus on the component.
-     *
-     * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
-     * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
-     */
-    setFocus(options?: FocusOptions): Promise<void>;
-    /** Fires when the component is selected. */
-    readonly calciteDropdownItemSelect: TargetedEvent<this, void>;
-}
+/**
+ * @cssproperty [--calcite-dropdown-item-background-color-hover] - Specifies the item's background color when hovered.
+ * @cssproperty [--calcite-dropdown-item-background-color-press] - Specifies the item's background color when selected or active.
+ * @cssproperty [--calcite-dropdown-item-icon-color-hover] - [Deprecated] Specifies the item's icon selection color when hovered.
+ * @cssproperty [--calcite-dropdown-item-icon-color-press] - Specifies the item's icon selection color when selected or active.
+ * @cssproperty [--calcite-dropdown-item-text-color-press] - Specifies the item's text when selected or active.
+ * @cssproperty [--calcite-dropdown-item-text-color] - Specifies the item's text color.
+ * @slot  - A slot for adding text.
+ */
+export abstract class DropdownItem extends LitElement {
+  /**
+   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   *
+   * @default false
+   */
+  accessor disabled: boolean;
+  /**
+   * Specifies the URL of the linked resource, which can be set as an absolute or relative path.
+   *
+   * Determines if the component will render as an anchor.
+   */
+  accessor href: string;
+  /** Specifies an icon to display at the end of the component. */
+  accessor iconEnd: IconName;
+  /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
+  accessor iconFlipRtl: FlipContext;
+  /** Specifies an icon to display at the start of the component. */
+  accessor iconStart: IconName;
+  /** Specifies an accessible label for the component. */
+  accessor label: string;
+  /** Specifies the relationship to the linked document defined in `href`. */
+  accessor rel: string;
+  /**
+   * When `true`, the component is selected.
+   *
+   * @default false
+   */
+  accessor selected: boolean;
+  /** Specifies the frame or window to open the linked document. */
+  accessor target: string;
+  /**
+   * Sets focus on the component.
+   *
+   * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
+   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   */
+  setFocus(options?: FocusOptions): Promise<void>;
+  /** Fires when the component is selected. */
+  readonly calciteDropdownItemSelect: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteDropdownItemSelect: DropdownItem["calciteDropdownItemSelect"]["detail"];
+  };
+}