@esri/calcite-components 5.0.0-next.86 → 5.0.0-next.87

package/dist/components/calcite-input-time-zone/customElement.d.ts

@@ -17,7 +17,7 @@ export abstract class InputTimeZone extends LitElement {
    */
   accessor clearable: boolean;
   /**
-   * When `true`, interaction is prevented and the component is displayed with lower opacity.
+   * When `true`, prevents interaction and decreases the component's opacity.
    *
    * @default false
    */
@@ -658,14 +658,12 @@ export abstract class InputTimeZone extends LitElement {
   /** Specifies the name of the component. Required to pass the component's `value` on form submission. */
   accessor name: string;
   /**
-   * Specifies how the offset will be displayed, where
+   * When `mode` is `"offset"`, specifies how the offset will be displayed, where
    *
    * `"user"` uses `UTC` or `GMT` depending on the user's locale,
    * `"gmt"` always uses `GMT`, and
    * `"utc"` always uses `UTC`.
    *
-   * This only applies to the `offset` mode.
-   *
    * @default "user"
    */
   accessor offsetStyle: OffsetStyle;
@@ -686,7 +684,7 @@ export abstract class InputTimeZone extends LitElement {
    */
   accessor overlayPositioning: OverlayPositioning;
   /**
-   * When `true`, the component's value can be read, but controls are not accessible and the value cannot be modified.
+   * When `true`, the component's `value` can be read, but controls are not accessible and the `value` cannot be modified.
    *
    * @default false
    */
@@ -706,7 +704,7 @@ export abstract class InputTimeZone extends LitElement {
    */
   accessor scale: Scale;
   /**
-   * Specifies the status of the input field, which determines message and icons.
+   * Specifies the input field's status, which determines message and icons.
    *
    * @default "idle"
    */
@@ -751,9 +749,9 @@ export abstract class InputTimeZone extends LitElement {
   readonly calciteInputTimeZoneBeforeOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Fires when the component's `value` changes. */
   readonly calciteInputTimeZoneChange: import("@arcgis/lumina").TargetedEvent<this, void>;
-  /** Fires after the component is closed and animation is complete. */
+  /** Fires when the component is closed and animation is complete. */
   readonly calciteInputTimeZoneClose: import("@arcgis/lumina").TargetedEvent<this, void>;
-  /** Fires after the component is opened and animation is complete. */
+  /** Fires when the component is opened and animation is complete. */
   readonly calciteInputTimeZoneOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
   readonly "@eventTypes": {
     calciteInputTimeZoneBeforeClose: InputTimeZone["calciteInputTimeZoneBeforeClose"]["detail"];

package/dist/components/calcite-input-time-zone/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.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { repeat } from "lit/directives/repeat.js";
 import { keyed } from "lit/directives/keyed.js";

package/dist/components/calcite-label/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.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";

package/dist/components/calcite-link/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.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { literal, html as html$1 } from "lit/static-html.js";

package/dist/components/calcite-list/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.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 import { D as DEBOUNCE, 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-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.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, html, nothing } from "lit";

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.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 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.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 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.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 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.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 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.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, html } from "lit";

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.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { createRef, ref } from "lit/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.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 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.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 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.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { createRef, ref } from "lit/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.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { 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.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { 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.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, html, nothing } from "lit";

package/dist/components/calcite-panel/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.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, html, nothing } from "lit";

package/dist/components/calcite-popover/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.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, html } from "lit";

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.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 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,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.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, nothing, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";

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.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";

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.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { live } from "lit/directives/live.js";
 import { html, css } from "lit";

package/dist/components/calcite-scrim/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.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";

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.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 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.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";

package/dist/components/calcite-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.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";

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

@@ -127,6 +127,18 @@ export abstract class Sheet extends LitElement {
    * @param extraContainers - Additional elements to include in the focus trap. This is useful for including elements that may have related parts rendered outside the main focus trapping element.
    */
   updateFocusTrapElements(extraContainers?: FocusTrapOptions["extraContainers"]): Promise<void>;
+  /**
+   * Updates the sheet's inline and/or block size via method call.
+   *
+   * Use this method to programmatically override the sheet's width (inline) and/or height (block).
+   * Pass `null` to clear the override and revert to the default or CSS variable size.
+   *
+   * @param size
+   */
+  updateSize(size: {
+      inline?: number | null;
+      block?: number | null;
+  }): Promise<void>;
   /** Fires when the component is requested to be closed and before the closing transition begins. */
   readonly calciteSheetBeforeClose: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */

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

@@ -1,17 +1,16 @@
 /* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 import { C as CSS_UTILITY, b as resizeShiftStep, d as resizeStep, c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
-import { i as interact } from "../../chunks/interact.min.js";
+import { u as useSizeOverride, i as interact } from "../../chunks/useSizeOverride.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, setAttribute, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
-import { g as getElementDir, a as getStylePixelValue, A as ensureId } from "../../chunks/dom.js";
+import { A as ensureId, g as getElementDir, a as getStylePixelValue } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
 import { g as getDimensionClass } from "../../chunks/dynamicClasses.js";
-import { c as clamp } from "../../chunks/math.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as usePreventDocumentScroll } from "../../chunks/usePreventDocumentScroll.js";
 import { u as useFocusTrap } from "../../chunks/useFocusTrap.js";
@@ -38,6 +37,7 @@ const styles = css`:host{position:absolute;inset:0;display:flex;visibility:hidde
 class Sheet extends LitElement {
   constructor() {
     super();
+    this.contentRef = createRef();
     this.focusTrap = useFocusTrap({
       triggerProp: "open",
       focusTrapOptions: {
@@ -67,6 +67,13 @@ class Sheet extends LitElement {
         this.open = false;
       }
     };
+    this.sizeOverride = useSizeOverride({
+      targetElement: this.contentRef,
+      getBounds: () => ({
+        inline: { min: this.resizeValues.minInlineSize, max: this.resizeValues.maxInlineSize },
+        block: { min: this.resizeValues.minBlockSize, max: this.resizeValues.maxBlockSize }
+      })
+    });
     this.topLayer = useTopLayer({
       disabledOverride: () => this.embedded,
       target: this.transitionRef
@@ -121,18 +128,24 @@ class Sheet extends LitElement {
     this.focusTrap.setExtraContainers(extraContainers);
     this.focusTrap.updateContainerElements();
   }
+  async updateSize(size) {
+    this.updateSizeInternal(size);
+  }
   connectedCallback() {
     super.connectedCallback();
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
     this.setupInteractions();
   }
   willUpdate(changes) {
-    if (changes.has("opened") && (this.hasUpdated || this.opened !== false)) {
+    if (changes.has("opened") && (this.hasUpdated || this.opened !== false) && this.transitionRef.value) {
       toggleOpenClose(this);
     }
     if (changes.has("open") && (this.hasUpdated || this.open !== false) || changes.has("position") && (this.hasUpdated || this.position !== "inline-start") || changes.has("resizable") && (this.hasUpdated || this.resizable !== false)) {
       this.setupInteractions();
     }
+    if (this.contentRef.value) {
+      this.contentId = ensureId(this.contentRef.value);
+    }
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -158,93 +171,85 @@ class Sheet extends LitElement {
     const { position } = this;
     return position === "block-start" || position === "block-end" ? ICONS.dragVertical : ICONS.dragHorizontal;
   }
-  getContentElDOMRect() {
-    return this.contentEl.getBoundingClientRect();
+  getContentRefDOMRect() {
+    return this.contentRef.value?.getBoundingClientRect();
   }
   handleKeyDown(event) {
     const { key, defaultPrevented, shiftKey } = event;
-    const { position, resizable, contentEl, el, resizeValues: { maxBlockSize, maxInlineSize, minBlockSize, minInlineSize } } = this;
+    const { contentRef, position, resizable, el, resizeValues: { maxBlockSize, maxInlineSize, minBlockSize, minInlineSize } } = this;
     const arrowKeys = position === "block-end" || position === "block-start" ? ["ArrowUp", "ArrowDown"] : ["ArrowLeft", "ArrowRight"];
     const keys = [...arrowKeys, "Home", "End"];
-    if (!resizable || !contentEl || defaultPrevented || !keys.includes(key)) {
+    if (!resizable || !contentRef.value || defaultPrevented || !keys.includes(key)) {
       return;
     }
-    const rect = this.getContentElDOMRect();
+    const rect = this.getContentRefDOMRect();
     const invertRTL = getElementDir(el) === "rtl" ? -1 : 1;
     const stepValue = shiftKey ? resizeShiftStep : resizeStep;
     switch (key) {
       case "ArrowUp":
-        this.updateSize({
-          size: rect.height + (position === "block-end" ? stepValue : -stepValue),
-          type: "blockSize"
+        this.updateSizeInternal({
+          block: rect.height + (position === "block-end" ? stepValue : -stepValue)
         });
         event.preventDefault();
         break;
       case "ArrowDown":
-        this.updateSize({
-          size: rect.height + (position === "block-end" ? -stepValue : stepValue),
-          type: "blockSize"
+        this.updateSizeInternal({
+          block: rect.height + (position === "block-end" ? -stepValue : stepValue)
         });
         event.preventDefault();
         break;
       case "ArrowLeft":
-        this.updateSize({
-          size: rect.width + (position === "inline-end" ? stepValue : -stepValue) * invertRTL,
-          type: "inlineSize"
+        this.updateSizeInternal({
+          inline: rect.width + (position === "inline-end" ? stepValue : -stepValue) * invertRTL
         });
         event.preventDefault();
         break;
       case "ArrowRight":
-        this.updateSize({
-          size: rect.width + (position === "inline-end" ? -stepValue : stepValue) * invertRTL,
-          type: "inlineSize"
+        this.updateSizeInternal({
+          inline: rect.width + (position === "inline-end" ? -stepValue : stepValue) * invertRTL
         });
         event.preventDefault();
         break;
       case "Home":
-        this.updateSize({
-          size: position === "block-start" || position === "block-end" ? minBlockSize : minInlineSize,
-          type: position === "block-start" || position === "block-end" ? "blockSize" : "inlineSize"
-        });
+        this.updateSizeInternal(position === "block-start" || position === "block-end" ? { block: minBlockSize } : { inline: minInlineSize });
         event.preventDefault();
         break;
       case "End":
-        this.updateSize({
-          size: position === "block-start" || position === "block-end" ? maxBlockSize : maxInlineSize,
-          type: position === "block-start" || position === "block-end" ? "blockSize" : "inlineSize"
-        });
+        this.updateSizeInternal(position === "block-start" || position === "block-end" ? { block: maxBlockSize } : { inline: maxInlineSize });
         event.preventDefault();
         break;
     }
   }
-  updateSize({ type, size }) {
-    const { contentEl, resizeValues } = this;
-    if (!contentEl) {
+  updateSizeInternal(size) {
+    if (!this.contentRef.value) {
       return;
     }
-    const resizeMin = type === "blockSize" ? "minBlockSize" : "minInlineSize";
-    const resizeMax = type === "blockSize" ? "maxBlockSize" : "maxInlineSize";
-    const clamped = resizeValues[resizeMin] && resizeValues[resizeMax] ? clamp(size, resizeValues[resizeMin], resizeValues[resizeMax]) : size;
-    const rounded = Math.round(clamped);
+    const appliedSize = this.sizeOverride.resize(size);
     this.resizeValues = {
-      ...resizeValues,
-      [type]: rounded
+      ...this.resizeValues,
+      ...appliedSize.inline !== void 0 && {
+        inlineSize: appliedSize.inline
+      },
+      ...appliedSize.block !== void 0 && {
+        blockSize: appliedSize.block
+      }
     };
-    contentEl.style[type] = size !== null ? `${rounded}px` : null;
   }
   cleanupInteractions() {
     this.interaction?.unset();
-    this.updateSize({ size: null, type: "inlineSize" });
-    this.updateSize({ size: null, type: "blockSize" });
+    this.updateSizeInternal({
+      inline: null,
+      block: null
+    });
   }
   async setupInteractions() {
     this.cleanupInteractions();
-    const { el, contentEl, resizable, position, open, resizeHandleEl } = this;
-    if (!contentEl || !open || !resizable || !resizeHandleEl) {
+    const { contentRef, el, resizable, position, open, resizeHandleEl } = this;
+    if (!contentRef.value || !open || !resizable || !resizeHandleEl) {
       return;
     }
     await this.el.componentOnReady();
-    const { inlineSize, minInlineSize, blockSize, minBlockSize, maxInlineSize, maxBlockSize } = window.getComputedStyle(contentEl);
+    const { inlineSize, minInlineSize, blockSize, minBlockSize, maxInlineSize, maxBlockSize } = window.getComputedStyle(contentRef.value);
     const values = {
       inlineSize: getStylePixelValue(inlineSize),
       blockSize: getStylePixelValue(blockSize),
@@ -255,7 +260,7 @@ class Sheet extends LitElement {
     };
     this.resizeValues = values;
     const rtl = getElementDir(el) === "rtl";
-    this.interaction = interact(contentEl, { context: el.ownerDocument }).resizable({
+    this.interaction = interact(contentRef.value, { context: el.ownerDocument }).resizable({
       edges: {
         top: position === "block-end" ? resizeHandleEl : false,
         right: position === (rtl ? "inline-end" : "inline-start") ? resizeHandleEl : false,
@@ -277,10 +282,7 @@ class Sheet extends LitElement {
       listeners: {
         move: ({ rect }) => {
           const isBlock = position === "block-start" || position === "block-end";
-          this.updateSize({
-            size: isBlock ? rect.height : rect.width,
-            type: isBlock ? "blockSize" : "inlineSize"
-          });
+          this.updateSizeInternal(isBlock ? { block: rect.height } : { inline: rect.width });
         }
       }
     });
@@ -308,10 +310,6 @@ class Sheet extends LitElement {
     this.resizeHandleEl = el;
     this.setupInteractions();
   }
-  setContentEl(el) {
-    this.contentEl = el;
-    this.contentId = ensureId(el);
-  }
   handleOutsideClose() {
     if (this.outsideCloseDisabled) {
       return;
@@ -336,7 +334,7 @@ class Sheet extends LitElement {
       [CSS_UTILITY.rtl]: dir === "rtl",
       [getDimensionClass("width", this.width, this.widthScale)]: !!(this.width || this.widthScale),
       [getDimensionClass("height", this.height, this.heightScale)]: !!(this.height || this.heightScale)
-    })} .popover=${!this.embedded ? "manual" : null} ${ref(this.transitionRef)}><calcite-scrim class=${safeClassMap(CSS.scrim)} @click=${this.handleOutsideClose}></calcite-scrim><div class=${safeClassMap(CSS.content)} id=${IDS.sheetContent} ${ref(this.setContentEl)}><div class=${safeClassMap(CSS.contentContainer)}><slot></slot></div>${resizable ? keyed("resize-handle", html`<div .ariaLabel=${this.messages.resizeEnabled} .ariaOrientation=${isBlockPosition ? "vertical" : "horizontal"} .ariaValueMax=${isBlockPosition ? resizeValues.maxBlockSize : resizeValues.maxInlineSize} .ariaValueMin=${isBlockPosition ? resizeValues.minBlockSize : resizeValues.minInlineSize} .ariaValueNow=${isBlockPosition ? resizeValues.blockSize : resizeValues.inlineSize} class=${safeClassMap(CSS.resizeHandle)} @keydown=${this.handleKeyDown} role=separator tabindex=0 touch-action=none ${ref(this.setResizeHandleEl)}><div class=${safeClassMap(CSS.resizeHandleBar)}><calcite-icon .icon=${this.getResizeIcon()} scale=s></calcite-icon></div></div>`) : null}</div></div>`;
+    })} .popover=${!this.embedded ? "manual" : null} ${ref(this.transitionRef)}><calcite-scrim class=${safeClassMap(CSS.scrim)} @click=${this.handleOutsideClose}></calcite-scrim><div class=${safeClassMap(CSS.content)} id=${IDS.sheetContent} ${ref(this.contentRef)}><div class=${safeClassMap(CSS.contentContainer)}><slot></slot></div>${resizable ? keyed("resize-handle", html`<div .ariaLabel=${this.messages.resizeEnabled} .ariaOrientation=${isBlockPosition ? "vertical" : "horizontal"} .ariaValueMax=${isBlockPosition ? resizeValues.maxBlockSize : resizeValues.maxInlineSize} .ariaValueMin=${isBlockPosition ? resizeValues.minBlockSize : resizeValues.minInlineSize} .ariaValueNow=${isBlockPosition ? resizeValues.blockSize : resizeValues.inlineSize} class=${safeClassMap(CSS.resizeHandle)} @keydown=${this.handleKeyDown} role=separator tabindex=0 touch-action=none ${ref(this.setResizeHandleEl)}><div class=${safeClassMap(CSS.resizeHandleBar)}><calcite-icon .icon=${this.getResizeIcon()} scale=s></calcite-icon></div></div>`) : null}</div></div>`;
   }
 }
 customElement("calcite-sheet", Sheet);

package/dist/components/calcite-shell/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.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, html } from "lit";

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

@@ -1,50 +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.
-v5.0.0-next.86 */
+v5.0.0-next.87 */
 import { C as CSS_UTILITY, b as resizeShiftStep, d as resizeStep, c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
-import { i as interact } from "../../chunks/interact.min.js";
+import { u as useSizeOverride, i as interact } from "../../chunks/useSizeOverride.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { g as getElementDir, a as getStylePixelValue, b as slotChangeGetAssignedElements, s as slotChangeHasAssignedElement } from "../../chunks/dom.js";
 import { g as getDimensionClass } from "../../chunks/dynamicClasses.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { makeController } from "@arcgis/lumina/controllers";
-const useSizeOverride = (context) => makeController(() => {
-  const applyAxis = (requestedSize, axis, el) => {
-    if (requestedSize === void 0) {
-      return void 0;
-    }
-    const prop = axis === "block" ? "block-size" : "inline-size";
-    if (requestedSize === null) {
-      el.style.removeProperty(prop);
-      return null;
-    }
-    let clampedSize = requestedSize;
-    const bounds = context.getBounds?.() ?? { inline: { min: null, max: null }, block: { min: null, max: null } };
-    const { min, max } = axis === "inline" ? bounds.inline : bounds.block;
-    if (min !== null) {
-      clampedSize = Math.round(Math.max(clampedSize, min));
-    }
-    if (max !== null) {
-      clampedSize = Math.round(Math.min(clampedSize, max));
-    }
-    el.style.setProperty(prop, `${Math.round(clampedSize)}px`);
-    return clampedSize;
-  };
-  return {
-    resize(sizes) {
-      const targetElement = context.targetElement.value;
-      const inline = applyAxis(sizes.inline, "inline", targetElement);
-      const block = applyAxis(sizes.block, "block", targetElement);
-      return {
-        inline,
-        block
-      };
-    }
-  };
-});
 const styles$1 = css`.calcite-animate{opacity:0;animation-fill-mode:both;animation-duration:var(--calcite-animation-timing)}.calcite-animate__in{animation-name:in}.calcite-animate__in-down{animation-name:in-down}.calcite-animate__in-up{animation-name:in-up}.calcite-animate__in-right{animation-name:in-right}.calcite-animate__in-left{animation-name:in-left}.calcite-animate__in-scale{animation-name:in-scale}@keyframes in{0%{opacity:0}to{opacity:1}}@keyframes in-down{0%{opacity:0;transform:translate3D(0,-5px,0)}to{opacity:1;transform:translateZ(0)}}@keyframes in-up{0%{opacity:0;transform:translate3D(0,5px,0)}to{opacity:1;transform:translateZ(0)}}@keyframes in-right{0%{opacity:0;transform:translate3D(-5px,0,0)}to{opacity:1;transform:translateZ(0)}}@keyframes in-left{0%{opacity:0;transform:translate3D(5px,0,0)}to{opacity:1;transform:translateZ(0)}}@keyframes in-scale{0%{opacity:0;transform:scale3D(.95,.95,1)}to{opacity:1;transform:scaleZ(1)}}`;
 const CSS = {
   container: "container",