@esri/calcite-components 3.3.0-next.99 → 3.3.0

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.3.0-next.99 */
+v3.3.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, isServer, html } from "lit";
@@ -9,7 +9,7 @@ import { LitElement, createEvent, safeClassMap, setAttribute } from "@arcgis/lum
 import { n as nodeListToArray, g as getElementDir, t as toAriaBoolean } from "../../chunks/dom.js";
 import { g as guid } from "../../chunks/guid.js";
 import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
-import { c as createObserver } from "../../chunks/observers.js";
+import { c as createObserver, u as updateRefObserver } from "../../chunks/observers.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { X as XButton } from "../../chunks/XButton.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
@@ -33,7 +33,7 @@ const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-fo
 class TabTitle extends LitElement {
   constructor() {
     super();
-    this.closeButtonEl = createRef();
+    this.closeButtonRef = createRef();
     this.guid = IDS.host(guid());
     this.mutationObserver = createObserver("mutation", () => this.updateHasText());
     this.resizeObserver = createObserver("resize", () => {
@@ -149,7 +149,7 @@ class TabTitle extends LitElement {
     switch (event.key) {
       case " ":
       case "Enter":
-        if (!event.composedPath().includes(this.closeButtonEl.value)) {
+        if (!event.composedPath().includes(this.closeButtonRef.value)) {
           this.activateTab();
           event.preventDefault();
         }
@@ -186,6 +186,10 @@ class TabTitle extends LitElement {
   updateHasText() {
     this.hasText = this.el.textContent.trim().length > 0;
   }
+  setContainerRef(el) {
+    updateRefObserver(this.resizeObserver, this.containerEl, el);
+    this.containerEl = el;
+  }
   setupTextContentObserver() {
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
   }
@@ -209,11 +213,11 @@ class TabTitle extends LitElement {
       [CSS.containerBottom]: this.position === "bottom",
       [CSS.iconPresent]: !!this.iconStart || !!this.iconEnd,
       [CSS.scale(this.scale)]: true
-    })} .hidden=${closed} ${ref((el2) => el2 ? this.resizeObserver?.observe(el2) : null)}><div class=${safeClassMap({ [CSS.content]: true, [CSS.contentHasText]: this.hasText })}>${this.iconStart ? iconStartEl : null}<slot></slot>${this.iconEnd ? iconEndEl : null}</div>${this.renderCloseButton()}<div class=${safeClassMap(CSS.selectedIndicator)}></div></div>` });
+    })} .hidden=${closed} ${ref(this.setContainerRef)}><div class=${safeClassMap({ [CSS.content]: true, [CSS.contentHasText]: this.hasText })}>${this.iconStart ? iconStartEl : null}<slot></slot>${this.iconEnd ? iconEndEl : null}</div>${this.renderCloseButton()}<div class=${safeClassMap(CSS.selectedIndicator)}></div></div>` });
   }
   renderCloseButton() {
     const { closable, messages } = this;
-    return closable ? keyed("close-button", XButton({ disabled: false, focusable: true, label: messages.close, onClick: this.closeClickHandler, ref: this.closeButtonEl, round: false, scale: this.scale, title: messages.close })) : null;
+    return closable ? keyed("close-button", XButton({ disabled: false, focusable: true, label: messages.close, onClick: this.closeClickHandler, ref: this.closeButtonRef, round: false, scale: this.scale, title: messages.close })) : null;
   }
 }
 customElement("calcite-tab-title", TabTitle);

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

@@ -54,7 +54,7 @@ export declare class Table extends LitElement {
     /** Specifies the Unicode numeral system used by the component for localization. */
     numberingSystem?: NumberingSystem;
     /**
-     * Specifies the page size of the component. When `true`, renders `calcite-pagination`.
+     * Specifies the page size of the component. When present, renders `calcite-pagination`.
      *
      * @default 0
      */

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.3.0-next.99 */
+v3.3.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { isServer, css, nothing, html } from "lit";
 import { render } from "lit-html";

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.3.0-next.99 */
+v3.3.0 */
 import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { css, nothing, html } from "lit";
 import { createRef, ref } from "lit-html/directives/ref.js";

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.3.0-next.99 */
+v3.3.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, nothing, html } from "lit";
 import { createRef, ref } from "lit-html/directives/ref.js";

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.3.0-next.99 */
+v3.3.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, html } from "lit";

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

@@ -1,10 +1,10 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.3.0-next.99 */
+v3.3.0 */
 import { c as customElement } from "../../chunks/runtime.js";
-import { ref } from "lit/directives/ref.js";
 import { css, html } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
+import { createRef, ref } from "lit/directives/ref.js";
 import { s as slotChangeGetAssignedElements, e as getSlotAssignedElements } from "../../chunks/dom.js";
 const CSS = {
   section: "section"
@@ -16,6 +16,7 @@ const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-fo
 class Tabs extends LitElement {
   constructor() {
     super();
+    this.slotRef = createRef();
     this.tabs = [];
     this.titles = [];
     this.bordered = false;
@@ -57,9 +58,12 @@ class Tabs extends LitElement {
   }
   async updateAriaSettings() {
     await this.componentOnReady();
+    if (!this.slotRef.value) {
+      return;
+    }
     let tabIds;
     let titleIds;
-    const tabs = getSlotAssignedElements(this.slotEl, "calcite-tab");
+    const tabs = getSlotAssignedElements(this.slotRef.value, "calcite-tab");
     if (tabs.some((el) => el.tab) || this.titles.some((el) => el.tab)) {
       tabIds = tabs.sort((a, b) => a.tab.localeCompare(b.tab)).map((el) => el.id);
       titleIds = this.titles.sort((a, b) => a.tab.localeCompare(b.tab)).map((el) => el.id);
@@ -95,11 +99,8 @@ class Tabs extends LitElement {
       title.scale = scale;
     });
   }
-  setDefaultSlotRef(el) {
-    this.slotEl = el;
-  }
   render() {
-    return html`<slot name=${SLOTS.titleGroup}></slot><section class=${safeClassMap(CSS.section)}><slot @slotchange=${this.defaultSlotChangeHandler} ${ref(this.setDefaultSlotRef)}></slot></section>`;
+    return html`<slot name=${SLOTS.titleGroup}></slot><section class=${safeClassMap(CSS.section)}><slot @slotchange=${this.defaultSlotChangeHandler} ${ref(this.slotRef)}></slot></section>`;
   }
 }
 customElement("calcite-tabs", Tabs);

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.3.0-next.99 */
+v3.3.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { live } from "lit/directives/live.js";
 import { css, html } from "lit";
@@ -12,7 +12,7 @@ import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from
 import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
 import { a as slotChangeHasAssignedElement } from "../../chunks/dom.js";
 import { n as numberStringFormatter } from "../../chunks/locale.js";
-import { c as createObserver } from "../../chunks/observers.js";
+import { c as createObserver, u as updateRefObserver } from "../../chunks/observers.js";
 import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
 import { g as guid } from "../../chunks/guid.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
@@ -51,13 +51,13 @@ class TextArea extends LitElement {
   constructor() {
     super(...arguments);
     this.attributeWatch = useWatchAttributes(["autofocus", "spellcheck"], this.handleGlobalAttributesChanged);
-    this.footerEl = createRef();
+    this.footerRef = createRef();
     this.guid = guid();
     this.resizeObserver = createObserver("resize", async () => {
       await this.componentOnReady();
       const { textAreaHeight, textAreaWidth, elHeight, elWidth, footerHeight, footerWidth, validationMessageHeight } = this.getHeightAndWidthOfElements();
       if (footerWidth > 0 && footerWidth !== textAreaWidth) {
-        this.footerEl.value.style.width = `${textAreaWidth}px`;
+        this.footerRef.value.style.width = `${textAreaWidth}px`;
       }
       if (this.resize === "none") {
         return;
@@ -110,12 +110,10 @@ class TextArea extends LitElement {
   }
   async selectText() {
     await this.componentOnReady();
-    this.textAreaEl.select();
+    this.textAreaEl?.select();
   }
   async setFocus(options) {
-    return this.focusSetter(() => {
-      return this.textAreaEl;
-    }, options);
+    return this.focusSetter(() => this.textAreaEl, options);
   }
   connectedCallback() {
     super.connectedCallback();
@@ -181,11 +179,8 @@ class TextArea extends LitElement {
     syncHiddenFormInput("textarea", this, input);
   }
   setTextAreaEl(el) {
-    if (!el) {
-      return;
-    }
+    updateRefObserver(this.resizeObserver, this.textAreaEl, el);
     this.textAreaEl = el;
-    this.resizeObserver?.observe(el);
   }
   setTextAreaHeight() {
     const { textAreaHeight, elHeight, footerHeight, validationMessageHeight } = this.getHeightAndWidthOfElements();
@@ -196,7 +191,7 @@ class TextArea extends LitElement {
   getHeightAndWidthOfElements() {
     const { height: textAreaHeight, width: textAreaWidth } = this.textAreaEl ? this.textAreaEl.getBoundingClientRect() : NO_DIMENSIONS;
     const { height: elHeight, width: elWidth } = this.el.getBoundingClientRect();
-    const { height: footerHeight, width: footerWidth } = this.footerEl.value ? this.footerEl.value.getBoundingClientRect() : NO_DIMENSIONS;
+    const { height: footerHeight, width: footerWidth } = this.footerRef.value ? this.footerRef.value.getBoundingClientRect() : NO_DIMENSIONS;
     const { height: validationMessageHeight } = this.validationMessageEl ? this.validationMessageEl.getBoundingClientRect() : NO_DIMENSIONS;
     return {
       textAreaHeight,
@@ -232,7 +227,7 @@ class TextArea extends LitElement {
       [CSS.footer]: true,
       [CSS.readOnly]: this.readOnly,
       [CSS.hide]: !hasFooter
-    })} ${ref(this.footerEl)}><div class=${safeClassMap({
+    })} ${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>` || ""}${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>` });

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.3.0-next.99 */
+v3.3.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { ref } from "lit/directives/ref.js";

package/dist/components/calcite-tile-group/customElement.js

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.3.0-next.99 */
+v3.3.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { ref } from "lit/directives/ref.js";
 import { css, html } from "lit";

package/dist/components/calcite-tile-select/customElement.js

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.3.0-next.99 */
+v3.3.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";

package/dist/components/calcite-tile-select-group/customElement.js

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.3.0-next.99 */
+v3.3.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement } from "@arcgis/lumina";

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

@@ -1,10 +1,10 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.3.0-next.99 */
+v3.3.0 */
 import { c as customElement } from "../../chunks/runtime.js";
-import { ref } from "lit/directives/ref.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
+import { createRef, ref } from "lit/directives/ref.js";
 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";
@@ -55,7 +55,12 @@ const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-fo
 class TimePicker extends LitElement {
   constructor() {
     super();
+    this.fractionalSecondRef = createRef();
+    this.hourRef = createRef();
+    this.meridiemRef = createRef();
+    this.minuteRef = createRef();
     this.pointerActivated = false;
+    this.secondRef = createRef();
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
     this.time = useTime(this);
@@ -79,9 +84,7 @@ class TimePicker extends LitElement {
     this.styles = styles;
   }
   async setFocus(options) {
-    return this.focusSetter(() => {
-      return this.el;
-    }, options);
+    return this.focusSetter(() => this.el, options);
   }
   connectedCallback() {
     super.connectedCallback();
@@ -107,13 +110,13 @@ class TimePicker extends LitElement {
     }
     const { hourFormat } = this.time;
     switch (this.activeEl) {
-      case this.hourEl:
+      case this.hourRef.value:
         if (key === "ArrowRight") {
           this.focusPart("minute");
           event.preventDefault();
         }
         break;
-      case this.minuteEl:
+      case this.minuteRef.value:
         switch (key) {
           case "ArrowLeft":
             this.focusPart("hour");
@@ -130,7 +133,7 @@ class TimePicker extends LitElement {
             break;
         }
         break;
-      case this.secondEl:
+      case this.secondRef.value:
         switch (key) {
           case "ArrowLeft":
             this.focusPart("minute");
@@ -146,7 +149,7 @@ class TimePicker extends LitElement {
             break;
         }
         break;
-      case this.fractionalSecondEl:
+      case this.fractionalSecondRef.value:
         switch (key) {
           case "ArrowLeft":
             this.focusPart("second");
@@ -160,7 +163,7 @@ class TimePicker extends LitElement {
             break;
         }
         break;
-      case this.meridiemEl:
+      case this.meridiemRef.value:
         switch (key) {
           case "ArrowLeft":
             if (this.showFractionalSecond) {
@@ -182,7 +185,8 @@ class TimePicker extends LitElement {
   }
   async focusPart(target) {
     await componentFocusable(this);
-    this[`${target || "hour"}El`]?.focus();
+    const ref2 = target === "hour" ? this.hourRef : target === "minute" ? this.minuteRef : target === "second" ? this.secondRef : target === "fractionalSecond" ? this.fractionalSecondRef : this.meridiemRef;
+    ref2.value?.focus();
   }
   focusHandler(event) {
     if (this.pointerActivated) {
@@ -191,73 +195,58 @@ class TimePicker extends LitElement {
     this.activeEl = event.currentTarget;
   }
   fractionalSecondDownClickHandler() {
-    this.activeEl = this.fractionalSecondEl;
-    this.fractionalSecondEl.focus();
+    this.activeEl = this.fractionalSecondRef.value;
+    this.activeEl.focus();
     this.time.nudgeFractionalSecond("down");
   }
   fractionalSecondUpClickHandler() {
-    this.activeEl = this.fractionalSecondEl;
-    this.fractionalSecondEl.focus();
+    this.activeEl = this.fractionalSecondRef.value;
+    this.activeEl.focus();
     this.time.nudgeFractionalSecond("up");
   }
   hourDownClickHandler() {
-    this.activeEl = this.hourEl;
-    this.hourEl.focus();
+    this.activeEl = this.hourRef.value;
+    this.activeEl.focus();
     this.time.decrementHour();
   }
   hourUpClickHandler() {
-    this.activeEl = this.hourEl;
-    this.hourEl.focus();
+    this.activeEl = this.hourRef.value;
+    this.activeEl.focus();
     this.time.incrementHour();
   }
   inputClickHandler(event) {
     this.activeEl = event.target;
   }
   meridiemUpClickHandler() {
-    this.activeEl = this.meridiemEl;
-    this.meridiemEl.focus();
+    this.activeEl = this.meridiemRef.value;
+    this.activeEl.focus();
     this.time.toggleMeridiem("up");
   }
   meridiemDownClickHandler() {
-    this.activeEl = this.meridiemEl;
-    this.meridiemEl.focus();
+    this.activeEl = this.meridiemRef.value;
+    this.activeEl.focus();
     this.time.toggleMeridiem("down");
   }
   minuteDownClickHandler() {
-    this.activeEl = this.minuteEl;
-    this.minuteEl.focus();
+    this.activeEl = this.minuteRef.value;
+    this.activeEl.focus();
     this.time.decrementMinute();
   }
   minuteUpClickHandler() {
-    this.activeEl = this.minuteEl;
-    this.minuteEl.focus();
+    this.activeEl = this.minuteRef.value;
+    this.activeEl.focus();
     this.time.incrementMinute();
   }
   secondDownClickHandler() {
-    this.activeEl = this.secondEl;
-    this.secondEl.focus();
+    this.activeEl = this.secondRef.value;
+    this.activeEl.focus();
     this.time.decrementSecond();
   }
   secondUpClickHandler() {
-    this.activeEl = this.secondEl;
-    this.secondEl.focus();
+    this.activeEl = this.secondRef.value;
+    this.activeEl.focus();
     this.time.incrementSecond();
   }
-  setHourEl(el) {
-    this.hourEl = el;
-  }
-  setMeridiemEl(el) {
-    this.meridiemEl = el;
-  }
-  setMinuteEl(el) {
-    this.minuteEl = el;
-  }
-  setSecondEl(el) {
-    this.secondEl = el;
-  }
-  setFractionalSecondEl(el) {
-    this.fractionalSecondEl = el;
-  }
   timeChangeHandler(event) {
     event.stopPropagation();
     const newValue = event.detail;
@@ -294,8 +283,8 @@ class TimePicker extends LitElement {
     })} @click=${this.hourUpClickHandler} role=button><calcite-icon .icon=${ICONS.chevronUp} .scale=${iconScale}></calcite-icon></span><span .ariaLabel=${messages.hour} aria-valuemax=23 aria-valuemin=1 .ariaValueNow=${hourIsNumber && parseInt(hour) || "0"} .ariaValueText=${hour} class=${safeClassMap({
       [CSS.input]: true,
       [CSS.hour]: true,
-      [CSS.inputFocus]: activeEl && activeEl === this.hourEl
-    })} @click=${this.inputClickHandler} @focus=${this.focusHandler} @keydown=${handleHourKeyDownEvent} role=spinbutton tabindex=0 ${ref(this.setHourEl)}>${localizedHour || "--"}</span><span .ariaLabel=${messages.hourDown} class=${safeClassMap({
+      [CSS.inputFocus]: activeEl && activeEl === this.hourRef.value
+    })} @click=${this.inputClickHandler} @focus=${this.focusHandler} @keydown=${handleHourKeyDownEvent} role=spinbutton tabindex=0 ${ref(this.hourRef)}>${localizedHour || "--"}</span><span .ariaLabel=${messages.hourDown} class=${safeClassMap({
       [CSS.button]: true,
       [CSS.buttonHourDown]: true,
       [CSS.buttonBottomLeft]: true
@@ -305,8 +294,8 @@ class TimePicker extends LitElement {
     })} @click=${this.minuteUpClickHandler} role=button><calcite-icon .icon=${ICONS.chevronUp} .scale=${iconScale}></calcite-icon></span><span .ariaLabel=${messages.minute} aria-valuemax=12 aria-valuemin=1 .ariaValueNow=${minuteIsNumber && parseInt(minute) || "0"} .ariaValueText=${minute} class=${safeClassMap({
       [CSS.input]: true,
       [CSS.minute]: true,
-      [CSS.inputFocus]: activeEl && activeEl === this.minuteEl
-    })} @click=${this.inputClickHandler} @focus=${this.focusHandler} @keydown=${handleMinuteKeyDownEvent} role=spinbutton tabindex=0 ${ref(this.setMinuteEl)}>${localizedMinute || "--"}</span><span .ariaLabel=${messages.minuteDown} class=${safeClassMap({
+      [CSS.inputFocus]: activeEl && activeEl === this.minuteRef.value
+    })} @click=${this.inputClickHandler} @focus=${this.focusHandler} @keydown=${handleMinuteKeyDownEvent} role=spinbutton tabindex=0 ${ref(this.minuteRef)}>${localizedMinute || "--"}</span><span .ariaLabel=${messages.minuteDown} class=${safeClassMap({
       [CSS.button]: true,
       [CSS.buttonMinuteDown]: true
     })} @click=${this.minuteDownClickHandler} role=button><calcite-icon .icon=${ICONS.chevronDown} .scale=${iconScale}></calcite-icon></span></div>${this.showSecond && html`<span class=${safeClassMap({ [CSS.delimiter]: true, [CSS.minuteSuffix]: true })}>${localizedMinuteSuffix}</span>` || ""}${this.showSecond && html`<div class=${safeClassMap(CSS.column)} role=group><span .ariaLabel=${messages.secondUp} class=${safeClassMap({
@@ -315,8 +304,8 @@ class TimePicker extends LitElement {
     })} @click=${this.secondUpClickHandler} role=button><calcite-icon .icon=${ICONS.chevronUp} .scale=${iconScale}></calcite-icon></span><span .ariaLabel=${messages.second} aria-valuemax=59 aria-valuemin=0 .ariaValueNow=${secondIsNumber && parseInt(second) || "0"} .ariaValueText=${second} class=${safeClassMap({
       [CSS.input]: true,
       [CSS.second]: true,
-      [CSS.inputFocus]: activeEl && activeEl === this.secondEl
-    })} @click=${this.inputClickHandler} @focus=${this.focusHandler} @keydown=${handleSecondKeyDownEvent} role=spinbutton tabindex=0 ${ref(this.setSecondEl)}>${localizedSecond || "--"}</span><span .ariaLabel=${messages.secondDown} class=${safeClassMap({
+      [CSS.inputFocus]: activeEl && activeEl === this.secondRef.value
+    })} @click=${this.inputClickHandler} @focus=${this.focusHandler} @keydown=${handleSecondKeyDownEvent} role=spinbutton tabindex=0 ${ref(this.secondRef)}>${localizedSecond || "--"}</span><span .ariaLabel=${messages.secondDown} class=${safeClassMap({
       [CSS.button]: true,
       [CSS.buttonSecondDown]: true
     })} @click=${this.secondDownClickHandler} role=button><calcite-icon .icon=${ICONS.chevronDown} .scale=${iconScale}></calcite-icon></span></div>` || ""}${this.showFractionalSecond && html`<span class=${safeClassMap({ [CSS.delimiter]: true, [CSS.decimalSeparator]: true })}>${localizedDecimalSeparator}</span>` || ""}${this.showFractionalSecond && html`<div class=${safeClassMap(CSS.column)} role=group><span .ariaLabel=${messages.fractionalSecondUp} class=${safeClassMap({
@@ -325,8 +314,8 @@ class TimePicker extends LitElement {
     })} @click=${this.fractionalSecondUpClickHandler} role=button><calcite-icon .icon=${ICONS.chevronUp} .scale=${iconScale}></calcite-icon></span><span .ariaLabel=${messages.fractionalSecond} aria-valuemax=999 aria-valuemin=1 .ariaValueNow=${fractionalSecondIsNumber && parseInt(fractionalSecond) || "0"} .ariaValueText=${localizedFractionalSecond} class=${safeClassMap({
       [CSS.input]: true,
       [CSS.fractionalSecond]: true,
-      [CSS.inputFocus]: activeEl && activeEl === this.fractionalSecondEl
-    })} @click=${this.inputClickHandler} @focus=${this.focusHandler} @keydown=${handleFractionalSecondKeyDownEvent} role=spinbutton tabindex=0 ${ref(this.setFractionalSecondEl)}>${localizedFractionalSecond || "".padStart(this.stepPrecision, "-")}</span><span .ariaLabel=${messages.fractionalSecondDown} class=${safeClassMap({
+      [CSS.inputFocus]: activeEl && activeEl === this.fractionalSecondRef.value
+    })} @click=${this.inputClickHandler} @focus=${this.focusHandler} @keydown=${handleFractionalSecondKeyDownEvent} role=spinbutton tabindex=0 ${ref(this.fractionalSecondRef)}>${localizedFractionalSecond || "".padStart(this.stepPrecision, "-")}</span><span .ariaLabel=${messages.fractionalSecondDown} class=${safeClassMap({
       [CSS.button]: true,
       [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}</span>` || ""}${showMeridiem && html`<div class=${safeClassMap({
@@ -339,8 +328,8 @@ class TimePicker extends LitElement {
     })} @click=${this.meridiemUpClickHandler} role=button><calcite-icon .icon=${ICONS.chevronUp} .scale=${iconScale}></calcite-icon></span><span .ariaLabel=${messages.meridiem} aria-valuemax=2 aria-valuemin=1 .ariaValueNow=${meridiem === "PM" && "2" || "1"} .ariaValueText=${meridiem} class=${safeClassMap({
       [CSS.input]: true,
       [CSS.meridiem]: true,
-      [CSS.inputFocus]: activeEl && activeEl === this.meridiemEl
-    })} @click=${this.inputClickHandler} @focus=${this.focusHandler} @keydown=${handleMeridiemKeyDownEvent} role=spinbutton tabindex=0 ${ref(this.setMeridiemEl)}>${localizedMeridiem || "--"}</span><span .ariaLabel=${messages.meridiemDown} class=${safeClassMap({
+      [CSS.inputFocus]: activeEl && activeEl === this.meridiemRef.value
+    })} @click=${this.inputClickHandler} @focus=${this.focusHandler} @keydown=${handleMeridiemKeyDownEvent} role=spinbutton tabindex=0 ${ref(this.meridiemRef)}>${localizedMeridiem || "--"}</span><span .ariaLabel=${messages.meridiemDown} class=${safeClassMap({
       [CSS.button]: true,
       [CSS.buttonMeridiemDown]: true,
       [CSS.buttonBottomRight]: true

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.3.0-next.99 */
+v3.3.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { keyed } from "lit/directives/keyed.js";

package/dist/components/calcite-tip-group/customElement.js

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.3.0-next.99 */
+v3.3.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement } from "@arcgis/lumina";

package/dist/components/calcite-tip-manager/customElement.js

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.3.0-next.99 */
+v3.3.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { ref } from "lit/directives/ref.js";
 import { keyed } from "lit/directives/keyed.js";

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

@@ -1,10 +1,10 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.3.0-next.99 */
+v3.3.0 */
 import { c as customElement } from "../../chunks/runtime.js";
-import { ref } from "lit/directives/ref.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, setAttribute, safeClassMap } from "@arcgis/lumina";
+import { createRef, ref } from "lit/directives/ref.js";
 import { d as defaultOffsetDistance, r as reposition, a as disconnectFloatingUI, h as hideFloatingUI, c as connectFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
 import { g as guid } from "../../chunks/guid.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
@@ -264,11 +264,12 @@ class TooltipManager {
     return referenceEl instanceof Element ? getShadowRootNode(referenceEl) : null;
   }
 }
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host{display:contents;--calcite-floating-ui-z-index: var(--calcite-tooltip-z-index, var(--calcite-z-index-tooltip))}.position-container{inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0;z-index:var(--calcite-floating-ui-z-index)}@starting-style{.position-container{opacity:0;inset-block-start:0;left:0}}.position-container .calcite-floating-ui-anim{position:relative;transition-duration:var(--calcite-floating-ui-transition);transition-property:inset-block-start,left,opacity,display;transition-behavior:allow-discrete;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.position-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.position-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.position-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}.position-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.position-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{.position-container[data-placement] .calcite-floating-ui-anim--active{opacity:0}}.calcite-floating-ui-arrow{pointer-events:none;position:absolute;z-index:calc(var(--calcite-z-index) * -1);fill:var(--calcite-color-foreground-1)}.calcite-floating-ui-arrow__stroke{stroke:var(--calcite-color-border-3)}.container{position:relative;overflow:hidden;padding:.75rem 1rem;font-size:var(--calcite-font-size--2);line-height:1.375;font-weight:var(--calcite-font-weight-medium);border-radius:var(--calcite-tooltip-corner-radius, var(--calcite-corner-radius-round));color:var(--calcite-tooltip-text-color, var(--calcite-color-text-1));max-inline-size:20rem;max-block-size:20rem;text-align:start}.position-container .calcite-floating-ui-anim{border-width:1px;border-style:solid;background-color:var(--calcite-tooltip-background-color, var(--calcite-color-foreground-1));border-color:var(--calcite-tooltip-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-tooltip-corner-radius, var(--calcite-corner-radius-round))}.calcite-floating-ui-arrow{fill:var(--calcite-tooltip-background-color, var(--calcite-color-foreground-1))}.calcite-floating-ui-arrow__stroke{stroke:var(--calcite-tooltip-border-color, var(--calcite-color-border-3))}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host{display:contents;--calcite-floating-ui-z-index: var(--calcite-tooltip-z-index, var(--calcite-z-index-tooltip))}.position-container{inline-size:max-content;display:none;max-inline-size:100vw;max-block-size:100vh;inset-block-start:0;left:0;z-index:var(--calcite-floating-ui-z-index)}@starting-style{.position-container{opacity:0;inset-block-start:0;left:0}}.position-container{max-inline-size:var(--calcite-tooltip-max-size-x, 20rem);max-block-size:20rem}.position-container .calcite-floating-ui-anim{position:relative;transition-duration:var(--calcite-floating-ui-transition);transition-property:inset-block-start,left,opacity,display;transition-behavior:allow-discrete;opacity:0;box-shadow:0 0 16px #00000029;z-index:var(--calcite-z-index);border-radius:.25rem}.position-container[data-placement^=bottom] .calcite-floating-ui-anim{inset-block-start:-5px}.position-container[data-placement^=top] .calcite-floating-ui-anim{inset-block-start:5px}.position-container[data-placement^=left] .calcite-floating-ui-anim{left:5px}.position-container[data-placement^=right] .calcite-floating-ui-anim{left:-5px}.position-container[data-placement] .calcite-floating-ui-anim--active{opacity:1;inset-block-start:0;left:0}@starting-style{.position-container[data-placement] .calcite-floating-ui-anim--active{opacity:0}}.calcite-floating-ui-arrow{pointer-events:none;position:absolute;z-index:calc(var(--calcite-z-index) * -1);fill:var(--calcite-color-foreground-1)}.calcite-floating-ui-arrow__stroke{stroke:var(--calcite-color-border-3)}.container{position:relative;overflow:hidden;padding:.75rem 1rem;font-size:var(--calcite-font-size--2);line-height:1.375;font-weight:var(--calcite-font-weight-medium);word-wrap:break-word;word-break:break-word;border-radius:var(--calcite-tooltip-corner-radius, var(--calcite-corner-radius-round));color:var(--calcite-tooltip-text-color, var(--calcite-color-text-1));text-align:start}.position-container .calcite-floating-ui-anim{border-width:1px;border-style:solid;background-color:var(--calcite-tooltip-background-color, var(--calcite-color-foreground-1));border-color:var(--calcite-tooltip-border-color, var(--calcite-color-border-3));border-radius:var(--calcite-tooltip-corner-radius, var(--calcite-corner-radius-round))}.calcite-floating-ui-arrow{fill:var(--calcite-tooltip-background-color, var(--calcite-color-foreground-1))}.calcite-floating-ui-arrow__stroke{stroke:var(--calcite-tooltip-border-color, var(--calcite-color-border-3))}:host([hidden]){display:none}[hidden]{display:none}`;
 const manager = new TooltipManager();
 class Tooltip extends LitElement {
   constructor() {
     super(...arguments);
+    this.arrowRef = createRef();
     this.guid = IDS.host(guid());
     this.transitionProp = "opacity";
     this.floatingLayout = "vertical";
@@ -290,7 +291,7 @@ class Tooltip extends LitElement {
     this.styles = styles;
   }
   async reposition(delayed = false) {
-    const { referenceEl, placement, overlayPositioning, offsetDistance, offsetSkidding, arrowEl, floatingEl } = this;
+    const { referenceEl, placement, overlayPositioning, offsetDistance, offsetSkidding, arrowRef, floatingEl } = this;
     return reposition(this, {
       floatingEl,
       referenceEl,
@@ -298,7 +299,7 @@ class Tooltip extends LitElement {
       placement,
       offsetDistance,
       offsetSkidding,
-      arrowEl,
+      arrowEl: arrowRef.value,
       type: "tooltip"
     }, delayed);
   }
@@ -404,7 +405,7 @@ class Tooltip extends LitElement {
     return html`<div class=${safeClassMap(CSS.positionContainer)} ${ref(this.setFloatingEl)}><div class=${safeClassMap({
       [FloatingCSS.animation]: true,
       [FloatingCSS.animationActive]: displayed
-    })} ${ref(this.setTransitionEl)}>${FloatingArrow({ floatingLayout, ref: (arrowEl) => this.arrowEl = arrowEl })}<div class=${safeClassMap(CSS.container)}><slot></slot></div></div></div>`;
+    })} ${ref(this.setTransitionEl)}>${FloatingArrow({ floatingLayout, ref: this.arrowRef })}<div class=${safeClassMap(CSS.container)}><slot></slot></div></div></div>`;
   }
 }
 customElement("calcite-tooltip", Tooltip);

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.3.0-next.99 */
+v3.3.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, setAttribute } from "@arcgis/lumina";