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

package/dist/components/calcite-list-item/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.98 */
+v3.3.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, html, nothing } from "lit";
@@ -20,12 +20,12 @@ const focusMap = /* @__PURE__ */ new Map();
 class ListItem extends LitElement {
   constructor() {
     super();
-    this.actionsEndEl = createRef();
-    this.actionsStartEl = createRef();
-    this.containerEl = createRef();
-    this.contentEl = createRef();
-    this.defaultSlotEl = createRef();
-    this.handleGridEl = createRef();
+    this.actionsEndRef = createRef();
+    this.actionsStartRef = createRef();
+    this.containerRef = createRef();
+    this.contentRef = createRef();
+    this.defaultSlotRef = createRef();
+    this.handleGridRef = createRef();
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
     this.hasActionsEnd = false;
@@ -93,18 +93,16 @@ class ListItem extends LitElement {
   }
   async setFocus(options) {
     return this.focusSetter(() => {
-      const { containerEl: { value: containerEl }, parentListEl } = this;
+      const { containerRef, parentListEl } = this;
       const focusIndex = focusMap.get(parentListEl);
       if (typeof focusIndex === "number") {
-        const cells = this.getGridCells();
-        if (cells[focusIndex]) {
-          this.focusCell(cells[focusIndex]);
+        const cell = this.getGridCells()[focusIndex];
+        if (cell) {
+          this.focusCell(cell);
           return;
-        } else {
-          return { target: containerEl, includeContainer: true, strategy: "focusable" };
         }
       }
-      return { target: containerEl, includeContainer: true, strategy: "focusable" };
+      return { target: containerRef.value, includeContainer: true, strategy: "focusable" };
     }, options);
   }
   connectedCallback() {
@@ -131,7 +129,7 @@ class ListItem extends LitElement {
       this.sortHandleOpenHandler();
     }
     if (changes.has("displayMode") && this.hasUpdated) {
-      this.handleExpandableChange(this.defaultSlotEl.value);
+      this.handleExpandableChange(this.defaultSlotRef.value);
     }
     if (changes.has("expanded") && this.hasUpdated) {
       if (this.expanded) {
@@ -170,7 +168,7 @@ class ListItem extends LitElement {
   }
   handleCalciteInternalListDefaultSlotChanges(event) {
     event.stopPropagation();
-    this.handleExpandableChange(this.defaultSlotEl.value);
+    this.handleExpandableChange(this.defaultSlotRef.value);
   }
   setSortHandleEl(el) {
     this.sortHandleEl = el;
@@ -281,10 +279,10 @@ class ListItem extends LitElement {
   }
   getGridCells() {
     return [
-      this.handleGridEl.value,
-      this.actionsStartEl.value,
-      this.contentEl.value,
-      this.actionsEndEl.value
+      this.handleGridRef.value,
+      this.actionsStartRef.value,
+      this.contentRef.value,
+      this.actionsEndRef.value
     ].filter((el) => el && !el.hidden);
   }
   handleItemKeyDown(event) {
@@ -293,7 +291,7 @@ class ListItem extends LitElement {
     }
     const { key } = event;
     const composedPath = event.composedPath();
-    const { containerEl: { value: containerEl }, actionsStartEl: { value: actionsStartEl }, actionsEndEl: { value: actionsEndEl }, expanded, expandable } = this;
+    const { containerRef, actionsStartRef: { value: actionsStartEl }, actionsEndRef: { value: actionsEndEl }, expanded, expandable } = this;
     const cells = this.getGridCells();
     const currentIndex = cells.findIndex((cell) => composedPath.includes(cell));
     if (key === "Enter" && !composedPath.includes(actionsStartEl) && !composedPath.includes(actionsEndEl)) {
@@ -324,7 +322,7 @@ class ListItem extends LitElement {
         }
       } else if (currentIndex === 0) {
         this.focusCell(null);
-        containerEl.focus();
+        containerRef.value.focus();
       } else if (cells[currentIndex] && cells[prevIndex]) {
         this.focusCell(cells[prevIndex]);
       }
@@ -373,7 +371,7 @@ class ListItem extends LitElement {
   }
   renderDragHandle() {
     const { label, dragHandle, dragDisabled, setPosition, setSize, moveToItems, sortDisabled, addToItems } = this;
-    return dragHandle ? keyed("drag-handle-container", html`<div .ariaLabel=${label} class=${safeClassMap({ [CSS.dragContainer]: true, [CSS.gridCell]: true })} role=gridcell ${ref(this.handleGridEl)}><calcite-sort-handle .addToItems=${addToItems} .disabled=${dragDisabled} .label=${label} .moveToItems=${moveToItems} @calciteSortHandleBeforeClose=${this.handleSortHandleBeforeClose} @calciteSortHandleBeforeOpen=${this.handleSortHandleBeforeOpen} @calciteSortHandleClose=${this.handleSortHandleClose} @calciteSortHandleOpen=${this.handleSortHandleOpen} overlay-positioning=fixed .scale=${this.scale} .setPosition=${setPosition} .setSize=${setSize} .sortDisabled=${sortDisabled} ${ref(this.setSortHandleEl)}></calcite-sort-handle></div>`) : null;
+    return dragHandle ? keyed("drag-handle-container", html`<div .ariaLabel=${label} class=${safeClassMap({ [CSS.dragContainer]: true, [CSS.gridCell]: true })} role=gridcell ${ref(this.handleGridRef)}><calcite-sort-handle .addToItems=${addToItems} .disabled=${dragDisabled} .label=${label} .moveToItems=${moveToItems} @calciteSortHandleBeforeClose=${this.handleSortHandleBeforeClose} @calciteSortHandleBeforeOpen=${this.handleSortHandleBeforeOpen} @calciteSortHandleClose=${this.handleSortHandleClose} @calciteSortHandleOpen=${this.handleSortHandleOpen} overlay-positioning=fixed .scale=${this.scale} .setPosition=${setPosition} .setSize=${setSize} .sortDisabled=${sortDisabled} ${ref(this.setSortHandleEl)}></calcite-sort-handle></div>`) : null;
   }
   renderExpanded() {
     const { el, expanded, expandable, messages, displayMode, scale } = this;
@@ -389,11 +387,11 @@ class ListItem extends LitElement {
   }
   renderActionsStart() {
     const { label, hasActionsStart } = this;
-    return keyed("actions-start-container", html`<div .ariaLabel=${label} class=${safeClassMap({ [CSS.actionsStart]: true, [CSS.gridCell]: true })} .hidden=${!hasActionsStart} role=gridcell ${ref(this.actionsStartEl)}><slot name=${SLOTS.actionsStart} @slotchange=${this.handleActionsStartSlotChange}></slot></div>`);
+    return keyed("actions-start-container", html`<div .ariaLabel=${label} class=${safeClassMap({ [CSS.actionsStart]: true, [CSS.gridCell]: true })} .hidden=${!hasActionsStart} role=gridcell ${ref(this.actionsStartRef)}><slot name=${SLOTS.actionsStart} @slotchange=${this.handleActionsStartSlotChange}></slot></div>`);
   }
   renderActionsEnd() {
     const { label, hasActionsEnd, closable, messages } = this;
-    return keyed("actions-end-container", html`<div .ariaLabel=${label} class=${safeClassMap({ [CSS.actionsEnd]: true, [CSS.gridCell]: true })} .hidden=${!(hasActionsEnd || closable)} role=gridcell ${ref(this.actionsEndEl)}><slot name=${SLOTS.actionsEnd} @slotchange=${this.handleActionsEndSlotChange}></slot>${closable ? keyed("close-action", html`<calcite-action appearance=transparent class=${safeClassMap(CSS.close)} .icon=${ICONS.close} .label=${messages.close} @click=${this.handleCloseClick} .scale=${this.scale} .text=${messages.close}></calcite-action>`) : null}</div>`);
+    return keyed("actions-end-container", html`<div .ariaLabel=${label} class=${safeClassMap({ [CSS.actionsEnd]: true, [CSS.gridCell]: true })} .hidden=${!(hasActionsEnd || closable)} role=gridcell ${ref(this.actionsEndRef)}><slot name=${SLOTS.actionsEnd} @slotchange=${this.handleActionsEndSlotChange}></slot>${closable ? keyed("close-action", html`<calcite-action appearance=transparent class=${safeClassMap(CSS.close)} .icon=${ICONS.close} .label=${messages.close} @click=${this.handleCloseClick} .scale=${this.scale} .text=${messages.close}></calcite-action>`) : null}</div>`);
   }
   renderContentStart() {
     const { hasContentStart } = this;
@@ -423,7 +421,7 @@ class ListItem extends LitElement {
     return html`<div class=${safeClassMap({
       [CSS.nestedContainer]: true,
       [CSS.nestedContainerExpanded]: this.expandable && this.expanded
-    })}><slot @slotchange=${this.handleDefaultSlotChange} ${ref(this.defaultSlotEl)}></slot></div>`;
+    })}><slot @slotchange=${this.handleDefaultSlotChange} ${ref(this.defaultSlotRef)}></slot></div>`;
   }
   renderContentProperties() {
     const { label, description, hasCustomContent } = this;
@@ -446,7 +444,7 @@ class ListItem extends LitElement {
       [CSS.contentContainerUnavailable]: unavailable,
       [CSS.contentContainerSelectable]: selectionMode !== "none",
       [CSS.contentContainerHasCenterContent]: hasCenterContent
-    })} @click=${this.handleItemClick} role=gridcell ${ref(this.contentEl)}>${content}</div>`);
+    })} @click=${this.handleItemClick} role=gridcell ${ref(this.contentRef)}>${content}</div>`);
   }
   render() {
     const { expandable, expanded, level, active, label, selected, selectionAppearance, selectionMode, interactionMode, closed, filterHidden, bordered, disabled, hasContentBottom } = this;
@@ -463,7 +461,7 @@ class ListItem extends LitElement {
       [CSS.containerBorder]: showSelectionBorder,
       [CSS.containerBorderSelected]: selectionBorderSelected,
       [CSS.containerBorderUnselected]: selectionBorderUnselected
-    })} .hidden=${closed || filterHidden} @focus=${this.focusCellNull} @focusin=${this.emitInternalListItemActive} @keydown=${this.handleItemKeyDown} role=row .tabIndex=${active ? 0 : -1} ${ref(this.containerEl)}>${this.renderDragHandle()}${this.renderSelected()}${this.renderExpanded()}<div class=${safeClassMap({
+    })} .hidden=${closed || filterHidden} @focus=${this.focusCellNull} @focusin=${this.emitInternalListItemActive} @keydown=${this.handleItemKeyDown} role=row .tabIndex=${active ? 0 : -1} ${ref(this.containerRef)}>${this.renderDragHandle()}${this.renderSelected()}${this.renderExpanded()}<div class=${safeClassMap({
       [CSS.contentContainerWrapper]: true,
       [CSS.contentContainerWrapperBordered]: contentContainerWrapperBordered
     })}>${this.renderActionsStart()}${this.renderContentContainer()}${this.renderActionsEnd()}</div></div>${this.renderContentBottom()}</div>${this.renderDefaultContainer()}` });

package/dist/components/calcite-list-item-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.98 */
+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-loader/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.98 */
+v3.3.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html, nothing, svg } from "lit";
 import { LitElement, setAttribute, safeClassMap, safeStyleMap } from "@arcgis/lumina";

package/dist/components/calcite-menu/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.98 */
+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-menu-item/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.98 */
+v3.3.0 */
 import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { keyed } from "lit/directives/keyed.js";

package/dist/components/calcite-meter/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.98 */
+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-modal/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.98 */
+v3.3.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, html, nothing } from "lit";
@@ -53,7 +53,6 @@ const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-fo
 class Modal extends LitElement {
   constructor() {
     super();
-    this.closeButtonEl = createRef();
     this.cssVarObserver = createObserver("mutation", () => {
       this.updateSizeCssVars();
     });
@@ -73,7 +72,7 @@ class Modal extends LitElement {
     })(this);
     this.usePreventDocumentScroll = usePreventDocumentScroll()(this);
     this.ignoreOpenChange = false;
-    this.modalContent = createRef();
+    this.modalContentRef = createRef();
     this.mutationObserver = createObserver("mutation", () => this.focusTrap.updateContainerElements());
     this._open = false;
     this.openProp = "opened";
@@ -127,19 +126,17 @@ class Modal extends LitElement {
     }
   }
   async scrollContent(top = 0, left = 0) {
-    if (this.modalContent.value) {
-      if (this.modalContent.value.scrollTo) {
-        this.modalContent.value.scrollTo({ top, left, behavior: "smooth" });
+    if (this.modalContentRef.value) {
+      if (this.modalContentRef.value.scrollTo) {
+        this.modalContentRef.value.scrollTo({ top, left, behavior: "smooth" });
       } else {
-        this.modalContent.value.scrollTop = top;
-        this.modalContent.value.scrollLeft = left;
+        this.modalContentRef.value.scrollTop = top;
+        this.modalContentRef.value.scrollLeft = left;
       }
     }
   }
   async setFocus(options) {
-    return this.focusSetter(() => {
-      return this.el;
-    }, options);
+    return this.focusSetter(() => this.el, options);
   }
   async updateFocusTrapElements(extraContainers) {
     this.focusTrap.setExtraContainers(extraContainers);
@@ -289,7 +286,7 @@ class Modal extends LitElement {
     })} ${ref(this.setTransitionEl)}><div class=${safeClassMap(CSS.header)}>${this.renderCloseButton()}<header class=${safeClassMap(CSS.title)}><slot name=${CSS.header} @slotchange=${this.handleHeaderSlotChange}></slot></header></div>${this.renderContentTop()}<div class=${safeClassMap({
       [CSS.content]: true,
       [CSS.contentNoFooter]: !this.hasFooter
-    })} ${ref(this.modalContent)}><slot name=${SLOTS.content} @slotchange=${this.handleContentSlotChange}></slot></div>${this.renderContentBottom()}${this.renderFooter()}</div></div>`;
+    })} ${ref(this.modalContentRef)}><slot name=${SLOTS.content} @slotchange=${this.handleContentSlotChange}></slot></div>${this.renderContentBottom()}${this.renderFooter()}</div></div>`;
   }
   renderFooter() {
     return keyed("footer", html`<div class=${safeClassMap(CSS.footer)} .hidden=${!this.hasFooter}><span class=${safeClassMap(CSS.back)}><slot name=${SLOTS.back} @slotchange=${this.handleBackSlotChange}></slot></span><span class=${safeClassMap(CSS.secondary)}><slot name=${SLOTS.secondary} @slotchange=${this.handleSecondarySlotChange}></slot></span><span class=${safeClassMap(CSS.primary)}><slot name=${SLOTS.primary} @slotchange=${this.handlePrimarySlotChange}></slot></span></div>`);
@@ -301,7 +298,7 @@ class Modal extends LitElement {
     return html`<div class=${safeClassMap(CSS.contentBottom)} .hidden=${!this.hasContentBottom}><slot name=${SLOTS.contentBottom} @slotchange=${this.contentBottomSlotChangeHandler}></slot></div>`;
   }
   renderCloseButton() {
-    return !this.closeButtonDisabled ? keyed("button", html`<button .ariaLabel=${this.messages.close} class=${safeClassMap(CSS.close)} @click=${this.handleCloseClick} title=${this.messages.close ?? nothing} ${ref(this.closeButtonEl)}><calcite-icon .icon=${ICONS.close} .scale=${getIconScale(this.scale)}></calcite-icon></button>`) : null;
+    return !this.closeButtonDisabled ? keyed("button", html`<button .ariaLabel=${this.messages.close} class=${safeClassMap(CSS.close)} @click=${this.handleCloseClick} title=${this.messages.close ?? nothing}><calcite-icon .icon=${ICONS.close} .scale=${getIconScale(this.scale)}></calcite-icon></button>`) : null;
   }
   renderStyle() {
     if (!this.fullscreen && (this.cssWidth || this.cssHeight)) {

package/dist/components/calcite-navigation/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.98 */
+v3.3.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { createRef, ref } from "lit-html/directives/ref.js";

package/dist/components/calcite-navigation-logo/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.98 */
+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-navigation-user/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.98 */
+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-notice/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.98 */
+v3.3.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { createRef, ref } from "lit-html/directives/ref.js";

package/dist/components/calcite-option/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.98 */
+v3.3.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent } from "@arcgis/lumina";

package/dist/components/calcite-option-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.98 */
+v3.3.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent } from "@arcgis/lumina";

package/dist/components/calcite-pagination/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.98 */
+v3.3.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, nothing, html } from "lit";

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

