@esri/calcite-components 5.1.0-next.3 → 5.1.0-next.5

package/dist/chunks/label.js

@@ -1,5 +1,5 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { q as queryElementRoots, c as closestElementCrossShadowBoundary, r as isBefore } from "./dom.js";
+import { q as queryElementRoots, c as closestElementCrossShadowBoundary, p as isBefore } from "./dom.js";
 const labelClickEvent = "calciteInternalLabelClick";
 const labelConnectedEvent = "calciteInternalLabelConnected";
 const labelDisconnectedEvent = "calciteInternalLabelDisconnected";

package/dist/chunks/openCloseComponent.js

@@ -1,5 +1,5 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { p as whenTransitionDone } from "./dom.js";
+import { o as whenTransitionDone } from "./dom.js";
 function isOpen(component) {
   return component[component.openProp || "open"];
 }

package/dist/chunks/runtime.js

@@ -60,9 +60,9 @@ function getConfig() {
   }
   return effectiveConfig;
 }
-const version = "5.1.0-next.3";
-const buildDate = "2026-03-03";
-const revision = "1fc02c2ca";
+const version = "5.1.0-next.5";
+const buildDate = "2026-03-10";
+const revision = "599b2441e";
 function stampVersion() {
   const config = getConfig();
   if (config && config.version) {
@@ -85,7 +85,7 @@ if (!isServer) {
 if (process.env.NODE_ENV !== "test") {
   queueMicrotask(stampVersion);
 }
-const runtime = makeRuntime({ defaultAssetPath: "https://cdn.jsdelivr.net/npm/@esri/calcite-components@5.1.0-next.3/dist/cdn/", hydratedAttribute: "calcite-hydrated" });
+const runtime = makeRuntime({ defaultAssetPath: "https://cdn.jsdelivr.net/npm/@esri/calcite-components@5.1.0-next.5/dist/cdn/", hydratedAttribute: "calcite-hydrated" });
 const { customElement, getAssetPath, setAssetPath } = runtime;
 export {
   CSS_UTILITY as C,

package/dist/chunks/useFocusTrap.js

@@ -1,7 +1,7 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { makeGenericController } from "@arcgis/lumina/controllers";
 import { createFocusTrap } from "focus-trap";
-import { t as tabbableOptions, j as focusElement } from "./dom.js";
+import { t as tabbableOptions, i as focusElement } from "./dom.js";
 import { a as getConfig } from "./runtime.js";
 function getEffectiveContainerElements(targetEl, { focusTrapOptions }, extraContainers) {
   if (!focusTrapOptions?.extraContainers && !extraContainers) {

package/dist/chunks/useSetFocus.js

@@ -1,7 +1,7 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { makeGenericController } from "@arcgis/lumina/controllers";
 import { c as componentFocusable } from "./component.js";
-import { h as getRootNode, j as focusElement } from "./dom.js";
+import { e as getRootNode, i as focusElement } from "./dom.js";
 const useSetFocus = () => {
   return makeGenericController((component, controller) => {
     let abortController;

package/dist/chunks/utils2.js

@@ -1,6 +1,6 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { isServer } from "lit";
-import { o as nodeListToArray } from "./dom.js";
+import { n as nodeListToArray } from "./dom.js";
 import { A as AllComboboxChildrenSelector, a as ComboboxItemSelector, b as ComboboxItemGroupSelector } from "./resources5.js";
 function getAncestors(element) {
   const parent = element.parentElement?.closest(AllComboboxChildrenSelector);

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

@@ -3,8 +3,9 @@ import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, html, nothing } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
+import { useDirection } from "@arcgis/lumina/controllers";
 import { createRef, ref } from "lit/directives/ref.js";
-import { c as closestElementCrossShadowBoundary, s as slotChangeHasAssignedElement, g as getElementDir } from "../../chunks/dom.js";
+import { c as closestElementCrossShadowBoundary, s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
@@ -51,6 +52,7 @@ const styles = css`.icon-position--end,.icon-position--start{--calcite-internal-
 class AccordionItem extends LitElement {
   constructor() {
     super();
+    this.direction = useDirection();
     this.headerRef = createRef();
     this.focusSetter = useSetFocus()(this);
     this.messages = useT9n();
@@ -173,7 +175,6 @@ class AccordionItem extends LitElement {
   }
   render() {
     const { iconFlipRtl, heading, headingLevel, messages, expanded } = this;
-    const dir = getElementDir(this.el);
     const expandIconTitle = expanded ? messages.collapse : messages.expand;
     const iconStartEl = this.iconStart ? keyed("icon-start", html`<calcite-icon class=${safeClassMap({ [CSS.icon]: true, [CSS.iconStart]: true })} .flipRtl=${iconFlipRtl === "both" || iconFlipRtl === "start"} .icon=${this.iconStart} .scale=${getIconScale(this.scale)}></calcite-icon>`) : null;
     const iconEndEl = this.iconEnd ? keyed("icon-end", html`<calcite-icon class=${safeClassMap({ [CSS.iconEnd]: true, [CSS.icon]: true })} .flipRtl=${iconFlipRtl === "both" || iconFlipRtl === "end"} .icon=${this.iconEnd} .scale=${getIconScale(this.scale)}></calcite-icon>`) : null;
@@ -183,7 +184,7 @@ class AccordionItem extends LitElement {
       [CSS.iconType(this.iconType)]: true
     })}><div class=${safeClassMap({
       [CSS.header]: true,
-      [CSS_UTILITY.rtl]: dir === "rtl",
+      [CSS_UTILITY.rtl]: this.direction === "rtl",
       [CSS.headerAppearance(this.appearance)]: true
     })}>${this.renderActionsStart()}<button aria-controls=${IDS.section} .ariaExpanded=${expanded} class=${safeClassMap(CSS.headerContent)} id=${IDS.sectionToggle} @click=${this.itemHeaderClickHandler} type=button ${ref(this.headerRef)}><div class=${safeClassMap(CSS.headerContainer)}>${this.renderContentStart()}${iconStartEl}<div class=${safeClassMap(CSS.headerText)}>${Heading({ class: CSS.heading, level: headingLevel, children: heading })}${description ? html`<span class=${safeClassMap(CSS.description)}>${description}</span>` : null}</div>${iconEndEl}${this.renderContentEnd()}</div><calcite-icon class=${safeClassMap(CSS.expandIcon)} .icon=${this.iconType === "chevron" ? ICONS.chevronDown : this.iconType === "caret" ? ICONS.caretDown : expanded ? ICONS.minus : ICONS.plus} .scale=${getIconScale(this.scale)} title=${expandIconTitle ?? nothing}></calcite-icon></button>${this.renderActionsEnd()}</div><section aria-labelledby=${IDS.sectionToggle} class=${safeClassMap(CSS.content)} id=${IDS.section}><slot></slot></section></div>`;
   }

package/dist/components/calcite-action-bar/customElement.d.ts

@@ -64,7 +64,14 @@ export abstract class ActionBar extends LitElement {
    * @default "absolute"
    */
   accessor overlayPositioning: OverlayPositioning;
-  /** Specifies the position of the component depending on the element's `dir` property. */
+  /**
+   * When `expandDisabled` is `false`, specifies the expand toggle's chevron direction, where:
+   *
+   * `"start"` positions the expand toggle's chevron away from the start of the component when `expanded` is `false`, and
+   * `"end"` positions the expand toggle's chevron away from the end of the component when `expanded` is `false`.
+   *
+   * When `expanded` is `true`, the chevron direction is reversed.
+   */
   accessor position: Extract<"start" | "end", Position>;
   /**
    * Specifies the size of the expand `calcite-action`.

package/dist/components/calcite-action-bar/customElement.js

@@ -4,7 +4,8 @@ import { debounce } from "es-toolkit";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { a as getStylePixelValue, s as slotChangeHasAssignedElement, b as slotChangeGetAssignedElements, f as focusElementInGroup } from "../../chunks/dom.js";
+import { useDirection } from "@arcgis/lumina/controllers";
+import { g as getStylePixelValue, s as slotChangeHasAssignedElement, a as slotChangeGetAssignedElements, f as focusElementInGroup } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { o as overflowActions, q as queryActions, t as toggleChildActionText, E as ExpandToggle } from "../../chunks/ExpandToggle.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
@@ -51,6 +52,7 @@ class ActionBar extends LitElement {
     super();
     this.actions = [];
     this.containerRef = createRef();
+    this.direction = useDirection();
     this.mutationObserver = createObserver("mutation", () => this.mutationObserverHandler());
     this.cancelable = useCancelable()(this);
     this.resize = debounce(({ width, height }) => {
@@ -280,7 +282,7 @@ class ActionBar extends LitElement {
   }
   renderBottomActionGroup() {
     const { expanded, expandDisabled, el, position, toggleExpand, scale, layout, messages, actionsEndGroupLabel, overlayPositioning } = this;
-    const expandToggleNode = !expandDisabled ? ExpandToggle({ collapseLabel: messages.collapseLabel, collapseText: messages.collapse, el, expandLabel: messages.expandLabel, expandText: messages.expand, expanded, position, ref: this.setExpandToggleEl, scale, toggle: toggleExpand, tooltip: this.expandTooltip }) : null;
+    const expandToggleNode = !expandDisabled ? ExpandToggle({ collapseLabel: messages.collapseLabel, collapseText: messages.collapse, direction: this.direction, el, expandLabel: messages.expandLabel, expandText: messages.expand, expanded, position, ref: this.setExpandToggleEl, scale, toggle: toggleExpand, tooltip: this.expandTooltip }) : null;
     return html`<calcite-action-group class=${safeClassMap(CSS.actionGroupEnd)} .hidden=${this.expandDisabled && !this.hasActionsEnd} .label=${actionsEndGroupLabel} .layout=${layout} .overlayPositioning=${overlayPositioning} .scale=${scale}><slot name=${SLOTS.actionsEnd} @slotchange=${this.handleActionsEndSlotChange}></slot><slot name=${SLOTS.expandTooltip} @slotchange=${this.handleTooltipSlotChange}></slot>${expandToggleNode}</calcite-action-group>`;
   }
   render() {

package/dist/components/calcite-action-pad/customElement.js

@@ -2,7 +2,8 @@
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { b as slotChangeGetAssignedElements, f as focusElementInGroup } from "../../chunks/dom.js";
+import { useDirection } from "@arcgis/lumina/controllers";
+import { a as slotChangeGetAssignedElements, f as focusElementInGroup } from "../../chunks/dom.js";
 import { t as toggleChildActionText, E as ExpandToggle } from "../../chunks/ExpandToggle.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
@@ -21,6 +22,7 @@ class ActionPad extends LitElement {
   constructor() {
     super();
     this.actions = [];
+    this.direction = useDirection();
     this.mutationObserver = createObserver("mutation", () => this.mutationObserverHandler());
     this.toggleExpand = () => {
       this.expanded = !this.expanded;
@@ -165,7 +167,7 @@ class ActionPad extends LitElement {
   }
   renderBottomActionGroup() {
     const { expanded, expandDisabled, messages, el, position, toggleExpand, scale, layout, actionsEndGroupLabel, overlayPositioning } = this;
-    const expandToggleNode = !expandDisabled ? ExpandToggle({ collapseLabel: messages.collapseLabel, collapseText: messages.collapse, el, expandLabel: messages.expandLabel, expandText: messages.expand, expanded, position, scale, toggle: toggleExpand, tooltip: this.expandTooltip }) : null;
+    const expandToggleNode = !expandDisabled ? ExpandToggle({ collapseLabel: messages.collapseLabel, collapseText: messages.collapse, direction: this.direction, el, expandLabel: messages.expandLabel, expandText: messages.expand, expanded, position, scale, toggle: toggleExpand, tooltip: this.expandTooltip }) : null;
     return expandToggleNode ? html`<calcite-action-group class=${safeClassMap(CSS.actionGroupEnd)} .label=${actionsEndGroupLabel} .layout=${layout} .overlayPositioning=${overlayPositioning} .scale=${scale}><slot name=${SLOTS.expandTooltip} @slotchange=${this.handleTooltipSlotChange}></slot>${expandToggleNode}</calcite-action-group>` : null;
   }
   render() {

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

@@ -4,7 +4,7 @@ import { keyed } from "lit/directives/keyed.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { s as slotChangeHasAssignedElement, d as setRequestedIcon } from "../../chunks/dom.js";
+import { s as slotChangeHasAssignedElement, b as setRequestedIcon } from "../../chunks/dom.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { N as NumberStringFormat } from "../../chunks/locale.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";

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

@@ -3,7 +3,7 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { repeat } from "lit/directives/repeat.js";
 import { css, nothing, html } from "lit";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
-import { useWatchAttributes } from "@arcgis/lumina/controllers";
+import { useWatchAttributes, useDirection } from "@arcgis/lumina/controllers";
 import { debounce } from "es-toolkit";
 import { escapeRegExp } from "es-toolkit/compat";
 import { createRef, ref } from "lit/directives/ref.js";
@@ -50,6 +50,7 @@ class Autocomplete extends LitElement {
     super();
     this.guid = guid();
     this.attributeWatch = useWatchAttributes(["autofocus", "enterkeyhint", "inputmode"], this.handleGlobalAttributesChanged);
+    this.direction = useDirection();
     this.inputId = IDS.input(this.guid);
     this.listId = IDS.list(this.guid);
     this.messages = useT9n();
@@ -123,6 +124,7 @@ class Autocomplete extends LitElement {
   async reposition(delayed = false) {
     const { floatingEl, referenceEl, placement, overlayPositioning, flipPlacements } = this;
     return reposition(this, {
+      direction: this.direction,
       floatingEl,
       referenceEl,
       overlayPositioning,

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

@@ -2,7 +2,7 @@
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, nothing, safeClassMap, safeStyleMap } from "@arcgis/lumina";
-import { e as getModeName } from "../../chunks/dom.js";
+import { d as getModeName } from "../../chunks/dom.js";
 import { h as hexToRGB, i as isValidHex } from "../../chunks/utils.js";
 const CSS = {
   thumbnail: "thumbnail",

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

@@ -4,7 +4,7 @@ import { keyed } from "lit/directives/keyed.js";
 import { ref } from "lit/directives/ref.js";
 import { css, html, nothing } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { s as slotChangeHasAssignedElement, b as slotChangeGetAssignedElements } from "../../chunks/dom.js";
+import { s as slotChangeHasAssignedElement, a as slotChangeGetAssignedElements } from "../../chunks/dom.js";
 import { H as Heading } from "../../chunks/Heading.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";

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

@@ -5,7 +5,7 @@ import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { c as createObserver } from "../../chunks/observers.js";
 import { d as disconnectSortableComponent, c as connectSortableComponent } from "../../chunks/sortableComponent.js";
-import { h as getRootNode, b as slotChangeGetAssignedElements } from "../../chunks/dom.js";
+import { e as getRootNode, a as slotChangeGetAssignedElements } from "../../chunks/dom.js";
 import { g as guid } from "../../chunks/guid.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useCancelable } from "../../chunks/useCancelable.js";

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

@@ -10,7 +10,7 @@ import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../.
 import { c as createObserver, u as updateRefObserver } from "../../chunks/observers.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { i as hasVisibleContent } from "../../chunks/dom.js";
+import { h as hasVisibleContent } from "../../chunks/dom.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 const CSS = {

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.js

@@ -3,7 +3,7 @@ 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 { useDirection } from "@arcgis/lumina/controllers";
 import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from "../../chunks/form.js";
 import { i as isActivationKey } from "../../chunks/key.js";
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
@@ -20,6 +20,7 @@ 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.indeterminatePath = "M13 8v1H3V8z";
     this.onLabelClick = () => {
       this.toggle();
@@ -103,7 +104,7 @@ 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

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

@@ -2,7 +2,7 @@
 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 { SelectionDisplay } from "./interfaces.js";
@@ -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,8 +8,9 @@ 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";
@@ -41,6 +42,7 @@ class Combobox extends LitElement {
   constructor() {
     super();
     this.closeButtonRef = createRef();
+    this.direction = useDirection();
     this.selectAllComboboxItemRef = createRef();
     this.allSelectedIndicatorChipRef = createRef();
     this.cancelable = useCancelable()(this);
@@ -138,6 +140,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 +170,7 @@ 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.styles = styles;
@@ -235,6 +238,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,
@@ -278,7 +282,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")) {
@@ -812,6 +816,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));