@esri/calcite-components 3.0.0-next.99 → 3.0.1

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

@@ -1,25 +1,22 @@
-import { C as D, c as I } from "../../chunks/runtime.js";
-import { ref as g } from "lit-html/directives/ref.js";
-import { keyed as B } from "lit-html/directives/keyed.js";
-import { i as y } from "../../chunks/interact.min.js";
-import { html as C } from "lit";
-import { LitElement as T, createEvent as k, setAttribute as $, safeClassMap as p } from "@arcgis/lumina";
-import { h as H, g as w, m, o as F } from "../../chunks/dom.js";
-import { u as M, c as R, d as S, a as E } from "../../chunks/focusTrapComponent.js";
-import { c as L, s as V, a as A } from "../../chunks/loadable.js";
-import { c as U } from "../../chunks/observers.js";
-import { o as P } from "../../chunks/openCloseComponent.js";
-import { g as O } from "../../chunks/dynamicClasses.js";
-import { c as K } from "../../chunks/math.js";
-import { u as _ } from "../../chunks/useT9n.js";
-import { css as j } from "@lit/reactive-element/css-tag.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.
- * v3.0.0-next.99
-*/
+import { C as E, c as O } from "../../chunks/runtime.js";
+import { ref as k } from "lit-html/directives/ref.js";
+import { keyed as I } from "lit-html/directives/keyed.js";
+import { i as S } from "../../chunks/interact.min.js";
+import { html as y } from "lit";
+import { LitElement as D, createEvent as g, setAttribute as B, safeClassMap as p } from "@arcgis/lumina";
+import { h as T, g as w, m, o as $ } from "../../chunks/dom.js";
+import { c as H } from "../../chunks/loadable.js";
+import { c as M } from "../../chunks/observers.js";
+import { o as R } from "../../chunks/openCloseComponent.js";
+import { g as C } from "../../chunks/dynamicClasses.js";
+import { c as V } from "../../chunks/math.js";
+import { u as A } from "../../chunks/useT9n.js";
+import { u as L } from "../../chunks/useFocusTrap.js";
+import { css as P } from "@lit/reactive-element/css-tag.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.
+v3.0.1 */
 const l = {
-  assistiveText: "assistive-text",
   scrim: "scrim",
   container: "container",
   containerOpen: "container--open",
@@ -27,32 +24,38 @@ const l = {
   contentContainer: "content-container",
   containerEmbedded: "container--embedded",
   resizeHandle: "resize-handle",
-  resizeHandleBar: "resize-handle-bar",
-  height: "height"
-}, q = 10, N = 25, W = j`:host{position:absolute;inset:0;z-index:var(--calcite-z-index-overlay);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)}.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;z-index:var(--calcite-z-index-overlay);box-sizing:border-box;display:flex;color:var(--calcite-color-text-2);opacity:0;transition:visibility 0ms linear var(--calcite-internal-animation-timing-medium),opacity var(--calcite-internal-animation-timing-medium) cubic-bezier(.215,.44,.42,.88)}: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(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),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}:host([opened]){visibility:visible!important}.content{position:relative;z-index:var(--calcite-z-index-modal);box-sizing:border-box;display:flex;max-inline-size:100%;padding:0;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)}.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:.25rem}:host([display-mode=float]) .container{padding:.75rem}.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-overlay)}.resize-handle:active .resize-handle-bar,.resize-handle:hover .resize-handle-bar{background-color:var(--calcite-color-foreground-3);color:var(--calcite-color-text-1)}.resize-handle-bar{pointer-events:none;display:flex;align-items:center;justify-content:center;background-color:var(--calcite-color-background);color:var(--calcite-color-border-input)}.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=inline-start]) .resize-handle{inline-size:var(--calcite-size-fixed-xxl);right: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:1px solid var(--calcite-color-border-3)}:host([position=inline-start]):host([display-mode=float]) .resize-handle-bar{border-start-end-radius:.25rem;border-end-end-radius:.25rem}:host([position=inline-end]) .resize-handle{inline-size:var(--calcite-size-fixed-xxl);left: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:1px solid 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:1px solid 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:1px solid var(--calcite-color-border-3)}:host([position=block-end]):host([display-mode=float]) .resize-handle-bar{border-start-start-radius:.25rem;border-start-end-radius:.25rem}: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 Y extends T {
+  resizeHandleBar: "resize-handle-bar"
+}, F = 10, U = 25, K = P`:host{position:absolute;inset:0;z-index:var(--calcite-z-index-overlay);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)}.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;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.container{visibility:hidden;position:fixed;z-index:var(--calcite-z-index-overlay);box-sizing:border-box;display:flex;color:var(--calcite-color-text-2);opacity:0;transition:visibility 0ms linear var(--calcite-internal-animation-timing-medium),opacity var(--calcite-internal-animation-timing-medium) cubic-bezier(.215,.44,.42,.88)}: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(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),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}:host([opened]){visibility:visible!important}.content{position:relative;z-index:var(--calcite-z-index-modal);box-sizing:border-box;display:flex;max-height:100%;max-width:100%;padding:0;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)}.content-container{position:relative;display:flex;max-height:100%;max-width: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:.25rem}:host([display-mode=float]) .container{padding:.75rem}.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{height: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{width: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-overlay)}.resize-handle:active .resize-handle-bar,.resize-handle:hover .resize-handle-bar{background-color:var(--calcite-color-foreground-3);color:var(--calcite-color-text-1)}.resize-handle-bar{pointer-events:none;display:flex;align-items:center;justify-content:center;background-color:var(--calcite-color-background);color:var(--calcite-color-border-input)}.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=inline-start]) .resize-handle{inline-size:var(--calcite-size-fixed-xxl);right: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:1px solid var(--calcite-color-border-3)}:host([position=inline-start]):host([display-mode=float]) .resize-handle-bar{border-start-end-radius:.25rem;border-end-end-radius:.25rem}:host([position=inline-end]) .resize-handle{inline-size:var(--calcite-size-fixed-xxl);left: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:1px solid 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:1px solid var(--calcite-color-border-3)}:host([position=block-start]):host([display-mode=float]) .resize-handle-bar{border-bottom-right-radius:.25rem;border-bottom-left-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:1px solid var(--calcite-color-border-3)}:host([position=block-end]):host([display-mode=float]) .resize-handle-bar{border-top-left-radius:.25rem;border-top-right-radius:.25rem}: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 _ extends D {
   // #endregion
   // #region Lifecycle
   constructor() {
-    super(), this.ignoreOpenChange = !1, this.messages = _(), this.mutationObserver = U("mutation", () => this.handleMutationObserver()), this._open = !1, this.openEnd = () => {
+    super(), this.focusTrap = L({
+      triggerProp: "open",
+      focusTrapOptions: {
+        // scrim closes on click, so we let it take over
+        clickOutsideDeactivates: !1,
+        escapeDeactivates: (e) => (!e.defaultPrevented && !this.escapeDisabled && (this.open = !1, e.preventDefault()), !1)
+      }
+    })(this), this.ignoreOpenChange = !1, this.messages = A(), this.mutationObserver = M("mutation", () => this.handleMutationObserver()), this._open = !1, this.openEnd = () => {
       this.setFocus(), this.el.removeEventListener("calciteSheetOpen", this.openEnd);
-    }, this.openTransitionProp = "opacity", this.resizeValues = {
+    }, this.openProp = "opened", this.transitionProp = "opacity", this.resizeValues = {
       inlineSize: 0,
       blockSize: 0,
       minInlineSize: 0,
       minBlockSize: 0,
       maxInlineSize: 0,
       maxBlockSize: 0
-    }, this.displayMode = "overlay", this.embedded = !1, this.escapeDisabled = !1, this.focusTrapDisabled = !1, this.heightScale = "m", this.opened = !1, this.outsideCloseDisabled = !1, this.position = "inline-start", this.resizable = !1, this.widthScale = "m", this.calciteSheetBeforeClose = k({ cancelable: !1 }), this.calciteSheetBeforeOpen = k({ cancelable: !1 }), this.calciteSheetClose = k({ cancelable: !1 }), this.calciteSheetOpen = k({ cancelable: !1 }), this.keyDownHandler = (e) => {
+    }, this.displayMode = "overlay", this.embedded = !1, this.escapeDisabled = !1, this.focusTrapDisabled = !1, this.heightScale = "m", this.opened = !1, this.outsideCloseDisabled = !1, this.position = "inline-start", this.resizable = !1, this.widthScale = "m", this.calciteSheetBeforeClose = g({ cancelable: !1 }), this.calciteSheetBeforeOpen = g({ cancelable: !1 }), this.calciteSheetClose = g({ cancelable: !1 }), this.calciteSheetOpen = g({ cancelable: !1 }), this.keyDownHandler = (e) => {
       const { defaultPrevented: t, key: s } = e;
       !t && !this.escapeDisabled && this.focusTrapDisabled && this.open && s === "Escape" && (e.preventDefault(), this.open = !1);
     }, this.listen("keydown", this.keyDownHandler);
   }
   static {
-    this.properties = { resizeValues: 16, beforeClose: 0, displayMode: 3, embedded: 5, escapeDisabled: 7, focusTrapDisabled: 7, heightScale: 3, height: 3, label: 1, messageOverrides: 0, open: 7, opened: 7, outsideCloseDisabled: 7, position: 3, resizable: 7, widthScale: 3, width: 3 };
+    this.properties = { resizeValues: 16, beforeClose: 0, displayMode: 3, embedded: 5, escapeDisabled: 7, focusTrapDisabled: 7, focusTrapOptions: 0, heightScale: 3, height: 3, label: 1, messageOverrides: 0, open: 7, opened: 7, outsideCloseDisabled: 7, position: 3, resizable: 7, widthScale: 3, width: 3 };
   }
   static {
-    this.styles = W;
+    this.styles = K;
   }
   /** When `true`, displays and positions the component. */
   get open() {
@@ -66,35 +69,29 @@ class Y extends T {
   // #region Public Methods
   /** Sets focus on the component's "close" button - the first focusable item. */
   async setFocus() {
-    await L(this), H(this.el);
+    await H(this), T(this.el);
   }
-  /** Updates the element(s) that are used within the focus-trap of the component. */
-  async updateFocusTrapElements() {
-    M(this);
+  /**
+   * Updates the element(s) that are included in the focus-trap of the component.
+   *
+   * @param extraContainers - Additional elements to include in the focus trap. This is useful for including elements that may have related parts rendered outside the main focus trapping element.
+   */
+  async updateFocusTrapElements(e) {
+    this.focusTrap.setExtraContainers(e), this.focusTrap.updateContainerElements();
   }
   connectedCallback() {
-    super.connectedCallback(), this.mutationObserver?.observe(this.el, { childList: !0, subtree: !0 }), R(this, {
-      focusTrapOptions: {
-        // scrim closes on click, so we let it take over
-        clickOutsideDeactivates: !1,
-        escapeDeactivates: (e) => (!e.defaultPrevented && !this.escapeDisabled && (this.open = !1, e.preventDefault()), !1)
-      }
-    }), this.setupInteractions();
+    super.connectedCallback(), this.mutationObserver?.observe(this.el, { childList: !0, subtree: !0 }), this.setupInteractions();
   }
   load() {
-    V(this), this.open && this.openSheet();
+    this.open && this.openSheet();
   }
   willUpdate(e) {
-    e.has("focusTrapDisabled") && (this.hasUpdated || this.focusTrapDisabled !== !1) && this.handleFocusTrapDisabled(this.focusTrapDisabled), e.has("opened") && (this.hasUpdated || this.opened !== !1) && P(this), (e.has("open") && (this.hasUpdated || this.open !== !1) || e.has("position") && (this.hasUpdated || this.position !== "inline-start") || e.has("resizable") && (this.hasUpdated || this.resizable !== !1)) && this.setupInteractions();
+    e.has("opened") && (this.hasUpdated || this.opened !== !1) && R(this), (e.has("open") && (this.hasUpdated || this.open !== !1) || e.has("position") && (this.hasUpdated || this.position !== "inline-start") || e.has("resizable") && (this.hasUpdated || this.resizable !== !1)) && this.setupInteractions();
   }
   loaded() {
-    A(this);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.removeOverflowHiddenClass(), this.mutationObserver?.disconnect(), S(this), this.embedded = !1, this.cleanupInteractions();
-  }
-  handleFocusTrapDisabled(e) {
-    this.open && (e ? S(this) : E(this));
+    super.disconnectedCallback(), this.removeOverflowHiddenClass(), this.mutationObserver?.disconnect(), this.embedded = !1, this.cleanupInteractions();
   }
   toggleSheet(e) {
     this.ignoreOpenChange || (e ? this.openSheet() : this.closeSheet());
@@ -110,7 +107,7 @@ class Y extends T {
     const { key: t, defaultPrevented: s, shiftKey: n } = e, { position: i, resizable: a, contentEl: h, el: r, resizeValues: { maxBlockSize: z, maxInlineSize: u, minBlockSize: x, minInlineSize: f } } = this, v = [...i === "block-end" || i === "block-start" ? ["ArrowUp", "ArrowDown"] : ["ArrowLeft", "ArrowRight"], "Home", "End"];
     if (!a || !h || s || !v.includes(t))
       return;
-    const c = this.getContentElDOMRect(), b = w(r) === "rtl" ? -1 : 1, o = n ? N : q;
+    const c = this.getContentElDOMRect(), b = w(r) === "rtl" ? -1 : 1, o = n ? U : F;
     switch (t) {
       case "ArrowUp":
         this.updateSize({
@@ -154,7 +151,7 @@ class Y extends T {
     const { contentEl: s, resizeValues: n } = this;
     if (!s)
       return;
-    const i = e === "blockSize" ? "minBlockSize" : "minInlineSize", a = e === "blockSize" ? "maxBlockSize" : "maxInlineSize", h = n[i] && n[a] ? K(t, n[i], n[a]) : t, r = Math.round(h);
+    const i = e === "blockSize" ? "minBlockSize" : "minInlineSize", a = e === "blockSize" ? "maxBlockSize" : "maxInlineSize", h = n[i] && n[a] ? V(t, n[i], n[a]) : t, r = Math.round(h);
     this.resizeValues = {
       ...n,
       [e]: r
@@ -178,7 +175,7 @@ class Y extends T {
     };
     this.resizeValues = d;
     const v = w(e) === "rtl";
-    this.interaction = y(t, { context: e.ownerDocument }).resizable({
+    this.interaction = S(t, { context: e.ownerDocument }).resizable({
       edges: {
         top: n === "block-end" ? a : !1,
         right: n === (v ? "inline-end" : "inline-start") ? a : !1,
@@ -186,7 +183,7 @@ class Y extends T {
         left: n === (v ? "inline-start" : "inline-end") ? a : !1
       },
       modifiers: [
-        y.modifiers.restrictSize({
+        S.modifiers.restrictSize({
           min: {
             width: d.minInlineSize,
             height: d.minBlockSize
@@ -212,19 +209,19 @@ class Y extends T {
     this.calciteSheetBeforeOpen.emit();
   }
   onOpen() {
-    this.calciteSheetOpen.emit(), E(this);
+    this.calciteSheetOpen.emit(), this.focusTrap.activate();
   }
   onBeforeClose() {
     this.calciteSheetBeforeClose.emit();
   }
   onClose() {
-    this.calciteSheetClose.emit(), S(this);
+    this.calciteSheetClose.emit(), this.focusTrap.deactivate();
   }
   setResizeHandleEl(e) {
     this.resizeHandleEl = e, this.setupInteractions();
   }
   setContentEl(e) {
-    this.contentEl = e, this.contentId = F(e);
+    this.contentEl = e, this.contentId = $(e);
   }
   setTransitionEl(e) {
     this.transitionEl = e;
@@ -257,17 +254,17 @@ class Y extends T {
   // #region Rendering
   render() {
     const { resizable: e, position: t, resizeValues: s } = this, n = w(this.el), i = t === "block-start" || t === "block-end";
-    return $(this.el, "aria-describedby", this.contentId), this.el.ariaLabel = this.label, this.el.ariaModal = "true", this.el.role = "dialog", C`<div class=${p({
+    return B(this.el, "aria-describedby", this.contentId), this.el.ariaLabel = this.label, this.el.ariaModal = "true", this.el.role = "dialog", y`<div class=${p({
       [l.container]: !0,
       [l.containerOpen]: this.opened,
       [l.containerEmbedded]: this.embedded,
-      [D.rtl]: n === "rtl",
-      [O("width", this.width, this.widthScale)]: !!(this.width || this.widthScale),
-      [O("height", this.height, this.heightScale)]: !!(this.height || this.heightScale)
-    })} ${g(this.setTransitionEl)}><calcite-scrim class=${p(l.scrim)} @click=${this.handleOutsideClose}></calcite-scrim><div class=${p(l.content)} ${g(this.setContentEl)}><div class=${p(l.contentContainer)}><slot></slot></div>${e ? B("resize-handle", C`<div .ariaLabel=${this.messages.resizeEnabled} .ariaOrientation=${i ? "vertical" : "horizontal"} .ariaValueMax=${i ? s.maxBlockSize : s.maxInlineSize} .ariaValueMin=${i ? s.minBlockSize : s.minInlineSize} .ariaValueNow=${i ? s.blockSize : s.inlineSize} class=${p(l.resizeHandle)} @keydown=${this.handleKeyDown} role=separator tabindex=0 touch-action=none ${g(this.setResizeHandleEl)}><div class=${p(l.resizeHandleBar)}><calcite-icon .icon=${this.getResizeIcon()} scale=s></calcite-icon></div></div>`) : null}</div></div>`;
+      [E.rtl]: n === "rtl",
+      [C("width", this.width, this.widthScale)]: !!(this.width || this.widthScale),
+      [C("height", this.height, this.heightScale)]: !!(this.height || this.heightScale)
+    })} ${k(this.setTransitionEl)}><calcite-scrim class=${p(l.scrim)} @click=${this.handleOutsideClose}></calcite-scrim><div class=${p(l.content)} ${k(this.setContentEl)}><div class=${p(l.contentContainer)}><slot></slot></div>${e ? I("resize-handle", y`<div .ariaLabel=${this.messages.resizeEnabled} .ariaOrientation=${i ? "vertical" : "horizontal"} .ariaValueMax=${i ? s.maxBlockSize : s.maxInlineSize} .ariaValueMin=${i ? s.minBlockSize : s.minInlineSize} .ariaValueNow=${i ? s.blockSize : s.inlineSize} class=${p(l.resizeHandle)} @keydown=${this.handleKeyDown} role=separator tabindex=0 touch-action=none ${k(this.setResizeHandleEl)}><div class=${p(l.resizeHandleBar)}><calcite-icon .icon=${this.getResizeIcon()} scale=s></calcite-icon></div></div>`) : null}</div></div>`;
   }
 }
-I("calcite-sheet", Y);
+O("calcite-sheet", _);
 export {
-  Y as Sheet
+  _ as Sheet
 };

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

@@ -4,11 +4,9 @@ import { html as t } from "lit";
 import { LitElement as g, safeClassMap as i } from "@arcgis/lumina";
 import { a as l, s as r } from "../../chunks/dom.js";
 import { css as w } from "@lit/reactive-element/css-tag.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.
- * v3.0.0-next.99
-*/
+/*! 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.0.1 */
 const $ = w`: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;--calcite-shell-tip-spacing: 26vw}.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-shell-center-row),.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-center-row){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:1px;border-inline-start-width:0px;border-inline-end-width:0px;border-style:solid;border-color:var(--calcite-color-border-3)}slot[name=center-row]::slotted(calcite-shell-center-row:not([detached])),slot[name=panel-top]::slotted(calcite-shell-center-row:not([detached])),slot[name=panel-bottom]::slotted(calcite-shell-center-row:not([detached])){border-inline-start-width:1px;border-inline-end-width:1px;border-color:var(--calcite-color-border-3)}.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-center-row){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)}slot[name=center-row]::slotted(calcite-shell-center-row),slot[name=panel-bottom]::slotted(calcite-shell-center-row){margin-block-start:auto}slot[name=panel-top]::slotted(calcite-shell-center-row){margin-block-end:auto}.position-wrapper{position:absolute;pointer-events:none;inset:0}slot[name=modals]::slotted(calcite-modal){position:absolute}:host([hidden]){display:none}[hidden]{display:none}`, s = {
   main: "main",
   content: "content",
@@ -17,7 +15,6 @@ const $ = w`:host{box-sizing:border-box;background-color:var(--calcite-color-for
   contentNonInteractive: "content--non-interactive",
   footer: "footer",
   positionedSlotWrapper: "positioned-slot-wrapper",
-  container: "container",
   contentBehindCenterContent: "center-content"
 }, a = {
   centerRow: "center-row",

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

@@ -5,11 +5,9 @@ import { LitElement as c, safeClassMap as i } from "@arcgis/lumina";
 import { s as l } from "../../chunks/dom.js";
 import { l as d } from "../../chunks/logger.js";
 import { css as h } from "@lit/reactive-element/css-tag.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.
- * v3.0.0-next.99
-*/
+/*! 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.0.1 */
 const n = {
   actionBarContainer: "action-bar-container",
   content: "content"

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

@@ -1,33 +1,29 @@
-import { C as g, c as N } from "../../chunks/runtime.js";
+import { C as y, c as N } from "../../chunks/runtime.js";
 import { keyed as z } from "lit-html/directives/keyed.js";
 import { ref as S } from "lit-html/directives/ref.js";
-import { html as v } from "lit";
+import { html as g } from "lit";
 import { LitElement as K, createEvent as E, safeClassMap as b, safeStyleMap as B } from "@arcgis/lumina";
 import { i as W, g as M, s as D, a as L } from "../../chunks/dom.js";
 import { c as A } from "../../chunks/math.js";
 import { g as P } from "../../chunks/dynamicClasses.js";
 import { u as V } from "../../chunks/useT9n.js";
 import { css as U } from "@lit/reactive-element/css-tag.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.
- * v3.0.0-next.99
-*/
+/*! 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.0.1 */
 const u = {
   container: "container",
   content: "content",
   contentHeader: "content__header",
   contentBody: "content__body",
   contentOverlay: "content--overlay",
-  float: "float",
   floatAll: "float-all",
   floatContent: "float--content",
-  height: "height",
   separator: "separator"
 }, $ = {
   actionBar: "action-bar",
   header: "header"
-}, _ = U`: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}: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]):not([display-mode=float-all])) slot[name=action-bar]::slotted(calcite-action-bar),:host([position=start]:not([slot=panel-end]):not([display-mode=float-all])) .content ::slotted(calcite-flow),:host([position=start]:not([slot=panel-end]):not([display-mode=float-all])) .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]:not([display-mode=float-all])) slot[name=action-bar]::slotted(calcite-action-bar){border-inline:0}:host([layout=horizontal][position=start]:not([display-mode=float-all])) .content ::slotted(calcite-flow),:host([layout=horizontal][position=start]:not([display-mode=float-all])) .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}`;
+}, _ = U`: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}`;
 class R extends K {
   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 = (e) => {
@@ -100,12 +96,12 @@ class R extends K {
     ].indexOf(t) > -1 && e.preventDefault();
     const k = M(i), r = ["ArrowLeft", "ArrowRight"], p = ["ArrowDown", "ArrowUp"], f = k === "rtl" && r.includes(t) ? -1 : 1;
     if (a === "horizontal" ? o === "end" ? t === p[1] || t === r[0] : t === p[0] || t === r[1] : t === p[1] || (o === "end" ? t === r[0] : t === r[1])) {
-      const y = e.shiftKey ? c : n;
-      return a === "horizontal" ? s + f * y : l + f * y;
+      const v = e.shiftKey ? c : n;
+      return a === "horizontal" ? s + f * v : l + f * v;
     }
     if (a === "horizontal" ? o === "end" ? t === p[0] || t === r[0] : t === p[1] || t === r[1] : t === p[0] || (o === "end" ? t === r[1] : t === r[0])) {
-      const y = e.shiftKey ? c : n;
-      return a === "horizontal" ? s - f * y : l - f * y;
+      const v = e.shiftKey ? c : n;
+      return a === "horizontal" ? s - f * v : l - f * v;
     }
     return t === "Home" && a === "horizontal" && typeof x == "number" ? x : t === "Home" && a === "vertical" && typeof w == "number" ? w : t === "End" && a === "horizontal" && typeof h == "number" ? h : t === "End" && a === "vertical" && typeof d == "number" ? d : t === "PageDown" ? a === "horizontal" ? s - c : l - c : t === "PageUp" ? a === "horizontal" ? s + c : l + c : null;
   }
@@ -147,20 +143,20 @@ class R extends K {
   // #endregion
   // #region Rendering
   renderHeader() {
-    return z("header", v`<div class=${b(u.contentHeader)} .hidden=${!this.hasHeader}><slot name=${$.header} @slotchange=${this.handleHeaderSlotChange}></slot></div>`);
+    return z("header", g`<div class=${b(u.contentHeader)} .hidden=${!this.hasHeader}><slot name=${$.header} @slotchange=${this.handleHeaderSlotChange}></slot></div>`);
   }
   render() {
-    const { collapsed: e, position: t, initialContentWidth: i, initialContentHeight: n, contentWidth: m, contentWidthMax: a, contentWidthMin: w, contentHeight: d, contentHeightMax: l, contentHeightMin: s, resizable: x, layout: h, displayMode: o } = this, c = M(this.el), C = o !== "float-content" && o !== "float" && x, k = C ? h === "horizontal" ? d ? { height: `${d}px` } : null : m ? { width: `${m}px` } : null : null, r = !e && C ? z("separator", v`<div .ariaLabel=${this.messages.resize} .ariaOrientation=${h === "horizontal" ? "vertical" : "horizontal"} .ariaValueMax=${h == "horizontal" ? l : a} .ariaValueMin=${h == "horizontal" ? s : w} .ariaValueNow=${h == "horizontal" ? d ?? n : m ?? i} class=${b(u.separator)} @keydown=${this.separatorKeyDown} role=separator tabindex=0 touch-action=none ${S(this.connectSeparator)}></div>`) : null, p = () => h === "horizontal" ? t === "start" ? g.calciteAnimateInDown : g.calciteAnimateInUp : c === "ltr" && t === "end" || c === "rtl" && t === "start" ? g.calciteAnimateInLeft : g.calciteAnimateInRight, f = z("content", v`<div class=${b({
-      [g.rtl]: c === "rtl",
+    const { collapsed: e, position: t, initialContentWidth: i, initialContentHeight: n, contentWidth: m, contentWidthMax: a, contentWidthMin: w, contentHeight: d, contentHeightMax: l, contentHeightMin: s, resizable: x, layout: h, displayMode: o } = this, c = M(this.el), C = o !== "float-content" && o !== "float" && x, k = C ? h === "horizontal" ? d ? { height: `${d}px` } : null : m ? { width: `${m}px` } : null : null, r = !e && C ? z("separator", g`<div .ariaLabel=${this.messages.resize} .ariaOrientation=${h === "horizontal" ? "vertical" : "horizontal"} .ariaValueMax=${h == "horizontal" ? l : a} .ariaValueMin=${h == "horizontal" ? s : w} .ariaValueNow=${h == "horizontal" ? d ?? n : m ?? i} class=${b(u.separator)} @keydown=${this.separatorKeyDown} role=separator tabindex=0 touch-action=none ${S(this.connectSeparator)}></div>`) : null, p = () => h === "horizontal" ? t === "start" ? y.calciteAnimateInDown : y.calciteAnimateInUp : c === "ltr" && t === "end" || c === "rtl" && t === "start" ? y.calciteAnimateInLeft : y.calciteAnimateInRight, f = z("content", g`<div class=${b({
+      [y.rtl]: c === "rtl",
       [u.content]: !0,
       [u.contentOverlay]: o === "overlay",
       [u.floatContent]: o === "float-content" || o === "float",
-      [g.calciteAnimate]: o === "overlay",
+      [y.calciteAnimate]: o === "overlay",
       [p()]: o === "overlay",
       [P("width", this.width, this.widthScale)]: !!(this.width || this.widthScale),
       [P("height", this.height, this.heightScale)]: !!(this.height || this.heightScale)
-    })} .hidden=${e} style=${B(k)} ${S(this.storeContentEl)}>${this.renderHeader()}<div class=${b(u.contentBody)}><slot></slot></div>${r}</div>`), H = [z("action-bar", v`<slot name=${$.actionBar} @slotchange=${this.handleActionBarSlotChange}></slot>`), f];
-    return t === "end" && H.reverse(), v`<div class=${b({ [u.container]: !0, [u.floatAll]: o === "float-all" })}>${H}</div>`;
+    })} .hidden=${e} style=${B(k)} ${S(this.storeContentEl)}>${this.renderHeader()}<div class=${b(u.contentBody)}><slot></slot></div>${r}</div>`), H = [z("action-bar", g`<slot name=${$.actionBar} @slotchange=${this.handleActionBarSlotChange}></slot>`), f];
+    return t === "end" && H.reverse(), g`<div class=${b({ [u.container]: !0, [u.floatAll]: o === "float-all" })}>${H}</div>`;
   }
 }
 N("calcite-shell-panel", R);

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

@@ -74,7 +74,10 @@ export declare class Slider extends LitElement {
     pageStep: number;
     /** When `true`, sets a finer point for handles. */
     precise: boolean;
-    /** When `true`, the component must have a value in order for the form to submit. */
+    /**
+     * When `true` and the component resides in a form,
+     * the component must have a value in order for the form to submit.
+     */
     required: boolean;
     /** Specifies the size of the component. */
     scale: Scale;