@esri/calcite-components 3.1.0-next.9 → 3.1.0

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

@@ -1,42 +1,42 @@
-import { c as w } from "../../chunks/runtime.js";
+import { c as b } from "../../chunks/runtime.js";
 import { ref as r } from "lit-html/directives/ref.js";
-import { html as g } from "lit";
-import { LitElement as b, createEvent as o, safeClassMap as l } from "@arcgis/lumina";
-import { h as v, d as a, b as c } from "../../chunks/dom.js";
-import { b as d, r as D, c as n, a as E, f as I, h as y, F as p } from "../../chunks/floating-ui.js";
-import { g as O } from "../../chunks/guid.js";
-import { u as C, I as x } from "../../chunks/interactive.js";
-import { i as k } from "../../chunks/key.js";
-import { c as S } from "../../chunks/component.js";
+import { html as v } from "lit";
+import { LitElement as D, createEvent as o, safeClassMap as l } from "@arcgis/lumina";
+import { h as E, d as a, b as c } from "../../chunks/dom.js";
+import { b as d, r as I, c as n, a as y, f as O, h as C, F as p } from "../../chunks/floating-ui.js";
+import { g as k } from "../../chunks/guid.js";
+import { u as x, I as S } from "../../chunks/interactive.js";
+import { i as P } from "../../chunks/key.js";
+import { c as $ } from "../../chunks/component.js";
 import { c as h } from "../../chunks/observers.js";
-import { o as P } from "../../chunks/openCloseComponent.js";
-import { g as $ } from "../../chunks/dynamicClasses.js";
-import { css as F } from "@lit/reactive-element/css-tag.js";
+import { o as F } from "../../chunks/openCloseComponent.js";
+import { g as H } from "../../chunks/dynamicClasses.js";
+import { css as z } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.9 */
-const H = {
+v3.1.0 */
+const T = {
   dropdownTrigger: "trigger"
 }, m = {
   content: "calcite-dropdown-content",
   wrapper: "calcite-dropdown-wrapper"
-}, T = F`: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}.calcite-dropdown-wrapper{--calcite-floating-ui-z-index: var(--calcite-z-index-dropdown);inline-size:max-content;display:none;inset-block-start:0;left:0;z-index:var(--calcite-floating-ui-z-index)}.calcite-dropdown-wrapper .calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:inset,left,opacity;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.calcite-dropdown-wrapper[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.calcite-dropdown-wrapper[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.calcite-dropdown-wrapper[data-placement^=left] .calcite-floating-ui-anim{left:5px}.calcite-dropdown-wrapper[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.calcite-dropdown-wrapper[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}.calcite-dropdown-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))}.calcite-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]) .calcite-dropdown-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}`;
-class z extends b {
+}, A = z`: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}.calcite-dropdown-wrapper{--calcite-floating-ui-z-index: var(--calcite-z-index-dropdown);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)}.calcite-dropdown-wrapper .calcite-floating-ui-anim{position:relative;transition:var(--calcite-floating-ui-transition);transition-property:inset,left,opacity;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.calcite-dropdown-wrapper[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.calcite-dropdown-wrapper[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.calcite-dropdown-wrapper[data-placement^=left] .calcite-floating-ui-anim{left:5px}.calcite-dropdown-wrapper[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.calcite-dropdown-wrapper[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}.calcite-dropdown-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))}.calcite-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]) .calcite-dropdown-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}`;
+class U extends D {
   // #endregion
   // #region Lifecycle
   constructor() {
-    super(), this.focusLastDropdownItem = !1, this.groups = [], this.guid = `calcite-dropdown-${O()}`, this.items = [], this.mutationObserver = h("mutation", () => this.updateItems()), this.onOpenEnd = () => {
+    super(), this.focusLastDropdownItem = !1, this.groups = [], this.guid = `calcite-dropdown-${k()}`, this.items = [], this.mutationObserver = h("mutation", () => this.updateItems()), this.onOpenEnd = () => {
       this.focusOnFirstActiveOrDefaultItem(), this.el.removeEventListener("calciteDropdownOpen", this.onOpenEnd);
-    }, this.transitionProp = "opacity", this.resizeObserver = h("resize", (e) => this.resizeObserverCallback(e)), this.closeOnSelectDisabled = !1, this.disabled = !1, this.maxItems = 0, this.open = !1, this.overlayPositioning = "absolute", this.placement = d, this.scale = "m", this.selectedItems = [], this.type = "click", this.calciteDropdownBeforeClose = o({ cancelable: !1 }), this.calciteDropdownBeforeOpen = o({ cancelable: !1 }), this.calciteDropdownClose = o({ cancelable: !1 }), this.calciteDropdownOpen = o({ cancelable: !1 }), this.calciteDropdownSelect = o({ cancelable: !1 }), 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);
+    }, this.transitionProp = "opacity", this.resizeObserver = h("resize", (e) => this.resizeObserverCallback(e)), this.closeOnSelectDisabled = !1, this.disabled = !1, this.maxItems = 0, this.offsetDistance = 0, this.offsetSkidding = 0, this.open = !1, this.overlayPositioning = "absolute", this.placement = d, this.scale = "m", this.selectedItems = [], this.type = "click", this.calciteDropdownBeforeClose = o({ cancelable: !1 }), this.calciteDropdownBeforeOpen = o({ cancelable: !1 }), this.calciteDropdownClose = o({ cancelable: !1 }), this.calciteDropdownOpen = o({ cancelable: !1 }), this.calciteDropdownSelect = o({ cancelable: !1 }), 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, disabled: 7, flipPlacements: 0, maxItems: 11, open: 7, overlayPositioning: 3, placement: 3, scale: 3, selectedItems: 0, type: 3, widthScale: 3, width: 3 };
+    this.properties = { closeOnSelectDisabled: 7, disabled: 7, flipPlacements: 0, maxItems: 11, offsetDistance: 11, offsetSkidding: 11, open: 7, overlayPositioning: 3, placement: 3, scale: 3, selectedItems: 0, type: 3, widthScale: 3, width: 3 };
   }
   static {
     this.shadowRootOptions = { mode: "open", delegatesFocus: !0 };
   }
   static {
-    this.styles = T;
+    this.styles = A;
   }
   // #endregion
   // #region Public Methods