@@ -39,6 +39,12 @@ export declare class Panel extends LitElement {
      */
     get closed(): boolean;
     set closed(value: boolean);
+    /**
+     * When `collapsible` is present, specifies the direction of the collapse icon.
+     *
+     * @default "down"
+     */
+    collapseDirection: CollapseDirection;
     /**
      * When present, hides the component's content area.
      *

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

@@ -1,15 +1,15 @@
 /*! 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.98 */
+v3.3.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
-import { ref } from "lit/directives/ref.js";
 import { css, html, nothing } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
+import { createRef, ref } from "lit-html/directives/ref.js";
 import { a as slotChangeHasAssignedElement, s as slotChangeGetAssignedElements } from "../../chunks/dom.js";
 import { u as updateHostInteraction, I as InteractiveContainer } from "../../chunks/interactive.js";
 import { g as getIconScale } from "../../chunks/component.js";
-import { c as createObserver } from "../../chunks/observers.js";
+import { c as createObserver, u as updateRefObserver } from "../../chunks/observers.js";
 import { S as SLOTS$1 } from "../../chunks/resources2.js";
 import { H as Heading } from "../../chunks/Heading.js";
 import { e as defaultEndMenuPlacement } from "../../chunks/floating-ui.js";
@@ -20,6 +20,7 @@ const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-fo
 class Panel extends LitElement {
   constructor() {
     super();
+    this.containerRef = createRef();
     this.resizeObserver = createObserver("resize", () => this.resizeHandler());
     this.messages = useT9n();
     this._closed = false;
@@ -75,9 +76,7 @@ class Panel extends LitElement {
     this.panelScrollEl?.scrollTo(options);
   }
   async setFocus(options) {
-    return this.focusSetter(() => {
-      return this.containerEl;
-    }, options);
+    return this.focusSetter(() => this.containerRef.value, options);
   }
   willUpdate(changes) {
     if (changes.has("collapsed") && this.hasUpdated) {
@@ -117,9 +116,6 @@ class Panel extends LitElement {
       panelScrollEl.removeAttribute("tabindex");
     }
   }
-  setContainerRef(node) {
-    this.containerEl = node;
-  }
   closeClickHandler() {
     this.emitCloseEvent();
   }
@@ -184,12 +180,8 @@ class Panel extends LitElement {
     this.hasContentTop = slotChangeHasAssignedElement(event);
   }
   setPanelScrollEl(el) {
+    updateRefObserver(this.resizeObserver, this.panelScrollEl, el);
     this.panelScrollEl = el;
-    this.resizeObserver?.disconnect();
-    if (el) {
-      this.resizeObserver?.observe(el);
-      this.resizeHandler();
-    }
   }
   handleAlertsSlotChange(event) {
     slotChangeGetAssignedElements(event)?.map((el) => {
@@ -258,7 +250,7 @@ class Panel extends LitElement {
   }
   render() {
     const { disabled, loading, closed } = this;
-    const panelNode = html`<article .ariaBusy=${loading} class=${safeClassMap(CSS.container)} .hidden=${closed} ${ref(this.setContainerRef)}>${this.renderHeaderNode()}${this.renderContent()}${this.renderContentBottom()}${this.renderFooterNode()}${keyed("alerts", html`<slot name=${SLOTS.alerts} @slotchange=${this.handleAlertsSlotChange}></slot>`)}</article>`;
+    const panelNode = html`<article .ariaBusy=${loading} class=${safeClassMap(CSS.container)} .hidden=${closed} ${ref(this.containerRef)}>${this.renderHeaderNode()}${this.renderContent()}${this.renderContentBottom()}${this.renderFooterNode()}${keyed("alerts", html`<slot name=${SLOTS.alerts} @slotchange=${this.handleAlertsSlotChange}></slot>`)}</article>`;
     return InteractiveContainer({ disabled, children: html`${loading ? html`<calcite-scrim .loading=${loading}></calcite-scrim>` : null}${panelNode}` });
   }
 }

package/dist/components/calcite-popover/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.98 */
+v3.3.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
+import { ref } from "lit/directives/ref.js";
 import { css, html } from "lit";
-import { createRef, ref } from "lit-html/directives/ref.js";
 import { LitElement, createEvent, safeClassMap, setAttribute } from "@arcgis/lumina";
 import { d as defaultOffsetDistance, r as reposition, a as disconnectFloatingUI, f as filterValidFlipPlacements, c as connectFloatingUI, h as hideFloatingUI, F as FloatingCSS } from "../../chunks/floating-ui.js";
 import { i as isPrimaryPointerButton, u as isKeyboardTriggeredClick, t as toAriaBoolean, q as queryElementRoots } from "../../chunks/dom.js";
@@ -130,7 +130,6 @@ const manager = new PopoverManager();
 class Popover extends LitElement {
   constructor() {
     super(...arguments);
-    this.closeButtonEl = createRef();
     this.focusTrap = useFocusTrap({
       triggerProp: "open",
       focusTrapOptions: {
@@ -190,9 +189,7 @@ class Popover extends LitElement {
     }, delayed);
   }
   async setFocus(options) {
-    return this.focusSetter(() => {
-      return this.el;
-    }, options);
+    return this.focusSetter(() => this.el, options);
   }
   async updateFocusTrapElements() {
     this.focusTrap.updateContainerElements();
@@ -333,7 +330,7 @@ class Popover extends LitElement {
   }
   renderCloseButton() {
     const { messages, closable } = this;
-    return closable ? keyed(CSS.closeButtonContainer, html`<div class=${safeClassMap(CSS.closeButtonContainer)}><calcite-action appearance=transparent class=${safeClassMap(CSS.closeButton)} @click=${this.hide} .scale=${this.scale} .text=${messages.close} ${ref(this.closeButtonEl)}><calcite-icon icon=x .scale=${getIconScale(this.scale)}></calcite-icon></calcite-action></div>`) : null;
+    return closable ? keyed(CSS.closeButtonContainer, html`<div class=${safeClassMap(CSS.closeButtonContainer)}><calcite-action appearance=transparent class=${safeClassMap(CSS.closeButton)} @click=${this.hide} .scale=${this.scale} .text=${messages.close}><calcite-icon icon=x .scale=${getIconScale(this.scale)}></calcite-icon></calcite-action></div>`) : null;
   }
   renderHeader() {
     const { heading, headingLevel } = this;

package/dist/components/calcite-progress/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.98 */
+v3.3.0 */
 import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, safeClassMap, safeStyleMap } from "@arcgis/lumina";

package/dist/components/calcite-radio-button/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.98 */
+v3.3.0 */
 import { c as customElement } from "../../chunks/runtime.js";
-import { ref } from "lit/directives/ref.js";
 import { css, nothing, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
+import { createRef, ref } from "lit-html/directives/ref.js";
 import { g as getRoundRobinIndex } from "../../chunks/array.js";
 import { g as getElementDir } from "../../chunks/dom.js";
 import { c as connectForm, d as disconnectForm, H as HiddenFormInputSlot } from "../../chunks/form.js";
@@ -20,6 +20,7 @@ const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-fo
 class RadioButton extends LitElement {
   constructor() {
     super();
+    this.containerRef = createRef();
     this.focusSetter = useSetFocus()(this);
     this.checked = false;
     this.disabled = false;
@@ -46,9 +47,7 @@ class RadioButton extends LitElement {
     this.calciteInternalRadioButtonCheckedChange.emit();
   }
   async setFocus(options) {
-    return this.focusSetter(() => {
-      return this.containerEl;
-    }, options);
+    return this.focusSetter(() => this.containerRef.value, options);
   }
   connectedCallback() {
     this.rootNode = this.el.getRootNode();
@@ -154,9 +153,6 @@ class RadioButton extends LitElement {
       });
     }
   }
-  setContainerEl(el) {
-    this.containerEl = el;
-  }
   uncheckAllRadioButtonsInGroup() {
     const radioButtons = this.queryButtons();
     radioButtons.forEach((radioButton) => {
@@ -266,7 +262,7 @@ class RadioButton extends LitElement {
   }
   render() {
     const tabIndex = this.getTabIndex();
-    return InteractiveContainer({ disabled: this.disabled, children: html`<div .ariaChecked=${this.checked} .ariaLabel=${getLabelText(this)} class=${safeClassMap(CSS.container)} @blur=${this.onContainerBlur} @focus=${this.onContainerFocus} role=radio tabindex=${tabIndex ?? nothing} ${ref(this.setContainerEl)}><div class=${safeClassMap(CSS.radio)}></div>${this.labelText && InternalLabel({ labelText: this.labelText, spacingInlineStart: true }) || ""}</div>${HiddenFormInputSlot({ component: this })}` });
+    return InteractiveContainer({ disabled: this.disabled, children: html`<div .ariaChecked=${this.checked} .ariaLabel=${getLabelText(this)} class=${safeClassMap(CSS.container)} @blur=${this.onContainerBlur} @focus=${this.onContainerFocus} role=radio tabindex=${tabIndex ?? nothing} ${ref(this.containerRef)}><div class=${safeClassMap(CSS.radio)}></div>${this.labelText && InternalLabel({ labelText: this.labelText, spacingInlineStart: true }) || ""}</div>${HiddenFormInputSlot({ component: this })}` });
   }
 }
 customElement("calcite-radio-button", RadioButton);

package/dist/components/calcite-radio-button-group/customElement.d.ts

@@ -19,7 +19,7 @@ export declare class RadioButtonGroup extends LitElement {
     /** When provided, displays label text on the component. */
     labelText: string;
     /**
-     * Defines the layout of the component.
+     * Defines the layout of the component. [Deprecated] The `"grid"` value is deprecated, use `"horizontal"` instead.
      *
      * @default "horizontal"
      */

package/dist/components/calcite-radio-button-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.98 */
+v3.3.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
@@ -9,6 +9,7 @@ import { I as InternalLabel } from "../../chunks/InternalLabel.js";
 import { V as Validation } from "../../chunks/Validation.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { l as logger } from "../../chunks/logger.js";
 const CSS = {
   itemWrapper: "item-wrapper"
 };
@@ -58,6 +59,9 @@ class RadioButtonGroup extends LitElement {
   }
   loaded() {
     this.passPropsToRadioButtons();
+    if (this.layout === "grid") {
+      logger.warn(`The "grid" value of the layout property is deprecated and will be removed in v4.0. Use "horizontal" instead.`);
+    }
   }
   disconnectedCallback() {
     super.disconnectedCallback();

package/dist/components/calcite-rating/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.98 */
+v3.3.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { live } from "lit/directives/live.js";
 import { css, html as html$1 } from "lit";

package/dist/components/calcite-scrim/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.98 */
+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 { c as createObserver } from "../../chunks/observers.js";
 import { h as slotChangeHasContent } from "../../chunks/dom.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
@@ -23,6 +23,7 @@ const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-fo
 class Scrim extends LitElement {
   constructor() {
     super(...arguments);
+    this.loaderRef = createRef();
     this.resizeObserver = createObserver("resize", () => this.handleResize());
     this.messages = useT9n();
     this.hasContent = false;
@@ -45,10 +46,6 @@ class Scrim extends LitElement {
   handleDefaultSlotChange(event) {
     this.hasContent = slotChangeHasContent(event);
   }
-  storeLoaderEl(el) {
-    this.loaderEl = el;
-    this.handleResize();
-  }
   getScale(size) {
     if (size < BREAKPOINTS.s) {
       return "s";
@@ -59,15 +56,12 @@ class Scrim extends LitElement {
     }
   }
   handleResize() {
-    const { loaderEl, el } = this;
-    if (!loaderEl) {
-      return;
-    }
+    const { el } = this;
     this.loaderScale = this.getScale(Math.min(el.clientHeight, el.clientWidth) ?? 0);
   }
   render() {
-    const { hasContent, loading, messages } = this;
-    return html`<div class=${safeClassMap(CSS.scrim)}>${loading ? html`<calcite-loader .label=${messages.loading} .scale=${this.loaderScale} ${ref(this.storeLoaderEl)}></calcite-loader>` : null}<div class=${safeClassMap(CSS.content)} .hidden=${!hasContent}><slot @slotchange=${this.handleDefaultSlotChange}></slot></div></div>`;
+    const { hasContent, loading, loaderScale, messages } = this;
+    return html`<div class=${safeClassMap(CSS.scrim)}>${loading && loaderScale ? html`<calcite-loader .label=${messages.loading} .scale=${loaderScale} ${ref(this.loaderRef)}></calcite-loader>` : null}<div class=${safeClassMap(CSS.content)} .hidden=${!hasContent}><slot @slotchange=${this.handleDefaultSlotChange}></slot></div></div>`;
   }
 }
 customElement("calcite-scrim", Scrim);

package/dist/components/calcite-segmented-control/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.98 */
+v3.3.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, isServer, nothing, html } from "lit";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";

package/dist/components/calcite-segmented-control-item/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.98 */
+v3.3.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";