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

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

@@ -6,27 +6,32 @@ import { Height, LogicalFlowPosition, Scale, Width } from '../interfaces';
 import { FocusTrapOptions } from '../../controllers/useFocusTrap';
 import { DisplayMode, ResizeValues } from './interfaces';
 
-/** @slot - A slot for adding custom content. */
+/** @slot  - A slot for adding custom content. */
 export declare class Sheet extends LitElement {
-    private messages: Partial<{
-        resizeEnabled: string;
-    }> & import('@arcgis/components-controllers').T9nMeta<{
-        resizeEnabled: string;
-    }>;
     /**
      * Passes a function to run before the component closes.
      *
-     * @returns {Promise<void>}
+     * @returns
      */
     beforeClose: (el: HTMLCalciteSheetElement) => Promise<void>;
     /**
      * Specifies the display mode - `"float"` (content is separated detached),
      * or `"overlay"` (displays on top of center content).
+     *
+     * @default "overlay"
      */
     displayMode: DisplayMode;
-    /** When `true`, disables the default close on escape behavior. */
+    /**
+     * When `true`, disables the default close on escape behavior.
+     *
+     * @default false
+     */
     escapeDisabled: boolean;
-    /** When `true`, prevents focus trapping. */
+    /**
+     * When `true`, prevents focus trapping.
+     *
+     * @default false
+     */
     focusTrapDisabled: boolean;
     /**
      * Specifies custom focus trap configuration on the component, where
@@ -41,6 +46,7 @@ export declare class Sheet extends LitElement {
      * When `position` is `"block-start"` or `"block-end"`, specifies the height of the component.
      *
      * @deprecated Use the `height` property instead.
+     * @default "m"
      */
     heightScale: Scale;
     /** Specifies the height of the component. */
@@ -53,20 +59,36 @@ export declare class Sheet extends LitElement {
     label: string;
     /** Use this property to override individual strings used by the component. */
     messageOverrides?: typeof this.messages._overrides;
-    /** When `true`, displays and positions the component. */
+    /**
+     * When `true`, displays and positions the component.
+     *
+     * @default false
+     */
     get open(): boolean;
     set open(open: boolean);
-    /** When `true`, disables the closing of the component when clicked outside. */
+    /**
+     * When `true`, disables the closing of the component when clicked outside.
+     *
+     * @default false
+     */
     outsideCloseDisabled: boolean;
-    /** Determines where the component will be positioned. */
+    /**
+     * Determines where the component will be positioned.
+     *
+     * @default "inline-start"
+     */
     position: LogicalFlowPosition;
-    /** When `true`, the component is resizable. */
+    /**
+     * When `true`, the component is resizable.
+     *
+     * @default false
+     */
     resizable: boolean;
-    /** When `position` is `"inline-start"` or `"inline-end"`, specifies the width of the component. */
     /**
      * When `position` is `"inline-start"` or `"inline-end"`, specifies the width of the component.
      *
      * @deprecated Use the `width` property instead.
+     * @default "m"
      */
     widthScale: Scale;
     /** Specifies the width of the component. */
@@ -80,11 +102,16 @@ export declare class Sheet extends LitElement {
      */
     updateFocusTrapElements(extraContainers?: FocusTrapOptions["extraContainers"]): Promise<void>;
     /** Fires when the component is requested to be closed and before the closing transition begins. */
-    readonly calciteSheetBeforeClose: TargetedEvent<this, undefined>;
+    readonly calciteSheetBeforeClose: TargetedEvent<this, void>;
     /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
-    readonly calciteSheetBeforeOpen: TargetedEvent<this, undefined>;
+    readonly calciteSheetBeforeOpen: TargetedEvent<this, void>;
     /** Fires when the component is closed and animation is complete. */
-    readonly calciteSheetClose: TargetedEvent<this, undefined>;
+    readonly calciteSheetClose: TargetedEvent<this, void>;
     /** Fires when the component is open and animation is complete. */
-    readonly calciteSheetOpen: TargetedEvent<this, undefined>;
+    readonly calciteSheetOpen: TargetedEvent<this, void>;
+    private messages: Partial<{
+        resizeEnabled: string;
+    }> & import('@arcgis/lumina/controllers').T9nMeta<{
+        resizeEnabled: string;
+    }>;
 }

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

@@ -1,19 +1,20 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.9 */
-import { C as CSS_UTILITY, c as customElement } from "../../chunks/runtime.js";
+v3.2.0 */
+import { C as CSS_UTILITY, a as resizeShiftStep, b as resizeStep, c as customElement } from "../../chunks/runtime.js";
 import { ref } from "lit-html/directives/ref.js";
 import { keyed } from "lit-html/directives/keyed.js";
 import { i as interact } from "../../chunks/interact.min.js";
 import { html } from "lit";
 import { LitElement, createEvent, setAttribute, safeClassMap } from "@arcgis/lumina";
-import { h as focusFirstTabbable, g as getElementDir, m as isPixelValue, o as ensureId } from "../../chunks/dom.js";
+import { h as focusFirstTabbable, g as getElementDir, k as getStylePixelValue, o as ensureId } from "../../chunks/dom.js";
 import { c as componentFocusable } from "../../chunks/component.js";
 import { c as createObserver } from "../../chunks/observers.js";
 import { o as onToggleOpenCloseComponent } 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 { css } from "@lit/reactive-element/css-tag.js";
 const CSS = {
@@ -26,19 +27,15 @@ const CSS = {
   resizeHandle: "resize-handle",
   resizeHandleBar: "resize-handle-bar"
 };
-const sheetResizeStep = 10;
-const sheetResizeShiftStep = 25;
-const styles = css`: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}`;
+const styles = css`: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;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([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}: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-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)}.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: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{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-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: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: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);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: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-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: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-top-left-radius:var(--calcite-sheet-corner-radius, var(--calcite-corner-radius-round));border-top-right-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 {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.focusTrap = useFocusTrap({
       triggerProp: "open",
       focusTrapOptions: {
         // scrim closes on click, so we let it take over
-        clickOutsideDeactivates: false,
+        clickOutsideDeactivates: () => this.embedded,
         escapeDeactivates: (event) => {
           if (!event.defaultPrevented && !this.escapeDisabled) {
             this.open = false;
@@ -48,23 +45,27 @@ class Sheet extends LitElement {
         }
       }
     })(this);
+    this.usePreventDocumentScroll = usePreventDocumentScroll()(this);
     this.ignoreOpenChange = false;
     this.messages = useT9n();
     this.mutationObserver = createObserver("mutation", () => this.handleMutationObserver());
     this._open = false;
-    this.openEnd = () => {
-      this.setFocus();
-      this.el.removeEventListener("calciteSheetOpen", this.openEnd);
-    };
     this.openProp = "opened";
     this.transitionProp = "opacity";
+    this.keyDownHandler = (event) => {
+      const { defaultPrevented, key } = event;
+      if (!defaultPrevented && !this.escapeDisabled && this.focusTrapDisabled && this.open && key === "Escape") {
+        event.preventDefault();
+        this.open = false;
+      }
+    };
     this.resizeValues = {
-      inlineSize: 0,
-      blockSize: 0,
-      minInlineSize: 0,
-      minBlockSize: 0,
-      maxInlineSize: 0,
-      maxBlockSize: 0
+      inlineSize: null,
+      blockSize: null,
+      minInlineSize: null,
+      minBlockSize: null,
+      maxInlineSize: null,
+      maxBlockSize: null
     };
     this.displayMode = "overlay";
     this.embedded = false;
@@ -80,22 +81,17 @@ class Sheet extends LitElement {
     this.calciteSheetBeforeOpen = createEvent({ cancelable: false });
     this.calciteSheetClose = createEvent({ cancelable: false });
     this.calciteSheetOpen = createEvent({ cancelable: false });
-    this.keyDownHandler = (event) => {
-      const { defaultPrevented, key } = event;
-      if (!defaultPrevented && !this.escapeDisabled && this.focusTrapDisabled && this.open && key === "Escape") {
-        event.preventDefault();
-        this.open = false;
-      }
-    };
     this.listen("keydown", this.keyDownHandler);
   }
   static {
-    this.properties = { resizeValues: [16, { state: true }], beforeClose: [0, { attribute: false }], displayMode: [3, { reflect: true }], embedded: [5, { 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 }], preventDocumentScroll: [16, {}, { state: true }], beforeClose: [0, {}, { attribute: false }], displayMode: [3, {}, { reflect: true }], embedded: [5, {}, { 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 }] };
   }
   static {
     this.styles = styles;
   }
-  /** When `true`, displays and positions the component. */
+  get preventDocumentScroll() {
+    return !this.embedded;
+  }
   get open() {
     return this._open;
   }
@@ -106,18 +102,10 @@ class Sheet extends LitElement {
       this.toggleSheet(open);
     }
   }
-  // #endregion
-  // #region Public Methods
-  /** Sets focus on the component's "close" button - the first focusable item. */
   async setFocus() {
     await componentFocusable(this);
     focusFirstTabbable(this.el);
   }
-  /**
-   * 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(extraContainers) {
     this.focusTrap.setExtraContainers(extraContainers);
     this.focusTrap.updateContainerElements();
@@ -142,7 +130,6 @@ class Sheet extends LitElement {
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeOverflowHiddenClass();
     this.mutationObserver?.disconnect();
     this.embedded = false;
     this.cleanupInteractions();
@@ -174,7 +161,7 @@ class Sheet extends LitElement {
     }
     const rect = this.getContentElDOMRect();
     const invertRTL = getElementDir(el) === "rtl" ? -1 : 1;
-    const stepValue = shiftKey ? sheetResizeShiftStep : sheetResizeStep;
+    const stepValue = shiftKey ? resizeShiftStep : resizeStep;
     switch (key) {
       case "ArrowUp":
         this.updateSize({
@@ -209,12 +196,14 @@ class Sheet extends LitElement {
           size: position === "block-start" || position === "block-end" ? minBlockSize : minInlineSize,
           type: position === "block-start" || position === "block-end" ? "blockSize" : "inlineSize"
         });
+        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"
         });
+        event.preventDefault();
         break;
     }
   }
@@ -238,20 +227,21 @@ class Sheet extends LitElement {
     this.updateSize({ size: null, type: "inlineSize" });
     this.updateSize({ size: null, type: "blockSize" });
   }
-  setupInteractions() {
+  async setupInteractions() {
     this.cleanupInteractions();
     const { el, contentEl, resizable, position, open, resizeHandleEl } = this;
     if (!contentEl || !open || !resizable || !resizeHandleEl) {
       return;
     }
+    await this.el.componentOnReady();
     const { inlineSize, minInlineSize, blockSize, minBlockSize, maxInlineSize, maxBlockSize } = window.getComputedStyle(contentEl);
     const values = {
-      inlineSize: isPixelValue(inlineSize) ? parseInt(inlineSize) : 0,
-      blockSize: isPixelValue(blockSize) ? parseInt(blockSize) : 0,
-      minInlineSize: isPixelValue(minInlineSize) ? parseInt(minInlineSize) : 0,
-      minBlockSize: isPixelValue(minBlockSize) ? parseInt(minBlockSize) : 0,
-      maxInlineSize: isPixelValue(maxInlineSize) ? parseInt(maxInlineSize) : window.innerWidth,
-      maxBlockSize: isPixelValue(maxBlockSize) ? parseInt(maxBlockSize) : window.innerHeight
+      inlineSize: getStylePixelValue(inlineSize),
+      blockSize: getStylePixelValue(blockSize),
+      minInlineSize: getStylePixelValue(minInlineSize),
+      minBlockSize: getStylePixelValue(minBlockSize),
+      maxInlineSize: getStylePixelValue(maxInlineSize) || window.innerWidth,
+      maxBlockSize: getStylePixelValue(maxBlockSize) || window.innerHeight
     };
     this.resizeValues = values;
     const rtl = getElementDir(el) === "rtl";
@@ -289,8 +279,11 @@ class Sheet extends LitElement {
     this.calciteSheetBeforeOpen.emit();
   }
   onOpen() {
-    this.calciteSheetOpen.emit();
+    if (this.focusTrapDisabled) {
+      this.setFocus();
+    }
     this.focusTrap.activate();
+    this.calciteSheetOpen.emit();
   }
   onBeforeClose() {
     this.calciteSheetBeforeClose.emit();
@@ -315,12 +308,7 @@ class Sheet extends LitElement {
   }
   async openSheet() {
     await this.componentOnReady();
-    this.el.addEventListener("calciteSheetOpen", this.openEnd);
     this.opened = true;
-    if (!this.embedded) {
-      this.initialOverflowCSS = document.documentElement.style.overflow;
-      document.documentElement.style.setProperty("overflow", "hidden");
-    }
   }
   handleOutsideClose() {
     if (this.outsideCloseDisabled) {
@@ -342,16 +330,10 @@ class Sheet extends LitElement {
       }
     }
     this.opened = false;
-    this.removeOverflowHiddenClass();
-  }
-  removeOverflowHiddenClass() {
-    document.documentElement.style.setProperty("overflow", this.initialOverflowCSS);
   }
   handleMutationObserver() {
     this.focusTrap.updateContainerElements();
   }
-  // #endregion
-  // #region Rendering
   render() {
     const { resizable, position, resizeValues } = this;
     const dir = getElementDir(this.el);
@@ -367,7 +349,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)
-    })} ${ref(this.setTransitionEl)}><calcite-scrim class=${safeClassMap(CSS.scrim)} @click=${this.handleOutsideClose}></calcite-scrim><div class=${safeClassMap(CSS.content)} ${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>`;
+    })} ${ref(this.setTransitionEl)}><calcite-scrim class=${safeClassMap(CSS.scrim)} @click=${this.handleOutsideClose}></calcite-scrim><div class=${safeClassMap(CSS.content)} id=sheet-content ${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>`;
   }
 }
 customElement("calcite-sheet", Sheet);

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

@@ -10,5 +10,3 @@ export declare const CSS: {
     resizeHandleBar: string;
     height: string;
 };
-export declare const sheetResizeStep = 10;
-export declare const sheetResizeShiftStep = 25;

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

@@ -3,20 +3,24 @@ import { PropertyValues } from 'lit';
 import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
 
 /**
- * @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.
- * @slot panel-start - A slot for adding the starting `calcite-shell-panel`.
- * @slot panel-end - A slot for adding the ending `calcite-shell-panel`.
- * @slot panel-top - A slot for adding the top `calcite-shell-panel`.
- * @slot panel-bottom - A slot for adding the bottom `calcite-shell-panel`.
- * @slot center-row - [Deprecated] Use the `"panel-bottom"` slot instead. A slot for adding the bottom `calcite-shell-center-row`.
- * @slot modals - A slot for adding `calcite-modal` components. When placed in this slot, the modal position will be constrained to the extent of the `calcite-shell`.
- * @slot dialogs - A slot for adding `calcite-dialog` components. When placed in this slot, the dialog position will be constrained to the extent of the `calcite-shell`.
- * @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`.
+ * @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.
+ * @slot [panel-start] - A slot for adding the starting `calcite-shell-panel`.
+ * @slot [panel-end] - A slot for adding the ending `calcite-shell-panel`.
+ * @slot [panel-top] - A slot for adding the top `calcite-shell-panel`.
+ * @slot [panel-bottom] - A slot for adding the bottom `calcite-shell-panel`.
+ * @slot [center-row] - [Deprecated] Use the `"panel-bottom"` slot instead. A slot for adding the bottom `calcite-shell-center-row`.
+ * @slot [modals] - A slot for adding `calcite-modal` components. When placed in this slot, the modal position will be constrained to the extent of the `calcite-shell`.
+ * @slot [dialogs] - A slot for adding `calcite-dialog` components. When placed in this slot, the dialog position will be constrained to the extent of the `calcite-shell`.
+ * @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. */
+    /**
+     * Positions the center content behind any `calcite-shell-panel`s.
+     *
+     * @default false
+     */
     contentBehind: boolean;
 }

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.9 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { keyed } from "lit-html/directives/keyed.js";
 import { html } from "lit";
