@esri/calcite-components 5.1.0-next.2 → 5.1.0-next.20

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

@@ -4,7 +4,8 @@ import { repeat } from "lit/directives/repeat.js";
 import { css, nothing, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { w as whenAnimationDone, b as slotChangeGetAssignedElements, f as focusElementInGroup, g as getElementDir } from "../../chunks/dom.js";
+import { useDirection } from "@arcgis/lumina/controllers";
+import { w as whenAnimationDone, a as slotChangeGetAssignedElements, f as focusElementInGroup } from "../../chunks/dom.js";
 import { g as guid } from "../../chunks/guid.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { b as breakpoints } from "../../chunks/responsive.js";
@@ -63,6 +64,7 @@ class Carousel extends LitElement {
     };
     this.containerRef = createRef();
     this.containerId = IDS.host(guid());
+    this.direction = useDirection();
     this.itemContainerRef = createRef();
     this.resizeHandler = ({ contentRect: { width } }) => {
       this.setMaxItemsToBreakpoint(width);
@@ -77,7 +79,7 @@ class Carousel extends LitElement {
       if (notSuspended) {
         if (time <= 0.01) {
           time = 1;
-          this.direction = "forward";
+          this.itemDirection = "forward";
           this.nextItem(false);
         } else {
           time = time - 0.01;
@@ -90,7 +92,7 @@ class Carousel extends LitElement {
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
-    this.direction = "standby";
+    this.itemDirection = "standby";
     this.hasMultiple = false;
     this.items = [];
     this.maxItems = centerItemsByBreakpoint.xxsmall;
@@ -113,7 +115,7 @@ class Carousel extends LitElement {
     this.calciteCarouselStop = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { direction: [16, {}, { state: true }], hasMultiple: [16, {}, { state: true }], items: [16, {}, { state: true }], maxItems: [16, {}, { state: true }], playing: [16, {}, { state: true }], selectedIndex: [16, {}, { state: true }], slideDurationRemaining: [16, {}, { state: true }], suspendedDueToFocus: [16, {}, { state: true }], suspendedDueToHover: [16, {}, { state: true }], suspendedSlideDurationRemaining: [16, {}, { state: true }], userPreventsSuspend: [16, {}, { state: true }], arrowType: [3, {}, { reflect: true }], autoplay: [3, {}, { reflect: true }], autoplayDuration: [11, {}, { type: Number, reflect: true }], controlOverlay: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], label: 1, messageOverrides: [0, {}, { attribute: false }], paginationDisabled: [5, {}, { type: Boolean }], paused: [5, {}, { type: Boolean }], selectedItem: [0, {}, { attribute: false }] };
+    this.properties = { itemDirection: [16, {}, { state: true }], hasMultiple: [16, {}, { state: true }], items: [16, {}, { state: true }], maxItems: [16, {}, { state: true }], playing: [16, {}, { state: true }], selectedIndex: [16, {}, { state: true }], slideDurationRemaining: [16, {}, { state: true }], suspendedDueToFocus: [16, {}, { state: true }], suspendedDueToHover: [16, {}, { state: true }], suspendedSlideDurationRemaining: [16, {}, { state: true }], userPreventsSuspend: [16, {}, { state: true }], arrowType: [3, {}, { reflect: true }], autoplay: [3, {}, { reflect: true }], autoplayDuration: [11, {}, { type: Number, reflect: true }], controlOverlay: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], label: 1, messageOverrides: [0, {}, { attribute: false }], paginationDisabled: [5, {}, { type: Boolean }], paused: [5, {}, { type: Boolean }], selectedItem: [0, {}, { attribute: false }] };
   }
   static {
     this.styles = styles;
@@ -151,8 +153,8 @@ class Carousel extends LitElement {
     if (changes.has("autoplay") && this.hasUpdated) {
       this.autoplayWatcher(this.autoplay);
     }
-    if (changes.has("direction") && (this.hasUpdated || this.direction !== "standby")) {
-      this.directionWatcher(this.direction);
+    if (changes.has("itemDirection") && (this.hasUpdated || this.itemDirection !== "standby")) {
+      this.itemDirectionWatcher(this.itemDirection);
     }
     if (changes.has("playing") && (this.hasUpdated || this.playing !== false)) {
       this.paused = !this.playing;
@@ -171,12 +173,12 @@ class Carousel extends LitElement {
       this.handlePause(false);
     }
   }
-  async directionWatcher(direction) {
-    if (direction === "standby" || !this.itemContainerRef.value) {
+  async itemDirectionWatcher(itemDirection) {
+    if (itemDirection === "standby" || !this.itemContainerRef.value) {
       return;
     }
-    await whenAnimationDone(this.itemContainerRef.value, direction === "forward" ? "item-forward" : "item-backward");
-    this.direction = "standby";
+    await whenAnimationDone(this.itemContainerRef.value, itemDirection === "forward" ? "item-forward" : "item-backward");
+    this.itemDirection = "standby";
   }
   suspendWatcher() {
     if (!this.suspendedDueToFocus && !this.suspendedDueToHover) {
@@ -271,15 +273,15 @@ class Carousel extends LitElement {
     }
   }
   handleArrowClick(event) {
-    const direction = event.target.dataset.direction;
+    const direction = event.target.dataset.itemDirection;
     if (this.playing) {
       this.handlePause(true);
     }
     if (direction === "next") {
-      this.direction = "forward";
+      this.itemDirection = "forward";
       this.nextItem(true);
     } else if (direction === "previous") {
-      this.direction = "backward";
+      this.itemDirection = "backward";
       this.previousItem();
     }
   }
@@ -292,7 +294,7 @@ class Carousel extends LitElement {
     if (this.playing) {
       this.handlePause(true);
     }
-    this.direction = requestedPosition > this.selectedIndex ? "forward" : "backward";
+    this.itemDirection = requestedPosition > this.selectedIndex ? "forward" : "backward";
     this.setSelectedItem(requestedPosition, true);
   }
   toggleRotation() {
@@ -361,7 +363,7 @@ class Carousel extends LitElement {
         if (!this.hasMultiple) {
           return;
         }
-        this.direction = "forward";
+        this.itemDirection = "forward";
         this.nextItem(true);
         break;
       case "ArrowLeft":
@@ -369,7 +371,7 @@ class Carousel extends LitElement {
         if (!this.hasMultiple) {
           return;
         }
-        this.direction = "backward";
+        this.itemDirection = "backward";
         this.previousItem();
         break;
       case "Home":
@@ -377,7 +379,7 @@ class Carousel extends LitElement {
         if (this.selectedIndex === 0) {
           return;
         }
-        this.direction = "backward";
+        this.itemDirection = "backward";
         this.setSelectedItem(0, true);
         break;
       case "End":
@@ -385,7 +387,7 @@ class Carousel extends LitElement {
         if (this.selectedIndex === lastItem) {
           return;
         }
-        this.direction = "forward";
+        this.itemDirection = "forward";
         this.setSelectedItem(lastItem, true);
         break;
     }
@@ -462,25 +464,25 @@ class Carousel extends LitElement {
     };
     return html`<div aria-live=off class=${safeClassMap(CSS.paginationAriaLive)} role=status>${messages.paginationStatus.replace("{current}", numberStringFormatter.localize(`${selectedIndex + 1}`)).replace("{total}", numberStringFormatter.localize(`${items.length}`))}</div>`;
   }
-  renderArrow(direction) {
-    const isPrev = direction === "previous";
-    const dir = getElementDir(this.el);
+  renderArrow(itemDirection) {
+    const isPrev = itemDirection === "previous";
+    const dir = this.direction;
     const scale = this.arrowType === "edge" ? "m" : "s";
     const css2 = isPrev ? CSS.pagePrevious : CSS.pageNext;
     const title = isPrev ? this.messages.previous : this.messages.next;
     const icon = isPrev ? ICONS.chevronLeft : ICONS.chevronRight;
-    return html`<button aria-controls=${this.containerId ?? nothing} class=${safeClassMap({ [CSS.paginationItem]: true, [css2]: true })} data-direction=${direction ?? nothing} @click=${this.handleArrowClick} title=${title ?? nothing}><calcite-icon .flipRtl=${dir === "rtl"} .icon=${icon} .scale=${scale}></calcite-icon></button>`;
+    return html`<button aria-controls=${this.containerId ?? nothing} class=${safeClassMap({ [CSS.paginationItem]: true, [css2]: true })} data-item-direction=${itemDirection ?? nothing} @click=${this.handleArrowClick} title=${title ?? nothing}><calcite-icon .flipRtl=${dir === "rtl"} .icon=${icon} .scale=${scale}></calcite-icon></button>`;
   }
   render() {
-    const { direction } = this;
+    const { itemDirection } = this;
     return this.interactiveContainer({ disabled: this.disabled, children: html`<div .ariaLabel=${this.label} .ariaLive=${this.playing ? "off" : "polite"} .ariaRoleDescription=${this.messages.carousel} class=${safeClassMap({
       [CSS.container]: true,
       [CSS.containerOverlaid]: this.controlOverlay,
       [CSS.containerEdged]: this.arrowType === "edge"
     })} @focusin=${this.handleFocusIn} @focusout=${this.handleFocusOut} @keydown=${this.containerKeyDownHandler} @mouseenter=${this.handleMouseIn} @mouseleave=${this.handleMouseOut} role=group tabindex=0 ${ref(this.containerRef)}><section class=${safeClassMap({
       [CSS.itemContainer]: true,
-      [CSS.itemContainerForward]: direction === "forward",
-      [CSS.itemContainerBackward]: direction === "backward"
+      [CSS.itemContainerForward]: itemDirection === "forward",
+      [CSS.itemContainerBackward]: itemDirection === "backward"
     })} id=${this.containerId ?? nothing} ${ref(this.itemContainerRef)}><slot @slotchange=${this.handleSlotChange}></slot></section>${this.renderPaginationArea()}${this.arrowType === "edge" && this.hasMultiple && this.renderArrow("previous") || ""}${this.arrowType === "edge" && this.hasMultiple && this.renderArrow("next") || ""}</div>` });
   }
 }

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

@@ -1,7 +1,7 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { MutableValidityState } from "../../utils/form.js";
 import type { Scale, Status } from "../interfaces.js";
+import type { MutableValidityState } from "../../controllers/useForm.js";
 
 /**
  * @cssproperty [--calcite-checkbox-size] - Specifies the component's height and width.

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

@@ -3,14 +3,14 @@ import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { css, svg, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap, nothing } from "@arcgis/lumina";
-import { g as getElementDir } from "../../chunks/dom.js";
-import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from "../../chunks/form.js";
+import { useDirection } from "@arcgis/lumina/controllers";
 import { i as isActivationKey } from "../../chunks/key.js";
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
+import { u as useForm } from "../../chunks/useForm.js";
 const CSS = {
   toggle: "toggle",
   check: "check-svg"
@@ -20,6 +20,8 @@ class Checkbox extends LitElement {
   constructor() {
     super();
     this.checkedPath = "M5.5 12L2 8.689l.637-.636L5.5 10.727l8.022-7.87.637.637z";
+    this.direction = useDirection();
+    this.formSupport = useForm({ inputType: "checkbox" })(this);
     this.indeterminatePath = "M13 8v1H3V8z";
     this.onLabelClick = () => {
       this.toggle();
@@ -57,6 +59,9 @@ class Checkbox extends LitElement {
   static {
     this.properties = { checked: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], hovered: [7, {}, { reflect: true, type: Boolean }], indeterminate: [7, {}, { reflect: true, type: Boolean }], label: 1, labelText: 1, messageOverrides: [0, {}, { attribute: false }], name: [3, {}, { reflect: true }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], validity: [0, {}, { attribute: false }], value: 1 };
   }
+  static {
+    this.formAssociated = true;
+  }
   static {
     this.styles = styles;
   }
@@ -66,15 +71,10 @@ class Checkbox extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     connectLabel(this);
-    connectForm(this);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     disconnectLabel(this);
-    disconnectForm(this);
-  }
-  syncHiddenFormInput(input) {
-    input.type = "checkbox";
   }
   getPath() {
     return this.indeterminate ? this.indeterminatePath : this.checked ? this.checkedPath : "";
@@ -103,11 +103,11 @@ class Checkbox extends LitElement {
     this.calciteInternalCheckboxFocus.emit(true);
   }
   render() {
-    const rtl = getElementDir(this.el) === "rtl";
+    const rtl = this.direction === "rtl";
     return this.interactiveContainer({ disabled: this.disabled, children: html`<div .ariaChecked=${this.checked} .ariaLabel=${getLabelText(this)} .ariaRequired=${this.required} class=${safeClassMap({
       [CSS.toggle]: true,
       [CSS_UTILITY.rtl]: rtl
-    })} @blur=${this.onToggleBlur} @focus=${this.onToggleFocus} role=checkbox tabindex=${(this.disabled ? void 0 : 0) ?? nothing} ${ref(this.toggleRef)}><svg aria-hidden=true class=${safeClassMap(CSS.check)} viewBox="0 0 16 16">${svg`<path d=${this.getPath() ?? nothing} />`}</svg><slot></slot></div>${this.labelText && InternalLabel({ bottomSpacingDisabled: true, labelText: this.labelText, required: this.required, spacingInlineStart: true, tooltipText: this.messages.required }) || ""}${HiddenFormInputSlot({ component: this })}` });
+    })} @blur=${this.onToggleBlur} @focus=${this.onToggleFocus} role=checkbox tabindex=${(this.disabled ? void 0 : 0) ?? nothing} ${ref(this.toggleRef)}><svg aria-hidden=true class=${safeClassMap(CSS.check)} viewBox="0 0 16 16">${svg`<path d=${this.getPath() ?? nothing} />`}</svg><slot></slot></div>${this.labelText && InternalLabel({ bottomSpacingDisabled: true, labelText: this.labelText, required: this.required, spacingInlineStart: true, tooltipText: this.messages.required }) || ""}` });
   }
 }
 customElement("calcite-checkbox", Checkbox);

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

@@ -10,7 +10,7 @@ import type { IconName } from "../calcite-icon/interfaces.js";
  * @cssproperty [--calcite-chip-corner-radius] - Specifies the component's corner radius.
  * @cssproperty [--calcite-chip-icon-color] - Specifies the component's icon color.
  * @cssproperty [--calcite-chip-select-icon-color-press] - Specifies the component's selection element icon color when active.
- * @cssproperty [--calcite-chip-select-icon-color-pressed] - [Deprecated] Use `--calcite-chip-select-icon-color-press`. Specifies the component's selection element icon color when active.
+ * @cssproperty [--calcite-chip-select-icon-color-pressed] - [Deprecated] in v3.1.0, removal target v6.0.0 - Use `--calcite-chip-select-icon-color-press` instead. Specifies the component's selection element icon color when active.
  * @cssproperty [--calcite-chip-select-icon-color] - Specifies the component's selection element icon color.
  * @cssproperty [--calcite-chip-text-color] - Specifies the component's text color.
  * @slot  - A slot for adding text.

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

@@ -3,7 +3,7 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, isServer, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { j as focusElement, s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
+import { i as focusElement, s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
 import { i as isActivationKey } from "../../chunks/key.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { u as useT9n } from "../../chunks/useT9n.js";

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

@@ -3,7 +3,7 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent } from "@arcgis/lumina";
-import { f as focusElementInGroup, b as slotChangeGetAssignedElements } from "../../chunks/dom.js";
+import { f as focusElementInGroup, a as slotChangeGetAssignedElements } from "../../chunks/dom.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex}.container{display:flex;inline-size:100%;flex-wrap:wrap;gap:.5rem}::slotted(calcite-chip){flex:none}:host([scale=s]) .container{gap:.25rem}:host([scale=l]) .container{gap:.75rem}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;

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

@@ -7,7 +7,8 @@ import { throttle } from "es-toolkit";
 import { css, html, nothing } from "lit";
 import { LitElement, createEvent, safeClassMap, safeStyleMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { k as isPrimaryPointerButton, g as getElementDir } from "../../chunks/dom.js";
+import { useDirection } from "@arcgis/lumina/controllers";
+import { j as isPrimaryPointerButton } from "../../chunks/dom.js";
 import { i as isActivationKey } from "../../chunks/key.js";
 import { c as clamp, r as remap, a as closeToRangeEdge } from "../../chunks/math.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
@@ -23,6 +24,7 @@ class ColorPicker extends LitElement {
     super();
     this._color = DEFAULT_COLOR;
     this.colorFieldScopeRef = createRef();
+    this.direction = useDirection();
     this.hueScopeRef = createRef();
     this.internalColorUpdateContext = null;
     this.isActiveChannelInputEmpty = false;
@@ -866,7 +868,7 @@ class ColorPicker extends LitElement {
     const selected = channelMode === activeChannelMode;
     const isRgb = channelMode === "rgb";
     const channelAriaLabels = isRgb ? [messages.red, messages.green, messages.blue] : [messages.hue, messages.saturation, messages.value];
-    const direction = getElementDir(this.el);
+    const direction = this.direction;
     const channelsToRender = alphaChannel ? channels : channels.slice(0, 3);
     return keyed(channelMode, html`<calcite-tab class=${safeClassMap(CSS.control)} .selected=${selected}><div class=${safeClassMap(CSS.channels)} dir=ltr>${channelsToRender.map((channelValue, index) => {
       const isAlphaChannel = index === 3;

package/dist/components/calcite-color-picker-swatch/customElement.js

@@ -4,7 +4,7 @@ import { keyed } from "lit/directives/keyed.js";
 import Color from "color";
 import { css, html, nothing, svg } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
-import { e as getModeName } from "../../chunks/dom.js";
+import { d as getModeName } from "../../chunks/dom.js";
 import { b as hexify } from "../../chunks/utils.js";
 const CSS = {
   swatch: "swatch",

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

@@ -1,10 +1,10 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { FlipPlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui.js";
-import type { MutableValidityState } from "../../utils/form.js";
-import type { Scale, SelectionMode, Status } from "../interfaces.js";
+import type { Scale, SelectionAppearance, SelectionMode, Status } from "../interfaces.js";
 import type { IconName } from "../calcite-icon/interfaces.js";
 import type { ComboboxItem as HTMLCalciteComboboxItemElement } from "../calcite-combobox-item/customElement.js";
+import type { MutableValidityState } from "../../controllers/useForm.js";
 import type { SelectionDisplay } from "./interfaces.js";
 
 /**
@@ -61,7 +61,7 @@ export abstract class Combobox extends LitElement {
   /** Specifies the component's label text. */
   accessor labelText: string;
   /**
-   * Specifies the maximum number of `calcite-combobox-item`s (including nested children) to display before displaying a scrollbar.
+   * Specifies the maximum number of `calcite-combobox-item-group`s & `calcite-combobox-item`s (including nested children) to display before displaying a scrollbar.
    *
    * @default 0
    */
@@ -140,6 +140,16 @@ export abstract class Combobox extends LitElement {
   accessor selectAllEnabled: boolean;
   /** The component's selected items. */
   get selectedItems(): HTMLCalciteComboboxItemElement[];
+  /**
+   * Specifies the selection appearance, where
+   *
+   * `"icon"` displays a checkmark or dot, and
+   *
+   * `"highlight"` displays a background highlight.
+   *
+   * @default "icon"
+   */
+  accessor selectionAppearance: Extract<"icon" | "highlight", SelectionAppearance>;
   /**
    * When `selectionMode` is `"ancestors"` or `"multiple"`, specifies the display of multiple `calcite-combobox-item` selections, where:
    *

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

@@ -8,10 +8,10 @@ import { c as calciteSize48 } from "../../chunks/core.js";
 import { nothing, html, css } from "lit";
 import { ref, createRef } from "lit/directives/ref.js";
 import { safeClassMap, LitElement, createEvent, stringOrBoolean } from "@arcgis/lumina";
+import { useDirection } from "@arcgis/lumina/controllers";
 import { f as filter } from "../../chunks/filter.js";
-import { l as getElementWidth, m as getTextWidth, j as focusElement } from "../../chunks/dom.js";
+import { k as getElementWidth, l as getTextWidth, i as focusElement } from "../../chunks/dom.js";
 import { d as defaultMenuPlacement, r as reposition, c as connectFloatingUI, a as disconnectFloatingUI, f as filterValidFlipPlacements, h as hideFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
-import { c as connectForm, a as afterConnectDefaultValueSet, d as disconnectForm, s as submitForm, H as HiddenFormInputSlot } from "../../chunks/form.js";
 import { g as guid } from "../../chunks/guid.js";
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
 import { c as createObserver, u as updateRefObserver } from "../../chunks/observers.js";
@@ -25,6 +25,7 @@ import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useCancelable } from "../../chunks/useCancelable.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { u as useTopLayer } from "../../chunks/useTopLayer.js";
+import { u as useForm } from "../../chunks/useForm.js";
 import { I as IDS, C as CSS$1, a as ComboboxItemSelector, b as ComboboxItemGroupSelector, c as ICONS } from "../../chunks/resources5.js";
 import { h as hasActiveChildren, i as isSingleLike, g as getLabel, a as getItemAncestors, b as getItemChildren } from "../../chunks/utils2.js";
 const CSS = {
@@ -41,6 +42,10 @@ class Combobox extends LitElement {
   constructor() {
     super();
     this.closeButtonRef = createRef();
+    this.direction = useDirection();
+    this.formSupport = useForm({
+      inputType: "text"
+    })(this);
     this.selectAllComboboxItemRef = createRef();
     this.allSelectedIndicatorChipRef = createRef();
     this.cancelable = useCancelable()(this);
@@ -138,6 +143,7 @@ class Combobox extends LitElement {
     this.scale = "m";
     this.selectAllEnabled = false;
     this.selectionDisplay = "all";
+    this.selectionAppearance = "icon";
     this.selectionMode = "multiple";
     this.status = "idle";
     this.topLayerDisabled = false;
@@ -167,7 +173,10 @@ class Combobox extends LitElement {
     this.listen("click", this.comboboxFocusHandler);
   }
   static {
-    this.properties = { activeChipIndex: [16, {}, { state: true }], activeDescendant: [16, {}, { state: true }], activeItemIndex: [16, {}, { state: true }], compactSelectionDisplay: [16, {}, { state: true }], selectedHiddenChipsCount: [16, {}, { state: true }], selectedVisibleChipsCount: [16, {}, { state: true }], items: [16, {}, { state: true }], noMatchesFound: [16, {}, { state: true }], allowCustomValues: [7, {}, { reflect: true, type: Boolean }], clearDisabled: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], filterText: [3, {}, { reflect: true }], filterProps: [0, {}, { attribute: false }], filteredItems: [32, {}, { attribute: false, readOnly: true }], flipPlacements: [0, {}, { attribute: false }], form: [3, {}, { reflect: true }], label: 1, labelText: 1, maxItems: [11, {}, { reflect: true, type: Number }], messageOverrides: [0, {}, { attribute: false }], name: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placeholder: 1, placeholderIcon: [3, { type: String }, { reflect: true }], placeholderIconFlipRtl: [7, {}, { reflect: true, type: Boolean }], placement: [3, {}, { reflect: true }], readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], selectAllEnabled: [7, {}, { reflect: true, type: Boolean }], selectedItems: [0, {}, { attribute: false }], selectionDisplay: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [0, {}, { attribute: false }], value: 1 };
+    this.properties = { activeChipIndex: [16, {}, { state: true }], activeDescendant: [16, {}, { state: true }], activeItemIndex: [16, {}, { state: true }], compactSelectionDisplay: [16, {}, { state: true }], selectedHiddenChipsCount: [16, {}, { state: true }], selectedVisibleChipsCount: [16, {}, { state: true }], items: [16, {}, { state: true }], noMatchesFound: [16, {}, { state: true }], allowCustomValues: [7, {}, { reflect: true, type: Boolean }], clearDisabled: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], filterText: [3, {}, { reflect: true }], filterProps: [0, {}, { attribute: false }], filteredItems: [32, {}, { attribute: false, readOnly: true }], flipPlacements: [0, {}, { attribute: false }], form: [3, {}, { reflect: true }], label: 1, labelText: 1, maxItems: [11, {}, { reflect: true, type: Number }], messageOverrides: [0, {}, { attribute: false }], name: [3, {}, { reflect: true }], open: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], placeholder: 1, placeholderIcon: [3, { type: String }, { reflect: true }], placeholderIconFlipRtl: [7, {}, { reflect: true, type: Boolean }], placement: [3, {}, { reflect: true }], readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], selectAllEnabled: [7, {}, { reflect: true, type: Boolean }], selectedItems: [0, {}, { attribute: false }], selectionDisplay: [3, {}, { reflect: true }], selectionAppearance: [3, {}, { reflect: true }], selectionMode: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [0, {}, { attribute: false }], value: 1 };
+  }
+  static {
+    this.formAssociated = true;
   }
   static {
     this.styles = styles;
@@ -235,6 +244,7 @@ class Combobox extends LitElement {
   async reposition(delayed = false) {
     const { floatingEl, referenceEl, placement, overlayPositioning, filteredFlipPlacements } = this;
     return reposition(this, {
+      direction: this.direction,
       floatingEl,
       referenceEl,
       overlayPositioning,
@@ -253,10 +263,6 @@ class Combobox extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     connectLabel(this);
-    connectForm(this);
-    this.internalValueChangeFlag = true;
-    this.value = this.getValue();
-    this.internalValueChangeFlag = false;
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
     this.setFilteredPlacements();
     connectFloatingUI(this);
@@ -278,7 +284,7 @@ class Combobox extends LitElement {
     if (changes.has("overlayPositioning") && (this.hasUpdated || this.overlayPositioning !== "absolute") || changes.has("placement") && (this.hasUpdated || this.placement !== defaultMenuPlacement)) {
       this.reposition(true);
     }
-    if (changes.has("selectionMode") || changes.has("scale")) {
+    if (changes.has("selectionMode") || changes.has("scale") || changes.has("selectionAppearance")) {
       this.updateItems();
     }
     if (changes.has("flipPlacements")) {
@@ -286,7 +292,6 @@ class Combobox extends LitElement {
     }
   }
   loaded() {
-    afterConnectDefaultValueSet(this, this.getValue());
     connectFloatingUI(this);
     this.updateItems();
     this.filterItems(this.filterText, false, false);
@@ -296,7 +301,6 @@ class Combobox extends LitElement {
     this.mutationObserver?.disconnect();
     this.resizeObserver?.disconnect();
     disconnectLabel(this);
-    disconnectForm(this);
     disconnectFloatingUI(this);
   }
   emitComboboxChange() {
@@ -528,10 +532,9 @@ class Combobox extends LitElement {
         } else if (this.allowCustomValues && this.filterText) {
           this.addCustomChip(this.filterText, true);
           event.preventDefault();
-        } else if (!event.defaultPrevented) {
-          if (submitForm(this)) {
-            event.preventDefault();
-          }
+        } else if (!event.defaultPrevented && this.formSupport.active) {
+          event.preventDefault();
+          this.formSupport.requestSubmit();
         }
         break;
       case "Delete":
@@ -715,7 +718,7 @@ class Combobox extends LitElement {
     }
   }
   getMaxScrollerHeight() {
-    const allItemsAndGroups = [...this.groupItems, ...this.getItems(true)];
+    const allItemsAndGroups = this.getItemsAndGroups(true);
     const items = allItemsAndGroups.filter((item) => !isHidden(item));
     const { maxItems } = this;
     let itemsToProcess = 0;
@@ -744,8 +747,11 @@ class Combobox extends LitElement {
     const value = event.target.value;
     this.filterText = value;
   }
-  getItemsAndGroups() {
-    return [...this.groupItems, ...this.items];
+  getItemsAndGroups(preserveOrder = false) {
+    if (!preserveOrder) {
+      return [...this.groupItems, ...this.items];
+    }
+    return Array.from(this.el.querySelectorAll(`${ComboboxItemSelector}, ${ComboboxItemGroupSelector}`));
   }
   toggleSelection(item, value) {
     if (!item || this.selectionMode === "single-persist" && item.selected && item.value === this.value && !value) {
@@ -809,6 +815,7 @@ class Combobox extends LitElement {
   updateItemProps() {
     this.getItems(true).forEach((item) => {
       item.selectionMode = this.selectionMode;
+      item.selectionAppearance = this.selectionAppearance;
       item.scale = this.scale;
     });
     this.groupItems.forEach((groupItem, index) => (groupItem.scale = this.scale, groupItem.position = index));
@@ -1126,7 +1133,7 @@ class Combobox extends LitElement {
       this.renderSelectedIndicatorChip(),
       this.renderSelectedIndicatorChipCompact(),
       this.renderAllSelectedIndicatorChip()
-    ] || ""}<label class=${safeClassMap(CSS$1.screenReadersOnly)} .htmlFor=${`${IDS.input(guid2)}`} .id=${`${IDS.label(guid2)}`}>${label}</label>${this.renderInput()}</div>`)}${!readOnly && isClearable ? keyed("close-button", XButton({ disabled: this.disabled, label: this.messages.clear, ref: this.closeButtonRef, scale: this.scale })) : null}${!readOnly && this.renderChevronIcon() || ""}</div><ul aria-labelledby=${`${IDS.label(guid2)}`} aria-multiselectable=true class=${safeClassMap(CSS$1.screenReadersOnly)} .id=${`${IDS.listbox(guid2)}`} role=listbox tabindex=-1>${this.renderListBoxOptions()}</ul>${this.renderFloatingUIContainer()}${HiddenFormInputSlot({ component: this })}${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
+    ] || ""}<label class=${safeClassMap(CSS$1.screenReadersOnly)} .htmlFor=${`${IDS.input(guid2)}`} .id=${`${IDS.label(guid2)}`}>${label}</label>${this.renderInput()}</div>`)}${!readOnly && isClearable ? keyed("close-button", XButton({ disabled: this.disabled, label: this.messages.clear, ref: this.closeButtonRef, scale: this.scale })) : null}${!readOnly && this.renderChevronIcon() || ""}</div><ul aria-labelledby=${`${IDS.label(guid2)}`} aria-multiselectable=true class=${safeClassMap(CSS$1.screenReadersOnly)} .id=${`${IDS.listbox(guid2)}`} role=listbox tabindex=-1>${this.renderListBoxOptions()}</ul>${this.renderFloatingUIContainer()}${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
   }
 }
 customElement("calcite-combobox", Combobox);

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

@@ -4,7 +4,7 @@ import type { ComboboxChildElement } from "../calcite-combobox/interfaces.js";
 import type { IconName } from "../calcite-icon/interfaces.js";
 
 /**
- * @cssproperty [--calcite-combobox-item-border-color] - [Deprecated] Specifies the component's border color.
+ * @cssproperty [--calcite-combobox-item-border-color] - [Deprecated] in v3.3.0, removal target v6.0.0 - Specifies the component's border color.
  * @cssproperty [--calcite-combobox-text-color] - Specifies the component's text and `icon` color.
  * @cssproperty [--calcite-combobox-text-color-hover] - Specifies the component's text and `icon` color when hovered.
  * @cssproperty [--calcite-combobox-item-background-color-active] - When `active`, specifies the component's background color.

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

@@ -6,7 +6,7 @@ import { LitElement, createEvent, safeClassMap, safeStyleMap } from "@arcgis/lum
 import { g as guid } from "../../chunks/guid.js";
 import { c as getAncestors, i as isSingleLike, d as getDepth } from "../../chunks/utils2.js";
 import { g as getIconScale } from "../../chunks/component.js";
-import { n as slotChangeHasContent } from "../../chunks/dom.js";
+import { m as slotChangeHasContent } from "../../chunks/dom.js";
 import { h as highlightText } from "../../chunks/text.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 const CSS = {
@@ -17,6 +17,7 @@ const CSS = {
   description: "description",
   icon: "icon",
   label: "label",
+  containerHighlightSelected: "container--highlight-selected",
   scale: (scale) => `scale--${scale}`,
   shortText: "short-text",
   single: "label--single",
@@ -35,7 +36,7 @@ const SLOTS = {
   contentStart: "content-start"
 };
 const itemSpacingMultiplier = "--calcite-combobox-item-spacing-indent-multiplier";
-const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([hidden]){display:none}[hidden]{display:none}.scale--s{font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);--calcite-internal-combobox-item-spacing-unit-s: .25rem;--calcite-internal-combobox-item-spacing-unit-l: .5rem;--calcite-combobox-item-selector-icon-size: 1rem;--calcite-internal-combobox-item-description-font-size: var(--calcite-font-size-xs)}.scale--m{font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base);--calcite-internal-combobox-item-spacing-unit-s: .375rem;--calcite-internal-combobox-item-spacing-unit-l: .75rem;--calcite-combobox-item-selector-icon-size: 1rem;--calcite-internal-combobox-item-description-font-size: var(--calcite-font-size-sm)}.scale--l{font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);--calcite-internal-combobox-item-spacing-unit-s: .625rem;--calcite-internal-combobox-item-spacing-unit-l: 1rem;--calcite-combobox-item-selector-icon-size: 1.5rem;--calcite-internal-combobox-item-description-font-size: var(--calcite-font-size)}.container{--calcite-combobox-item-indent-value: calc( var(--calcite-internal-combobox-item-spacing-unit-l) * var(--calcite-combobox-item-spacing-indent-multiplier) )}:host(:focus){--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host,ul{margin:0;display:flex;flex-direction:column;padding:0}:host(:focus),ul:focus{outline:2px solid transparent;outline-offset:2px}.label{position:relative;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:100%;cursor:pointer;align-items:center;text-decoration-line:none;transition-timing-function:cubic-bezier(.4,0,.2,1);outline-color:transparent;word-wrap:break-word;word-break:break-word;justify-content:space-around;gap:var(--calcite-internal-combobox-item-spacing-unit-l);padding-block:var(--calcite-internal-combobox-item-spacing-unit-s);padding-inline-end:var(--calcite-internal-combobox-item-spacing-unit-l);padding-inline-start:var(--calcite-combobox-item-indent-value);color:var(--calcite-combobox-text-color, var(--calcite-color-text-3));transition-duration:var(--calcite-animation-timing)}:host([disabled]) .label{cursor:default}.label--active{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.label:hover{background-color:var(--calcite-combobox-item-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-combobox-text-color-hover, var(--calcite-color-text-1))}.label:active{background-color:var(--calcite-combobox-item-background-color-active, var(--calcite-color-foreground-3))}:host([selected]) .label,.label:active{color:var(--calcite-combobox-text-color-hover, var(--calcite-color-text-1))}:host([selected]) .label .description,:host([selected]) .label .short-text,.label:active .description,.label:active .short-text{color:var(--calcite-combobox-description-text-color-press, var(--calcite-color-text-2))}.icon{display:inline-flex;transition-timing-function:cubic-bezier(.4,0,.2,1);color:var(--calcite-color-border-input)}:host([selected]) .icon,:host([indeterminate]) .icon{color:var(--calcite-combobox-selected-icon-color, var(--calcite-color-brand))}.icon--custom{margin-block-start:-1px}.center-content{display:flex;flex-direction:column;flex-grow:1;padding-block:0}.description{font-size:var(--calcite-internal-combobox-item-description-font-size)}.short-text{white-space:nowrap}.heading{color:var(--calcite-combobox-heading-text-color, var(--calcite-color-text-1))}.description,.short-text{color:var(--calcite-combobox-description-text-color, var(--calcite-color-text-3))}:host([selected]) .heading{font-weight:var(--calcite-font-weight-medium)}.heading,.description,.short-text{line-height:var(--calcite-font-line-height-relative-snug)}:host([item-hidden]){display:none}.text-match{background-color:transparent;color:inherit;font-weight:var(--calcite-font-weight-bold)}`;
+const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host([hidden]){display:none}[hidden]{display:none}.scale--s{font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);--calcite-internal-combobox-item-spacing-unit-s: .25rem;--calcite-internal-combobox-item-spacing-unit-l: .5rem;--calcite-combobox-item-selector-icon-size: 1rem;--calcite-internal-combobox-item-description-font-size: var(--calcite-font-size-xs)}.scale--m{font-size:var(--calcite-font-size-relative-base);line-height:var(--calcite-font-line-height-base);--calcite-internal-combobox-item-spacing-unit-s: .375rem;--calcite-internal-combobox-item-spacing-unit-l: .75rem;--calcite-combobox-item-selector-icon-size: 1rem;--calcite-internal-combobox-item-description-font-size: var(--calcite-font-size-sm)}.scale--l{font-size:var(--calcite-font-size-relative-md);line-height:var(--calcite-font-line-height-md);--calcite-internal-combobox-item-spacing-unit-s: .625rem;--calcite-internal-combobox-item-spacing-unit-l: 1rem;--calcite-combobox-item-selector-icon-size: 1.5rem;--calcite-internal-combobox-item-description-font-size: var(--calcite-font-size)}.container{--calcite-combobox-item-indent-value: calc( var(--calcite-internal-combobox-item-spacing-unit-l) * var(--calcite-combobox-item-spacing-indent-multiplier) )}:host(:focus){--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host,ul{margin:0;display:flex;flex-direction:column;padding:0}:host(:focus),ul:focus{outline:2px solid transparent;outline-offset:2px}.label{position:relative;box-sizing:border-box;display:flex;inline-size:100%;min-inline-size:100%;cursor:pointer;align-items:center;text-decoration-line:none;transition-timing-function:cubic-bezier(.4,0,.2,1);outline-color:transparent;word-wrap:break-word;word-break:break-word;justify-content:space-around;gap:var(--calcite-internal-combobox-item-spacing-unit-l);padding-block:var(--calcite-internal-combobox-item-spacing-unit-s);padding-inline-end:var(--calcite-internal-combobox-item-spacing-unit-l);padding-inline-start:var(--calcite-combobox-item-indent-value);color:var(--calcite-combobox-text-color, var(--calcite-color-text-3));transition-duration:var(--calcite-animation-timing)}:host([disabled]) .label{cursor:default}.label--active{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.label:hover{background-color:var(--calcite-combobox-item-background-color-hover, var(--calcite-color-foreground-2));color:var(--calcite-combobox-text-color-hover, var(--calcite-color-text-1))}.label:active{background-color:var(--calcite-combobox-item-background-color-active, var(--calcite-color-foreground-3))}:host([selected]) .label,.label:active{color:var(--calcite-combobox-text-color-hover, var(--calcite-color-text-1))}:host([selected]) .label .description,:host([selected]) .label .short-text,.label:active .description,.label:active .short-text{color:var(--calcite-combobox-description-text-color-press, var(--calcite-color-text-2))}.icon{display:inline-flex;transition-timing-function:cubic-bezier(.4,0,.2,1);color:var(--calcite-color-border-input)}:host([selected]) .icon,:host([indeterminate]) .icon{color:var(--calcite-combobox-selected-icon-color, var(--calcite-color-brand))}.icon--custom{margin-block-start:-1px}.center-content{display:flex;flex-direction:column;flex-grow:1;padding-block:0}.description{font-size:var(--calcite-internal-combobox-item-description-font-size)}.short-text{white-space:nowrap}.heading{color:var(--calcite-combobox-heading-text-color, var(--calcite-color-text-1))}.description,.short-text{color:var(--calcite-combobox-description-text-color, var(--calcite-color-text-3))}:host([selected]) .heading{font-weight:var(--calcite-font-weight-medium)}.heading,.description,.short-text{line-height:var(--calcite-font-line-height-relative-snug)}.container--highlight-selected{background-color:var(--calcite-color-surface-highlight)}:host([item-hidden]){display:none}.text-match{background-color:transparent;color:inherit;font-weight:var(--calcite-font-weight-bold)}`;
 class ComboboxItem extends LitElement {
   constructor() {
     super(...arguments);
@@ -48,13 +49,14 @@ class ComboboxItem extends LitElement {
     this.iconFlipRtl = false;
     this.scale = "m";
     this.selectionMode = "multiple";
+    this.selectionAppearance = "icon";
     this.itemHidden = false;
     this.indeterminate = false;
     this.calciteComboboxItemChange = createEvent({ cancelable: false });
     this.calciteInternalComboboxItemChange = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { hasContent: [16, {}, { state: true }], active: [7, {}, { reflect: true, type: Boolean }], ancestors: [0, {}, { attribute: false }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], filterDisabled: [7, {}, { reflect: true, type: Boolean }], filterTextMatchPattern: [3, {}, { reflect: true }], guid: [3, {}, { reflect: true }], heading: 1, icon: [3, { type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], label: 1, metadata: [0, {}, { attribute: false }], scale: 1, selected: [7, {}, { reflect: true, type: Boolean }], selectionMode: [3, {}, { reflect: true }], shortHeading: 1, value: [3, {}, { reflect: true }], itemHidden: [7, {}, { reflect: true, type: Boolean }], indeterminate: [7, {}, { reflect: true, type: Boolean }] };
+    this.properties = { hasContent: [16, {}, { state: true }], active: [7, {}, { reflect: true, type: Boolean }], ancestors: [0, {}, { attribute: false }], description: 1, disabled: [7, {}, { reflect: true, type: Boolean }], filterDisabled: [7, {}, { reflect: true, type: Boolean }], filterTextMatchPattern: [3, {}, { reflect: true }], guid: [3, {}, { reflect: true }], heading: 1, icon: [3, { type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], label: 1, metadata: [0, {}, { attribute: false }], scale: 1, selected: [7, {}, { reflect: true, type: Boolean }], selectionMode: [3, {}, { reflect: true }], selectionAppearance: [3, {}, { reflect: true }], shortHeading: 1, value: [3, {}, { reflect: true }], itemHidden: [7, {}, { reflect: true, type: Boolean }], indeterminate: [7, {}, { reflect: true, type: Boolean }] };
   }
   static {
     this.styles = styles;
@@ -107,6 +109,9 @@ class ComboboxItem extends LitElement {
     })} .flipRtl=${this.iconFlipRtl} .icon=${this.icon || iconPath} .scale=${getIconScale(this.scale)}></calcite-icon>`) : null;
   }
   renderSelectIndicator(icon) {
+    if (this.selectionAppearance === "highlight") {
+      return null;
+    }
     return keyed("indicator", html`<calcite-icon class=${safeClassMap({
       [CSS.icon]: true
     })} .flipRtl=${this.iconFlipRtl} .icon=${icon} .scale=${getIconScale(this.scale)}></calcite-icon>`);
@@ -124,7 +129,8 @@ class ComboboxItem extends LitElement {
     const classes = {
       [CSS.label]: true,
       [CSS.active]: this.active,
-      [CSS.single]: isSingleSelect
+      [CSS.single]: isSingleSelect,
+      [CSS.containerHighlightSelected]: this.selected && this.selectionAppearance === "highlight"
     };
     const depth = getDepth(this.el);
     this.el.ariaHidden = "true";

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

@@ -332,7 +332,7 @@ class DatePickerMonth extends LitElement {
       [CSS.currentDay]: currentDay,
       [CSS.insideRangeHover]: this.isHoverInRange(),
       [CSS.outsideRangeHover]: !this.isHoverInRange(),
-      [CSS.noncurrent]: this.range && !currentMonth
+      [CSS.noncurrent]: this.range && this.calendars === 2 && !currentMonth
     })} .currentMonth=${currentMonth} .dateTimeFormat=${this.dateTimeFormat} .day=${day} .disabled=${!isDateInRange} .endOfRange=${this.isEndOfRange(date)} .highlighted=${this.betweenSelectedRange(date)} @calciteInternalDayHover=${this.dayHover} @calciteInternalDaySelect=${this.daySelect} .range=${!!this.startDate && !!this.endDate && !sameDate(this.startDate, this.endDate)} .rangeEdge=${dayInWeek === 0 ? "start" : dayInWeek === 6 ? "end" : void 0} .rangeHover=${isDateInRange && this.isRangeHover(date)} .scale=${this.scale} .selected=${this.isSelected(date)} .startOfRange=${this.isStartOfRange(date)} .value=${date} ${ref(this.storeDayRef)}></calcite-date-picker-day></div>`);
   }
   renderCalendar(weekDays, days, isEndCalendar = false) {