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

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

@@ -1,72 +1,68 @@
-import { D as H, c as j } from "../../chunks/runtime.js";
+import { D as q, c as j } from "../../chunks/runtime.js";
 import { keyed as f } from "lit-html/directives/keyed.js";
-import { live as X } from "lit-html/directives/live.js";
-import { debounce as w, escapeRegExp as J } from "lodash-es";
+import { live as N } from "lit-html/directives/live.js";
+import { debounce as X, escapeRegExp as J } from "lodash-es";
 import { d as K } from "../../chunks/core.js";
 import { html as d, nothing as m } from "lit";
 import { createRef as Q, ref as b } from "lit-html/directives/ref.js";
-import { safeClassMap as h, LitElement as Y, createEvent as g, stringOrBoolean as Z } from "@arcgis/lumina";
+import { safeClassMap as r, LitElement as Y, createEvent as g, stringOrBoolean as Z } from "@arcgis/lumina";
 import { f as ee } from "../../chunks/filter.js";
 import { B as v, A as te } from "../../chunks/dom.js";
-import { b as ie, r as se, c as C, a as le, f as oe, h as ne, F as T } from "../../chunks/floating-ui.js";
-import { c as ae, a as ce, d as re, s as he, H as de } from "../../chunks/form.js";
+import { b as ie, r as se, c as C, a as le, f as ae, h as oe, F as H } from "../../chunks/floating-ui.js";
+import { c as ne, a as ce, d as re, s as he, H as de } from "../../chunks/form.js";
 import { g as pe } from "../../chunks/guid.js";
 import { u as ue, I as me } from "../../chunks/interactive.js";
 import { c as fe, d as be, g as ge } from "../../chunks/label.js";
-import { c as xe, s as Ie, a as ve, b as Ce } from "../../chunks/loadable.js";
-import { c as F } from "../../chunks/observers.js";
-import { o as M } from "../../chunks/openCloseComponent.js";
-import { html as $e } from "lit-html";
-import { g as k } from "../../chunks/component.js";
-import { V as ye } from "../../chunks/Validation.js";
+import { c as xe, a as Ie } from "../../chunks/loadable.js";
+import { c as E } from "../../chunks/observers.js";
+import { o as ve } from "../../chunks/openCloseComponent.js";
+import { html as Ce } from "lit-html";
+import { g as S, i as F } from "../../chunks/component.js";
+import { V as $e } from "../../chunks/Validation.js";
 import { u as we } from "../../chunks/useT9n.js";
