@esri/calcite-components 5.0.0-next.85 → 5.0.0-next.87

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

@@ -1,6 +1,6 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.85 */
+v5.0.0-next.87 */
 import { D as DEBOUNCE, c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { live } from "lit/directives/live.js";
@@ -27,7 +27,7 @@ import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useCancelable } from "../../chunks/useCancelable.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { u as useTopLayer } from "../../chunks/useTopLayer.js";
-import { I as IDS, C as CSS$1, a as ComboboxItemSelector, b as ComboboxItemGroupSelector, c as ICONS } from "../../chunks/resources4.js";
+import { I as IDS, C as CSS$1, a as ComboboxItemSelector, b as ComboboxItemGroupSelector, c as ICONS } from "../../chunks/resources5.js";
 import { h as hasActiveChildren, i as isSingleLike, g as getLabel, a as getItemAncestors, b as getItemChildren } from "../../chunks/utils2.js";
 const CSS = {
   button: "x-button",
@@ -98,7 +98,6 @@ class Combobox extends LitElement {
     this.groupItems = [];
     this.guid = guid();
     this.ignoreSelectedEventsFlag = false;
-    this.inputHeight = 0;
     this.internalValueChangeFlag = false;
     this.mutationObserver = createObserver("mutation", () => this.updateItems());
     this.onLabelClick = () => {
@@ -288,13 +287,6 @@ class Combobox extends LitElement {
       this.flipPlacementsHandler();
     }
   }
-  updated() {
-    if (this.el.offsetHeight !== this.inputHeight) {
-      this.reposition(true);
-      this.inputHeight = this.el.offsetHeight;
-    }
-    this.refreshSelectionDisplay();
-  }
   loaded() {
     afterConnectDefaultValueSet(this, this.getValue());
     connectFloatingUI(this);
@@ -321,7 +313,6 @@ class Combobox extends LitElement {
       return;
     }
     toggleOpenClose(this);
-    this.setMaxScrollerHeight();
   }
   handleDisabledChange(value) {
     if (!value) {
@@ -563,12 +554,12 @@ class Combobox extends LitElement {
     }
   }
   onBeforeOpen() {
-    this.scrollToActiveOrSelectedItem();
-    this.calciteComboboxBeforeOpen.emit();
     this.topLayer.show();
+    this.reposition();
+    this.calciteComboboxBeforeOpen.emit();
+    setTimeout(() => this.scrollToActiveOrSelectedItem(true), 0);
   }
   onOpen() {
-    this.scrollToActiveOrSelectedItem(true);
     this.calciteComboboxOpen.emit();
   }
   onBeforeClose() {
@@ -584,11 +575,9 @@ class Combobox extends LitElement {
     if (!listContainerEl || !open) {
       return;
     }
-    await this.reposition(true);
     const maxScrollerHeight = this.getMaxScrollerHeight();
     listContainerEl.style.maxBlockSize = maxScrollerHeight > 0 ? `${maxScrollerHeight}px` : "";
     listContainerEl.style.inlineSize = `${referenceEl.clientWidth}px`;
-    await this.reposition(true);
   }
   calciteChipCloseHandler(comboboxItem) {
     this.open = false;

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

@@ -7,10 +7,10 @@ import type { IconName } from "../calcite-icon/interfaces.js";
  * @cssproperty [--calcite-combobox-item-border-color] - [Deprecated] Specifies the component's border color.
  * @cssproperty [--calcite-combobox-text-color] - Specifies the component's text and `icon` color.
  * @cssproperty [--calcite-combobox-text-color-hover] - Specifies the component's text and `icon` color when hovered.
- * @cssproperty [--calcite-combobox-item-background-color-active] - Specifies the component's background color when active.
+ * @cssproperty [--calcite-combobox-item-background-color-active] - When `active`, specifies the component's background color.
  * @cssproperty [--calcite-combobox-item-background-color-hover] - Specifies the component's background color when hovered.
  * @cssproperty [--calcite-combobox-item-shadow] - Specifies the component's shadow.
- * @cssproperty [--calcite-combobox-selected-icon-color] - Specifies the component's selected indicator icon color.
+ * @cssproperty [--calcite-combobox-selected-icon-color] - Specifies the component's `selected` indicator icon color.
  * @cssproperty [--calcite-combobox-description-text-color] - Specifies the component's `description` and `shortHeading` text color.
  * @cssproperty [--calcite-combobox-description-text-color-press] - Specifies the component's `description` and `shortHeading` text color when hovered.
  * @cssproperty [--calcite-combobox-heading-text-color] - Specifies the component's `heading` text color.
@@ -25,12 +25,12 @@ export abstract class ComboboxItem extends LitElement {
    * @default false
    */
   accessor active: boolean;
-  /** Specifies the parent and grandparent items, which are set on `calcite-combobox`. */
+  /** Specifies the parent and grandparent `calcite-combobox-item`s, which are set on `calcite-combobox`. */
   accessor ancestors: ComboboxChildElement[];
   /** Specifies a description for the component. Displays below the heading. */
   accessor description: string;
   /**
-   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   * When `true`, prevents interaction and decreases the component's opacity.
    *
    * @default false
    */
@@ -52,14 +52,14 @@ export abstract class ComboboxItem extends LitElement {
   /** Specifies an icon to display. */
   accessor icon: IconName;
   /**
-   * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
+   * When `true` and the element direction is right-to-left (`"rtl"`), flips the component`s `icon`.
    *
    * @default false
    */
   accessor iconFlipRtl: boolean;
   /** Specifies an accessible label for the component. */
   accessor label: any;
-  /** Provides additional metadata to the component used in filtering. */
+  /** Specifies additional metadata to the component for use in filtering. */
   accessor metadata: Record<string, unknown>;
   /**
    * When `true`, the component is selected.
@@ -68,7 +68,7 @@ export abstract class ComboboxItem extends LitElement {
    */
   accessor selected: boolean;
   /**
-   * The component's short heading.
+   * Specifies the component's short heading.
    *
    * When provided, the short heading will be displayed in the component's selection.
    *

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

@@ -1,6 +1,6 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.85 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, html, nothing } from "lit";

package/dist/components/calcite-combobox-item-group/customElement.d.ts

@@ -3,8 +3,8 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { ComboboxChildElement } from "../calcite-combobox/interfaces.js";
 
 /**
- * @cssproperty [--calcite-combobox-item-group-text-color] - Specifies the text color of the component.
- * @cssproperty [--calcite-combobox-item-group-border-color] - Specifies the border color of the component.
+ * @cssproperty [--calcite-combobox-item-group-text-color] - Specifies the component's text color.
+ * @cssproperty [--calcite-combobox-item-group-border-color] - Specifies the component's border color.
  * @slot  - A slot for adding `calcite-combobox-item`s.
  */
 export abstract class ComboboxItemGroup extends LitElement {
@@ -17,7 +17,7 @@ export abstract class ComboboxItemGroup extends LitElement {
    */
   accessor label: string;
   /**
-   * Specifies the position of the group in the combobox menu.
+   * Specifies the group's position in the `calcite-combobox` menu.
    *
    * @default 0
    * @internal

package/dist/components/calcite-combobox-item-group/customElement.js

@@ -1,6 +1,6 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.85 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, safeClassMap, safeStyleMap, nothing } from "@arcgis/lumina";

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

@@ -1,6 +1,6 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.85 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, isServer, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";

package/dist/components/calcite-date-picker-day/customElement.js

@@ -1,6 +1,6 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.85 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, setAttribute, safeClassMap } from "@arcgis/lumina";

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

@@ -1,6 +1,6 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.85 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { ref } from "lit/directives/ref.js";
 import { keyed } from "lit/directives/keyed.js";

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

@@ -1,6 +1,6 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.85 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { live } from "lit/directives/live.js";
 import { h as calciteSpacingXxs, i as calciteSpacingBase, j as calciteSpacingSm } from "../../chunks/global.js";

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

@@ -222,6 +222,18 @@ export abstract class Dialog extends LitElement {
    * @param extraContainers - Additional elements to include in the focus trap. This is useful for including elements that may have related parts rendered outside the main focus trapping element.
    */
   updateFocusTrapElements(extraContainers?: FocusTrapOptions["extraContainers"]): Promise<void>;
+  /**
+   * Updates the dialog's inline and/or block size via method call.
+   *
+   * Use this method to programmatically override the dialog's width (inline) and/or height (block).
+   * Pass `null` to clear the override and revert to the default or CSS variable size.
+   *
+   * @param size
+   */
+  updateSize(size: {
+      inline?: number | null;
+      block?: number | null;
+  }): Promise<void>;
   /** Fires when the component is requested to be closed and before the closing transition begins. */
   readonly calciteDialogBeforeClose: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */

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

@@ -1,9 +1,9 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.85 */
+v5.0.0-next.87 */
 import { b as resizeShiftStep, c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
-import { i as interact } from "../../chunks/interact.min.js";
+import { u as useSizeOverride, i as interact } from "../../chunks/useSizeOverride.js";
 import { css, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
@@ -11,7 +11,7 @@ import { a 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";
-import { S as SLOTS$1 } from "../../chunks/resources5.js";
+import { S as SLOTS$1 } from "../../chunks/resources6.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useFocusTrap } from "../../chunks/useFocusTrap.js";
 import { u as usePreventDocumentScroll } from "../../chunks/usePreventDocumentScroll.js";
@@ -71,8 +71,17 @@ class Dialog extends LitElement {
     this.panelRef = createRef();
     this.popoverRef = createRef();
     this.resizePosition = { ...initialResizePosition };
+    this.transitionEl = null;
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
+    this.sizeOverride = useSizeOverride({
+      targetElement: () => ({ value: this.transitionEl }),
+      getBounds: () => ({
+        inline: { min: this.resizeValues.minInlineSize, max: this.resizeValues.maxInlineSize },
+        block: { min: this.resizeValues.minBlockSize, max: this.resizeValues.maxBlockSize }
+      }),
+      fullscreenDisabled: () => this.fullscreenDisabled
+    });
     this.topLayer = useTopLayer({
       disabledOverride: () => this.embedded,
       target: this.popoverRef
@@ -82,6 +91,14 @@ class Dialog extends LitElement {
     this.hasContentTop = false;
     this.hasFooter = true;
     this.opened = false;
+    this.resizeValues = {
+      inlineSize: null,
+      blockSize: null,
+      minInlineSize: null,
+      minBlockSize: null,
+      maxInlineSize: null,
+      maxBlockSize: null
+    };
     this.closeDisabled = false;
     this.dragEnabled = false;
     this.embedded = false;
@@ -106,7 +123,7 @@ class Dialog extends LitElement {
     this.calciteDialogScroll = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { assistiveText: [16, {}, { state: true }], hasContentBottom: [16, {}, { state: true }], hasContentTop: [16, {}, { state: true }], hasFooter: [16, {}, { state: true }], opened: [16, {}, { state: true }], beforeClose: [0, {}, { attribute: false }], closeDisabled: [7, {}, { reflect: true, type: Boolean }], description: 1, dragEnabled: [7, {}, { reflect: true, type: Boolean }], embedded: [7, {}, { reflect: true, type: Boolean }], escapeDisabled: [7, {}, { reflect: true, type: Boolean }], focusTrapOptions: [0, {}, { attribute: false }], fullscreenDisabled: [7, {}, { reflect: true, type: Boolean }], heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], kind: [3, {}, { reflect: true }], icon: [3, { type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], loading: [7, {}, { reflect: true, type: Boolean }], menuOpen: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], modal: [7, {}, { reflect: true, type: Boolean }], focusTrapDisabled: [7, {}, { reflect: true, type: Boolean }], open: [7, {}, { reflect: true, type: Boolean }], outsideCloseDisabled: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placement: [3, {}, { reflect: true }], resizable: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], widthScale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }] };
+    this.properties = { assistiveText: [16, {}, { state: true }], hasContentBottom: [16, {}, { state: true }], hasContentTop: [16, {}, { state: true }], hasFooter: [16, {}, { state: true }], opened: [16, {}, { state: true }], resizeValues: [16, {}, { state: true }], beforeClose: [0, {}, { attribute: false }], closeDisabled: [7, {}, { reflect: true, type: Boolean }], description: 1, dragEnabled: [7, {}, { reflect: true, type: Boolean }], embedded: [7, {}, { reflect: true, type: Boolean }], escapeDisabled: [7, {}, { reflect: true, type: Boolean }], focusTrapOptions: [0, {}, { attribute: false }], fullscreenDisabled: [7, {}, { reflect: true, type: Boolean }], heading: 1, headingLevel: [11, {}, { type: Number, reflect: true }], kind: [3, {}, { reflect: true }], icon: [3, { type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], loading: [7, {}, { reflect: true, type: Boolean }], menuOpen: [7, {}, { reflect: true, type: Boolean }], messageOverrides: [0, {}, { attribute: false }], modal: [7, {}, { reflect: true, type: Boolean }], focusTrapDisabled: [7, {}, { reflect: true, type: Boolean }], open: [7, {}, { reflect: true, type: Boolean }], outsideCloseDisabled: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placement: [3, {}, { reflect: true }], resizable: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], widthScale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
@@ -133,6 +150,9 @@ class Dialog extends LitElement {
     this.focusTrap.setExtraContainers(extraContainers);
     this.focusTrap.updateContainerElements();
   }
+  async updateSize(size) {
+    this.updateSizeInternal(size);
+  }
   connectedCallback() {
     super.connectedCallback();
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
@@ -215,7 +235,7 @@ class Dialog extends LitElement {
       name: "resize"
     });
   }
-  getTransitionElDOMRect() {
+  getTransitionRefDOMRect() {
     return this.transitionEl.getBoundingClientRect();
   }
   handleKeyDown(event) {
@@ -230,13 +250,12 @@ class Dialog extends LitElement {
         if (shiftKey && resizable && transitionEl) {
           const { minBlockSize } = window.getComputedStyle(transitionEl);
           const minHeight = getStylePixelValue(minBlockSize);
-          const height = this.getTransitionElDOMRect().height;
+          const height = this.getTransitionRefDOMRect().height;
           if (height <= minHeight) {
             return;
           }
-          this.updateSize({
-            size: height - resizeShiftStep,
-            type: "blockSize"
+          this.updateSizeInternal({
+            block: height - resizeShiftStep
           });
           resizePosition.bottom -= resizeShiftStep;
           this.updateTransform();
@@ -251,9 +270,8 @@ class Dialog extends LitElement {
         break;
       case "ArrowDown":
         if (shiftKey && resizable && transitionEl) {
-          this.updateSize({
-            size: this.getTransitionElDOMRect().height + resizeShiftStep,
-            type: "blockSize"
+          this.updateSizeInternal({
+            block: this.getTransitionRefDOMRect().height + resizeShiftStep
           });
           resizePosition.bottom += resizeShiftStep;
           this.updateTransform();
@@ -270,13 +288,12 @@ class Dialog extends LitElement {
         if (shiftKey && resizable && transitionEl) {
           const { minInlineSize } = window.getComputedStyle(transitionEl);
           const minWidth = getStylePixelValue(minInlineSize);
-          const width = this.getTransitionElDOMRect().width;
+          const width = this.getTransitionRefDOMRect().width;
           if (width <= minWidth) {
             return;
           }
-          this.updateSize({
-            size: width - resizeShiftStep,
-            type: "inlineSize"
+          this.updateSizeInternal({
+            inline: width - resizeShiftStep
           });
           resizePosition.right -= resizeShiftStep;
           this.updateTransform();
@@ -291,9 +308,8 @@ class Dialog extends LitElement {
         break;
       case "ArrowRight":
         if (shiftKey && resizable && transitionEl) {
-          this.updateSize({
-            size: this.getTransitionElDOMRect().width + resizeShiftStep,
-            type: "inlineSize"
+          this.updateSizeInternal({
+            inline: this.getTransitionRefDOMRect().width + resizeShiftStep
           });
           resizePosition.right += resizeShiftStep;
           this.updateTransform();
@@ -320,19 +336,14 @@ class Dialog extends LitElement {
     const { top, right, bottom, left } = this.getAdjustedResizePosition(resizePosition);
     const translateX = Math.round(x + left + right);
     const translateY = Math.round(y + top + bottom);
-    transitionEl.style.transform = translateX || translateY ? `translate(${translateX}px, ${translateY}px)` : null;
-  }
-  updateSize({ type, size }) {
-    const { transitionEl } = this;
-    if (!transitionEl) {
-      return;
-    }
-    transitionEl.style[type] = size !== null ? `${Math.round(size)}px` : null;
+    this.transitionEl.style.transform = translateX || translateY ? `translate(${translateX}px, ${translateY}px)` : null;
   }
   cleanupInteractions() {
     this.interaction?.unset();
-    this.updateSize({ size: null, type: "inlineSize" });
-    this.updateSize({ size: null, type: "blockSize" });
+    this.updateSizeInternal({
+      inline: null,
+      block: null
+    });
     this.dragPosition = { ...initialDragPosition };
     this.resizePosition = { ...initialResizePosition };
     this.updateTransform();
@@ -348,7 +359,7 @@ class Dialog extends LitElement {
     }
     if (resizable) {
       await this.el.componentOnReady();
-      const { minInlineSize, minBlockSize, maxInlineSize, maxBlockSize } = window.getComputedStyle(transitionEl);
+      const { minInlineSize, minBlockSize, maxInlineSize, maxBlockSize } = window.getComputedStyle(this.transitionEl);
       this.interaction.resizable({
         edges: {
           top: true,
@@ -379,8 +390,10 @@ class Dialog extends LitElement {
               resizePosition.bottom += deltaRect.bottom;
               resizePosition.left += deltaRect.left;
             }
-            this.updateSize({ size: rect.width, type: "inlineSize" });
-            this.updateSize({ size: rect.height, type: "blockSize" });
+            this.updateSizeInternal({
+              inline: rect.width,
+              block: rect.height
+            });
             this.updateTransform();
           }
         }
@@ -468,6 +481,22 @@ class Dialog extends LitElement {
   handleMutationObserver() {
     this.focusTrap.updateContainerElements();
   }
+  updateSizeInternal(size) {
+    const dialogElement = this.transitionEl;
+    if (!dialogElement) {
+      return;
+    }
+    const appliedSize = this.sizeOverride.resize(size);
+    this.resizeValues = {
+      ...this.resizeValues,
+      ...appliedSize.inline !== void 0 && {
+        inlineSize: appliedSize.inline
+      },
+      ...appliedSize.block !== void 0 && {
+        blockSize: appliedSize.block
+      }
+    };
+  }
   render() {
     const { assistiveText, description, heading, opened, icon, iconFlipRtl } = this;
     return html`<div .ariaDescription=${description} .ariaLabel=${heading} .ariaModal=${this.modal} class=${safeClassMap({

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

@@ -1,6 +1,6 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.85 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { ref } from "lit/directives/ref.js";
 import { css, nothing, html } from "lit";

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

@@ -1,11 +1,11 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.85 */
+v5.0.0-next.87 */
 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/resources6.js";
+import { C as CSS$1 } from "../../chunks/resources7.js";
 const CSS = {
   title: "title",
   firstTitle: "first-title",

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

@@ -1,6 +1,6 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.85 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
@@ -9,7 +9,7 @@ import { t as toAriaBoolean } from "../../chunks/dom.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/resources6.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}`;
 class DropdownItem extends LitElement {
   constructor() {

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

@@ -1,6 +1,6 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.85 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";

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

@@ -1,6 +1,6 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.85 */
+v5.0.0-next.87 */
 import { D as DEBOUNCE, c as customElement } from "../../chunks/runtime.js";
 import { debounce } from "es-toolkit";
 import { css, html } from "lit";

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

@@ -1,6 +1,6 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.85 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";

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

@@ -1,13 +1,13 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.85 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, nothing, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { g as getElementDir } from "../../chunks/dom.js";
-import { S as SLOTS$1 } from "../../chunks/resources5.js";
+import { S as SLOTS$1 } from "../../chunks/resources6.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";

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

@@ -1,6 +1,6 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.85 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html, svg } from "lit";
 import { LitElement, safeClassMap, nothing } from "@arcgis/lumina";

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

@@ -1,6 +1,6 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.85 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, nothing, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";

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

@@ -9,19 +9,19 @@ import type { IconName } from "./interfaces.js";
  */
 export abstract class Icon extends LitElement {
   /**
-   * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
+   * When `true` and the element direction is right-to-left (`"rtl"`), flips the component's `icon`.
    *
    * @default false
    */
   accessor flipRtl: boolean;
   /**
-   * Displays a specific icon.
+   * Specifies an icon to display.
    *
    * @see [Calcite UI Icons](https://developers.arcgis.com/calcite-design-system/icons).
    */
   accessor icon: IconName;
   /**
-   * When `true`, it preloads the icon data.
+   * When `true`, preloads the `icon` data.
    *
    * @default false
    */
@@ -33,7 +33,7 @@ export abstract class Icon extends LitElement {
    */
   accessor scale: Scale;
   /**
-   * Accessible name for the component.
+   * Specifies the component's accessible name.
    *
    * It is recommended to set this value if your icon is semantic.
    */

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

@@ -1,6 +1,6 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.85 */
+v5.0.0-next.87 */
 import { g as getAssetPath, c as customElement } from "../../chunks/runtime.js";
 import { css, isServer, nothing, svg, html } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";

package/dist/components/calcite-inline-editable/customElement.d.ts

@@ -5,29 +5,29 @@ import type { Scale } from "../interfaces.js";
 /**
  * @cssproperty [--calcite-inline-editable-background-color-hover] - Specifies the component's background color when hovered.
  * @cssproperty [--calcite-inline-editable-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-inline-editable-button-background-color] - Specifies the button element's background color when appearance="solid" or appearance="outline-fill".
- * @cssproperty [--calcite-inline-editable-button-corner-radius] - Specifies the button element's corner radius.
- * @cssproperty [--calcite-inline-editable-button-loader-color] - Specifies the button element's loader color.
- * @cssproperty [--calcite-inline-editable-button-text-color] - Specifies the button element's text color.
+ * @cssproperty [--calcite-inline-editable-button-background-color] - When `appearance="solid"` or `appearance="outline-fill"`, specifies the background color of the component's button element.
+ * @cssproperty [--calcite-inline-editable-button-corner-radius] - Specifies the corner radius of the component's button element.
+ * @cssproperty [--calcite-inline-editable-button-loader-color] - Specifies the loader color of the components's button element.
+ * @cssproperty [--calcite-inline-editable-button-text-color] - Specifies the text color of the component's button element.
  * @slot  - A slot for adding a `calcite-input`.
  */
 export abstract class InlineEditable extends LitElement {
   /** Specifies a callback to be executed prior to disabling editing via the controls. When provided, the component's loading state will be handled automatically. */
   accessor afterConfirm: () => Promise<void>;
   /**
-   * When `true` and `editingEnabled` is `true`, displays save and cancel controls on the component.
+   * When `true` and `editingEnabled` is `true`, displays save and cancel controls.
    *
    * @default false
    */
   accessor controls: boolean;
   /**
-   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   * When `true`, prevents interaction and decreases the component's opacity.
    *
    * @default false
    */
   accessor disabled: boolean;
   /**
-   * When `true`, inline editing is enabled on the component.
+   * When `true`, inline editing is enabled.
    *
    * @default false
    */
@@ -57,9 +57,9 @@ export abstract class InlineEditable extends LitElement {
    * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
    */
   setFocus(options?: FocusOptions): Promise<void>;
-  /** Emits when the component's "cancel editing" button is pressed. */
+  /** Fires when the component's "cancel editing" button is pressed. */
   readonly calciteInlineEditableEditCancel: import("@arcgis/lumina").TargetedEvent<this, void>;
-  /** Emits when the component's "confirm edits" button is pressed. */
+  /** Fires when the component's "confirm edits" button is pressed. */
   readonly calciteInlineEditableEditConfirm: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly "@eventTypes": {
     calciteInlineEditableEditCancel: InlineEditable["calciteInlineEditableEditCancel"]["detail"];