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

package/dist/components/calcite-input-time-picker/customElement.js

@@ -3,13 +3,13 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, nothing, html } from "lit";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
+import { useDirection } from "@arcgis/lumina/controllers";
 import { c as connectForm, d as disconnectForm, s as submitForm, H as HiddenFormInputSlot } from "../../chunks/form.js";
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
 import { d as decimalPlaces } from "../../chunks/math.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
 import { V as Validation } from "../../chunks/Validation.js";
-import { g as getElementDir } from "../../chunks/dom.js";
 import { s as syncHiddenFormInput } from "../../chunks/input.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { i as isValidNumber } from "../../chunks/locale.js";
@@ -49,6 +49,7 @@ class InputTimePicker extends LitElement {
     super();
     this.messages = useT9n();
     this.containerRef = createRef();
+    this.direction = useDirection();
     this.focusSetter = useSetFocus()(this);
     this.fractionalSecondRef = createRef();
     this.hourRef = createRef();
@@ -311,7 +312,7 @@ class InputTimePicker extends LitElement {
     const showFractionalSecond = decimalPlaces(this.step) > 0;
     const showMeridiem = hourFormat === "12";
     const showSecond = this.step < 60;
-    const meridiemStart = meridiemOrder === 0 || getElementDir(this.el) === "rtl";
+    const meridiemStart = meridiemOrder === 0 || this.direction === "rtl";
     const isInteractive = !this.disabled && !this.readOnly;
     return this.interactiveContainer({ disabled: this.disabled, children: html`${this.labelText && InternalLabel({ labelText: this.labelText, onClick: this.onLabelClick, required: this.required, tooltipText: this.messages.required }) || ""}<div aria-controls=${IDS.inputContainer} aria-labelledby=${IDS.inputContainer} class=${safeClassMap({
       [CSS.container]: true,

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

@@ -4,7 +4,7 @@ import { css, html } from "lit";
 import { literal, html as html$1 } from "lit/static-html.js";
 import { LitElement, stringOrBoolean, safeClassMap, nothing } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { g as getElementDir } from "../../chunks/dom.js";
+import { useDirection } from "@arcgis/lumina/controllers";
 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:inline}:host a,:host button{position:relative;display:flex;cursor:pointer;align-items:center;justify-content:center;border-radius:0;border-style:none;font-family:inherit;text-decoration:none;line-height:inherit;font-size:inherit;-webkit-appearance:none}:host a:hover,:host button:hover{text-decoration:none}:host a,:host button{transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform,background-size;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;outline-color:transparent}:host a:focus,:host button:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(var(--calcite-spacing-base) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}calcite-icon{inline-size:1em;block-size:1em;min-inline-size:unset;min-block-size:unset}.calcite-link--icon{vertical-align:middle;margin-block-start:-.25em}:host .calcite-link--icon.icon-start{margin-inline-end:.5rem}:host .calcite-link--icon.icon-end{margin-inline-start:.5rem}:host button,:host a{position:relative;display:inline;border-style:none;background-color:transparent;padding:0;color:var(--calcite-link-text-color, var(--calcite-color-text-link));line-height:inherit;white-space:initial;background-image:linear-gradient(currentColor,currentColor),linear-gradient(var(--calcite-color-brand-underline),var(--calcite-color-brand-underline));background-position-x:0%,100%;background-position-y:min(1.5em,100%);background-repeat:no-repeat,no-repeat;background-size:0% 1px,100% 1px}:host button:hover,:host button:focus,:host a:hover,:host a:focus{background-size:100% 1px,100% 1px}:host button:active,:host a:active{background-size:100% 2px,100% 2px}:host button.calcite--rtl,:host a.calcite--rtl{background-position:100% 100%,100% 100%}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([hidden]){display:none}[hidden]{display:none}`;
@@ -17,6 +17,7 @@ class Link extends LitElement {
   constructor() {
     super();
     this.childRef = createRef();
+    this.direction = useDirection();
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
     this.disabled = false;
@@ -46,8 +47,8 @@ class Link extends LitElement {
     }
   }
   render() {
-    const { download, el } = this;
-    const dir = getElementDir(el);
+    const { download } = this;
+    const dir = this.direction;
     const childElType = this.href ? "a" : "button";
     const iconStartEl = html`<calcite-icon class=${safeClassMap({ [CSS.calciteLinkIcon]: true, [CSS.iconStart]: true })} .flipRtl=${this.iconFlipRtl === "start" || this.iconFlipRtl === "both"} .icon=${this.iconStart} scale=s></calcite-icon>`;
     const iconEndEl = html`<calcite-icon class=${safeClassMap({ [CSS.calciteLinkIcon]: true, [CSS.iconEnd]: true })} .flipRtl=${this.iconFlipRtl === "end" || this.iconFlipRtl === "both"} .icon=${this.iconEnd} scale=s></calcite-icon>`;

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

@@ -5,7 +5,7 @@ import { keyed } from "lit/directives/keyed.js";
 import { debounce } from "es-toolkit";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { n as slotChangeHasContent, s as slotChangeHasAssignedElement, h as getRootNode } from "../../chunks/dom.js";
+import { m as slotChangeHasContent, s as slotChangeHasAssignedElement, e as getRootNode } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { l as listItemSelector, i as isListItem, a as listSelector, u as updateListItemChildren, b as listItemGroupSelector, e as expandedAncestors } from "../../chunks/utils4.js";
 import { d as disconnectSortableComponent, c as connectSortableComponent } from "../../chunks/sortableComponent.js";

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

@@ -4,7 +4,8 @@ import { keyed } from "lit/directives/keyed.js";
 import { css, html, nothing } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { s as slotChangeHasAssignedElement, v as getFirstTabbable, g as getElementDir } from "../../chunks/dom.js";
+import { useDirection } from "@arcgis/lumina/controllers";
+import { s as slotChangeHasAssignedElement, u as getFirstTabbable } from "../../chunks/dom.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { l as logger } from "../../chunks/logger.js";
@@ -23,6 +24,7 @@ class ListItem extends LitElement {
     this.containerRef = createRef();
     this.contentRef = createRef();
     this.defaultSlotRef = createRef();
+    this.direction = useDirection();
     this.handleGridRef = createRef();
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
@@ -375,11 +377,11 @@ class ListItem extends LitElement {
     return dragHandle ? keyed("drag-handle-container", html`<div .ariaLabel=${label} class=${safeClassMap({ [CSS.dragContainer]: true, [CSS.gridCell]: true })} role=gridcell ${ref(this.handleGridRef)}><calcite-sort-handle .addToItems=${addToItems} .disabled=${dragDisabled} .label=${label} .moveToItems=${moveToItems} @calciteSortHandleBeforeClose=${this.handleSortHandleBeforeClose} @calciteSortHandleBeforeOpen=${this.handleSortHandleBeforeOpen} @calciteSortHandleClose=${this.handleSortHandleClose} @calciteSortHandleOpen=${this.handleSortHandleOpen} overlay-positioning=fixed .scale=${this.scale} .setPosition=${setPosition} .setSize=${setSize} .sortDisabled=${sortDisabled} .topLayerDisabled=${this.topLayerDisabled} ${ref(this.setSortHandleEl)}></calcite-sort-handle></div>`) : null;
   }
   renderExpanded() {
-    const { el, expanded, expandable, messages, displayMode, scale } = this;
+    const { expanded, expandable, messages, displayMode, scale } = this;
     if (displayMode !== "nested") {
       return null;
     }
-    const dir = getElementDir(el);
+    const dir = this.direction;
     const icon = expandable ? expanded ? ICONS.open : dir === "rtl" ? ICONS.collapsedRTL : ICONS.collapsedLTR : ICONS.blank;
     const iconScale = getIconScale(scale);
     const tooltip = expandable ? expanded ? messages.collapse : messages.expand : void 0;

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

@@ -3,7 +3,7 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement } from "@arcgis/lumina";
 import { useWatchAttributes } from "@arcgis/lumina/controllers";
-import { f as focusElementInGroup, b as slotChangeGetAssignedElements, j as focusElement } from "../../chunks/dom.js";
+import { f as focusElementInGroup, a as slotChangeGetAssignedElements, i as focusElement } from "../../chunks/dom.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 const styles = css`:host{display:flex}ul{margin:0;display:inline-flex;block-size:100%;align-items:center;padding:0}:host([layout=vertical]) ul{display:flex;inline-size:100%;flex-direction:column}:host([hidden]){display:none}[hidden]{display:none}`;

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

@@ -4,7 +4,8 @@ import { css, html } from "lit";
 import { keyed } from "lit/directives/keyed.js";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap, nothing } from "@arcgis/lumina";
-import { b as slotChangeGetAssignedElements, g as getElementDir } from "../../chunks/dom.js";
+import { useDirection } from "@arcgis/lumina/controllers";
+import { a as slotChangeGetAssignedElements } from "../../chunks/dom.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 const CSS = {
@@ -42,6 +43,7 @@ class MenuItem extends LitElement {
   constructor() {
     super();
     this.anchorRef = createRef();
+    this.direction = useDirection();
     this.dropdownActionRef = createRef();
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
@@ -193,7 +195,7 @@ class MenuItem extends LitElement {
     return html`${this.iconStart && this.renderIconStart() || ""}<div class=${safeClassMap(CSS.textContainer)}><span>${this.text}</span></div>${hasHref && this.renderHrefIcon(dir) || ""}${this.iconEnd && this.renderIconEnd() || ""}${this.breadcrumb ? this.renderBreadcrumbIcon(dir) : null}${!this.href && this.hasSubmenu ? this.renderDropdownIcon(dir) : null}`;
   }
   render() {
-    const dir = getElementDir(this.el);
+    const dir = this.direction;
     return html`<li class=${safeClassMap({
       [CSS.container]: true,
       [CSS.isParentVertical]: this.topLevelMenuLayout === "vertical"

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

@@ -6,7 +6,7 @@ import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, safeClassMap, safeStyleMap } from "@arcgis/lumina";
 import { c as connectForm, a as afterConnectDefaultValueSet, d as disconnectForm } from "../../chunks/form.js";
 import { n as numberStringFormatter } from "../../chunks/locale.js";
-import { x as intersects } from "../../chunks/dom.js";
+import { v as intersects } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 const CSS = {

package/dist/components/calcite-notice/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, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
-import { d as setRequestedIcon, s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
+import { b as setRequestedIcon, s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
 import { K as KindIcons, a as KindIconsFilled } from "../../chunks/resources4.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
 import { g as getIconScale } from "../../chunks/component.js";

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

@@ -12,8 +12,8 @@ import type { IconName } from "../calcite-icon/interfaces.js";
  * @cssproperty [--calcite-panel-description-text-color] - Specifies the text color of the component's `description`.
  * @cssproperty [--calcite-panel-border-color] - Specifies the component's border color.
  * @cssproperty [--calcite-panel-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-panel-content-top-space] - Specifies the padding of the `"content-top"` slot.
- * @cssproperty [--calcite-panel-content-bottom-space] - Specifies the padding of the `"content-bottom"` slot.
+ * @cssproperty [--calcite-panel-content-top-space] - Specifies the padding of the component's `content-top` slot.
+ * @cssproperty [--calcite-panel-content-bottom-space] - Specifies the padding of the component's `content-bottom` slot.
  * @cssproperty [--calcite-panel-header-background-color] - Specifies the background color of the component's header.
  * @cssproperty [--calcite-panel-header-action-background-color] - Specifies the background color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions`.
  * @cssproperty [--calcite-panel-header-action-background-color-hover] - Specifies the background color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when hovered.
@@ -21,8 +21,8 @@ import type { IconName } from "../calcite-icon/interfaces.js";
  * @cssproperty [--calcite-panel-header-action-text-color] - Specifies the text color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions`.
  * @cssproperty [--calcite-panel-header-action-text-color-press] - Specifies the text color of the component's `closable`, `collapsible`, and elements slotted in `header-menu-actions` when pressed or hovered.
  * @cssproperty [--calcite-panel-footer-background-color] - Specifies the background color of the component's footer.
- * @cssproperty [--calcite-panel-space] - Specifies the padding of the component's `"unnamed (default)"` slot.
- * @cssproperty [--calcite-panel-header-content-space] - Specifies the padding of the `"header-content"` slot.
+ * @cssproperty [--calcite-panel-space] - Specifies the padding of the component's `unnamed (default)` slot.
+ * @cssproperty [--calcite-panel-header-content-space] - Specifies the padding of the component's `header-content` slot.
  * @cssproperty [--calcite-panel-footer-space] - Specifies the padding of the component's footer.
  * @cssproperty [--calcite-popover-border-color] - Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s.
  * @cssproperty [--calcite-panel-content-space] - [Deprecated] Use `--calcite-panel-space` instead. Specifies the padding of the component's content.

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

@@ -4,7 +4,7 @@ import { keyed } from "lit/directives/keyed.js";
 import { css, html, nothing } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { s as slotChangeHasAssignedElement, b as slotChangeGetAssignedElements } from "../../chunks/dom.js";
+import { s as slotChangeHasAssignedElement, a as slotChangeGetAssignedElements } from "../../chunks/dom.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { c as createObserver, u as updateRefObserver } from "../../chunks/observers.js";
 import { S as SLOTS$1 } from "../../chunks/resources2.js";

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

@@ -4,8 +4,9 @@ import { keyed } from "lit/directives/keyed.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap, setAttribute } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
+import { useDirection } from "@arcgis/lumina/controllers";
 import { e as defaultOffsetDistance, r as reposition, a as disconnectFloatingUI, f as filterValidFlipPlacements, c as connectFloatingUI, h as hideFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
-import { k as isPrimaryPointerButton, y as isKeyboardTriggeredClick, q as queryElementRoots } from "../../chunks/dom.js";
+import { j as isPrimaryPointerButton, x as isKeyboardTriggeredClick, q as queryElementRoots } from "../../chunks/dom.js";
 import { t as toAriaBoolean } from "../../chunks/aria.js";
 import { g as guid } from "../../chunks/guid.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
@@ -129,6 +130,7 @@ const manager = new PopoverManager();
 class Popover extends LitElement {
   constructor() {
     super(...arguments);
+    this.direction = useDirection();
     this.focusTrap = useFocusTrap({
       triggerProp: "open",
       focusTrapOptions: {
@@ -181,6 +183,7 @@ class Popover extends LitElement {
   async reposition(delayed = false) {
     const { referenceEl, placement, overlayPositioning, flipDisabled, filteredFlipPlacements, offsetDistance, offsetSkidding, arrowEl, floatingEl } = this;
     return reposition(this, {
+      direction: this.direction,
       floatingEl,
       referenceEl,
       overlayPositioning,

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

@@ -2,7 +2,7 @@
 import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, safeClassMap, safeStyleMap } from "@arcgis/lumina";
-import { g as getElementDir } from "../../chunks/dom.js";
+import { useDirection } from "@arcgis/lumina/controllers";
 const styles = css`:host{position:relative;display:block;inline-size:100%}.track,.bar{position:absolute;inset-block-start:0px;block-size:2px}.track{z-index:var(--calcite-z-index);inline-size:100%;overflow:hidden;background-color:var(--calcite-progress-background-color, var(--calcite-color-border-3))}.bar{z-index:var(--calcite-z-index);background-color:var(--calcite-progress-fill-color, var(--calcite-color-brand))}@media(forced-colors:active){.track{background-color:highlightText}.bar{background-color:linkText}}.indeterminate{inline-size:20%;animation:looping-progress-bar-ani calc(var(--calcite-internal-animation-timing-medium) / var(--calcite-internal-duration-factor) * 11 / var(--calcite-internal-duration-factor)) linear infinite}.indeterminate.calcite--rtl{animation-name:looping-progress-bar-ani-rtl}.reversed{animation-direction:reverse}.text{padding-inline:0px;padding-block:1rem 0px;text-align:center;font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-sm);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-progress-text-color, var(--calcite-color-text-2))}@keyframes looping-progress-bar-ani{0%{transform:translate3d(-100%,0,0)}50%{inline-size:40%}to{transform:translate3d(600%,0,0)}}@keyframes looping-progress-bar-ani-rtl{0%{transform:translate3d(100%,0,0)}50%{inline-size:40%}to{transform:translate3d(-600%,0,0)}}:host([hidden]){display:none}[hidden]{display:none}`;
 const CSS = {
   track: "track",
@@ -12,6 +12,7 @@ const CSS = {
 class Progress extends LitElement {
   constructor() {
     super(...arguments);
+    this.direction = useDirection();
     this.reversed = false;
     this.type = "determinate";
     this.value = 0;
@@ -25,7 +26,7 @@ class Progress extends LitElement {
   render() {
     const isDeterminate = this.type === "determinate";
     const barStyles = isDeterminate ? { width: `${this.value}%` } : {};
-    const dir = getElementDir(this.el);
+    const dir = this.direction;
     return html`<div .ariaLabel=${this.label || this.text} .ariaValueMax=${isDeterminate ? "100" : void 0} .ariaValueMin=${isDeterminate ? "0" : void 0} .ariaValueNow=${isDeterminate ? this.value : void 0} role=progressbar><div class=${safeClassMap(CSS.track)}><div class=${safeClassMap({
       [CSS.bar]: true,
       indeterminate: this.type === "indeterminate",

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

@@ -3,8 +3,8 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, nothing, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
+import { useDirection } from "@arcgis/lumina/controllers";
 import { g as getRoundRobinIndex } from "../../chunks/array.js";
-import { g as getElementDir } from "../../chunks/dom.js";
 import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from "../../chunks/form.js";
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
@@ -19,6 +19,7 @@ class RadioButton extends LitElement {
   constructor() {
     super();
     this.containerRef = createRef();
+    this.direction = useDirection();
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
     this.checked = false;
@@ -196,7 +197,6 @@ class RadioButton extends LitElement {
   handleKeyDown(event) {
     const keys = ["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", " "];
     const { key } = event;
-    const { el } = this;
     if (keys.indexOf(key) === -1) {
       return;
     }
@@ -206,7 +206,7 @@ class RadioButton extends LitElement {
       return;
     }
     let adjustedKey = key;
-    if (getElementDir(el) === "rtl") {
+    if (this.direction === "rtl") {
       if (key === "ArrowRight") {
         adjustedKey = "ArrowLeft";
       }

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

@@ -4,7 +4,7 @@ import { css, html } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { c as createObserver } from "../../chunks/observers.js";
-import { n as slotChangeHasContent } from "../../chunks/dom.js";
+import { m as slotChangeHasContent } from "../../chunks/dom.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 const CSS = {
   scrim: "scrim",

package/dist/components/calcite-segmented-control/customElement.js

@@ -2,7 +2,8 @@
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, isServer, nothing, html } from "lit";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
-import { g as getElementDir, b as slotChangeGetAssignedElements } from "../../chunks/dom.js";
+import { useDirection } from "@arcgis/lumina/controllers";
+import { a as slotChangeGetAssignedElements } from "../../chunks/dom.js";
 import { c as connectForm, a as afterConnectDefaultValueSet, d as disconnectForm, H as HiddenFormInputSlot } from "../../chunks/form.js";
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
@@ -20,6 +21,7 @@ const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;use
 class SegmentedControl extends LitElement {
   constructor() {
     super();
+    this.direction = useDirection();
     this.items = [];
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
@@ -119,12 +121,12 @@ class SegmentedControl extends LitElement {
   handleKeyDown(event) {
     const keys = ["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown", " "];
     const { key } = event;
-    const { el, selectedItem } = this;
+    const { selectedItem } = this;
     if (keys.indexOf(key) === -1) {
       return;
     }
     let adjustedKey = key;
-    if (getElementDir(el) === "rtl") {
+    if (this.direction === "rtl") {
       if (key === "ArrowRight") {
         adjustedKey = "ArrowLeft";
       }

package/dist/components/calcite-segmented-control-item/customElement.js

@@ -2,7 +2,7 @@
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { n as slotChangeHasContent } from "../../chunks/dom.js";
+import { m as slotChangeHasContent } from "../../chunks/dom.js";
 import { t as toAriaBoolean } from "../../chunks/aria.js";
 const SLOTS = {
   input: "input"

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

@@ -5,7 +5,8 @@ import { u as useSizeOverride, i as interact } from "../../chunks/useSizeOverrid
 import { css, html } from "lit";
 import { LitElement, createEvent, setAttribute, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { z as ensureId, g as getElementDir, a as getStylePixelValue } from "../../chunks/dom.js";
+import { useDirection } from "@arcgis/lumina/controllers";
+import { y as ensureId, g as getStylePixelValue } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
 import { g as getDimensionClass } from "../../chunks/dynamicClasses.js";
@@ -37,6 +38,7 @@ class Sheet extends LitElement {
   constructor() {
     super();
     this.contentRef = createRef();
+    this.direction = useDirection();
     this.focusTrap = useFocusTrap({
       triggerProp: "open",
       focusTrapOptions: {
@@ -178,14 +180,14 @@ class Sheet extends LitElement {
   }
   handleKeyDown(event) {
     const { key, defaultPrevented, shiftKey } = event;
-    const { contentRef, position, resizable, el, resizeValues: { maxBlockSize, maxInlineSize, minBlockSize, minInlineSize } } = this;
+    const { contentRef, position, resizable, resizeValues: { maxBlockSize, maxInlineSize, minBlockSize, minInlineSize } } = this;
     const arrowKeys = position === "block-end" || position === "block-start" ? ["ArrowUp", "ArrowDown"] : ["ArrowLeft", "ArrowRight"];
     const keys = [...arrowKeys, "Home", "End"];
     if (!resizable || !contentRef.value || defaultPrevented || !keys.includes(key)) {
       return;
     }
     const rect = this.getContentRefDOMRect();
-    const invertRTL = getElementDir(el) === "rtl" ? -1 : 1;
+    const invertRTL = this.direction === "rtl" ? -1 : 1;
     const stepValue = shiftKey ? resizeShiftStep : resizeStep;
     switch (key) {
       case "ArrowUp":
@@ -256,7 +258,8 @@ class Sheet extends LitElement {
       maxInlineSize: getStylePixelValue(maxInlineSize) || window.innerWidth,
       maxBlockSize: getStylePixelValue(maxBlockSize) || window.innerHeight
     };
-    const rtl = getElementDir(el) === "rtl";
+    this.resizeValues = values;
+    const rtl = this.direction === "rtl";
     this.interaction = interact(contentRef.value, { context: el.ownerDocument }).resizable({
       edges: {
         top: position === "block-end" ? resizeHandleEl : false,
@@ -318,7 +321,7 @@ class Sheet extends LitElement {
   }
   render() {
     const { resizable, position, resizeValues } = this;
-    const dir = getElementDir(this.el);
+    const dir = this.direction;
     const isBlockPosition = position === "block-start" || position === "block-end";
     setAttribute(this.el, "aria-describedby", this.contentId);
     this.el.ariaLabel = this.label;

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

@@ -3,7 +3,7 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, html } from "lit";
 import { LitElement, 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";
 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{position:absolute;inset:0;display:flex;block-size:100%;inline-size:100%;flex-direction:column;overflow:hidden}.main{position:relative;display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;flex-direction:row;justify-content:space-between;overflow:hidden}.content{display:flex;block-size:100%;inline-size:100%;flex-direction:column;flex-wrap:nowrap;overflow:auto;justify-content:space-between}.content ::slotted(calcite-panel),.content ::slotted(calcite-flow){flex:1 1 auto;align-self:stretch;max-block-size:unset}.content--behind{position:absolute;inset:0;border-width:0px;z-index:calc(var(--calcite-z-index) - 1);display:initial}.content--non-interactive{pointer-events:none;display:flex;block-size:100%;inline-size:100%;flex-direction:column;flex-wrap:nowrap}::slotted(calcite-shell-panel){inline-size:unset}::slotted(.header .heading){font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug);font-weight:var(--calcite-font-weight-normal)}slot[name=panel-start]::slotted(calcite-shell-panel),slot[name=panel-end]::slotted(calcite-shell-panel){position:relative;z-index:calc(var(--calcite-z-index) + 1)}slot[name=panel-end]::slotted(calcite-shell-panel){margin-inline-start:auto}::slotted(calcite-panel),::slotted(calcite-flow){border-width:var(--calcite-border-width-sm);border-color:var(--calcite-shell-border-color, var(--calcite-color-border-3));border-inline-start-width:var(--calcite-border-width-none);border-inline-end-width:var(--calcite-border-width-none);border-style:solid}slot[name=panel-top]::slotted(calcite-shell-panel:not([display-mode^=float])),slot[name=panel-bottom]::slotted(calcite-shell-panel:not([display-mode^=float])){border-color:var(--calcite-shell-border-color, var(--calcite-color-border-3));border-inline-start-width:var(--calcite-border-width-sm);border-inline-end-width:var(--calcite-border-width-sm)}.center-content{display:flex;flex-direction:column;justify-content:space-between;block-size:100%;inline-size:100%;min-inline-size:0}.content-bottom{justify-content:flex-end}::slotted(calcite-shell-panel){flex:none;align-self:stretch}::slotted(calcite-tip-manager){position:absolute;z-index:var(--calcite-z-index-toast);box-sizing:border-box}@keyframes in-up{0%{opacity:0;transform:translate3D(0,5px,0)}to{opacity:1;transform:translateZ(0)}}::slotted(calcite-tip-manager){animation:in-up var(--calcite-internal-animation-timing-slow) ease-in-out;border-radius:.25rem;--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(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);inset-block-end:.5rem;inset-inline:var(--calcite-shell-tip-spacing, 26vw)}slot[name=panel-bottom]::slotted(calcite-shell-panel){margin-block-start:auto}slot[name=panel-top]::slotted(calcite-shell-panel){margin-block-end:auto}.position-wrapper{position:absolute;pointer-events:none;inset:0}:host([hidden]){display:none}[hidden]{display:none}`;
 const CSS = {
   main: "main",

package/dist/components/calcite-shell-panel/customElement.js

@@ -5,7 +5,8 @@ import { u as useSizeOverride, i as interact } from "../../chunks/useSizeOverrid
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { g as getElementDir, a as getStylePixelValue, b as slotChangeGetAssignedElements, s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
+import { useDirection } from "@arcgis/lumina/controllers";
+import { g as getStylePixelValue, a as slotChangeGetAssignedElements, s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
 import { g as getDimensionClass } from "../../chunks/dynamicClasses.js";
 import { a as ariaValueFromSize } from "../../chunks/aria.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
@@ -35,6 +36,7 @@ const styles = css`:host{pointer-events:none;position:relative;display:flex;flex
 class ShellPanel extends LitElement {
   constructor() {
     super(...arguments);
+    this.direction = useDirection();
     this.actionBars = [];
     this.contentRef = createRef();
     this.messages = useT9n();
@@ -104,14 +106,14 @@ class ShellPanel extends LitElement {
   }
   handleKeyDown(event) {
     const { key, defaultPrevented, shiftKey } = event;
-    const { position, layout, resizable, contentRef, el, resizeValues: { maxBlockSize, maxInlineSize, minBlockSize, minInlineSize } } = this;
+    const { position, layout, resizable, contentRef, resizeValues: { maxBlockSize, maxInlineSize, minBlockSize, minInlineSize } } = this;
     const arrowKeys = layout === "horizontal" ? ["ArrowUp", "ArrowDown"] : ["ArrowLeft", "ArrowRight"];
     const keys = [...arrowKeys, "Home", "End"];
     if (!resizable || !contentRef.value || defaultPrevented || !keys.includes(key)) {
       return;
     }
     const rect = this.getContentElDOMRect();
-    const invertRTL = getElementDir(el) === "rtl" ? -1 : 1;
+    const invertRTL = this.direction === "rtl" ? -1 : 1;
     const stepValue = shiftKey ? resizeShiftStep : resizeStep;
     switch (key) {
       case "ArrowUp":
@@ -168,7 +170,7 @@ class ShellPanel extends LitElement {
       maxBlockSize: getStylePixelValue(maxBlockSize) || window.innerHeight
     };
     this.resizeValues = values;
-    const rtl = getElementDir(el) === "rtl";
+    const rtl = this.direction === "rtl";
     this.interaction = interact(contentRef.value, { context: el.ownerDocument }).resizable({
       edges: {
         top: position === "end" && layout === "horizontal" ? resizeHandleEl : false,
@@ -226,7 +228,7 @@ class ShellPanel extends LitElement {
   }
   render() {
     const { collapsed, position, resizable, layout, displayMode, resizeValues } = this;
-    const dir = getElementDir(this.el);
+    const dir = this.direction;
     const isBlockPosition = layout === "horizontal";
     const separatorNode = !collapsed && resizable ? keyed("resize-handle", html`<div .ariaLabel=${this.messages.resize} .ariaOrientation=${isBlockPosition ? "vertical" : "horizontal"} .ariaValueMax=${ariaValueFromSize(isBlockPosition ? "block" : "inline", resizeValues.maxBlockSize, resizeValues.maxInlineSize)} .ariaValueMin=${ariaValueFromSize(isBlockPosition ? "block" : "inline", resizeValues.minBlockSize, resizeValues.minInlineSize)} .ariaValueNow=${ariaValueFromSize(isBlockPosition ? "block" : "inline", resizeValues.blockSize, resizeValues.inlineSize)} class=${safeClassMap(CSS.resizeHandle)} @keydown=${this.handleKeyDown} role=separator tabindex=0 touch-action=none ${ref(this.setResizeHandleEl)}><div class=${safeClassMap(CSS.resizeHandleBar)}><calcite-icon .icon=${this.getResizeIcon()} scale=s></calcite-icon></div></div>`) : null;
     const getAnimationDir = () => {

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

@@ -5,7 +5,7 @@ import { css, html, nothing } from "lit";
 import { LitElement, createEvent, stringOrBoolean, setAttribute, safeClassMap, safeStyleMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { g as guid } from "../../chunks/guid.js";
-import { k as isPrimaryPointerButton, x as intersects } from "../../chunks/dom.js";
+import { j as isPrimaryPointerButton, v as intersects } from "../../chunks/dom.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
 import { V as Validation } from "../../chunks/Validation.js";
 import { c as connectForm, a as afterConnectDefaultValueSet, d as disconnectForm, H as HiddenFormInputSlot } from "../../chunks/form.js";

package/dist/components/calcite-sortable-list/customElement.js

@@ -4,7 +4,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 { j as focusElement } from "../../chunks/dom.js";
+import { i as focusElement } from "../../chunks/dom.js";
 import { l as logger } from "../../chunks/logger.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 const CSS = {

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

@@ -3,7 +3,7 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { svg, html, css, nothing } from "lit";
 import { safeClassMap, LitElement, createEvent } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { f as focusElementInGroup, b as slotChangeGetAssignedElements } from "../../chunks/dom.js";
+import { f as focusElementInGroup, a as slotChangeGetAssignedElements } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { g as guid } from "../../chunks/guid.js";
 import { u as useT9n } from "../../chunks/useT9n.js";

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

@@ -7,7 +7,7 @@ import { n as numberStringFormatter } from "../../chunks/locale.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { i as isHidden } from "../../chunks/component.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
-import { n as slotChangeHasContent } from "../../chunks/dom.js";
+import { m as slotChangeHasContent } from "../../chunks/dom.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 const CSS = {
   container: "container",

package/dist/components/calcite-swatch-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, safeClassMap } 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 CSS = {

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

@@ -2,7 +2,7 @@
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, setAttribute, safeClassMap } from "@arcgis/lumina";
-import { o as nodeListToArray } from "../../chunks/dom.js";
+import { n as nodeListToArray } from "../../chunks/dom.js";
 import { g as guid } from "../../chunks/guid.js";
 const CSS = {
   container: "container",

package/dist/components/calcite-tab-nav/customElement.js

@@ -5,7 +5,8 @@ import { keyed } from "lit/directives/keyed.js";
 import { a as calciteSize24, b as calciteSize32, d as calciteSize44 } from "../../chunks/core.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { g as getElementDir, A as filterDirectChildren, f as focusElementInGroup, j as focusElement } from "../../chunks/dom.js";
+import { useDirection } from "@arcgis/lumina/controllers";
+import { z as filterDirectChildren, f as focusElementInGroup, i as focusElement } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 const ICON = {
@@ -26,6 +27,7 @@ const styles = css`:host{position:relative;display:flex}:host([bordered]) .scrol
 class TabNav extends LitElement {
   constructor() {
     super();
+    this.direction = useDirection();
     this.effectiveDir = "ltr";
     this.lastScrollWheelAxis = "x";
     this.resizeObserver = createObserver("resize", () => {
@@ -82,7 +84,7 @@ class TabNav extends LitElement {
     const { parentTabsEl } = this;
     this.layout = parentTabsEl?.layout;
     this.bordered = parentTabsEl?.bordered;
-    this.effectiveDir = getElementDir(this.el);
+    this.effectiveDir = this.direction;
   }
   loaded() {
     this.scrollTabTitleIntoView(this.selectedTitle, "instant");

package/dist/components/calcite-tab-title/customElement.js

@@ -4,7 +4,8 @@ import { keyed } from "lit/directives/keyed.js";
 import { css, isServer, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap, setAttribute } from "@arcgis/lumina";
-import { o as nodeListToArray, g as getElementDir } from "../../chunks/dom.js";
+import { useDirection } from "@arcgis/lumina/controllers";
+import { n as nodeListToArray } from "../../chunks/dom.js";
 import { t as toAriaBoolean } from "../../chunks/aria.js";
 import { g as guid } from "../../chunks/guid.js";
 import { c as createObserver, u as updateRefObserver } from "../../chunks/observers.js";
@@ -33,6 +34,7 @@ class TabTitle extends LitElement {
   constructor() {
     super();
     this.closeButtonRef = createRef();
+    this.direction = useDirection();
     this.guid = IDS.host(guid());
     this.mutationObserver = createObserver("mutation", () => this.updateHasText());
     this.resizeObserver = createObserver("resize", () => {
@@ -153,7 +155,7 @@ class TabTitle extends LitElement {
         break;
       case "ArrowRight":
         event.preventDefault();
-        if (getElementDir(this.el) === "ltr") {
+        if (this.direction === "ltr") {
           this.calciteInternalTabsFocusNext.emit();
         } else {
           this.calciteInternalTabsFocusPrevious.emit();
@@ -161,7 +163,7 @@ class TabTitle extends LitElement {
         break;
       case "ArrowLeft":
         event.preventDefault();
-        if (getElementDir(this.el) === "ltr") {
+        if (this.direction === "ltr") {
           this.calciteInternalTabsFocusPrevious.emit();
         } else {
           this.calciteInternalTabsFocusNext.emit();