-import { h as V, i as x, C as r, b as $, c as z, d as Se, e as P, f as O, I as L } from "../../chunks/utils3.js";
-import { css as ke } 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 = {
+import { h as T, i as x, C as c, b as V, c as O, d as $, e as M, f as ye, I as P } from "../../chunks/utils3.js";
+import { css as Se } 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.1 */
+const U = {
   button: "x-button"
-}, De = ({ disabled: D, key: e, label: t, scale: i }) => f(e, $e`<button .ariaLabel=${t} class=${h(W.button)} .disabled=${D} tabindex=-1 type=button><calcite-icon icon=x .scale=${k(i)}></calcite-icon></button>`), Ee = ke`: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}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]) .x-button{inline-size:1rem;block-size:1rem}:host([scale=m]) .x-button{inline-size:1.5rem;block-size:1.5rem}:host([scale=l]) .x-button{inline-size:2rem;block-size:2rem}.x-button{margin:0;display:flex;cursor:pointer;appearance:none;align-content:center;align-items:center;justify-content:center;align-self:center;border-width:2px;background-color:transparent;color:var(--calcite-color-text-3);outline-color:transparent;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;border-radius:50%;border-color:transparent;background-color:var(--calcite-color-foreground-2)}.x-button:active,.x-button:hover{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-3)}.x-button:active{border-style:solid;border-color:var(--calcite-color-brand)}.x-button calcite-icon{color:inherit}:host([scale=s]){font-size:var(--calcite-font-size--2);--calcite-combobox-item-spacing-unit-l: .5rem;--calcite-combobox-item-spacing-unit-s: .25rem;--calcite-combobox-input-height: 1rem;--calcite-internal-combobox-input-margin-block: calc(.25rem - 1px) }:host([scale=s]) .x-button{margin-inline:.5rem}:host([scale=m]){font-size:var(--calcite-font-size--1);--calcite-combobox-item-spacing-unit-l: .75rem;--calcite-combobox-item-spacing-unit-s: .5rem;--calcite-combobox-input-height: 1rem;--calcite-internal-combobox-input-margin-block: calc(.5rem - 1px) }:host([scale=m]) .x-button{margin-inline-end:.75rem}:host([scale=l]){font-size:var(--calcite-font-size-0);--calcite-combobox-item-spacing-unit-l: 1rem;--calcite-combobox-item-spacing-unit-s: .75rem;--calcite-combobox-input-height: 1.5rem;--calcite-internal-combobox-input-margin-block: calc(.625rem - 1px) }:host([scale=l]) .x-button{margin-inline-end:1rem}.wrapper{display:flex;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-1);outline-color:transparent;padding-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.wrapper:hover .icon{color:var(--calcite-color-text-1)}:host(:focus-within) .wrapper,.wrapper--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))))}:host([read-only]) .wrapper{background-color:var(--calcite-color-background)}:host([read-only]) .label{font-weight:var(--calcite-font-weight-medium)}:host([status=invalid]) .wrapper{border-color:var(--calcite-color-status-danger)}:host([status=invalid]:focus-within) .wrapper{outline:2px solid var(--calcite-color-status-danger);outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.wrapper--single{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l);cursor:pointer;flex-wrap:nowrap}.grid-input{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0;gap:var(--calcite-combobox-item-spacing-unit-s);margin-inline-end:var(--calcite-combobox-item-spacing-unit-s)}.grid-input.selection-display-fit,.grid-input.selection-display-single{flex-wrap:nowrap;overflow:hidden}.input{flex-grow:1;appearance:none;overflow:hidden;text-overflow:ellipsis;border-style:none;background-color:transparent;padding:0;font-family:inherit;color:var(--calcite-color-text-1);font-size:inherit;block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height);inline-size:100%;margin-block-end:var(--calcite-combobox-item-spacing-unit-s);min-inline-size:4.8125rem}.input:focus{outline:2px solid transparent;outline-offset:2px}.input:placeholder-shown{text-overflow:ellipsis}.input--single{padding:0;margin-block:var(--calcite-internal-combobox-input-margin-block)}.wrapper--active .input-single{cursor:text}.input--hidden{pointer-events:none;inline-size:0px;min-inline-size:0px;opacity:0}.input--icon{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.placeholder-icon{color:var(--calcite-color-text-3)}.input-wrap{display:flex;flex-grow:1;align-items:center}.input-wrap--single{flex:1 1 0%;overflow:hidden}.label{pointer-events:none;max-inline-size:100%;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0;font-weight:var(--calcite-font-weight-normal);block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height)}.label--icon{padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.icon-end,.icon-start{display:flex;cursor:pointer;align-items:center}.icon-end{flex:none}.icon-end .icon{color:var(--calcite-color-text-3)}.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}@media (forced-colors: active){.wrapper,.floating-ui-container{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}.list-container{max-block-size:45vh;overflow-y:auto;background-color:var(--calcite-color-foreground-1);inline-size:var(--calcite-dropdown-width, 100%)}.list{margin:0;display:block;padding:0}.list--hide{block-size:0px;overflow:hidden}calcite-chip{--calcite-animation-timing: 0}.chip{margin-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);max-inline-size:100%}.chip--active{background-color:var(--calcite-color-foreground-3)}.chip--invisible{visibility:hidden;position:absolute}.item{display:block}.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}::slotted(calcite-combobox-item-group:not(:first-child)){padding-block-start:var(--calcite-combobox-item-spacing-unit-l)}`, B = "combobox-item-", U = "combobox-chip-", R = "combobox-label-", S = "combobox-listbox-", G = "combobox-input-";
+}, ke = ({ disabled: k, key: e, label: t, scale: i }) => f(e, Ce`<button .ariaLabel=${t} class=${r(U.button)} .disabled=${k} tabindex=-1 type=button><calcite-icon icon=x .scale=${S(i)}></calcite-icon></button>`), De = Se`: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}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]) .x-button{inline-size:1rem;block-size:1rem}:host([scale=m]) .x-button{inline-size:1.5rem;block-size:1.5rem}:host([scale=l]) .x-button{inline-size:2rem;block-size:2rem}.x-button{margin:0;display:flex;cursor:pointer;appearance:none;align-content:center;align-items:center;justify-content:center;align-self:center;border-width:2px;background-color:transparent;color:var(--calcite-color-text-3);outline-color:transparent;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;border-radius:50%;border-color:transparent;background-color:var(--calcite-color-foreground-2)}.x-button:active,.x-button:hover{color:var(--calcite-color-text-1);background-color:var(--calcite-color-foreground-3)}.x-button:active{border-style:solid;border-color:var(--calcite-color-brand)}.x-button calcite-icon{color:inherit}:host([scale=s]){font-size:var(--calcite-font-size--2);--calcite-combobox-item-spacing-unit-l: .5rem;--calcite-combobox-item-spacing-unit-s: .25rem;--calcite-combobox-input-height: 1rem;--calcite-internal-combobox-input-margin-block: calc(.25rem - 1px) }:host([scale=s]) .x-button{margin-inline:.5rem}:host([scale=m]){font-size:var(--calcite-font-size--1);--calcite-combobox-item-spacing-unit-l: .75rem;--calcite-combobox-item-spacing-unit-s: .5rem;--calcite-combobox-input-height: 1rem;--calcite-internal-combobox-input-margin-block: calc(.5rem - 1px) }:host([scale=m]) .x-button{margin-inline-end:.75rem}:host([scale=l]){font-size:var(--calcite-font-size-0);--calcite-combobox-item-spacing-unit-l: 1rem;--calcite-combobox-item-spacing-unit-s: .75rem;--calcite-combobox-input-height: 1.5rem;--calcite-internal-combobox-input-margin-block: calc(.625rem - 1px) }:host([scale=l]) .x-button{margin-inline-end:1rem}.wrapper{display:flex;border-width:1px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-1);outline-color:transparent;padding-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.wrapper:hover .icon{color:var(--calcite-color-text-1)}:host(:focus-within) .wrapper,.wrapper--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))))}:host([read-only]) .wrapper{background-color:var(--calcite-color-background)}:host([read-only]) .label{font-weight:var(--calcite-font-weight-medium)}:host([status=invalid]) .wrapper{border-color:var(--calcite-color-status-danger)}:host([status=invalid]:focus-within) .wrapper{outline:2px solid var(--calcite-color-status-danger);outline-offset:calc(-2px*(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.wrapper--single{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l);cursor:pointer;flex-wrap:nowrap}.grid-input{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0;gap:var(--calcite-combobox-item-spacing-unit-s);margin-inline-end:var(--calcite-combobox-item-spacing-unit-s)}.grid-input.selection-display-fit,.grid-input.selection-display-single{flex-wrap:nowrap;overflow:hidden}.input{flex-grow:1;appearance:none;overflow:hidden;text-overflow:ellipsis;border-style:none;background-color:transparent;padding:0;font-family:inherit;color:var(--calcite-color-text-1);font-size:inherit;block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height);inline-size:100%;margin-block-end:var(--calcite-combobox-item-spacing-unit-s);min-inline-size:4.8125rem}.input:focus{outline:2px solid transparent;outline-offset:2px}.input:placeholder-shown{text-overflow:ellipsis}.input--single{padding:0;margin-block:var(--calcite-internal-combobox-input-margin-block)}.wrapper--active .input-single{cursor:text}.input--hidden{pointer-events:none;width:0px;min-width:0px;opacity:0}.input--icon{padding-block:0;padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.placeholder-icon{color:var(--calcite-color-text-3)}.input-wrap{display:flex;flex-grow:1;align-items:center}.input-wrap--single{flex:1 1 0%;overflow:hidden}.label{pointer-events:none;max-width:100%;flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0;font-weight:var(--calcite-font-weight-normal);block-size:var(--calcite-combobox-input-height);line-height:var(--calcite-combobox-input-height)}.label--icon{padding-inline:var(--calcite-combobox-item-spacing-unit-l)}.icon-end,.icon-start{display:flex;cursor:pointer;align-items:center}.icon-end{flex:none}.icon-end .icon{color:var(--calcite-color-text-3)}.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}@media (forced-colors: active){.wrapper,.floating-ui-container{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}.list-container{max-height:45vh;overflow-y:auto;background-color:var(--calcite-color-foreground-1);inline-size:var(--calcite-dropdown-width, 100%)}.list{margin:0;display:block;padding:0}.list--hide{height:0px;overflow:hidden}calcite-chip{--calcite-animation-timing: 0}.chip{margin-block:calc(var(--calcite-combobox-item-spacing-unit-s) / 4);max-inline-size:100%}.chip--active{background-color:var(--calcite-color-foreground-3)}.chip--invisible{visibility:hidden;position:absolute}.item{display:block}.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}::slotted(calcite-combobox-item-group:not(:first-child)){padding-block-start:var(--calcite-combobox-item-spacing-unit-l)}`, z = "combobox-item-", L = "combobox-chip-", R = "combobox-label-", y = "combobox-listbox-", B = "combobox-input-";
 class Ae extends Y {
   // #endregion
   // #region Lifecycle
   constructor() {
-    super(), this.internalComboboxChangeEvent = () => {
-      this.calciteComboboxChange.emit();
-    }, this.emitComboboxChange = w(this.internalComboboxChangeEvent, 0), this.filterItems = (() => {
+    super(), this.filterItems = (() => {
       const e = (t, i) => t && i.some(({ el: s }) => t === s);
-      return w((t, i = !1, s = !0) => {
-        const l = ee([...this.data, ...this.groupData], t, this.effectiveFilterProps), o = this.getItemsAndGroups(), n = t === "";
-        o.forEach((a) => {
-          if (n) {
-            a.hidden = !1;
+      return X((t, i = !1, s = !0) => {
+        const l = ee([...this.data, ...this.groupData], t, this.effectiveFilterProps), a = this.getItemsAndGroups(), o = t === "";
+        a.forEach((n) => {
+          if (o) {
+            n.itemHidden = !1;
             return;
           }
-          const c = !e(a, l);
-          a.hidden = c;
-          const [p, I] = a.ancestors;
-          (e(p, l) || e(I, l)) && (a.hidden = !1), c || a.ancestors.forEach((u) => u.hidden = !1);
-        }), this.filterTextMatchPattern = this.filterText && new RegExp(`(${J(this.filterText)})`, "i"), this.filteredItems = this.getFilteredItems(), this.filteredItems.forEach((a) => {
-          a.filterTextMatchPattern = this.filterTextMatchPattern;
+          const h = !e(n, l);
+          n.itemHidden = h;
+          const [p, I] = n.ancestors;
+          (e(p, l) || e(I, l)) && (n.itemHidden = !1), h || n.ancestors.forEach((u) => u.itemHidden = !1);
+        }), this.filterTextMatchPattern = this.filterText && new RegExp(`(${J(this.filterText)})`, "i"), this.filteredItems = this.getFilteredItems(), this.filteredItems.forEach((n) => {
+          n.filterTextMatchPattern = this.filterTextMatchPattern;
         }), i && (this.open = this.filterText.trim().length > 0 && this.filteredItems.length > 0), s && this.calciteComboboxFilterChange.emit();
-      }, H.filter);
+      }, q.filter);
     })(), this._filterText = "", this.getSelectedItems = () => {
       if (!this.isMulti()) {
         const e = this.items.find(({ selected: t }) => t);
         return e ? [e] : [];
       }
-      return this.items.filter((e) => e.selected && (this.selectionMode !== "ancestors" || !V(e))).sort((e, t) => {
+      return this.items.filter((e) => e.selected && (this.selectionMode !== "ancestors" || !T(e))).sort((e, t) => {
         const i = this.selectedItems.indexOf(e), s = this.selectedItems.indexOf(t);
         return i > -1 && s > -1 ? i - s : s - i;
       });
-    }, this.guid = pe(), this.ignoreSelectedEventsFlag = !1, this.inputHeight = 0, this.internalValueChangeFlag = !1, this.mutationObserver = F("mutation", () => this.updateItems()), this.onLabelClick = () => {
+    }, this.groupItems = [], this.guid = pe(), this.ignoreSelectedEventsFlag = !1, this.inputHeight = 0, this.internalValueChangeFlag = !1, this.items = [], this.mutationObserver = E("mutation", () => this.updateItems()), this.onLabelClick = () => {
       this.setFocus();
-    }, this.openTransitionProp = "opacity", this.placement = ie, this.resizeObserver = F("resize", () => {
+    }, this.transitionProp = "opacity", this.placement = ie, this.resizeObserver = E("resize", () => {
       this.setMaxScrollerHeight(), this.refreshSelectionDisplay();
-    }), this.textInput = Q(), this._value = null, this.activeChipIndex = -1, this.activeDescendant = "", this.activeItemIndex = -1, this.compactSelectionDisplay = !1, this.groupItems = [], this.items = [], this.selectedHiddenChipsCount = 0, this.selectedVisibleChipsCount = 0, this.clearDisabled = !1, this.disabled = !1, this.filteredItems = [], this.maxItems = 0, this.messages = we(), this.open = !1, this.overlayPositioning = "absolute", this.placeholderIconFlipRtl = !1, this.readOnly = !1, this.required = !1, this.scale = "m", this.selectedItems = [], this.selectionDisplay = "all", this.selectionMode = "multiple", this.status = "idle", this.validity = {
+    }), this._selectedItems = [], this.textInput = Q(), this._value = null, this.activeChipIndex = -1, this.activeDescendant = "", this.activeItemIndex = -1, this.compactSelectionDisplay = !1, this.selectedHiddenChipsCount = 0, this.selectedVisibleChipsCount = 0, this.clearDisabled = !1, this.disabled = !1, this.filteredItems = [], this.maxItems = 0, this.messages = we(), this.open = !1, this.overlayPositioning = "absolute", this.placeholderIconFlipRtl = !1, this.readOnly = !1, this.required = !1, this.scale = "m", this.selectionDisplay = "all", this.selectionMode = "multiple", this.status = "idle", this.validity = {
       valid: !1,
       badInput: !1,
       customError: !1,
@@ -78,28 +74,23 @@ class Ae extends Y {
       tooShort: !1,
       typeMismatch: !1,
       valueMissing: !1
-    }, this.calciteComboboxBeforeClose = g({ cancelable: !1 }), this.calciteComboboxBeforeOpen = g({ cancelable: !1 }), this.calciteComboboxChange = g({ cancelable: !1 }), this.calciteComboboxChipClose = g({ cancelable: !1 }), this.calciteComboboxClose = g({ cancelable: !1 }), this.calciteComboboxFilterChange = g({ cancelable: !1 }), this.calciteComboboxOpen = g({ cancelable: !1 }), this.updateItems = w(() => {
-      this.items = this.getItems(), this.groupItems = this.getGroupItems(), this.data = this.getData(), this.groupData = this.getGroupData(), this.selectedItems = this.getSelectedItems(), this.filteredItems = this.getFilteredItems(), this.needsIcon = this.getNeedsIcon(), this.items.forEach((e) => {
-        e.selectionMode = this.selectionMode, e.scale = this.scale;
-      }), this.groupItems.forEach((e) => e.scale = this.scale), this.allowCustomValues || this.setMaxScrollerHeight(), this.groupItems.forEach((e, t, i) => {
-        t === 0 && (e.afterEmptyGroup = !1);
-        const s = i[t + 1];
-        s && (s.afterEmptyGroup = e.children.length === 0);
-      });
-    }, H.nextTick), this.listenOn(document, "click", this.documentClickHandler), this.listen("calciteComboboxItemChange", this.calciteComboboxItemChangeHandler), this.listen("calciteInternalComboboxItemChange", this.calciteInternalComboboxItemChangeHandler), this.listen("click", this.comboboxFocusHandler);
+    }, this.calciteComboboxBeforeClose = g({ cancelable: !1 }), this.calciteComboboxBeforeOpen = g({ cancelable: !1 }), this.calciteComboboxChange = g({ cancelable: !1 }), this.calciteComboboxChipClose = g({ cancelable: !1 }), this.calciteComboboxClose = g({ cancelable: !1 }), this.calciteComboboxFilterChange = g({ cancelable: !1 }), this.calciteComboboxOpen = g({ cancelable: !1 }), this.listenOn(document, "click", this.documentClickHandler), this.listen("calciteComboboxItemChange", this.calciteComboboxItemChangeHandler), this.listen("calciteInternalComboboxItemChange", this.calciteInternalComboboxItemChangeHandler), this.listen("click", this.comboboxFocusHandler);
   }
   static {
-    this.properties = { activeChipIndex: 16, activeDescendant: 16, activeItemIndex: 16, compactSelectionDisplay: 16, groupItems: 16, items: 16, needsIcon: 16, selectedHiddenChipsCount: 16, selectedVisibleChipsCount: 16, allowCustomValues: 7, clearDisabled: 7, disabled: 7, filterText: 3, filterProps: 0, filteredItems: 0, flipPlacements: 0, form: 3, label: 1, maxItems: 11, messageOverrides: 0, name: 3, open: 7, overlayPositioning: 3, placeholder: 1, placeholderIcon: 3, placeholderIconFlipRtl: 7, readOnly: 7, required: 7, scale: 3, selectedItems: 0, selectionDisplay: 3, selectionMode: 3, status: 3, validationIcon: [3, { converter: Z }], validationMessage: 1, validity: 0, value: 1 };
+    this.properties = { activeChipIndex: 16, activeDescendant: 16, activeItemIndex: 16, compactSelectionDisplay: 16, selectedHiddenChipsCount: 16, selectedVisibleChipsCount: 16, allowCustomValues: 7, clearDisabled: 7, disabled: 7, filterText: 3, filterProps: 0, filteredItems: 0, flipPlacements: 0, form: 3, label: 1, maxItems: 11, messageOverrides: 0, name: 3, open: 7, overlayPositioning: 3, placeholder: 1, placeholderIcon: 3, placeholderIconFlipRtl: 7, readOnly: 7, required: 7, scale: 3, selectedItems: 0, selectionDisplay: 3, selectionMode: 3, status: 3, validationIcon: [3, { converter: Z }], validationMessage: 1, validity: 0, value: 1 };
   }
   static {
-    this.styles = Ee;
+    this.styles = De;
+  }
+  emitComboboxChange() {
+    this.calciteComboboxChange.emit();
   }
   get effectiveFilterProps() {
     return this.filterProps ? this.filterProps.filter((e) => e !== "el") : ["description", "label", "metadata", "shortHeading", "textLabel"];
   }
   get showingInlineIcon() {
-    const { placeholderIcon: e, selectionMode: t, selectedItems: i, open: s } = this, l = i[0], o = l?.icon, n = x(t);
-    return !s && l ? !!o && n : !!e && (!l || n);
+    const { placeholderIcon: e, selectionMode: t, selectedItems: i, open: s } = this, l = i[0], a = l?.icon, o = x(t);
+    return !s && l ? !!a && o : !!e && (!l || o);
   }
   /** Text for the component's filter input field. */
   get filterText() {
@@ -109,6 +100,18 @@ class Ae extends Y {
     const t = this._filterText;
     e !== t && (this._filterText = e, this.filterTextChange(e));
   }
+  /**
+   * Specifies the component's selected items.
+   *
+   * @readonly
+   */
+  get selectedItems() {
+    return this._selectedItems;
+  }
+  set selectedItems(e) {
+    const t = this._selectedItems;
+    e !== t && (this._selectedItems = e, this.selectedItemsHandler());
+  }
   /** The component's value(s) from the selected `calcite-combobox-item`(s). */
   get value() {
     return this._value;
@@ -126,13 +129,13 @@ class Ae extends Y {
    * @returns Promise
    */
   async reposition(e = !1) {
-    const { floatingEl: t, referenceEl: i, placement: s, overlayPositioning: l, filteredFlipPlacements: o } = this;
+    const { floatingEl: t, referenceEl: i, placement: s, overlayPositioning: l, filteredFlipPlacements: a } = this;
     return se(this, {
       floatingEl: t,
       referenceEl: i,
       overlayPositioning: l,
       placement: s,
-      flipPlacements: o,
+      flipPlacements: a,
       type: "menu"
     }, e);
   }
@@ -141,19 +144,18 @@ class Ae extends Y {
     await xe(this), this.textInput.value?.focus(), this.activeChipIndex = -1, this.activeItemIndex = -1;
   }
   connectedCallback() {
-    super.connectedCallback(), fe(this), ae(this), this.internalValueChangeFlag = !0, this.value = this.getValue(), this.internalValueChangeFlag = !1, this.mutationObserver?.observe(this.el, { childList: !0, subtree: !0 }), this.setFilteredPlacements(), this.open && (this.openHandler(), M(this)), C(this);
+    super.connectedCallback(), fe(this), ne(this), this.internalValueChangeFlag = !0, this.value = this.getValue(), this.internalValueChangeFlag = !1, this.mutationObserver?.observe(this.el, { childList: !0, subtree: !0 }), this.setFilteredPlacements(), C(this);
   }
   async load() {
-    Ie(this), this.filterItems(this.filterText, !1, !1);
   }
   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("maxItems") && (this.hasUpdated || this.maxItems !== 0) && this.setMaxScrollerHeight(), e.has("overlayPositioning") && (this.hasUpdated || this.overlayPositioning !== "absolute") && this.reposition(!0), (e.has("selectionMode") || e.has("scale")) && this.updateItems(), e.has("flipPlacements") && this.flipPlacementsHandler(), e.has("selectedItems") && (this.hasUpdated || this.selectedItems?.length > 0) && this.selectedItemsHandler();
+    e.has("open") && (this.hasUpdated || this.open !== !1) && this.openHandler(), e.has("disabled") && (this.hasUpdated || this.disabled !== !1) && this.handleDisabledChange(this.disabled), e.has("maxItems") && (this.hasUpdated || this.maxItems !== 0) && this.setMaxScrollerHeight(), e.has("overlayPositioning") && (this.hasUpdated || this.overlayPositioning !== "absolute") && this.reposition(!0), (e.has("selectionMode") || e.has("scale")) && this.updateItems(), e.has("flipPlacements") && this.flipPlacementsHandler();
   }
   updated() {
-    this.el.offsetHeight !== this.inputHeight && (this.reposition(!0), this.inputHeight = this.el.offsetHeight), ue(this), this.hasUpdated || this.refreshSelectionDisplay();
+    this.el.offsetHeight !== this.inputHeight && (this.reposition(!0), this.inputHeight = this.el.offsetHeight), ue(this), this.refreshSelectionDisplay();
   }
   loaded() {
-    ce(this, this.getValue()), C(this), ve(this);
+    ce(this, this.getValue()), C(this), this.updateItems(), this.filterItems(this.filterText, !1, !1);
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this.mutationObserver?.disconnect(), this.resizeObserver?.disconnect(), be(this), re(this), le(this);
@@ -164,16 +166,15 @@ class Ae extends Y {
     this.updateActiveItemIndex(-1), this.filterItems(e, !0);
   }
   openHandler() {
-    M(this), !this.disabled && this.setMaxScrollerHeight();
+    ve(this), !this.disabled && this.setMaxScrollerHeight();
   }
   handleDisabledChange(e) {
     e || (this.open = !1);
   }
   valueHandler(e) {
-    if (!this.internalValueChangeFlag) {
-      const t = this.getItems();
-      Array.isArray(e) ? t.forEach((i) => i.selected = e.includes(i.value)) : e ? t.forEach((i) => i.selected = e === i.value) : t.forEach((i) => i.selected = !1), this.updateItems();
-    }
+    this.internalValueChangeFlag || (this.getItems().forEach((t) => {
+      t.selected = Array.isArray(e) ? e.includes(t.value) : e === t.value;
+    }), this.updateItems());
   }
   flipPlacementsHandler() {
     this.setFilteredPlacements(), this.reposition(!0);
@@ -191,7 +192,7 @@ class Ae extends Y {
     this.updateActiveItemIndex(i), this.toggleSelection(t, t.selected);
   }
   calciteInternalComboboxItemChangeHandler(e) {
-    e.stopPropagation(), this.updateItems();
+    e.stopPropagation(), this.hasUpdated && this.updateItems();
   }
   clearValue() {
     this.ignoreSelectedEventsFlag = !0, this.items.forEach((e) => e.selected = !1), this.ignoreSelectedEventsFlag = !1, this.selectedItems = [], this.emitComboboxChange(), this.open = !1, this.updateActiveItemIndex(-1), this.resetText(), this.filterItems(""), this.setFocus();
@@ -201,11 +202,11 @@ class Ae extends Y {
   }
   setFilteredPlacements() {
     const { el: e, flipPlacements: t } = this;
-    this.filteredFlipPlacements = t ? oe(t, e) : null;
+    this.filteredFlipPlacements = t ? ae(t, e) : null;
   }
   getValue() {
-    const e = this.selectedItems.map((t) => t?.value?.toString());
-    return e?.length ? e.length > 1 ? e : e[0] : "";
+    const e = this.selectedItems.map((t) => t.value?.toString());
+    return e.length ? e.length > 1 ? e : e[0] : "";
   }
   comboboxInViewport() {
     const e = this.el.getBoundingClientRect();
@@ -237,12 +238,12 @@ class Ae extends Y {
       case "Home":
         if (!this.open)
           return;
-        e.preventDefault(), this.updateActiveItemIndex(0), this.scrollToActiveItem(), this.comboboxInViewport() || this.el.scrollIntoView();
+        e.preventDefault(), this.updateActiveItemIndex(0), this.scrollToActiveOrSelectedItem(), this.comboboxInViewport() || this.el.scrollIntoView();
         break;
       case "End":
         if (!this.open)
           return;
-        e.preventDefault(), this.updateActiveItemIndex(this.filteredItems.length - 1), this.scrollToActiveItem(), this.comboboxInViewport() || this.el.scrollIntoView();
+        e.preventDefault(), this.updateActiveItemIndex(this.filteredItems.length - 1), this.scrollToActiveOrSelectedItem(), this.comboboxInViewport() || this.el.scrollIntoView();
         break;
       case "Escape":
         !this.clearDisabled && !this.open && this.clearValue(), this.open = !1, e.preventDefault();
@@ -263,16 +264,16 @@ class Ae extends Y {
     }
   }
   onBeforeOpen() {
-    this.scrollToActiveItem(), this.calciteComboboxBeforeOpen.emit();
+    this.scrollToActiveOrSelectedItem(), this.calciteComboboxBeforeOpen.emit();
   }
   onOpen() {
-    this.calciteComboboxOpen.emit();
+    this.scrollToActiveOrSelectedItem(!0), this.calciteComboboxOpen.emit();
   }
   onBeforeClose() {
     this.calciteComboboxBeforeClose.emit();
   }
   onClose() {
-    this.calciteComboboxClose.emit(), ne(this);
+    this.calciteComboboxClose.emit(), oe(this);
   }
   async setMaxScrollerHeight() {
     const { listContainerEl: e, open: t, referenceEl: i } = this;
@@ -295,7 +296,7 @@ class Ae extends Y {
       this.open = !1, e.preventDefault();
       return;
     }
-    if (t.some((i) => i.classList?.contains(W.button))) {
+    if (t.some((i) => i.classList?.contains(U.button))) {
       this.clearValue(), e.preventDefault();
       return;
     }
@@ -306,10 +307,10 @@ class Ae extends Y {
     this.updateActiveItemIndex(t);
   }
   hideChip(e) {
-    e.classList.add(r.chipInvisible);
+    e.classList.add(c.chipInvisible);
   }
   showChip(e) {
-    e.classList.remove(r.chipInvisible);
+    e.classList.remove(c.chipInvisible);
   }
   refreshChipDisplay({ chipEls: e, availableHorizontalChipElSpace: t, chipContainerElGap: i }) {
     e.forEach((s) => {
@@ -326,17 +327,17 @@ class Ae extends Y {
     });
   }
   async refreshSelectionDisplay() {
-    if (await Ce(this), x(this.selectionMode) || !this.textInput.value)
+    if (await Ie(this), x(this.selectionMode) || !this.textInput.value)
       return;
-    const { allSelectedIndicatorChipEl: e, chipContainerEl: t, selectionDisplay: i, placeholder: s, selectedIndicatorChipEl: l, textInput: { value: o } } = this, n = parseInt(getComputedStyle(t).gap.replace("px", "")), a = v(t), { fontSize: c, fontFamily: p } = getComputedStyle(o), u = (te(s, `${c} ${p}`) || parseInt(K)) + n, y = v(e), E = v(l), _ = Math.max(y, E);
+    const { allSelectedIndicatorChipEl: e, chipContainerEl: t, selectionDisplay: i, placeholder: s, selectedIndicatorChipEl: l, textInput: { value: a } } = this, o = parseInt(getComputedStyle(t).gap.replace("px", "")), n = v(t), { fontSize: h, fontFamily: p } = getComputedStyle(a), u = (te(s, `${h} ${p}`) || parseInt(K)) + o, w = v(e), D = v(l), G = Math.max(w, D);
     if (this.setCompactSelectionDisplay({
-      chipContainerElGap: n,
-      chipContainerElWidth: a,
+      chipContainerElGap: o,
+      chipContainerElWidth: n,
       inputWidth: u,
-      largestSelectedIndicatorChipWidth: _
+      largestSelectedIndicatorChipWidth: G
     }), i === "fit") {
-      const A = Array.from(this.el.shadowRoot.querySelectorAll("calcite-chip")).filter((N) => N.closable), q = Math.round(a - ((this.selectedHiddenChipsCount > 0 ? E : 0) + n + u + n));
-      this.refreshChipDisplay({ availableHorizontalChipElSpace: q, chipContainerElGap: n, chipEls: A }), this.setVisibleAndHiddenChips(A);
+      const A = Array.from(this.el.shadowRoot.querySelectorAll("calcite-chip")).filter((_) => _.closable), W = Math.round(n - ((this.selectedHiddenChipsCount > 0 ? D : 0) + o + u + o));
+      this.refreshChipDisplay({ availableHorizontalChipElSpace: W, chipContainerElGap: o, chipEls: A }), this.setVisibleAndHiddenChips(A);
     }
   }
   setFloatingEl(e) {
@@ -364,25 +365,25 @@ class Ae extends Y {
   setVisibleAndHiddenChips(e) {
     let t = 0;
     e.forEach((s) => {
-      s.selected && !s.classList.contains(r.chipInvisible) && t++;
+      s.selected && !s.classList.contains(c.chipInvisible) && t++;
     }), t !== this.selectedVisibleChipsCount && (this.selectedVisibleChipsCount = t);
     const i = this.getSelectedItems().length - t;
     i !== this.selectedHiddenChipsCount && (this.selectedHiddenChipsCount = i);
   }
   getMaxScrollerHeight() {
-    const t = [...this.groupItems, ...this.getItems(!0)].filter((o) => !o.hidden), { maxItems: i } = this;
+    const t = [...this.groupItems, ...this.getItems(!0)].filter((a) => !F(a)), { maxItems: i } = this;
     let s = 0, l = 0;
-    return t.length >= i && t.forEach((o) => {
+    return t.length >= i && t.forEach((a) => {
       if (s < i) {
-        const n = this.calculateScrollerHeight(o);
-        l += n, s += 1;
+        const o = this.calculateScrollerHeight(a);
+        l += o, s += 1;
       }
     }), l;
   }
   calculateScrollerHeight(e) {
     if (!e)
       return 0;
-    const t = e.getBoundingClientRect().height, i = `:scope > ${P}, :scope > ${O}`, s = Array.from(e.querySelectorAll(i)).reduce((l, o) => l + o.getBoundingClientRect().height, 0);
+    const t = e.getBoundingClientRect().height, i = `:scope > ${V}, :scope > ${O}`, s = Array.from(e.querySelectorAll(i)).reduce((l, a) => l + a.getBoundingClientRect().height, 0);
     return t - s;
   }
   inputHandler(e) {
@@ -398,15 +399,27 @@ class Ae extends Y {
   updateAncestors(e) {
     if (this.selectionMode !== "ancestors")
       return;
-    const t = z(e), i = Se(e);
+    const t = M(e), i = ye(e);
     e.selected ? t.forEach((s) => {
       s.selected = !0;
     }) : (i.forEach((s) => s.selected = !1), [...t].forEach((s) => {
-      V(s) || (s.selected = !1);
+      T(s) || (s.selected = !1);
     }));
   }
   getFilteredItems() {
-    return this.filterText === "" ? this.items : this.items.filter((e) => !e.hidden);
+    return this.filterText === "" ? this.items : this.items.filter((e) => !F(e));
+  }
+  updateItems() {
+    this.items = this.getItems(), this.groupItems = this.getGroupItems(), this.data = this.getData(), this.groupData = this.getGroupData(), this.updateItemProps(), this.selectedItems = this.getSelectedItems(), this.filteredItems = this.getFilteredItems();
+  }
+  updateItemProps() {
+    this.getItems(!0).forEach((e) => {
+      e.selectionMode = this.selectionMode, e.scale = this.scale;
+    }), this.groupItems.forEach((e) => e.scale = this.scale), this.allowCustomValues || this.setMaxScrollerHeight(), this.groupItems.forEach((e, t, i) => {
+      t === 0 && (e.afterEmptyGroup = !1);
+      const s = i[t + 1];
+      s && (s.afterEmptyGroup = e.children.length === 0);
+    });
   }
   getData() {
     return this.items.map((e) => ({
@@ -426,14 +439,11 @@ class Ae extends Y {
       el: e
     }));
   }
-  getNeedsIcon() {
-    return x(this.selectionMode) && this.items.some((e) => e.icon);
-  }
   resetText() {
     this.textInput.value && (this.textInput.value.value = ""), this.filterText = "";
   }
   getItems(e = !1) {
-    return Array.from(this.el.querySelectorAll(P)).filter((i) => e || !i.disabled);
+    return Array.from(this.el.querySelectorAll(V)).filter((i) => e || !i.disabled);
   }
   getGroupItems() {
     return Array.from(this.el.querySelectorAll(O));
@@ -443,12 +453,11 @@ class Ae extends Y {
     if (i)
       this.toggleSelection(i, !0);
     else {
-      this.isMulti() || this.toggleSelection(this.selectedItems[this.selectedItems.length - 1], !1);
       const s = document.createElement(
         // TODO: [MIGRATION] If this is dynamically creating a web component, please read the docs: https://qawebgis.esri.com/arcgis-components/?path=/docs/lumina-jsx--docs#rendering-jsx-outside-the-component
         "calcite-combobox-item"
       );
-      s.value = e, s.heading = e, s.selected = !0, this.el.prepend(s), this.resetText(), t && this.setFocus(), this.updateItems(), this.filterItems(""), this.open = !0, this.emitComboboxChange();
+      s.value = e, s.heading = e, this.el.prepend(s), this.updateItems(), this.toggleSelection(s, !0), this.open = !0, t && this.setFocus();
     }
   }
   removeActiveChip() {
@@ -467,24 +476,21 @@ class Ae extends Y {
   }
   focusChip() {
     const e = this.selectedItems[this.activeChipIndex]?.guid;
-    (e ? this.referenceEl.querySelector(`#${U}${e}`) : null)?.setFocus();
+    (e ? this.referenceEl.querySelector(`#${L}${e}`) : null)?.setFocus();
   }
-  scrollToActiveItem() {
-    const e = this.filteredItems[this.activeItemIndex];
-    if (!e)
-      return;
-    const t = this.calculateScrollerHeight(e), { offsetHeight: i, scrollTop: s } = this.listContainerEl;
-    i + s < e.offsetTop + t ? this.listContainerEl.scrollTop = e.offsetTop - i + t : e.offsetTop < s && (this.listContainerEl.scrollTop = e.offsetTop);
+  scrollToActiveOrSelectedItem(e = !1) {
+    const t = e && this.selectedItems && this.selectedItems.length ? this.selectedItems[0] : this.filteredItems[this.activeItemIndex];
+    t && t.scrollIntoView({ block: "nearest" });
   }
   shiftActiveItemIndex(e) {
     const { length: t } = this.filteredItems, i = (this.activeItemIndex + t + e) % t;
-    this.updateActiveItemIndex(i), this.scrollToActiveItem();
+    this.updateActiveItemIndex(i), this.scrollToActiveOrSelectedItem();
   }
   updateActiveItemIndex(e) {
     this.activeItemIndex = e;
     let t = null;
     this.filteredItems.forEach((i, s) => {
-      s === e ? (i.active = !0, t = `${B}${i.guid}`) : i.active = !1;
+      s === e ? (i.active = !0, t = `${z}${i.guid}`) : i.active = !1;
     }), this.activeDescendant = t, this.activeItemIndex > -1 && (this.activeChipIndex = -1);
   }
   isAllSelected() {
@@ -500,108 +506,108 @@ class Ae extends Y {
   // #region Rendering
   renderChips() {
     const { activeChipIndex: e, readOnly: t, scale: i, selectionMode: s, messages: l } = this;
-    return this.selectedItems.map((o, n) => {
-      const a = {
+    return this.selectedItems.map((a, o) => {
+      const n = {
         chip: !0,
-        "chip--active": e === n
-      }, c = [...z(o)].reverse(), p = $(o), I = [...c, o].map((y) => $(y)), u = s !== "ancestors" ? p : I.join(" / ");
-      return f(p, d`<calcite-chip .appearance=${t ? "outline" : "solid"} class=${h(a)} .closable=${!t} data-test-id=${`chip-${n}`} .icon=${o.icon} .iconFlipRtl=${o.iconFlipRtl} id=${(o.guid ? `${U}${o.guid}` : null) ?? m} .label=${u} .messageOverrides=${{ dismissLabel: l.removeTag }} @focusin=${() => this.activeChipIndex = n} @calciteChipClose=${() => this.calciteChipCloseHandler(o)} .scale=${i} .selected=${o.selected} .tabIndex=${e === n ? 0 : -1} title=${u ?? m} .value=${o.value}>${u}</calcite-chip>`);
+        "chip--active": e === o
+      }, h = [...M(a)].reverse(), p = $(a), I = [...h, a].map((w) => $(w)), u = s !== "ancestors" ? p : I.join(" / ");
+      return f(p, d`<calcite-chip .appearance=${t ? "outline" : "solid"} class=${r(n)} .closable=${!t} data-test-id=${`chip-${o}`} .icon=${a.icon} .iconFlipRtl=${a.iconFlipRtl} id=${(a.guid ? `${L}${a.guid}` : null) ?? m} .label=${u} .messageOverrides=${{ dismissLabel: l.removeTag }} @focusin=${() => this.activeChipIndex = o} @calciteChipClose=${() => this.calciteChipCloseHandler(a)} .scale=${i} .selected=${a.selected} .tabIndex=${e === o ? 0 : -1} title=${u ?? m} .value=${a.value}>${u}</calcite-chip>`);
     });
   }
   renderAllSelectedIndicatorChip() {
     const { compactSelectionDisplay: e, scale: t, selectedVisibleChipsCount: i, setAllSelectedIndicatorChipEl: s } = this, l = this.messages.allSelected;
-    return d`<calcite-chip class=${h({
+    return d`<calcite-chip class=${r({
       chip: !0,
-      [r.chipInvisible]: !(this.isAllSelected() && !i && !e)
+      [c.chipInvisible]: !(this.isAllSelected() && !i && !e)
     })} .label=${l} .scale=${t} title=${l ?? m} value ${b(s)}>${l}</calcite-chip>`;
   }
   renderAllSelectedIndicatorChipCompact() {
     const { compactSelectionDisplay: e, scale: t, selectedVisibleChipsCount: i } = this, s = this.messages.all || "All";
-    return d`<calcite-chip class=${h({
+    return d`<calcite-chip class=${r({
       chip: !0,
-      [r.chipInvisible]: !(this.isAllSelected() && !i && e)
+      [c.chipInvisible]: !(this.isAllSelected() && !i && e)
     })} .label=${s} .scale=${t} title=${s} value>${s}</calcite-chip>`;
   }
   renderSelectedIndicatorChip() {
-    const { compactSelectionDisplay: e, selectionDisplay: t, getSelectedItems: i, scale: s, selectedHiddenChipsCount: l, selectedVisibleChipsCount: o, setSelectedIndicatorChipEl: n } = this;
-    let a, c;
+    const { compactSelectionDisplay: e, selectionDisplay: t, getSelectedItems: i, scale: s, selectedHiddenChipsCount: l, selectedVisibleChipsCount: a, setSelectedIndicatorChipEl: o } = this;
+    let n, h;
     if (e)
-      a = !0;
+      n = !0;
     else if (t === "single") {
       const p = i().length;
-      this.isAllSelected() ? a = !0 : p > 0 ? a = !1 : a = !0, c = `${p} ${this.messages.selected}`;
-    } else t === "fit" && (a = !!(this.isAllSelected() && o === 0 || l === 0), c = o > 0 ? `+${l}` : `${l} ${this.messages.selected}`);
-    return d`<calcite-chip class=${h({
+      this.isAllSelected() ? n = !0 : p > 0 ? n = !1 : n = !0, h = `${p} ${this.messages.selected}`;
+    } else t === "fit" && (n = !!(this.isAllSelected() && a === 0 || l === 0), h = a > 0 ? `+${l}` : `${l} ${this.messages.selected}`);
+    return d`<calcite-chip class=${r({
       chip: !0,
-      [r.chipInvisible]: a
-    })} .label=${c} .scale=${s} title=${c ?? m} value ${b(n)}>${c}</calcite-chip>`;
+      [c.chipInvisible]: n
+    })} .label=${h} .scale=${s} title=${h ?? m} value ${b(o)}>${h}</calcite-chip>`;
   }
   renderSelectedIndicatorChipCompact() {
     const { compactSelectionDisplay: e, selectionDisplay: t, getSelectedItems: i, scale: s, selectedHiddenChipsCount: l } = this;
-    let o, n;
+    let a, o;
     if (e) {
-      const a = i().length;
-      this.isAllSelected() ? o = !0 : t === "fit" ? (o = !(l > 0), n = `${l || 0}`) : t === "single" && (o = !(a > 0), n = `${a}`);
+      const n = i().length;
+      this.isAllSelected() ? a = !0 : t === "fit" ? (a = !(l > 0), o = `${l || 0}`) : t === "single" && (a = !(n > 0), o = `${n}`);
     } else
-      o = !0;
-    return d`<calcite-chip class=${h({
+      a = !0;
+    return d`<calcite-chip class=${r({
       chip: !0,
-      [r.chipInvisible]: o
-    })} .label=${n} .scale=${s} title=${n ?? m} value>${n}</calcite-chip>`;
+      [c.chipInvisible]: a
+    })} .label=${o} .scale=${s} title=${o ?? m} value>${o}</calcite-chip>`;
   }
   renderInput() {
-    const { guid: e, disabled: t, placeholder: i, selectionMode: s, selectedItems: l, open: o } = this, n = x(s), a = l[0], c = !o && n && !!a && !this.filterText;
-    return d`<span class=${h({
+    const { guid: e, disabled: t, placeholder: i, selectionMode: s, selectedItems: l, open: a } = this, o = x(s), n = l[0], h = !a && o && !!n && !this.filterText;
+    return d`<span class=${r({
       "input-wrap": !0,
-      "input-wrap--single": n
-    })}>${c && f("label", d`<span class=${h({
+      "input-wrap--single": o
+    })}>${h && f("label", d`<span class=${r({
       label: !0,
-      "label--icon": !!a?.icon
-    })}>${$(a)}</span>`) || ""}${f("input", d`<input aria-activedescendant=${this.activeDescendant ?? m} aria-controls=${`${S}${e}`} aria-errormessage=${L.validationMessage} aria-owns=${`${S}${e}`} aria-autocomplete=list .ariaExpanded=${o} aria-haspopup=listbox .ariaInvalid=${this.status === "invalid"} .ariaLabel=${ge(this)} class=${h({
-      [r.input]: !0,
+      "label--icon": !!n?.icon
+    })}>${$(n)}</span>`) || ""}${f("input", d`<input aria-activedescendant=${this.activeDescendant ?? m} aria-controls=${`${y}${e}`} aria-errormessage=${P.validationMessage} aria-owns=${`${y}${e}`} aria-autocomplete=list .ariaExpanded=${a} aria-haspopup=listbox .ariaInvalid=${this.status === "invalid"} .ariaLabel=${ge(this)} class=${r({
+      [c.input]: !0,
       "input--single": !0,
-      [r.inputHidden]: c,
+      [c.inputHidden]: h,
       "input--icon": this.showingInlineIcon && !!this.placeholderIcon
-    })} data-test-id=input .disabled=${t} .id=${`${G}${e}`} @focus=${this.comboboxFocusHandler} @input=${this.inputHandler} placeholder=${i ?? m} .readOnly=${this.readOnly} role=combobox .tabIndex=${this.activeChipIndex === -1 ? 0 : -1} type=text .value=${X(this.filterText ?? "")} ${b(this.textInput)}>`)}</span>`;
+    })} data-test-id=input .disabled=${t} .id=${`${B}${e}`} @focus=${this.comboboxFocusHandler} @input=${this.inputHandler} placeholder=${i ?? m} .readOnly=${this.readOnly} role=combobox .tabIndex=${this.activeChipIndex === -1 ? 0 : -1} type=text .value=${N(this.filterText ?? "")} ${b(this.textInput)}>`)}</span>`;
   }
   renderListBoxOptions() {
-    return this.filteredItems.map((e) => d`<li .ariaSelected=${e.selected} id=${(e.guid ? `${B}${e.guid}` : null) ?? m} role=option tabindex=-1>${e.heading || e.textLabel}</li>`);
+    return this.filteredItems.map((e) => d`<li .ariaLabel=${e.label} .ariaSelected=${e.selected} id=${(e.guid ? `${z}${e.guid}` : null) ?? m} role=option tabindex=-1>${e.heading || e.textLabel}</li>`);
   }
   renderFloatingUIContainer() {
     const { setFloatingEl: e, setContainerEl: t, open: i } = this, s = {
-      [r.listContainer]: !0,
-      [T.animation]: !0,
-      [T.animationActive]: i
+      [c.listContainer]: !0,
+      [H.animation]: !0,
+      [H.animationActive]: i
     };
-    return d`<div aria-hidden=true class=${h(r.floatingUIContainer)} ${b(e)}><div class=${h(s)} ${b(t)}><ul class=${h({ list: !0, "list--hide": !i })}><slot></slot></ul></div></div>`;
+    return d`<div aria-hidden=true class=${r(c.floatingUIContainer)} ${b(e)}><div class=${r(s)} ${b(t)}><ul class=${r({ list: !0, "list--hide": !i })}><slot></slot></ul></div></div>`;
   }
   renderSelectedOrPlaceholderIcon() {
-    const { open: e, placeholderIcon: t, placeholderIconFlipRtl: i, selectedItems: s } = this, l = s[0], o = l?.icon, n = t && (e || !l);
-    return this.showingInlineIcon && f("selected-placeholder-icon", d`<span class="icon-start"><calcite-icon class=${h({
-      [r.selectedIcon]: !n,
-      [r.placeholderIcon]: n
-    })} .flipRtl=${n ? i : l.iconFlipRtl} .icon=${n ? t : o} .scale=${k(this.scale)}></calcite-icon></span>`) || "";
+    const { open: e, placeholderIcon: t, placeholderIconFlipRtl: i, selectedItems: s } = this, l = s[0], a = l?.icon, o = t && (e || !l);
+    return this.showingInlineIcon && f("selected-placeholder-icon", d`<span class="icon-start"><calcite-icon class=${r({
+      [c.selectedIcon]: !o,
+      [c.placeholderIcon]: o
+    })} .flipRtl=${o ? i : l.iconFlipRtl} .icon=${o ? t : a} .scale=${S(this.scale)}></calcite-icon></span>`) || "";
   }
   renderChevronIcon() {
     const { open: e } = this;
-    return f("chevron", d`<span class="icon-end"><calcite-icon class=${h(r.icon)} .icon=${e ? "chevron-up" : "chevron-down"} .scale=${k(this.scale)}></calcite-icon></span>`);
+    return f("chevron", d`<span class="icon-end"><calcite-icon class=${r(c.icon)} .icon=${e ? "chevron-up" : "chevron-down"} .scale=${S(this.scale)}></calcite-icon></span>`);
   }
   render() {
-    const { selectionDisplay: e, guid: t, label: i, open: s, readOnly: l } = this, o = x(this.selectionMode), n = e === "all", a = e === "single", c = !o && e === "fit", p = !this.clearDisabled && this.value?.length > 0;
-    return me({ disabled: this.disabled, children: d`<div aria-live=polite class=${h({
+    const { selectionDisplay: e, guid: t, label: i, open: s, readOnly: l } = this, a = x(this.selectionMode), o = e === "all", n = e === "single", h = !a && e === "fit", p = !this.clearDisabled && this.value?.length > 0;
+    return me({ disabled: this.disabled, children: d`<div aria-live=polite class=${r({
       wrapper: !0,
-      "wrapper--single": o || !this.selectedItems.length,
+      "wrapper--single": a || !this.selectedItems.length,
       "wrapper--active": s
-    })} @click=${this.clickHandler} @keydown=${this.keyDownHandler} ${b(this.setReferenceEl)}>${this.renderSelectedOrPlaceholderIcon()}${f("grid", d`<div class=${h({
+    })} @click=${this.clickHandler} @keydown=${this.keyDownHandler} ${b(this.setReferenceEl)}>${this.renderSelectedOrPlaceholderIcon()}${f("grid", d`<div class=${r({
       "grid-input": !0,
-      [r.selectionDisplayFit]: c,
-      [r.selectionDisplaySingle]: a
-    })} ${b(this.setChipContainerEl)}>${!o && !a && this.renderChips() || ""}${!o && !n && [
+      [c.selectionDisplayFit]: h,
+      [c.selectionDisplaySingle]: n
+    })} ${b(this.setChipContainerEl)}>${!a && !n && this.renderChips() || ""}${!a && !o && [
       this.renderSelectedIndicatorChip(),
       this.renderSelectedIndicatorChipCompact(),
       this.renderAllSelectedIndicatorChip(),
       this.renderAllSelectedIndicatorChipCompact()
-    ] || ""}<label class="screen-readers-only" .htmlFor=${`${G}${t}`} .id=${`${R}${t}`}>${i}</label>${this.renderInput()}</div>`)}${!l && p ? f("close-button", De({ disabled: this.disabled, label: this.messages.clear, scale: this.scale })) : null}${!l && this.renderChevronIcon() || ""}</div><ul aria-labelledby=${`${R}${t}`} aria-multiselectable=true class="screen-readers-only" .id=${`${S}${t}`} role=listbox tabindex=-1>${this.renderListBoxOptions()}</ul>${this.renderFloatingUIContainer()}${de({ component: this })}${this.validationMessage && this.status === "invalid" ? ye({ icon: this.validationIcon, id: L.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
+    ] || ""}<label class=${r(c.screenReadersOnly)} .htmlFor=${`${B}${t}`} .id=${`${R}${t}`}>${i}</label>${this.renderInput()}</div>`)}${!l && p ? f("close-button", ke({ disabled: this.disabled, label: this.messages.clear, scale: this.scale })) : null}${!l && this.renderChevronIcon() || ""}</div><ul aria-labelledby=${`${R}${t}`} aria-multiselectable=true class=${r(c.screenReadersOnly)} .id=${`${y}${t}`} role=listbox tabindex=-1>${this.renderListBoxOptions()}</ul>${this.renderFloatingUIContainer()}${de({ component: this })}${this.validationMessage && this.status === "invalid" ? $e({ icon: this.validationIcon, id: P.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
   }
 }
 j("calcite-combobox", Ae);