@esri/calcite-components 5.2.0-next.7 → 5.2.0-next.71

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

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

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

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

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

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

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

@@ -1,17 +1,9 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { FlipContext } from "../interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { FlipContext } from "../types.js";
+import type { IconName } from "../calcite-icon/types.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] 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.
- * @slot  - A slot for adding text.
- */
+/** @slot  - A slot for adding text. */
 export abstract class DropdownItem extends LitElement {
   /**
    * When `true`, prevents interaction and decreases the component's opacity.
@@ -24,17 +16,17 @@ export abstract class DropdownItem extends LitElement {
    *
    * Determines if the component will render as an anchor.
    */
-  accessor href: string;
+  accessor href: string | undefined;
   /** Specifies an icon to display at the end of the component. */
-  accessor iconEnd: IconName;
+  accessor iconEnd: IconName | undefined;
   /** When the element direction is right-to-left (`"rtl"`), flips the component's `iconStart` and/or `iconEnd`. */
-  accessor iconFlipRtl: FlipContext;
+  accessor iconFlipRtl: FlipContext | undefined;
   /** Specifies an icon to display at the start of the component. */
-  accessor iconStart: IconName;
+  accessor iconStart: IconName | undefined;
   /** Specifies an accessible label for the component. */
-  accessor label: string;
+  accessor label: string | undefined;
   /** Specifies the relationship to the linked resource defined in `href`. */
-  accessor rel: string;
+  accessor rel: string | undefined;
   /**
    * When `true`, the component is selected.
    *
@@ -42,7 +34,7 @@ export abstract class DropdownItem extends LitElement {
    */
   accessor selected: boolean;
   /** Specifies the frame or window to open the linked resource. */
-  accessor target: string;
+  accessor target: string | undefined;
   /**
    * Sets focus on the component.
    *

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

@@ -7,7 +7,7 @@ import { t as toAriaBoolean } from "../../chunks/aria.js";
 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/resources9.js";
+import { C as CSS, I as ICONS } from "../../chunks/resources17.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: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() {
@@ -26,7 +26,7 @@ class DropdownItem extends LitElement {
     this.listenOn(document.body, "calciteInternalDropdownItemChange", this.updateActiveItemOnChange);
   }
   static {
-    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 }] };
+    this.properties = { disabled: [7, {}, { reflect: true, type: Boolean }], activeDescendant: [7, {}, { reflect: true, type: Boolean }], href: [3, {}, { reflect: true }], iconEnd: [3, {}, { reflect: true }], iconFlipRtl: [3, {}, { reflect: true }], iconStart: [3, {}, { 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;
@@ -55,7 +55,7 @@ class DropdownItem extends LitElement {
     this.emitRequestedItem();
   }
   updateActiveItemOnChange(event) {
-    const parentEmittedChange = event.composedPath().includes(this.parentDropdownGroupEl);
+    const parentEmittedChange = this.parentDropdownGroupEl && event.composedPath().includes(this.parentDropdownGroupEl);
     if (parentEmittedChange) {
       this.requestedDropdownGroup = event.detail.requestedDropdownGroup;
       this.requestedDropdownItem = event.detail.requestedDropdownItem;
@@ -64,7 +64,7 @@ class DropdownItem extends LitElement {
     event.stopPropagation();
   }
   initialize() {
-    this.parentDropdownGroupEl = this.el.closest("calcite-dropdown-group");
+    this.parentDropdownGroupEl = this.el.closest("calcite-dropdown-group") ?? void 0;
     if (this.selectionMode === "none") {
       this.selected = false;
     }
@@ -106,7 +106,7 @@ class DropdownItem extends LitElement {
     const itemAria = selectionMode !== "none" ? toAriaBoolean(this.selected) : null;
     const { disabled } = this;
     this.el.ariaChecked = itemAria;
-    this.el.ariaLabel = !href ? label : "";
+    this.el.ariaLabel = !href ? label ?? null : "";
     this.el.role = itemRole;
     setAttribute(this.el, "tabIndex", -1);
     return this.interactiveContainer({ disabled, children: html`<div class=${safeClassMap({

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

@@ -1,16 +1,8 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Appearance, Kind, Scale } from "../interfaces.js";
-import type { IconName } from "../calcite-icon/interfaces.js";
+import type { Appearance, Kind, Scale } from "../types.js";
+import type { IconName } from "../calcite-icon/types.js";
 
-/**
- * @cssproperty [--calcite-fab-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-fab-border-color] - Specifies the component's border color.
- * @cssproperty [--calcite-fab-corner-radius] - Specifies the component's corner radius.
- * @cssproperty [--calcite-fab-text-color] - Specifies the component's text color.
- * @cssproperty [--calcite-fab-loader-color] - Specifies the component's loader color.
- * @cssproperty [--calcite-fab-shadow] - Specifies the component's shadow.
- */
 export abstract class Fab extends LitElement {
   /**
    * Specifies the component's appearance style.

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

@@ -28,7 +28,7 @@ class Fab extends LitElement {
     this.textEnabled = false;
   }
   static {
-    this.properties = { appearance: [3, {}, { reflect: true }], disabled: [7, {}, { reflect: true, type: Boolean }], icon: [3, { type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], kind: [3, {}, { reflect: true }], label: 1, loading: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], text: 1, textEnabled: [7, {}, { reflect: true, type: Boolean }] };
+    this.properties = { appearance: [3, {}, { reflect: true }], disabled: [7, {}, { reflect: true, type: Boolean }], icon: [3, {}, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], kind: [3, {}, { reflect: true }], label: 1, loading: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], text: 1, textEnabled: [7, {}, { reflect: true, type: Boolean }] };
   }
   static {
     this.styles = styles;

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

@@ -1,23 +1,7 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Scale } from "../interfaces.js";
+import type { Scale } from "../types.js";
 
-/**
- * @cssproperty [--calcite-filter-content-space] - Specifies the padding of the component's content.
- * @cssproperty [--calcite-filter-input-background-color] - Specifies the component's input background color.
- * @cssproperty [--calcite-filter-input-border-color] - Specifies the component's input border color.
- * @cssproperty [--calcite-filter-input-corner-radius] - Specifies the component's input corner radius.
- * @cssproperty [--calcite-filter-input-shadow] - Specifies the component's input shadow.
- * @cssproperty [--calcite-filter-input-icon-color] - Specifies the component's input icon color.
- * @cssproperty [--calcite-filter-input-text-color] - Specifies the component's input text color.
- * @cssproperty [--calcite-filter-input-placeholder-text-color] - Specifies the component's input placeholder text color.
- * @cssproperty [--calcite-filter-input-actions-background-color] - Specifies the background color of the component's input `clearable` element.
- * @cssproperty [--calcite-filter-input-actions-background-color-hover] - Specifies the background color of the component's input `clearable` element when hovered.
- * @cssproperty [--calcite-filter-input-actions-background-color-press] - Specifies the background color of the component's input `clearable` element when pressed.
- * @cssproperty [--calcite-filter-input-actions-icon-color] - Specifies the icon color of the component's input `clearable` element.
- * @cssproperty [--calcite-filter-input-actions-icon-color-hover] - Specifies the icon color of the component's input `clearable` element when hovered.
- * @cssproperty [--calcite-filter-input-actions-icon-color-press] - Specifies the icon color of the component's input `clearable` element when pressed.
- */
 export abstract class Filter extends LitElement {
   /**
    * When `true`, prevents interaction and decreases the component's opacity.
@@ -39,10 +23,14 @@ export abstract class Filter extends LitElement {
   accessor items: object[];
   /** Specifies an accessible label for the component. */
   accessor label: string | undefined;
-  /** Overrides individual strings used by the component. */
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
   accessor messageOverrides: {
-      label?: string;
-      clear?: string;
+      label?: string | undefined;
+      clear?: string | undefined;
   };
   /** Specifies the component's input placeholder text. */
   accessor placeholder: string | undefined;

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

@@ -1,12 +1,9 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { FlowItem } from "../calcite-flow-item/customElement.js";
-import type { FlowItemLikeElement } from "./interfaces.js";
+import type { FlowItemLikeElement } from "./types.js";
 
-/**
- * @cssproperty [--calcite-flow-background-color] - Specifies the component's background color.
- * @slot  - A slot for adding `calcite-flow-item`s to the component.
- */
+/** @slot  - A slot for adding `calcite-flow-item`s to the component. */
 export abstract class Flow extends LitElement {
   /**
    * Removes selection of the currently active `calcite-flow-item`.

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

@@ -3,19 +3,26 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
+import { x as whenAnimationDone, a as getSlotAssignedElements } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
-import { w as whenAnimationDone } from "../../chunks/dom.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 const CSS = {
   frame: "frame",
   frameAdvancing: "frame--advancing",
   frameRetreating: "frame--retreating"
 };
+const SELECTORS = {
+  item: "calcite-flow-item"
+};
 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{position:relative;display:flex;inline-size:100%;flex:1 1 auto;align-items:stretch;overflow:hidden;background-color:transparent}:host .frame{position:relative;margin:0;display:flex;inline-size:100%;flex:1 1 auto;flex-direction:column;align-items:stretch;padding:0;animation-name:none;animation-duration:var(--calcite-animation-timing);background-color:var(--calcite-flow-background-color)}:host ::slotted(*){display:none;block-size:100%}:host ::slotted(*[selected]){display:flex}:host .frame--advancing{animation-name:calcite-frame-advance}:host .frame--retreating{animation-name:calcite-frame-retreat}@keyframes calcite-frame-advance{0%{--tw-bg-opacity: .5;transform:translate3d(50px,0,0)}to{--tw-bg-opacity: 1;transform:translateZ(0)}}@keyframes calcite-frame-retreat{0%{--tw-bg-opacity: .5;transform:translate3d(-50px,0,0)}to{--tw-bg-opacity: 1;transform:translateZ(0)}}:host([hidden]){display:none}[hidden]{display:none}`;
+function getFlowItemSelectors(customItemSelectors) {
+  return customItemSelectors ? `${SELECTORS.item},${customItemSelectors}` : SELECTORS.item;
+}
 class Flow extends LitElement {
   constructor() {
     super();
     this.frameRef = createRef();
+    this.defaultSlotRef = createRef();
     this.itemMutationObserver = createObserver("mutation", () => this.updateItemsAndProps());
     this.items = [];
     this.selectedIndex = -1;
@@ -96,9 +103,9 @@ class Flow extends LitElement {
     return newSelectedIndex < oldSelectedIndex ? "retreating" : "advancing";
   }
   updateItemsAndProps() {
-    const { customItemSelectors, el } = this;
-    const newItems = Array.from(el.querySelectorAll(`calcite-flow-item${customItemSelectors ? `,${customItemSelectors}` : ""}`)).filter((flowItem) => flowItem.closest("calcite-flow") === el);
-    this.items = newItems;
+    const itemSelectors = getFlowItemSelectors(this.customItemSelectors);
+    const slottedItems = this.defaultSlotRef.value ? getSlotAssignedElements(this.defaultSlotRef.value, itemSelectors) : [];
+    this.items = slottedItems;
     this.ensureSelectedFlowItemExists();
     this.updateFlowProps();
   }
@@ -142,7 +149,7 @@ class Flow extends LitElement {
       [CSS.frameAdvancing]: flowDirection === "advancing",
       [CSS.frameRetreating]: flowDirection === "retreating"
     };
-    return html`<div class=${safeClassMap(frameDirectionClasses)} ${ref(this.frameRef)}><slot></slot></div>`;
+    return html`<div class=${safeClassMap(frameDirectionClasses)} ${ref(this.frameRef)}><slot @slotchange=${this.updateItemsAndProps} ${ref(this.defaultSlotRef)}></slot></div>`;
   }
 }
 customElement("calcite-flow", Flow);

package/dist/components/calcite-flow/types/index.d.ts

@@ -1,2 +1,2 @@
-export { type FlowItemLike } from "../interfaces";
+export { type FlowItemLike } from "../types.js";