@@ -46,39 +46,41 @@ class z extends b {
    * @param delayed
    */
   async reposition(e = !1) {
-    const { floatingEl: t, referenceEl: i, placement: s, overlayPositioning: u, filteredFlipPlacements: f } = this;
-    return D(this, {
-      floatingEl: t,
-      referenceEl: i,
+    const { filteredFlipPlacements: t, floatingEl: i, offsetDistance: s, offsetSkidding: f, overlayPositioning: u, placement: w, referenceEl: g } = this;
+    return I(this, {
+      floatingEl: i,
+      referenceEl: g,
+      offsetDistance: s,
+      offsetSkidding: f,
       overlayPositioning: u,
-      placement: s,
-      flipPlacements: f,
+      placement: w,
+      flipPlacements: t,
       type: "menu"
     }, e);
   }
   /** Sets focus on the component's first focusable element. */
   async setFocus() {
-    await S(this), v(this.referenceEl);
+    await $(this), E(this.referenceEl);
   }
   connectedCallback() {
     super.connectedCallback(), this.mutationObserver?.observe(this.el, { childList: !0, subtree: !0 }), this.setFilteredPlacements(), this.updateItems(), n(this);
   }
   willUpdate(e) {
-    e.has("open") && (this.hasUpdated || this.open !== !1) && this.openHandler(), e.has("disabled") && (this.hasUpdated || this.disabled !== !1) && this.handleDisabledChange(this.disabled), e.has("flipPlacements") && this.flipPlacementsHandler(), e.has("maxItems") && this.hasUpdated && this.setMaxScrollerHeight(), (e.has("overlayPositioning") && (this.hasUpdated || this.overlayPositioning !== "absolute") || e.has("placement") && (this.hasUpdated || this.placement !== d)) && this.reposition(!0), e.has("scale") && (this.hasUpdated || this.scale !== "m") && this.handlePropsChange();
+    e.has("open") && (this.hasUpdated || this.open !== !1) && this.openHandler(), e.has("disabled") && (this.hasUpdated || this.disabled !== !1) && this.handleDisabledChange(this.disabled), e.has("flipPlacements") && this.flipPlacementsHandler(), e.has("maxItems") && this.hasUpdated && this.setMaxScrollerHeight(), this.hasUpdated && (e.has("offsetDistance") && this.offsetDistance !== 0 || e.has("offsetSkidding") && this.offsetSkidding !== 0 || e.has("overlayPositioning") && this.overlayPositioning !== "absolute" || e.has("placement") && this.placement !== d) && this.reposition(!0), e.has("scale") && (this.hasUpdated || this.scale !== "m") && this.handlePropsChange();
   }
   updated() {
-    C(this);
+    x(this);
   }
   loaded() {
     this.updateSelectedItems(), n(this);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.mutationObserver?.disconnect(), this.resizeObserver?.disconnect(), E(this);
+    super.disconnectedCallback(), this.mutationObserver?.disconnect(), this.resizeObserver?.disconnect(), y(this);
   }
   // #endregion
   // #region Private Methods
   openHandler() {
-    P(this), !this.disabled && this.reposition(!0);
+    F(this), !this.disabled && this.reposition(!0);
   }
   handleDisabledChange(e) {
     e || (this.open = !1);
@@ -87,7 +89,7 @@ class z extends b {
     this.setFilteredPlacements(), this.reposition(!0);
   }
   handlePropsChange() {
-    this.updateItems(), this.updateGroupScale();
+    this.updateItems(), this.updateGroupProps();
   }
   closeCalciteDropdownOnClick(e) {
     this.disabled || !this.open || e.composedPath().includes(this.el) || this.closeCalciteDropdown(!1);
@@ -133,7 +135,7 @@ class z extends b {
   }
   setFilteredPlacements() {
     const { el: e, flipPlacements: t } = this;
-    this.filteredFlipPlacements = t ? I(t, e) : null;
+    this.filteredFlipPlacements = t ? O(t, e) : null;
   }
   updateTriggers(e) {
     this.triggers = e.target.assignedElements({
@@ -145,10 +147,12 @@ class z extends b {
   }
   updateGroups(e) {
     const t = e.target.assignedElements({ flatten: !0 }).filter((i) => i?.matches("calcite-dropdown-group"));
-    this.groups = t, this.updateItems(), this.updateGroupScale();
+    this.groups = t, this.updateItems(), this.updateGroupProps();
   }
-  updateGroupScale() {
-    this.groups?.forEach((e) => e.scale = this.scale);
+  updateGroupProps() {
+    this.groups.forEach((e, t) => {
+      e.scale = this.scale, e.position = t;
+    });
   }
   resizeObserverCallback(e) {
     e.forEach((t) => {
@@ -165,7 +169,7 @@ class z extends b {
     this.scrollerEl.style.maxBlockSize = e > 0 ? `${e}px` : "", this.reposition(!0);
   }
   setScrollerAndTransitionEl(e) {
-    e && this.resizeObserver?.observe(e), this.scrollerEl = e, this.transitionEl = e;
+    e && (this.resizeObserver?.observe(e), this.scrollerEl = e, this.transitionEl = e);
   }
   onBeforeOpen() {
     this.calciteDropdownBeforeOpen.emit();
@@ -177,7 +181,7 @@ class z extends b {
     this.calciteDropdownBeforeClose.emit();
   }
   onClose() {
-    this.calciteDropdownClose.emit(), y(this);
+    this.calciteDropdownClose.emit(), C(this);
   }
   setReferenceEl(e) {
     this.referenceEl = e, n(this), e && this.resizeObserver?.observe(e);
@@ -198,7 +202,7 @@ class z extends b {
         this.closeCalciteDropdown(), e.preventDefault();
         return;
       }
-      k(i) ? (this.toggleDropdown(), e.preventDefault()) : (i === "ArrowDown" || i === "ArrowUp") && (e.preventDefault(), this.focusLastDropdownItem = i === "ArrowUp", this.open = !0, this.el.addEventListener("calciteDropdownOpen", this.onOpenEnd));
+      P(i) ? (this.toggleDropdown(), e.preventDefault()) : (i === "ArrowDown" || i === "ArrowUp") && (e.preventDefault(), this.focusLastDropdownItem = i === "ArrowUp", this.open = !0, this.el.addEventListener("calciteDropdownOpen", this.onOpenEnd));
     }
   }
   updateSelectedItems() {
@@ -231,9 +235,9 @@ class z extends b {
   // #region Rendering
   render() {
     const { open: e, guid: t } = this;
-    return x({ disabled: this.disabled, children: g`<div class="calcite-trigger-container" .id=${`${t}-menubutton`} @click=${this.toggleDropdown} @keydown=${this.keyDownHandler} ${r(this.setReferenceEl)}><slot aria-controls=${`${t}-menu`} .ariaExpanded=${e} aria-haspopup=menu name=${H.dropdownTrigger} @slotchange=${this.updateTriggers}></slot></div><div .ariaHidden=${!e} class=${l({
+    return S({ disabled: this.disabled, children: v`<div class="calcite-trigger-container" .id=${`${t}-menubutton`} @click=${this.toggleDropdown} @keydown=${this.keyDownHandler} ${r(this.setReferenceEl)}><slot aria-controls=${`${t}-menu`} .ariaExpanded=${e} aria-haspopup=menu name=${T.dropdownTrigger} @slotchange=${this.updateTriggers}></slot></div><div .ariaHidden=${!e} class=${l({
       [m.wrapper]: !0,
-      [$("width", this.width, this.widthScale)]: !!(this.width || this.widthScale)
+      [H("width", this.width, this.widthScale)]: !!(this.width || this.widthScale)
     })} ${r(this.setFloatingEl)}><div aria-labelledby=${`${t}-menubutton`} class=${l({
       [m.content]: !0,
       [p.animation]: !0,
@@ -241,7 +245,7 @@ class z extends b {
     })} .id=${`${t}-menu`} role=menu ${r(this.setScrollerAndTransitionEl)}><slot @slotchange=${this.updateGroups}></slot></div></div>` });
   }
 }
-w("calcite-dropdown", z);
+b("calcite-dropdown", U);
 export {
-  z as Dropdown
+  U as Dropdown
 };

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

@@ -8,6 +8,12 @@ import { RequestedItem } from './interfaces';
 export declare class DropdownGroup extends LitElement {
     /** Specifies and displays a group title. */
     groupTitle: string;
+    /**
+     * The position of the group in the dropdown menu.
+     *
+     * @internal
+     */
+    position: number;
     /**
      * Specifies the selection mode of the component, where:
      *

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

@@ -6,7 +6,7 @@ import { C as n } from "../../chunks/resources6.js";
 import { css as c } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.9 */
+v3.1.0 */
 const r = {
   title: "dropdown-title",
   separator: "dropdown-separator"
@@ -15,10 +15,10 @@ class h extends l {
   // #endregion
   // #region Lifecycle
   constructor() {
-    super(), this.mutationObserver = d("mutation", () => this.updateItems()), this.scale = "m", this.selectionMode = "single", this.calciteInternalDropdownItemChange = a({ cancelable: !1 }), this.listen("calciteInternalDropdownItemSelect", this.updateActiveItemOnChange);
+    super(), this.mutationObserver = d("mutation", () => this.updateItems()), this.position = -1, this.scale = "m", this.selectionMode = "single", this.calciteInternalDropdownItemChange = a({ cancelable: !1 }), this.listen("calciteInternalDropdownItemSelect", this.updateActiveItemOnChange);
   }
   static {
-    this.properties = { groupTitle: 3, scale: 3, selectionMode: 3 };
+    this.properties = { groupTitle: 3, position: 9, scale: 3, selectionMode: 3 };
   }
   static {
     this.shadowRootOptions = { mode: "open", delegatesFocus: !0 };
@@ -29,9 +29,6 @@ class h extends l {
   connectedCallback() {
     super.connectedCallback(), this.updateItems(), this.mutationObserver?.observe(this.el, { childList: !0 });
   }
-  load() {
-    this.groupPosition = this.getGroupPosition();
-  }
   willUpdate(e) {
     e.has("selectionMode") && (this.hasUpdated || this.selectionMode !== "single") && this.updateItems();
   }
@@ -49,13 +46,10 @@ class h extends l {
   updateItems() {
     Array.from(this.el.querySelectorAll("calcite-dropdown-item")).forEach((e) => e.selectionMode = this.selectionMode);
   }
-  getGroupPosition() {
-    return Array.prototype.indexOf.call(this.el.parentElement.querySelectorAll("calcite-dropdown-group"), this.el);
-  }
   // #endregion
   // #region Rendering
   render() {
-    const e = this.groupTitle ? t`<span aria-hidden=true class=${o(r.title)}>${this.groupTitle}</span>` : null, s = this.groupPosition > 0 ? t`<div class=${o(r.separator)} role=separator></div>` : null;
+    const e = this.groupTitle ? t`<span aria-hidden=true class=${o(r.title)}>${this.groupTitle}</span>` : null, s = this.position > 0 ? t`<div class=${o(r.separator)} role=separator></div>` : null;
     return this.el.ariaLabel = this.groupTitle, this.el.role = "group", t`<div class=${o({
       [n.container]: !0
     })}>${s}${e}<slot></slot></div>`;

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

@@ -9,7 +9,7 @@ import { C as o } from "../../chunks/resources6.js";
 import { css as C } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.9 */
+v3.1.0 */
 const q = C`: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-color:transparent}.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-3));text-align:start;outline-color:transparent}.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-3))}.dropdown-item-content{flex:1 1 auto;padding-block:.125rem}.dropdown-item-icon{position:relative;opacity:0;transition-duration:.15s;transition-timing-function:cubic-bezier(.4,0,.2,1);transform:scale(.9)}:host([scale=s]) .container{padding-block:.25rem;padding-inline:.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}:host([scale=s]) .dropdown-item-icon,:host([scale=s]) .dropdown-item-icon--start{padding-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .dropdown-item-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--1);line-height:1rem}:host([scale=m]) .dropdown-item-icon,:host([scale=m]) .dropdown-item-icon--start{padding-inline-end:var(--calcite-spacing-md)}:host([scale=m]) .dropdown-item-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-0);line-height:1.25rem}:host([scale=l]) .dropdown-item-icon,:host([scale=l]) .dropdown-item-icon--start{padding-inline-end:var(--calcite-spacing-lg)}:host([scale=l]) .dropdown-item-icon--end{padding-inline-start:var(--calcite-spacing-lg)}:host(:focus) .container{color:var(--calcite-color-text-1);text-decoration-line:none;outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))));color:var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-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])) .dropdown-link,:host(:active:not([disabled])) .dropdown-link{color:var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1))}:host([selected]) .container:not(.container--none-selection),:host([selected]) .dropdown-link{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-dropdown-item-text-color-press, var(--calcite-color-text-1))}:host([selected]) .container:not(.container--none-selection) calcite-icon,:host([selected]) .dropdown-link calcite-icon{color:var(--calcite-dropdown-item-icon-color-press, var(--calcite-color-brand))}:host(:hover:not([disabled])) .dropdown-item-icon{color:var(--calcite-dropdown-item-icon-color-hover, var(--calcite-color-border-1));opacity:1}:host([selected]) .dropdown-item-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 S extends I {
   // #endregion

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

@@ -8,7 +8,7 @@ import { c as y } from "../../chunks/component.js";
 import { css as $ } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.9 */
+v3.1.0 */
 const E = {
   button: "button"
 }, F = {

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

@@ -1,24 +1,24 @@
-import { D as s, c as l } from "../../chunks/runtime.js";
+import { D as a, c as l } from "../../chunks/runtime.js";
 import { debounce as r } from "lodash-es";
-import { html as n } from "lit";
-import { createRef as o, ref as c } from "lit-html/directives/ref.js";
-import { LitElement as d, createEvent as h, safeClassMap as p } from "@arcgis/lumina";
-import { f as a } from "../../chunks/filter.js";
-import { u, I as m } from "../../chunks/interactive.js";
-import { c as f } from "../../chunks/component.js";
+import { html as o } from "lit";
+import { createRef as n, ref as c } from "lit-html/directives/ref.js";
+import { LitElement as d, createEvent as h, safeClassMap as u } from "@arcgis/lumina";
+import { f as i } from "../../chunks/filter.js";
+import { u as p, I as f } from "../../chunks/interactive.js";
+import { c as m } from "../../chunks/component.js";
 import { u as b } from "../../chunks/useT9n.js";
 import { css as v } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.9 */
+v3.1.0 */
 const g = {
   container: "container"
 }, y = {
   search: "search"
-}, x = v`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;inline-size:100%}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{display:flex;inline-size:100%}:host([scale=s]) .container{padding:var(--calcite-spacing-sm)}:host([scale=m]) .container{padding:var(--calcite-spacing-md)}:host([scale=l]) .container{padding:var(--calcite-spacing-lg)}label{position:relative;margin-block:0px;display:flex;inline-size:100%;align-items:center;overflow:hidden}input[type=text]{margin-block-end:.25rem;inline-size:100%;border-style:none;background-color:transparent;padding-block:.25rem;font-family:inherit;font-size:var(--calcite-font-size--2);line-height:1rem;color:var(--calcite-color-text-1);padding-inline-end:.25rem;padding-inline-start:1.5rem;transition:padding var(--calcite-animation-timing),box-shadow var(--calcite-animation-timing)}input[type=text]::-ms-clear{display:none}calcite-input{inline-size:100%}.search-icon{position:absolute;display:flex;color:var(--calcite-color-text-2);inset-inline-start:0;transition:inset-inline-start var(--calcite-animation-timing),inset-inline-end var(--calcite-animation-timing),opacity var(--calcite-animation-timing)}input[type=text]:focus{border-color:var(--calcite-color-brand);outline:2px solid transparent;outline-offset:2px;padding-inline:.25rem}input[type=text]:focus~.search-icon{inset-inline-start:-1rem;opacity:0}.clear-button{display:flex;cursor:pointer;align-items:center;border-width:0px;background-color:transparent;color:var(--calcite-color-text-2)}.clear-button:hover,.clear-button:focus{color:var(--calcite-color-text-1)}:host([hidden]){display:none}[hidden]{display:none}`;
-class k extends d {
+}, x = v`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;inline-size:100%}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.container{display:flex;inline-size:100%}:host([scale=s]) .container{padding:var(--calcite-spacing-sm)}:host([scale=m]) .container{padding:var(--calcite-spacing-md)}:host([scale=l]) .container{padding:var(--calcite-spacing-lg)}label{position:relative;margin-block:0px;display:flex;inline-size:100%;align-items:center;overflow:hidden}calcite-input{inline-size:100%}:host([hidden]){display:none}[hidden]{display:none}`;
+class D extends d {
   constructor() {
-    super(...arguments), this.filterDebounced = r((e, t = !1, i) => this.updateFiltered(a(this.items ?? [], e, this.filterProps), t, i), s.filter), this.textInput = o(), this._value = "", this.disabled = !1, this.filteredItems = [], this.items = [], this.messages = b(), this.scale = "m", this.calciteFilterChange = h({ cancelable: !1 });
+    super(...arguments), this.filterDebounced = r((e, t = !1, s) => this.updateFiltered(i(this.items ?? [], e, this.filterProps), t, s), a.filter), this.textInput = n(), this._value = "", this.disabled = !1, this.filteredItems = [], this.items = [], this.messages = b(), this.scale = "m", this.calciteFilterChange = h({ cancelable: !1 });
   }
   static {
     this.properties = { disabled: 7, filterProps: 0, filteredItems: 0, items: 0, label: 1, messageOverrides: 0, placeholder: 1, scale: 3, value: 1 };
@@ -49,23 +49,23 @@ class k extends d {
    */
   async filter(e = this.value) {
     return new Promise((t) => {
-      this.value = e, this.updateFiltered(a(this.items ?? [], e, this.filterProps), !1, t);
+      this.value = e, this.updateFiltered(i(this.items ?? [], e, this.filterProps), !1, t);
     });
   }
   /** Sets focus on the component. */
   async setFocus() {
-    return await f(this), this.textInput.value?.setFocus();
+    return await m(this), this.textInput.value?.setFocus();
   }
   // #endregion
   // #region Lifecycle
   async load() {
-    this.updateFiltered(a(this.items ?? [], this.value, this.filterProps));
+    this.updateFiltered(i(this.items ?? [], this.value, this.filterProps));
   }
   willUpdate(e) {
     (e.has("items") && (this.hasUpdated || this.items?.length > 0) || e.has("filterProps")) && this.filterDebounced(this.value);
   }
   updated() {
-    u(this);
+    p(this);
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.filterDebounced.cancel();
@@ -85,17 +85,17 @@ class k extends d {
   clear() {
     this.value = "", this.filterDebounced("", !0), this.setFocus();
   }
-  updateFiltered(e, t = !1, i) {
-    this.filteredItems = e, t && this.calciteFilterChange.emit(), i?.();
+  updateFiltered(e, t = !1, s) {
+    this.filteredItems = e, t && this.calciteFilterChange.emit(), s?.();
   }
   // #endregion
   // #region Rendering
   render() {
     const { disabled: e, scale: t } = this;
-    return m({ disabled: e, children: n`<div class=${p(g.container)}><label><calcite-input clearable .disabled=${e} .icon=${y.search} .label=${this.label ?? this.messages.label} .messageOverrides=${{ clear: this.messages.clear }} @keydown=${this.keyDownHandler} @calciteInputInput=${this.inputHandler} .placeholder=${this.placeholder} .scale=${t} type=text .value=${this.value} ${c(this.textInput)}></calcite-input></label></div>` });
+    return f({ disabled: e, children: o`<div class=${u(g.container)}><label><calcite-input clearable .disabled=${e} .icon=${y.search} .label=${this.label ?? this.messages.label} .messageOverrides=${{ clear: this.messages.clear }} @keydown=${this.keyDownHandler} @calciteInputInput=${this.inputHandler} .placeholder=${this.placeholder} .scale=${t} type=text .value=${this.value} ${c(this.textInput)}></calcite-input></label></div>` });
   }
 }
-l("calcite-filter", k);
+l("calcite-filter", D);
 export {
-  k as Filter
+  D as Filter
 };

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

@@ -1,6 +1,5 @@
 export declare const CSS: {
     container: string;
-    searchIcon: string;
 };
 export declare const ICONS: {
     readonly search: "search";

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

@@ -8,7 +8,7 @@ import { z as u } from "../../chunks/dom.js";
 import { css as p } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.9 */
+v3.1.0 */
 const n = {
   frame: "frame",
   frameAdvancing: "frame--advancing",

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

@@ -0,0 +1 @@
+export type { FlowItemLike } from '../interfaces';

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

@@ -11,7 +11,7 @@ import { u as P } from "../../chunks/useT9n.js";
 import { css as F } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.9 */
+v3.1.0 */
 const T = {
   backButton: "back-button"
 }, f = {

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

@@ -1,12 +1,12 @@
 import { c as S } from "../../chunks/runtime.js";
-import { html as w, svg as m } from "lit-html";
+import { html as w, svg as p } from "lit-html";
 import { LitElement as O, safeClassMap as b, nothing as $ } from "@arcgis/lumina";
 import { g as Y } from "../../chunks/guid.js";
 import { c as Z } from "../../chunks/observers.js";
 import { css as j } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.9 */
+v3.1.0 */
 function G(e, s, a) {
   const i = s[0] - e[0], o = a[0] - s[0], c = s[1] - e[1], h = a[1] - s[1], r = c / (i || o < 0 && 0), n = h / (o || i < 0 && 0), t = (r * o + n * i) / (i + o);
   return (Math.sign(r) + Math.sign(n)) * Math.min(Math.abs(r), Math.abs(n), 0.5 * Math.abs(t)) || 0;
@@ -22,7 +22,7 @@ function C(e, s, a, i, o) {
 function H({ width: e, height: s, min: a, max: i }) {
   const o = i[0] - a[0], c = i[1] - a[1];
   return (h) => {
-    const r = (h[0] - a[0]) / o * e, n = s - h[1] / c * s;
+    const r = (h[0] - a[0]) / o * e, n = s - (h[1] - a[1]) / c * s;
     return [r, n];
   };
 }
@@ -41,8 +41,8 @@ function B({ data: e, min: s, max: a, t: i }) {
     return "";
   const [o, c] = i(e[0]), [h, r] = i(s), [n] = i(a);
   let t, l, g;
-  const d = e.reduce((x, v, p) => {
-    if (l = e[p - 2], g = e[p - 1], p > 1) {
+  const d = e.reduce((x, v, m) => {
+    if (l = e[m - 2], g = e[m - 1], m > 1) {
       const u = G(l, g, v), M = t === void 0 ? z(l, g, u) : t, L = C(l, g, M, u, i);
       return t = u, `${x} ${L}`;
     }
@@ -82,33 +82,33 @@ class I extends O {
     const { min: g, max: d } = A(s);
     let y = g, f = d;
     (h < g[0] || h > g[0]) && (y = [h, 0]), (r > d[0] || r < d[0]) && (f = [r, d[1]]);
-    const x = H({ min: y, max: f, width: l, height: t }), [v] = x([c, f[1]]), [p] = x([o, f[1]]), u = B({ data: s, min: g, max: d, t: x }), M = a ? `url(#linear-gradient-${n})` : void 0;
-    return w`<svg aria-hidden=true class=${b(k.svg)} height=${t ?? $} preserveAspectRatio=none viewBox=${`0 0 ${l} ${t}`} width=${l ?? $}>${a ? m`<defs><linearGradient .id=${`linear-gradient-${n}`} x1=0 x2=1 y1=0 y2=0>${a.map(({ offset: L, color: P, opacity: X }) => m`<stop offset=${`${L * 100}%`} stop-color=${P ?? $} stop-opacity=${X ?? $} />`)}</linearGradient></defs>` : null}${c !== void 0 ? [
-      m`<mask height=100% .id=${`${n}1`} width=100% x=0% y=0%><path d=${`
+    const x = H({ min: y, max: f, width: l, height: t }), [v] = x([c, f[1]]), [m] = x([o, f[1]]), u = B({ data: s, min: g, max: d, t: x }), M = a ? `url(#linear-gradient-${n})` : void 0;
+    return w`<svg aria-hidden=true class=${b(k.svg)} height=${t ?? $} preserveAspectRatio=none viewBox=${`0 0 ${l} ${t}`} width=${l ?? $}>${a ? p`<defs><linearGradient .id=${`linear-gradient-${n}`} x1=0 x2=1 y1=0 y2=0>${a.map(({ offset: L, color: P, opacity: X }) => p`<stop offset=${`${L * 100}%`} stop-color=${P ?? $} stop-opacity=${X ?? $} />`)}</linearGradient></defs>` : null}${c !== void 0 ? [
+      p`<mask height=100% .id=${`${n}1`} width=100% x=0% y=0%><path d=${`
             M 0,0
             L ${v - 1},0
             L ${v - 1},${t}
             L 0,${t}
             Z
           `} fill=white /></mask>`,
-      m`<mask height=100% .id=${`${n}2`} width=100% x=0% y=0%><path d=${`
+      p`<mask height=100% .id=${`${n}2`} width=100% x=0% y=0%><path d=${`
             M ${v + 1},0
-            L ${p - 1},0
-            L ${p - 1},${t}
+            L ${m - 1},0
+            L ${m - 1},${t}
             L ${v + 1}, ${t}
             Z
           `} fill=white /></mask>`,
-      m`<mask height=100% .id=${`${n}3`} width=100% x=0% y=0%><path d=${`
-                M ${p + 1},0
+      p`<mask height=100% .id=${`${n}3`} width=100% x=0% y=0%><path d=${`
+                M ${m + 1},0
                 L ${l},0
                 L ${l},${t}
-                L ${p + 1}, ${t}
+                L ${m + 1}, ${t}
                 Z
               `} fill=white /></mask>`,
-      m`<path class=${b(k.graphPath)} d=${u ?? $} fill=${M ?? $} mask=${`url(#${n}1)`} />`,
-      m`<path class=${b(k.graphPathHighlight)} d=${u ?? $} fill=${M ?? $} mask=${`url(#${n}2)`} />`,
-      m`<path class=${b(k.graphPath)} d=${u ?? $} fill=${M ?? $} mask=${`url(#${n}3)`} />`
-    ] : m`<path class=${b(k.graphPath)} d=${u ?? $} fill=${M ?? $} />`}</svg>`;
+      p`<path class=${b(k.graphPath)} d=${u ?? $} fill=${M ?? $} mask=${`url(#${n}1)`} />`,
+      p`<path class=${b(k.graphPathHighlight)} d=${u ?? $} fill=${M ?? $} mask=${`url(#${n}2)`} />`,
+      p`<path class=${b(k.graphPath)} d=${u ?? $} fill=${M ?? $} mask=${`url(#${n}3)`} />`
+    ] : p`<path class=${b(k.graphPath)} d=${u ?? $} fill=${M ?? $} />`}</svg>`;
   }
 }
 S("calcite-graph", I);

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

@@ -9,7 +9,7 @@ import { l as x } from "../../chunks/logger.js";
 import { css as k } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.9 */
+v3.1.0 */
 const n = {
   handle: "handle",
   handleSelected: "handle--selected"

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

@@ -7,7 +7,7 @@ import { l as w } from "../../chunks/logger.js";
 import { css as N } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.9 */
+v3.1.0 */
 const P = {
   flipRtl: "flip-rtl"
 }, u = {}, d = {}, m = {

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

@@ -10,7 +10,7 @@ import { u as k } from "../../chunks/useT9n.js";
 import { css as C } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.9 */
+v3.1.0 */
 const $ = C`: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:block}:host([scale=s]) .controls-wrapper{block-size:1.5rem}:host([scale=m]) .controls-wrapper{block-size:2rem}:host([scale=l]) .controls-wrapper{block-size:2.75rem}.wrapper{box-sizing:border-box;display:flex;justify-content:space-between;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;background-color:var(--calcite-inline-editable-background-color, var(--calcite-color-foreground-1))}.wrapper .input-wrapper{flex:1 1 0%}:host(:not([editing-enabled]):not([disabled])) .wrapper:hover{background-color:var(--calcite-inline-editable-background-color-hover, var(--calcite-color-foreground-2))}.controls-wrapper{display:flex}calcite-button{--calcite-button-background-color: var(--calcite-inline-editable-button-background-color);--calcite-button-corner-radius: var(--calcite-inline-editable-button-corner-radius);--calcite-button-loader-color: var(--calcite-inline-editable-button-loader-color);--calcite-button-shadow-color: var(--calcite-inline-editable-button-shadow-color);--calcite-button-text-color: var(--calcite-inline-editable-button-text-color)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`, n = {
   wrapper: "wrapper",
   confirmChangesButton: "confirm-changes-button",

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

@@ -19,7 +19,7 @@ import { s as at } from "../../chunks/input.js";
 import { css as ot } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.1.0-next.9 */
+v3.1.0 */
 const a = {
   loader: "loader",
   clearButton: "clear-button",

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

@@ -1,7 +1,6 @@
 /// <reference types="../../index.d.ts" />
-import { FocusTrap } from 'focus-trap';
 import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
+import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@arcgis/lumina';
 import { FlipPlacement, FloatingUIComponent, MenuPlacement, OverlayPositioning } from '../../utils/floating-ui';
 import { FormComponent, MutableValidityState } from '../../utils/form';
 import { InteractiveComponent } from '../../utils/interactive';
@@ -9,7 +8,6 @@ import { LabelableComponent } from '../../utils/label';
 import { NumberingSystem } from '../../utils/locale';
 import { OpenCloseComponent } from '../../utils/openCloseComponent';
 import { HeadingLevel } from '../functional/Heading';
-import { FocusTrapComponent } from '../../utils/focusTrapComponent';
 import { Status } from '../interfaces';
 import { IconNameOrString } from '../calcite-icon/interfaces';
 import { DatePicker } from '../calcite-date-picker/customElement.js';