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

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

@@ -6,7 +6,7 @@ import { css, html, nothing } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { b as dateFromRange, n as nextMonth, p as prevMonth, f as formatCalendarYear, e as parseCalendarYear, j as getDateInMonth, i as inRange, h as hasSameMonthAndYear, k as getOrder } from "../../chunks/date.js";
-import { c as closestElementCrossShadowBoundary, m as getTextWidth } from "../../chunks/dom.js";
+import { c as closestElementCrossShadowBoundary, l as getTextWidth } from "../../chunks/dom.js";
 import { i as isActivationKey } from "../../chunks/key.js";
 import { n as numberStringFormatter } from "../../chunks/locale.js";
 const styles = css`:host{display:block}.header{display:flex;block-size:100%;align-items:center;justify-content:space-between}.chevron-container{display:flex;align-items:center}:host([scale=s]){block-size:24px;margin:var(--calcite-spacing-xs);margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .chevron-container,:host([scale=s]) .chevron{min-inline-size:24px;block-size:24px}:host([scale=m]){block-size:32px;margin:var(--calcite-spacing-sm);margin-inline-start:var(--calcite-spacing-sm-plus)}:host([scale=m]) .chevron-container,:host([scale=m]) .chevron{min-inline-size:32px;block-size:32px;--calcite-internal-action-padding-block: var(--calcite-spacing-xxs)}:host([scale=l]){block-size:44px;margin:var(--calcite-spacing-xs);margin-inline-start:var(--calcite-spacing-sm)}:host([scale=l]) .chevron-container,:host([scale=l]) .chevron{min-inline-size:44px;block-size:44px;--calcite-internal-action-padding-block: var(--calcite-spacing-sm-plus)}.chevron{box-sizing:content-box;display:flex;block-size:100%;inline-size:100%;flex-grow:0;cursor:pointer;align-items:center;justify-content:center;border-style:none;outline-color:transparent;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;--calcite-internal-action-padding-block: 0;--calcite-action-background-color: var(--calcite-date-picker-header-action-background-color);--calcite-action-background-color-hover: var(--calcite-date-picker-header-action-background-color-hover);--calcite-action-background-color-press: var(--calcite-date-picker-header-action-background-color-press);--calcite-action-text-color: var(--calcite-date-picker-header-action-text-color);--calcite-action-text-color-press: var(--calcite-date-picker-header-action-text-color-press)}.chevron:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.chevron[aria-disabled=true]{pointer-events:none}.month-year-container{display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;align-items:center;justify-content:flex-start;text-align:center;line-height:1;gap:var(--calcite-spacing-xxs)}.month-year-container.range-calendar{justify-content:center}.year-container{position:relative;display:flex;block-size:100%}.suffix{display:flex;align-items:center}.year,.suffix{margin-inline:var(--calcite-spacing-xxs);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-date-picker-year-text-color, var(--calcite-color-text-1));font-size:var(--calcite-font-size-md);line-height:var(--calcite-font-line-height-fixed-lg)}.year{position:relative;display:inline-block;border-style:none;background-color:transparent;text-align:center;font-family:inherit;outline-color:transparent;inline-size:44px}.year:hover{transition-timing-function:cubic-bezier(.4,0,.2,1);transition-property:outline-color;outline:2px solid var(--calcite-color-border-2);outline-offset:-2px}.year:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.month-select{--calcite-select-internal-border-width: 0;--calcite-select-internal-icon-border-inline-end-width: 0;--calcite-select-spacing-inline: var(--calcite-spacing-xxs);--calcite-select-font-size: var(--calcite-date-picker-month-select-font-size, var(--calcite-font-size-md));--calcite-select-text-color: var(--calcite-date-picker-month-select-text-color, var(--calcite-color-text-1));--calcite-select-icon-color: var(--calcite-date-picker-month-select-icon-color);--calcite-select-icon-color-hover: var(--calcite-date-picker-month-select-icon-color-hover);--calcite-internal-select-spacing-block: var(--calcite-spacing-xxs);--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-xxs);--calcite-internal-select-line-height: var(--calcite-font-line-height-fixed-lg);--calcite-internal-select-font-weight: var(--calcite-font-weight-medium)}:host([scale=s]) .month-year-container .month-select{--calcite-select-spacing-inline: var(--calcite-spacing-base);--calcite-select-font-size: var(--calcite-date-picker-month-select-font-size, var(--calcite-font-size));--calcite-internal-select-spacing-block: var(--calcite-spacing-base);--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-base);--calcite-internal-select-block-size: 24px;--calcite-internal-select-line-height: var(--calcite-font-line-height-fixed-base)}:host([scale=s]) .month-year-container .year{inline-size:40px}:host([scale=s]) .month-year-container .year,:host([scale=s]) .month-year-container .suffix{font-size:var(--calcite-font-size);line-height:var(--calcite-font-line-height-fixed-base)}:host([scale=l]) .month-year-container .month-select{--calcite-select-spacing-inline: var(--calcite-spacing-sm);--calcite-select-font-size: var(--calcite-date-picker-month-select-font-size, var(--calcite-font-size-lg));--calcite-internal-select-spacing-block: var(--calcite-spacing-sm);--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-sm);--calcite-internal-select-block-size: 44px;--calcite-internal-select-line-height: var(--calcite-font-line-height-fixed-xl)}:host([scale=l]) .month-year-container .year{inline-size:48px}:host([scale=l]) .month-year-container .year,:host([scale=l]) .month-year-container .suffix{font-size:var(--calcite-font-size-lg);line-height:var(--calcite-font-line-height-fixed-xl)}:host([hidden]){display:none}[hidden]{display:none}`;
