@esri/calcite-components 3.0.0-next.99 → 3.0.0

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

@@ -1,28 +1,26 @@
-import { c as C } from "../../chunks/runtime.js";
+import { c as I } from "../../chunks/runtime.js";
 import { ref as h } from "lit-html/directives/ref.js";
 import { repeat as y } from "lit-html/directives/repeat.js";
 import { html as d, nothing as s } from "lit";
-import { LitElement as $, createEvent as c, stringOrBoolean as f, safeClassMap as r } from "@arcgis/lumina";
-import { useWatchAttributes as k } from "@arcgis/components-controllers";
-import { debounce as A, escapeRegExp as T } from "lodash-es";
-import { b as g, r as E, c as u, a as O, F as b } from "../../chunks/floating-ui.js";
-import { u as w, I as z } from "../../chunks/interactive.js";
-import { s as S, a as F } from "../../chunks/loadable.js";
-import { o as m } from "../../chunks/openCloseComponent.js";
-import { c as D, d as H } from "../../chunks/label.js";
-import { c as V, a as L, d as P, s as B, H as M } from "../../chunks/form.js";
-import { a as v } from "../../chunks/dom.js";
-import { g as U } from "../../chunks/guid.js";
-import { u as R } from "../../chunks/useT9n.js";
-import { V as G } from "../../chunks/Validation.js";
-import { c as x } from "../../chunks/observers.js";
-import { css as q } 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.0.0-next.99
-*/
-const W = q`: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:block}.input-container{position:relative;display:flex;flex:1 1 auto;flex-wrap:nowrap}.input{inline-size:100%;--calcite-input-prefix-size: var(--calcite-autocomplete-input-prefix-size);--calcite-input-suffix-size: var(--calcite-autocomplete-input-suffix-size);--calcite-input-background-color: var(--calcite-autocomplete-input-background-color);--calcite-input-border-color: var(--calcite-autocomplete-input-border-color);--calcite-input-corner-radius: var(--calcite-autocomplete-input-corner-radius);--calcite-input-shadow: var(--calcite-autocomplete-input-shadow);--calcite-input-icon-color: var(--calcite-autocomplete-input-icon-color);--calcite-input-text-color: var(--calcite-autocomplete-input-text-color);--calcite-input-placeholder-text-color: var(--calcite-autocomplete-input-placeholder-text-color);--calcite-input-actions-background-color: var(--calcite-autocomplete-input-actions-background-color);--calcite-input-actions-background-color-hover: var(--calcite-autocomplete-input-actions-background-color-hover);--calcite-input-actions-background-color-press: var(--calcite-autocomplete-input-actions-background-color-press);--calcite-input-actions-icon-color: var(--calcite-autocomplete-input-actions-icon-color);--calcite-input-actions-icon-color-hover: var(--calcite-autocomplete-input-actions-icon-color-hover);--calcite-input-actions-icon-color-press: var(--calcite-autocomplete-input-actions-icon-color-press);--calcite-input-loading-background-color: var(--calcite-autocomplete-input-loading-background-color);--calcite-input-loading-fill-color: var(--calcite-autocomplete-input-loading-fill-color);--calcite-input-prefix-background-color: var(--calcite-autocomplete-input-prefix-background-color);--calcite-input-prefix-text-color: var(--calcite-autocomplete-input-prefix-text-color);--calcite-input-suffix-background-color: var(--calcite-autocomplete-input-suffix-background-color);--calcite-input-suffix-text-color: var(--calcite-autocomplete-input-suffix-text-color)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.content-container{box-sizing:border-box;inline-size:100%}.floating-ui-container{--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)}.floating-ui-container .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}.floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.floating-ui-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.floating-ui-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}.floating-ui-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}.content-container .calcite-floating-ui-anim{max-block-size:45vh;inline-size:100%;overflow-y:auto;color:var(--calcite-autocomplete-text-color, var(--calcite-color-text-1));background-color:var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-1));border-radius:var(--calcite-autocomplete-corner-radius, var(--calcite-corner-radius-round))}.content--hidden{display:none}@media (forced-colors: active){.floating-ui-container--active{border:1px solid canvasText}}.screen-readers-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}`, I = {
+import { LitElement as $, createEvent as c, stringOrBoolean as m, safeClassMap as r } from "@arcgis/lumina";
+import { useWatchAttributes as C } from "@arcgis/components-controllers";
+import { debounce as k, escapeRegExp as A } from "lodash-es";
+import { b as f, r as T, c as p, a as E, F as g } from "../../chunks/floating-ui.js";
+import { u as w, I as O } from "../../chunks/interactive.js";
+import "lit-html/is-server.js";
+import { o as S } from "../../chunks/openCloseComponent.js";
+import { c as F, d as D } from "../../chunks/label.js";
+import { c as V, a as z, d as H, s as P, H as B } from "../../chunks/form.js";
+import { a as b } from "../../chunks/dom.js";
+import { g as M } from "../../chunks/guid.js";
+import { u as L } from "../../chunks/useT9n.js";
+import { V as U } from "../../chunks/Validation.js";
+import { c as v } from "../../chunks/observers.js";
+import { css as R } 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.0.0 */
+const G = R`: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:block}.input-container{position:relative;display:flex;flex:1 1 auto;flex-wrap:nowrap}.input{width:100%;--calcite-input-prefix-size: var(--calcite-autocomplete-input-prefix-size);--calcite-input-suffix-size: var(--calcite-autocomplete-input-suffix-size);--calcite-input-background-color: var(--calcite-autocomplete-input-background-color);--calcite-input-border-color: var(--calcite-autocomplete-input-border-color);--calcite-input-corner-radius: var(--calcite-autocomplete-input-corner-radius);--calcite-input-shadow: var(--calcite-autocomplete-input-shadow);--calcite-input-icon-color: var(--calcite-autocomplete-input-icon-color);--calcite-input-text-color: var(--calcite-autocomplete-input-text-color);--calcite-input-placeholder-text-color: var(--calcite-autocomplete-input-placeholder-text-color);--calcite-input-actions-background-color: var(--calcite-autocomplete-input-actions-background-color);--calcite-input-actions-background-color-hover: var(--calcite-autocomplete-input-actions-background-color-hover);--calcite-input-actions-background-color-press: var(--calcite-autocomplete-input-actions-background-color-press);--calcite-input-actions-icon-color: var(--calcite-autocomplete-input-actions-icon-color);--calcite-input-actions-icon-color-hover: var(--calcite-autocomplete-input-actions-icon-color-hover);--calcite-input-actions-icon-color-press: var(--calcite-autocomplete-input-actions-icon-color-press);--calcite-input-loading-background-color: var(--calcite-autocomplete-input-loading-background-color);--calcite-input-loading-fill-color: var(--calcite-autocomplete-input-loading-fill-color);--calcite-input-prefix-background-color: var(--calcite-autocomplete-input-prefix-background-color);--calcite-input-prefix-text-color: var(--calcite-autocomplete-input-prefix-text-color);--calcite-input-suffix-background-color: var(--calcite-autocomplete-input-suffix-background-color);--calcite-input-suffix-text-color: var(--calcite-autocomplete-input-suffix-text-color)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}.content-container{box-sizing:border-box;width:100%}.floating-ui-container{--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)}.floating-ui-container .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}.floating-ui-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.floating-ui-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.floating-ui-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}.floating-ui-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.floating-ui-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}.content-container .calcite-floating-ui-anim{max-height:45vh;width:100%;overflow-y:auto;color:var(--calcite-autocomplete-text-color, var(--calcite-color-text-1));background-color:var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-1));border-radius:var(--calcite-autocomplete-corner-radius, var(--calcite-corner-radius-round))}.content--hidden{display:none}@media (forced-colors: active){.floating-ui-container--active{border:1px solid canvasText}}.screen-readers-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}`, x = {
   contentBottom: "content-bottom",
   contentTop: "content-top"
 }, l = {
@@ -35,14 +33,14 @@ const W = q`:host([disabled]){cursor:default;-webkit-user-select:none;user-selec
   floatingUIContainer: "floating-ui-container",
   floatingUIContainerActive: "floating-ui-container--active",
   screenReadersOnly: "screen-readers-only"
-}, K = {
+}, q = {
   validationMessage: "autocompleteValidationMessage"
-}, j = "calcite-autocomplete-item-group", J = "calcite-autocomplete-item";
-class N extends $ {
+}, W = "calcite-autocomplete-item-group", K = "calcite-autocomplete-item";
+class j extends $ {
   // #endregion
   // #region Lifecycle
   constructor() {
-    super(), this.guid = U(), this.attributeWatch = k(["autofocus", "enterkeyhint", "inputmode"], this.handleGlobalAttributesChanged), this.inputId = `autocomplete-input-${this.guid}`, this.listId = `autocomplete-list-${this.guid}`, this.messages = R(), this.openTransitionProp = "opacity", this.activeDescendant = "", this.activeIndex = -1, this.hasContentBottom = !1, this.hasContentTop = !1, this.items = [], this.groups = [], this.alignment = "start", this.disabled = !1, this.iconFlipRtl = !1, this.loading = !1, this.open = !1, this.overlayPositioning = "absolute", this.placement = g, this.readOnly = !1, this.required = !1, this.scale = "m", this.status = "idle", this.validity = {
+    super(), this.guid = M(), this.attributeWatch = C(["autofocus", "enterkeyhint", "inputmode"], this.handleGlobalAttributesChanged), this.inputId = `autocomplete-input-${this.guid}`, this.listId = `autocomplete-list-${this.guid}`, this.messages = L(), this.transitionProp = "opacity", this.activeDescendant = "", this.activeIndex = -1, this.hasContentBottom = !1, this.hasContentTop = !1, this.items = [], this.groups = [], this.alignment = "start", this.disabled = !1, this.iconFlipRtl = !1, this.loading = !1, this.open = !1, this.overlayPositioning = "absolute", this.placement = f, this.readOnly = !1, this.required = !1, this.scale = "m", this.status = "idle", this.validity = {
       valid: !1,
       badInput: !1,
       customError: !1,
@@ -54,15 +52,15 @@ class N extends $ {
       tooShort: !1,
       typeMismatch: !1,
       valueMissing: !1
-    }, this.value = "", this.calciteAutocompleteBeforeClose = c({ cancelable: !1 }), this.calciteAutocompleteBeforeOpen = c({ cancelable: !1 }), this.calciteAutocompleteChange = c({ cancelable: !1 }), this.calciteAutocompleteClose = c({ cancelable: !1 }), this.calciteAutocompleteOpen = c({ cancelable: !1 }), this.calciteAutocompleteTextChange = c({ cancelable: !1 }), this.calciteAutocompleteTextInput = c({ cancelable: !1 }), this.mutationObserver = x("mutation", () => this.getAllItemsDebounced()), this.resizeObserver = x("resize", () => {
+    }, this.value = "", this.calciteAutocompleteBeforeClose = c({ cancelable: !1 }), this.calciteAutocompleteBeforeOpen = c({ cancelable: !1 }), this.calciteAutocompleteChange = c({ cancelable: !1 }), this.calciteAutocompleteClose = c({ cancelable: !1 }), this.calciteAutocompleteOpen = c({ cancelable: !1 }), this.calciteAutocompleteTextChange = c({ cancelable: !1 }), this.calciteAutocompleteTextInput = c({ cancelable: !1 }), this.mutationObserver = v("mutation", () => this.getAllItemsDebounced()), this.resizeObserver = v("resize", () => {
       this.setFloatingElSize();
-    }), this.getAllItemsDebounced = A(this.getAllItems, 0), this.listenOn(document, "click", this.documentClickHandler), this.listen("calciteInternalAutocompleteItemSelect", this.handleInternalAutocompleteItemSelect);
+    }), this.getAllItemsDebounced = k(this.getAllItems, 0), this.listenOn(document, "click", this.documentClickHandler), this.listen("calciteInternalAutocompleteItemSelect", this.handleInternalAutocompleteItemSelect);
   }
   static {
-    this.properties = { activeDescendant: 16, activeIndex: 16, hasContentBottom: 16, hasContentTop: 16, items: 16, groups: 16, isOpen: 16, enabledItems: 16, alignment: 3, autocomplete: 0, disabled: 7, flipPlacements: 0, form: 3, icon: [3, { converter: f }], iconFlipRtl: 7, inputValue: 1, label: 1, loading: 7, maxLength: 11, messageOverrides: 0, minLength: 11, name: 3, open: 7, overlayPositioning: 3, pattern: 1, placeholder: 1, placement: 3, prefixText: 1, readOnly: 7, required: 7, scale: 3, status: 3, suffixText: 1, validationIcon: [3, { converter: f }], validationMessage: 1, validity: 0, value: 1 };
+    this.properties = { activeDescendant: 16, activeIndex: 16, hasContentBottom: 16, hasContentTop: 16, items: 16, groups: 16, isOpen: 16, enabledItems: 16, alignment: 3, autocomplete: 0, disabled: 7, flipPlacements: 0, form: 3, icon: [3, { converter: m }], iconFlipRtl: 7, inputValue: 1, label: 1, loading: 7, maxLength: 11, messageOverrides: 0, minLength: 11, name: 3, open: 7, overlayPositioning: 3, pattern: 1, placeholder: 1, placement: 3, prefixText: 1, readOnly: 7, required: 7, scale: 3, status: 3, suffixText: 1, validationIcon: [3, { converter: m }], validationMessage: 1, validity: 0, value: 1 };
   }
   static {
-    this.styles = W;
+    this.styles = G;
   }
   get isOpen() {
     return this.open && (this.hasContentTop || this.hasContentBottom || this.items.length > 0);
@@ -80,7 +78,7 @@ class N extends $ {
    */
   async reposition(t = !1) {
     const { floatingEl: e, referenceEl: o, placement: i, overlayPositioning: n, flipPlacements: a } = this;
-    return E(this, {
+    return T(this, {
       floatingEl: e,
       referenceEl: o,
       overlayPositioning: n,
@@ -121,24 +119,24 @@ class N extends $ {
     return this.referenceEl.setFocus();
   }
   connectedCallback() {
-    super.connectedCallback(), this.mutationObserver?.observe(this.el, { childList: !0, subtree: !0 }), D(this), V(this), this.defaultInputValue = this.inputValue || "", this.getAllItemsDebounced(), this.open && (this.openHandler(), m(this)), u(this);
+    super.connectedCallback(), this.mutationObserver?.observe(this.el, { childList: !0, subtree: !0 }), F(this), V(this), this.defaultInputValue = this.inputValue || "", this.getAllItemsDebounced(), p(this);
   }
   async load() {
-    S(this), this.getAllItemsDebounced(), this.open && m(this);
+    this.getAllItemsDebounced();
   }
   willUpdate(t) {
-    t.has("disabled") && (this.hasUpdated || this.disabled !== !1) && this.handleDisabledChange(this.disabled), t.has("flipPlacements") && this.reposition(!0), t.has("open") && (this.hasUpdated || this.open !== !1) && this.openHandler(), t.has("overlayPositioning") && (this.hasUpdated || this.overlayPositioning !== "absolute") && this.reposition(!0), t.has("placement") && (this.hasUpdated || this.placement !== g) && this.reposition(!0);
+    t.has("disabled") && (this.hasUpdated || this.disabled !== !1) && this.handleDisabledChange(this.disabled), t.has("flipPlacements") && this.reposition(!0), t.has("open") && (this.hasUpdated || this.open !== !1) && this.openHandler(), t.has("overlayPositioning") && (this.hasUpdated || this.overlayPositioning !== "absolute") && this.reposition(!0), t.has("placement") && (this.hasUpdated || this.placement !== f) && this.reposition(!0);
     let e = !1;
-    t.has("inputValue") && (this.hasUpdated || this.inputValue) && (this.inputValueMatchPattern = this.inputValue && new RegExp(`(${T(this.inputValue)})`, "i"), this.updateItems(), this.updateGroups(), e = !0), !e && t.has("scale") && (this.hasUpdated || this.scale !== "m") && (this.updateItems(), this.updateGroups(), e = !0), !e && t.has("activeIndex") && (this.hasUpdated || this.activeIndex !== -1) && this.updateItems();
+    t.has("inputValue") && (this.hasUpdated || this.inputValue) && (this.inputValueMatchPattern = this.inputValue && new RegExp(`(${A(this.inputValue)})`, "i"), this.updateItems(), this.updateGroups(), e = !0), !e && t.has("scale") && (this.hasUpdated || this.scale !== "m") && (this.updateItems(), this.updateGroups(), e = !0), !e && t.has("activeIndex") && (this.hasUpdated || this.activeIndex !== -1) && this.updateItems();
   }
   updated() {
     w(this);
   }
   loaded() {
-    L(this, this.value || ""), this.defaultInputValue = this.inputValue || "", F(this), u(this);
+    z(this, this.value || ""), this.defaultInputValue = this.inputValue || "", p(this);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.mutationObserver?.disconnect(), this.resizeObserver?.disconnect(), H(this), P(this), O(this);
+    super.disconnectedCallback(), this.mutationObserver?.disconnect(), this.resizeObserver?.disconnect(), D(this), H(this), E(this);
   }
   // #endregion
   // #region Private Methods
@@ -153,7 +151,7 @@ class N extends $ {
     t || (this.open = !1);
   }
   openHandler() {
-    if (m(this), this.open || (this.activeIndex = -1), this.disabled) {
+    if (S(this), this.open || (this.activeIndex = -1), this.disabled) {
       this.open = !1;
       return;
     }
@@ -206,23 +204,23 @@ class N extends $ {
     this.open = !0;
   }
   handleContentTopSlotChange(t) {
-    this.hasContentTop = v(t);
+    this.hasContentTop = b(t);
   }
   handleContentBottomSlotChange(t) {
-    this.hasContentBottom = v(t);
+    this.hasContentBottom = b(t);
   }
   getAllItems() {
     const { el: t } = this;
-    this.groups = Array.from(t.querySelectorAll(j)), this.items = Array.from(t.querySelectorAll(J)), this.updateItems(), this.updateGroups();
+    this.groups = Array.from(t.querySelectorAll(W)), this.items = Array.from(t.querySelectorAll(K)), this.updateItems(), this.updateGroups();
   }
   setReferenceEl(t) {
-    this.referenceEl = t, t && (this.resizeObserver?.observe(t), u(this));
+    this.referenceEl = t, t && (this.resizeObserver?.observe(t), p(this));
   }
   keyDownHandler(t) {
     const { defaultPrevented: e, key: o } = t;
     if (e)
       return;
-    const { open: i, activeIndex: n, enabledItems: a } = this, p = a.length && n > -1 ? a[n] : null;
+    const { open: i, activeIndex: n, enabledItems: a } = this, u = a.length && n > -1 ? a[n] : null;
     switch (o) {
       case "Escape":
         i && (this.open = !1, t.preventDefault());
@@ -231,7 +229,7 @@ class N extends $ {
         this.open = !1;
         break;
       case "Enter":
-        i && p ? (this.value = p.value, this.emitChange(), this.open = !1, t.preventDefault()) : t.defaultPrevented || B(this) && t.preventDefault();
+        i && u ? (this.value = u.value, this.emitChange(), this.open = !1, t.preventDefault()) : t.defaultPrevented || P(this) && t.preventDefault();
         break;
       case "ArrowDown":
         a.length && (this.open = !0, this.activeIndex = n !== -1 ? Math.min(n + 1, a.length - 1) : 0, this.scrollToActiveItem(), t.preventDefault());
@@ -260,7 +258,7 @@ class N extends $ {
     t.stopPropagation(), this.inputValue = t.target.value, this.calciteAutocompleteTextInput.emit();
   }
   setFloatingEl(t) {
-    this.floatingEl = t, u(this);
+    this.floatingEl = t, p(this);
   }
   setTransitionEl(t) {
     this.transitionEl = t;
@@ -268,16 +266,16 @@ class N extends $ {
   // #endregion
   // #region Rendering
   render() {
-    const { disabled: t, listId: e, inputId: o, isOpen: i } = this, n = this.el.autofocus, a = this.el.enterKeyHint, p = this.el.inputMode;
-    return z({ disabled: t, children: d`<div class=${r(l.inputContainer)}><calcite-input .alignment=${this.alignment} aria-activedescendant=${this.activeDescendant ?? s} aria-controls=${e ?? s} aria-owns=${e ?? s} aria-autocomplete=list .ariaExpanded=${i} aria-haspopup=listbox .autocomplete=${this.autocomplete} .autofocus=${n} class=${r(l.input)} clearable .disabled=${t} enterkeyhint=${a ?? s} .form=${this.form} .icon=${this.icon ?? !0} .iconFlipRtl=${this.iconFlipRtl} id=${o ?? s} inputmode=${p ?? s} .label=${this.label} .loading=${this.loading} .maxLength=${this.maxLength} .messageOverrides=${this.messages} .minLength=${this.minLength} .name=${this.name} @click=${this.inputClickHandler} @keydown=${this.keyDownHandler} @calciteInputChange=${this.changeHandler} @calciteInputInput=${this.inputHandler} @calciteInternalInputFocus=${this.handleInputFocus} .pattern=${this.pattern} .placeholder=${this.placeholder} .prefixText=${this.prefixText} .readOnly=${this.readOnly} role=combobox .scale=${this.scale} .status=${this.status} .suffixText=${this.suffixText} type=search .value=${this.inputValue} ${h(this.setReferenceEl)}></calcite-input>${this.renderListBox()}<div class=${r({
+    const { disabled: t, listId: e, inputId: o, isOpen: i } = this, n = this.el.autofocus, a = this.el.enterKeyHint, u = this.el.inputMode;
+    return O({ disabled: t, children: d`<div class=${r(l.inputContainer)}><calcite-input .alignment=${this.alignment} aria-activedescendant=${this.activeDescendant ?? s} aria-controls=${e ?? s} aria-owns=${e ?? s} aria-autocomplete=list .ariaExpanded=${i} aria-haspopup=listbox .autocomplete=${this.autocomplete} .autofocus=${n} class=${r(l.input)} clearable .disabled=${t} enterkeyhint=${a ?? s} .form=${this.form} .icon=${this.icon ?? !0} .iconFlipRtl=${this.iconFlipRtl} id=${o ?? s} inputmode=${u ?? s} .label=${this.label} .loading=${this.loading} .maxLength=${this.maxLength} .messageOverrides=${this.messages} .minLength=${this.minLength} .name=${this.name} @click=${this.inputClickHandler} @keydown=${this.keyDownHandler} @calciteInputChange=${this.changeHandler} @calciteInputInput=${this.inputHandler} @calciteInternalInputFocus=${this.handleInputFocus} .pattern=${this.pattern} .placeholder=${this.placeholder} .prefixText=${this.prefixText} .readOnly=${this.readOnly} role=combobox .scale=${this.scale} .status=${this.status} .suffixText=${this.suffixText} type=search .value=${this.inputValue} ${h(this.setReferenceEl)}></calcite-input>${this.renderListBox()}<div class=${r({
       [l.contentContainer]: !0,
       [l.floatingUIContainer]: !0,
       [l.floatingUIContainerActive]: i
     })} ${h(this.setFloatingEl)}><div class=${r({
       [l.contentAnimation]: !0,
-      [b.animation]: !0,
-      [b.animationActive]: i
-    })} ${h(this.setTransitionEl)}><div class=${r({ [l.content]: !0, [l.contentHidden]: !i })}><slot name=${I.contentTop} @slotchange=${this.handleContentTopSlotChange}></slot><slot aria-hidden=true></slot><slot name=${I.contentBottom} @slotchange=${this.handleContentBottomSlotChange}></slot></div></div></div></div>${M({ component: this })}${this.validationMessage && this.status === "invalid" ? G({ icon: this.validationIcon, id: K.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
+      [g.animation]: !0,
+      [g.animationActive]: i
+    })} ${h(this.setTransitionEl)}><div class=${r({ [l.content]: !0, [l.contentHidden]: !i })}><slot name=${x.contentTop} @slotchange=${this.handleContentTopSlotChange}></slot><slot aria-hidden=true></slot><slot name=${x.contentBottom} @slotchange=${this.handleContentBottomSlotChange}></slot></div></div></div></div>${B({ component: this })}${this.validationMessage && this.status === "invalid" ? U({ icon: this.validationIcon, id: q.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
   }
   renderListBox() {
     return d`<ul aria-labelledby=${this.inputId ?? s} class=${r(l.screenReadersOnly)} id=${this.listId ?? s} role=listbox tabindex=-1>${this.renderListBoxOptions()}</ul>`;
@@ -286,7 +284,7 @@ class N extends $ {
     return y(this.items.filter((t) => !!(t.label || t.heading)), (t) => t.guid, (t) => d`<li .ariaDisabled=${t.disabled} .ariaLabel=${t.label} id=${t.guid ?? s} role=option tabindex=-1>${t.heading}${t.description}</li>`);
   }
 }
-C("calcite-autocomplete", N);
+I("calcite-autocomplete", j);
 export {
-  N as Autocomplete
+  j as Autocomplete
 };

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

@@ -1,17 +1,15 @@
 import { c as p } from "../../chunks/runtime.js";
 import { html as r } from "lit-html";
 import { LitElement as m, createEvent as u, safeClassMap as i } from "@arcgis/lumina";
-import { s as h, a as v } from "../../chunks/loadable.js";
-import { g as f } from "../../chunks/component.js";
-import { u as g, I as b } from "../../chunks/interactive.js";
-import { g as x } from "../../chunks/guid.js";
+import "lit-html/is-server.js";
+import { g as h } from "../../chunks/component.js";
+import { u as v, I as g } from "../../chunks/interactive.js";
+import { g as f } from "../../chunks/guid.js";
 import { h as s } from "../../chunks/text.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.0.0-next.99
-*/
+import { css as b } 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.0.0 */
 const t = {
   container: "container",
   containerActive: "container--active",
@@ -24,27 +22,25 @@ const t = {
 }, d = {
   contentEnd: "content-end",
   contentStart: "content-start"
-}, $ = 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}.scale--s{font-size:var(--calcite-font-size--2);line-height:1rem;--calcite-internal-autocomplete-item-spacing-unit-l: .5rem;--calcite-internal-autocomplete-item-spacing-unit-s: .25rem;--calcite-internal-autocomplete-item-description-font-size: var(--calcite-font-size-xs)}.scale--m{font-size:var(--calcite-font-size--1);line-height:1rem;--calcite-internal-autocomplete-item-spacing-unit-l: .75rem;--calcite-internal-autocomplete-item-spacing-unit-s: .375rem;--calcite-internal-autocomplete-item-description-font-size: var(--calcite-font-size-sm)}.scale--l{font-size:var(--calcite-font-size-0);line-height:1.25rem;--calcite-internal-autocomplete-item-spacing-unit-l: 1rem;--calcite-internal-autocomplete-item-spacing-unit-s: .625rem;--calcite-internal-autocomplete-item-description-font-size: var(--calcite-font-size)}:host{display:flex}.container{position:relative;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:100%;cursor:pointer;align-items:center;outline-color:transparent;background-color:var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-1));color:var(--calcite-autocomplete-text-color, var(--calcite-color-text-3));gap:var(--calcite-internal-autocomplete-item-spacing-unit-l);padding-inline:var(--calcite-internal-autocomplete-item-spacing-unit-l);padding-block:var(--calcite-internal-autocomplete-item-spacing-unit-s);word-wrap:break-word;word-break:break-word;justify-content:space-around}.description{color:var(--calcite-autocomplete-description-text-color);font-size:var(--calcite-internal-autocomplete-item-description-font-size)}.heading{color:var(--calcite-autocomplete-heading-text-color, var(--calcite-color-text-1))}.heading,.description{line-height:var(--calcite-font-line-height-relative-snug)}:host(:hover:not([disabled])) .container{background-color:var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-2))}:host(:hover:not([disabled])) .container .description{color:var(--calcite-autocomplete-description-text-color, var(--calcite-color-text-2))}.container--active{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))))}.content-center{display:flex;flex-direction:column;flex-grow:1;padding-block:0}.text-match{background-color:transparent;color:inherit;font-weight:var(--calcite-font-weight-bold)}: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 k extends m {
+}, x = b`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}.scale--s{font-size:var(--calcite-font-size--2);line-height:1rem;--calcite-internal-autocomplete-item-spacing-unit-l: .5rem;--calcite-internal-autocomplete-item-spacing-unit-s: .25rem;--calcite-internal-autocomplete-item-description-font-size: var(--calcite-font-size-xs)}.scale--m{font-size:var(--calcite-font-size--1);line-height:1rem;--calcite-internal-autocomplete-item-spacing-unit-l: .75rem;--calcite-internal-autocomplete-item-spacing-unit-s: .375rem;--calcite-internal-autocomplete-item-description-font-size: var(--calcite-font-size-sm)}.scale--l{font-size:var(--calcite-font-size-0);line-height:1.25rem;--calcite-internal-autocomplete-item-spacing-unit-l: 1rem;--calcite-internal-autocomplete-item-spacing-unit-s: .625rem;--calcite-internal-autocomplete-item-description-font-size: var(--calcite-font-size)}:host{display:flex}.container{position:relative;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:100%;cursor:pointer;align-items:center;outline-color:transparent;background-color:var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-1));color:var(--calcite-autocomplete-text-color, var(--calcite-color-text-3));gap:var(--calcite-internal-autocomplete-item-spacing-unit-l);padding-inline:var(--calcite-internal-autocomplete-item-spacing-unit-l);padding-block:var(--calcite-internal-autocomplete-item-spacing-unit-s);word-wrap:break-word;word-break:break-word;justify-content:space-around}.description{color:var(--calcite-autocomplete-description-text-color);font-size:var(--calcite-internal-autocomplete-item-description-font-size)}.heading{color:var(--calcite-autocomplete-heading-text-color, var(--calcite-color-text-1))}.heading,.description{line-height:var(--calcite-font-line-height-relative-snug)}:host(:hover:not([disabled])) .container{background-color:var(--calcite-autocomplete-background-color, var(--calcite-color-foreground-2))}:host(:hover:not([disabled])) .container .description{color:var(--calcite-autocomplete-description-text-color, var(--calcite-color-text-2))}.container--active{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))))}.content-center{display:flex;flex-direction:column;flex-grow:1;padding-block:0}.text-match{background-color:transparent;color:inherit;font-weight:var(--calcite-font-weight-bold)}: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 m {
   constructor() {
-    super(...arguments), this.active = !1, this.disabled = !1, this.guid = `autocomplete-item-${x()}`, this.scale = "m", this.calciteInternalAutocompleteItemSelect = u({ cancelable: !1 });
+    super(...arguments), this.active = !1, this.disabled = !1, this.guid = `autocomplete-item-${f()}`, this.scale = "m", this.calciteInternalAutocompleteItemSelect = u({ cancelable: !1 });
   }
   static {
     this.properties = { active: 5, description: 1, disabled: 7, guid: 1, heading: 1, iconEnd: 3, iconFlipRtl: 3, iconStart: 3, inputValueMatchPattern: 2, label: 1, scale: 1, value: 1 };
   }
   static {
-    this.styles = $;
+    this.styles = x;
   }
   // #endregion
   // #region Lifecycle
   load() {
-    h(this);
   }
   updated() {
-    g(this);
+    v(this);
   }
   loaded() {
-    v(this);
   }
   // #endregion
   // #region Private Methods
@@ -55,7 +51,7 @@ class k extends m {
   // #region Rendering
   render() {
     const { active: e, description: c, heading: o, disabled: n, inputValueMatchPattern: l } = this;
-    return b({ disabled: n, children: r`<div class=${i({
+    return g({ disabled: n, children: r`<div class=${i({
       [t.container]: !0,
       [t.containerActive]: e && !n,
       [t.scale(this.scale)]: !0
@@ -69,10 +65,10 @@ class k extends m {
   }
   renderIcon(e) {
     const { iconFlipRtl: c } = this, o = e === "start" ? this.iconStart : this.iconEnd;
-    return o ? r`<calcite-icon class=${i(e === "start" ? t.iconStart : t.iconEnd)} .flipRtl=${c === e || c === "both"} .icon=${o} .scale=${f(this.scale)}></calcite-icon>` : null;
+    return o ? r`<calcite-icon class=${i(e === "start" ? t.iconStart : t.iconEnd)} .flipRtl=${c === e || c === "both"} .icon=${o} .scale=${h(this.scale)}></calcite-icon>` : null;
   }
 }
-p("calcite-autocomplete-item", k);
+p("calcite-autocomplete-item", z);
 export {
-  k as AutocompleteItem
+  z as AutocompleteItem
 };

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

@@ -2,11 +2,9 @@ import { c as o } from "../../chunks/runtime.js";
 import { html as a } from "lit-html";
 import { LitElement as n, nothing as c, safeClassMap as i } from "@arcgis/lumina";
 import { css as r } 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.0.0-next.99
-*/
+/*! 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.0.0 */
 const e = {
   container: "container",
   containerNoSpacing: "container--no-spacing",

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

@@ -2,21 +2,19 @@ import { c as b } from "../../chunks/runtime.js";
 import { html as o } from "lit-html";
 import { LitElement as f, nothing as m, safeClassMap as c, safeStyleMap as g } from "@arcgis/lumina";
 import { C as p } from "../../chunks/dom.js";
-import { w as v, i as d } from "../../chunks/utils4.js";
+import { x as v, i as d } from "../../chunks/utils4.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.0.0-next.99
-*/
+/*! 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.0.0 */
 const u = {
   thumbnail: "thumbnail",
   background: "background",
   initials: "initials",
   icon: "icon"
 };
-function z(a) {
-  a = x(a);
+function x(a) {
+  a = z(a);
   let e = 0;
   for (let i = 0; i < a.length; i++)
     e = a.charCodeAt(i) + ((e << 5) - e);
@@ -27,7 +25,7 @@ function z(a) {
   }
   return t;
 }
-function x(a) {
+function z(a) {
   const e = Math.floor(a.length / 2), t = a.split("").reverse().join("");
   return t.substring(e) + t.slice(0, e);
 }
@@ -75,7 +73,7 @@ class T extends f {
   }
   /** Generate a valid background color that is consistent and unique to this user */
   generateFillColor() {
-    const { userId: e, username: t, fullName: i, el: r } = this, l = p(r), s = e && `#${e.substr(e.length - 6)}`, n = t || i || "", h = s && d(s) ? s : z(n);
+    const { userId: e, username: t, fullName: i, el: r } = this, l = p(r), s = e && `#${e.substr(e.length - 6)}`, n = t || i || "", h = s && d(s) ? s : x(n);
     return !e && !n || !d(h) ? "var(--calcite-avatar-background-color, var(--calcite-color-foreground-2))" : `var(--calcite-avatar-background-color, hsl(${y(h)}, 60%, ${l === "dark" ? 20 : 90}%))`;
   }
   /** Use fullName or username to generate initials */

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

@@ -8,6 +8,7 @@ import { LoadableComponent } from '../../utils/loadable';
 import { OpenCloseComponent } from '../../utils/openCloseComponent';
 import { FlipPlacement, LogicalPlacement, OverlayPositioning } from '../../utils/floating-ui';
 import { IconNameOrString } from '../calcite-icon/interfaces';
+import { MoveTo } from '../calcite-sort-handle/interfaces';
 
 /**
  * @slot - A slot for adding custom content.
@@ -24,7 +25,13 @@ export declare class Block extends LitElement {
     description: string;
     /** When `true`, interaction is prevented and the component is displayed with lower opacity. */
     disabled: boolean;
-    /** When `true`, displays a drag handle in the header. */
+    /** When `true`, and a parent Block Group is `dragEnabled`, the component is not draggable. */
+    dragDisabled: boolean;
+    /**
+     * When `true`, the component displays a draggable button.
+     *
+     * @deprecated No longer necessary. Use Block Group for draggable functionality.
+     */
     dragHandle: boolean;
     /**
      * The component header text.
@@ -77,6 +84,8 @@ export declare class Block extends LitElement {
      * `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
      */
     overlayPositioning: OverlayPositioning;
+    /** When `true`, displays and positions the sort handle. */
+    sortHandleOpen: boolean;
     /**
      * Displays a status-related indicator icon.
      *
@@ -93,6 +102,14 @@ export declare class Block extends LitElement {
     readonly calciteBlockClose: TargetedEvent<this, undefined>;
     /** Fires when the component is open and animation is complete. */
     readonly calciteBlockOpen: TargetedEvent<this, undefined>;
+    /** Fires when the sort handle is requested to be closed and before the closing transition begins. */
+    readonly calciteBlockSortHandleBeforeClose: TargetedEvent<this, undefined>;
+    /** Fires when the sort handle is added to the DOM but not rendered, and before the opening transition begins. */
+    readonly calciteBlockSortHandleBeforeOpen: TargetedEvent<this, undefined>;
+    /** Fires when the sort handle is closed and animation is complete. */
+    readonly calciteBlockSortHandleClose: TargetedEvent<this, undefined>;
+    /** Fires when the sort handle is open and animation is complete. */
+    readonly calciteBlockSortHandleOpen: TargetedEvent<this, undefined>;
     /**
      * Fires when the component's header is clicked.
      *