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

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

@@ -1,18 +1,21 @@
-import { C as CSS_UTILITY, a as resizeShiftStep, b as resizeStep, c as customElement } from "../../chunks/runtime.js";
-import { ref } from "lit/directives/ref.js";
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0 */
+import { C as CSS_UTILITY, b as resizeShiftStep, d as resizeStep, c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit/directives/keyed.js";
-import { i as interact } from "../../chunks/interact.min.js";
+import { u as useSizeOverride, i as interact } from "../../chunks/useSizeOverride.js";
 import { css, html } from "lit";
 import { LitElement, createEvent, setAttribute, safeClassMap } from "@arcgis/lumina";
-import { g as getElementDir, k as getStylePixelValue, l as ensureId } from "../../chunks/dom.js";
+import { createRef, ref } from "lit/directives/ref.js";
+import { A as ensureId, g as getElementDir, a as getStylePixelValue } from "../../chunks/dom.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { t as toggleOpenClose } from "../../chunks/openCloseComponent.js";
 import { g as getDimensionClass } from "../../chunks/dynamicClasses.js";
-import { c as clamp } from "../../chunks/math.js";
 import { u as useT9n } from "../../chunks/useT9n.js";
 import { u as usePreventDocumentScroll } from "../../chunks/usePreventDocumentScroll.js";
 import { u as useFocusTrap } from "../../chunks/useFocusTrap.js";
 import { u as useSetFocus } from "../../chunks/useSetFocus.js";
+import { u as useTopLayer } from "../../chunks/useTopLayer.js";
 const CSS = {
   scrim: "scrim",
   container: "container",
@@ -30,10 +33,11 @@ const ICONS = {
   dragVertical: "drag-resize-vertical",
   dragHorizontal: "drag-resize-horizontal"
 };
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}:host{position:absolute;inset:0;display:flex;visibility:hidden!important;--calcite-sheet-scrim-background-internal: rgba(0, 0, 0, .85);--calcite-scrim-shadow-block-start-internal: 0 4px 8px -1px rgba(0, 0, 0, .08), 0 2px 4px -1px rgba(0, 0, 0, .04);--calcite-scrim-shadow-block-end-internal: 0 -4px 8px -1px rgba(0, 0, 0, .08), 0 -2px 4px -1px rgba(0, 0, 0, .04);--calcite-scrim-shadow-inline-start-internal: 4px 0 8px -1px rgba(0, 0, 0, .08), 2px 0 4px -1px rgba(0, 0, 0, .04);--calcite-scrim-shadow-inline-end-internal: -4px 0 8px -1px rgba(0, 0, 0, .08), -2px 0 4px -1px rgba(0, 0, 0, .04)}:host([embedded]){z-index:var(--calcite-z-index-overlay)}.calcite--rtl{--calcite-scrim-shadow-inline-start-internal: -4px 0 8px -1px rgba(0, 0, 0, .08), -2px 0 4px -1px rgba(0, 0, 0, .04);--calcite-scrim-shadow-inline-end-internal: 4px 0 8px -1px rgba(0, 0, 0, .08), 2px 0 4px -1px rgba(0, 0, 0, .04)}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.container{visibility:hidden;position:fixed;box-sizing:border-box;display:flex;opacity:0;color:var(--calcite-sheet-text-color, var(--calcite-color-text-2));transition:visibility 0ms linear var(--calcite-internal-animation-timing-medium),opacity var(--calcite-internal-animation-timing-medium) cubic-bezier(.215,.44,.42,.88)}:host([embedded]) .container{z-index:var(--calcite-z-index-overlay)}:host([position=inline-start]) .container{justify-content:flex-start;inset-block:0;inset-inline:0 auto;--calcite-sheet-hidden-position-internal: translate3d(-1rem, 0, 0)}:host([position=inline-end]) .container{justify-content:flex-end;inset-block:0;inset-inline:auto 0;--calcite-sheet-hidden-position-internal: translate3d(1rem, 0, 0)}:host([position=block-start]) .container{align-items:flex-start;inset-block:0 auto;inset-inline:0;--calcite-sheet-hidden-position-internal: translate3d(0, -1rem, 0)}:host([position=block-end]) .container{align-items:flex-end;inset-block:auto 0;inset-inline:0;--calcite-sheet-hidden-position-internal: translate3d(0, 1rem, 0)}:host([display-mode=float]) .content{--tw-shadow: 0 2px 12px -4px rgba(0, 0, 0, .2), 0 2px 4px -2px rgba(0, 0, 0, .16);--tw-shadow-colored: 0 2px 12px -4px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--calcite-sheet-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([display-mode=overlay][position=inline-start]) .container{box-shadow:var(--calcite-scrim-shadow-inline-start-internal)}:host([display-mode=overlay][position=inline-end]) .container{box-shadow:var(--calcite-scrim-shadow-inline-end-internal)}:host([display-mode=overlay][position=block-start]) .container{box-shadow:var(--calcite-scrim-shadow-block-start-internal)}:host([display-mode=overlay][position=block-end]) .container{box-shadow:var(--calcite-scrim-shadow-block-end-internal)}:host([position^=inline]) .content{inline-size:var(--calcite-sheet-width-internal);max-inline-size:var(--calcite-sheet-max-width-internal);min-inline-size:var(--calcite-sheet-min-width-internal)}:host([position^=block]) .content{block-size:var(--calcite-sheet-height-internal);max-block-size:var(--calcite-sheet-max-height-internal);min-block-size:var(--calcite-sheet-min-height-internal)}:host([position^=inline]) .width-s{--calcite-sheet-width-internal: var(--calcite-sheet-width, 15vw);--calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 360px);--calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 260px)}:host([position^=inline]) .width-m{--calcite-sheet-width-internal: var(--calcite-sheet-width, 25vw);--calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 420px);--calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 300px)}:host([position^=inline]) .width-l{--calcite-sheet-width-internal: var(--calcite-sheet-width, 45vw);--calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 680px);--calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 340px)}:host([position^=block]) .height-s{--calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 160px);--calcite-sheet-height-internal: var(--calcite-sheet-height, 30vh);--calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 30vh)}:host([position^=block]) .height-m{--calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 200px);--calcite-sheet-height-internal: var(--calcite-sheet-height, 45vh);--calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 50vh)}:host([position^=block]) .height-l{--calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 240px);--calcite-sheet-height-internal: var(--calcite-sheet-height, 60vh);--calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 70vh)}.scrim{--calcite-scrim-background: var(--calcite-sheet-scrim-background, var(--calcite-sheet-scrim-background-internal));position:fixed;inset:0;z-index:calc(var(--calcite-z-index) * -1);display:flex;overflow:hidden}[popover]{padding:0;margin:0;border:none;background-color:transparent;position:fixed;display:flex;inline-size:100%;block-size:100%}[popover]:popover-open{display:flex}:host([opened]){visibility:visible!important}.content{position:relative;box-sizing:border-box;display:flex;max-inline-size:100%;padding:0;background-color:var(--calcite-sheet-background-color, var(--calcite-color-foreground-1));max-block-size:100%;visibility:hidden;transition:transform var(--calcite-internal-animation-timing-medium) cubic-bezier(.215,.44,.42,.88),visibility 0ms linear var(--calcite-internal-animation-timing-medium),opacity var(--calcite-internal-animation-timing-medium) cubic-bezier(.215,.44,.42,.88);transform:var(--calcite-sheet-hidden-position-internal)}:host([embedded]) .content{z-index:var(--calcite-z-index-modal)}.content-container{position:relative;display:flex;max-block-size:100%;max-inline-size:100%;flex:1 1 0%;overflow:hidden}.container--open .content{transform:translateZ(0)}:host([display-mode=float]) .content,:host([display-mode=float]) .container,:host([display-mode=float]) .content-container{border-radius:var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round))}:host([display-mode=float]) .container{padding:var(--calcite-spacing-md)}.container--open{visibility:visible;opacity:1;transition-delay:0ms}.container--open .content{pointer-events:auto;visibility:visible;opacity:1;transition:transform var(--calcite-internal-animation-timing-medium) cubic-bezier(.215,.44,.42,.88),visibility 0ms linear,opacity var(--calcite-internal-animation-timing-medium) cubic-bezier(.215,.44,.42,.88),max-inline-size var(--calcite-internal-animation-timing-medium) cubic-bezier(.215,.44,.42,.88),max-block-size var(--calcite-internal-animation-timing-medium) cubic-bezier(.215,.44,.42,.88);transition-delay:0ms}:host([position=inline-start]) .content,:host([position=inline-end]) .content{block-size:100%}:host([position=inline-start]) .content{flex-direction:row}:host([position=inline-end]) .content{flex-direction:row-reverse}:host([position=block-start]) .content,:host([position=block-end]) .content{inline-size:100%}:host([position=block-start]) .content{flex-direction:column}:host([position=block-end]) .content{flex-direction:column-reverse}:host([resizable][position=inline-start]) .content{padding-inline-end:var(--calcite-size-fixed-sm-plus)}:host([resizable][position=inline-end]) .content{padding-inline-start:var(--calcite-size-fixed-sm-plus)}:host([resizable][position=block-start]) .content{padding-block-end:var(--calcite-size-fixed-sm-plus)}:host([resizable][position=block-end]) .content{padding-block-start:var(--calcite-size-fixed-sm-plus)}.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-sheet-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-sheet-resize-icon-color, var(--calcite-color-text-1));background-color:var(--calcite-sheet-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-sheet-resize-icon-color, var(--calcite-color-border-input));background-color:var(--calcite-sheet-resize-background-color, var(--calcite-color-background))}.resize-handle:focus .resize-handle-bar{outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)));outline-color:transparent;outline:var(--calcite-border-width-md) solid var(--calcite-internal-color-focus)}:host([position=inline-start]) .resize-handle{inline-size:var(--calcite-size-fixed-xxl);inset-inline-end:var(--calcite-internal-sheet-resize-handle-offset);block-size:100%}:host([position=inline-start]) .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-sheet-border-color, var(--calcite-color-border-3))}:host([position=inline-start]):host([display-mode=float]) .resize-handle-bar{border-start-end-radius:var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round));border-end-end-radius:var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round))}:host([position=inline-end]) .resize-handle{inline-size:var(--calcite-size-fixed-xxl);inset-inline-start:var(--calcite-internal-sheet-resize-handle-offset);block-size:100%}:host([position=inline-end]) .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-sheet-border-color, var(--calcite-color-border-3))}:host([position=inline-end]):host([display-mode=float]) .resize-handle-bar{border-start-start-radius:.25rem;border-end-start-radius:.25rem}:host([position=block-start]) .resize-handle{block-size:var(--calcite-size-fixed-xxl);inline-size:100%;inset-block-end:var(--calcite-internal-sheet-resize-handle-offset)}:host([position=block-start]) .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-sheet-border-color, var(--calcite-color-border-3))}:host([position=block-start]):host([display-mode=float]) .resize-handle-bar{border-end-end-radius:.25rem;border-end-start-radius:.25rem}:host([position=block-end]) .resize-handle{block-size:var(--calcite-size-fixed-xxl);inline-size:100%;inset-block-start:var(--calcite-internal-sheet-resize-handle-offset)}:host([position=block-end]) .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-sheet-border-color, var(--calcite-color-border-3))}:host([position=block-end]):host([display-mode=float]) .resize-handle-bar{border-start-start-radius:var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round));border-start-end-radius:var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round))}:host([position]) .container--embedded{pointer-events:auto;position:absolute;inline-size:100%;max-inline-size:100%;min-inline-size:100%;block-size:100%;max-block-size:100%;min-block-size:100%}:host([position]) .container--embedded calcite-scrim{position:absolute}:host([hidden]){display:none}[hidden]{display:none}`;
+const styles = css`:host{position:absolute;inset:0;display:flex;visibility:hidden!important;--calcite-sheet-scrim-background-internal: rgba(0, 0, 0, .85);--calcite-scrim-shadow-block-start-internal: 0 4px 8px -1px rgba(0, 0, 0, .08), 0 2px 4px -1px rgba(0, 0, 0, .04);--calcite-scrim-shadow-block-end-internal: 0 -4px 8px -1px rgba(0, 0, 0, .08), 0 -2px 4px -1px rgba(0, 0, 0, .04);--calcite-scrim-shadow-inline-start-internal: 4px 0 8px -1px rgba(0, 0, 0, .08), 2px 0 4px -1px rgba(0, 0, 0, .04);--calcite-scrim-shadow-inline-end-internal: -4px 0 8px -1px rgba(0, 0, 0, .08), -2px 0 4px -1px rgba(0, 0, 0, .04)}:host([embedded]){z-index:var(--calcite-z-index-overlay)}.calcite--rtl{--calcite-scrim-shadow-inline-start-internal: -4px 0 8px -1px rgba(0, 0, 0, .08), -2px 0 4px -1px rgba(0, 0, 0, .04);--calcite-scrim-shadow-inline-end-internal: 4px 0 8px -1px rgba(0, 0, 0, .08), 2px 0 4px -1px rgba(0, 0, 0, .04)}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.container{visibility:hidden;position:fixed;box-sizing:border-box;display:flex;opacity:0;color:var(--calcite-sheet-text-color, var(--calcite-color-text-2));transition:visibility 0ms linear var(--calcite-internal-animation-timing-medium),opacity var(--calcite-internal-animation-timing-medium) cubic-bezier(.215,.44,.42,.88)}:host([top-layer-disabled]) .container,:host([embedded]) .container{z-index:var(--calcite-z-index-overlay)}:host([position=inline-start]) .container{justify-content:flex-start;inset-block:0;inset-inline:0 auto;--calcite-sheet-hidden-position-internal: translate3d(-1rem, 0, 0)}:host([position=inline-end]) .container{justify-content:flex-end;inset-block:0;inset-inline:auto 0;--calcite-sheet-hidden-position-internal: translate3d(1rem, 0, 0)}:host([position=block-start]) .container{align-items:flex-start;inset-block:0 auto;inset-inline:0;--calcite-sheet-hidden-position-internal: translate3d(0, -1rem, 0)}:host([position=block-end]) .container{align-items:flex-end;inset-block:auto 0;inset-inline:0;--calcite-sheet-hidden-position-internal: translate3d(0, 1rem, 0)}:host([display-mode=float]) .content{--tw-shadow: 0 2px 12px -4px rgba(0, 0, 0, .2), 0 2px 4px -2px rgba(0, 0, 0, .16);--tw-shadow-colored: 0 2px 12px -4px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--calcite-sheet-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([display-mode=overlay][position=inline-start]) .container{box-shadow:var(--calcite-scrim-shadow-inline-start-internal)}:host([display-mode=overlay][position=inline-end]) .container{box-shadow:var(--calcite-scrim-shadow-inline-end-internal)}:host([display-mode=overlay][position=block-start]) .container{box-shadow:var(--calcite-scrim-shadow-block-start-internal)}:host([display-mode=overlay][position=block-end]) .container{box-shadow:var(--calcite-scrim-shadow-block-end-internal)}:host([position^=inline]) .content{inline-size:var(--calcite-sheet-width-internal);max-inline-size:var(--calcite-sheet-max-width-internal);min-inline-size:var(--calcite-sheet-min-width-internal)}:host([position^=block]) .content{block-size:var(--calcite-sheet-height-internal);max-block-size:var(--calcite-sheet-max-height-internal);min-block-size:var(--calcite-sheet-min-height-internal)}:host([position^=inline]) .width-s{--calcite-sheet-width-internal: var(--calcite-sheet-width, 15vw);--calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 360px);--calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 260px)}:host([position^=inline]) .width-m{--calcite-sheet-width-internal: var(--calcite-sheet-width, 25vw);--calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 420px);--calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 300px)}:host([position^=inline]) .width-l{--calcite-sheet-width-internal: var(--calcite-sheet-width, 45vw);--calcite-sheet-max-width-internal: var(--calcite-sheet-max-width, 680px);--calcite-sheet-min-width-internal: var(--calcite-sheet-min-width, 340px)}:host([position^=block]) .height-s{--calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 160px);--calcite-sheet-height-internal: var(--calcite-sheet-height, 30vh);--calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 30vh)}:host([position^=block]) .height-m{--calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 200px);--calcite-sheet-height-internal: var(--calcite-sheet-height, 45vh);--calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 50vh)}:host([position^=block]) .height-l{--calcite-sheet-min-height-internal: var(--calcite-sheet-min-height, 240px);--calcite-sheet-height-internal: var(--calcite-sheet-height, 60vh);--calcite-sheet-max-height-internal: var(--calcite-sheet-max-height, 70vh)}.scrim{--calcite-scrim-background: var(--calcite-sheet-scrim-background, var(--calcite-sheet-scrim-background-internal));position:fixed;inset:0;display:flex;overflow:hidden;z-index:calc(var(--calcite-z-index) * -1)}:host([top-layer-disabled]) .scrim{z-index:unset}[popover]{padding:0;margin:0;border:none;background-color:transparent;position:fixed;display:flex;inline-size:100%;block-size:100%}[popover]:popover-open{display:flex}:host([opened]){visibility:visible!important}.content{position:relative;box-sizing:border-box;display:flex;max-inline-size:100%;padding:0;background-color:var(--calcite-sheet-background-color, var(--calcite-color-foreground-1));max-block-size:100%;visibility:hidden;transition:transform var(--calcite-internal-animation-timing-medium) cubic-bezier(.215,.44,.42,.88),visibility 0ms linear var(--calcite-internal-animation-timing-medium),opacity var(--calcite-internal-animation-timing-medium) cubic-bezier(.215,.44,.42,.88);transform:var(--calcite-sheet-hidden-position-internal)}:host([top-layer-disabled]),:host([top-layer-disabled]) .content,:host([embedded]) .content{z-index:var(--calcite-z-index-modal)}.content-container{position:relative;display:flex;max-block-size:100%;max-inline-size:100%;flex:1 1 0%;overflow:hidden}.content-container ::slotted(*){block-size:auto}.container--open .content{transform:translateZ(0)}:host([display-mode=float]) .content,:host([display-mode=float]) .container,:host([display-mode=float]) .content-container{border-radius:var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round))}:host([display-mode=float]) .container{padding:var(--calcite-spacing-md)}.container--open{visibility:visible;opacity:1;transition-delay:0ms}.container--open .content{pointer-events:auto;visibility:visible;opacity:1;transition:transform var(--calcite-internal-animation-timing-medium) cubic-bezier(.215,.44,.42,.88),visibility 0ms linear,opacity var(--calcite-internal-animation-timing-medium) cubic-bezier(.215,.44,.42,.88),max-inline-size var(--calcite-internal-animation-timing-medium) cubic-bezier(.215,.44,.42,.88),max-block-size var(--calcite-internal-animation-timing-medium) cubic-bezier(.215,.44,.42,.88);transition-delay:0ms}:host([position=inline-start]) .content,:host([position=inline-end]) .content{block-size:100%}:host([position=inline-start]) .content{flex-direction:row}:host([position=inline-end]) .content{flex-direction:row-reverse}:host([position=block-start]) .content,:host([position=block-end]) .content{inline-size:100%}:host([position=block-start]) .content{flex-direction:column}:host([position=block-end]) .content{flex-direction:column-reverse}:host([resizable][position=inline-start]) .content{padding-inline-end:var(--calcite-size-fixed-sm-plus)}:host([resizable][position=inline-end]) .content{padding-inline-start:var(--calcite-size-fixed-sm-plus)}:host([resizable][position=block-start]) .content{padding-block-end:var(--calcite-size-fixed-sm-plus)}:host([resizable][position=block-end]) .content{padding-block-start:var(--calcite-size-fixed-sm-plus)}.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-sheet-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-sheet-resize-icon-color, var(--calcite-color-text-1));background-color:var(--calcite-sheet-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-sheet-resize-icon-color, var(--calcite-color-border-input));background-color:var(--calcite-sheet-resize-background-color, var(--calcite-color-background))}.resize-handle:focus .resize-handle-bar{outline-color:transparent;outline:var(--calcite-border-width-md) solid var(--calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)))}:host([position=inline-start]) .resize-handle{inline-size:var(--calcite-size-fixed-xxl);inset-inline-end:var(--calcite-internal-sheet-resize-handle-offset);block-size:100%}:host([position=inline-start]) .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-sheet-border-color, var(--calcite-color-border-3))}:host([position=inline-start]):host([display-mode=float]) .resize-handle-bar{border-start-end-radius:var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round));border-end-end-radius:var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round))}:host([position=inline-end]) .resize-handle{inline-size:var(--calcite-size-fixed-xxl);inset-inline-start:var(--calcite-internal-sheet-resize-handle-offset);block-size:100%}:host([position=inline-end]) .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-sheet-border-color, var(--calcite-color-border-3))}:host([position=inline-end]):host([display-mode=float]) .resize-handle-bar{border-start-start-radius:.25rem;border-end-start-radius:.25rem}:host([position=block-start]) .resize-handle{block-size:var(--calcite-size-fixed-xxl);inline-size:100%;inset-block-end:var(--calcite-internal-sheet-resize-handle-offset)}:host([position=block-start]) .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-sheet-border-color, var(--calcite-color-border-3))}:host([position=block-start]):host([display-mode=float]) .resize-handle-bar{border-end-end-radius:.25rem;border-end-start-radius:.25rem}:host([position=block-end]) .resize-handle{block-size:var(--calcite-size-fixed-xxl);inline-size:100%;inset-block-start:var(--calcite-internal-sheet-resize-handle-offset)}:host([position=block-end]) .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-sheet-border-color, var(--calcite-color-border-3))}:host([position=block-end]):host([display-mode=float]) .resize-handle-bar{border-start-start-radius:var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round));border-start-end-radius:var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round))}:host([position]) .container--embedded{pointer-events:auto;position:absolute;inline-size:100%;max-inline-size:100%;min-inline-size:100%;block-size:100%;max-block-size:100%;min-block-size:100%}:host([position]) .container--embedded calcite-scrim{position:absolute}:host([hidden]){display:none}[hidden]{display:none}`;
 class Sheet extends LitElement {
   constructor() {
     super();
+    this.contentRef = createRef();
     this.focusTrap = useFocusTrap({
       triggerProp: "open",
       focusTrapOptions: {
@@ -54,6 +58,7 @@ class Sheet extends LitElement {
     this._open = false;
     this.openProp = "opened";
     this.transitionProp = "opacity";
+    this.transitionRef = createRef();
     this.focusSetter = useSetFocus()(this);
     this.keyDownHandler = (event) => {
       const { defaultPrevented, key } = event;
@@ -62,6 +67,17 @@ class Sheet extends LitElement {
         this.open = false;
       }
     };
+    this.sizeOverride = useSizeOverride({
+      targetElement: this.contentRef,
+      getBounds: () => ({
+        inline: { min: this.resizeValues.minInlineSize, max: this.resizeValues.maxInlineSize },
+        block: { min: this.resizeValues.minBlockSize, max: this.resizeValues.maxBlockSize }
+      })
+    });
+    this.topLayer = useTopLayer({
+      disabledOverride: () => this.embedded,
+      target: this.transitionRef
+    })(this);
     this.resizeValues = {
       inlineSize: null,
       blockSize: null,
@@ -79,6 +95,7 @@ class Sheet extends LitElement {
     this.outsideCloseDisabled = false;
     this.position = "inline-start";
     this.resizable = false;
+    this.topLayerDisabled = false;
     this.widthScale = "m";
     this.calciteSheetBeforeClose = createEvent({ cancelable: false });
     this.calciteSheetBeforeOpen = createEvent({ cancelable: false });
@@ -87,7 +104,7 @@ class Sheet extends LitElement {
     this.listen("keydown", this.keyDownHandler);
   }
   static {
-    this.properties = { resizeValues: [16, {}, { state: true }], beforeClose: [0, {}, { attribute: false }], displayMode: [3, {}, { reflect: true }], embedded: [7, {}, { reflect: true, type: Boolean }], escapeDisabled: [7, {}, { reflect: true, type: Boolean }], focusTrapDisabled: [7, {}, { reflect: true, type: Boolean }], focusTrapOptions: [0, {}, { attribute: false }], heightScale: [3, {}, { reflect: true }], height: [3, {}, { reflect: true }], label: 1, messageOverrides: [0, {}, { attribute: false }], open: [7, {}, { reflect: true, type: Boolean }], opened: [7, {}, { reflect: true, type: Boolean }], outsideCloseDisabled: [7, {}, { reflect: true, type: Boolean }], position: [3, {}, { reflect: true }], resizable: [7, {}, { reflect: true, type: Boolean }], widthScale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }] };
+    this.properties = { resizeValues: [16, {}, { state: true }], beforeClose: [0, {}, { attribute: false }], displayMode: [3, {}, { reflect: true }], embedded: [7, {}, { reflect: true, type: Boolean }], escapeDisabled: [7, {}, { reflect: true, type: Boolean }], focusTrapDisabled: [7, {}, { reflect: true, type: Boolean }], focusTrapOptions: [0, {}, { attribute: false }], heightScale: [3, {}, { reflect: true }], height: [3, {}, { reflect: true }], label: 1, messageOverrides: [0, {}, { attribute: false }], open: [7, {}, { reflect: true, type: Boolean }], opened: [7, {}, { reflect: true, type: Boolean }], outsideCloseDisabled: [7, {}, { reflect: true, type: Boolean }], position: [3, {}, { reflect: true }], resizable: [7, {}, { reflect: true, type: Boolean }], topLayerDisabled: [7, {}, { reflect: true, type: Boolean }], widthScale: [3, {}, { reflect: true }], width: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
@@ -111,19 +128,24 @@ class Sheet extends LitElement {
     this.focusTrap.setExtraContainers(extraContainers);
     this.focusTrap.updateContainerElements();
   }
+  async updateSize(size) {
+    this.updateSizeInternal(size);
+  }
   connectedCallback() {
     super.connectedCallback();
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
     this.setupInteractions();
   }
   willUpdate(changes) {
-    if (changes.has("opened") && (this.hasUpdated || this.opened !== false)) {
+    if (changes.has("opened") && (this.hasUpdated || this.opened !== false) && this.transitionRef.value) {
       toggleOpenClose(this);
-      this.handlePopover();
     }
     if (changes.has("open") && (this.hasUpdated || this.open !== false) || changes.has("position") && (this.hasUpdated || this.position !== "inline-start") || changes.has("resizable") && (this.hasUpdated || this.resizable !== false)) {
       this.setupInteractions();
     }
+    if (this.contentRef.value) {
+      this.contentId = ensureId(this.contentRef.value);
+    }
   }
   disconnectedCallback() {
     super.disconnectedCallback();
@@ -131,17 +153,6 @@ class Sheet extends LitElement {
     this.embedded = false;
     this.cleanupInteractions();
   }
-  async handlePopover() {
-    await this.componentOnReady();
-    if (this.embedded || !this.transitionEl) {
-      return;
-    }
-    if (this.opened) {
-      this.transitionEl.showPopover();
-    } else {
-      this.transitionEl.hidePopover();
-    }
-  }
   async setOpenState(value) {
     if (this.beforeClose && !value) {
       try {
@@ -160,93 +171,85 @@ class Sheet extends LitElement {
     const { position } = this;
     return position === "block-start" || position === "block-end" ? ICONS.dragVertical : ICONS.dragHorizontal;
   }
-  getContentElDOMRect() {
-    return this.contentEl.getBoundingClientRect();
+  getContentRefDOMRect() {
+    return this.contentRef.value?.getBoundingClientRect();
   }
   handleKeyDown(event) {
     const { key, defaultPrevented, shiftKey } = event;
-    const { position, resizable, contentEl, el, resizeValues: { maxBlockSize, maxInlineSize, minBlockSize, minInlineSize } } = this;
+    const { contentRef, position, resizable, el, resizeValues: { maxBlockSize, maxInlineSize, minBlockSize, minInlineSize } } = this;
     const arrowKeys = position === "block-end" || position === "block-start" ? ["ArrowUp", "ArrowDown"] : ["ArrowLeft", "ArrowRight"];
     const keys = [...arrowKeys, "Home", "End"];
-    if (!resizable || !contentEl || defaultPrevented || !keys.includes(key)) {
+    if (!resizable || !contentRef.value || defaultPrevented || !keys.includes(key)) {
       return;
     }
-    const rect = this.getContentElDOMRect();
+    const rect = this.getContentRefDOMRect();
     const invertRTL = getElementDir(el) === "rtl" ? -1 : 1;
     const stepValue = shiftKey ? resizeShiftStep : resizeStep;
     switch (key) {
       case "ArrowUp":
-        this.updateSize({
-          size: rect.height + (position === "block-end" ? stepValue : -stepValue),
-          type: "blockSize"
+        this.updateSizeInternal({
+          block: rect.height + (position === "block-end" ? stepValue : -stepValue)
         });
         event.preventDefault();
         break;
       case "ArrowDown":
-        this.updateSize({
-          size: rect.height + (position === "block-end" ? -stepValue : stepValue),
-          type: "blockSize"
+        this.updateSizeInternal({
+          block: rect.height + (position === "block-end" ? -stepValue : stepValue)
         });
         event.preventDefault();
         break;
       case "ArrowLeft":
-        this.updateSize({
-          size: rect.width + (position === "inline-end" ? stepValue : -stepValue) * invertRTL,
-          type: "inlineSize"
+        this.updateSizeInternal({
+          inline: rect.width + (position === "inline-end" ? stepValue : -stepValue) * invertRTL
         });
         event.preventDefault();
         break;
       case "ArrowRight":
-        this.updateSize({
-          size: rect.width + (position === "inline-end" ? -stepValue : stepValue) * invertRTL,
-          type: "inlineSize"
+        this.updateSizeInternal({
+          inline: rect.width + (position === "inline-end" ? -stepValue : stepValue) * invertRTL
         });
         event.preventDefault();
         break;
       case "Home":
-        this.updateSize({
-          size: position === "block-start" || position === "block-end" ? minBlockSize : minInlineSize,
-          type: position === "block-start" || position === "block-end" ? "blockSize" : "inlineSize"
-        });
+        this.updateSizeInternal(position === "block-start" || position === "block-end" ? { block: minBlockSize } : { inline: minInlineSize });
         event.preventDefault();
         break;
       case "End":
-        this.updateSize({
-          size: position === "block-start" || position === "block-end" ? maxBlockSize : maxInlineSize,
-          type: position === "block-start" || position === "block-end" ? "blockSize" : "inlineSize"
-        });
+        this.updateSizeInternal(position === "block-start" || position === "block-end" ? { block: maxBlockSize } : { inline: maxInlineSize });
         event.preventDefault();
         break;
     }
   }
-  updateSize({ type, size }) {
-    const { contentEl, resizeValues } = this;
-    if (!contentEl) {
+  updateSizeInternal(size) {
+    if (!this.contentRef.value) {
       return;
     }
-    const resizeMin = type === "blockSize" ? "minBlockSize" : "minInlineSize";
-    const resizeMax = type === "blockSize" ? "maxBlockSize" : "maxInlineSize";
-    const clamped = resizeValues[resizeMin] && resizeValues[resizeMax] ? clamp(size, resizeValues[resizeMin], resizeValues[resizeMax]) : size;
-    const rounded = Math.round(clamped);
+    const appliedSize = this.sizeOverride.resize(size);
     this.resizeValues = {
-      ...resizeValues,
-      [type]: rounded
+      ...this.resizeValues,
+      ...appliedSize.inline !== void 0 && {
+        inlineSize: appliedSize.inline
+      },
+      ...appliedSize.block !== void 0 && {
+        blockSize: appliedSize.block
+      }
     };
-    contentEl.style[type] = size !== null ? `${rounded}px` : null;
   }
   cleanupInteractions() {
     this.interaction?.unset();
-    this.updateSize({ size: null, type: "inlineSize" });
-    this.updateSize({ size: null, type: "blockSize" });
+    this.updateSizeInternal({
+      inline: null,
+      block: null
+    });
   }
   async setupInteractions() {
     this.cleanupInteractions();
-    const { el, contentEl, resizable, position, open, resizeHandleEl } = this;
-    if (!contentEl || !open || !resizable || !resizeHandleEl) {
+    const { contentRef, el, resizable, position, open, resizeHandleEl } = this;
+    if (!contentRef.value || !open || !resizable || !resizeHandleEl) {
       return;
     }
     await this.el.componentOnReady();
-    const { inlineSize, minInlineSize, blockSize, minBlockSize, maxInlineSize, maxBlockSize } = window.getComputedStyle(contentEl);
+    const { inlineSize, minInlineSize, blockSize, minBlockSize, maxInlineSize, maxBlockSize } = window.getComputedStyle(contentRef.value);
     const values = {
       inlineSize: getStylePixelValue(inlineSize),
       blockSize: getStylePixelValue(blockSize),
@@ -257,7 +260,7 @@ class Sheet extends LitElement {
     };
     this.resizeValues = values;
     const rtl = getElementDir(el) === "rtl";
-    this.interaction = interact(contentEl, { context: el.ownerDocument }).resizable({
+    this.interaction = interact(contentRef.value, { context: el.ownerDocument }).resizable({
       edges: {
         top: position === "block-end" ? resizeHandleEl : false,
         right: position === (rtl ? "inline-end" : "inline-start") ? resizeHandleEl : false,
@@ -279,16 +282,14 @@ class Sheet extends LitElement {
       listeners: {
         move: ({ rect }) => {
           const isBlock = position === "block-start" || position === "block-end";
-          this.updateSize({
-            size: isBlock ? rect.height : rect.width,
-            type: isBlock ? "blockSize" : "inlineSize"
-          });
+          this.updateSizeInternal(isBlock ? { block: rect.height } : { inline: rect.width });
         }
       }
     });
   }
   onBeforeOpen() {
     this.calciteSheetBeforeOpen.emit();
+    this.topLayer.show();
   }
   onOpen() {
     if (this.focusTrapDisabled) {
@@ -303,22 +304,12 @@ class Sheet extends LitElement {
   onClose() {
     this.calciteSheetClose.emit();
     this.focusTrap.deactivate();
+    this.topLayer.hide();
   }
   setResizeHandleEl(el) {
     this.resizeHandleEl = el;
     this.setupInteractions();
   }
-  setContentEl(el) {
-    this.contentEl = el;
-    this.contentId = ensureId(el);
-  }
-  setTransitionEl(el) {
-    if (!el) {
-      return;
-    }
-    this.transitionEl = el;
-    this.handlePopover();
-  }
   handleOutsideClose() {
     if (this.outsideCloseDisabled) {
       return;
@@ -343,7 +334,7 @@ class Sheet extends LitElement {
       [CSS_UTILITY.rtl]: dir === "rtl",
       [getDimensionClass("width", this.width, this.widthScale)]: !!(this.width || this.widthScale),
       [getDimensionClass("height", this.height, this.heightScale)]: !!(this.height || this.heightScale)
-    })} .popover=${!this.embedded ? "manual" : null} ${ref(this.setTransitionEl)}><calcite-scrim class=${safeClassMap(CSS.scrim)} @click=${this.handleOutsideClose}></calcite-scrim><div class=${safeClassMap(CSS.content)} id=${IDS.sheetContent} ${ref(this.setContentEl)}><div class=${safeClassMap(CSS.contentContainer)}><slot></slot></div>${resizable ? keyed("resize-handle", html`<div .ariaLabel=${this.messages.resizeEnabled} .ariaOrientation=${isBlockPosition ? "vertical" : "horizontal"} .ariaValueMax=${isBlockPosition ? resizeValues.maxBlockSize : resizeValues.maxInlineSize} .ariaValueMin=${isBlockPosition ? resizeValues.minBlockSize : resizeValues.minInlineSize} .ariaValueNow=${isBlockPosition ? resizeValues.blockSize : resizeValues.inlineSize} class=${safeClassMap(CSS.resizeHandle)} @keydown=${this.handleKeyDown} role=separator tabindex=0 touch-action=none ${ref(this.setResizeHandleEl)}><div class=${safeClassMap(CSS.resizeHandleBar)}><calcite-icon .icon=${this.getResizeIcon()} scale=s></calcite-icon></div></div>`) : null}</div></div>`;
+    })} .popover=${!this.embedded ? "manual" : null} ${ref(this.transitionRef)}><calcite-scrim class=${safeClassMap(CSS.scrim)} @click=${this.handleOutsideClose}></calcite-scrim><div class=${safeClassMap(CSS.content)} id=${IDS.sheetContent} ${ref(this.contentRef)}><div class=${safeClassMap(CSS.contentContainer)}><slot></slot></div>${resizable ? keyed("resize-handle", html`<div .ariaLabel=${this.messages.resizeEnabled} .ariaOrientation=${isBlockPosition ? "vertical" : "horizontal"} .ariaValueMax=${isBlockPosition ? resizeValues.maxBlockSize : resizeValues.maxInlineSize} .ariaValueMin=${isBlockPosition ? resizeValues.minBlockSize : resizeValues.minInlineSize} .ariaValueNow=${isBlockPosition ? resizeValues.blockSize : resizeValues.inlineSize} class=${safeClassMap(CSS.resizeHandle)} @keydown=${this.handleKeyDown} role=separator tabindex=0 touch-action=none ${ref(this.setResizeHandleEl)}><div class=${safeClassMap(CSS.resizeHandleBar)}><calcite-icon .icon=${this.getResizeIcon()} scale=s></calcite-icon></div></div>`) : null}</div></div>`;
   }
 }
 customElement("calcite-sheet", Sheet);

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

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

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

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

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

@@ -1,8 +1,8 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 
 /**
+ * @cssproperty [--calcite-shell-border-color] - Specifies the component's border color.
  * @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.
@@ -14,11 +14,11 @@ import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/
  * @slot [alerts] - A slot for adding `calcite-alert` components. When placed in this slot, the alert position will be constrained to the extent of the `calcite-shell`.
  * @slot [sheets] - A slot for adding `calcite-sheet` components. When placed in this slot, the sheet position will be constrained to the extent of the `calcite-shell`.
  */
-export declare class Shell extends LitElement {
-    /**
-     * Positions the center content behind any `calcite-shell-panel`s.
-     *
-     * @default false
-     */
-    contentBehind: boolean;
-}
+export abstract class Shell extends LitElement {
+  /**
+   * When `true`, positions the center content behind any `calcite-shell-panel`s.
+   *
+   * @default false
+   */
+  accessor contentBehind: boolean;
+}

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

@@ -1,9 +1,12 @@
+/* All material copyright ESRI, All Rights Reserved, unless otherwise specified.
+See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
+v5.0.0 */
 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 { a as slotChangeHasAssignedElement, s as slotChangeGetAssignedElements } from "../../chunks/dom.js";
-const styles = css`:host{--calcite-internal-color-focus: var( --calcite-color-focus, var(--calcite-ui-focus-color, var(--calcite-color-brand)) )}: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--2);line-height:1.375;font-weight:var(--calcite-font-weight-normal)}slot[name=panel-start]::slotted(calcite-shell-panel),slot[name=panel-end]::slotted(calcite-shell-panel){position:relative;z-index:calc(var(--calcite-z-index) + 1)}slot[name=panel-end]::slotted(calcite-shell-panel){margin-inline-start:auto}::slotted(calcite-panel),::slotted(calcite-flow){border-width:var(--calcite-border-width-sm);border-color:var(--calcite-shell-border-color, var(--calcite-color-border-3));border-inline-start-width:var(--calcite-border-width-none);border-inline-end-width:var(--calcite-border-width-none);border-style:solid}slot[name=panel-top]::slotted(calcite-shell-panel:not([display-mode^=float])),slot[name=panel-bottom]::slotted(calcite-shell-panel:not([display-mode^=float])){border-color:var(--calcite-shell-border-color, var(--calcite-color-border-3));border-inline-start-width:var(--calcite-border-width-sm);border-inline-end-width:var(--calcite-border-width-sm)}.center-content{display:flex;flex-direction:column;justify-content:space-between;block-size:100%;inline-size:100%;min-inline-size:0}.content-bottom{justify-content:flex-end}::slotted(calcite-shell-panel){flex:none;align-self:stretch}::slotted(calcite-tip-manager){position:absolute;z-index:var(--calcite-z-index-toast);box-sizing:border-box}@keyframes in-up{0%{opacity:0;transform:translate3D(0,5px,0)}to{opacity:1;transform:translateZ(0)}}::slotted(calcite-tip-manager){animation:in-up var(--calcite-internal-animation-timing-slow) ease-in-out;border-radius:.25rem;--tw-shadow: 0 6px 20px -4px rgba(0, 0, 0, .1), 0 4px 12px -2px rgba(0, 0, 0, .08);--tw-shadow-colored: 0 6px 20px -4px var(--tw-shadow-color), 0 4px 12px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);inset-block-end:.5rem;inset-inline:var(--calcite-shell-tip-spacing, 26vw)}slot[name=panel-bottom]::slotted(calcite-shell-panel){margin-block-start:auto}slot[name=panel-top]::slotted(calcite-shell-panel){margin-block-end:auto}.position-wrapper{position:absolute;pointer-events:none;inset:0}:host([hidden]){display:none}[hidden]{display:none}`;
+import { s as slotChangeHasAssignedElement, b 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 CSS = {
   main: "main",
   content: "content",

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

@@ -1,82 +1,104 @@
 /// <reference path="../../index.d.ts" />
-import { PropertyValues } from 'lit';
-import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
-import { Height, Layout, Position, Scale, Width } from '../interfaces';
-import { DisplayMode, ResizeValues } from './interfaces';
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { Height, Layout, Position, Scale, Width } from "../interfaces.js";
+import type { DisplayMode } from "./interfaces.js";
 
 /**
+ * @cssproperty [--calcite-shell-panel-background-color] - Specifies the component's background color.
+ * @cssproperty [--calcite-shell-panel-border-color] - When `displayMode` is `"float-all"`, specifies the component's border color.
+ * @cssproperty [--calcite-shell-panel-corner-radius] - When `displayMode` is `"float-all"`, specifies the component's corner radius.
+ * @cssproperty [--calcite-shell-panel-height] - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float` or `float-all`, specifies the component's height.
+ * @cssproperty [--calcite-shell-panel-max-height] - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the component's maximum height.
+ * @cssproperty [--calcite-shell-panel-min-height] - When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float-content` or `float`, specifies the component's minimum height.
+ * @cssproperty [--calcite-shell-panel-max-width] - Specifies the component's maximum width.
+ * @cssproperty [--calcite-shell-panel-resize-icon-color] - Specifies the resize handle's text color.
+ * @cssproperty [--calcite-shell-panel-shadow] - When `displayMode` is `"float-all"`, specifies the component's shadow.
+ * @cssproperty [--calcite-shell-panel-text-color] - Specifies the component's text color.
+ * @cssproperty [--calcite-shell-panel-width] - Specifies the component's width.
+ * @cssproperty [--calcite-shell-panel-z-index] - Specifies the component's z-index value.
  * @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.
-     *
-     * @default false
-     */
-    collapsed: boolean;
-    /**
-     * Specifies the display mode of the component, where:
-     *
-     * `"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.
-     *
-     * @default "dock"
-     */
-    displayMode: DisplayMode;
-    /**
-     * When `layout` is `horizontal`, specifies the maximum height of the component.
-     *
-     * @deprecated in v3.0.0, removal target v6.0.0 - Use the `height` property instead.
-     */
-    heightScale: Scale;
-    /**
-     * The direction of the component.
-     *
-     * @deprecated in v4.0.0, removal target v6.0.0 -  No longer necessary.
-     * @default "vertical"
-     */
-    layout: Extract<"horizontal" | "vertical", Layout>;
-    /** Use this property to override individual strings used by the component. */
-    messageOverrides?: typeof this.messages._overrides;
-    /**
-     * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`).
-     *
-     * @deprecated in v4.0.0, removal target v6.0.0 -  No longer necessary.
-     * @default "start"
-     */
-    position: Extract<"start" | "end", Position>;
-    /**
-     * When `true` and `displayMode` is `"dock"` or `"overlay"`, the component's content area is resizable.
-     *
-     * @default false
-     */
-    resizable: boolean;
-    /** Specifies the height of the component. */
-    height: Height;
-    /**
-     * When `layout` is `vertical`, specifies the width of the component.
-     *
-     * @deprecated in v3.0.0, removal target v6.0.0 -  Use the `width` property instead.
-     * @default "m"
-     */
-    widthScale: Scale;
-    /** Specifies the width of the component. */
-    width: Extract<Width, Scale>;
-    /** Fires when the component's content area is collapsed. */
-    readonly calciteShellPanelCollapse: TargetedEvent<this, void>;
-    /** Fires when the component's content area is expanded. */
-    readonly calciteShellPanelExpand: TargetedEvent<this, void>;
-    private messages: Partial<{
-        resize: string;
-    }> & import('@arcgis/lumina/controllers').T9nMeta<{
-        resize: string;
-    }>;
-}
+export abstract class ShellPanel extends LitElement {
+  /**
+   * When `true`, hides the component's content area.
+   *
+   * @default false
+   */
+  accessor collapsed: boolean;
+  /**
+   * Specifies the component's display mode, where:
+   *
+   * `"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.
+   *
+   * @default "dock"
+   */
+  accessor displayMode: DisplayMode;
+  /** Specifies the component's height. */
+  accessor height: Height;
+  /**
+   * 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;
+  /**
+   * Specifies the component's direction.
+   *
+   * @deprecated in v4.0.0, removal target v6.0.0 -  No longer necessary.
+   * @default "vertical"
+   */
+  accessor layout: Extract<"horizontal" | "vertical", Layout>;
+  /** Overrides individual strings used by the component. */
+  accessor messageOverrides: { resize?: string; };
+  /**
+   * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`).
+   *
+   * @deprecated in v4.0.0, removal target v6.0.0 -  No longer necessary.
+   * @default "start"
+   */
+  accessor position: Extract<"start" | "end", Position>;
+  /**
+   * When `true` and `displayMode` is `"dock"` or `"overlay"`, the component's content area is resizable.
+   *
+   * @default false
+   */
+  accessor resizable: boolean;
+  /** Specifies the component's width. */
+  accessor width: Extract<Width, Scale>;
+  /**
+   * When `layout` is `vertical`, specifies the component's width.
+   *
+   * @deprecated in v3.0.0, removal target v6.0.0 -  Use the `width` property instead.
+   * @default "m"
+   */
+  accessor widthScale: Scale;
+  /**
+   * Updates the component's size by setting its inline and/or block dimensions.
+   *
+   * Use this method to programmatically override the components's width (inline) and/or height (block).
+   * Pass `null` to clear the override and revert to the default or CSS variable size.
+   *
+   * @param size
+   */
+  updateSize(size: {
+      inline?: number | null;
+      block?: number | null;
+  }): Promise<void>;
+  /** Fires when the component's content area is collapsed. */
+  readonly calciteShellPanelCollapse: import("@arcgis/lumina").TargetedEvent<this, void>;
+  /** Fires when the component's content area is expanded. */
+  readonly calciteShellPanelExpand: import("@arcgis/lumina").TargetedEvent<this, void>;
+  readonly "@eventTypes": {
+    calciteShellPanelCollapse: ShellPanel["calciteShellPanelCollapse"]["detail"];
+    calciteShellPanelExpand: ShellPanel["calciteShellPanelExpand"]["detail"];
+  };
+}