@esri/calcite-components 5.1.0-next.2 → 5.1.0-next.21

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

@@ -1,12 +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 { f as focusElementInGroup, j as focusElement, u as nextFrame } from "../../chunks/dom.js";
+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 { 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";
@@ -22,27 +21,14 @@ 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;
-};
 class Dropdown extends LitElement {
   constructor() {
     super();
+    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";
@@ -70,15 +56,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 }], 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 };
@@ -89,6 +73,7 @@ class Dropdown extends LitElement {
   async reposition(delayed = false) {
     const { filteredFlipPlacements, floatingEl, offsetDistance, offsetSkidding, overlayPositioning, placement, referenceEl } = this;
     return reposition(this, {
+      direction: this.direction,
       floatingEl,
       referenceEl,
       offsetDistance,
@@ -163,23 +148,19 @@ class Dropdown extends LitElement {
     if (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)) {
       return;
     }
-    this.open = false;
+    this.closeCalciteDropdown();
   }
   pointerEnterHandler() {
     if (this.disabled || this.type !== "hover") {
       return;
     }
-    this.toggleDropdown();
+    this.open = true;
   }
   pointerLeaveHandler() {
     if (this.disabled || this.type !== "hover") {
@@ -190,34 +171,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();
     }
@@ -229,6 +188,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);
   }
@@ -275,7 +235,7 @@ class Dropdown extends LitElement {
     this.transitionEl = el;
   }
   onBeforeOpen() {
-    this.focusOnFirstActiveOrDefaultItem();
+    this.setInitialActiveItem();
     this.calciteDropdownBeforeOpen.emit();
     this.topLayer.show();
   }
@@ -307,23 +267,52 @@ class Dropdown extends LitElement {
     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() {
@@ -333,48 +322,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.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`<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><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 ? [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.

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-filter/customElement.js

@@ -85,8 +85,10 @@ class Filter extends LitElement {
       return;
     }
     if (event.key === "Escape") {
-      this.clear();
-      event.preventDefault();
+      if (this.value.length > 0) {
+        this.clear();
+        event.preventDefault();
+      }
     }
     if (event.key === "Enter") {
       event.preventDefault();

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

@@ -6,18 +6,20 @@ import type { Scale } from "../interfaces.js";
 import type { IconName } from "../calcite-icon/interfaces.js";
 
 /**
- * @cssproperty [--calcite-flow-item-footer-padding] - [Deprecated] Use `--calcite-flow-footer-space` instead. Specifies the padding of the component's footer.
- * @cssproperty [--calcite-flow-item-header-border-block-end] - [Deprecated] Use `--calcite-flow-border-color` instead. Specifies the component header's block end border.
+ * @cssproperty [--calcite-flow-item-footer-padding] - [Deprecated] in v3.0.0, removal target v6.0.0 - Use `--calcite-flow-footer-space` instead. Specifies the padding of the component's footer.
+ * @cssproperty [--calcite-flow-item-header-border-block-end] - [Deprecated] in v3.0.0, removal target v6.0.0 - Use `--calcite-flow-border-color` instead. Specifies the component header's block end border.
  * @cssproperty [--calcite-flow-corner-radius] - Specifies the component's corner radius.
  * @cssproperty [--calcite-flow-heading-text-color] - Specifies the text color of the component's `heading`.
  * @cssproperty [--calcite-flow-icon-color] - Specifies the color of the component's `icon`.
  * @cssproperty [--calcite-flow-description-text-color] - Specifies the text color of the component's `description`.
  * @cssproperty [--calcite-flow-border-color] - Specifies the component's border color.
  * @cssproperty [--calcite-flow-background-color] - Specifies the component's background color.
+ * @cssproperty [--calcite-flow-content-top-space] - Specifies the padding of the component's `content-top` slot.
+ * @cssproperty [--calcite-flow-content-bottom-space] - Specifies the padding of the component's `content-bottom` slot.
  * @cssproperty [--calcite-flow-header-background-color] - Specifies the background color of the component's header.
  * @cssproperty [--calcite-flow-footer-background-color] - Specifies the background color of the component's footer.
  * @cssproperty [--calcite-flow-space] - Specifies the padding of the component's `unnamed (default)` slot.
- * @cssproperty [--calcite-flow-header-content-space] - Specifies the padding of the `header-content` slot.
+ * @cssproperty [--calcite-flow-header-content-space] - Specifies the padding of the component's `header-content` slot.
  * @cssproperty [--calcite-flow-footer-space] - Specifies the padding of the component's footer.
  * @cssproperty [--calcite-action-background-color] - Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s. Applies to any slotted `calcite-action`s.
  * @cssproperty [--calcite-action-background-color-hover] - Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s.

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

@@ -4,7 +4,7 @@ import { keyed } from "lit/directives/keyed.js";
 import { css, nothing, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { g as getElementDir } from "../../chunks/dom.js";
+import { useDirection } from "@arcgis/lumina/controllers";
 import { S as SLOTS$1 } from "../../chunks/resources6.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
@@ -30,12 +30,13 @@ const SLOTS = {
   footerEnd: "footer-end",
   footerStart: "footer-start"
 };
-const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}: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:none;inline-size:100%;flex:1 1 auto;overflow:hidden}:host([selected]){display:flex}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}calcite-panel{--calcite-panel-background-color: var(--calcite-flow-background-color);--calcite-panel-border-color: var(--calcite-flow-border-color, var(--calcite-flow-item-header-border-block-end));--calcite-panel-corner-radius: var(--calcite-flow-corner-radius);--calcite-panel-description-text-color: var(--calcite-flow-description-text-color);--calcite-panel-footer-background-color: var(--calcite-flow-footer-background-color);--calcite-panel-footer-space: var(--calcite-flow-footer-space, var(--calcite-flow-item-footer-padding));--calcite-panel-header-action-background-color-hover: var(--calcite-flow-header-action-background-color-hover);--calcite-panel-header-action-background-color-press: var(--calcite-flow-header-action-background-color-press);--calcite-panel-header-action-background-color: var(--calcite-flow-header-action-background-color);--calcite-panel-header-action-indicator-color: var(--calcite-flow-header-action-indicator-color);--calcite-panel-header-action-text-color-press: var(--calcite-flow-header-action-text-color-press);--calcite-panel-header-action-text-color: var(--calcite-flow-header-action-text-color);--calcite-panel-header-background-color: var(--calcite-flow-header-background-color);--calcite-panel-header-content-space: var(--calcite-flow-header-content-space);--calcite-panel-heading-text-color: var(--calcite-flow-heading-text-color);--calcite-panel-icon-color: var(--calcite-flow-icon-color);--calcite-panel-space: var(--calcite-flow-space)}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}: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:none;inline-size:100%;flex:1 1 auto;overflow:hidden}:host([selected]){display:flex}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}calcite-panel{--calcite-panel-background-color: var(--calcite-flow-background-color);--calcite-panel-border-color: var(--calcite-flow-border-color, var(--calcite-flow-item-header-border-block-end));--calcite-panel-corner-radius: var(--calcite-flow-corner-radius);--calcite-panel-description-text-color: var(--calcite-flow-description-text-color);--calcite-panel-footer-background-color: var(--calcite-flow-footer-background-color);--calcite-panel-footer-space: var(--calcite-flow-footer-space, var(--calcite-flow-item-footer-padding));--calcite-panel-header-action-background-color-hover: var(--calcite-flow-header-action-background-color-hover);--calcite-panel-header-action-background-color-press: var(--calcite-flow-header-action-background-color-press);--calcite-panel-header-action-background-color: var(--calcite-flow-header-action-background-color);--calcite-panel-header-action-indicator-color: var(--calcite-flow-header-action-indicator-color);--calcite-panel-header-action-text-color-press: var(--calcite-flow-header-action-text-color-press);--calcite-panel-header-action-text-color: var(--calcite-flow-header-action-text-color);--calcite-panel-header-background-color: var(--calcite-flow-header-background-color);--calcite-panel-header-content-space: var(--calcite-flow-header-content-space);--calcite-panel-heading-text-color: var(--calcite-flow-heading-text-color);--calcite-panel-icon-color: var(--calcite-flow-icon-color);--calcite-panel-space: var(--calcite-flow-space);--calcite-panel-content-top-space: var(--calcite-flow-content-top-space);--calcite-panel-content-bottom-space: var(--calcite-flow-content-bottom-space)}:host([hidden]){display:none}[hidden]{display:none}`;
 class FlowItem extends LitElement {
   constructor() {
     super(...arguments);
     this.backButtonRef = createRef();
     this.containerRef = createRef();
+    this.direction = useDirection();
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
@@ -112,8 +113,7 @@ class FlowItem extends LitElement {
     this.calciteFlowItemBack.emit();
   }
   renderBackButton() {
-    const { el } = this;
-    const rtl = getElementDir(el) === "rtl";
+    const rtl = this.direction === "rtl";
     const { showBackButton, backButtonClick, messages } = this;
     const label = messages.back;
     const icon = rtl ? ICONS.backRight : ICONS.backLeft;

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

@@ -4,7 +4,7 @@ import type { Scale } from "../interfaces.js";
 import type { IconName } from "./interfaces.js";
 
 /**
- * @cssproperty [--calcite-ui-icon-color] - [Deprecated] Use `--calcite-icon-color`. Specifies the component's color. Defaults to current color.
+ * @cssproperty [--calcite-ui-icon-color] - [Deprecated] in v2.13.0, removal target v6.0.0 - Use `--calcite-icon-color` instead. Specifies the component's color. Defaults to current color.
  * @cssproperty [--calcite-icon-color] - Specifies the component's color. Defaults to current color.
  */
 export abstract class Icon extends LitElement {

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

@@ -2,7 +2,7 @@
 import { g as getAssetPath, c as customElement } from "../../chunks/runtime.js";
 import { css, isServer, nothing, svg, html } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
-import { g as getElementDir } from "../../chunks/dom.js";
+import { useDirection } from "@arcgis/lumina/controllers";
 import { t as toAriaBoolean } from "../../chunks/aria.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { l as logger } from "../../chunks/logger.js";
@@ -68,6 +68,7 @@ const styles = css`:host{display:inline-flex;color:var(--calcite-icon-color, var
 class Icon extends LitElement {
   constructor() {
     super(...arguments);
+    this.direction = useDirection();
     this.visible = false;
     this.flipRtl = false;
     this.icon = null;
@@ -133,8 +134,8 @@ class Icon extends LitElement {
     this.intersectionObserver.observe(this.el);
   }
   render() {
-    const { el, flipRtl, pathData, scale, textLabel } = this;
-    const dir = getElementDir(el);
+    const { flipRtl, pathData, scale, textLabel } = this;
+    const dir = this.direction;
     const size = scaleToPx[scale];
     const semantic = !!textLabel;
     const paths = [].concat(pathData || "");

package/dist/components/calcite-inline-editable/customElement.js

@@ -4,7 +4,7 @@ import { css, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap, nothing } from "@arcgis/lumina";
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
-import { b as slotChangeGetAssignedElements } from "../../chunks/dom.js";
+import { a as slotChangeGetAssignedElements } from "../../chunks/dom.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";

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

@@ -1,9 +1,9 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { Alignment, Scale, Status } from "../interfaces.js";
-import type { MutableValidityState } from "../../utils/form.js";
 import type { NumberingSystem } from "../../utils/locale.js";
 import type { IconName } from "../calcite-icon/interfaces.js";
+import type { MutableValidityState } from "../../controllers/useForm.js";
 import type { InputPlacement } from "./interfaces.js";
 
 /**