@esri/calcite-components 5.1.0-next.4 → 5.1.0-next.6

package/dist/chunks/runtime.js

@@ -60,9 +60,9 @@ function getConfig() {
   }
   return effectiveConfig;
 }
-const version = "5.1.0-next.4";
-const buildDate = "2026-03-04";
-const revision = "4b35a7f1e";
+const version = "5.1.0-next.6";
+const buildDate = "2026-03-11";
+const revision = "b9e85e81c";
 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.4/dist/cdn/", hydratedAttribute: "calcite-hydrated" });
+const runtime = makeRuntime({ defaultAssetPath: "https://cdn.jsdelivr.net/npm/@esri/calcite-components@5.1.0-next.6/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

@@ -11,11 +11,14 @@ import type { OverlayPositioning } from "../../utils/floating-ui.js";
  * @cssproperty [--calcite-action-bar-shadow] - Specifies the component's shadow when `floating` is `true`.
  * @slot  - A slot for adding `calcite-action`s that will appear at the top of the component.
  * @slot [actions-end] - A slot for adding `calcite-action`s that will appear at the end of the component, prior to the collapse/expand button.
+ * @slot [actions-start] - A slot for adding `calcite-action`s that will appear at the start of the component. When `expandPosition` is `"start"`, actions in this slot will render after the collapse/expand button.
  * @slot [expand-tooltip] - A slot to set the `calcite-tooltip` for the expand toggle.
  */
 export abstract class ActionBar extends LitElement {
   /** Specifies an accessible name for the last `calcite-action-group`. */
   accessor actionsEndGroupLabel: string;
+  /** Specifies an accessible name for the first `calcite-action-group`. */
+  accessor actionsStartGroupLabel: string;
   /**
    * When `true`, the expand-toggling behavior is disabled.
    *
@@ -29,6 +32,12 @@ export abstract class ActionBar extends LitElement {
    * @default false
    */
   accessor expanded: boolean;
+  /**
+   * Specifies the position of the expand `calcite-action`.
+   *
+   * @default "end"
+   */
+  accessor expandPosition: Extract<"start" | "end", Position>;
   /**
    * When `true`, the component is in a floating state.
    *

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

@@ -1,10 +1,11 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { D as DEBOUNCE, c as customElement } from "../../chunks/runtime.js";
 import { debounce } from "es-toolkit";
-import { css, html } from "lit";
+import { css, html, nothing } 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";
@@ -39,10 +40,12 @@ const getOverflowCount = ({
 };
 const CSS = {
   container: "container",
-  actionGroupEnd: "action-group--end"
+  actionGroupEnd: "action-group--end",
+  actionGroupStart: "action-group--start"
 };
 const SLOTS = {
   actionsEnd: "actions-end",
+  actionsStart: "actions-start",
   expandTooltip: "expand-tooltip"
 };
 const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host([scale=s]){--calcite-internal-action-bar-gap: var(--calcite-action-bar-items-space, var(--calcite-spacing-xxs));--calcite-internal-action-bar-padding: var(--calcite-spacing-xxs)}:host([scale=m]){--calcite-internal-action-bar-gap: var(--calcite-action-bar-items-space, var(--calcite-spacing-sm));--calcite-internal-action-bar-padding: var(--calcite-spacing-sm)}:host([scale=l]){--calcite-internal-action-bar-gap: var(--calcite-action-bar-items-space, var(--calcite-space-sm-plus));--calcite-internal-action-bar-padding: var(--calcite-spacing-sm-plus)}:host{display:inline-flex;align-self:stretch;background:transparent;--calcite-internal-action-group-dividing-border-margin: calc(var(--calcite-spacing-base) + 1px)}.container{display:inline-flex;flex:1 1 auto;flex-direction:column;background-color:var(--calcite-action-bar-background-color, var(--calcite-color-foreground-1));gap:var(--calcite-internal-action-bar-gap);padding:var(--calcite-internal-action-bar-padding)}@keyframes in{0%{opacity:0}to{opacity:1}}:host([floating]) .container{animation:in var(--calcite-internal-animation-timing-slow) ease-in-out;overflow:hidden;border-radius:var(--calcite-action-bar-corner-radius, var(--calcite-corner-radius-round));--tw-shadow: 0 6px 20px -4px rgba(0, 0, 0, .1), 0 4px 12px -2px rgba(0, 0, 0, .08);--tw-shadow-colored: 0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--calcite-action-bar-shadow, var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow))}:host([layout=vertical]){flex-direction:column}:host([layout=vertical]):host([overflow-actions-disabled]) .container{overflow-y:auto}:host([layout=vertical]):host([expanded]) .container{max-inline-size:var(--calcite-action-bar-expanded-max-width, auto)}:host([layout=vertical]) .action-group--end{margin-block-start:auto}:host([layout=vertical]) ::slotted(calcite-action-group:not(:last-of-type)){border-block-end-width:var(--calcite-border-width-sm);border-image:linear-gradient(to right,transparent var(--calcite-internal-action-group-dividing-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) var(--calcite-internal-action-group-dividing-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) calc(100% - var(--calcite-internal-action-group-dividing-border-margin)),transparent var(--calcite-internal-action-group-dividing-border-margin));border-image-slice:1;padding-block-end:var(--calcite-internal-action-bar-padding)}:host([layout=horizontal]){flex-direction:row}:host([layout=horizontal]) .container{flex-direction:row}:host([layout=horizontal]):host([overflow-actions-disabled]) .container{overflow-x:auto}:host([layout=horizontal]) .action-group--end{margin-inline-start:auto}:host([layout=horizontal]) ::slotted(calcite-action-group:not(:last-of-type)){border-image:linear-gradient(transparent var(--calcite-internal-action-group-dividing-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) var(--calcite-internal-action-group-dividing-border-margin),var(--calcite-action-group-border-color, var(--calcite-color-border-3)) calc(100% - var(--calcite-internal-action-group-dividing-border-margin)),transparent var(--calcite-internal-action-group-dividing-border-margin));border-image-slice:1;border-inline-end-width:var(--calcite-border-width-sm);padding-inline-end:var(--calcite-internal-action-bar-padding)}.action-group--end{justify-content:flex-end}:host([hidden]){display:none}[hidden]{display:none}`;
@@ -51,16 +54,20 @@ 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 }) => {
-      const { expanded, expandDisabled, layout, overflowActionsDisabled, actionGroups } = this;
+      const { expanded, expandDisabled, layout, overflowActionsDisabled, expandPosition } = this;
       if (overflowActionsDisabled || layout === "vertical" && !height || layout === "horizontal" && !width) {
         return;
       }
-      const itemSizes = this.getItemSizes();
       this.updateGroups();
-      const groupCount = this.hasActionsEnd || !expandDisabled ? actionGroups.length + 1 : actionGroups.length;
+      const itemSizes = this.getItemSizes();
+      const { actionGroups } = this;
+      const actionsEndCount = this.hasActionsEnd || !expandDisabled && expandPosition === "end" ? 1 : 0;
+      const actionsStartCount = this.hasActionsStart || !expandDisabled && expandPosition === "start" ? 1 : 0;
+      const groupCount = actionGroups.length + actionsEndCount + actionsStartCount;
       let bufferSize = groupCount;
       const actionBarContainerStyle = getComputedStyle(this.containerRef.value);
       bufferSize += getStylePixelValue(layout === "horizontal" ? actionBarContainerStyle.paddingInlineStart : actionBarContainerStyle.paddingBlockStart) + getStylePixelValue(layout === "horizontal" ? actionBarContainerStyle.paddingInlineEnd : actionBarContainerStyle.paddingBlockEnd);
@@ -107,9 +114,11 @@ class ActionBar extends LitElement {
       this.expandToggleEl = el;
     };
     this.hasActionsEnd = false;
+    this.hasActionsStart = false;
     this.floating = false;
     this.expandDisabled = false;
     this.expanded = false;
+    this.expandPosition = "end";
     this.layout = "vertical";
     this.overflowActionsDisabled = false;
     this.overlayPositioning = "absolute";
@@ -122,7 +131,7 @@ class ActionBar extends LitElement {
     this.listen("keydown", this.handleKeyDown);
   }
   static {
-    this.properties = { expandTooltip: [16, {}, { state: true }], hasActionsEnd: [16, {}, { state: true }], actionsEndGroupLabel: 1, floating: [7, {}, { reflect: true, type: Boolean }], expandDisabled: [7, {}, { reflect: true, type: Boolean }], expanded: [7, {}, { reflect: true, type: Boolean }], layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], overflowActionsDisabled: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], position: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selectionAppearance: [3, {}, { reflect: true }] };
+    this.properties = { expandTooltip: [16, {}, { state: true }], hasActionsEnd: [16, {}, { state: true }], hasActionsStart: [16, {}, { state: true }], actionsEndGroupLabel: 1, actionsStartGroupLabel: 1, floating: [7, {}, { reflect: true, type: Boolean }], expandDisabled: [7, {}, { reflect: true, type: Boolean }], expanded: [7, {}, { reflect: true, type: Boolean }], expandPosition: [3, {}, { reflect: true }], layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], overflowActionsDisabled: [7, {}, { reflect: true, type: Boolean }], overlayPositioning: [3, {}, { reflect: true }], position: [3, {}, { reflect: true }], scale: [3, {}, { reflect: true }], selectionAppearance: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
@@ -143,7 +152,7 @@ class ActionBar extends LitElement {
     this.cancelable.add(this.resize);
   }
   willUpdate(changes) {
-    if (changes.has("expandDisabled") && (this.hasUpdated || this.expandDisabled !== false)) {
+    if (changes.has("expandDisabled") && (this.hasUpdated || this.expandDisabled !== false) || changes.has("expandPosition") && (this.hasUpdated || this.expandPosition !== "end")) {
       this.overflowActions();
     }
     if (changes.has("layout") && (this.hasUpdated || this.layout !== "vertical")) {
@@ -229,6 +238,11 @@ class ActionBar extends LitElement {
   }
   handleActionsEndSlotChange(event) {
     this.hasActionsEnd = slotChangeHasAssignedElement(event);
+    this.overflowActions();
+  }
+  handleActionsStartSlotChange(event) {
+    this.hasActionsStart = slotChangeHasAssignedElement(event);
+    this.overflowActions();
   }
   handleTooltipSlotChange(event) {
     const tooltips = slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-tooltip"));
@@ -278,13 +292,26 @@ class ActionBar extends LitElement {
       action.tabIndex = !action.disabled && action === active ? 0 : -1;
     });
   }
-  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;
-    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>`;
+  renderExpandTooltipSlot() {
+    return html`<slot name=${SLOTS.expandTooltip} @slotchange=${this.handleTooltipSlotChange}></slot>`;
+  }
+  renderExpandToggle() {
+    const { el, expanded, toggleExpand, messages, position, scale } = this;
+    return 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 });
+  }
+  renderActionsGroup(position) {
+    const { expandDisabled, scale, layout, overlayPositioning, expandPosition } = this;
+    const isStart = position === "start";
+    const hasExpandToggle = !expandDisabled && expandPosition === position;
+    const slotName = isStart ? SLOTS.actionsStart : SLOTS.actionsEnd;
+    const onSlotChange = isStart ? this.handleActionsStartSlotChange : this.handleActionsEndSlotChange;
+    const label = isStart ? this.actionsStartGroupLabel : this.actionsEndGroupLabel;
+    const hidden = !hasExpandToggle && !(isStart ? this.hasActionsStart : this.hasActionsEnd);
+    const className = isStart ? CSS.actionGroupStart : CSS.actionGroupEnd;
+    return html`<calcite-action-group class=${safeClassMap(className)} .hidden=${hidden} .label=${label} .layout=${layout} .overlayPositioning=${overlayPositioning} .scale=${scale}>${isStart && hasExpandToggle ? this.renderExpandToggle() : null}<slot name=${slotName ?? nothing} @slotchange=${onSlotChange}></slot>${hasExpandToggle ? this.renderExpandTooltipSlot() : null}${!isStart && hasExpandToggle ? this.renderExpandToggle() : null}</calcite-action-group>`;
   }
   render() {
-    return html`<div .ariaOrientation=${this.layout === "horizontal" ? "horizontal" : "vertical"} class=${safeClassMap(CSS.container)} role=toolbar ${ref(this.containerRef)}><slot @slotchange=${this.handleDefaultSlotChange}></slot>${this.renderBottomActionGroup()}</div>`;
+    return html`<div .ariaOrientation=${this.layout === "horizontal" ? "horizontal" : "vertical"} class=${safeClassMap(CSS.container)} role=toolbar ${ref(this.containerRef)}>${this.renderActionsGroup("start")}<slot @slotchange=${this.handleDefaultSlotChange}></slot>${this.renderActionsGroup("end")}</div>`;
   }
 }
 customElement("calcite-action-bar", ActionBar);

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",