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

package/dist/components/calcite-input-text/customElement.js

@@ -4,17 +4,175 @@ import { live } from "lit/directives/live.js";
 import { css, html, nothing } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
-import { useWatchAttributes } from "@arcgis/lumina/controllers";
-import { d as setRequestedIcon, g as getElementDir } from "../../chunks/dom.js";
-import { c as connectForm, i as internalHiddenInputInputEvent, d as disconnectForm, s as submitForm, H as HiddenFormInputSlot } from "../../chunks/form.js";
+import { makeGenericController, useWatchAttributes, useDirection } from "@arcgis/lumina/controllers";
+import { b as setRequestedIcon } from "../../chunks/dom.js";
+import { uncapitalize, kebabToPascal } from "@arcgis/toolkit/string";
+import { a as syncInputDelegate, i as isSupportedType } from "../../chunks/input.js";
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.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 { s as syncHiddenFormInput } from "../../chunks/input.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
+const componentsWithInputEvent = [
+  "calcite-input",
+  "calcite-input-number",
+  "calcite-input-text",
+  "calcite-text-area"
+];
+function getClearValidationEventName(componentTag) {
+  const componentTagCamelCase = uncapitalize(kebabToPascal(componentTag));
+  return `${componentTagCamelCase}${componentsWithInputEvent.includes(componentTag) ? "Input" : "Change"}`;
+}
+function displayValidationMessage(component, { status, message, icon }) {
+  if ("status" in component) {
+    component.status = status;
+  }
+  if ("validationIcon" in component && typeof component.validationIcon !== "string") {
+    component.validationIcon = icon;
+  }
+  if ("validationMessage" in component && !component.validationMessage) {
+    component.validationMessage = message;
+  }
+}
+function syncInternalInput(component, input) {
+  const { disabled, required } = component;
+  input.disabled = disabled;
+  input.required = !!required;
+  if (isCheckable(component)) {
+    input.checked = component.checked;
+  } else if (isInputComponent(component, input)) {
+    syncInputDelegate(input.type, component, input);
+  }
+}
+function isCheckable(component) {
+  return "checked" in component;
+}
+function isInputComponent(component, input) {
+  return component && isSupportedType(input.type);
+}
+const useForm = (options) => {
+  return makeGenericController((component, controller) => {
+    let defaultValueDirty = false;
+    let defaultCheckedDirty = false;
+    let inputDelegate;
+    let lastAssociatedForm = null;
+    if (options.inputType) {
+      inputDelegate = document.createElement("input");
+      inputDelegate.type = options.inputType;
+    }
+    function invalidFormHandler(event) {
+      event?.preventDefault();
+    }
+    function onFormReset() {
+      if ("status" in component) {
+        component.status = "idle";
+      }
+      if ("validationIcon" in component) {
+        component.validationIcon = false;
+      }
+      if ("validationMessage" in component) {
+        component.validationMessage = "";
+      }
+      if (isCheckable(component)) {
+        component.checked = defaultCheckedDirty ? component.defaultChecked : component.checked;
+      }
+      component.value = defaultValueDirty ? component.defaultValue : component.value;
+      defaultValueDirty = false;
+      defaultCheckedDirty = false;
+    }
+    component.listen("luminaFormResetCallback", () => {
+      onFormReset();
+    });
+    component.listen("luminaFormAssociatedCallback", ({ detail: [form] }) => {
+      if (form) {
+        form.addEventListener("invalid", invalidFormHandler, { capture: true });
+      } else {
+        lastAssociatedForm?.removeEventListener("invalid", invalidFormHandler, { capture: true });
+      }
+      lastAssociatedForm = form;
+    });
+    function handleInvalidInput() {
+      const validationMsg = inputDelegate?.validationMessage || "";
+      component.el.dispatchEvent(
+        // allows users to set custom validation messages
+        new CustomEvent("calciteInvalid", { bubbles: true, composed: true })
+      );
+      displayValidationMessage(component, {
+        message: validationMsg,
+        icon: true,
+        status: "invalid"
+      });
+      const clearValidationEvent = getClearValidationEventName(component.el.tagName.toLowerCase());
+      component.listen(
+        clearValidationEvent,
+        () => {
+          if ("status" in component) {
+            component.status = "idle";
+          }
+          if ("validationIcon" in component && (!component.validationIcon || component.validationIcon === true)) {
+            component.validationIcon = false;
+          }
+          if ("validationMessage" in component && component.validationMessage === validationMsg) {
+            component.validationMessage = "";
+          }
+        },
+        { once: true }
+      );
+    }
+    controller.onConnected(() => {
+      component.el.addEventListener("invalid", handleInvalidInput);
+    });
+    controller.onDisconnected(() => {
+      component.el.removeEventListener("invalid", handleInvalidInput);
+    });
+    controller.onUpdate((changes) => {
+      if (changes.has("value") && !defaultValueDirty) {
+        defaultValueDirty = true;
+        component.defaultValue = component.value;
+      }
+      if (isCheckable(component) && changes.has("checked") && !defaultCheckedDirty) {
+        defaultCheckedDirty = true;
+        component.defaultChecked = component.checked;
+      }
+      if (changes.has("value") || isCheckable(component) && changes.has("checked")) {
+        component.elementInternals.setFormValue(getFormValue());
+      }
+      if (inputDelegate) {
+        inputDelegate.value = component.value;
+        syncInternalInput(component, inputDelegate);
+        inputDelegate.checkValidity();
+        component.elementInternals.setValidity(inputDelegate.validity, inputDelegate.validationMessage);
+        if ("validity" in component) {
+          component.validity = component.elementInternals.validity;
+        }
+      }
+    });
+    function getFormValue() {
+      if (Array.isArray(component.value)) {
+        const formData = new FormData();
+        component.value.forEach((value) => formData.append(component.name, value));
+        return formData;
+      }
+      if (isCheckable(component)) {
+        if (component.checked) {
+          return component.defaultValue === void 0 && !defaultValueDirty && component.value === void 0 ? "on" : component.value;
+        }
+        return null;
+      }
+      return component.value;
+    }
+    return {
+      get active() {
+        return !!component.elementInternals.form;
+      },
+      requestSubmit: () => {
+        component.elementInternals.form?.requestSubmit();
+      }
+    };
+  });
+};
 const CSS = {
   loader: "loader",
   clearable: "clearable",
@@ -43,22 +201,16 @@ class InputText extends LitElement {
     this.actionWrapperRef = createRef();
     this.attributeWatch = useWatchAttributes(["autofocus", "enterkeyhint", "inputmode", "spellcheck"], this.handleGlobalAttributesChanged);
     this.childRef = createRef();
+    this.direction = useDirection();
     this.inputWrapperRef = createRef();
-    this.onHiddenFormInputInput = (event) => {
-      if (event.target.name === this.name) {
-        this.setValue({
-          value: event.target.value,
-          origin: "direct"
-        });
-      }
-      this.setFocus();
-      event.stopPropagation();
-    };
     this.previousValueOrigin = "initial";
     this.userChangedValue = false;
     this._value = "";
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
+    this.formSupport = useForm({
+      inputType: "text"
+    })(this);
     this.interactiveContainer = useInteractive(this);
     this.slottedActionElDisabledInternally = false;
     this.alignment = "start";
@@ -94,6 +246,9 @@ class InputText extends LitElement {
   static {
     this.properties = { slottedActionElDisabledInternally: [16, {}, { state: true }], alignment: [3, {}, { reflect: true }], autocomplete: 1, clearable: [7, {}, { reflect: true, type: Boolean }], disabled: [7, {}, { reflect: true, type: Boolean }], editingEnabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], icon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], iconFlipRtl: [7, {}, { reflect: true, type: Boolean }], label: 1, labelText: 1, loading: [7, {}, { reflect: true, type: Boolean }], maxLength: [11, {}, { reflect: true, type: Number }], messageOverrides: [0, {}, { attribute: false }], minLength: [11, {}, { reflect: true, type: Number }], name: [3, {}, { reflect: true }], pattern: 1, placeholder: 1, prefixText: 1, readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], suffixText: 1, validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [0, {}, { attribute: false }], value: 1 };
   }
