@esri/calcite-components 3.2.0-next.9 → 3.2.0

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

@@ -2,14 +2,18 @@
 import { PropertyValues } from 'lit';
 import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
 import { Height, Layout, Position, Scale, Width } from '../interfaces';
-import { DisplayMode } from './interfaces';
+import { DisplayMode, ResizeValues } from './interfaces';
 
 /**
- * @slot - A slot for adding custom content.
- * @slot action-bar - A slot for adding a `calcite-action-bar` to the component.
+ * @slot  - A slot for adding custom content.
+ * @slot [action-bar] - A slot for adding a `calcite-action-bar` to the component.
  */
 export declare class ShellPanel extends LitElement {
-    /** When `true`, hides the component's content area. */
+    /**
+     * When `true`, hides the component's content area.
+     *
+     * @default false
+     */
     collapsed: boolean;
     /**
      * Specifies the display mode of the component, where:
@@ -23,6 +27,8 @@ export declare class ShellPanel extends LitElement {
      * `"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.
+     *
+     * @default "dock"
      */
     displayMode: DisplayMode;
     /**
@@ -31,23 +37,25 @@ export declare class ShellPanel extends LitElement {
      * @deprecated Use the `height` property instead.
      */
     heightScale: Scale;
-    /** The direction of the component. */
+    /**
+     * The direction of the component.
+     *
+     * @default "vertical"
+     */
     layout: Extract<"horizontal" | "vertical", Layout>;
     /** Use this property to override individual strings used by the component. */
     messageOverrides?: typeof this.messages._overrides;
     /**
-     * Made into a prop for testing purposes only
+     * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`).
      *
-     * @private
+     * @default "start"
      */
-    private messages: Partial<{
-        resize: string;
-    }> & import('@arcgis/components-controllers').T9nMeta<{
-        resize: string;
-    }>;
-    /** Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`). */
     position: Extract<"start" | "end", Position>;
-    /** When `true` and `displayMode` is not `float-content` or `float`, the component's content area is resizable. */
+    /**
+     * When `true` and `displayMode` is not `float-content` or `float`, the component's content area is resizable.
+     *
+     * @default false
+     */
     resizable: boolean;
     /** Specifies the height of the component. */
     height: Height;
@@ -55,8 +63,14 @@ export declare class ShellPanel extends LitElement {
      * When `layout` is `vertical`, specifies the width of the component.
      *
      * @deprecated Use the `width` property instead.
+     * @default "m"
      */
     widthScale: Scale;
     /** Specifies the width of the component. */
     width: Extract<Width, Scale>;
+    private messages: Partial<{
+        resize: string;
+    }> & import('@arcgis/lumina/controllers').T9nMeta<{
+        resize: string;
+    }>;
 }

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

@@ -1,93 +1,52 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.9 */
-import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
+v3.2.0 */
+import { C as CSS_UTILITY, a as resizeShiftStep, b as resizeStep, c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit-html/directives/keyed.js";
 import { ref } from "lit-html/directives/ref.js";
+import { i as interact } from "../../chunks/interact.min.js";
 import { html } from "lit";
-import { LitElement, createEvent, safeClassMap, safeStyleMap } from "@arcgis/lumina";
-import { i as isPrimaryPointerButton, g as getElementDir, s as slotChangeGetAssignedElements, a as slotChangeHasAssignedElement } from "../../chunks/dom.js";
+import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
+import { g as getElementDir, k as getStylePixelValue, s as slotChangeGetAssignedElements, a as slotChangeHasAssignedElement } from "../../chunks/dom.js";
 import { c as clamp } from "../../chunks/math.js";
 import { g as getDimensionClass } from "../../chunks/dynamicClasses.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { css } from "@lit/reactive-element/css-tag.js";
 const CSS = {
   container: "container",
+  actionBarContainer: "action-bar-container",
+  contentContainer: "content-container",
   content: "content",
   contentHeader: "content__header",
   contentBody: "content__body",
   contentOverlay: "content--overlay",
   floatAll: "float-all",
   floatContent: "float--content",
-  separator: "separator"
+  resizeHandle: "resize-handle",
+  resizeHandleBar: "resize-handle-bar"
 };
 const SLOTS = {
   actionBar: "action-bar",
   header: "header"
 };
-const styles = css`:host{pointer-events:none;position:relative;display:flex;flex:0 1 auto;align-items:stretch;z-index:var(--calcite-shell-panel-z-index, var(--calcite-z-index));--calcite-shell-panel-max-height: unset;--calcite-internal-shell-panel-shadow-block-start: 0 4px 8px -1px rgba(0, 0, 0, .08), 0 2px 4px -1px rgba(0, 0, 0, .04);--calcite-internal-shell-panel-shadow-block-end: 0 -4px 8px -1px rgba(0, 0, 0, .08), 0 -2px 4px -1px rgba(0, 0, 0, .04);--calcite-internal-shell-panel-shadow-inline-start: 4px 0 8px -1px rgba(0, 0, 0, .08), 2px 0 4px -1px rgba(0, 0, 0, .04);--calcite-internal-shell-panel-shadow-inline-end: -4px 0 8px -1px rgba(0, 0, 0, .08), -2px 0 4px -1px rgba(0, 0, 0, .04)}.calcite--rtl.content--overlay{--calcite-internal-shell-panel-shadow-inline-start: -4px 0 8px -1px rgba(0, 0, 0, .08), -2px 0 4px -1px rgba(0, 0, 0, .04);--calcite-internal-shell-panel-shadow-inline-end: 4px 0 8px -1px rgba(0, 0, 0, .08), 2px 0 4px -1px rgba(0, 0, 0, .04)}:host([layout=vertical]){z-index:var(--calcite-shell-panel-z-index, calc(var(--calcite-z-index) + 1))}:host([layout=vertical][display-mode=overlay]){z-index:var(--calcite-shell-panel-z-index, calc(var(--calcite-z-index-header) + 1))}:host([layout=vertical][display-mode=float-all]) .content{flex:2}:host([layout=vertical]:not([display-mode=float-all])) .width-s{--calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 12vw);--calcite-internal-shell-panel-max-width: var(--calcite-shell-panel-max-width, 300px);--calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 150px)}:host([layout=vertical][display-mode=float-all]) .width-s{--calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 12vw);--calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 150px)}:host([layout=vertical]:not([display-mode=float-all])) .width-m{--calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 20vw);--calcite-internal-shell-panel-max-width: var(--calcite-shell-panel-max-width, 420px);--calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 240px)}:host([layout=vertical][display-mode=float-all]) .width-m{--calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 20vw);--calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 240px)}:host([layout=vertical]:not([display-mode=float-all])) .width-l{--calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 45vw);--calcite-internal-shell-panel-max-width: var(--calcite-shell-panel-max-width, 680px);--calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 340px)}:host([layout=vertical][display-mode=float-all]) .width-l{--calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 45vw);--calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 340px)}:host([layout=horizontal]) .height-s{--calcite-internal-shell-panel-max-height: var( --calcite-shell-panel-max-height, var(--calcite-shell-panel-detached-max-height, 20vh) )}:host([layout=horizontal]) .content{--calcite-internal-shell-panel-min-height: var(--calcite-shell-panel-min-height, 5vh);--calcite-internal-shell-panel-max-height: var(--calcite-shell-panel-max-height, 30vh)}:host([layout=horizontal]) .height-l{--calcite-internal-shell-panel-max-height: var( --calcite-shell-panel-max-height, var(--calcite-shell-panel-detached-max-height, 40vh) )}.container{pointer-events:none;box-sizing:border-box;display:flex;block-size:100%;flex:1 1 auto;align-items:stretch;background-color:transparent;font-size:var(--calcite-font-size--1);color:var(--calcite-color-text-2)}.container *{box-sizing:border-box}.container.float-all{margin-block:.5rem;margin-inline:.5rem}.float-all{max-block-size:var(--calcite-internal-shell-panel-max-height, calc(100% - 1rem) );box-shadow:var(--calcite-shell-panel-shadow, var(--calcite-shadow-sm));border-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round));overflow:hidden}:host([layout=vertical][position=start]) .float-all{border-inline-start:1px solid var(--calcite-shell-panel-border-color, var(--calcite-color-border-3))}:host([layout=vertical][position=end]) .float-all{border-inline-end:1px solid var(--calcite-shell-panel-border-color, var(--calcite-color-border-3))}:host([layout=horizontal]) .float-all{border-inline:1px solid var(--calcite-shell-panel-border-color, var(--calcite-color-border-3))}:host([layout=horizontal]) .container{block-size:auto;inline-size:100%;flex-direction:column}:host(:hover) .separator:not(:hover):not(:focus),:host(:focus-within) .separator:not(:hover):not(:focus){opacity:1;background-color:var(--calcite-color-border-3)}.separator{pointer-events:auto;position:absolute;display:flex;background-color:transparent;opacity:0;transition-property:background-color,block-size,border-color,box-shadow,color,inset-block-end,inset-block-start,inset-inline-end,inset-inline-start,inset-size,opacity,outline-color,transform;transition-duration:var(--calcite-animation-timing);transition-timing-function:ease-in-out;cursor:col-resize;outline:none}.separator:hover{opacity:1;background-color:var(--calcite-color-border-2)}.separator:focus{background-color:var(--calcite-color-brand);opacity:1}:host([layout=vertical]) .separator{inset-block:0px;block-size:100%;inline-size:.125rem;cursor:col-resize}:host([layout=horizontal][position=start]) .separator{inset-block-end:0px}:host([layout=horizontal][position=end]) .separator{inset-block-start:0px}:host([layout=horizontal]) .separator{inset-inline-end:0px;block-size:.125rem;inline-size:100%;cursor:row-resize}:host([layout=vertical][position=start]) .separator{inset-inline-end:-2px}:host([layout=horizontal][position=start]) .separator{inset-block-end:-2px}:host([layout=vertical][position=end]) .separator{inset-inline-start:-2px}:host([layout=horizontal][position=end]) .separator{inset-block-start:-2px}::slotted(calcite-panel),::slotted(calcite-flow){block-size:100%;inline-size:100%;flex:1 1 auto;max-block-size:unset;max-inline-size:unset}::slotted(.calcite-match-height){display:flex;flex:1 1 auto;overflow:hidden}.content{pointer-events:auto;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;align-self:stretch;background-color:var(--calcite-color-background);padding:0;transition:max-block-size var(--calcite-animation-timing),max-inline-size var(--calcite-animation-timing)}:host([layout=vertical]:not([display-mode=float-all])) .content{inline-size:var(--calcite-internal-shell-panel-width);max-inline-size:var(--calcite-internal-shell-panel-max-width);min-inline-size:var(--calcite-internal-shell-panel-min-width)}:host([layout=vertical][display-mode=float-all]) .content{inline-size:var(--calcite-internal-shell-panel-width);min-inline-size:var(--calcite-internal-shell-panel-min-width)}:host([layout=horizontal]) .content{block-size:var(--calcite-internal-shell-panel-height);max-block-size:var(--calcite-internal-shell-panel-max-height);min-block-size:var(--calcite-internal-shell-panel-min-height)}.content__header{display:flex;flex:0 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch}.content__body{display:flex;flex:1 1 auto;flex-direction:column;overflow:hidden}.content--overlay{position:absolute;--tw-shadow: 0 4px 8px -1px rgba(0, 0, 0, .08), 0 2px 4px -1px rgba(0, 0, 0, .04);--tw-shadow-colored: 0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}:host([layout=vertical]) .content--overlay{inset-block-start:0px;block-size:100%}:host([layout=horizontal]) .content--overlay{inset-inline-start:0px;inline-size:100%}:host([layout=vertical][position=start]) .content--overlay{inset-inline-start:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-inline-start)}:host([layout=vertical][position=end]) .content--overlay{inset-inline-end:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-inline-end)}:host([layout=horizontal][position=start]) .content--overlay{inset-block-start:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-block-start)}:host([layout=horizontal][position=end]) .content--overlay{inset-block-end:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-block-end)}.float--content{margin-inline:.5rem;margin-block:.5rem auto;block-size:auto;overflow:hidden;border-radius:.25rem;--tw-shadow: 0 4px 8px -1px rgba(0, 0, 0, .08), 0 2px 4px -1px rgba(0, 0, 0, .04);--tw-shadow-colored: 0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);max-block-size:var(--calcite-internal-shell-panel-max-height, calc(100% - 1rem) )}.float--content ::slotted(calcite-panel),.float--content ::slotted(calcite-flow){max-block-size:unset}:host([layout=horizontal]) .float--content{margin-block:.5rem}:host([position=start]) .float--content ::slotted(calcite-panel),:host([position=start]) .float--content ::slotted(calcite-flow),:host([position=end]) .float--content ::slotted(calcite-panel),:host([position=end]) .float--content ::slotted(calcite-flow){border-style:none}.content[hidden]{display:none}slot[name=action-bar]::slotted(calcite-action-bar),.content ::slotted(calcite-flow),.content ::slotted(calcite-panel:not([closed])){border-width:1px;border-style:solid;border-color:var(--calcite-color-border-3)}:host([position=start]:not([slot=panel-end])) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=start]:not([slot=panel-end])) .content ::slotted(calcite-flow),:host([position=start]:not([slot=panel-end])) .content ::slotted(calcite-panel),:host([position=end][slot=panel-start]) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=end][slot=panel-start]) .content ::slotted(calcite-flow),:host([position=end][slot=panel-start]) .content ::slotted(calcite-panel){border-inline-start:none}:host([position=end]:not([slot=panel-start])) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=end]:not([slot=panel-start])) .content ::slotted(calcite-flow),:host([position=end]:not([slot=panel-start])) .content ::slotted(calcite-panel),:host([position=start][slot=panel-end]) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=start][slot=panel-end]) .content ::slotted(calcite-flow),:host([position=start][slot=panel-end]) .content ::slotted(calcite-panel){border-inline-end:none}:host([layout=horizontal]) slot[name=action-bar]::slotted(calcite-action-bar){border-inline:0}:host([layout=horizontal][position=start]) .content ::slotted(calcite-flow),:host([layout=horizontal][position=start]) .content ::slotted(calcite-panel){border-inline:0;border-block-start:0}:host([layout=horizontal][position=end]) .content ::slotted(calcite-flow),:host([layout=horizontal][position=end]) .content ::slotted(calcite-panel){border-inline:0;border-block-end:0}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{pointer-events:none;position:relative;display:flex;flex:0 1 auto;align-items:stretch;z-index:var(--calcite-shell-panel-z-index, var(--calcite-z-index));--calcite-shell-panel-max-height: unset;--calcite-internal-shell-panel-shadow-block-start: 0 4px 8px -1px rgba(0, 0, 0, .08), 0 2px 4px -1px rgba(0, 0, 0, .04);--calcite-internal-shell-panel-shadow-block-end: 0 -4px 8px -1px rgba(0, 0, 0, .08), 0 -2px 4px -1px rgba(0, 0, 0, .04);--calcite-internal-shell-panel-shadow-inline-start: 4px 0 8px -1px rgba(0, 0, 0, .08), 2px 0 4px -1px rgba(0, 0, 0, .04);--calcite-internal-shell-panel-shadow-inline-end: -4px 0 8px -1px rgba(0, 0, 0, .08), -2px 0 4px -1px rgba(0, 0, 0, .04)}.calcite--rtl.content--overlay{--calcite-internal-shell-panel-shadow-inline-start: -4px 0 8px -1px rgba(0, 0, 0, .08), -2px 0 4px -1px rgba(0, 0, 0, .04);--calcite-internal-shell-panel-shadow-inline-end: 4px 0 8px -1px rgba(0, 0, 0, .08), 2px 0 4px -1px rgba(0, 0, 0, .04)}:host([layout=vertical]){z-index:var(--calcite-shell-panel-z-index, calc(var(--calcite-z-index) + 1))}:host([layout=vertical][display-mode=overlay]){z-index:var(--calcite-shell-panel-z-index, calc(var(--calcite-z-index-header) + 1))}:host([layout=vertical][display-mode=float-all]) .content{flex:2}:host([layout=vertical]:not([display-mode=float-all])) .width-s{--calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 12vw);--calcite-internal-shell-panel-max-width: var(--calcite-shell-panel-max-width, 300px);--calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 150px)}:host([layout=vertical][display-mode=float-all]) .width-s{--calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 12vw);--calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 150px)}:host([layout=vertical]:not([display-mode=float-all])) .width-m{--calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 20vw);--calcite-internal-shell-panel-max-width: var(--calcite-shell-panel-max-width, 420px);--calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 240px)}:host([layout=vertical][display-mode=float-all]) .width-m{--calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 20vw);--calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 240px)}:host([layout=vertical]:not([display-mode=float-all])) .width-l{--calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 45vw);--calcite-internal-shell-panel-max-width: var(--calcite-shell-panel-max-width, 680px);--calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 340px)}:host([layout=vertical][display-mode=float-all]) .width-l{--calcite-internal-shell-panel-width: var(--calcite-shell-panel-width, 45vw);--calcite-internal-shell-panel-min-width: var(--calcite-shell-panel-min-width, 340px)}:host([layout=horizontal]) .height-s{--calcite-internal-shell-panel-max-height: var( --calcite-shell-panel-max-height, var(--calcite-shell-panel-detached-max-height, 20vh) )}:host([layout=horizontal]) .content{--calcite-internal-shell-panel-min-height: var(--calcite-shell-panel-min-height, 5vh);--calcite-internal-shell-panel-max-height: var(--calcite-shell-panel-max-height, 30vh)}:host([layout=horizontal]) .height-l{--calcite-internal-shell-panel-max-height: var( --calcite-shell-panel-max-height, var(--calcite-shell-panel-detached-max-height, 40vh) )}.container{pointer-events:none;box-sizing:border-box;display:flex;height:100%;flex:1 1 auto;align-items:stretch;background-color:transparent;font-size:var(--calcite-font-size--1);color:var(--calcite-shell-panel-text-color, var(--calcite-color-text-2))}.container *{box-sizing:border-box}.container.float-all{margin-block:var(--calcite-spacing-sm);margin-inline:var(--calcite-spacing-sm)}.float-all{max-block-size:var(--calcite-internal-shell-panel-max-height, calc(100% - 1rem) );box-shadow:var(--calcite-shell-panel-shadow, var(--calcite-shadow-sm));border-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round));overflow:hidden}:host([layout=vertical][position=start]) .float-all{border-inline-start:var(--calcite-border-width-sm) solid var(--calcite-shell-panel-border-color, var(--calcite-color-border-3))}:host([layout=vertical][position=end]) .float-all{border-inline-end:var(--calcite-border-width-sm) solid var(--calcite-shell-border-color, var(--calcite-shell-panel-border-color, var(--calcite-color-border-3)))}:host([layout=horizontal]) .float-all{border-inline:var(--calcite-border-width-sm) solid var(--calcite-shell-border-color, var(--calcite-shell-panel-border-color, var(--calcite-color-border-3)))}:host([layout=horizontal]) .container{height:auto;width:100%;flex-direction:column}.resize-handle{position:absolute;box-sizing:border-box;display:flex;-webkit-user-select:none;user-select:none;align-items:center;justify-content:center;outline:2px solid transparent;outline-offset:2px;--calcite-internal-shell-panel-resize-handle-offset: calc( (var(--calcite-size-fixed-xxl) - var(--calcite-size-fixed-sm-plus)) / 2 * -1 );z-index:var(--calcite-z-index-header)}.resize-handle:active .resize-handle-bar,.resize-handle:hover .resize-handle-bar{color:var(--calcite-shell-panel-resize-icon-color, var(--calcite-color-text-1));background-color:var(--calcite-shell-panel-resize-background-color, var(--calcite-color-foreground-3))}.resize-handle-bar{pointer-events:none;display:flex;align-items:center;justify-content:center;color:var(--calcite-shell-panel-resize-icon-color, var(--calcite-color-border-input));background-color:var(--calcite-shell-panel-resize-background-color, var(--calcite-color-background))}.resize-handle:focus .resize-handle-bar{outline-color:transparent;outline:2px solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)))}:host([position=start][layout=vertical]) .resize-handle{inline-size:var(--calcite-size-fixed-xxl);right:var(--calcite-internal-shell-panel-resize-handle-offset);block-size:100%}:host([position=start][layout=vertical]) .resize-handle-bar{block-size:100%;inline-size:var(--calcite-size-fixed-sm-plus);border-inline-start:var(--calcite-border-width-sm) solid var(--calcite-shell-border-color, var(--calcite-color-border-3))}:host([position=start][layout=vertical]):host([display-mode^=float]) .resize-handle-bar{border-start-end-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round));border-end-end-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round))}:host([position=end][layout=vertical]) .resize-handle{inline-size:var(--calcite-size-fixed-xxl);left:var(--calcite-internal-shell-panel-resize-handle-offset);block-size:100%}:host([position=end][layout=vertical]) .resize-handle-bar{block-size:100%;inline-size:var(--calcite-size-fixed-sm-plus);border-inline-end:var(--calcite-border-width-sm) solid var(--calcite-shell-border-color, var(--calcite-color-border-3))}:host([position=end][layout=vertical]):host([display-mode^=float]) .resize-handle-bar{border-start-start-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round));border-end-start-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round))}:host([position=start][layout=horizontal]) .resize-handle{block-size:var(--calcite-size-fixed-xxl);inline-size:100%;inset-block-end:var(--calcite-internal-shell-panel-resize-handle-offset)}:host([position=start][layout=horizontal]) .resize-handle-bar{inline-size:100%;block-size:var(--calcite-size-fixed-sm-plus);border-block-start:var(--calcite-border-width-sm) solid var(--calcite-shell-border-color, var(--calcite-color-border-3))}:host([position=start][layout=horizontal]):host([display-mode^=float]) .resize-handle-bar{border-bottom-right-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round));border-bottom-left-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round))}:host([position=end][layout=horizontal]) .resize-handle{block-size:var(--calcite-size-fixed-xxl);inline-size:100%;inset-block-start:var(--calcite-internal-shell-panel-resize-handle-offset)}:host([position=end][layout=horizontal]) .resize-handle-bar{inline-size:100%;block-size:var(--calcite-size-fixed-sm-plus);border-block-end:var(--calcite-border-width-sm) solid var(--calcite-shell-border-color, var(--calcite-color-border-3))}:host([position=end][layout=horizontal]):host([display-mode^=float]) .resize-handle-bar{border-top-left-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round));border-top-right-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round))}::slotted(calcite-panel),::slotted(calcite-flow){height:100%;width:100%;flex:1 1 auto;max-block-size:unset;max-inline-size:unset}::slotted(.calcite-match-height){display:flex;flex:1 1 auto;overflow:hidden}.action-bar-container{pointer-events:auto;box-sizing:border-box;display:flex;flex:1 1 auto}.content-container{position:relative;box-sizing:border-box;display:flex;height:100%;width:100%;flex:1 1 auto;align-items:stretch;align-self:stretch}:host([layout=horizontal]) .action-bar-container,:host([layout=horizontal]) .content-container{flex-direction:column}.content{pointer-events:auto;position:relative;box-sizing:border-box;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;align-self:stretch;padding:0;background-color:var(--calcite-shell-panel-background-color, var(--calcite-color-background));transition:max-block-size var(--calcite-animation-timing),max-inline-size var(--calcite-animation-timing)}:host([layout=vertical]:not([display-mode=float-all])) .content{inline-size:var(--calcite-internal-shell-panel-width);max-inline-size:var(--calcite-internal-shell-panel-max-width);min-inline-size:var(--calcite-internal-shell-panel-min-width)}:host([layout=vertical][display-mode=float-all]) .content{inline-size:var(--calcite-internal-shell-panel-width);min-inline-size:var(--calcite-internal-shell-panel-min-width)}:host([layout=horizontal]) .content{block-size:var(--calcite-internal-shell-panel-height);max-block-size:var(--calcite-internal-shell-panel-max-height);min-block-size:var(--calcite-internal-shell-panel-min-height)}:host([resizable][layout=vertical][position=start]) .content{padding-inline-end:var(--calcite-size-fixed-sm-plus)}:host([resizable][layout=vertical][position=end]) .content{padding-inline-start:var(--calcite-size-fixed-sm-plus)}:host([resizable][layout=horizontal][position=start]) .content{padding-block-end:var(--calcite-size-fixed-sm-plus)}:host([resizable][layout=horizontal][position=end]) .content{padding-block-start:var(--calcite-size-fixed-sm-plus)}.content__header{display:flex;flex:0 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch}.content__body{display:flex;flex:1 1 auto;flex-direction:column;overflow:hidden}.content--overlay{position:absolute;--tw-shadow: 0 4px 8px -1px rgba(0, 0, 0, .08), 0 2px 4px -1px rgba(0, 0, 0, .04);--tw-shadow-colored: 0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);box-shadow:var(--calcite-shell-panel-shadow, var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow))}:host([layout=vertical]) .content--overlay{top:0;height:100%}:host([layout=horizontal]) .content--overlay{inset-inline-start:0px;width:100%}:host([layout=vertical][position=start]) .content--overlay{inset-inline-start:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-inline-start)}:host([layout=vertical][position=end]) .content--overlay{inset-inline-end:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-inline-end)}:host([layout=horizontal][position=start]) .content--overlay{inset-block-start:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-block-start)}:host([layout=horizontal][position=end]) .content--overlay{inset-block-end:100%;box-shadow:var(--calcite-internal-shell-panel-shadow-block-end)}.float--content{margin-bottom:auto;height:auto;overflow:hidden;--tw-shadow: 0 4px 8px -1px rgba(0, 0, 0, .08), 0 2px 4px -1px rgba(0, 0, 0, .04);--tw-shadow-colored: 0 4px 8px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);box-shadow:var(--calcite-shell-panel-shadow, var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow));border-radius:var(--calcite-shell-panel-corner-radius, var(--calcite-corner-radius-round));margin-inline:var(--calcite-spacing-sm);margin-block-start:var(--calcite-spacing-sm);max-block-size:var(--calcite-internal-shell-panel-max-height, calc(100% - 1rem) )}.float--content ::slotted(calcite-panel),.float--content ::slotted(calcite-flow){max-block-size:unset}:host([layout=horizontal]) .float--content{margin-block:var(--calcite-spacing-sm)}:host([position=start]) .float--content ::slotted(calcite-panel),:host([position=start]) .float--content ::slotted(calcite-flow),:host([position=end]) .float--content ::slotted(calcite-panel),:host([position=end]) .float--content ::slotted(calcite-flow){border-style:none}.content[hidden]{display:none}slot[name=action-bar]::slotted(calcite-action-bar),.content ::slotted(calcite-flow),.content ::slotted(calcite-panel:not([closed])){border:var(--calcite-border-width-sm) solid var(--calcite-shell-border-color, var(--calcite-color-border-3))}:host([position=start]:not([slot=panel-end])) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=start]:not([slot=panel-end])) .content ::slotted(calcite-flow),:host([position=start]:not([slot=panel-end])) .content ::slotted(calcite-panel),:host([position=end][slot=panel-start]) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=end][slot=panel-start]) .content ::slotted(calcite-flow),:host([position=end][slot=panel-start]) .content ::slotted(calcite-panel){border-inline-start:none}:host([resizable][layout=vertical]) .content ::slotted(calcite-flow),:host([resizable][layout=vertical]) .content ::slotted(calcite-panel){border-inline-start:none;border-inline-end:none}:host([resizable][layout=horizontal]) .content ::slotted(calcite-flow),:host([resizable][layout=horizontal]) .content ::slotted(calcite-panel){border-block-start:none;border-block-end:none}:host([position=end]:not([slot=panel-start])) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=end]:not([slot=panel-start])) .content ::slotted(calcite-flow),:host([position=end]:not([slot=panel-start])) .content ::slotted(calcite-panel),:host([position=start][slot=panel-end]) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=start][slot=panel-end]) .content ::slotted(calcite-flow),:host([position=start][slot=panel-end]) .content ::slotted(calcite-panel){border-inline-end:none}:host([layout=horizontal]) slot[name=action-bar]::slotted(calcite-action-bar){border-inline:0}:host([layout=horizontal][position=start]) .content ::slotted(calcite-flow),:host([layout=horizontal][position=start]) .content ::slotted(calcite-panel){border-inline:0;border-block-start:0}:host([layout=horizontal][position=end]) .content ::slotted(calcite-flow),:host([layout=horizontal][position=end]) .content ::slotted(calcite-panel){border-inline:0;border-block-end:0}:host([hidden]){display:none}[hidden]{display:none}`;
 class ShellPanel extends LitElement {
   constructor() {
     super(...arguments);
     this.actionBars = [];
-    this.contentHeightMax = null;
-    this.contentHeightMin = null;
-    this.contentWidthMax = null;
-    this.contentWidthMin = null;
-    this.initialClientX = null;
-    this.initialClientY = null;
-    this.initialContentHeight = null;
-    this.initialContentWidth = null;
-    this.separatorPointerDown = (event) => {
-      if (!isPrimaryPointerButton(event)) {
-        return;
-      }
-      this.calciteInternalShellPanelResizeStart.emit();
-      event.preventDefault();
-      const { separatorEl } = this;
-      if (separatorEl && document.activeElement !== separatorEl) {
-        separatorEl.focus();
-      }
-      if (this.layout === "horizontal") {
-        this.setInitialContentHeight();
-        this.initialClientY = event.clientY;
-      } else {
-        this.setInitialContentWidth();
-        this.initialClientX = event.clientX;
-      }
-      window.addEventListener("pointerup", this.separatorPointerUp);
-      window.addEventListener("pointermove", this.separatorPointerMove);
-    };
-    this.separatorPointerMove = (event) => {
-      event.preventDefault();
-      const { el, layout, initialContentWidth, initialContentHeight, position, initialClientX, initialClientY } = this;
-      const offset = layout === "horizontal" ? event.clientY - initialClientY : event.clientX - initialClientX;
-      const adjustmentDirection = layout === "vertical" && getElementDir(el) === "rtl" ? -1 : 1;
-      const adjustedOffset = layout === "horizontal" ? position === "end" ? -adjustmentDirection * offset : adjustmentDirection * offset : position === "end" ? -adjustmentDirection * offset : adjustmentDirection * offset;
-      if (layout === "horizontal") {
-        this.setContentHeight(initialContentHeight + adjustedOffset);
-      } else {
-        this.setContentWidth(initialContentWidth + adjustedOffset);
-      }
-    };
-    this.separatorPointerUp = (event) => {
-      if (!isPrimaryPointerButton(event)) {
-        return;
-      }
-      this.calciteInternalShellPanelResizeEnd.emit();
-      event.preventDefault();
-      window.removeEventListener("pointerup", this.separatorPointerUp);
-      window.removeEventListener("pointermove", this.separatorPointerMove);
+    this.messages = useT9n();
+    this.resizeValues = {
+      inlineSize: null,
+      blockSize: null,
+      minInlineSize: null,
+      minBlockSize: null,
+      maxInlineSize: null,
+      maxBlockSize: null
     };
-    this.step = 1;
-    this.stepMultiplier = 10;
-    this.contentHeight = null;
-    this.contentWidth = null;
     this.hasHeader = false;
     this.collapsed = false;
     this.displayMode = "dock";
     this.layout = "vertical";
-    this.messages = useT9n();
     this.position = "start";
     this.resizable = false;
     this.widthScale = "m";
@@ -95,166 +54,159 @@ class ShellPanel extends LitElement {
     this.calciteInternalShellPanelResizeStart = createEvent({ cancelable: false });
   }
   static {
-    this.properties = { contentHeight: [16, { state: true }], contentWidth: [16, { state: true }], hasHeader: [16, { state: 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 }], hasHeader: [16, {}, { state: 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 }] };
   }
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Lifecycle
   willUpdate(changes) {
     if (changes.has("layout") && (this.hasUpdated || this.layout !== "vertical")) {
       this.setActionBarsLayout(this.actionBars);
     }
   }
-  loaded() {
-    this.updateAriaValues();
-  }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.disconnectSeparator();
+    this.cleanupInteractions();
   }
-  // #endregion
-  // #region Private Methods
-  setContentWidth(width) {
-    const { contentWidthMax, contentWidthMin } = this;
-    const roundedWidth = Math.round(width);
-    this.contentWidth = typeof contentWidthMax === "number" && typeof contentWidthMin === "number" ? clamp(roundedWidth, contentWidthMin, contentWidthMax) : roundedWidth;
+  getContentElDOMRect() {
+    return this.contentEl.getBoundingClientRect();
   }
-  updateAriaValues() {
-    const { contentEl } = this;
-    const computedStyle = contentEl && getComputedStyle(contentEl);
-    if (!computedStyle) {
+  handleKeyDown(event) {
+    const { key, defaultPrevented, shiftKey } = event;
+    const { position, layout, resizable, contentEl, el, resizeValues: { maxBlockSize, maxInlineSize, minBlockSize, minInlineSize } } = this;
+    const arrowKeys = layout === "horizontal" ? ["ArrowUp", "ArrowDown"] : ["ArrowLeft", "ArrowRight"];
+    const keys = [...arrowKeys, "Home", "End"];
+    if (!resizable || !contentEl || defaultPrevented || !keys.includes(key)) {
       return;
     }
-    if (this.layout === "horizontal") {
-      this.updateHeights(computedStyle);
-    } else {
-      this.updateWidths(computedStyle);
+    const rect = this.getContentElDOMRect();
+    const invertRTL = getElementDir(el) === "rtl" ? -1 : 1;
+    const stepValue = shiftKey ? resizeShiftStep : resizeStep;
+    switch (key) {
+      case "ArrowUp":
+        this.updateSize({
+          size: rect.height + (layout === "horizontal" && position === "end" ? stepValue : -stepValue),
+          type: "blockSize"
+        });
+        event.preventDefault();
+        break;
+      case "ArrowDown":
+        this.updateSize({
+          size: rect.height + (layout === "horizontal" && position === "end" ? -stepValue : stepValue),
+          type: "blockSize"
+        });
+        event.preventDefault();
+        break;
+      case "ArrowLeft":
+        this.updateSize({
+          size: rect.width + (layout === "vertical" && position === "end" ? stepValue : -stepValue) * invertRTL,
+          type: "inlineSize"
+        });
+        event.preventDefault();
+        break;
+      case "ArrowRight":
+        this.updateSize({
+          size: rect.width + (layout === "vertical" && position === "end" ? -stepValue : stepValue) * invertRTL,
+          type: "inlineSize"
+        });
+        event.preventDefault();
+        break;
+      case "Home":
+        this.updateSize({
+          size: layout === "horizontal" ? minBlockSize : minInlineSize,
+          type: layout === "horizontal" ? "blockSize" : "inlineSize"
+        });
+        event.preventDefault();
+        break;
+      case "End":
+        this.updateSize({
+          size: layout === "horizontal" ? maxBlockSize : maxInlineSize,
+          type: layout === "horizontal" ? "blockSize" : "inlineSize"
+        });
+        event.preventDefault();
+        break;
     }
-    this.requestUpdate();
-  }
-  setContentHeight(height) {
-    const { contentHeightMax, contentHeightMin } = this;
-    const roundedHeight = Math.round(height);
-    this.contentHeight = typeof contentHeightMax === "number" && typeof contentHeightMin === "number" ? clamp(roundedHeight, contentHeightMin, contentHeightMax) : roundedHeight;
   }
-  updateWidths(computedStyle) {
-    const max = parseInt(computedStyle.getPropertyValue("max-width"));
-    const min = parseInt(computedStyle.getPropertyValue("min-width"));
-    const valueNow = parseInt(computedStyle.getPropertyValue("width"));
-    if (typeof valueNow === "number" && !isNaN(valueNow)) {
-      this.initialContentWidth = valueNow;
-    }
-    if (typeof max === "number" && !isNaN(max)) {
-      this.contentWidthMax = max;
-    }
-    if (typeof min === "number" && !isNaN(min)) {
-      this.contentWidthMin = min;
+  updateSize({ type, size }) {
+    const { contentEl, resizeValues } = this;
+    if (!contentEl) {
+      return;
     }
+    const resizeMin = type === "blockSize" ? "minBlockSize" : "minInlineSize";
+    const resizeMax = type === "blockSize" ? "maxBlockSize" : "maxInlineSize";
+    const clamped = resizeValues[resizeMin] && resizeValues[resizeMax] ? clamp(size, resizeValues[resizeMin], resizeValues[resizeMax]) : size;
+    const rounded = Math.round(clamped);
+    this.resizeValues = {
+      ...resizeValues,
+      [type]: rounded
+    };
+    contentEl.style[type] = size !== null ? `${rounded}px` : null;
   }
-  updateHeights(computedStyle) {
-    const max = parseInt(computedStyle.getPropertyValue("max-height"));
-    const min = parseInt(computedStyle.getPropertyValue("min-height"));
-    const valueNow = parseInt(computedStyle.getPropertyValue("height"));
-    if (typeof valueNow === "number" && !isNaN(valueNow)) {
-      this.initialContentHeight = valueNow;
-    }
-    if (typeof max === "number" && !isNaN(max)) {
-      this.contentHeightMax = max;
-    }
-    if (typeof min === "number" && !isNaN(min)) {
-      this.contentHeightMin = min;
+  cleanupInteractions() {
+    this.interaction?.unset();
+    this.updateSize({ size: null, type: "inlineSize" });
+    this.updateSize({ size: null, type: "blockSize" });
+  }
+  async setupInteractions() {
+    this.cleanupInteractions();
+    const { el, contentEl, resizable, position, collapsed, resizeHandleEl, layout } = this;
+    if (!contentEl || collapsed || !resizable || !resizeHandleEl) {
+      return;
     }
+    await this.el.componentOnReady();
+    const { inlineSize, minInlineSize, blockSize, minBlockSize, maxInlineSize, maxBlockSize } = window.getComputedStyle(contentEl);
+    const values = {
+      inlineSize: getStylePixelValue(inlineSize),
+      blockSize: getStylePixelValue(blockSize),
+      minInlineSize: getStylePixelValue(minInlineSize),
+      minBlockSize: getStylePixelValue(minBlockSize),
+      maxInlineSize: getStylePixelValue(maxInlineSize) || window.innerWidth,
+      maxBlockSize: getStylePixelValue(maxBlockSize) || window.innerHeight
+    };
+    this.resizeValues = values;
+    const rtl = getElementDir(el) === "rtl";
+    this.interaction = interact(contentEl, { context: el.ownerDocument }).resizable({
+      edges: {
+        top: position === "end" && layout === "horizontal" ? resizeHandleEl : false,
+        right: position === (rtl ? "end" : "start") && layout === "vertical" ? resizeHandleEl : false,
+        bottom: position === "start" && layout === "horizontal" ? resizeHandleEl : false,
+        left: position === (rtl ? "start" : "end") && layout === "vertical" ? resizeHandleEl : false
+      },
+      modifiers: [
+        interact.modifiers.restrictSize({
+          min: {
+            width: values.minInlineSize,
+            height: values.minBlockSize
+          },
+          max: {
+            width: values.maxInlineSize,
+            height: values.maxBlockSize
+          }
+        })
+      ],
+      listeners: {
+        resizestart: () => {
+          this.calciteInternalShellPanelResizeStart.emit();
+        },
+        resizeend: () => {
+          this.calciteInternalShellPanelResizeEnd.emit();
+        },
+        move: ({ rect }) => {
+          const isBlock = layout === "horizontal";
+          this.updateSize({
+            size: isBlock ? rect.height : rect.width,
+            type: isBlock ? "blockSize" : "inlineSize"
+          });
+        }
+      }
+    });
   }
   storeContentEl(contentEl) {
     this.contentEl = contentEl;
   }
-  getKeyAdjustedSize(event) {
-    const { key } = event;
-    const { el, step, stepMultiplier, layout, contentWidthMin, contentWidthMax, initialContentWidth, initialContentHeight, contentHeightMin, contentHeightMax, position } = this;
-    const multipliedStep = step * stepMultiplier;
-    const MOVEMENT_KEYS = [
-      "ArrowUp",
-      "ArrowDown",
-      "ArrowLeft",
-      "ArrowRight",
-      "Home",
-      "End",
-      "PageUp",
-      "PageDown"
-    ];
-    if (MOVEMENT_KEYS.indexOf(key) > -1) {
-      event.preventDefault();
-    }
-    const dir = getElementDir(el);
-    const horizontalKeys = ["ArrowLeft", "ArrowRight"];
-    const verticalKeys = ["ArrowDown", "ArrowUp"];
-    const directionFactor = dir === "rtl" && horizontalKeys.includes(key) ? -1 : 1;
-    const increaseKeys = layout === "horizontal" ? position === "end" ? key === verticalKeys[1] || key === horizontalKeys[0] : key === verticalKeys[0] || key === horizontalKeys[1] : key === verticalKeys[1] || (position === "end" ? key === horizontalKeys[0] : key === horizontalKeys[1]);
-    if (increaseKeys) {
-      const stepValue = event.shiftKey ? multipliedStep : step;
-      return layout === "horizontal" ? initialContentHeight + directionFactor * stepValue : initialContentWidth + directionFactor * stepValue;
-    }
-    const decreaseKeys = layout === "horizontal" ? position === "end" ? key === verticalKeys[0] || key === horizontalKeys[0] : key === verticalKeys[1] || key === horizontalKeys[1] : key === verticalKeys[0] || (position === "end" ? key === horizontalKeys[1] : key === horizontalKeys[0]);
-    if (decreaseKeys) {
-      const stepValue = event.shiftKey ? multipliedStep : step;
-      return layout === "horizontal" ? initialContentHeight - directionFactor * stepValue : initialContentWidth - directionFactor * stepValue;
-    }
-    if (key === "Home" && layout === "horizontal" && typeof contentHeightMin === "number") {
-      return contentHeightMin;
-    }
-    if (key === "Home" && layout === "vertical" && typeof contentWidthMin === "number") {
-      return contentWidthMin;
-    }
-    if (key === "End" && layout === "horizontal" && typeof contentHeightMax === "number") {
-      return contentHeightMax;
-    }
-    if (key === "End" && layout === "vertical" && typeof contentWidthMax === "number") {
-      return contentWidthMax;
-    }
-    if (key === "PageDown") {
-      return layout === "horizontal" ? initialContentHeight - multipliedStep : initialContentWidth - multipliedStep;
-    }
-    if (key === "PageUp") {
-      return layout === "horizontal" ? initialContentHeight + multipliedStep : initialContentWidth + multipliedStep;
-    }
-    return null;
-  }
-  initialKeydownWidth(event) {
-    this.setInitialContentWidth();
-    const width = this.getKeyAdjustedSize(event);
-    if (typeof width === "number") {
-      this.setContentWidth(width);
-    }
-  }
-  initialKeydownHeight(event) {
-    this.setInitialContentHeight();
-    const height = this.getKeyAdjustedSize(event);
-    if (typeof height === "number") {
-      this.setContentHeight(height);
-    }
-  }
-  separatorKeyDown(event) {
-    if (this.layout === "horizontal") {
-      this.initialKeydownHeight(event);
-    } else {
-      this.initialKeydownWidth(event);
-    }
-  }
-  setInitialContentHeight() {
-    this.initialContentHeight = this.contentEl?.getBoundingClientRect().height;
-  }
-  setInitialContentWidth() {
-    this.initialContentWidth = this.contentEl?.getBoundingClientRect().width;
-  }
-  connectSeparator(separatorEl) {
-    this.disconnectSeparator();
-    this.separatorEl = separatorEl;
-    separatorEl?.addEventListener("pointerdown", this.separatorPointerDown);
-  }
-  disconnectSeparator() {
-    this.separatorEl?.removeEventListener("pointerdown", this.separatorPointerDown);
+  setResizeHandleEl(el) {
+    this.resizeHandleEl = el;
+    this.setupInteractions();
   }
   setActionBarsLayout(actionBars) {
     actionBars.forEach((actionBar) => actionBar.layout = this.layout);
@@ -267,17 +219,17 @@ class ShellPanel extends LitElement {
   handleHeaderSlotChange(event) {
     this.hasHeader = slotChangeHasAssignedElement(event);
   }
-  // #endregion
-  // #region Rendering
+  getResizeIcon() {
+    const { layout } = this;
+    return layout === "horizontal" ? "drag-resize-vertical" : "drag-resize-horizontal";
+  }
   renderHeader() {
     return keyed("header", html`<div class=${safeClassMap(CSS.contentHeader)} .hidden=${!this.hasHeader}><slot name=${SLOTS.header} @slotchange=${this.handleHeaderSlotChange}></slot></div>`);
   }
   render() {
-    const { collapsed, position, initialContentWidth, initialContentHeight, contentWidth, contentWidthMax, contentWidthMin, contentHeight, contentHeightMax, contentHeightMin, resizable, layout, displayMode } = this;
+    const { collapsed, position, resizable, layout, displayMode, resizeValues } = this;
     const dir = getElementDir(this.el);
-    const allowResizing = displayMode !== "float-content" && displayMode !== "float" && resizable;
-    const style = allowResizing ? layout === "horizontal" ? contentHeight ? { height: `${contentHeight}px` } : null : contentWidth ? { width: `${contentWidth}px` } : null : null;
-    const separatorNode = !collapsed && allowResizing ? keyed("separator", html`<div .ariaLabel=${this.messages.resize} .ariaOrientation=${layout === "horizontal" ? "vertical" : "horizontal"} .ariaValueMax=${layout == "horizontal" ? contentHeightMax : contentWidthMax} .ariaValueMin=${layout == "horizontal" ? contentHeightMin : contentWidthMin} .ariaValueNow=${layout == "horizontal" ? contentHeight ?? initialContentHeight : contentWidth ?? initialContentWidth} class=${safeClassMap(CSS.separator)} @keydown=${this.separatorKeyDown} role=separator tabindex=0 touch-action=none ${ref(this.connectSeparator)}></div>`) : null;
+    const separatorNode = !collapsed && resizable ? keyed("resize-handle", html`<div .ariaLabel=${this.messages.resize} .ariaOrientation=${layout === "horizontal" ? "vertical" : "horizontal"} .ariaValueMax=${layout == "horizontal" ? resizeValues.maxBlockSize : resizeValues.maxInlineSize} .ariaValueMin=${layout == "horizontal" ? resizeValues.minBlockSize : resizeValues.minInlineSize} .ariaValueNow=${layout == "horizontal" ? 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;
     const getAnimationDir = () => {
       if (layout === "horizontal") {
         return position === "start" ? CSS_UTILITY.calciteAnimateInDown : CSS_UTILITY.calciteAnimateInUp;
@@ -286,7 +238,7 @@ class ShellPanel extends LitElement {
         return isStart ? CSS_UTILITY.calciteAnimateInLeft : CSS_UTILITY.calciteAnimateInRight;
       }
     };
-    const contentNode = keyed("content", html`<div class=${safeClassMap({
+    const contentNode = html`<div class=${safeClassMap(CSS.contentContainer)}>${keyed("content", html`<div class=${safeClassMap({
       [CSS_UTILITY.rtl]: dir === "rtl",
       [CSS.content]: true,
       [CSS.contentOverlay]: displayMode === "overlay",
@@ -295,8 +247,8 @@ class ShellPanel extends LitElement {
       [getAnimationDir()]: displayMode === "overlay",
       [getDimensionClass("width", this.width, this.widthScale)]: !!(this.width || this.widthScale),
       [getDimensionClass("height", this.height, this.heightScale)]: !!(this.height || this.heightScale)
-    })} .hidden=${collapsed} style=${safeStyleMap(style)} ${ref(this.storeContentEl)}>${this.renderHeader()}<div class=${safeClassMap(CSS.contentBody)}><slot></slot></div>${separatorNode}</div>`);
-    const actionBarNode = keyed("action-bar", html`<slot name=${SLOTS.actionBar} @slotchange=${this.handleActionBarSlotChange}></slot>`);
+    })} .hidden=${collapsed} ${ref(this.storeContentEl)}>${this.renderHeader()}<div class=${safeClassMap(CSS.contentBody)}><slot></slot></div>${separatorNode}</div>`)}</div>`;
+    const actionBarNode = keyed("action-bar-container", html`<div class=${safeClassMap(CSS.actionBarContainer)}><slot name=${SLOTS.actionBar} @slotchange=${this.handleActionBarSlotChange}></slot></div>`);
     const mainNodes = [actionBarNode, contentNode];
     if (position === "end") {
       mainNodes.reverse();

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

@@ -1 +1,2 @@
+import "../calcite-icon/index.js";
 export * from "./customElement.js";

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

@@ -1 +1,2 @@
+import "../calcite-icon/index.js";
 export * from "./customElement.js";

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

@@ -1 +1,9 @@
 export type DisplayMode = "dock" | "float" | "overlay" | "float-content" | "float-all";
+export interface ResizeValues {
+    inlineSize: number;
+    blockSize: number;
+    minInlineSize: number;
+    minBlockSize: number;
+    maxInlineSize: number;
+    maxBlockSize: number;
+}

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

@@ -1,5 +1,7 @@
 export declare const CSS: {
     container: string;
+    actionBarContainer: string;
+    contentContainer: string;
     content: string;
     contentHeader: string;
     contentBody: string;
@@ -7,8 +9,9 @@ export declare const CSS: {
     float: string;
     floatAll: string;
     floatContent: string;
+    resizeHandle: string;
+    resizeHandleBar: string;
     height: string;
-    separator: string;
 };
 export declare const SLOTS: {
     actionBar: string;