@esri/calcite-components 5.2.0-next.3 → 5.2.0-next.30

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

@@ -6,7 +6,7 @@ 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

@@ -4,13 +4,16 @@ 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}`;
+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 +27,38 @@ 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.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 +68,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 +108,39 @@ 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;
-    });
-  }
   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) => {
+    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) => {
+    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"));
+    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"));
+    panelElements.forEach((el) => {
       el.layout = "vertical";
       el.position = "end";
     });
+    this.updateResizableSlotState("panel-end", panelElements);
   }
   handleDialogsSlotChange(event) {
     this.hasDialogs = !!slotChangeHasAssignedElement(event);
@@ -119,6 +148,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,9 +175,6 @@ 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>`;
   }
@@ -159,10 +200,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}></slot>${this.renderContent()}<slot name=${SLOTS.panelEnd} @slotchange=${this.handlePanelEndChange}></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

@@ -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.
    *
@@ -43,13 +45,13 @@ export abstract class ShellPanel extends LitElement {
    */
   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.
    *
@@ -58,7 +60,7 @@ export abstract class ShellPanel extends LitElement {
    */
   accessor layout: Extract<"horizontal" | "vertical", Layout>;
   /** Overrides individual strings used by the component. */
-  accessor messageOverrides: { resize?: string; };
+  accessor messageOverrides: { resize?: string | undefined; };
   /**
    * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`).
    *
@@ -73,7 +75,7 @@ export abstract class ShellPanel extends LitElement {
    */
   accessor resizable: boolean;
   /** 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.
    *