@esri/calcite-components 5.1.0-next.6 → 5.1.0-next.60

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

@@ -1,13 +1,11 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as customElement } from "../../chunks/runtime.js";
 import { ref } from "lit/directives/ref.js";
-import { css, nothing, html } from "lit";
+import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { queryAssignedElements } from "lit/decorators.js";
 import { useDirection } from "@arcgis/lumina/controllers";
-import { f as focusElementInGroup, i as focusElement, r as nextFrame } from "../../chunks/dom.js";
+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 { g as guid } from "../../chunks/guid.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";
@@ -15,6 +13,7 @@ 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";
+import { u as useReferenceElement, r as referenceElementManager } from "../../chunks/manager.js";
 const SLOTS = {
   trigger: "trigger"
 };
@@ -23,32 +22,21 @@ const CSS = {
   wrapper: "wrapper",
   triggerContainer: "trigger-container"
 };
-const idPrefix = "calcite-dropdown";
-const IDS = {
-  menuButton: (id) => `${idPrefix}-${id}-menubutton`,
-  menu: (id) => `${idPrefix}-${id}-menu`
-};
-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;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = decorator(target, key, result) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
+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{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 manager = referenceElementManager({ click: true, hover: true });
 class Dropdown extends LitElement {
   constructor() {
     super();
+    this.referenceElementController = useReferenceElement({ manager })(this);
     this.direction = useDirection();
     this.focusLastDropdownItem = false;
+    this.activeItemIndex = -1;
     this.groups = [];
-    this.guid = guid();
     this.items = [];
     this.mutationObserver = createObserver("mutation", () => this.updateItems());
     this.transitionProp = "opacity";
     this.resizeObserver = createObserver("resize", (entries) => this.resizeObserverCallback(entries));
+    this.onReferenceElementKeyDown = (event) => this.keyDownHandler(event);
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
     this.topLayer = useTopLayer({
@@ -72,15 +60,13 @@ class Dropdown extends LitElement {
     this.calciteDropdownOpen = createEvent({ cancelable: false });
     this.calciteDropdownSelect = createEvent({ cancelable: false });
     this.listenOn(window, "click", this.closeCalciteDropdownOnClick);
-    this.listen("calciteInternalDropdownCloseRequest", this.closeCalciteDropdownOnEvent);
     this.listenOn(window, "calciteDropdownOpen", this.closeCalciteDropdownOnOpenEvent);
     this.listen("pointerenter", this.pointerEnterHandler);
     this.listen("pointerleave", this.pointerLeaveHandler);
-    this.listen("calciteInternalDropdownItemKeyEvent", this.calciteInternalDropdownItemKeyEvent);
     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 }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], type: [3, {}, { reflect: true }], widthScale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }] };
+    this.properties = { activeDescendantElement: [16, {}, { state: true }], referenceEl: [16, {}, { state: true }], 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 }], referenceElement: 1, 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 };
@@ -88,6 +74,9 @@ class Dropdown extends LitElement {
   static {
     this.styles = styles;
   }
+  get referenceElementType() {
+    return this.referenceElement ? this.type : null;
+  }
   async reposition(delayed = false) {
     const { filteredFlipPlacements, floatingEl, offsetDistance, offsetSkidding, overlayPositioning, placement, referenceEl } = this;
     return reposition(this, {
@@ -103,7 +92,7 @@ class Dropdown extends LitElement {
     }, delayed);
   }
   async setFocus(options) {
-    return this.focusSetter(() => this.referenceEl, options);
+    return this.focusSetter(() => this.referenceEl instanceof HTMLElement ? this.referenceEl : this.floatingEl, options);
   }
   connectedCallback() {
     super.connectedCallback();
@@ -131,6 +120,14 @@ class Dropdown extends LitElement {
     if (changes.has("scale") && (this.hasUpdated || this.scale !== "m")) {
       this.handlePropsChange();
     }
+    if (changes.has("referenceElement") && !this.referenceElement && this.open) {
+      this.topLayer.hide();
+    }
+  }
+  updated(changes) {
+    if (changes.has("referenceEl") && this.referenceElementType) {
+      connectFloatingUI(this);
+    }
   }
   loaded() {
     this.updateSelectedItems();
@@ -163,29 +160,25 @@ class Dropdown extends LitElement {
     this.updateGroupProps();
   }
   closeCalciteDropdownOnClick(event) {
-    if (this.disabled || !this.open || event.composedPath().includes(this.el)) {
+    if (this.referenceElementType || this.disabled || !this.open || event.composedPath().includes(this.el)) {
       return;
     }
-    this.closeCalciteDropdown(false);
-  }
-  closeCalciteDropdownOnEvent(event) {
     this.closeCalciteDropdown();
-    event.stopPropagation();
   }
   closeCalciteDropdownOnOpenEvent(event) {
-    if (event.composedPath().includes(this.el)) {
+    if (this.referenceElementType || event.composedPath().includes(this.el)) {
       return;
     }
-    this.open = false;
+    this.closeCalciteDropdown();
   }
   pointerEnterHandler() {
-    if (this.disabled || this.type !== "hover") {
+    if (this.referenceElementType || this.disabled || this.type !== "hover") {
       return;
     }
-    this.toggleDropdown();
+    this.open = true;
   }
   pointerLeaveHandler() {
-    if (this.disabled || this.type !== "hover") {
+    if (this.referenceElementType || this.disabled || this.type !== "hover") {
       return;
     }
     this.closeCalciteDropdown();
@@ -193,34 +186,12 @@ class Dropdown extends LitElement {
   getTraversableItems() {
     return this.items.filter((item) => !item.disabled && !item.hidden);
   }
-  calciteInternalDropdownItemKeyEvent(event) {
-    const { keyboardEvent } = event.detail;
-    const target = keyboardEvent.target;
-    const traversableItems = this.getTraversableItems();
-    switch (keyboardEvent.key) {
-      case "Tab":
-        this.open = false;
-        this.updateTabIndexOfItems(target);
-        break;
-      case "ArrowDown":
-        focusElementInGroup(traversableItems, target, "next");
-        break;
-      case "ArrowUp":
-        focusElementInGroup(traversableItems, target, "previous");
-        break;
-      case "Home":
-        focusElementInGroup(traversableItems, target, "first");
-        break;
-      case "End":
-        focusElementInGroup(traversableItems, target, "last");
-        break;
-    }
-    event.stopPropagation();
-  }
-  handleItemSelect(event) {
+  async handleItemSelect(event) {
     this.updateSelectedItems();
+    this.syncActiveItemFromTraversableItems();
     event.stopPropagation();
     this.calciteDropdownSelect.emit();
+    await this.setFocus();
     if (!this.closeOnSelectDisabled) {
       this.closeCalciteDropdown();
     }
@@ -232,6 +203,7 @@ class Dropdown extends LitElement {
   updateItems() {
     this.items = this.groups.map((group) => Array.from(group?.querySelectorAll("calcite-dropdown-item"))).reduce((previousValue, currentValue) => [...previousValue, ...currentValue], []);
     this.updateSelectedItems();
+    this.syncActiveItemFromTraversableItems();
     this.reposition(true);
     this.items.forEach((item) => item.scale = this.scale);
   }
@@ -258,7 +230,7 @@ class Dropdown extends LitElement {
   }
   setDropdownWidth() {
     const { referenceEl, scrollerEl } = this;
-    if (!scrollerEl || !referenceEl) {
+    if (!scrollerEl || !(referenceEl instanceof HTMLElement)) {
       return;
     }
     scrollerEl.style.minWidth = `${referenceEl.clientWidth}px`;
@@ -278,7 +250,7 @@ class Dropdown extends LitElement {
     this.transitionEl = el;
   }
   onBeforeOpen() {
-    this.focusOnFirstActiveOrDefaultItem();
+    this.setInitialActiveItem();
     this.calciteDropdownBeforeOpen.emit();
     this.topLayer.show();
   }
@@ -294,7 +266,9 @@ class Dropdown extends LitElement {
     this.topLayer.hide();
   }
   setReferenceEl(el) {
-    updateRefObserver(this.resizeObserver, this.referenceEl, el);
+    const previousReferenceEl = this.referenceEl instanceof HTMLElement ? this.referenceEl : null;
+    const nextReferenceEl = el instanceof HTMLElement ? el : null;
+    updateRefObserver(this.resizeObserver, previousReferenceEl, nextReferenceEl);
     this.referenceEl = el;
     connectFloatingUI(this);
   }
@@ -303,30 +277,59 @@ class Dropdown extends LitElement {
     connectFloatingUI(this);
   }
   keyDownHandler(event) {
-    if (!event.composedPath().includes(this.referenceEl)) {
+    if (!(this.referenceEl instanceof HTMLElement) || !event.composedPath().includes(this.referenceEl)) {
       return;
     }
     const { defaultPrevented, key } = event;
     if (defaultPrevented) {
       return;
     }
-    if (key === "Escape") {
+    if (this.open && key === "Escape") {
       this.closeCalciteDropdown();
       event.preventDefault();
       return;
     }
-    if (this.open && event.shiftKey && key === "Tab") {
-      this.closeCalciteDropdown();
+    if (!this.open && isActivationKey(key)) {
+      this.open = true;
       event.preventDefault();
       return;
     }
-    if (isActivationKey(key)) {
-      this.toggleDropdown();
-      event.preventDefault();
-    } else if (key === "ArrowDown" || key === "ArrowUp") {
+    if (!this.open && (key === "ArrowDown" || key === "ArrowUp")) {
       event.preventDefault();
       this.focusLastDropdownItem = key === "ArrowUp";
       this.open = true;
+      return;
+    }
+    if (!this.open) {
+      return;
+    }
+    if (key === "Tab") {
+      this.closeCalciteDropdown();
+      return;
+    }
+    if (key === "ArrowDown") {
+      event.preventDefault();
+      this.navigateActiveItem("next");
+      return;
+    }
+    if (key === "ArrowUp") {
+      event.preventDefault();
+      this.navigateActiveItem("previous");
+      return;
+    }
+    if (key === "Home") {
+      event.preventDefault();
+      this.navigateActiveItem("first");
+      return;
+    }
+    if (key === "End") {
+      event.preventDefault();
+      this.navigateActiveItem("last");
+      return;
+    }
+    if (isActivationKey(key)) {
+      event.preventDefault();
+      this.activateActiveItem();
     }
   }
   updateSelectedItems() {
@@ -336,48 +339,120 @@ class Dropdown extends LitElement {
     const style = last.getBoundingClientRect();
     return last.offsetTop + style.height;
   }
-  closeCalciteDropdown(focusTrigger = true) {
+  closeCalciteDropdown() {
     this.open = false;
-    if (focusTrigger) {
-      focusElement(this.triggerEls[0]);
-    }
+    this.setActiveItemByIndex(-1);
   }
-  async focusOnFirstActiveOrDefaultItem() {
-    const selectedItem = this.getTraversableItems().find((item) => item.selected);
-    const target = selectedItem || (this.focusLastDropdownItem ? this.items.at(-1) : this.items[0]);
+  async setInitialActiveItem() {
+    const traversableItems = this.getTraversableItems();
+    const target = this.focusLastDropdownItem ? traversableItems.at(-1) : traversableItems[0];
     this.focusLastDropdownItem = false;
+    if (!target) {
+      this.setActiveItemByIndex(-1);
+      return;
+    }
+    const targetIndex = traversableItems.findIndex((item) => item === target);
+    this.setActiveItemByIndex(targetIndex);
+    await this.scrollActiveItemIntoView(target);
+  }
+  syncActiveItemFromTraversableItems() {
+    const traversableItems = this.getTraversableItems();
+    if (!traversableItems.length) {
+      this.setActiveItemByIndex(-1);
+      return;
+    }
+    if (this.activeItemIndex < 0 || this.activeItemIndex >= traversableItems.length) {
+      this.setActiveItemByIndex(0);
+      return;
+    }
+    this.updateActiveDescendantElement(traversableItems[this.activeItemIndex]);
+  }
+  setActiveItemByIndex(index) {
+    this.activeItemIndex = index;
+    const traversableItems = this.getTraversableItems();
+    const activeItem = index >= 0 ? traversableItems[index] : null;
+    this.updateActiveDescendantElement(activeItem);
+  }
+  updateActiveDescendantElement(activeItem) {
+    this.items.forEach((item) => {
+      item.activeDescendant = item === activeItem;
+    });
+    this.activeDescendantElement = activeItem ?? null;
+  }
+  navigateActiveItem(direction) {
+    const traversableItems = this.getTraversableItems();
+    if (!traversableItems.length) {
+      return;
+    }
+    const totalItems = traversableItems.length;
+    let index = this.activeItemIndex;
+    if (index < 0 || index >= totalItems) {
+      index = direction === "previous" || direction === "last" ? totalItems - 1 : 0;
+    } else if (direction === "next") {
+      index = (index + 1) % totalItems;
+    } else if (direction === "previous") {
+      index = (index - 1 + totalItems) % totalItems;
+    } else if (direction === "first") {
+      index = 0;
+    } else if (direction === "last") {
+      index = totalItems - 1;
+    }
+    const activeItem = traversableItems[index];
+    this.setActiveItemByIndex(index);
+    void this.scrollActiveItemIntoView(activeItem);
+  }
+  async scrollActiveItemIntoView(target) {
     if (!target) {
       return;
     }
     await this.updateComplete;
     await nextFrame();
     await nextFrame();
-    await focusElement(target);
     target.scrollIntoView({ block: "nearest" });
   }
-  toggleDropdown() {
-    this.open = !this.open;
+  activateActiveItem() {
+    const traversableItems = this.getTraversableItems();
+    const activeItem = traversableItems[this.activeItemIndex] || traversableItems[0];
+    if (!activeItem) {
+      return;
+    }
+    this.setActiveItemByIndex(traversableItems.findIndex((item) => item === activeItem));
+    activeItem.activateItem();
   }
-  updateTabIndexOfItems(target) {
-    this.items.forEach((item) => {
-      item.tabIndex = target !== item ? -1 : 0;
-    });
+  openHoverDropdown() {
+    if (this.open || this.disabled || this.type !== "hover") {
+      return;
+    }
+    this.open = true;
+  }
+  closeHoverDropdown(event) {
+    if (!this.open || this.disabled || this.type !== "hover") {
+      return;
+    }
+    const relatedTarget = event.relatedTarget;
+    if (relatedTarget && (this.el.contains(relatedTarget) || this.referenceEl != null && this.referenceEl instanceof HTMLElement && this.referenceEl.contains(relatedTarget))) {
+      return;
+    }
+    this.closeCalciteDropdown();
+  }
+  toggleClickDropdown() {
+    if (this.disabled || this.type !== "click") {
+      return;
+    }
+    this.open = !this.open;
   }
   render() {
-    const { open, guid: guid2 } = this;
-    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({
+    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 ?? null} .ariaControlsElements=${this.scrollerEl ? [this.scrollerEl] : void 0} .ariaExpanded=${open} aria-haspopup=menu name=${SLOTS.trigger}></slot></div>` : null}<div 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({
+    })} .inert=${!open} popover=manual ${ref(this.setFloatingEl)}><div .ariaLabelledByElements=${this.referenceEl instanceof HTMLElement ? [this.referenceEl] : void 0} class=${safeClassMap({
       [CSS.content]: true,
       [FloatingCSS.animation]: true,
       [FloatingCSS.animationActive]: open
-    })} id=${IDS.menu(guid2) ?? nothing} role=menu ${ref(this.setScrollerAndTransitionEl)}><slot @slotchange=${this.updateGroups}></slot></div></div>` });
+    })} role=menu ${ref(this.setScrollerAndTransitionEl)}><slot @slotchange=${this.updateGroups}></slot></div></div>` });
   }
 }
-__decorateClass([
-  queryAssignedElements({ slot: SLOTS.trigger })
-], Dropdown.prototype, "triggerEls");
 customElement("calcite-dropdown", Dropdown);
 export {
   Dropdown

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

@@ -6,7 +6,7 @@ import type { IconName } from "../calcite-icon/interfaces.js";
 /**
  * @cssproperty [--calcite-dropdown-item-background-color-hover] - Specifies the component's background color when hovered.
  * @cssproperty [--calcite-dropdown-item-background-color-press] - Specifies the component's background color when `selected` or active.
- * @cssproperty [--calcite-dropdown-item-icon-color-hover] - [Deprecated] Specifies the color of the component's selection icon when hovered.
+ * @cssproperty [--calcite-dropdown-item-icon-color-hover] - [Deprecated] in v5.0.0, removal target v6.0.0 - Specifies the color of the component's selection icon when hovered.
  * @cssproperty [--calcite-dropdown-item-icon-color-press] - Specifies the color of the component's selection icon when `selected` or active.
  * @cssproperty [--calcite-dropdown-item-text-color-press] - Specifies the component's text color when `selected` or active.
  * @cssproperty [--calcite-dropdown-item-text-color] - Specifies the component's text color.
@@ -47,7 +47,7 @@ export abstract class DropdownItem extends LitElement {
    * 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)
+   * @see [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. */

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

@@ -8,7 +8,7 @@ import { g as getIconScale } from "../../chunks/component.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { C as CSS, I as ICONS } from "../../chunks/resources7.js";
-const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{position:relative;display:flex;flex-grow:1;align-items:center;outline:2px solid transparent;outline-offset:2px}.container{position:relative;display:flex;flex-grow:1;cursor:pointer;align-items:center;text-decoration-line:none;color:var(--calcite-dropdown-item-text-color, var(--calcite-color-text-1));text-align:start}.container a{outline:none;position:relative;display:flex;flex-grow:1;cursor:pointer;align-items:center;text-decoration-line:none;color:var(--calcite-dropdown-item-text-color, var(--calcite-color-text-1))}.content{flex:1 1 auto}.icon{position:relative;opacity:0;transition-timing-function:cubic-bezier(.4,0,.2,1);transform:scale(.9)}.icon--start,.icon--end{--calcite-icon-color: var(--calcite-dropdown-item-text-color, var(--calcite-color-text-3))}:host([scale=s]) .container{padding-block:.25rem;padding-inline:.5rem;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm)}:host([scale=s]) .icon,:host([scale=s]) .icon--start{padding-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .icon--end{padding-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .container{padding-block:.5rem;padding-inline:.75rem;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}:host([scale=m]) .icon,:host([scale=m]) .icon--start{padding-inline-end:var(--calcite-spacing-md)}:host([scale=m]) .icon--end{padding-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .container{padding-block:.625rem;padding-inline:1rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md)}:host([scale=l]) .icon,:host([scale=l]) .icon--start{padding-inline-end:var(--calcite-spacing-lg)}:host([scale=l]) .icon--end{padding-inline-start:var(--calcite-spacing-lg)}:host(:focus) .container{text-decoration-line:none;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))))}:host(:hover:not([disabled])) .container{background-color:var(--calcite-dropdown-item-background-color-hover, var(--calcite-color-foreground-2))}:host(:active:not([disabled])) .container{background-color:var(--calcite-dropdown-item-background-color-press, var(--calcite-color-foreground-3))}:host(:hover:not([disabled])) .container,:host(:active:not([disabled])) .container{text-decoration-line:none;color:var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1))}:host(:hover:not([disabled])) .icon--start,:host(:hover:not([disabled])) .icon--end,:host(:active:not([disabled])) .icon--start,:host(:active:not([disabled])) .icon--end{--calcite-icon-color: var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1))}:host(:hover:not([disabled])) .link,:host(:active:not([disabled])) .link{color:var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1))}:host([selected]) .container:not(.container--none-selection),:host([selected]) .link{font-weight:var(--calcite-font-weight-medium);--calcite-internal-dropdown-item-text-color: var( --calcite-dropdown-item-text-color-press, var(--calcite-color-text-1) );color:var(--calcite-internal-dropdown-item-text-color)}:host([selected]) .container:not(.container--none-selection) .icon,:host([selected]) .link .icon{--calcite-icon-color: var(--calcite-dropdown-item-icon-color-press, var(--calcite-color-brand))}:host([selected]) .container:not(.container--none-selection) .icon--start,:host([selected]) .container:not(.container--none-selection) .icon--end,:host([selected]) .link .icon--start,:host([selected]) .link .icon--end{--calcite-icon-color: var(--calcite-internal-dropdown-item-text-color)}:host(:hover:not([disabled])) .icon{--calcite-icon-color: var(--calcite-dropdown-item-icon-color-hover)}:host([selected]) .icon{opacity:1}: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{position:relative;display:flex;flex-grow:1;align-items:center;outline:2px solid transparent;outline-offset:2px}.container{position:relative;display:flex;flex-grow:1;cursor:pointer;align-items:center;text-decoration-line:none;color:var(--calcite-dropdown-item-text-color, var(--calcite-color-text-1));text-align:start}.container a{outline:none;position:relative;display:flex;flex-grow:1;cursor:pointer;align-items:center;text-decoration-line:none;color:var(--calcite-dropdown-item-text-color, var(--calcite-color-text-1))}.content{flex:1 1 auto}.icon{position:relative;opacity:0;transition-timing-function:cubic-bezier(.4,0,.2,1);transform:scale(.9)}.icon--start,.icon--end{--calcite-icon-color: var(--calcite-dropdown-item-text-color, var(--calcite-color-text-3))}:host([scale=s]) .container{padding-block:.25rem;padding-inline:.5rem;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm)}:host([scale=s]) .icon,:host([scale=s]) .icon--start{padding-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .icon--end{padding-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .container{padding-block:.5rem;padding-inline:.75rem;font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base)}:host([scale=m]) .icon,:host([scale=m]) .icon--start{padding-inline-end:var(--calcite-spacing-md)}:host([scale=m]) .icon--end{padding-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .container{padding-block:var(--calcite-space-sm-plus);padding-inline:1rem;font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md)}:host([scale=l]) .icon,:host([scale=l]) .icon--start{padding-inline-end:var(--calcite-spacing-lg)}:host([scale=l]) .icon--end{padding-inline-start:var(--calcite-spacing-lg)}:host(:focus) .container,:host([active-descendant]) .container{text-decoration-line:none;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))))}:host(:hover:not([disabled])) .container{background-color:var(--calcite-dropdown-item-background-color-hover, var(--calcite-color-foreground-2))}:host(:active:not([disabled])) .container{background-color:var(--calcite-dropdown-item-background-color-press, var(--calcite-color-foreground-3))}:host(:hover:not([disabled])) .container,:host(:active:not([disabled])) .container{text-decoration-line:none;color:var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1))}:host(:hover:not([disabled])) .icon--start,:host(:hover:not([disabled])) .icon--end,:host(:active:not([disabled])) .icon--start,:host(:active:not([disabled])) .icon--end{--calcite-icon-color: var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1))}:host(:hover:not([disabled])) .link,:host(:active:not([disabled])) .link{color:var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1))}:host([selected]) .container:not(.container--none-selection),:host([selected]) .link{font-weight:var(--calcite-font-weight-medium);--calcite-internal-dropdown-item-text-color: var( --calcite-dropdown-item-text-color-press, var(--calcite-color-text-1) );color:var(--calcite-internal-dropdown-item-text-color)}:host([selected]) .container:not(.container--none-selection) .icon,:host([selected]) .link .icon{--calcite-icon-color: var(--calcite-dropdown-item-icon-color-press, var(--calcite-color-brand))}:host([selected]) .container:not(.container--none-selection) .icon--start,:host([selected]) .container:not(.container--none-selection) .icon--end,:host([selected]) .link .icon--start,:host([selected]) .link .icon--end{--calcite-icon-color: var(--calcite-internal-dropdown-item-text-color)}:host(:hover:not([disabled])) .icon{--calcite-icon-color: var(--calcite-dropdown-item-icon-color-hover)}:host([selected]) .icon{opacity:1}:host([hidden]){display:none}[hidden]{display:none}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}`;
 class DropdownItem extends LitElement {
   constructor() {
     super();
@@ -16,19 +16,17 @@ class DropdownItem extends LitElement {
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
     this.disabled = false;
+    this.activeDescendant = false;
     this.scale = "m";
     this.selected = false;
     this.selectionMode = "single";
     this.calciteDropdownItemSelect = createEvent({ cancelable: false });
-    this.calciteInternalDropdownCloseRequest = createEvent({ cancelable: false });
-    this.calciteInternalDropdownItemKeyEvent = createEvent({ cancelable: false });
     this.calciteInternalDropdownItemSelect = createEvent({ cancelable: false });
     this.listen("click", this.onClick);
-    this.listen("keydown", this.keyDownHandler);
     this.listenOn(document.body, "calciteInternalDropdownItemChange", this.updateActiveItemOnChange);
   }
   static {
-    this.properties = { disabled: [7, {}, { reflect: true, type: Boolean }], href: [3, {}, { reflect: true }], iconEnd: [3, { type: String }, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, { type: String }, { reflect: true }], label: 1, rel: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], selectionMode: 1, target: [3, {}, { reflect: true }] };
+    this.properties = { disabled: [7, {}, { reflect: true, type: Boolean }], activeDescendant: [7, {}, { reflect: true, type: Boolean }], href: [3, {}, { reflect: true }], iconEnd: [3, { type: String }, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, { type: String }, { reflect: true }], label: 1, rel: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selected: [7, {}, { reflect: true, type: Boolean }], selectionMode: 1, target: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
@@ -36,6 +34,16 @@ class DropdownItem extends LitElement {
   async setFocus(options) {
     return this.focusSetter(() => this.el, options);
   }
+  async activateItem() {
+    if (this.disabled) {
+      return;
+    }
+    if (this.href) {
+      this.childLinkRef.value?.click();
+      return;
+    }
+    this.emitRequestedItem();
+  }
   connectedCallback() {
     super.connectedCallback();
     this.initialize();
@@ -46,32 +54,6 @@ class DropdownItem extends LitElement {
   onClick() {
     this.emitRequestedItem();
   }
-  keyDownHandler(event) {
-    switch (event.key) {
-      case " ":
-      case "Enter":
-        this.emitRequestedItem();
-        if (this.href) {
-          this.childLinkRef.value.click();
-        }
-        event.preventDefault();
-        break;
-      case "Escape":
-        this.calciteInternalDropdownCloseRequest.emit();
-        event.preventDefault();
-        break;
-      case "Tab":
-        this.calciteInternalDropdownItemKeyEvent.emit({ keyboardEvent: event });
-        break;
-      case "ArrowUp":
-      case "ArrowDown":
-      case "Home":
-      case "End":
-        event.preventDefault();
-        this.calciteInternalDropdownItemKeyEvent.emit({ keyboardEvent: event });
-        break;
-    }
-  }
   updateActiveItemOnChange(event) {
     const parentEmittedChange = event.composedPath().includes(this.parentDropdownGroupEl);
     if (parentEmittedChange) {
@@ -126,7 +108,7 @@ class DropdownItem extends LitElement {
     this.el.ariaChecked = itemAria;
     this.el.ariaLabel = !href ? label : "";
     this.el.role = itemRole;
-    setAttribute(this.el, "tabIndex", disabled ? -1 : 0);
+    setAttribute(this.el, "tabIndex", -1);
     return this.interactiveContainer({ disabled, children: html`<div class=${safeClassMap({
       [CSS.container]: true,
       [CSS.containerNone]: selectionMode === "none"

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

@@ -64,7 +64,7 @@ export abstract class Fab extends LitElement {
    * 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)
+   * @see [MDN - focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   setFocus(options?: FocusOptions): Promise<void>;
 }

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

@@ -2,7 +2,7 @@
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
-import { LitElement, safeClassMap, nothing } from "@arcgis/lumina";
+import { LitElement, nothing, safeClassMap } from "@arcgis/lumina";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 const CSS = {
@@ -11,7 +11,7 @@ const CSS = {
 const ICONS = {
   plus: "plus"
 };
-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:flex;background-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}calcite-button{--calcite-fab-shadow-internal: 0 6px 20px -4px rgba(0, 0, 0, .1), 0 4px 12px -2px rgba(0, 0, 0, .08);box-shadow:var(--calcite-fab-shadow, var(--calcite-fab-shadow-internal));--calcite-button-background-color: var(--calcite-fab-background-color);--calcite-button-border-color: var(--calcite-fab-border-color);--calcite-button-corner-radius: var(--calcite-fab-corner-radius);--calcite-button-text-color: var(--calcite-fab-text-color);--calcite-button-loader-color: var(--calcite-fab-loader-color)}:host([hidden]){display:none}[hidden]{display:none}`;
+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:flex;background-color:transparent}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}calcite-button{--calcite-fab-shadow-internal: var(--calcite-shadow-md);box-shadow:var(--calcite-fab-shadow, var(--calcite-fab-shadow-internal));--calcite-button-background-color: var(--calcite-fab-background-color);--calcite-button-border-color: var(--calcite-fab-border-color);--calcite-button-corner-radius: var(--calcite-fab-corner-radius);--calcite-button-text-color: var(--calcite-fab-text-color);--calcite-button-loader-color: var(--calcite-fab-loader-color)}:host([hidden]){display:none}[hidden]{display:none}`;
 class Fab extends LitElement {
   constructor() {
     super(...arguments);

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

@@ -66,7 +66,7 @@ export abstract class Filter extends LitElement {
    * 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)
+   * @see [MDN - focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   setFocus(options?: FocusOptions): Promise<void>;
   /** Fires when the filter text changes. */

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

@@ -19,7 +19,7 @@ export abstract class Flow extends LitElement {
    *
    * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
    * @returns Promise<void>
-   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
+   * @see [MDN - focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   setFocus(options?: FocusOptions): Promise<void>;
 }