@esri/calcite-components 5.1.0-next.2 → 5.1.0-next.21

package/dist/components/calcite-table-cell/customElement.js

@@ -3,7 +3,7 @@ import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { css, nothing, html } from "lit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
-import { g as getElementDir } from "../../chunks/dom.js";
+import { useDirection } from "@arcgis/lumina/controllers";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
@@ -22,6 +22,7 @@ class TableCell extends LitElement {
   constructor() {
     super(...arguments);
     this.containerRef = createRef();
+    this.direction = useDirection();
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
@@ -66,7 +67,7 @@ class TableCell extends LitElement {
     this.focused = true;
   }
   render() {
-    const dir = getElementDir(this.el);
+    const dir = this.direction;
     const staticCell = this.disabled || this.interactionMode === "static" && (!this.selectionCell || this.selectionCell && this.parentRowType === "foot");
     return this.interactiveContainer({ disabled: this.disabled, children: html`<td class=${safeClassMap({
       [CSS.footerCell]: this.parentRowType === "foot",

package/dist/components/calcite-table-header/customElement.d.ts

@@ -3,7 +3,7 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { Alignment } from "../interfaces.js";
 
 /**
- * @cssproperty [--calcite-table-header-background] - [Deprecated] Use the `--calcite-table-header-background-color` property instead. Specifies the component's background color.
+ * @cssproperty [--calcite-table-header-background] - [Deprecated] in v3.3.0, removal target v6.0.0 - Use `--calcite-table-header-background-color` instead. Specifies the component's background color.
  * @cssproperty [--calcite-table-header-background-color] - Specifies the component's background color.
  * @cssproperty [--calcite-table-header-border-color] - Specifies the component's border color.
  * @cssproperty [--calcite-table-header-heading-text-color] - Specifies the component's `heading` text color.

package/dist/components/calcite-table-row/customElement.d.ts

@@ -3,7 +3,7 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { Alignment } from "../interfaces.js";
 
 /**
- * @cssproperty [--calcite-table-row-background] - [Deprecated] Use `--calcite-table-row-background-color` instead. Specifies the background color of the component.
+ * @cssproperty [--calcite-table-row-background] - [Deprecated] in v3.3.0, removal target v6.0.0 - Use `--calcite-table-row-background-color` instead. Specifies the background color of the component.
  * @cssproperty [--calcite-table-row-background-color] - Specifies the component's background color.
  * @cssproperty [--calcite-table-row-background-color-striped] - When `striped` is `true` on `calcite-table`, specifies the background color of the component's `striped` rows.
  * @cssproperty [--calcite-table-row-background-color-selected] - When `selected`, specifies the background color of the component's `selected` rows.
@@ -12,7 +12,12 @@ import type { Alignment } from "../interfaces.js";
  * @slot  - A slot for adding `calcite-table-cell` or `calcite-table-header` elements.
  */
 export abstract class TableRow extends LitElement {
-  /** Specifies the alignment of the component. */
+  /**
+   * Specifies the vertical alignment of content within child `calcite-table-cell`s, where:
+   * `"start"` positions content at the top of a `calcite-table-cell`,
+   * `"center"` positions content in the middle of a `calcite-table-cell`, and
+   * `"end"` positions content at the bottom of a `calcite-table-cell`.
+   */
   accessor alignment: Alignment;
   /**
    * When `true`, interaction is prevented and the component is displayed with lower opacity.

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

@@ -3,7 +3,7 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { b as slotChangeGetAssignedElements, B as getSlotAssignedElements } from "../../chunks/dom.js";
+import { a as slotChangeGetAssignedElements, C as getSlotAssignedElements } from "../../chunks/dom.js";
 const CSS = {
   section: "section"
 };

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

@@ -1,9 +1,9 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { MutableValidityState } from "../../utils/form.js";
 import type { NumberingSystem } from "../../utils/locale.js";
 import type { Status } from "../interfaces.js";
 import type { IconName } from "../calcite-icon/interfaces.js";
+import type { MutableValidityState } from "../../controllers/useForm.js";
 
 /**
  * @cssproperty [--calcite-text-area-background-color] - Specifies the component's background color.

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

@@ -1,12 +1,11 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as customElement } from "../../chunks/runtime.js";
-import { css, html } from "lit";
 import { live } from "lit/directives/live.js";
 import { throttle } from "es-toolkit";
 import { createRef, ref } from "lit/directives/ref.js";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap, nothing } from "@arcgis/lumina";
 import { useWatchAttributes } from "@arcgis/lumina/controllers";
-import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from "../../chunks/form.js";
+import { css, html } from "lit";
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
 import { s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
 import { n as numberStringFormatter } from "../../chunks/locale.js";
@@ -14,11 +13,11 @@ import { c as createObserver, u as updateRefObserver } from "../../chunks/observ
 import { g as guid } from "../../chunks/guid.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 useCancelable } from "../../chunks/useCancelable.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
+import { u as useForm } from "../../chunks/useForm.js";
 const CSS = {
   assistiveText: "assistive-text",
   characterLimit: "character-limit",
@@ -52,6 +51,9 @@ class TextArea extends LitElement {
     super(...arguments);
     this.attributeWatch = useWatchAttributes(["autofocus", "spellcheck"], this.handleGlobalAttributesChanged);
     this.footerRef = createRef();
+    this.formSupport = useForm({
+      inputType: "text"
+    })(this);
     this.guid = guid();
     this.resizeObserver = createObserver("resize", async () => {
       await this.componentOnReady();
@@ -107,6 +109,9 @@ class TextArea extends LitElement {
   static {
     this.properties = { endSlotHasElements: [16, {}, { state: true }], startSlotHasElements: [16, {}, { state: true }], columns: [11, {}, { reflect: true, type: Number }], disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], groupSeparator: [7, {}, { reflect: true, type: Boolean }], label: 1, labelText: 1, limitText: [7, {}, { reflect: true, type: Boolean }], 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 }], numberingSystem: 1, placeholder: 1, readOnly: [7, {}, { reflect: true, type: Boolean }], required: [7, {}, { reflect: true, type: Boolean }], resize: [3, {}, { reflect: true }], rows: [11, {}, { reflect: true, type: Number }], scale: [3, {}, { reflect: true }], status: [3, {}, { reflect: true }], validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [0, {}, { attribute: false }], value: 1, wrap: [3, {}, { reflect: true }] };
   }
+  static {
+    this.formAssociated = true;
+  }
   static {
     this.styles = styles;
   }
@@ -120,18 +125,35 @@ class TextArea extends LitElement {
   connectedCallback() {
     super.connectedCallback();
     connectLabel(this);
-    connectForm(this);
     this.cancelable.add(this.updateSizeToAuto);
   }
+  willUpdate(changes) {
+    let numberFormatOptionsChanged = false;
+    if (changes.has("messages") || changes.has("numberingSystem") || changes.has("groupSeparator")) {
+      numberFormatOptionsChanged = true;
+    }
+    if (changes.has("value") || changes.has("maxLength") || numberFormatOptionsChanged) {
+      this.updateNumberFormatter();
+      this.localizedCharacterLengthObj = this.getLocalizedCharacterLength();
+      this.formSupport.setCustomValidity(this.isCharacterLimitExceeded() ? this.replacePlaceholdersInMessages() : "");
+    }
+  }
   updated() {
     this.setTextAreaHeight();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     disconnectLabel(this);
-    disconnectForm(this);
     this.resizeObserver?.disconnect();
   }
+  updateNumberFormatter() {
+    numberStringFormatter.numberFormatOptions = {
+      locale: this.messages._lang,
+      numberingSystem: this.numberingSystem,
+      signDisplay: "never",
+      useGrouping: this.groupSeparator
+    };
+  }
   handleGlobalAttributesChanged() {
     this.requestUpdate();
   }
@@ -156,29 +178,16 @@ class TextArea extends LitElement {
     }
   }
   getLocalizedCharacterLength() {
-    const currentLength = this.value ? this.value.length.toString() : "0";
-    const maxLength = this.maxLength.toString();
+    const currentLength = this.value?.length.toString() || "0";
+    const maxLength = this.maxLength?.toString() || "0";
     if (this.numberingSystem === "latn") {
       return { currentLength, maxLength };
     }
-    numberStringFormatter.numberFormatOptions = {
-      locale: this.messages._lang,
-      numberingSystem: this.numberingSystem,
-      signDisplay: "never",
-      useGrouping: this.groupSeparator
-    };
     return {
       currentLength: numberStringFormatter.localize(currentLength),
       maxLength: numberStringFormatter.localize(maxLength)
     };
   }
-  syncHiddenFormInput(input) {
-    input.setCustomValidity("");
-    if (this.isCharacterLimitExceeded()) {
-      input.setCustomValidity(this.replacePlaceholdersInMessages());
-    }
-    syncHiddenFormInput("textarea", this, input);
-  }
   setTextAreaEl(el) {
     updateRefObserver(this.resizeObserver, this.textAreaEl, el);
     this.textAreaEl = el;
@@ -232,11 +241,10 @@ class TextArea extends LitElement {
     })} ${ref(this.footerRef)}><div class=${safeClassMap({
       [CSS.container]: true,
       [CSS.footerEndSlotOnly]: !this.startSlotHasElements && this.endSlotHasElements
-    })}><slot name=${SLOTS.footerStart} @slotchange=${(event) => this.startSlotHasElements = slotChangeHasAssignedElement(event)}></slot><slot name=${SLOTS.footerEnd} @slotchange=${(event) => this.endSlotHasElements = slotChangeHasAssignedElement(event)}></slot></div>${this.renderCharacterLimit()}</footer>${HiddenFormInputSlot({ component: this })}${this.isCharacterLimitExceeded() && html`<span aria-live=polite class=${safeClassMap(CSS.assistiveText)} id=${this.guid ?? nothing}>${this.replacePlaceholdersInMessages()}</span>` || ""}</div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, ref: this.setValidationRef, scale: this.scale, status: this.status }) : null}</div>` });
+    })}><slot name=${SLOTS.footerStart} @slotchange=${(event) => this.startSlotHasElements = slotChangeHasAssignedElement(event)}></slot><slot name=${SLOTS.footerEnd} @slotchange=${(event) => this.endSlotHasElements = slotChangeHasAssignedElement(event)}></slot></div>${this.renderCharacterLimit()}</footer>${this.isCharacterLimitExceeded() && html`<span aria-live=polite class=${safeClassMap(CSS.assistiveText)} id=${this.guid ?? nothing}>${this.replacePlaceholdersInMessages()}</span>` || ""}</div>${this.validationMessage && this.status === "invalid" ? Validation({ icon: this.validationIcon, id: IDS.validationMessage, message: this.validationMessage, ref: this.setValidationRef, scale: this.scale, status: this.status }) : null}</div>` });
   }
   renderCharacterLimit() {
     if (this.maxLength) {
-      this.localizedCharacterLengthObj = this.getLocalizedCharacterLength();
       return html`<span class=${safeClassMap(CSS.characterLimit)}><span class=${safeClassMap({ [CSS.characterOverLimit]: this.isCharacterLimitExceeded() })}>${this.localizedCharacterLengthObj.currentLength}</span>/${this.localizedCharacterLengthObj.maxLength}</span>`;
     }
     return null;

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

@@ -3,10 +3,10 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { css, 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 { i as isValidNumber } from "../../chunks/locale.js";
 import { c as componentFocusable, g as getIconScale } from "../../chunks/component.js";
 import { d as decimalPlaces } from "../../chunks/math.js";
-import { g as getElementDir } from "../../chunks/dom.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useTime } from "../../chunks/useTime.js";
@@ -53,6 +53,7 @@ const styles = css`:host{display:inline-block}.time-picker{display:flex;-webkit-
 class TimePicker extends LitElement {
   constructor() {
     super();
+    this.direction = useDirection();
     this.fractionalSecondRef = createRef();
     this.hourRef = createRef();
     this.meridiemRef = createRef();
@@ -318,7 +319,7 @@ class TimePicker extends LitElement {
       [CSS.buttonFractionalSecondDown]: true
     })} @click=${this.fractionalSecondDownClickHandler} role=button><calcite-icon .icon=${ICONS.chevronDown} .scale=${iconScale}></calcite-icon></span></div>` || ""}${showSecondSuffix && html`<span class=${safeClassMap({ [CSS.delimiter]: true, [CSS.secondSuffix]: true })}>${localizedSecondSuffix.trim()}</span>` || ""}${showMeridiem && html`<div class=${safeClassMap({
       [CSS.column]: true,
-      [CSS.meridiemStart]: meridiemOrder === 0 || getElementDir(this.el) === "rtl"
+      [CSS.meridiemStart]: meridiemOrder === 0 || this.direction === "rtl"
     })} role=group><span .ariaLabel=${messages.meridiemUp} class=${safeClassMap({
       [CSS.button]: true,
       [CSS.buttonMeridiemUp]: true,

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

@@ -1,6 +1,7 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { LogicalPlacement, OverlayPositioning, ReferenceElement } from "../../utils/floating-ui.js";
+import type { Scale } from "../interfaces.js";
 
 /**
  * @cssproperty [--calcite-tooltip-background-color] - Specifies the component's background color.
@@ -53,6 +54,12 @@ export abstract class Tooltip extends LitElement {
    * @default "auto"
    */
   accessor placement: LogicalPlacement;
+  /**
+   * When `true`, removes the caret pointer.
+   *
+   * @default false
+   */
+  accessor pointerDisabled: boolean;
   /**
    * The `referenceElement` is used to position the component according to its `placement` value.
    *
@@ -62,7 +69,13 @@ export abstract class Tooltip extends LitElement {
    *
    * The component should not be placed within its own `referenceElement` to avoid unintended behavior.
    */
-  accessor referenceElement: ReferenceElement | string;
+  accessor referenceElement: ReferenceElement | string | null;
+  /**
+   * Specifies the size of the component.
+   *
+   * @default "m"
+   */
+  accessor scale: Scale;
   /**
    * When `true` and the component is `open`, disables top layer placement.
    *