@esri/calcite-components 5.2.0-next.5 → 5.2.0-next.51

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

@@ -4,7 +4,8 @@ import { css, html } from "lit";
 import { LitElement, createEvent, stringOrBoolean, safeClassMap } from "@arcgis/lumina";
 import { createRef, ref } from "lit/directives/ref.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
-import { c as connectLabel, d as disconnectLabel, g as getLabelText } from "../../chunks/label.js";
+import { g as getLabelText } from "../../chunks/label.js";
+import { u as useLabel } from "../../chunks/useLabel.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { g as getIconScale } from "../../chunks/component.js";
 import { I as InternalLabel } from "../../chunks/InternalLabel.js";
@@ -12,7 +13,7 @@ import { V as Validation } from "../../chunks/Validation.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
 import { u as useInteractive } from "../../chunks/useInteractive.js";
 import { u as useForm } from "../../chunks/useForm.js";
-const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;flex-direction:column;font-size:var(--calcite-select-font-size);font-weight:var(--calcite-internal-select-font-weight, var(--calcite-font-weight-regular))}.wrapper{position:relative;display:flex;align-items:stretch;inline-size:var(--select-width);block-size:var(--calcite-internal-select-block-size, 32px)}.wrapper:focus-within .icon,.wrapper:active .icon,.wrapper:hover .icon{color:var(--calcite-select-icon-color-hover, var(--calcite-color-text-1))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){--calcite-internal-select-font-size: var(--calcite-font-size-relative-sm);--calcite-internal-select-spacing-inline: var(--calcite-space-sm) var(--calcite-space-2xl);--calcite-internal-select-icon-container-padding-inline: var(--calcite-space-2xs);--calcite-internal-select-block-size: 24px}:host([scale=m]){--calcite-internal-select-font-size: var(--calcite-font-size-relative-base);--calcite-internal-select-spacing-inline: var(--calcite-space-md) var(--calcite-space-3xl);--calcite-internal-select-icon-container-padding-inline: var(--calcite-space-sm)}:host([scale=l]){--calcite-internal-select-font-size: var(--calcite-font-size-relative-md);--calcite-internal-select-spacing-inline: var(--calcite-space-lg) var(--calcite-space-4xl);--calcite-internal-select-icon-container-padding-inline: var(--calcite-space-sm-plus);--calcite-internal-select-block-size: 44px}:host([width=auto]){inline-size:auto}:host([width=half]){inline-size:50%}:host([width=full]){inline-size:100%}.select{margin:0;box-sizing:border-box;inline-size:100%;cursor:pointer;appearance:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-style:solid;font-family:inherit;outline-color:transparent;font-weight:inherit;font-size:var(--calcite-select-font-size, var(--calcite-internal-select-font-size));color:var(--calcite-select-text-color, var(--calcite-color-text-2));border-color:var(--calcite-select-border-color, var(--calcite-color-border-input));border-width:var(--calcite-select-internal-border-width, var(--calcite-border-width-sm));padding-inline:var(--calcite-internal-select-spacing-inline);padding-block:var(--calcite-internal-select-spacing-block);border-inline-end-width:0;line-height:var(--calcite-internal-select-line-height, normal);background-color:var(--calcite-select-background-color, var(--calcite-color-foreground-1));border-radius:var(--calcite-select-corner-radius, var(--calcite-corner-radius-none));box-shadow:var(--calcite-select-shadow, var(--calcite-shadow-none))}.select:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}select:disabled{border-color:var(--calcite-color-border-input);--tw-bg-opacity: 1}.icon-container{pointer-events:none;position:absolute;inset-block:0px;display:flex;align-items:center;border-width:0px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:transparent;color:var(--calcite-color-text-2);inset-inline-end:0px;border-start-start-radius:var(--calcite-select-corner-radius, var(--calcite-corner-radius-none));border-start-end-radius:var(--calcite-select-corner-radius, var(--calcite-corner-radius-none));border-end-start-radius:var(--calcite-select-corner-radius, var(--calcite-corner-radius-none));border-end-end-radius:var(--calcite-select-corner-radius, var(--calcite-corner-radius-none));border-color:var(--calcite-select-border-color, var(--calcite-color-border-input));border-inline-width:0 var(--calcite-select-internal-icon-border-inline-end-width, var(--calcite-border-width-sm));padding-inline:var(--calcite-internal-select-icon-container-padding-inline)}.icon-container .icon{color:var(--calcite-select-icon-color, var(--calcite-color-text-3))}:host([status=invalid]) select,:host([status=invalid]) .icon-container{border-color:var(--calcite-color-status-danger)}:host([status=invalid]) select:focus,:host([status=invalid]) .icon-container:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-status-danger);outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.select:focus~.icon-container{border-color:transparent}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}::slotted(input[slot=hidden-form-input]){margin:0!important;opacity:0!important;outline:none!important;padding:0!important;position:absolute!important;inset:0!important;transform:none!important;-webkit-appearance:none!important;z-index:-1!important}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host([disabled]){cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-opacity-disabled)}:host([disabled]) *,:host([disabled]) ::slotted(*){pointer-events:none}:host{display:flex;flex-direction:column;font-size:var(--calcite-select-font-size);font-weight:var(--calcite-internal-select-font-weight, var(--calcite-font-weight-regular))}.wrapper{position:relative;display:flex;align-items:stretch;inline-size:var(--select-width);block-size:var(--calcite-internal-select-block-size, 32px)}.wrapper:focus-within .icon,.wrapper:active .icon,.wrapper:hover .icon{color:var(--calcite-select-icon-color-hover, var(--calcite-color-text-1))}:host([disabled]) ::slotted([calcite-hydrated][disabled]),:host([disabled]) [calcite-hydrated][disabled]{opacity:1}.interaction-container{display:contents}:host([scale=s]){--calcite-internal-select-font-size: var(--calcite-font-size-relative-sm);--calcite-internal-select-spacing-inline: var(--calcite-space-sm) var(--calcite-space-2xl);--calcite-internal-select-icon-container-padding-inline: var(--calcite-space-2xs);--calcite-internal-select-block-size: 24px}:host([scale=m]){--calcite-internal-select-font-size: var(--calcite-font-size-relative-base);--calcite-internal-select-spacing-inline: var(--calcite-space-md) var(--calcite-space-3xl);--calcite-internal-select-icon-container-padding-inline: var(--calcite-space-sm)}:host([scale=l]){--calcite-internal-select-font-size: var(--calcite-font-size-relative-md);--calcite-internal-select-spacing-inline: var(--calcite-space-lg) var(--calcite-space-4xl);--calcite-internal-select-icon-container-padding-inline: var(--calcite-space-sm-plus);--calcite-internal-select-block-size: 44px}:host([width=auto]){inline-size:auto}:host([width=half]){inline-size:50%}:host([width=full]){inline-size:100%}.select{margin:0;box-sizing:border-box;inline-size:100%;cursor:pointer;appearance:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-style:solid;font-family:inherit;outline-color:transparent;font-weight:inherit;font-size:var(--calcite-select-font-size, var(--calcite-internal-select-font-size));color:var(--calcite-select-text-color, var(--calcite-color-text-2));border-color:var(--calcite-select-border-color, var(--calcite-color-border-input));border-width:var(--calcite-select-internal-border-width, var(--calcite-border-width-sm));padding-inline:var(--calcite-internal-select-spacing-inline);padding-block:var(--calcite-internal-select-spacing-block);border-inline-end-width:0;line-height:var(--calcite-internal-select-line-height, normal);background-color:var(--calcite-select-background-color, var(--calcite-color-foreground-1));border-radius:var(--calcite-select-corner-radius, var(--calcite-corner-radius));box-shadow:var(--calcite-select-shadow, var(--calcite-shadow-none))}.select:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}select:disabled{border-color:var(--calcite-color-border-input);--tw-bg-opacity: 1}.icon-container{pointer-events:none;position:absolute;inset-block:0px;display:flex;align-items:center;border-width:0px;border-style:solid;border-color:var(--calcite-color-border-input);background-color:transparent;color:var(--calcite-color-text-2);inset-inline-end:0px;border-start-start-radius:var(--calcite-select-corner-radius, var(--calcite-corner-radius));border-start-end-radius:var(--calcite-select-corner-radius, var(--calcite-corner-radius));border-end-start-radius:var(--calcite-select-corner-radius, var(--calcite-corner-radius));border-end-end-radius:var(--calcite-select-corner-radius, var(--calcite-corner-radius));border-color:var(--calcite-select-border-color, var(--calcite-color-border-input));border-inline-width:0 var(--calcite-select-internal-icon-border-inline-end-width, var(--calcite-border-width-sm));padding-inline:var(--calcite-internal-select-icon-container-padding-inline)}.icon-container .icon{color:var(--calcite-select-icon-color, var(--calcite-color-text-3))}:host([status=invalid]) select,:host([status=invalid]) .icon-container{border-color:var(--calcite-color-status-danger)}:host([status=invalid]) select:focus,:host([status=invalid]) .icon-container:focus{outline:var(--calcite-border-width-md) solid var(--calcite-color-status-danger);outline-offset:calc(calc(-1 * var(--calcite-spacing-base)) * calc(1 - (2*clamp(0,var(--calcite-offset-invert-focus),1))))}.select:focus~.icon-container{border-color:transparent}.internal-label-alignment--center{align-items:center}.internal-label-alignment--end{align-items:end}.internal-label--container{display:flex;justify-content:space-between;color:var(--calcite-color-text-1)}.internal-label-required--indicator{font-weight:var(--calcite-font-weight-medium);color:var(--calcite-color-status-danger);padding-inline:var(--calcite-spacing-base)}.internal-label-required--indicator:hover{cursor:help}.internal-label--text{line-height:1}:host([scale=s]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-xxs)}:host([scale=s]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=s]) .internal-label--text{font-size:var(--calcite-font-size--2)}:host([scale=m]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-sm)}:host([scale=m]) .internal-label--text{font-size:var(--calcite-font-size--1)}:host([scale=l]) .internal-label-spacing--bottom{margin-block-end:var(--calcite-spacing-sm)}:host([scale=l]) .internal-label-spacing-inline--end{margin-inline-end:var(--calcite-spacing-md)}:host([scale=l]) .internal-label-spacing-inline--start{margin-inline-start:var(--calcite-spacing-md)}:host([scale=l]) .internal-label--text{font-size:var(--calcite-font-size-0)}.validation-container{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch}:host([scale=m]) .validation-container,:host([scale=l]) .validation-container{padding-block-start:.5rem}:host([scale=s]) .validation-container{padding-block-start:.25rem}:host([hidden]){display:none}[hidden]{display:none}`;
 const CSS = {
   icon: "icon",
   iconContainer: "icon-container",
@@ -38,6 +39,7 @@ class Select extends LitElement {
     this.messages = useT9n();
     this.focusSetter = useSetFocus()(this);
     this.interactiveContainer = useInteractive(this);
+    this.labelable = useLabel(this);
     this.disabled = false;
     this.required = false;
     this.scale = "m";
@@ -49,7 +51,7 @@ class Select extends LitElement {
     this.listen("calciteInternalOptionGroupChange", this.handleOptionOrGroupChange);
   }
   static {
-    this.properties = { disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], label: 1, labelText: 1, name: [3, {}, { reflect: true }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], selectedOption: [0, {}, { attribute: false }], status: [3, {}, { reflect: true }], validationIcon: [3, { converter: stringOrBoolean, type: String }, { reflect: true }], validationMessage: 1, validity: [32, {}, { readOnly: true, attribute: false }], value: 1, width: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }] };
+    this.properties = { disabled: [7, {}, { reflect: true, type: Boolean }], form: [3, {}, { reflect: true }], label: 1, labelText: 1, name: [3, {}, { reflect: true }], required: [7, {}, { reflect: true, type: Boolean }], scale: [3, {}, { reflect: true }], selectedOption: [0, {}, { attribute: false }], status: [3, {}, { reflect: true }], validationIcon: [3, { converter: stringOrBoolean }, { reflect: true }], validationMessage: 1, validity: [32, {}, { readOnly: true, attribute: false }], value: 1, width: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }] };
   }
   static {
     this.formAssociated = true;
@@ -66,7 +68,6 @@ class Select extends LitElement {
       subtree: true,
       childList: true
     });
-    connectLabel(this);
   }
   willUpdate(changes) {
     if (changes.has("value") && (this.hasUpdated || this.value !== null)) {
@@ -88,7 +89,6 @@ class Select extends LitElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.mutationObserver?.disconnect();
-    disconnectLabel(this);
   }
   handleInternalSelectChange() {
     const selected = this.selectRef.value.selectedOptions[0];

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

@@ -1,8 +1,8 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Height, LogicalFlowPosition, Scale, Width } from "../interfaces.js";
+import type { Height, LogicalFlowPosition, Scale, Width } from "../types.js";
 import type { FocusTrapOptions } from "../../controllers/useFocusTrap.js";
-import type { DisplayMode } from "./interfaces.js";
+import type { DisplayMode } from "./types.js";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 
 /**
@@ -23,7 +23,7 @@ import type { T9nMeta } from "@arcgis/lumina/controllers";
  */
 export abstract class Sheet extends LitElement {
   /** Passes a function to run before the component closes. */
-  accessor beforeClose: (el: Sheet) => Promise<void>;
+  accessor beforeClose: ((el: Sheet) => Promise<void>) | undefined;
   /**
    * Specifies the display mode - `"float"` separates content from main layout,
    * and `"overlay"` displays on top of center content.
@@ -44,17 +44,17 @@ export abstract class Sheet extends LitElement {
    */
   accessor focusTrapDisabled: boolean;
   /**
-   * Specifies custom focus trap configuration on the component, where
+   * Specifies custom focus trap configuration on the component.
    *
-   * `"allowOutsideClick"` allows outside clicks,
-   * `"initialFocus"` enables initial focus,
-   * `"returnFocusOnDeactivate"` returns focus when not active,
-   * `"extraContainers"` specifies additional focusable elements external to the trap, such as 3rd-party components appending elements to the document body, and
-   * `"setReturnFocus"` customizes the element to which focus is returned when the trap is deactivated. Return `false` to prevent focus return, or `undefined` to use the default behavior (returning focus to the element focused before activation).
+   * - `"allowOutsideClick"` allows outside clicks.
+   * - `"initialFocus"` enables initial focus.
+   * - `"returnFocusOnDeactivate"` returns focus when not active.
+   * - `"extraContainers"` specifies additional focusable elements external to the trap, such as 3rd-party components appending elements to the document body.
+   * - `"setReturnFocus"` customizes the element to which focus is returned when the trap is deactivated. Return `false` to prevent focus return, or `undefined` to use the default behavior (returning focus to the element focused before activation).
    */
-  accessor focusTrapOptions: Partial<FocusTrapOptions>;
+  accessor focusTrapOptions: Partial<FocusTrapOptions> | undefined;
   /** Specifies the component's height. */
-  accessor height: Height;
+  accessor height: Height | undefined;
   /**
    * When `position` is `"block-start"` or `"block-end"`, specifies the component's height.
    *
@@ -68,8 +68,12 @@ export abstract class Sheet extends LitElement {
    * @required
    */
   accessor label: string;
-  /** Overrides individual strings used by the component. */
-  accessor messageOverrides: { resizeEnabled?: string; };
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
+  accessor messageOverrides: { resizeEnabled?: string | undefined; };
   /** @internal */
   protected messages: Partial<{ resizeEnabled: string; }> & T9nMeta<{ resizeEnabled: string; }>;
   /**
@@ -104,7 +108,7 @@ export abstract class Sheet extends LitElement {
    */
   accessor topLayerDisabled: boolean;
   /** Specifies the component's width. */
-  accessor width: Extract<Width, Scale>;
+  accessor width: Extract<Width, Scale> | undefined;
   /**
    * When `position` is `"inline-start"` or `"inline-end"`, specifies the component's width.
    *

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

@@ -1,12 +1,12 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { C as CSS_UTILITY, b as resizeShiftStep, d as resizeStep, c as customElement } from "../../chunks/runtime.js";
+import { C as CSS_UTILITY, a as resizeShiftStep, d as resizeStep, c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.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 { useDirection } from "@arcgis/lumina/controllers";
-import { B as ensureId, g as getStylePixelValue } from "../../chunks/dom.js";
+import { g 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";
@@ -149,9 +149,6 @@ class Sheet extends LitElement {
     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) || changes.has("direction")) {
       this.refreshResize();
     }
-    if (this.contentRef.value) {
-      this.contentId = ensureId(this.contentRef.value);
-    }
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -177,9 +174,6 @@ class Sheet extends LitElement {
     const { position } = this;
     return position === "block-start" || position === "block-end" ? ICONS.dragVertical : ICONS.dragHorizontal;
   }
-  getContentRefDOMRect() {
-    return this.contentRef.value?.getBoundingClientRect();
-  }
   handleKeyDown(event) {
     const { key, defaultPrevented, shiftKey } = event;
     const { contentRef, position, resizable, resizeValues: { maxBlockSize, maxInlineSize, minBlockSize, minInlineSize } } = this;
@@ -188,7 +182,7 @@ class Sheet extends LitElement {
     if (!resizable || !contentRef.value || defaultPrevented || !keys.includes(key)) {
       return;
     }
-    const rect = this.getContentRefDOMRect();
+    const rect = contentRef.value.getBoundingClientRect();
     const invertRTL = this.direction === "rtl" ? -1 : 1;
     const stepValue = shiftKey ? resizeShiftStep : resizeStep;
     switch (key) {
@@ -261,6 +255,8 @@ class Sheet extends LitElement {
       return;
     }
     const rtl = this.direction === "rtl";
+    const restrictSizeMin = this.resizeValues.minInlineSize === null || this.resizeValues.minBlockSize === null ? void 0 : { width: this.resizeValues.minInlineSize, height: this.resizeValues.minBlockSize };
+    const restrictSizeMax = this.resizeValues.maxInlineSize === null || this.resizeValues.maxBlockSize === null ? void 0 : { width: this.resizeValues.maxInlineSize, height: this.resizeValues.maxBlockSize };
     this.interaction = interact(contentRef.value, { context: el.ownerDocument }).resizable({
       edges: {
         top: position === "block-end" ? resizeHandleEl : false,
@@ -268,18 +264,7 @@ class Sheet extends LitElement {
         bottom: position === "block-start" ? resizeHandleEl : false,
         left: position === (rtl ? "inline-start" : "inline-end") ? resizeHandleEl : false
       },
-      modifiers: [
-        interact.modifiers.restrictSize({
-          min: {
-            width: this.resizeValues.minInlineSize,
-            height: this.resizeValues.minBlockSize
-          },
-          max: {
-            width: this.resizeValues.maxInlineSize,
-            height: this.resizeValues.maxBlockSize
-          }
-        })
-      ],
+      modifiers: [interact.modifiers.restrictSize({ min: restrictSizeMin, max: restrictSizeMax })],
       listeners: {
         move: ({ rect }) => {
           const isBlock = position === "block-start" || position === "block-end";
@@ -324,7 +309,7 @@ class Sheet extends LitElement {
     const { resizable, position, resizeValues } = this;
     const dir = this.direction;
     const isBlockPosition = position === "block-start" || position === "block-end";
-    setAttribute(this.el, "aria-describedby", this.contentId);
+    setAttribute(this.el, "aria-describedby", IDS.sheetContent);
     this.el.ariaLabel = this.label;
     this.el.ariaModal = "true";
     this.el.role = "dialog";
@@ -335,7 +320,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.contentRef)}><div class=${safeClassMap(CSS.contentContainer)}><slot></slot></div>${resizable ? keyed("resize-handle", html`<div .ariaLabel=${this.messages.resizeEnabled} .ariaOrientation=${isBlockPosition ? "vertical" : "horizontal"} .ariaValueMax=${ariaValueFromSize(isBlockPosition ? "block" : "inline", resizeValues.maxBlockSize, resizeValues.maxInlineSize)} .ariaValueMin=${ariaValueFromSize(isBlockPosition ? "block" : "inline", resizeValues.minBlockSize, resizeValues.minInlineSize)} .ariaValueNow=${ariaValueFromSize(isBlockPosition ? "block" : "inline", 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" : void 0} ${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=${ariaValueFromSize(isBlockPosition ? "block" : "inline", resizeValues.maxBlockSize, resizeValues.maxInlineSize)} .ariaValueMin=${ariaValueFromSize(isBlockPosition ? "block" : "inline", resizeValues.minBlockSize, resizeValues.minInlineSize)} .ariaValueNow=${ariaValueFromSize(isBlockPosition ? "block" : "inline", 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.d.ts

@@ -3,6 +3,8 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 
 /**
  * @cssproperty [--calcite-shell-border-color] - Specifies the component's border color.
+ * @cssproperty [--calcite-shell-corner-radius] - Specifies the component's corner radius.
+ * @cssproperty [--calcite-shell-shadow] - Specifies the component's shadow.
  * @slot  - A slot for adding custom content. This content will appear between any leading and trailing panels added to the component, such as a map.
  * @slot [header] - A slot for adding header content. This content will be positioned at the top of the component.
  * @slot [footer] - A slot for adding footer content. This content will be positioned at the bottom of the component.

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

@@ -3,14 +3,18 @@ import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
 import { css, html } from "lit";
 import { LitElement, safeClassMap } from "@arcgis/lumina";
-import { s as slotChangeHasAssignedElement, a as slotChangeGetAssignedElements } from "../../chunks/dom.js";
-const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{position:absolute;inset:0;display:flex;block-size:100%;inline-size:100%;flex-direction:column;overflow:hidden}.main{position:relative;display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;flex-direction:row;justify-content:space-between;overflow:hidden}.content{display:flex;block-size:100%;inline-size:100%;flex-direction:column;flex-wrap:nowrap;overflow:auto;justify-content:space-between}.content ::slotted(calcite-panel),.content ::slotted(calcite-flow){flex:1 1 auto;align-self:stretch;max-block-size:unset}.content--behind{position:absolute;inset:0;border-width:0px;z-index:calc(var(--calcite-z-index) - 1);display:initial}.content--non-interactive{pointer-events:none;display:flex;block-size:100%;inline-size:100%;flex-direction:column;flex-wrap:nowrap}::slotted(calcite-shell-panel){inline-size:unset}::slotted(.header .heading){font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug);font-weight:var(--calcite-font-weight-normal)}slot[name=panel-start]::slotted(calcite-shell-panel),slot[name=panel-end]::slotted(calcite-shell-panel){position:relative;z-index:calc(var(--calcite-z-index) + 1)}slot[name=panel-end]::slotted(calcite-shell-panel){margin-inline-start:auto}::slotted(calcite-panel),::slotted(calcite-flow){border-width:var(--calcite-border-width-sm);border-color:var(--calcite-shell-border-color, var(--calcite-color-border-3));border-inline-start-width:var(--calcite-border-width-none);border-inline-end-width:var(--calcite-border-width-none);border-style:solid}slot[name=panel-top]::slotted(calcite-shell-panel:not([display-mode^=float])),slot[name=panel-bottom]::slotted(calcite-shell-panel:not([display-mode^=float])){border-color:var(--calcite-shell-border-color, var(--calcite-color-border-3));border-inline-start-width:var(--calcite-border-width-sm);border-inline-end-width:var(--calcite-border-width-sm)}.center-content{display:flex;flex-direction:column;justify-content:space-between;block-size:100%;inline-size:100%;min-inline-size:0}.content-bottom{justify-content:flex-end}::slotted(calcite-shell-panel){flex:none;align-self:stretch}::slotted(calcite-tip-manager){position:absolute;z-index:var(--calcite-z-index-toast);box-sizing:border-box}@keyframes in-up{0%{opacity:0;transform:translate3D(0,5px,0)}to{opacity:1;transform:translateZ(0)}}::slotted(calcite-tip-manager){animation:in-up var(--calcite-internal-animation-timing-slow) ease-in-out;border-radius:.25rem;--tw-shadow: 0 6px 20px -4px rgba(0, 0, 0, .1), 0 4px 12px -2px rgba(0, 0, 0, .08);--tw-shadow-colored: 0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);inset-block-end:.5rem;inset-inline:var(--calcite-shell-tip-spacing, 26vw)}slot[name=panel-bottom]::slotted(calcite-shell-panel){margin-block-start:auto}slot[name=panel-top]::slotted(calcite-shell-panel){margin-block-end:auto}.position-wrapper{position:absolute;pointer-events:none;inset:0}:host([hidden]){display:none}[hidden]{display:none}`;
+import { createRef, ref } from "lit/directives/ref.js";
+import { s as slotChangeHasAssignedElement, a as slotChangeGetAssignedElements, g as getStylePixelValue } from "../../chunks/dom.js";
+const styles = css`:host{box-sizing:border-box;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);font-size:var(--calcite-font-size--1)}:host *{box-sizing:border-box}:host{position:absolute;inset:0;display:flex;block-size:100%;inline-size:100%;flex-direction:column;overflow:hidden;border-radius:var(--calcite-shell-corner-radius);box-shadow:var(--calcite-shell-shadow)}.main{position:relative;display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;flex-direction:row;justify-content:space-between;overflow:hidden}.content{display:flex;block-size:100%;inline-size:100%;flex-direction:column;flex-wrap:nowrap;overflow:auto;justify-content:space-between}.content ::slotted(calcite-panel),.content ::slotted(calcite-flow){flex:1 1 auto;align-self:stretch;max-block-size:unset}.content--behind{position:absolute;inset:0;border-width:0px;z-index:calc(var(--calcite-z-index) - 1);display:initial}.content--non-interactive{pointer-events:none;display:flex;block-size:100%;inline-size:100%;flex-direction:column;flex-wrap:nowrap}::slotted(calcite-shell-panel){inline-size:unset}::slotted(.header .heading){font-size:var(--calcite-font-size-relative-sm);line-height:var(--calcite-font-line-height-relative-snug);font-weight:var(--calcite-font-weight-normal)}slot[name=panel-start]::slotted(calcite-shell-panel),slot[name=panel-end]::slotted(calcite-shell-panel){position:relative;z-index:calc(var(--calcite-z-index) + 1)}slot[name=panel-end]::slotted(calcite-shell-panel){margin-inline-start:auto}::slotted(calcite-panel),::slotted(calcite-flow){border-width:var(--calcite-border-width-sm);border-color:var(--calcite-shell-border-color, var(--calcite-color-border-3));border-inline-start-width:var(--calcite-border-width-none);border-inline-end-width:var(--calcite-border-width-none);border-style:solid}slot[name=panel-top]::slotted(calcite-shell-panel:not([display-mode^=float])),slot[name=panel-bottom]::slotted(calcite-shell-panel:not([display-mode^=float])){border-color:var(--calcite-shell-border-color, var(--calcite-color-border-3));border-inline-start-width:var(--calcite-border-width-sm);border-inline-end-width:var(--calcite-border-width-sm)}.center-content{display:flex;flex-direction:column;justify-content:space-between;block-size:100%;inline-size:100%;min-inline-size:0}.content-bottom{justify-content:flex-end}::slotted(calcite-shell-panel){flex:none;align-self:stretch}::slotted(calcite-tip-manager){position:absolute;z-index:var(--calcite-z-index-toast);box-sizing:border-box}@keyframes in-up{0%{opacity:0;transform:translate3D(0,5px,0)}to{opacity:1;transform:translateZ(0)}}::slotted(calcite-tip-manager){animation:in-up var(--calcite-internal-animation-timing-slow) ease-in-out;border-radius:.25rem;--tw-shadow: 0 6px 20px -4px rgba(0, 0, 0, .1), 0 4px 12px -2px rgba(0, 0, 0, .08);--tw-shadow-colored: 0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);inset-block-end:.5rem;inset-inline:var(--calcite-shell-tip-spacing, 26vw)}slot[name=panel-bottom]::slotted(calcite-shell-panel){margin-block-start:auto}slot[name=panel-top]::slotted(calcite-shell-panel){margin-block-end:auto}.position-wrapper{position:absolute;pointer-events:none;inset:0}.main.has-resizable-panel-top ::slotted(calcite-panel){border-block-start:none}.main.has-resizable-panel-bottom ::slotted(calcite-panel){border-block-end:none}.main.has-action-bar-position-panel ::slotted(calcite-panel){border:0}:host([hidden]){display:none}[hidden]{display:none}`;
 const CSS = {
   main: "main",
   content: "content",
   contentBehind: "content--behind",
   contentBottom: "content-bottom",
   contentNonInteractive: "content--non-interactive",
+  hasActionBarPositionPanel: "has-action-bar-position-panel",
+  hasResizablePanelBottom: "has-resizable-panel-bottom",
+  hasResizablePanelTop: "has-resizable-panel-top",
   footer: "footer",
   positionedSlotWrapper: "positioned-slot-wrapper",
   contentBehindCenterContent: "center-content"
@@ -24,28 +28,43 @@ const SLOTS = {
   footer: "footer",
   alerts: "alerts",
   sheets: "sheets",
-  modals: "modals",
   dialogs: "dialogs"
 };
+const panelSlots = ["panel-start", "panel-end", "panel-top", "panel-bottom"];
 class Shell extends LitElement {
   constructor() {
     super();
+    this.defaultSlotRef = createRef();
+    this.panelBottomSlotRef = createRef();
+    this.panelEndSlotRef = createRef();
+    this.panelStartSlotRef = createRef();
+    this.panelTopSlotRef = createRef();
+    this.panelSlotState = {
+      "panel-start": { elements: [], resizable: false },
+      "panel-end": { elements: [], resizable: false },
+      "panel-top": { elements: [], resizable: false },
+      "panel-bottom": { elements: [], resizable: false }
+    };
     this.hasAlerts = false;
     this.hasDialogs = false;
     this.hasFooter = false;
     this.hasHeader = false;
-    this.hasModals = false;
+    this.hasActionBarPositionPanel = false;
     this.hasOnlyPanelBottom = false;
     this.hasPanelBottom = false;
     this.hasPanelTop = false;
+    this.hasResizablePanelBottom = false;
+    this.hasResizablePanelTop = false;
     this.hasSheets = false;
     this.panelIsResizing = false;
     this.contentBehind = false;
     this.listen("calciteInternalShellPanelResizeStart", this.handleCalciteInternalShellPanelResizeStart);
     this.listen("calciteInternalShellPanelResizeEnd", this.handleCalciteInternalShellPanelResizeEnd);
+    this.listen("calciteInternalShellPanelResizableChange", this.handleCalciteInternalShellPanelResizableChange);
+    this.listen("calciteInternalShellPanelActionBarPositionChange", this.handleCalciteInternalShellPanelActionBarPositionChange);
   }
   static {
-    this.properties = { hasAlerts: [16, {}, { state: true }], hasDialogs: [16, {}, { state: true }], hasFooter: [16, {}, { state: true }], hasHeader: [16, {}, { state: true }], hasModals: [16, {}, { state: true }], hasOnlyPanelBottom: [16, {}, { state: true }], hasPanelBottom: [16, {}, { state: true }], hasPanelTop: [16, {}, { state: true }], hasSheets: [16, {}, { state: true }], panelIsResizing: [16, {}, { state: true }], contentBehind: [7, {}, { reflect: true, type: Boolean }] };
+    this.properties = { hasAlerts: [16, {}, { state: true }], hasDialogs: [16, {}, { state: true }], hasFooter: [16, {}, { state: true }], hasHeader: [16, {}, { state: true }], hasActionBarPositionPanel: [16, {}, { state: true }], hasOnlyPanelBottom: [16, {}, { state: true }], hasPanelBottom: [16, {}, { state: true }], hasPanelTop: [16, {}, { state: true }], hasResizablePanelBottom: [16, {}, { state: true }], hasResizablePanelTop: [16, {}, { state: true }], hasSheets: [16, {}, { state: true }], panelIsResizing: [16, {}, { state: true }], contentBehind: [7, {}, { reflect: true, type: Boolean }] };
   }
   static {
     this.styles = styles;
@@ -55,6 +74,20 @@ class Shell extends LitElement {
       this.hasOnlyPanelBottom = !this.hasPanelTop && this.hasPanelBottom;
     }
   }
+  handleCalciteInternalShellPanelResizableChange(event) {
+    const panel = event.composedPath().find((el) => el?.matches?.("calcite-shell-panel"));
+    if (panel?.slot && panelSlots.includes(panel.slot)) {
+      this.updateResizableSlotState(panel.slot);
+    }
+    event.stopPropagation();
+  }
+  handleCalciteInternalShellPanelActionBarPositionChange(event) {
+    const panel = event.composedPath().find((el) => el?.matches?.("calcite-shell-panel"));
+    if (panel?.slot && panelSlots.includes(panel.slot)) {
+      this.updateResizableSlotState(panel.slot);
+    }
+    event.stopPropagation();
+  }
   handleCalciteInternalShellPanelResizeStart(event) {
     this.panelIsResizing = true;
     event.stopPropagation();
@@ -81,37 +114,103 @@ class Shell extends LitElement {
       el.embedded = true;
     });
   }
-  handleModalsSlotChange(event) {
-    this.hasModals = !!slotChangeHasAssignedElement(event);
-    slotChangeGetAssignedElements(event)?.filter((el) => el?.matches("calcite-modal")).forEach((el) => {
-      el.embedded = true;
+  configurePanels(panels, layout, position) {
+    panels.forEach((panel) => {
+      const sizingPanel = panel;
+      panel.layout = layout;
+      panel.position = position;
+      sizingPanel.shellSizingDataProvider = (axis) => this.getShellPanelSizingData(panel, axis);
     });
   }
+  getDefaultSlotMinSize(axis) {
+    return this.defaultSlotRef.value?.assignedElements({ flatten: true }).reduce((total, element) => {
+      const computedStyle = window.getComputedStyle(element);
+      return axis === "inline" ? total + getStylePixelValue(computedStyle.borderInlineStartWidth) + getStylePixelValue(computedStyle.borderInlineEndWidth) : total + getStylePixelValue(computedStyle.borderBlockStartWidth) + getStylePixelValue(computedStyle.borderBlockEndWidth);
+    }, 0) ?? 0;
+  }
+  getDefaultSlotBounds() {
+    const defaultSlotElements = this.defaultSlotRef.value?.assignedElements({ flatten: true }) ?? [];
+    if (!defaultSlotElements.length) {
+      return null;
+    }
+    return defaultSlotElements.reduce((bounds, element) => {
+      const rect = element.getBoundingClientRect();
+      return bounds ? {
+        bottom: Math.max(bounds.bottom, rect.bottom),
+        left: Math.min(bounds.left, rect.left),
+        right: Math.max(bounds.right, rect.right),
+        top: Math.min(bounds.top, rect.top)
+      } : {
+        bottom: rect.bottom,
+        left: rect.left,
+        right: rect.right,
+        top: rect.top
+      };
+    }, null);
+  }
+  getShellPanelSizingData(panel, axis) {
+    const panelLayoutContainer = panel.assignedSlot?.parentElement;
+    if (!panelLayoutContainer) {
+      return null;
+    }
+    const containerRect = panelLayoutContainer.getBoundingClientRect();
+    const defaultSlotRect = this.getDefaultSlotBounds();
+    if (!defaultSlotRect) {
+      return {
+        availableSize: axis === "inline" ? containerRect.width : containerRect.height
+      };
+    }
+    const defaultSlotMinSize = this.getDefaultSlotMinSize(axis);
+    const isRTL = window.getComputedStyle(this).direction === "rtl";
+    let availableOccupiedSize;
+    if (axis === "inline") {
+      const isStart = panel.position === "start";
+      availableOccupiedSize = isRTL ? isStart ? containerRect.right - defaultSlotRect.left : defaultSlotRect.right - containerRect.left : isStart ? defaultSlotRect.right - containerRect.left : containerRect.right - defaultSlotRect.left;
+    } else {
+      availableOccupiedSize = panel.position === "start" ? defaultSlotRect.bottom - containerRect.top : containerRect.bottom - defaultSlotRect.top;
+    }
+    const availableSize = Math.max(Math.floor(availableOccupiedSize) - Math.ceil(defaultSlotMinSize), 0);
+    return {
+      availableSize
+    };
+  }
   handlePanelTopChange(event) {
+    const panelElements = slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-shell-panel"));
     this.hasPanelTop = slotChangeHasAssignedElement(event);
-    slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-shell-panel")).forEach((el) => {
+    this.configurePanels(panelElements, "horizontal", "start");
+    panelElements.forEach((el) => {
       el.layout = "horizontal";
       el.position = "start";
     });
+    this.updateResizableSlotState("panel-top", panelElements);
   }
   handlePanelBottomChange(event) {
+    const panelElements = slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-shell-panel"));
     this.hasPanelBottom = slotChangeHasAssignedElement(event);
-    slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-shell-panel")).forEach((el) => {
+    this.configurePanels(panelElements, "horizontal", "end");
+    panelElements.forEach((el) => {
       el.layout = "horizontal";
       el.position = "end";
     });
+    this.updateResizableSlotState("panel-bottom", panelElements);
   }
   handlePanelStartChange(event) {
-    slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-shell-panel")).forEach((el) => {
+    const panelElements = slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-shell-panel"));
+    this.configurePanels(panelElements, "vertical", "start");
+    panelElements.forEach((el) => {
       el.layout = "vertical";
       el.position = "start";
     });
+    this.updateResizableSlotState("panel-start", panelElements);
   }
   handlePanelEndChange(event) {
-    slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-shell-panel")).forEach((el) => {
+    const panelElements = slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-shell-panel"));
+    this.configurePanels(panelElements, "vertical", "end");
+    panelElements.forEach((el) => {
       el.layout = "vertical";
       el.position = "end";
     });
+    this.updateResizableSlotState("panel-end", panelElements);
   }
   handleDialogsSlotChange(event) {
     this.hasDialogs = !!slotChangeHasAssignedElement(event);
@@ -119,6 +218,21 @@ class Shell extends LitElement {
       el.embedded = true;
     });
   }
+  updateResizableSlotState(slot, panelElements = this.panelSlotState[slot].elements) {
+    this.panelSlotState[slot] = {
+      elements: panelElements,
+      resizable: panelElements.some((panel) => panel.resizable)
+    };
+    this.syncResizableState();
+    this.syncActionBarPositionPanelState();
+  }
+  syncActionBarPositionPanelState() {
+    this.hasActionBarPositionPanel = panelSlots.some((slot) => this.panelSlotState[slot].elements.some((panel) => !!panel.actionBarPosition));
+  }
+  syncResizableState() {
+    this.hasResizablePanelBottom = this.panelSlotState["panel-bottom"].resizable;
+    this.hasResizablePanelTop = this.panelSlotState["panel-top"].resizable;
+  }
   renderHeader() {
     return html`<div .hidden=${!this.hasHeader}>${keyed("header", html`<slot name=${SLOTS.header} @slotchange=${this.handleHeaderSlotChange}></slot>`)}</div>`;
   }
@@ -131,18 +245,15 @@ class Shell extends LitElement {
   renderSheets() {
     return html`<div .hidden=${!this.hasSheets}>${keyed("sheets", html`<slot name=${SLOTS.sheets} @slotchange=${this.handleSheetsSlotChange}></slot>`)}</div>`;
   }
-  renderModals() {
-    return html`<div .hidden=${!this.hasModals}>${keyed("modals", html`<slot name=${SLOTS.modals} @slotchange=${this.handleModalsSlotChange}></slot>`)}</div>`;
-  }
   renderDialogs() {
     return html`<div .hidden=${!this.hasDialogs}>${keyed("dialogs", html`<slot name=${SLOTS.dialogs} @slotchange=${this.handleDialogsSlotChange}></slot>`)}</div>`;
   }
   renderContent() {
     const { panelIsResizing } = this;
-    const defaultSlotNode = keyed("default-slot", html`<slot></slot>`);
+    const defaultSlotNode = keyed("default-slot", html`<slot ${ref(this.defaultSlotRef)}></slot>`);
     const defaultSlotContainerNode = panelIsResizing ? html`<div class=${safeClassMap(CSS.contentNonInteractive)}>${defaultSlotNode}</div>` : defaultSlotNode;
-    const panelBottomSlotNode = keyed("panel-bottom-slot", html`<slot name=${SLOTS.panelBottom} @slotchange=${this.handlePanelBottomChange}></slot>`);
-    const panelTopSlotNode = keyed("panel-top-slot", html`<slot name=${SLOTS.panelTop} @slotchange=${this.handlePanelTopChange}></slot>`);
+    const panelBottomSlotNode = keyed("panel-bottom-slot", html`<slot name=${SLOTS.panelBottom} @slotchange=${this.handlePanelBottomChange} ${ref(this.panelBottomSlotRef)}></slot>`);
+    const panelTopSlotNode = keyed("panel-top-slot", html`<slot name=${SLOTS.panelTop} @slotchange=${this.handlePanelTopChange} ${ref(this.panelTopSlotRef)}></slot>`);
     const contentContainerKey = "content-container";
     const content = this.contentBehind ? [
       keyed(contentContainerKey, html`<div class=${safeClassMap({
@@ -159,10 +270,15 @@ class Shell extends LitElement {
     return content;
   }
   renderMain() {
-    return html`<div class=${safeClassMap(CSS.main)}><slot name=${SLOTS.panelStart} @slotchange=${this.handlePanelStartChange}></slot>${this.renderContent()}<slot name=${SLOTS.panelEnd} @slotchange=${this.handlePanelEndChange}></slot></div>`;
+    return html`<div class=${safeClassMap({
+      [CSS.main]: true,
+      [CSS.hasActionBarPositionPanel]: this.hasActionBarPositionPanel,
+      [CSS.hasResizablePanelBottom]: this.hasResizablePanelBottom,
+      [CSS.hasResizablePanelTop]: this.hasResizablePanelTop
+    })}><slot name=${SLOTS.panelStart} @slotchange=${this.handlePanelStartChange} ${ref(this.panelStartSlotRef)}></slot>${this.renderContent()}<slot name=${SLOTS.panelEnd} @slotchange=${this.handlePanelEndChange} ${ref(this.panelEndSlotRef)}></slot></div>`;
   }
   renderPositionedSlots() {
-    return html`<div class=${safeClassMap(CSS.positionedSlotWrapper)}>${this.renderAlerts()}${this.renderModals()}${this.renderDialogs()}${this.renderSheets()}</div>`;
+    return html`<div class=${safeClassMap(CSS.positionedSlotWrapper)}>${this.renderAlerts()}${this.renderDialogs()}${this.renderSheets()}</div>`;
   }
   render() {
     return html`${this.renderHeader()}${this.renderMain()}${this.renderFooter()}${this.renderPositionedSlots()}`;

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

@@ -1,7 +1,7 @@
 /// <reference path="../../index.d.ts" />
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
-import type { Height, Layout, Position, Scale, Width } from "../interfaces.js";
-import type { DisplayMode } from "./interfaces.js";
+import type { Height, Layout, Position, Scale, Width } from "../types.js";
+import type { DisplayMode } from "./types.js";
 
 /**
  * @cssproperty [--calcite-shell-panel-background-color] - Specifies the component's background color.
@@ -20,6 +20,8 @@ import type { DisplayMode } from "./interfaces.js";
  * @slot [action-bar] - A slot for adding a `calcite-action-bar` to the component.
  */
 export abstract class ShellPanel extends LitElement {
+  /** Specifies the placement of the `calcite-action-bar` (when slotted). */
+  accessor actionBarPosition: Position | undefined;
   /**
    * When `true`, hides the component's content area.
    *
@@ -27,29 +29,25 @@ export abstract class ShellPanel extends LitElement {
    */
   accessor collapsed: boolean;
   /**
-   * Specifies the component's display mode, where:
+   * Specifies the component's display mode.
    *
-   * `"dock"` displays at full height adjacent to center content,
-   *
-   * `"overlay"` displays at full height on top of center content, and
-   *
-   * `"float"` [Deprecated] does not display at full height with content separately detached from `calcite-action-bar` on top of center content.
-   *
-   * `"float-content"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content.
-   *
-   * `"float-all"` detaches the `calcite-panel` and `calcite-action-bar` on top of center content.
+   * - `"dock"` displays at full height adjacent to center content.
+   * - `"overlay"` displays at full height on top of center content.
+   * - `"float-content"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content.
+   * - `"float-all"` detaches the `calcite-panel` and `calcite-action-bar` on top of center content.
+   * - `"float"` does not display at full height with content separately detached from `calcite-action-bar` on top of center content. [Deprecated] in v2.11.0, removal target v6.0.0 - use `"float-content"` instead.
    *
    * @default "dock"
    */
   accessor displayMode: DisplayMode;
   /** Specifies the component's height. */
-  accessor height: Height;
+  accessor height: Height | undefined;
   /**
    * When `layout` is `horizontal`, specifies the component's maximum height.
    *
    * @deprecated in v3.0.0, removal target v6.0.0 - Use the `height` property instead.
    */
-  accessor heightScale: Scale;
+  accessor heightScale: Scale | undefined;
   /**
    * Specifies the component's direction.
    *
@@ -57,8 +55,12 @@ export abstract class ShellPanel extends LitElement {
    * @default "vertical"
    */
   accessor layout: Extract<"horizontal" | "vertical", Layout>;
-  /** Overrides individual strings used by the component. */
-  accessor messageOverrides: { resize?: string; };
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * _**Note**: Individual message keys may change between releases._
+   */
+  accessor messageOverrides: { resize?: string | undefined; };
   /**
    * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`).
    *
@@ -72,8 +74,10 @@ export abstract class ShellPanel extends LitElement {
    * @default false
    */
   accessor resizable: boolean;
+  /** @internal */
+  accessor shellSizingDataProvider: ShellSizingDataProvider | undefined;
   /** Specifies the component's width. */
-  accessor width: Extract<Width, Scale>;
+  accessor width: Extract<Width, Scale> | undefined;
   /**
    * When `layout` is `vertical`, specifies the component's width.
    *
@@ -101,4 +105,11 @@ export abstract class ShellPanel extends LitElement {
     calciteShellPanelCollapse: ShellPanel["calciteShellPanelCollapse"]["detail"];
     calciteShellPanelExpand: ShellPanel["calciteShellPanelExpand"]["detail"];
   };
-}
+}
+
+/** @param axis */
+export type ShellSizingDataProvider = (axis: "inline" | "block") => ShellPanelSizingData | null;
+
+export type ShellPanelSizingData = {
+  availableSize: number;
+};