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

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

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

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

@@ -6,7 +6,7 @@ import { css, html, nothing } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { b as dateFromRange, n as nextMonth, p as prevMonth, f as formatCalendarYear, e as parseCalendarYear, j as getDateInMonth, i as inRange, h as hasSameMonthAndYear, k as getOrder } from "../../chunks/date.js";
-import { c as closestElementCrossShadowBoundary, m as getTextWidth } from "../../chunks/dom.js";
+import { c as closestElementCrossShadowBoundary, l as getTextWidth } from "../../chunks/dom.js";
 import { i as isActivationKey } from "../../chunks/key.js";
 import { n as numberStringFormatter } from "../../chunks/locale.js";
 const styles = css`:host{display:block}.header{display:flex;block-size:100%;align-items:center;justify-content:space-between}.chevron-container{display:flex;align-items:center}:host([scale=s]){block-size:24px;margin:var(--calcite-spacing-xs);margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .chevron-container,:host([scale=s]) .chevron{min-inline-size:24px;block-size:24px}:host([scale=m]){block-size:32px;margin:var(--calcite-spacing-sm);margin-inline-start:var(--calcite-spacing-sm-plus)}:host([scale=m]) .chevron-container,:host([scale=m]) .chevron{min-inline-size:32px;block-size:32px;--calcite-internal-action-padding-block: var(--calcite-spacing-xxs)}:host([scale=l]){block-size:44px;margin:var(--calcite-spacing-xs);margin-inline-start:var(--calcite-spacing-sm)}:host([scale=l]) .chevron-container,:host([scale=l]) .chevron{min-inline-size:44px;block-size:44px;--calcite-internal-action-padding-block: var(--calcite-spacing-sm-plus)}.chevron{box-sizing:content-box;display:flex;block-size:100%;inline-size:100%;flex-grow:0;cursor:pointer;align-items:center;justify-content:center;border-style:none;outline-color:transparent;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;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;--calcite-internal-action-padding-block: 0;--calcite-action-background-color: var(--calcite-date-picker-header-action-background-color);--calcite-action-background-color-hover: var(--calcite-date-picker-header-action-background-color-hover);--calcite-action-background-color-press: var(--calcite-date-picker-header-action-background-color-press);--calcite-action-text-color: var(--calcite-date-picker-header-action-text-color);--calcite-action-text-color-press: var(--calcite-date-picker-header-action-text-color-press)}.chevron:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.chevron[aria-disabled=true]{pointer-events:none}.month-year-container{display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;align-items:center;justify-content:flex-start;text-align:center;line-height:1;gap:var(--calcite-spacing-xxs)}.month-year-container.range-calendar{justify-content:center}.year-container{position:relative;display:flex;block-size:100%}.suffix{display:flex;align-items:center}.year,.suffix{margin-inline:var(--calcite-spacing-xxs);font-weight:var(--calcite-font-weight-medium);color:var(--calcite-date-picker-year-text-color, var(--calcite-color-text-1));font-size:var(--calcite-font-size-md);line-height:var(--calcite-font-line-height-fixed-lg)}.year{position:relative;display:inline-block;border-style:none;background-color:transparent;text-align:center;font-family:inherit;outline-color:transparent;inline-size:44px}.year:hover{transition-timing-function:cubic-bezier(.4,0,.2,1);transition-property:outline-color;outline:2px solid var(--calcite-color-border-2);outline-offset:-2px}.year:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.month-select{--calcite-select-internal-border-width: 0;--calcite-select-internal-icon-border-inline-end-width: 0;--calcite-select-spacing-inline: var(--calcite-spacing-xxs);--calcite-select-font-size: var(--calcite-date-picker-month-select-font-size, var(--calcite-font-size-md));--calcite-select-text-color: var(--calcite-date-picker-month-select-text-color, var(--calcite-color-text-1));--calcite-select-icon-color: var(--calcite-date-picker-month-select-icon-color);--calcite-select-icon-color-hover: var(--calcite-date-picker-month-select-icon-color-hover);--calcite-internal-select-spacing-block: var(--calcite-spacing-xxs);--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-xxs);--calcite-internal-select-line-height: var(--calcite-font-line-height-fixed-lg);--calcite-internal-select-font-weight: var(--calcite-font-weight-medium)}:host([scale=s]) .month-year-container .month-select{--calcite-select-spacing-inline: var(--calcite-spacing-base);--calcite-select-font-size: var(--calcite-date-picker-month-select-font-size, var(--calcite-font-size));--calcite-internal-select-spacing-block: var(--calcite-spacing-base);--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-base);--calcite-internal-select-block-size: 24px;--calcite-internal-select-line-height: var(--calcite-font-line-height-fixed-base)}:host([scale=s]) .month-year-container .year{inline-size:40px}:host([scale=s]) .month-year-container .year,:host([scale=s]) .month-year-container .suffix{font-size:var(--calcite-font-size);line-height:var(--calcite-font-line-height-fixed-base)}:host([scale=l]) .month-year-container .month-select{--calcite-select-spacing-inline: var(--calcite-spacing-sm);--calcite-select-font-size: var(--calcite-date-picker-month-select-font-size, var(--calcite-font-size-lg));--calcite-internal-select-spacing-block: var(--calcite-spacing-sm);--calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-sm);--calcite-internal-select-block-size: 44px;--calcite-internal-select-line-height: var(--calcite-font-line-height-fixed-xl)}:host([scale=l]) .month-year-container .year{inline-size:48px}:host([scale=l]) .month-year-container .year,:host([scale=l]) .month-year-container .suffix{font-size:var(--calcite-font-size-lg);line-height:var(--calcite-font-line-height-fixed-xl)}:host([hidden]){display:none}[hidden]{display:none}`;

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