@@ -270,7 +270,7 @@ class DatePickerMonthHeader extends LitElement {
   renderChevron(direction) {
     const isDirectionRight = direction === "right";
     const isDisabled = hasSameMonthAndYear(isDirectionRight ? this.nextMonthDate : this.prevMonthDate, this.activeDate) || !inRange(this.activeDate, this.min, this.max);
-    return html`<calcite-action alignment=center .ariaDisabled=${isDisabled} .ariaLabel=${isDirectionRight ? this.messages.nextMonth : this.messages.prevMonth} class=${safeClassMap(CSS.chevron)} compact data-direction=${direction ?? nothing} .disabled=${isDisabled} .icon=${isDirectionRight ? ICON.chevronRight : ICON.chevronLeft} icon-flip-rtl @click=${isDirectionRight ? this.nextMonthClick : this.prevMonthClick} @keydown=${isDirectionRight ? this.nextMonthKeydown : this.prevMonthKeydown} role=button .scale=${this.scale === "l" ? "l" : "m"} .text=${isDirectionRight ? this.messages.nextMonth : this.messages.prevMonth} ${ref(isDirectionRight ? this.nextMonthActionRef : this.prevMonthActionRef)}></calcite-action>`;
+    return html`<calcite-action alignment=center .ariaDisabled=${isDisabled} .ariaLabel=${isDirectionRight ? this.messages.nextMonth : this.messages.prevMonth} class=${safeClassMap(CSS.chevron)} compact data-direction=${direction ?? nothing} .disabled=${isDisabled} .icon=${isDirectionRight ? ICON.chevronRight : ICON.chevronLeft} icon-flip-rtl @click=${isDirectionRight ? this.nextMonthClick : this.prevMonthClick} @keydown=${isDirectionRight ? this.nextMonthKeydown : this.prevMonthKeydown} role=button .scale=${this.scale} .text=${isDirectionRight ? this.messages.nextMonth : this.messages.prevMonth} ${ref(isDirectionRight ? this.nextMonthActionRef : this.prevMonthActionRef)}></calcite-action>`;
   }
 }
 customElement("calcite-date-picker-month-header", DatePickerMonthHeader);

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

