@esri/calcite-components 1.5.0-next.16 → 1.5.0-next.18

package/dist/loader/cdn.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.16
+ * v1.5.0-next.18
  */
 module.exports = require('../cjs/loader.cjs.js');
 module.exports.applyPolyfills = function() { return Promise.resolve() };

package/dist/loader/index.cjs.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.16
+ * v1.5.0-next.18
  */
 module.exports = require('../cjs/loader.cjs.js');
 module.exports.applyPolyfills = function() { return Promise.resolve() };

package/dist/loader/index.es2017.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.16
+ * v1.5.0-next.18
  */
 export * from '../esm/polyfills/index.js';
 export * from '../esm/loader.js';

package/dist/loader/index.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.16
+ * v1.5.0-next.18
  */
 (function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
 export * from '../esm/polyfills/index.js';

package/dist/types/components/accordion/accordion.d.ts

@@ -6,6 +6,8 @@ import { RequestedItem } from "./interfaces";
  */
 export declare class Accordion {
   el: HTMLCalciteAccordionElement;
+  /** Specifies the parent of the component. */
+  accordionParent: HTMLCalciteAccordionElement;
   /** Specifies the appearance of the component. */
   appearance: Extract<"solid" | "transparent", Appearance>;
   /** Specifies the placement of the icon in the header. */
@@ -19,19 +21,17 @@ export declare class Accordion {
    * or `"single-persist"` (allow and require one open item).
    */
   selectionMode: Extract<"single" | "single-persist" | "multiple", SelectionMode>;
+  handlePropsChange(): void;
   /**
    * @internal
    */
   calciteInternalAccordionChange: EventEmitter<RequestedItem>;
-  componentDidLoad(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
   render(): VNode;
-  registerCalciteAccordionItem(event: CustomEvent): void;
   updateActiveItemOnChange(event: CustomEvent): void;
-  /** created list of Accordion items */
-  private items;
-  /** keep track of whether the items have been sorted so we don't re-sort */
-  private sorted;
+  mutationObserver: import("../../utils/observers").ExtendedMutationObserver;
   /** keep track of the requested item for multi mode */
   private requestedAccordionItem;
-  private sortItems;
+  private updateAccordionItems;
 }

package/dist/types/components/accordion-item/accordion-item.d.ts

@@ -1,7 +1,7 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
 import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
-import { FlipContext, Scale } from "../interfaces";
-import { RegistryEntry, RequestedItem } from "./interfaces";
+import { FlipContext, Position, Scale, SelectionMode } from "../interfaces";
+import { RequestedItem } from "./interfaces";
 /**
  * @slot - A slot for adding custom content, including nested `calcite-accordion-item`s.
  * @slot actions-end - A slot for adding `calcite-action`s or content to the end side of the component's header.
@@ -22,42 +22,53 @@ export declare class AccordionItem implements ConditionalSlotComponent {
   /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
   iconFlipRtl: FlipContext;
   /**
+   * Specifies the placement of the icon in the header inherited from the `calcite-accordion`.
+   *
    * @internal
    */
-  calciteInternalAccordionItemSelect: EventEmitter<RequestedItem>;
+  iconPosition: Position;
+  /** Specifies the type of the icon in the header inherited from the `calcite-accordion`.
+   *
+   * @internal
+   */
+  iconType: "chevron" | "caret" | "plus-minus";
   /**
+   * The containing `accordion` element.
+   *
    * @internal
    */
-  calciteInternalAccordionItemClose: EventEmitter<void>;
+  accordionParent: HTMLCalciteAccordionElement;
   /**
+   * Specifies the `selectionMode` of the component inherited from the `calcite-accordion`.
+   *
    * @internal
    */
-  calciteInternalAccordionItemRegister: EventEmitter<RegistryEntry>;
+  selectionMode: Extract<"single" | "single-persist" | "multiple", SelectionMode>;
+  /**
+   * Specifies the size of the component inherited from the `calcite-accordion`.
+   *
+   * @internal
+   */
+  scale: Scale;
+  /**
+   * @internal
+   */
+  calciteInternalAccordionItemSelect: EventEmitter<RequestedItem>;
+  /**
+   * @internal
+   */
+  calciteInternalAccordionItemClose: EventEmitter<void>;
   connectedCallback(): void;
-  componentDidLoad(): void;
   disconnectedCallback(): void;
   renderActionsStart(): VNode;
   renderActionsEnd(): VNode;
   render(): VNode;
   keyDownHandler(event: KeyboardEvent): void;
   updateActiveItemOnChange(event: CustomEvent): void;
-  /** the containing accordion element */
-  private parent;
-  /** position within parent */
-  private itemPosition;
   /** the latest requested item */
   private requestedAccordionItem;
-  /** what selection mode is the parent accordion in */
-  private selectionMode;
-  /** what icon position does the parent accordion specify */
-  private iconPosition;
-  /** what icon type does the parent accordion specify */
-  private iconType;
   /** handle clicks on item header */
   private itemHeaderClickHandler;
-  /** Specifies the scale of the `accordion-item` controlled by the parent, defaults to m */
-  scale: Scale;
   private determineActiveItem;
   private emitRequestedItem;
-  private getItemPosition;
 }

package/dist/types/components/text-area/assets/text-area/t9n/index.d.ts

@@ -1,5 +1,4 @@
 export type TextAreaMessages = {
   invalid: string;
   tooLong: string;
-  longText: string;
 };

package/dist/types/components/text-area/interfaces.d.ts

@@ -0,0 +1,4 @@
+export interface CharacterLengthObj {
+  currentLength: string;
+  maxLength: string;
+}

package/dist/types/components/text-area/text-area.d.ts

@@ -6,6 +6,7 @@ import { LoadableComponent } from "../../utils/loadable";
 import { T9nComponent } from "../../utils/t9n";
 import { TextAreaMessages } from "./assets/text-area/t9n";
 import { InteractiveComponent } from "../../utils/interactive";
+import { CharacterLengthObj } from "./interfaces";
 /**
  * @slot - A slot for adding text.
  * @slot footer-start - A slot for adding content to the start of the component's footer.
@@ -136,16 +137,18 @@ export declare class TextArea implements FormComponent, LabelableComponent, Loca
   endSlotHasElements: boolean;
   startSlotHasElements: boolean;
   effectiveLocale: string;
+  localizedCharacterLengthObj: CharacterLengthObj;
   effectiveLocaleChange(): void;
   onFormReset(): void;
   onLabelClick(): void;
   handleInput: (event: InputEvent) => void;
   handleChange: () => void;
   contentSlotChangeHandler: () => void;
-  renderCharacterLimit: () => VNode;
-  getLocalizedCharacterLength(): string;
+  renderCharacterLimit: () => VNode | null;
+  getLocalizedCharacterLength(): CharacterLengthObj;
   resizeObserver: ResizeObserver;
   syncHiddenFormInput(input: HTMLInputElement): void;
+  private replacePlaceHoldersInMessages;
   private setHeightAndWidthToAuto;
   setTextAreaEl: (el: HTMLTextAreaElement) => void;
   setTextAreaHeight(): void;

package/dist/types/components.d.ts

@@ -7,7 +7,7 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { Alignment, Appearance, Columns, FlipContext, Kind, Layout, LogicalFlowPosition, Position, Scale, SelectionMode, Status, Width } from "./components/interfaces";
 import { RequestedItem } from "./components/accordion/interfaces";
-import { RegistryEntry, RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
+import { RequestedItem as RequestedItem1 } from "./components/accordion-item/interfaces";
 import { ActionMessages } from "./components/action/assets/action/t9n";
 import { ActionBarMessages } from "./components/action-bar/assets/action-bar/t9n";
 import { ActionGroupMessages } from "./components/action-group/assets/action-group/t9n";
@@ -79,6 +79,10 @@ import { ValueListMessages } from "./components/value-list/assets/value-list/t9n
 import { ListItemAndHandle } from "./components/value-list-item/interfaces";
 export namespace Components {
     interface CalciteAccordion {
+        /**
+          * Specifies the parent of the component.
+         */
+        "accordionParent": HTMLCalciteAccordionElement;
         /**
           * Specifies the appearance of the component.
          */
@@ -104,6 +108,10 @@ export namespace Components {
   >;
     }
     interface CalciteAccordionItem {
+        /**
+          * The containing `accordion` element.
+         */
+        "accordionParent": HTMLCalciteAccordionElement;
         /**
           * Specifies a description for the component.
          */
@@ -124,10 +132,26 @@ export namespace Components {
           * Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`).
          */
         "iconFlipRtl": FlipContext;
+        /**
+          * Specifies the placement of the icon in the header inherited from the `calcite-accordion`.
+         */
+        "iconPosition": Position;
         /**
           * Specifies an icon to display at the start of the component.
          */
         "iconStart": string;
+        /**
+          * Specifies the type of the icon in the header inherited from the `calcite-accordion`.
+         */
+        "iconType": "chevron" | "caret" | "plus-minus";
+        /**
+          * Specifies the size of the component inherited from the `calcite-accordion`.
+         */
+        "scale": Scale;
+        /**
+          * Specifies the `selectionMode` of the component inherited from the `calcite-accordion`.
+         */
+        "selectionMode": Extract<"single" | "single-persist" | "multiple", SelectionMode>;
     }
     interface CalciteAction {
         /**
@@ -5516,6 +5540,10 @@ declare global {
 }
 declare namespace LocalJSX {
     interface CalciteAccordion {
+        /**
+          * Specifies the parent of the component.
+         */
+        "accordionParent"?: HTMLCalciteAccordionElement;
         /**
           * Specifies the appearance of the component.
          */

package/dist/types/preact.d.ts

@@ -10,10 +10,9 @@ declare module "preact/src/jsx" {
         "oncalciteInternalAccordionChange"?: (event: CustomEvent<any>) => void;
       }
 
-      "calcite-accordion-item": Omit<JSX.CalciteAccordionItem, "onCalciteInternalAccordionItemSelect" | "onCalciteInternalAccordionItemClose" | "onCalciteInternalAccordionItemRegister"> & JSXInternal.HTMLAttributes<HTMLCalciteAccordionItemElement> & {
+      "calcite-accordion-item": Omit<JSX.CalciteAccordionItem, "onCalciteInternalAccordionItemSelect" | "onCalciteInternalAccordionItemClose"> & JSXInternal.HTMLAttributes<HTMLCalciteAccordionItemElement> & {
         "oncalciteInternalAccordionItemSelect"?: (event: CustomEvent<any>) => void;
         "oncalciteInternalAccordionItemClose"?: (event: CustomEvent<any>) => void;
-        "oncalciteInternalAccordionItemRegister"?: (event: CustomEvent<any>) => void;
       }
 
       "calcite-action": JSX.CalciteAction & JSXInternal.HTMLAttributes<HTMLCalciteActionElement>

package/hydrate/index.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.5.0-next.16
+ * v1.5.0-next.18
  */
 'use strict';
 
@@ -5841,6 +5841,19 @@ const cmpModules = new Map, getModule = e => {
  e["s-p"] = [], e["s-rc"] = [], addHostEventListeners(e, o, t.$listeners$), hostRefs.set(e, o);
 }, styles = new Map;
 
+/**
+ * This utility ensures observers are created only for browser contexts.
+ *
+ * @param type - the type of observer to create
+ * @param callback - the observer callback
+ * @param options - the observer options
+ */
+function createObserver(type, callback, options) {
+  {
+    return undefined;
+  }
+}
+
 const accordionCss = "@keyframes in{0%{opacity:0}100%{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0, -5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0, 5px, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px, 0, 0)}100%{opacity:1;transform:translate3D(0, 0, 0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(0.95, 0.95, 1)}100%{opacity:1;transform:scale3D(1, 1, 1)}}/*!@:root*/.sc-calcite-accordion:root{--calcite-animation-timing:calc(150ms * var(--calcite-internal-duration-factor));--calcite-internal-duration-factor:var(--calcite-duration-factor, 1);--calcite-internal-animation-timing-fast:calc(100ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-medium:calc(200ms * var(--calcite-internal-duration-factor));--calcite-internal-animation-timing-slow:calc(300ms * var(--calcite-internal-duration-factor))}/*!@.calcite-animate*/.calcite-animate.sc-calcite-accordion{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}/*!@.calcite-animate__in*/.calcite-animate__in.sc-calcite-accordion{animation-name:in}/*!@.calcite-animate__in-down*/.calcite-animate__in-down.sc-calcite-accordion{animation-name:in-down}/*!@.calcite-animate__in-up*/.calcite-animate__in-up.sc-calcite-accordion{animation-name:in-up}/*!@.calcite-animate__in-right*/.calcite-animate__in-right.sc-calcite-accordion{animation-name:in-right}/*!@.calcite-animate__in-left*/.calcite-animate__in-left.sc-calcite-accordion{animation-name:in-left}/*!@.calcite-animate__in-scale*/.calcite-animate__in-scale.sc-calcite-accordion{animation-name:in-scale}@media (prefers-reduced-motion: reduce){/*!@:root*/.sc-calcite-accordion:root{--calcite-internal-duration-factor:0.01}}/*!@:root*/.sc-calcite-accordion:root{--calcite-floating-ui-transition:var(--calcite-animation-timing);--calcite-floating-ui-z-index:var(--calcite-app-z-index-dropdown)}/*!@:host([hidden])*/[hidden].sc-calcite-accordion-h{display:none}/*!@:host([scale=s])*/[scale=s].sc-calcite-accordion-h{--calcite-accordion-item-spacing-unit:0.25rem;--calcite-accordion-icon-margin:0.5rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.5rem;font-size:var(--calcite-font-size--2);line-height:1rem}/*!@:host([scale=m])*/[scale=m].sc-calcite-accordion-h{--calcite-accordion-item-spacing-unit:0.5rem;--calcite-accordion-icon-margin:0.75rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 0.75rem;font-size:var(--calcite-font-size--1);line-height:1rem}/*!@:host([scale=l])*/[scale=l].sc-calcite-accordion-h{--calcite-accordion-item-spacing-unit:0.75rem;--calcite-accordion-icon-margin:1rem;--calcite-accordion-item-padding:var(--calcite-accordion-item-spacing-unit) 1rem;font-size:var(--calcite-font-size-0);line-height:1.25rem}/*!@:host*/.sc-calcite-accordion-h{position:relative;display:block;max-inline-size:100%;line-height:1.5rem;--calcite-accordion-item-border:var(--calcite-ui-border-2);--calcite-accordion-item-background:var(--calcite-ui-foreground-1)}/*!@.accordion--transparent*/.accordion--transparent.sc-calcite-accordion{--calcite-accordion-item-border:transparent;--calcite-accordion-item-background:transparent}/*!@.accordion*/.accordion.sc-calcite-accordion{border-width:1px;border-block-end-width:0px;border-style:solid;border-color:var(--calcite-ui-border-2)}";
 
 /**
@@ -5855,32 +5868,28 @@ class Accordion {
     //  Private State/Props
     //
     //--------------------------------------------------------------------------
-    /** created list of Accordion items */
-    this.items = [];
-    /** keep track of whether the items have been sorted so we don't re-sort */
-    this.sorted = false;
-    //--------------------------------------------------------------------------
-    //
-    //  Private Methods
-    //
-    //--------------------------------------------------------------------------
-    this.sortItems = (items) => items.sort((a, b) => a.position - b.position).map((a) => a.item);
+    this.mutationObserver = createObserver();
+    this.accordionParent = undefined;
     this.appearance = "solid";
     this.iconPosition = "end";
     this.iconType = "chevron";
     this.scale = "m";
     this.selectionMode = "multiple";
   }
+  handlePropsChange() {
+    this.updateAccordionItems();
+  }
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
-  componentDidLoad() {
-    if (!this.sorted) {
-      this.items = this.sortItems(this.items);
-      this.sorted = true;
-    }
+  connectedCallback() {
+    this.mutationObserver?.observe(this.el, { childList: true });
+    this.updateAccordionItems();
+  }
+  disconnectedCallback() {
+    this.mutationObserver?.disconnect();
   }
   render() {
     const transparent = this.appearance === "transparent";
@@ -5894,17 +5903,6 @@ class Accordion {
   //  Event Listeners
   //
   //--------------------------------------------------------------------------
-  registerCalciteAccordionItem(event) {
-    const item = {
-      item: event.target,
-      parent: event.detail.parent,
-      position: event.detail.position
-    };
-    if (this.el === item.parent) {
-      this.items.push(item);
-    }
-    event.stopPropagation();
-  }
   updateActiveItemOnChange(event) {
     this.requestedAccordionItem = event.detail.requestedAccordionItem;
     this.calciteInternalAccordionChange.emit({
@@ -5912,37 +5910,45 @@ class Accordion {
     });
     event.stopPropagation();
   }
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+  updateAccordionItems() {
+    this.el.querySelectorAll("calcite-accordion-item").forEach((item) => {
+      item.iconPosition = this.iconPosition;
+      item.iconType = this.iconType;
+      item.selectionMode = this.selectionMode;
+      item.scale = this.scale;
+      item.accordionParent = this.el;
+    });
+  }
   get el() { return getElement(this); }
+  static get watchers() { return {
+    "iconPosition": ["handlePropsChange"],
+    "iconType": ["handlePropsChange"],
+    "scale": ["handlePropsChange"],
+    "selectionMode": ["handlePropsChange"]
+  }; }
   static get style() { return accordionCss; }
   static get cmpMeta() { return {
     "$flags$": 9,
     "$tagName$": "calcite-accordion",
     "$members$": {
+      "accordionParent": [16],
       "appearance": [513],
       "iconPosition": [513, "icon-position"],
       "iconType": [513, "icon-type"],
       "scale": [513],
       "selectionMode": [513, "selection-mode"]
     },
-    "$listeners$": [[0, "calciteInternalAccordionItemRegister", "registerCalciteAccordionItem"], [0, "calciteInternalAccordionItemSelect", "updateActiveItemOnChange"]],
+    "$listeners$": [[0, "calciteInternalAccordionItemSelect", "updateActiveItemOnChange"]],
     "$lazyBundleId$": "-",
     "$attrsToReflect$": [["appearance", "appearance"], ["iconPosition", "icon-position"], ["iconType", "icon-type"], ["scale", "scale"], ["selectionMode", "selection-mode"]]
   }; }
 }
 
-/**
- * This utility ensures observers are created only for browser contexts.
- *
- * @param type - the type of observer to create
- * @param callback - the observer callback
- * @param options - the observer options
- */
-function createObserver(type, callback, options) {
-  {
-    return undefined;
-  }
-}
-
 const observed = new Set();
 let mutationObserver$2;
 const observerOptions = { childList: true };
@@ -6979,19 +6985,19 @@ class AccordionItem {
     registerInstance(this, hostRef);
     this.calciteInternalAccordionItemSelect = createEvent(this, "calciteInternalAccordionItemSelect", 6);
     this.calciteInternalAccordionItemClose = createEvent(this, "calciteInternalAccordionItemClose", 6);
-    this.calciteInternalAccordionItemRegister = createEvent(this, "calciteInternalAccordionItemRegister", 6);
-    /** what icon position does the parent accordion specify */
-    this.iconPosition = "end";
     /** handle clicks on item header */
     this.itemHeaderClickHandler = () => this.emitRequestedItem();
-    /** Specifies the scale of the `accordion-item` controlled by the parent, defaults to m */
-    this.scale = "m";
     this.expanded = false;
     this.heading = undefined;
     this.description = undefined;
     this.iconStart = undefined;
     this.iconEnd = undefined;
     this.iconFlipRtl = undefined;
+    this.iconPosition = undefined;
+    this.iconType = undefined;
+    this.accordionParent = undefined;
+    this.selectionMode = undefined;
+    this.scale = undefined;
   }
   //--------------------------------------------------------------------------
   //
@@ -6999,19 +7005,8 @@ class AccordionItem {
   //
   //--------------------------------------------------------------------------
   connectedCallback() {
-    this.parent = this.el.parentElement;
-    this.iconType = getElementProp(this.el, "icon-type", "chevron");
-    this.iconPosition = getElementProp(this.el, "icon-position", this.iconPosition);
-    this.scale = getElementProp(this.el, "scale", this.scale);
     connectConditionalSlotComponent(this);
   }
-  componentDidLoad() {
-    this.itemPosition = this.getItemPosition();
-    this.calciteInternalAccordionItemRegister.emit({
-      parent: this.parent,
-      position: this.itemPosition
-    });
-  }
   disconnectedCallback() {
     disconnectConditionalSlotComponent(this);
   }
@@ -7076,7 +7071,6 @@ class AccordionItem {
   //
   //--------------------------------------------------------------------------
   determineActiveItem() {
-    this.selectionMode = getElementProp(this.el, "selection-mode", "multiple");
     switch (this.selectionMode) {
       case "multiple":
         if (this.el === this.requestedAccordionItem) {
@@ -7096,11 +7090,6 @@ class AccordionItem {
       requestedAccordionItem: this.el
     });
   }
-  getItemPosition() {
-    const { el } = this;
-    const items = closestElementCrossShadowBoundary(el, "calcite-accordion")?.querySelectorAll("calcite-accordion-item");
-    return items ? Array.from(items).indexOf(el) : -1;
-  }
   get el() { return getElement(this); }
   static get style() { return accordionItemCss; }
   static get cmpMeta() { return {
@@ -7112,7 +7101,12 @@ class AccordionItem {
       "description": [1],
       "iconStart": [513, "icon-start"],
       "iconEnd": [513, "icon-end"],
-      "iconFlipRtl": [513, "icon-flip-rtl"]
+      "iconFlipRtl": [513, "icon-flip-rtl"],
+      "iconPosition": [1, "icon-position"],
+      "iconType": [1, "icon-type"],
+      "accordionParent": [16],
+      "selectionMode": [1, "selection-mode"],
+      "scale": [1]
     },
     "$listeners$": [[0, "keydown", "keyDownHandler"], [16, "calciteInternalAccordionChange", "updateActiveItemOnChange"]],
     "$lazyBundleId$": "-",
@@ -10099,7 +10093,7 @@ class ActionMenu {
   /** Sets focus on the component. */
   async setFocus() {
     await componentFocusable(this);
-    focusElement(this.menuButtonEl);
+    return focusElement(this.menuButtonEl);
   }
   renderMenuButton() {
     const { label, scale, expanded } = this;
@@ -10612,7 +10606,7 @@ class Alert {
       return;
     }
     else if (alertLinkEl) {
-      alertLinkEl.setFocus();
+      return alertLinkEl.setFocus();
     }
     else if (this.closeButton) {
       this.closeButton.focus();
@@ -12617,7 +12611,7 @@ class CalciteNavigation {
   /** When `navigation-action` is `true`, sets focus on the component's action element. */
   async setFocus() {
     await componentFocusable(this);
-    await this.navigationActionEl?.setFocus();
+    return this.navigationActionEl?.setFocus();
   }
   //--------------------------------------------------------------------------
   //
@@ -13519,7 +13513,7 @@ class ChipGroup {
   async setFocus() {
     await componentFocusable(this);
     if (!this.disabled) {
-      (this.selectedItems[0] || this.items[0])?.setFocus();
+      return (this.selectedItems[0] || this.items[0])?.setFocus();
     }
   }
   //--------------------------------------------------------------------------
@@ -16832,7 +16826,7 @@ class ColorPickerHexInput {
   /** Sets focus on the component. */
   async setFocus() {
     await componentFocusable(this);
-    focusElement(this.hexInputNode);
+    return focusElement(this.hexInputNode);
   }
   //--------------------------------------------------------------------------
   //
@@ -28992,7 +28986,7 @@ class List$1 {
   /** Sets focus on the component's first focusable element. */
   async setFocus() {
     await componentFocusable(this);
-    this.enabledListItems.find((listItem) => listItem.active)?.setFocus();
+    return this.enabledListItems.find((listItem) => listItem.active)?.setFocus();
   }
   // --------------------------------------------------------------------------
   //
@@ -30084,7 +30078,7 @@ class Notice {
       return;
     }
     if (noticeLinkEl) {
-      noticeLinkEl.setFocus();
+      return noticeLinkEl.setFocus();
     }
     else if (this.closeButton) {
       this.closeButton.focus();
@@ -32448,11 +32442,10 @@ class RadioButtonGroup {
   async setFocus() {
     await componentFocusable(this);
     if (this.selectedItem && !this.selectedItem.disabled) {
-      this.selectedItem.setFocus();
-      return;
+      return this.selectedItem.setFocus();
     }
     if (this.radioButtons.length > 0) {
-      this.getFocusableRadioButton()?.setFocus();
+      return this.getFocusableRadioButton()?.setFocus();
     }
   }
   //--------------------------------------------------------------------------
@@ -39675,7 +39668,11 @@ class TextArea {
       }
     };
     this.renderCharacterLimit = () => {
-      return this.maxLength ? (hAsync("span", { class: CSS$8.characterLimit }, hAsync("span", { class: { [CSS$8.characterOverLimit]: this.value?.length > this.maxLength } }, this.getLocalizedCharacterLength()), "/", numberStringFormatter.localize(this.maxLength.toString()))) : null;
+      if (this.maxLength) {
+        this.localizedCharacterLengthObj = this.getLocalizedCharacterLength();
+        return (hAsync("span", { class: CSS$8.characterLimit }, hAsync("span", { class: { [CSS$8.characterOverLimit]: this.value?.length > this.maxLength } }, this.localizedCharacterLengthObj.currentLength), "/", this.localizedCharacterLengthObj.maxLength));
+      }
+      return null;
     };
     this.resizeObserver = createObserver();
     // height and width are set to auto here to avoid overlapping on to neighboring elements in the layout when user starts resizing.
@@ -39715,6 +39712,7 @@ class TextArea {
     this.endSlotHasElements = undefined;
     this.startSlotHasElements = undefined;
     this.effectiveLocale = "";
+    this.localizedCharacterLengthObj = undefined;
   }
   onMessagesChange() {
     /* wired up by t9n util */
@@ -39799,20 +39797,33 @@ class TextArea {
     this.setFocus();
   }
   getLocalizedCharacterLength() {
+    const currentLength = this.value ? this.value.length.toString() : "0";
+    const maxLength = this.maxLength.toString();
+    if (this.numberingSystem === "latn") {
+      return { currentLength, maxLength };
+    }
     numberStringFormatter.numberFormatOptions = {
       locale: this.effectiveLocale,
       numberingSystem: this.numberingSystem,
       signDisplay: "never",
       useGrouping: this.groupSeparator
     };
-    return numberStringFormatter.localize(this.value ? this.value.length.toString() : "0");
+    return {
+      currentLength: numberStringFormatter.localize(currentLength),
+      maxLength: numberStringFormatter.localize(maxLength)
+    };
   }
   syncHiddenFormInput(input) {
     input.setCustomValidity("");
     if (this.value?.length > this.maxLength) {
-      input.setCustomValidity(this.messages.tooLong);
+      input.setCustomValidity(this.replacePlaceHoldersInMessages());
     }
   }
+  replacePlaceHoldersInMessages() {
+    return this.messages.tooLong
+      .replace("{maxLength}", this.localizedCharacterLengthObj.maxLength)
+      .replace("{currentLength}", this.localizedCharacterLengthObj.currentLength);
+  }
   setTextAreaHeight() {
     const { textAreaHeight, elHeight, footerHeight } = this.getHeightandWidthOfElements();
     if (footerHeight > 0 && textAreaHeight + footerHeight != elHeight) {
@@ -39866,6 +39877,7 @@ class TextArea {
       "endSlotHasElements": [32],
       "startSlotHasElements": [32],
       "effectiveLocale": [32],
+      "localizedCharacterLengthObj": [32],
       "setFocus": [64],
       "selectText": [64]
     },
@@ -40014,7 +40026,7 @@ class TileSelect {
   /** Sets focus on the component. */
   async setFocus() {
     await componentFocusable(this);
-    this.input?.setFocus();
+    return this.input?.setFocus();
   }
   //--------------------------------------------------------------------------
   //
@@ -42686,7 +42698,7 @@ class ValueListItem {
   /** Set focus on the component. */
   async setFocus() {
     await componentFocusable(this);
-    this.pickListItem?.setFocus();
+    return this.pickListItem?.setFocus();
   }
   calciteListItemChangeHandler(event) {
     // adjust item payload from wrapped item before bubbling