@@ -32,8 +32,6 @@ const SLOTS = {
   dialogs: "dialogs"
 };
 class Shell extends LitElement {
-  // #endregion
-  // #region Lifecycle
   constructor() {
     super();
     this.hasAlerts = false;
@@ -51,7 +49,7 @@ class Shell extends LitElement {
     this.listen("calciteInternalShellPanelResizeEnd", this.handleCalciteInternalShellPanelResizeEnd);
   }
   static {
-    this.properties = { hasAlerts: [16, { state: true }], hasDialogs: [16, { state: true }], hasFooter: [16, { state: true }], hasHeader: [16, { state: true }], hasModals: [16, { state: true }], hasOnlyPanelBottom: [16, { state: true }], hasPanelBottom: [16, { state: true }], hasPanelTop: [16, { state: true }], hasSheets: [16, { state: true }], panelIsResizing: [16, { state: true }], contentBehind: [7, { reflect: true, type: Boolean }] };
+    this.properties = { hasAlerts: [16, {}, { state: true }], hasDialogs: [16, {}, { state: true }], hasFooter: [16, {}, { state: true }], hasHeader: [16, {}, { state: true }], hasModals: [16, {}, { state: true }], hasOnlyPanelBottom: [16, {}, { state: true }], hasPanelBottom: [16, {}, { state: true }], hasPanelTop: [16, {}, { state: true }], hasSheets: [16, {}, { state: true }], panelIsResizing: [16, {}, { state: true }], contentBehind: [7, {}, { reflect: true, type: Boolean }] };
   }
   static {
     this.styles = styles;
@@ -61,8 +59,6 @@ class Shell extends LitElement {
       this.hasOnlyPanelBottom = !this.hasPanelTop && this.hasPanelBottom;
     }
   }
-  // #endregion
-  // #region Private Methods
   handleCalciteInternalShellPanelResizeStart(event) {
     this.panelIsResizing = true;
     event.stopPropagation();
@@ -95,6 +91,11 @@ class Shell extends LitElement {
   }
   handleModalsSlotChange(event) {
     this.hasModals = !!slotChangeHasAssignedElement(event);
+    slotChangeGetAssignedElements(event)?.map((el) => {
+      if (el.tagName === "CALCITE-MODAL") {
+        el.embedded = true;
+      }
+    });
   }
   handlePanelTopChange(event) {
     this.hasPanelTop = slotChangeHasAssignedElement(event);
@@ -110,8 +111,6 @@ class Shell extends LitElement {
       }
     });
   }
-  // #endregion
-  // #region Rendering
   renderHeader() {
     return html`<div .hidden=${!this.hasHeader}>${keyed("header", html`<slot name=${SLOTS.header} @slotchange=${this.handleHeaderSlotChange}></slot>`)}</div>`;
   }

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

@@ -5,14 +5,26 @@ import { ActionBar } from '../calcite-action-bar/customElement.js';
 
 /**
  * @deprecated Use the `calcite-shell-panel` component instead.
- * @slot - A slot for adding content to the `calcite-shell-panel`.
- * @slot action-bar - A slot for adding a `calcite-action-bar` to the `calcite-shell-panel`.
+ * @slot  - A slot for adding content to the `calcite-shell-panel`.
+ * @slot [action-bar] - A slot for adding a `calcite-action-bar` to the `calcite-shell-panel`.
  */
 export declare class ShellCenterRow extends LitElement {
-    /** When `true`, the content area displays like a floating panel. */
+    /**
+     * When `true`, the content area displays like a floating panel.
+     *
+     * @default false
+     */
     detached: boolean;
-    /** Specifies the maximum height of the component. */
+    /**
+     * Specifies the maximum height of the component.
+     *
+     * @default "s"
+     */
     heightScale: Scale;
-    /** Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`). */
+    /**
+     * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`).
+     *
+     * @default "end"
+     */
     position: Extract<"start" | "end", Position>;
 }

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

@@ -1,6 +1,6 @@
 /*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
 See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
-v3.2.0-next.9 */
+v3.2.0 */
 import { c as customElement } from "../../chunks/runtime.js";
 import { html } from "lit-html";
 import { keyed } from "lit-html/directives/keyed.js";
@@ -24,13 +24,11 @@ class ShellCenterRow extends LitElement {
     this.position = "end";
   }
   static {
-    this.properties = { actionBar: [16, { state: true }], detached: [7, { reflect: true, type: Boolean }], heightScale: [3, { reflect: true }], position: [3, { reflect: true }] };
+    this.properties = { actionBar: [16, {}, { state: true }], detached: [7, {}, { reflect: true, type: Boolean }], heightScale: [3, {}, { reflect: true }], position: [3, {}, { reflect: true }] };
   }
   static {
     this.styles = styles;
   }
-  // #endregion
-  // #region Lifecycle
   load() {
     logger.deprecated("component", {
       name: "shell-center-row",
@@ -43,13 +41,9 @@ class ShellCenterRow extends LitElement {
       this.requestUpdate();
     }
   }
-  // #endregion
-  // #region Private Methods
   handleActionBarSlotChange(event) {
     this.actionBar = slotChangeGetAssignedElements(event).filter((el) => el.matches("calcite-action-bar"))[0];
   }
-  // #endregion
-  // #region Rendering
   render() {
     const { actionBar } = this;
     const contentNode = html`<div class=${safeClassMap(CSS.content)}><slot></slot></div>`;