+  static {
+    this.formAssociated = true;
+  }
   static {
     this.styles = styles;
   }
@@ -123,8 +278,6 @@ class InputText extends LitElement {
       this.editingEnabled = this.inlineEditableEl.editingEnabled || false;
     }
     connectLabel(this);
-    connectForm(this);
-    this.el.addEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput);
   }
   async load() {
     this.requestedIcon = setRequestedIcon({}, this.icon, "text");
@@ -139,8 +292,6 @@ class InputText extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     disconnectLabel(this);
-    disconnectForm(this);
-    this.el.removeEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput);
   }
   handleGlobalAttributesChanged() {
     this.requestUpdate();
@@ -163,10 +314,9 @@ class InputText extends LitElement {
       this.clearInputTextValue(event);
       event.preventDefault();
     }
-    if (event.key === "Enter") {
-      if (submitForm(this)) {
-        event.preventDefault();
-      }
+    if (event.key === "Enter" && this.formSupport.active) {
+      this.formSupport.requestSubmit();
+      event.preventDefault();
     }
   }
   onLabelClick() {
@@ -227,9 +377,6 @@ class InputText extends LitElement {
       this.emitChangeIfUserModified();
     }
   }
-  syncHiddenFormInput(input) {
-    syncHiddenFormInput("text", this, input);
-  }
   setInputValue(newInputValue) {
     if (!this.childRef.value) {
       return;
@@ -261,7 +408,7 @@ class InputText extends LitElement {
     }
   }
   render() {
-    const dir = getElementDir(this.el);
+    const dir = this.direction;
     const loader = html`<div class=${safeClassMap(CSS.loader)}><calcite-progress .label=${this.messages.loading} type=indeterminate></calcite-progress></div>`;
     const inputClearButton = html`<button .ariaLabel=${this.messages.clear} class=${safeClassMap(CSS.clearButton)} .disabled=${this.disabled || this.readOnly} @click=${this.clearInputTextValue} tabindex=-1 type=button><calcite-icon icon=x .scale=${getIconScale(this.scale)}></calcite-icon></button>`;
     const iconEl = html`<calcite-icon class=${safeClassMap(CSS.inputIcon)} .flipRtl=${this.iconFlipRtl} .icon=${this.requestedIcon} .scale=${getIconScale(this.scale)}></calcite-icon>`;
@@ -277,7 +424,7 @@ class InputText extends LitElement {
       [CSS.clearable]: this.isClearable,
       [CSS.hasSuffix]: this.suffixText,
       [CSS.hasPrefix]: this.prefixText
-    })} ${ref(this.inputWrapperRef)}>${this.prefixText ? prefixText : null}<div class=${safeClassMap(CSS.wrapper)}>${childEl}${this.isClearable ? inputClearButton : null}${this.requestedIcon ? iconEl : null}${this.loading ? loader : null}</div><div class=${safeClassMap(CSS.actionWrapper)} ${ref(this.actionWrapperRef)}><slot name=${SLOTS.action}></slot></div>${this.suffixText ? suffixText : null}${HiddenFormInputSlot({ component: this })}</div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
+    })} ${ref(this.inputWrapperRef)}>${this.prefixText ? prefixText : null}<div class=${safeClassMap(CSS.wrapper)}>${childEl}${this.isClearable ? inputClearButton : null}${this.requestedIcon ? iconEl : null}${this.loading ? loader : null}</div><div class=${safeClassMap(CSS.actionWrapper)} ${ref(this.actionWrapperRef)}><slot name=${SLOTS.action}></slot></div>${this.suffixText ? suffixText : null}</div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, scale: this.scale, status: this.status }) : null}` });
   }
 }
 customElement("calcite-input-text", InputText);

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"