@@ -16,6 +16,8 @@ import type { DialogPlacement } from "./interfaces.js";
  * @cssproperty [--calcite-dialog-min-size-y] - Specifies the component's minimum height, using `px`, `em`, `rem`, `vh`, or `%`.
  * @cssproperty [--calcite-dialog-max-size-y] - Specifies the component's maximum height, using `px`, `em`, `rem`, `vh`, or `%`.
  * @cssproperty [--calcite-dialog-content-space] - Specifies the padding of the component's content.
+ * @cssproperty [--calcite-dialog-content-top-space] - Specifies the padding of the component's `content-top` slot.
+ * @cssproperty [--calcite-dialog-content-bottom-space] - Specifies the padding of the component's `content-bottom` slot.
  * @cssproperty [--calcite-dialog-footer-space] - Specifies the padding of the component's footer.
  * @cssproperty [--calcite-dialog-border-color] - Specifies the component's border color.
  * @cssproperty [--calcite-dialog-offset-x] - Specifies the component's horizontal offset.

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

@@ -5,7 +5,7 @@ import { u as useSizeOverride, i as interact } from "../../chunks/useSizeOverrid
 import { css, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { a as getStylePixelValue } from "../../chunks/dom.js";
+import { g as getStylePixelValue } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { g as getDimensionClass } from "../../chunks/dynamicClasses.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
@@ -41,7 +41,7 @@ const SLOTS = {
 };
 const initialDragPosition = { x: null, y: null };
 const initialResizePosition = { top: null, right: null, bottom: null, left: null };
-const styles = css`:host{--calcite-dialog-scrim-background-color: rgba(0, 0, 0, .85);pointer-events:none;inset:0;display:flex;--calcite-internal-dialog-animation-offset: 20px}:host([top-layer-disabled]),:host([top-layer-disabled]) .container,:host([embedded]),.container--embedded{z-index:var(--calcite-z-index-overlay)}:host([embedded][modal]){position:absolute}.container{pointer-events:auto;position:fixed;inset:0;display:flex;block-size:100%;inline-size:100%;align-items:center;justify-content:center;overflow:hidden;color:var(--calcite-color-text-2);opacity:0;visibility:hidden;transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow),opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88)}:host([placement=top]) .container{align-items:flex-start;justify-content:center}:host([placement=top-start]) .container{align-items:flex-start;justify-content:flex-start}:host([placement=top-end]) .container{align-items:flex-start;justify-content:flex-end}:host([placement=bottom]) .container{align-items:flex-end;justify-content:center}:host([placement=bottom-start]) .container{align-items:flex-end;justify-content:flex-start}:host([placement=bottom-end]) .container{align-items:flex-end;justify-content:flex-end}:host(:not([modal])) .container{pointer-events:none}:host([scale=s]){--calcite-internal-dialog-content-padding: var(--calcite-dialog-content-space, var(--calcite-spacing-sm));--calcite-internal-dialog-min-size-x: 198px;--calcite-internal-dialog-min-size-y: 140px}:host([scale=m]){--calcite-internal-dialog-content-padding: var(--calcite-dialog-content-space, var(--calcite-spacing-md));--calcite-internal-dialog-min-size-x: 288px;--calcite-internal-dialog-min-size-y: 180px}:host([scale=l]){--calcite-internal-dialog-content-padding: var(--calcite-dialog-content-space, var(--calcite-spacing-md-plus));--calcite-internal-dialog-min-size-x: 388px;--calcite-internal-dialog-min-size-y: 220px}.scrim{--calcite-scrim-background: var(--calcite-dialog-scrim-background-color, var(--calcite-color-transparent-scrim));--calcite-scrim-background-color: var( --calcite-dialog-scrim-background-color, var(--calcite-color-transparent-scrim) );position:fixed;inset:0;display:flex;overflow-y:hidden;z-index:calc(var(--calcite-z-index) * -1)}:host([top-layer-disabled]) .scrim{z-index:unset}calcite-panel{--calcite-panel-content-space: var(--calcite-dialog-content-space, var(--calcite-internal-dialog-content-padding));--calcite-panel-footer-space: var(--calcite-dialog-footer-space);--calcite-panel-border-color: var(--calcite-dialog-border-color);--calcite-panel-background-color: var(--calcite-dialog-background-color, var(--calcite-color-foreground-1));--calcite-panel-icon-color: var(--calcite-dialog-icon-color);--calcite-panel-heading-text-color: var(--calcite-dialog-heading-text-color);--calcite-panel-description-text-color: var(--calcite-dialog-description-text-color);--calcite-panel-header-background-color: var(--calcite-dialog-header-background-color);--calcite-panel-header-action-background-color: var(--calcite-dialog-header-action-background-color);--calcite-panel-header-action-background-color-hover: var(--calcite-dialog-header-action-background-color-hover);--calcite-panel-header-action-background-color-press: var(--calcite-dialog-header-action-background-color-press);--calcite-panel-header-action-text-color: var(--calcite-dialog-header-action-text-color);--calcite-panel-header-action-text-color-press: var(--calcite-dialog-header-action-text-color-press);--calcite-panel-footer-background-color: var(--calcite-dialog-footer-background-color);--calcite-panel-space: var(--calcite-dialog-space, var(--calcite-internal-dialog-content-padding));--calcite-panel-header-content-space: var(--calcite-dialog-header-content-space, var(--calcite-dialog-content-space));--calcite-popover-border-color: var(--calcite-dialog-action-menu-border-color, var(--calcite-color-border-1));--calcite-panel-corner-radius: var(--calcite-dialog-corner-radius)}:host([kind=brand]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-brand))}:host([kind=danger]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-status-danger))}:host([kind=info]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-status-info))}:host([kind=success]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-status-success))}:host([kind=warning]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-status-warning))}::slotted(*){--calcite-panel-background-color: initial}[popover]{padding:0;border:none;background-color:transparent;position:fixed;display:flex}[popover]:popover-open{display:flex}.dialog{pointer-events:none;position:relative;margin:1.5rem;box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;opacity:0;--tw-shadow: 0 2px 12px -4px rgba(0, 0, 0, .2), 0 2px 4px -2px rgba(0, 0, 0, .16);--tw-shadow-colored: 0 2px 12px -4px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);-webkit-overflow-scrolling:touch;visibility:hidden;transition:inset-block-start var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88) allow-discrete,opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88);border-radius:var(--calcite-dialog-corner-radius, var(--calcite-corner-radius-sm));min-inline-size:var(--calcite-dialog-min-size-x, var(--calcite-internal-dialog-min-size-x));max-inline-size:var(--calcite-dialog-max-size-x, 100%);min-block-size:var(--calcite-dialog-min-size-y, var(--calcite-internal-dialog-min-size-y));max-block-size:var(--calcite-dialog-max-size-y, 100%);--calcite-internal-dialog-hidden-position: calc( var(--calcite-dialog-offset-y, 0px) + var(--calcite-internal-dialog-animation-offset) );--calcite-internal-dialog-shown-position: var(--calcite-dialog-offset-y, 0);inset-inline-start:var(--calcite-dialog-offset-x, 0);inset-block-start:var(--calcite-internal-dialog-hidden-position)}:host([top-layer-disabled]) .dialog,:host([embedded]) .dialog{z-index:var(--calcite-z-index-modal)}:host([menu-open]) .dialog{transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow),opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88)}.panel{visibility:hidden;opacity:0;border-radius:var(--calcite-dialog-corner-radius, var(--calcite-corner-radius-sm));transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow),opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88)}.container--open .panel{visibility:visible;opacity:1;transition:visibility 0ms linear,opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88)}.container--open{opacity:1;visibility:visible;transition-delay:0ms}.container--open .dialog{pointer-events:auto;visibility:visible;opacity:1;transition:inset-block-start var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88) allow-discrete,opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88);transition-delay:0ms}.width-s{inline-size:auto;inline-size:var(--calcite-dialog-size-x, 32rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width:35rem){:host(:not([fullscreen-disabled])) .width-s{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}}.width-m{inline-size:var(--calcite-dialog-size-x, 48rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width:51rem){:host(:not([fullscreen-disabled])) .width-m{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}}.width-l{inline-size:var(--calcite-dialog-size-x, 94rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width:97rem){:host(:not([fullscreen-disabled])) .width-l{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}}:host([placement=cover]) .dialog{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0}:host([placement=cover]) .panel{border-radius:0}:host([kind]) .panel{border-start-start-radius:0px;border-start-end-radius:0px}:host([kind]) .dialog{overflow:hidden}:host([kind=brand]) .dialog{border-color:var(--calcite-color-brand)}:host([kind=danger]) .dialog{border-color:var(--calcite-dialog-accent-color, var(--calcite-color-status-danger))}:host([kind=info]) .dialog{border-color:var(--calcite-dialog-accent-color, var(--calcite-color-status-info))}:host([kind=success]) .dialog{border-color:var(--calcite-dialog-accent-color, var(--calcite-color-status-success))}:host([kind=warning]) .dialog{border-color:var(--calcite-dialog-accent-color, var(--calcite-color-status-warning))}:host([open]) .dialog{inset-block-start:var(--calcite-internal-dialog-shown-position)}@starting-style{:host([open]) .dialog{inset-block-start:var(--calcite-internal-dialog-hidden-position)}}:host([kind=brand][open]) .dialog,:host([kind=danger][open]) .dialog,:host([kind=info][open]) .dialog,:host([kind=success][open]) .dialog,:host([kind=warning][open]) .dialog{border-width:0px;border-block-start-width:4px;border-style:solid}.container--embedded{position:absolute;pointer-events:auto}.container--embedded calcite-scrim{position:absolute}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{--calcite-dialog-scrim-background-color: rgba(0, 0, 0, .85);pointer-events:none;inset:0;display:flex;--calcite-internal-dialog-animation-offset: 20px}:host([top-layer-disabled]),:host([top-layer-disabled]) .container,:host([embedded]),.container--embedded{z-index:var(--calcite-z-index-overlay)}:host([embedded][modal]){position:absolute}.container{pointer-events:auto;position:fixed;inset:0;display:flex;block-size:100%;inline-size:100%;align-items:center;justify-content:center;overflow:hidden;color:var(--calcite-color-text-2);opacity:0;visibility:hidden;transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow),opacity var(--calcite-internal-animation-timing-slow) ease-in-out}:host([placement=top]) .container{align-items:flex-start;justify-content:center}:host([placement=top-start]) .container{align-items:flex-start;justify-content:flex-start}:host([placement=top-end]) .container{align-items:flex-start;justify-content:flex-end}:host([placement=bottom]) .container{align-items:flex-end;justify-content:center}:host([placement=bottom-start]) .container{align-items:flex-end;justify-content:flex-start}:host([placement=bottom-end]) .container{align-items:flex-end;justify-content:flex-end}:host(:not([modal])) .container{pointer-events:none}:host([scale=s]){--calcite-internal-dialog-content-padding: var(--calcite-dialog-content-space, var(--calcite-spacing-sm));--calcite-internal-dialog-min-size-x: 198px;--calcite-internal-dialog-min-size-y: 140px}:host([scale=m]){--calcite-internal-dialog-content-padding: var(--calcite-dialog-content-space, var(--calcite-spacing-md));--calcite-internal-dialog-min-size-x: 288px;--calcite-internal-dialog-min-size-y: 180px}:host([scale=l]){--calcite-internal-dialog-content-padding: var(--calcite-dialog-content-space, var(--calcite-spacing-md-plus));--calcite-internal-dialog-min-size-x: 388px;--calcite-internal-dialog-min-size-y: 220px}.scrim{--calcite-scrim-background: var(--calcite-dialog-scrim-background-color, var(--calcite-color-transparent-scrim));--calcite-scrim-background-color: var( --calcite-dialog-scrim-background-color, var(--calcite-color-transparent-scrim) );position:fixed;inset:0;display:flex;overflow-y:hidden;z-index:calc(var(--calcite-z-index) * -1)}:host([top-layer-disabled]) .scrim{z-index:unset}calcite-panel{--calcite-panel-content-space: var(--calcite-dialog-content-space, var(--calcite-internal-dialog-content-padding));--calcite-panel-content-top-space: var( --calcite-dialog-content-top-space, var(--calcite-internal-dialog-content-padding) );--calcite-panel-content-bottom-space: var( --calcite-dialog-content-bottom-space, var(--calcite-internal-dialog-content-padding) );--calcite-panel-footer-space: var(--calcite-dialog-footer-space);--calcite-panel-border-color: var(--calcite-dialog-border-color);--calcite-panel-background-color: var(--calcite-dialog-background-color, var(--calcite-color-foreground-1));--calcite-panel-icon-color: var(--calcite-dialog-icon-color);--calcite-panel-heading-text-color: var(--calcite-dialog-heading-text-color);--calcite-panel-description-text-color: var(--calcite-dialog-description-text-color);--calcite-panel-header-background-color: var(--calcite-dialog-header-background-color);--calcite-panel-header-action-background-color: var(--calcite-dialog-header-action-background-color);--calcite-panel-header-action-background-color-hover: var(--calcite-dialog-header-action-background-color-hover);--calcite-panel-header-action-background-color-press: var(--calcite-dialog-header-action-background-color-press);--calcite-panel-header-action-text-color: var(--calcite-dialog-header-action-text-color);--calcite-panel-header-action-text-color-press: var(--calcite-dialog-header-action-text-color-press);--calcite-panel-footer-background-color: var(--calcite-dialog-footer-background-color);--calcite-panel-space: var(--calcite-dialog-space, var(--calcite-internal-dialog-content-padding));--calcite-panel-header-content-space: var(--calcite-dialog-header-content-space, var(--calcite-dialog-content-space));--calcite-popover-border-color: var(--calcite-dialog-action-menu-border-color, var(--calcite-color-border-1));--calcite-panel-corner-radius: var(--calcite-dialog-corner-radius)}:host([kind=brand]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-brand))}:host([kind=danger]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-status-danger))}:host([kind=info]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-status-info))}:host([kind=success]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-status-success))}:host([kind=warning]) calcite-panel{--calcite-panel-icon-color: var(--calcite-dialog-icon-color, var(--calcite-color-status-warning))}::slotted(*){--calcite-panel-background-color: initial}[popover]{padding:0;border:none;background-color:transparent;position:fixed;display:flex}[popover]:popover-open{display:flex}.dialog{pointer-events:none;position:relative;margin:1.5rem;box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;opacity:0;--tw-shadow: 0 2px 12px -4px rgba(0, 0, 0, .2), 0 2px 4px -2px rgba(0, 0, 0, .16);--tw-shadow-colored: 0 2px 12px -4px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);-webkit-overflow-scrolling:touch;visibility:hidden;transition:inset-block-start var(--calcite-internal-animation-timing-slow) ease-in-out allow-discrete,opacity var(--calcite-internal-animation-timing-slow) ease-in-out;border-radius:var(--calcite-dialog-corner-radius, var(--calcite-corner-radius-sm));min-inline-size:var(--calcite-dialog-min-size-x, var(--calcite-internal-dialog-min-size-x));max-inline-size:var(--calcite-dialog-max-size-x, 100%);min-block-size:var(--calcite-dialog-min-size-y, var(--calcite-internal-dialog-min-size-y));max-block-size:var(--calcite-dialog-max-size-y, 100%);--calcite-internal-dialog-hidden-position: calc( var(--calcite-dialog-offset-y, 0px) + var(--calcite-internal-dialog-animation-offset) );--calcite-internal-dialog-shown-position: var(--calcite-dialog-offset-y, 0);inset-inline-start:var(--calcite-dialog-offset-x, 0);inset-block-start:var(--calcite-internal-dialog-hidden-position)}:host([top-layer-disabled]) .dialog,:host([embedded]) .dialog{z-index:var(--calcite-z-index-modal)}:host([menu-open]) .dialog{transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow),opacity var(--calcite-internal-animation-timing-slow) ease-in-out}.panel{visibility:hidden;opacity:0;border-radius:var(--calcite-dialog-corner-radius, var(--calcite-corner-radius-sm));transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow),opacity var(--calcite-internal-animation-timing-slow) ease-in-out}.container--open .panel{visibility:visible;opacity:1;transition:visibility 0ms linear,opacity var(--calcite-internal-animation-timing-slow) ease-in-out}.container--open{opacity:1;visibility:visible;transition-delay:0ms}.container--open .dialog{pointer-events:auto;visibility:visible;opacity:1;transition:inset-block-start var(--calcite-internal-animation-timing-slow) ease-in-out allow-discrete,opacity var(--calcite-internal-animation-timing-slow) ease-in-out;transition-delay:0ms}.width-s{inline-size:auto;inline-size:var(--calcite-dialog-size-x, 32rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width:35rem){:host(:not([fullscreen-disabled])) .width-s{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}}.width-m{inline-size:var(--calcite-dialog-size-x, 48rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width:51rem){:host(:not([fullscreen-disabled])) .width-m{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}}.width-l{inline-size:var(--calcite-dialog-size-x, 94rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width:97rem){:host(:not([fullscreen-disabled])) .width-l{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}}:host([placement=cover]) .dialog{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0}:host([placement=cover]) .panel{border-radius:0}:host([kind]) .panel{border-start-start-radius:0px;border-start-end-radius:0px}:host([kind]) .dialog{overflow:hidden}:host([kind=brand]) .dialog{border-color:var(--calcite-color-brand)}:host([kind=danger]) .dialog{border-color:var(--calcite-dialog-accent-color, var(--calcite-color-status-danger))}:host([kind=info]) .dialog{border-color:var(--calcite-dialog-accent-color, var(--calcite-color-status-info))}:host([kind=success]) .dialog{border-color:var(--calcite-dialog-accent-color, var(--calcite-color-status-success))}:host([kind=warning]) .dialog{border-color:var(--calcite-dialog-accent-color, var(--calcite-color-status-warning))}:host([open]) .dialog{inset-block-start:var(--calcite-internal-dialog-shown-position)}@starting-style{:host([open]) .dialog{inset-block-start:var(--calcite-internal-dialog-hidden-position)}}:host([kind=brand][open]) .dialog,:host([kind=danger][open]) .dialog,:host([kind=info][open]) .dialog,:host([kind=success][open]) .dialog,:host([kind=warning][open]) .dialog{border-width:0px;border-block-start-width:4px;border-style:solid}.container--embedded{position:absolute;pointer-events:auto}.container--embedded calcite-scrim{position:absolute}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}`;
 class Dialog extends LitElement {
   constructor() {
     super(...arguments);

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

@@ -1,6 +1,6 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { FlipPlacement, MenuPlacement, OverlayPositioning } from "../../utils/floating-ui.js";
+import type { FlipPlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui.js";
 import type { Scale, Width } from "../interfaces.js";
 import type { DropdownItem } from "../calcite-dropdown-item/customElement.js";
 
@@ -67,7 +67,7 @@ export abstract class Dropdown extends LitElement {
    *
    * @default "bottom-start"
    */
-  accessor placement: MenuPlacement;
+  accessor placement: LogicalPlacement;
   /**
    * Specifies the size of the component.
    *

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:.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,: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.