@esri/calcite-components 5.2.0-next.31 → 5.2.0-next.33

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

@@ -55,11 +55,11 @@ export abstract class InputTimePicker extends LitElement {
   /** Specifies the `id` of the component's associated form. When not set, the component is associated with its ancestor form element, if one exists. */
   accessor form: string | undefined;
   /**
-   * Specifies the component's hour format, where:
+   * Specifies the component's hour format.
    *
-   * `"user"` displays the user's locale format,
-   * `"12"` displays a 12-hour format, and
-   * `"24"` displays a 24-hour format.
+   * - `"user"` displays the user's locale format.
+   * - `"12"` displays a 12-hour format.
+   * - `"24"` displays a 24-hour format.
    *
    * @default "user"
    */
@@ -118,11 +118,11 @@ export abstract class InputTimePicker extends LitElement {
    */
   accessor open: boolean;
   /**
-   * Specifies the type of positioning to use for overlaid content, where:
+   * Specifies the type of positioning to use for overlaid content.
    *
-   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   * - `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout.
    *
-   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   * - `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
    *
    * @default "absolute"
    */

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

@@ -660,11 +660,11 @@ 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 | undefined;
   /**
-   * When `mode` is `"offset"`, specifies how the offset will be displayed, where
+   * When `mode` is `"offset"`, specifies how the offset will be displayed.
    *
-   * `"user"` uses `UTC` or `GMT` depending on the user's locale,
-   * `"gmt"` always uses `GMT`, and
-   * `"utc"` always uses `UTC`.
+   * - `"user"` uses `UTC` or `GMT` depending on the user's locale.
+   * - `"gmt"` always uses `GMT`.
+   * - `"utc"` always uses `UTC`.
    *
    * @default "user"
    */
@@ -676,11 +676,11 @@ export abstract class InputTimeZone extends LitElement {
    */
   accessor open: boolean;
   /**
-   * Specifies the type of positioning to use for overlaid content, where:
+   * Specifies the type of positioning to use for overlaid content.
    *
-   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   * - `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout.
    *
-   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   * - `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
    *
    * @default "absolute"
    */

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

@@ -17,7 +17,9 @@ export abstract class Label extends LitElement {
   /** Specifies the `id` of the component the label is bound to. Use when the component the label is bound to does not reside within the component. */
   accessor for: string | undefined;
   /**
-   * Defines the component's layout in relation to the slotted component. Use `"inline"` positions to wrap the label and slotted component on the same line.  [Deprecated] The `"default"` value is deprecated, use `"block"` instead.
+   * Defines the component's layout in relation to the slotted component. Use `"inline"` positions to wrap the label and slotted component on the same line.
+   *
+   * [Deprecated] The `"default"` value is deprecated in v3.3.0, removal target v6.0.0 - use `"block"` instead.
    *
    * @default "default"
    */

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

@@ -29,11 +29,10 @@ export abstract class List extends LitElement {
    */
   accessor disabled: boolean;
   /**
-   * Specifies the nesting behavior of `calcite-list-item`s, where
+   * Specifies the nesting behavior of `calcite-list-item`s.
    *
-   * `"flat"` displays `calcite-list-item`s in a uniform list, and
-   *
-   * `"nested"` displays `calcite-list-item`s under their parent element.
+   * - `"flat"` displays `calcite-list-item`s in a uniform list.
+   * - `"nested"` displays `calcite-list-item`s under their parent element.
    *
    *  The parent component's behavior should follow throughout its child elements.
    *
@@ -85,13 +84,10 @@ export abstract class List extends LitElement {
    */
   accessor group: string | undefined;
   /**
-   * Specifies the interaction mode of the component, where
-   *
-   * `"interactive"` allows interaction styling and pointer changes on hover,
+   * Specifies the interaction mode of the component.
    *
-   * `"static"` does not allow interaction styling and pointer changes on hover -
-   *
-   * the `"static"` value should only be used when `selectionMode` is `"none"`.
+   * - `"interactive"` allows interaction styling and pointer changes on hover.
+   * - `"static"` does not allow interaction styling and pointer changes on hover. Should only be used when `selectionMode` is `"none"`.
    *
    * @default "interactive"
    */
@@ -130,27 +126,22 @@ export abstract class List extends LitElement {
   /** The currently selected items. */
   get selectedItems(): ListItem[];
   /**
-   * Specifies the selection appearance, where
-   *
-   * `"icon"` displays a checkmark or dot,
+   * Specifies the selection appearance.
    *
-   * `"border"` [Deprecated] - Use `"highlight"` instead - displays a border, or
-   *
-   * `"highlight"` displays background highlight.
+   * - `"icon"` displays a checkmark or dot.
+   * - `"highlight"` displays background highlight.
+   * - `"border"` displays a border. [Deprecated] in v5.0.0, removal target v6.0.0 - use `"highlight"` instead.
    *
    * @default "icon"
    */
   accessor selectionAppearance: Extract<"icon" | "border" | "highlight", SelectionAppearance>;
   /**
-   * Specifies the selection mode of the component, where:
-   *
-   * `"multiple"` allows any number of selections,
-   *
-   * `"single"` allows only one selection,
-   *
-   * `"single-persist"` allows one selection and prevents de-selection, and
+   * Specifies the selection mode of the component.
    *
-   * `"none"` does not allow any selections.
+   * - `"multiple"` allows any number of selections.
+   * - `"single"` allows only one selection.
+   * - `"single-persist"` allows one selection and prevents de-selection.
+   * - `"none"` does not allow any selections.
    *
    * @default "none"
    */

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

@@ -28,9 +28,10 @@ export abstract class Meter extends LitElement {
    */
   accessor disabled: boolean;
   /**
-   * Specifies the component's display, where
-   * `"single"` displays a single color, and
-   * `"range"` displays a range of colors based on provided `low`, `high`, `min` or `max` values.
+   * Specifies the component's display.
+   *
+   * - `"single"` displays a single color.
+   * - `"range"` displays a range of colors based on provided `low`, `high`, `min` or `max` values.
    *
    * @default "range"
    */

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

@@ -73,7 +73,9 @@ export abstract class Notice extends LitElement {
    */
   accessor scale: Scale;
   /**
-   * Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead.
+   * Specifies the width of the component.
+   *
+   * [Deprecated] The `"half"` value is deprecated in v3.0.0, removal target v6.0.0 - use `"full"` instead.
    *
    * @default "auto"
    */

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

@@ -129,11 +129,11 @@ export abstract class Panel extends LitElement {
       expand?: string | undefined;
   };
   /**
-   * Specifies the type of positioning to use for overlaid content, where:
+   * Specifies the type of positioning to use for overlaid content.
    *
-   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   * - `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout.
    *
-   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   * - `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
    *
    * @default "absolute"
    */

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

@@ -41,13 +41,13 @@ export abstract class Popover 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> | undefined;
   /** Specifies the component's heading text. */
@@ -81,11 +81,11 @@ export abstract class Popover extends LitElement {
    */
   accessor open: boolean;
   /**
-   * Specifies the type of positioning to use for overlaid content, where:
+   * Specifies the type of positioning to use for overlaid content.
    *
-   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   * - `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout.
    *
-   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   * - `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
    *
    * @default "absolute"
    */

package/dist/components/calcite-segmented-control/customElement.d.ts

@@ -75,7 +75,9 @@ export abstract class SegmentedControl extends LitElement {
   /** The component's `selectedItem` value. */
   accessor value: string;
   /**
-   * Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead.
+   * Specifies the width of the component.
+   *
+   * [Deprecated] The `"half"` value is deprecated in v3.0.0, removal target v6.0.0 - use `"full"` instead.
    *
    * @default "auto"
    */

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

@@ -75,7 +75,9 @@ export abstract class Select extends LitElement {
   /** The component's `selectedOption` value. */
   accessor value: string;
   /**
-   * Specifies the width of the component. [Deprecated] The `"half"` value is deprecated, use `"full"` instead.
+   * Specifies the width of the component.
+   *
+   * [Deprecated] The `"half"` value is deprecated in v3.0.0, removal target v6.0.0 - use `"full"` instead.
    *
    * @default "auto"
    */

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

@@ -44,13 +44,13 @@ 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> | undefined;
   /** Specifies the component's height. */

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

@@ -3,7 +3,8 @@ 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";
+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",
@@ -33,6 +34,11 @@ 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 },
@@ -108,9 +114,70 @@ class Shell extends LitElement {
       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);
+    this.configurePanels(panelElements, "horizontal", "start");
     panelElements.forEach((el) => {
       el.layout = "horizontal";
       el.position = "start";
@@ -120,6 +187,7 @@ class Shell extends LitElement {
   handlePanelBottomChange(event) {
     const panelElements = slotChangeGetAssignedElements(event).filter((el) => el?.matches("calcite-shell-panel"));
     this.hasPanelBottom = slotChangeHasAssignedElement(event);
+    this.configurePanels(panelElements, "horizontal", "end");
     panelElements.forEach((el) => {
       el.layout = "horizontal";
       el.position = "end";
@@ -128,6 +196,7 @@ class Shell extends LitElement {
   }
   handlePanelStartChange(event) {
     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";
@@ -136,6 +205,7 @@ class Shell extends LitElement {
   }
   handlePanelEndChange(event) {
     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";
@@ -180,10 +250,10 @@ class Shell extends LitElement {
   }
   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({
@@ -205,7 +275,7 @@ class Shell extends LitElement {
       [CSS.hasActionBarPositionPanel]: this.hasActionBarPositionPanel,
       [CSS.hasResizablePanelBottom]: this.hasResizablePanelBottom,
       [CSS.hasResizablePanelTop]: this.hasResizablePanelTop
-    })}><slot name=${SLOTS.panelStart} @slotchange=${this.handlePanelStartChange}></slot>${this.renderContent()}<slot name=${SLOTS.panelEnd} @slotchange=${this.handlePanelEndChange}></slot></div>`;
+    })}><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.renderDialogs()}${this.renderSheets()}</div>`;

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

@@ -29,17 +29,13 @@ 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"
    */
@@ -78,6 +74,8 @@ 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> | undefined;
   /**
@@ -107,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;
+};

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

@@ -40,6 +40,7 @@ class ShellPanel extends LitElement {
     super();
     this.direction = useDirection();
     this.resizeHandleRef = createRef();
+    this.actionBars = [];
     this.actionBarContainerResizeObserver = createObserver("resize", () => this.updateActionBarSize());
     this.handleActionBarExpand = () => {
       this.isActionBarExpanded = true;
@@ -48,12 +49,13 @@ class ShellPanel extends LitElement {
       this.isActionBarExpanded = false;
     };
     this.contentRef = createRef();
+    this.containerRef = createRef();
     this.messages = useT9n();
     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 }
+        inline: { min: this.resizeValues.minInlineSize, max: this.getMaxInlineSize() },
+        block: { min: this.resizeValues.minBlockSize, max: this.getMaxBlockSize() }
       }),
       onResize: (resizeValues) => {
         this.resizeValues = resizeValues;
@@ -85,7 +87,7 @@ class ShellPanel extends LitElement {
     this.listen("calciteActionBarCollapse", this.handleActionBarCollapseEvent);
   }
   static {
-    this.properties = { resizeValues: [16, {}, { state: true }], isActionBarExpanded: [16, {}, { state: true }], hasHeader: [16, {}, { state: true }], actionBarPosition: [3, {}, { reflect: true }], collapsed: [7, {}, { reflect: true, type: Boolean }], displayMode: [3, {}, { reflect: true }], heightScale: [3, {}, { reflect: true }], layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], position: [3, {}, { reflect: true }], resizable: [7, {}, { reflect: true, type: Boolean }], height: [3, {}, { reflect: true }], widthScale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }] };
+    this.properties = { resizeValues: [16, {}, { state: true }], isActionBarExpanded: [16, {}, { state: true }], hasHeader: [16, {}, { state: true }], actionBarPosition: [3, {}, { reflect: true }], collapsed: [7, {}, { reflect: true, type: Boolean }], displayMode: [3, {}, { reflect: true }], heightScale: [3, {}, { reflect: true }], layout: [3, {}, { reflect: true }], messageOverrides: [0, {}, { attribute: false }], position: [3, {}, { reflect: true }], resizable: [7, {}, { reflect: true, type: Boolean }], shellSizingDataProvider: [0, {}, { attribute: false }], height: [3, {}, { reflect: true }], widthScale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = [styles, styles$1];
@@ -201,20 +203,85 @@ class ShellPanel extends LitElement {
     this.interaction?.unset();
   }
   updateResizeValues() {
-    const { contentRef } = this;
+    const { contentRef, layout } = this;
     if (!contentRef.value) {
       return;
     }
     const computedStyle = window.getComputedStyle(contentRef.value);
+    const computedMaxInlineSize = getStylePixelValue(computedStyle.maxInlineSize) || window.innerWidth;
+    const computedMaxBlockSize = getStylePixelValue(computedStyle.maxBlockSize) || window.innerHeight;
+    const availableInlineSize = layout === "vertical" ? this.getAvailableInlineSize() : null;
+    const availableBlockSize = layout === "horizontal" ? this.getAvailableBlockSize() : null;
     this.resizeValues = {
       inlineSize: getStylePixelValue(computedStyle.inlineSize),
       blockSize: getStylePixelValue(computedStyle.blockSize),
       minInlineSize: getStylePixelValue(computedStyle.minInlineSize),
       minBlockSize: getStylePixelValue(computedStyle.minBlockSize),
-      maxInlineSize: getStylePixelValue(computedStyle.maxInlineSize) || window.innerWidth,
-      maxBlockSize: getStylePixelValue(computedStyle.maxBlockSize) || window.innerHeight
+      maxInlineSize: availableInlineSize === null ? computedMaxInlineSize : Math.min(computedMaxInlineSize, availableInlineSize),
+      maxBlockSize: availableBlockSize === null ? computedMaxBlockSize : Math.min(computedMaxBlockSize, availableBlockSize)
     };
   }
+  getAvailableBlockSize() {
+    return this.getAvailableSize("block");
+  }
+  getAvailableInlineSize() {
+    return this.getAvailableSize("inline");
+  }
+  getAvailableSize(axis) {
+    const dimension = axis === "inline" ? "width" : "height";
+    const shellSizingData = this.shellSizingDataProvider?.(axis);
+    const actionBarContainerSize = this.actionBarContainerEl?.getBoundingClientRect()[dimension] ?? 0;
+    const actionBarSize = Math.max(actionBarContainerSize, this.actionBars.reduce((total, actionBar) => total + actionBar.getBoundingClientRect()[dimension], 0));
+    if (!shellSizingData) {
+      return null;
+    }
+    const { availableSize } = shellSizingData;
+    const containerSpacingSize = this.getContainerSpacingSize(axis);
+    const contentSpacingSize = this.getContentSpacingSize(axis);
+    return Math.max(Math.floor(availableSize) - Math.ceil(actionBarSize) - Math.ceil(containerSpacingSize) - Math.ceil(contentSpacingSize), 0);
+  }
+  getContentSpacingSize(axis) {
+    const content = this.contentRef.value;
+    if (!content) {
+      return 0;
+    }
+    const computedStyle = window.getComputedStyle(content);
+    return axis === "inline" ? getStylePixelValue(computedStyle.marginInlineStart) + getStylePixelValue(computedStyle.marginInlineEnd) + getStylePixelValue(computedStyle.borderInlineStartWidth) + getStylePixelValue(computedStyle.borderInlineEndWidth) : getStylePixelValue(computedStyle.marginBlockStart) + getStylePixelValue(computedStyle.marginBlockEnd) + getStylePixelValue(computedStyle.borderBlockStartWidth) + getStylePixelValue(computedStyle.borderBlockEndWidth);
+  }
+  getContainerSpacingSize(axis) {
+    const container = this.containerRef.value;
+    if (!container) {
+      return 0;
+    }
+    const computedStyle = window.getComputedStyle(container);
+    return axis === "inline" ? getStylePixelValue(computedStyle.marginInlineStart) + getStylePixelValue(computedStyle.marginInlineEnd) + getStylePixelValue(computedStyle.borderInlineStartWidth) + getStylePixelValue(computedStyle.borderInlineEndWidth) : getStylePixelValue(computedStyle.marginBlockStart) + getStylePixelValue(computedStyle.marginBlockEnd) + getStylePixelValue(computedStyle.borderBlockStartWidth) + getStylePixelValue(computedStyle.borderBlockEndWidth);
+  }
+  getMaxBlockSize() {
+    const { layout, contentRef } = this;
+    if (layout !== "horizontal") {
+      return this.resizeValues.maxBlockSize;
+    }
+    if (!contentRef.value) {
+      return this.resizeValues.maxBlockSize;
+    }
+    const computedStyle = window.getComputedStyle(contentRef.value);
+    const cssMax = getStylePixelValue(computedStyle.maxBlockSize) || window.innerHeight;
+    const availableBlockSize = this.getAvailableBlockSize();
+    return availableBlockSize === null ? cssMax : Math.min(cssMax, availableBlockSize);
+  }
+  getMaxInlineSize() {
+    const { layout, contentRef } = this;
+    if (layout !== "vertical") {
+      return this.resizeValues.maxInlineSize;
+    }
+    if (!contentRef.value) {
+      return this.resizeValues.maxInlineSize;
+    }
+    const computedStyle = window.getComputedStyle(contentRef.value);
+    const cssMax = getStylePixelValue(computedStyle.maxInlineSize) || window.innerWidth;
+    const availableInlineSize = this.getAvailableInlineSize();
+    return availableInlineSize === null ? cssMax : Math.min(cssMax, availableInlineSize);
+  }
   async refreshResize() {
     await this.componentOnReady();
     await this.updateComplete;
@@ -230,7 +297,6 @@ class ShellPanel extends LitElement {
     }
     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 === "end" && layout === "horizontal" ? resizeHandle : false,
@@ -238,7 +304,7 @@ class ShellPanel extends LitElement {
         bottom: position === "start" && layout === "horizontal" ? resizeHandle : false,
         left: position === (rtl ? "start" : "end") && layout === "vertical" ? resizeHandle : false
       },
-      modifiers: [interact.modifiers.restrictSize({ min: restrictSizeMin, max: restrictSizeMax })],
+      modifiers: [interact.modifiers.restrictSize({ min: restrictSizeMin })],
       listeners: {
         resizestart: () => {
           this.calciteInternalShellPanelResizeStart.emit();
@@ -344,10 +410,7 @@ class ShellPanel extends LitElement {
     if (effectivePosition === "end" || effectivePosition === "bottom") {
       mainNodes.reverse();
     }
-    return html`<div class=${safeClassMap({
-      [CSS.container]: true,
-      [CSS.floatAll]: displayMode === "float-all"
-    })}>${mainNodes}</div>`;
+    return html`<div class=${safeClassMap({ [CSS.container]: true, [CSS.floatAll]: displayMode === "float-all" })} ${ref(this.containerRef)}>${mainNodes}</div>`;
   }
 }
 customElement("calcite-shell-panel", ShellPanel);

package/dist/components/calcite-sort-handle/customElement.d.ts

@@ -42,11 +42,11 @@ export abstract class SortHandle extends LitElement {
    */
   accessor open: boolean;
   /**
-   * Specifies the type of positioning to use for overlaid content, where:
+   * Specifies the type of positioning to use for overlaid content.
    *
-   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
+   * - `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout.
    *
-   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   * - `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
    *
    * @default "absolute"
    */