@@ -16,8 +16,8 @@ import type { DialogPlacement } from "./interfaces.js";
  * @cssproperty [--calcite-dialog-min-size-y] - Specifies the component's minimum height, using `px`, `em`, `rem`, `vh`, or `%`.
  * @cssproperty [--calcite-dialog-max-size-y] - Specifies the component's maximum height, using `px`, `em`, `rem`, `vh`, or `%`.
  * @cssproperty [--calcite-dialog-content-space] - Specifies the padding of the component's content.
- * @cssproperty [--calcite-dialog-content-top-space] - Specifies the padding of the `"content-top"` slot.
- * @cssproperty [--calcite-dialog-content-bottom-space] - Specifies the padding of the `"content-bottom"` slot.
+ * @cssproperty [--calcite-dialog-content-top-space] - Specifies the padding of the component's `content-top` slot.
+ * @cssproperty [--calcite-dialog-content-bottom-space] - Specifies the padding of the component's `content-bottom` slot.
  * @cssproperty [--calcite-dialog-footer-space] - Specifies the padding of the component's footer.
  * @cssproperty [--calcite-dialog-border-color] - Specifies the component's border color.
  * @cssproperty [--calcite-dialog-offset-x] - Specifies the component's horizontal offset.

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

@@ -5,7 +5,7 @@ import { u as useSizeOverride, i as interact } from "../../chunks/useSizeOverrid
 import { css, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
-import { a as getStylePixelValue } from "../../chunks/dom.js";
+import { g as getStylePixelValue } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { g as getDimensionClass } from "../../chunks/dynamicClasses.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";

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

@@ -4,7 +4,8 @@ import { ref } from "lit/directives/ref.js";
 import { css, nothing, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { queryAssignedElements } from "lit/decorators.js";
-import { f as focusElementInGroup, j as focusElement, u as nextFrame } from "../../chunks/dom.js";
+import { useDirection } from "@arcgis/lumina/controllers";
+import { f as focusElementInGroup, i as focusElement, r as nextFrame } from "../../chunks/dom.js";
 import { d as defaultMenuPlacement, r as reposition, c as connectFloatingUI, a as disconnectFloatingUI, f as filterValidFlipPlacements, h as hideFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
 import { g as guid } from "../../chunks/guid.js";
 import { i as isActivationKey } from "../../chunks/key.js";
@@ -40,6 +41,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 class Dropdown extends LitElement {
   constructor() {
     super();
+    this.direction = useDirection();
     this.focusLastDropdownItem = false;
     this.groups = [];
     this.guid = guid();
@@ -89,6 +91,7 @@ class Dropdown extends LitElement {
   async reposition(delayed = false) {
     const { filteredFlipPlacements, floatingEl, offsetDistance, offsetSkidding, overlayPositioning, placement, referenceEl } = this;
     return reposition(this, {
+      direction: this.direction,
       floatingEl,
       referenceEl,
       offsetDistance,

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

@@ -14,12 +14,12 @@ import type { IconName } from "../calcite-icon/interfaces.js";
  * @cssproperty [--calcite-flow-description-text-color] - Specifies the text color of the component's `description`.
  * @cssproperty [--calcite-flow-border-color] - Specifies the component's border color.
  * @cssproperty [--calcite-flow-background-color] - Specifies the component's background color.
- * @cssproperty [--calcite-flow-content-top-space] - Specifies the padding of the `"content-top"` slot.
- * @cssproperty [--calcite-flow-content-bottom-space] - Specifies the padding of the `"content-bottom"` slot.
+ * @cssproperty [--calcite-flow-content-top-space] - Specifies the padding of the component's `content-top` slot.
+ * @cssproperty [--calcite-flow-content-bottom-space] - Specifies the padding of the component's `content-bottom` slot.
  * @cssproperty [--calcite-flow-header-background-color] - Specifies the background color of the component's header.
  * @cssproperty [--calcite-flow-footer-background-color] - Specifies the background color of the component's footer.
  * @cssproperty [--calcite-flow-space] - Specifies the padding of the component's `unnamed (default)` slot.
- * @cssproperty [--calcite-flow-header-content-space] - Specifies the padding of the `header-content` slot.
+ * @cssproperty [--calcite-flow-header-content-space] - Specifies the padding of the component's `header-content` slot.
  * @cssproperty [--calcite-flow-footer-space] - Specifies the padding of the component's footer.
  * @cssproperty [--calcite-action-background-color] - Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s. Applies to any slotted `calcite-action`s.
  * @cssproperty [--calcite-action-background-color-hover] - Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s.

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

@@ -4,7 +4,7 @@ import { keyed } from "lit/directives/keyed.js";
 import { css, nothing, html } from "lit";
 import { LitElement, createEvent, safeClassMap } 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 { S as SLOTS$1 } from "../../chunks/resources6.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
@@ -36,6 +36,7 @@ class FlowItem extends LitElement {
     super(...arguments);
     this.backButtonRef = createRef();
     this.containerRef = createRef();
+    this.direction = useDirection();
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
@@ -112,8 +113,7 @@ class FlowItem extends LitElement {
     this.calciteFlowItemBack.emit();
   }
   renderBackButton() {
-    const { el } = this;
-    const rtl = getElementDir(el) === "rtl";
+    const rtl = this.direction === "rtl";
     const { showBackButton, backButtonClick, messages } = this;
     const label = messages.back;
     const icon = rtl ? ICONS.backRight : ICONS.backLeft;

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

@@ -2,7 +2,7 @@
 import { g as getAssetPath, c as customElement } from "../../chunks/runtime.js";
 import { css, isServer, nothing, svg, html } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
-import { g as getElementDir } from "../../chunks/dom.js";
+import { useDirection } from "@arcgis/lumina/controllers";
 import { t as toAriaBoolean } from "../../chunks/aria.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { l as logger } from "../../chunks/logger.js";
@@ -68,6 +68,7 @@ const styles = css`:host{display:inline-flex;color:var(--calcite-icon-color, var
 class Icon extends LitElement {
   constructor() {
     super(...arguments);
+    this.direction = useDirection();
     this.visible = false;
     this.flipRtl = false;
     this.icon = null;
@@ -133,8 +134,8 @@ class Icon extends LitElement {
     this.intersectionObserver.observe(this.el);
   }
   render() {
-    const { el, flipRtl, pathData, scale, textLabel } = this;
-    const dir = getElementDir(el);
+    const { flipRtl, pathData, scale, textLabel } = this;
+    const dir = this.direction;
     const size = scaleToPx[scale];
     const semantic = !!textLabel;
     const paths = [].concat(pathData || "");

package/dist/components/calcite-inline-editable/customElement.js

@@ -4,7 +4,7 @@ import { css, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, safeClassMap, nothing } from "@arcgis/lumina";
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
-import { b as slotChangeGetAssignedElements } from "../../chunks/dom.js";
+import { a as slotChangeGetAssignedElements } from "../../chunks/dom.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";

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

@@ -5,8 +5,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, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
-import { useWatchAttributes } from "@arcgis/lumina/controllers";
-import { d as setRequestedIcon, k as isPrimaryPointerButton, g as getElementDir } from "../../chunks/dom.js";
+import { useWatchAttributes, useDirection } from "@arcgis/lumina/controllers";
+import { b as setRequestedIcon, j as isPrimaryPointerButton } 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 { n as numberKeys } from "../../chunks/key.js";
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
@@ -67,6 +67,7 @@ class Input extends LitElement {
     this.attributeWatch = useWatchAttributes(["autofocus", "enterkeyhint", "inputmode", "spellcheck"], this.handleGlobalAttributesChanged);
     this.childRef = createRef();
     this.childNumberRef = createRef();
+    this.direction = useDirection();
     this.inputWrapperRef = createRef();
     this.onHiddenFormInputInput = (event) => {
       if (event.target.name === this.name) {
@@ -514,7 +515,7 @@ class Input 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.clearInputValue} tabindex=-1 title=${this.messages.clear ?? nothing} type=button><calcite-icon .icon=${ICONS.close} .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>`;

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

@@ -3,6 +3,7 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, isServer, nothing, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
+import { useDirection } from "@arcgis/lumina/controllers";
 import { u as useFocusTrap } from "../../chunks/useFocusTrap.js";
 import { l as datePartsFromISO, d as dateFromISO, b as dateFromRange, a as dateToISO, m as datePartsFromLocalizedString, o as dateFromLocalizedString, i as inRange } from "../../chunks/date.js";
 import { d as defaultMenuPlacement, r as reposition, c as connectFloatingUI, a as disconnectFloatingUI, f as filterValidFlipPlacements, h as hideFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
@@ -72,6 +73,7 @@ class InputDatePicker extends LitElement {
     super();
     this.commonDateSeparators = [".", "-", "/"];
     this.dialogId = IDS.dialog(guid());
+    this.direction = useDirection();
     this.endInputRef = createRef();
     this.focusOnOpen = false;
     this.focusTrap = useFocusTrap({
@@ -168,6 +170,7 @@ class InputDatePicker extends LitElement {
   async reposition(delayed = false) {
     const { floatingEl, referenceEl, placement, overlayPositioning, filteredFlipPlacements } = this;
     return reposition(this, {
+      direction: this.direction,
       floatingEl,
       referenceEl,
       overlayPositioning,

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

@@ -2,7 +2,7 @@
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, stringOrBoolean, setAttribute, safeClassMap } from "@arcgis/lumina";
-import { d as setRequestedIcon } from "../../chunks/dom.js";
+import { b as setRequestedIcon } from "../../chunks/dom.js";
 const StatusIconDefaults = {
   valid: "check-circle",
   invalid: "exclamation-mark-triangle",

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

@@ -5,8 +5,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, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
-import { useWatchAttributes } from "@arcgis/lumina/controllers";
-import { d as setRequestedIcon, k as isPrimaryPointerButton, g as getElementDir } from "../../chunks/dom.js";
+import { useWatchAttributes, useDirection } from "@arcgis/lumina/controllers";
+import { b as setRequestedIcon, j as isPrimaryPointerButton } 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 { n as numberKeys } from "../../chunks/key.js";
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
@@ -57,6 +57,7 @@ class InputNumber extends LitElement {
     this.actionWrapperRef = createRef();
     this.attributeWatch = useWatchAttributes(["autofocus", "enterkeyhint", "inputmode"], this.handleGlobalAttributesChanged);
     this.childNumberRef = createRef();
+    this.direction = useDirection();
     this.inputWrapperRef = createRef();
     this.onHiddenFormInputInput = (event) => {
       if (event.target.name === this.name) {
@@ -513,7 +514,7 @@ class InputNumber 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.clearInputValue} tabindex=-1 type=button><calcite-icon .icon=${ICONS.clear} .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>`;

package/dist/components/calcite-input-text/customElement.d.ts

@@ -1,6 +1,6 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { MutableValidityState } from "../../utils/form.js";
+import type { MutableValidityState } from "../../controllers/useForm.js";
 import type { Alignment, Scale, Status } from "../interfaces.js";
 import type { IconName } from "../calcite-icon/interfaces.js";
 

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);