@esri/calcite-components 1.4.0-next.15 → 1.4.0-next.17

package/dist/extras/docs-json.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-05-12T22:40:34",
+  "timestamp": "2023-05-17T19:53:41",
   "compiler": {
     "name": "@stencil/core",
     "version": "2.22.3",
@@ -12614,7 +12614,7 @@
           "mutable": true,
           "attr": "value",
           "reflectToAttr": false,
-          "docs": "The component's value in UTC (always 24-hour format).",
+          "docs": "The time value in ISO (24-hour) format.",
           "docsTags": [],
           "default": "null",
           "values": [
@@ -18544,7 +18544,7 @@
         }
       ],
       "usage": {
-        "Advanced": "Renders a shell with leading and trailing floating panels, action bar/pad, block, flow, tip manager, footer.\n\n```html\n<calcite-shell>\n  <calcite-shell-panel slot=\"panel-start\" position=\"start\" detached>\n    <calcite-action-bar slot=\"action-bar\">\n      <calcite-action-group>\n        <calcite-action text=\"Add\" icon=\"plus\"></calcite-action>\n        <calcite-action text=\"Save\" disabled icon=\"save\"></calcite-action>\n        <calcite-action text=\"Layers\" active indicator icon=\"layers\"></calcite-action>\n      </calcite-action-group>\n      <calcite-action-group>\n        <calcite-action text=\"Add\" icon=\"plus\"></calcite-action>\n        <calcite-action text=\"Layers\" indicator icon=\"layers\"></calcite-action>\n      </calcite-action-group>\n    </calcite-action-bar>\n    <calcite-block collapsible  heading=\"Primary Content\" summary=\"This is the primary.\">\n      <calcite-block-content>\n        <calcite-action text=\"Puppies\" text-enabled indicator icon=\"plus\"></calcite-action>\n        <calcite-action text=\"Kittens\" text-enabled icon=\"save\"></calcite-action>\n        <calcite-action text=\"Birds?\" text-enabled icon=\"banana\"></calcite-action>\n      </calcite-block-content>\n    </calcite-block>\n    <calcite-block collapsible  heading=\"Additional Block\" summary=\"Baby shark doo doo doo doo.\">\n      <calcite-block-content>\n          <p>Cool thing.</p>\n      </calcite-block-content>\n    </calcite-block>\n  </calcite-shell-panel>\n\n   <calcite-shell-panel slot=\"panel-end\" position=\"end\" detached height-scale=\"l\">\n      <calcite-action-bar slot=\"action-bar\">\n        <calcite-action-group>\n          <calcite-action text=\"Add\" active icon=\"plus\"></calcite-action>\n          <calcite-action text=\"Save\" disabled icon=\"save\"></calcite-action>\n          <calcite-action text=\"Layers\" icon=\"layers\"></calcite-action>\n        </calcite-action-group>\n        <calcite-action-group>\n          <calcite-action text=\"Add\" icon=\"plus\"></calcite-action>\n          <calcite-action text=\"Save\" disabled icon=\"save\"></calcite-action>\n          <calcite-action text=\"Layers\" icon=\"layers\"></calcite-action>\n        </calcite-action-group>\n        <calcite-action slot=\"bottom-actions\" text=\"Tips\" icon=\"lightbulb\"></calcite-action>\n      </calcite-action-bar>\n      <calcite-flow>\n        <calcite-flow-item heading=\"Layer settings\">\n          <calcite-block collapsible open heading=\"Contextual Content\" summary=\"Select goodness\">\n            <calcite-value-list multiple filter-enabled>\n              <calcite-value-list-item label=\"2018 Population Density (Esri)\" description=\"{POPDENS_CY}\" value=\"POPDENS_CY\">\n                <calcite-action slot=\"actions-end\" icon=\"camera-flash-on\"></calcite-action>\n              </calcite-value-list-item>\n              <calcite-value-list-item label=\"2018 Population Density [Updated]\" description=\"{POPDENS_CY}\" value=\"POPDENS_CY2\">\n                <calcite-action slot=\"actions-end\" icon=\"banana\"></calcite-action>\n              </calcite-value-list-item>\n              <calcite-value-list-item label=\"2018 Total Households (Esri)\" description=\"{TOTHH_CY}\" value=\"TOTHH_CY\">\n                <calcite-action slot=\"actions-end\" icon=\"person2\"></calcite-action>\n              </calcite-value-list-item>\n            </calcite-value-list>\n          </calcite-block>\n        </calcite-flow-item>\n      </calcite-flow>\n  </calcite-shell-panel>\n  <calcite-tip-manager slot=\"center-row\">\n    <calcite-tip heading=\"The Red Rocks and Blue Water\" thumbnail=\"https://placeimg.com/1000/600\" text-thumbnail=\"This is an image of nature.\">\n    <calcite-tip heading=\"The Long Trees\" thumbnail=\"https://placeimg.com/1000/600\" text-thumbnail=\"This is an image of trees.\">\n  </calcite-tip-manager>\n  <footer slot=\"footer\">Footer</footer>\n</calcite-shell>\n```\n",
+        "Advanced": "Renders a shell with leading and trailing floating panels, action bar/pad, block, flow, tip manager, footer.\n\n```html\n<calcite-shell>\n  <calcite-shell-panel slot=\"panel-start\" position=\"start\" display-mode=\"float\">\n    <calcite-action-bar slot=\"action-bar\">\n      <calcite-action-group>\n        <calcite-action text=\"Add\" icon=\"plus\"></calcite-action>\n        <calcite-action text=\"Save\" disabled icon=\"save\"></calcite-action>\n        <calcite-action text=\"Layers\" active indicator icon=\"layers\"></calcite-action>\n      </calcite-action-group>\n      <calcite-action-group>\n        <calcite-action text=\"Add\" icon=\"plus\"></calcite-action>\n        <calcite-action text=\"Layers\" indicator icon=\"layers\"></calcite-action>\n      </calcite-action-group>\n    </calcite-action-bar>\n    <calcite-block collapsible  heading=\"Primary Content\" summary=\"This is the primary.\">\n      <calcite-block-content>\n        <calcite-action text=\"Puppies\" text-enabled indicator icon=\"plus\"></calcite-action>\n        <calcite-action text=\"Kittens\" text-enabled icon=\"save\"></calcite-action>\n        <calcite-action text=\"Birds?\" text-enabled icon=\"banana\"></calcite-action>\n      </calcite-block-content>\n    </calcite-block>\n    <calcite-block collapsible  heading=\"Additional Block\" summary=\"Baby shark doo doo doo doo.\">\n      <calcite-block-content>\n          <p>Cool thing.</p>\n      </calcite-block-content>\n    </calcite-block>\n  </calcite-shell-panel>\n\n   <calcite-shell-panel slot=\"panel-end\" position=\"end\" display-mode=\"float\" height-scale=\"l\">\n      <calcite-action-bar slot=\"action-bar\">\n        <calcite-action-group>\n          <calcite-action text=\"Add\" active icon=\"plus\"></calcite-action>\n          <calcite-action text=\"Save\" disabled icon=\"save\"></calcite-action>\n          <calcite-action text=\"Layers\" icon=\"layers\"></calcite-action>\n        </calcite-action-group>\n        <calcite-action-group>\n          <calcite-action text=\"Add\" icon=\"plus\"></calcite-action>\n          <calcite-action text=\"Save\" disabled icon=\"save\"></calcite-action>\n          <calcite-action text=\"Layers\" icon=\"layers\"></calcite-action>\n        </calcite-action-group>\n        <calcite-action slot=\"bottom-actions\" text=\"Tips\" icon=\"lightbulb\"></calcite-action>\n      </calcite-action-bar>\n      <calcite-flow>\n        <calcite-flow-item heading=\"Layer settings\">\n          <calcite-block collapsible open heading=\"Contextual Content\" summary=\"Select goodness\">\n            <calcite-value-list multiple filter-enabled>\n              <calcite-value-list-item label=\"2018 Population Density (Esri)\" description=\"{POPDENS_CY}\" value=\"POPDENS_CY\">\n                <calcite-action slot=\"actions-end\" icon=\"camera-flash-on\"></calcite-action>\n              </calcite-value-list-item>\n              <calcite-value-list-item label=\"2018 Population Density [Updated]\" description=\"{POPDENS_CY}\" value=\"POPDENS_CY2\">\n                <calcite-action slot=\"actions-end\" icon=\"banana\"></calcite-action>\n              </calcite-value-list-item>\n              <calcite-value-list-item label=\"2018 Total Households (Esri)\" description=\"{TOTHH_CY}\" value=\"TOTHH_CY\">\n                <calcite-action slot=\"actions-end\" icon=\"person2\"></calcite-action>\n              </calcite-value-list-item>\n            </calcite-value-list>\n          </calcite-block>\n        </calcite-flow-item>\n      </calcite-flow>\n  </calcite-shell-panel>\n  <calcite-tip-manager slot=\"center-row\">\n    <calcite-tip heading=\"The Red Rocks and Blue Water\" thumbnail=\"https://placeimg.com/1000/600\" text-thumbnail=\"This is an image of nature.\">\n    <calcite-tip heading=\"The Long Trees\" thumbnail=\"https://placeimg.com/1000/600\" text-thumbnail=\"This is an image of trees.\">\n  </calcite-tip-manager>\n  <footer slot=\"footer\">Footer</footer>\n</calcite-shell>\n```\n",
         "Basic": "Renders a basic shell with a header and a footer.\n\n```html\n<calcite-shell>\n  <div slot=\"header\">\n    <header>\n      <h2>Shell Header: My App</h2>\n    </header>\n  </div>\n  <p>Shell Content</p>\n  <!-- insert map or fillable content here -->\n  <footer slot=\"footer\">Footer</footer>\n</calcite-shell>\n```\n",
         "With-panel-and-action-bar": "Renders a single panel with actions in an action bar.\n\n```html\n<calcite-shell>\n  <calcite-shell-panel slot=\"panel-start\" position=\"start\">\n    <img src=\"https://via.placeholder.com/300x200\" alt=\"placeholder\" />\n    <calcite-action-bar slot=\"action-bar\">\n      <calcite-action text=\"Add\" active icon=\"plus\"></calcite-action>\n      <calcite-action text=\"Save\" disabled icon=\"save\"></calcite-action>\n      <calcite-action text=\"Layers\" icon=\"layers\"></calcite-action>\n    </calcite-action-bar>\n  </calcite-shell-panel>\n</calcite-shell>\n```\n",
         "With-panels": "Renders a shell with a header and panels on the left and right sides of the app.\n\n```html\n<calcite-shell>\n  <calcite-shell-panel slot=\"panel-start\" position=\"start\">\n    Leading panel! (on the left side, since this is a LTR app)\n  </calcite-shell-panel>\n  <calcite-shell-panel slot=\"panel-end\" position=\"end\"> Trailing panel! (right side) </calcite-shell-panel>\n  <calcite-shell-center-row slot=\"center-row\" position=\"end\" height-scale=\"m\">\n    Center Row! (center bottom)\n  </calcite-shell-center-row>\n  <div slot=\"header\">\n    <header>\n      <h2>Shell Header: My App</h2>\n    </header>\n  </div>\n  <p>Shell Content</p>\n  <!-- insert map or fillable content here -->\n</calcite-shell>\n```\n"
@@ -18776,8 +18776,14 @@
           "attr": "detached",
           "reflectToAttr": true,
           "docs": "When `true`, the content area displays like a floating panel.",
-          "docsTags": [],
+          "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "use `displayMode` instead."
+            }
+          ],
           "default": "false",
+          "deprecation": "use `displayMode` instead.",
           "values": [
             {
               "type": "boolean"
@@ -18792,9 +18798,65 @@
           "mutable": false,
           "attr": "detached-height-scale",
           "reflectToAttr": true,
-          "docs": "When `detached`, specifies the maximum height of the component.",
+          "docs": "When `displayMode` is `float`, specifies the maximum height of the component.",
+          "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "use `heightScale` instead."
+            }
+          ],
+          "deprecation": "use `heightScale` instead.",
+          "values": [
+            {
+              "value": "l",
+              "type": "string"
+            },
+            {
+              "value": "m",
+              "type": "string"
+            },
+            {
+              "value": "s",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "displayMode",
+          "type": "\"dock\" | \"float\" | \"overlay\"",
+          "mutable": false,
+          "attr": "display-mode",
+          "reflectToAttr": true,
+          "docs": "Specifies the display mode - `\"dock\"` (full height, displays adjacent to center content), `\"float\"` (not full height, content is separated detached from `calcite-action-bar`, displays on top of center content),\nor `\"overlay\"` (full height, displays on top of center content).",
+          "docsTags": [],
+          "default": "\"dock\"",
+          "values": [
+            {
+              "value": "dock",
+              "type": "string"
+            },
+            {
+              "value": "float",
+              "type": "string"
+            },
+            {
+              "value": "overlay",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "heightScale",
+          "type": "\"l\" | \"m\" | \"s\"",
+          "mutable": false,
+          "attr": "height-scale",
+          "reflectToAttr": true,
+          "docs": "When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the maximum height of the component.",
           "docsTags": [],
-          "default": "\"l\"",
           "values": [
             {
               "value": "l",
@@ -18857,6 +18919,7 @@
           "reflectToAttr": true,
           "docs": "Specifies the component's position. Will be flipped when the element direction is right-to-left (`\"rtl\"`).",
           "docsTags": [],
+          "default": "\"start\"",
           "values": [
             {
               "value": "end",
@@ -18876,7 +18939,7 @@
           "mutable": false,
           "attr": "resizable",
           "reflectToAttr": true,
-          "docs": "When `true` and not `detached`, the component's content area is resizable.",
+          "docs": "When `true` and `displayMode` is not `float`, the component's content area is resizable.",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -18893,7 +18956,7 @@
           "mutable": false,
           "attr": "width-scale",
           "reflectToAttr": true,
-          "docs": "Specifies the width of the component's content area.",
+          "docs": "When `layout` is `vertical`, specifies the width of the component.",
           "docsTags": [],
           "default": "\"m\"",
           "values": [
@@ -18918,20 +18981,15 @@
       "events": [],
       "listeners": [],
       "styles": [
-        {
-          "name": "--calcite-shell-panel-detached-max-height",
-          "annotation": "prop",
-          "docs": "When `detached` is `true`, specifies the maximum height of the component."
-        },
         {
           "name": "--calcite-shell-panel-height",
           "annotation": "prop",
-          "docs": "When `layout` is `\"horizontal\"`, specifies the height of the component."
+          "docs": "When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the height of the component."
         },
         {
           "name": "--calcite-shell-panel-max-height",
           "annotation": "prop",
-          "docs": "When `layout` is `\"horizontal\"`, specifies the maximum height of the component."
+          "docs": "When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the maximum height of the component."
         },
         {
           "name": "--calcite-shell-panel-max-width",
@@ -18941,7 +18999,7 @@
         {
           "name": "--calcite-shell-panel-min-height",
           "annotation": "prop",
-          "docs": "When `layout` is `\"horizontal\"`, specifies the minimum height of the component."
+          "docs": "When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the minimum height of the component."
         },
         {
           "name": "--calcite-shell-panel-min-width",

package/dist/extras/vscode-data.json

@@ -3566,7 +3566,7 @@
         },
         {
           "name": "value",
-          "description": "The component's value in UTC (always 24-hour format)."
+          "description": "The time value in ISO (24-hour) format."
         }
       ]
     },
@@ -5018,7 +5018,37 @@
         },
         {
           "name": "detached-height-scale",
-          "description": "When `detached`, specifies the maximum height of the component.",
+          "description": "When `displayMode` is `float`, specifies the maximum height of the component.",
+          "values": [
+            {
+              "name": "l"
+            },
+            {
+              "name": "m"
+            },
+            {
+              "name": "s"
+            }
+          ]
+        },
+        {
+          "name": "display-mode",
+          "description": "Specifies the display mode - `\"dock\"` (full height, displays adjacent to center content), `\"float\"` (not full height, content is separated detached from `calcite-action-bar`, displays on top of center content),\nor `\"overlay\"` (full height, displays on top of center content).",
+          "values": [
+            {
+              "name": "dock"
+            },
+            {
+              "name": "float"
+            },
+            {
+              "name": "overlay"
+            }
+          ]
+        },
+        {
+          "name": "height-scale",
+          "description": "When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the maximum height of the component.",
           "values": [
             {
               "name": "l"
@@ -5057,11 +5087,11 @@
         },
         {
           "name": "resizable",
-          "description": "When `true` and not `detached`, the component's content area is resizable."
+          "description": "When `true` and `displayMode` is not `float`, the component's content area is resizable."
         },
         {
           "name": "width-scale",
-          "description": "Specifies the width of the component's content area.",
+          "description": "When `layout` is `vertical`, specifies the width of the component.",
           "values": [
             {
               "name": "l"

package/dist/loader/cdn.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.15
+ * v1.4.0-next.17
  */
 module.exports = require('../cjs/loader.cjs.js');
 module.exports.applyPolyfills = function() { return Promise.resolve() };

package/dist/loader/index.cjs.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.15
+ * v1.4.0-next.17
  */
 module.exports = require('../cjs/loader.cjs.js');
 module.exports.applyPolyfills = function() { return Promise.resolve() };

package/dist/loader/index.es2017.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.15
+ * v1.4.0-next.17
  */
 export * from '../esm/polyfills/index.js';
 export * from '../esm/loader.js';

package/dist/loader/index.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.4.0-next.15
+ * v1.4.0-next.17
  */
 (function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
 export * from '../esm/polyfills/index.js';

package/dist/types/components/date-picker-month-header/resources.d.ts

@@ -1,4 +1,3 @@
-export declare const BUDDHIST_CALENDAR_YEAR_OFFSET = 543;
 export declare const CSS: {
   header: string;
   month: string;

package/dist/types/components/input-time-picker/input-time-picker.d.ts

@@ -4,7 +4,7 @@ import { FormComponent } from "../../utils/form";
 import { InteractiveComponent } from "../../utils/interactive";
 import { LabelableComponent } from "../../utils/label";
 import { LoadableComponent } from "../../utils/loadable";
-import { LocalizedComponent, NumberingSystem } from "../../utils/locale";
+import { LocalizedComponent, NumberingSystem, SupportedLocales } from "../../utils/locale";
 import { FocusTrapComponent } from "../../utils/focusTrapComponent";
 import { FocusTrap } from "focus-trap";
 import { Scale } from "../interfaces";
@@ -53,6 +53,7 @@ export declare class InputTimePicker implements FloatingUIComponent, FocusTrapCo
    * Specifies the Unicode numeral system used by the component for localization.
    */
   numberingSystem: NumberingSystem;
+  numberingSystemWatcher(numberingSystem: NumberingSystem): void;
   /**
    * When `true`, the component must have a value in order for the form to submit.
    *
@@ -76,7 +77,8 @@ export declare class InputTimePicker implements FloatingUIComponent, FocusTrapCo
   placement: LogicalPlacement;
   /** Specifies the granularity the component's `value` must adhere to (in seconds). */
   step: number;
-  /** The component's value in UTC (always 24-hour format). */
+  stepWatcher(newStep: number, oldStep: number): void;
+  /** The time value in ISO (24-hour) format. */
   value: string;
   valueWatcher(newValue: string): void;
   defaultValue: InputTimePicker["value"];
@@ -89,20 +91,18 @@ export declare class InputTimePicker implements FloatingUIComponent, FocusTrapCo
   focusTrap: FocusTrap;
   private dialogId;
   /** whether the value of the input was changed as a result of user typing or not */
-  private internalValueChange;
-  private previousValidValue;
+  private userChangedValue;
   private referenceElementId;
   defaultMessages: InputTimePickerMessages;
   effectiveLocale: string;
-  valueRelatedPropChange(): void;
-  localizedValue: string;
+  effectiveLocaleWatcher(locale: SupportedLocales): Promise<void>;
   /**
    * Fires when the time value is changed as a result of user input.
    */
   calciteInputTimePickerChange: EventEmitter<void>;
-  private calciteInternalInputBlurHandler;
+  private hostBlurHandler;
   private calciteInternalInputFocusHandler;
-  private calciteInputInputHandler;
+  private calciteInternalInputInputHandler;
   private timePickerChangeHandler;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
@@ -112,16 +112,32 @@ export declare class InputTimePicker implements FloatingUIComponent, FocusTrapCo
    * @param delayed
    */
   reposition(delayed?: boolean): Promise<void>;
+  private delocalizeTimeString;
   private popoverCloseHandler;
   private popoverOpenHandler;
   keyDownHandler: (event: KeyboardEvent) => void;
+  private loadDateTimeLocaleData;
+  private getExtendedLocaleConfig;
   onLabelClick(): void;
   private shouldIncludeSeconds;
   private setCalcitePopoverEl;
   private setCalciteInputEl;
   private setCalciteTimePickerEl;
   private setInputValue;
+  /**
+   * Sets the value and emits a change event.
+   * This is used to update the value as a result of user interaction.
+   *
+   * @param value
+   */
   private setValue;
+  /**
+   * Sets the value directly without emitting a change event.
+   * This is used to update the value on initial load and when props change that are not the result of user interaction.
+   *
+   * @param value
+   */
+  private setValueDirectly;
   private onInputWrapperClick;
   deactivate: () => void;
   connectedCallback(): void;

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

@@ -0,0 +1 @@
+export type DisplayMode = "dock" | "float" | "overlay";

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

@@ -3,7 +3,8 @@ export declare const CSS: {
   content: string;
   contentHeader: string;
   contentBody: string;
-  contentDetached: string;
+  contentFloat: string;
+  contentOverlay: string;
   separator: string;
 };
 export declare const SLOTS: {

package/dist/types/components/shell-panel/shell-panel.d.ts

@@ -4,6 +4,7 @@ import { LocalizedComponent } from "../../utils/locale";
 import { T9nComponent } from "../../utils/t9n";
 import { Layout, Position, Scale } from "../interfaces";
 import { ShellPanelMessages } from "./assets/shell-panel/t9n";
+import { DisplayMode } from "./interfaces";
 /**
  * @slot - A slot for adding custom content.
  * @slot action-bar - A slot for adding a `calcite-action-bar` to the component.
@@ -15,14 +16,31 @@ export declare class ShellPanel implements ConditionalSlotComponent, LocalizedCo
   collapsed: boolean;
   /**
    * When `true`, the content area displays like a floating panel.
+   *
+   * @deprecated use `displayMode` instead.
    */
   detached: boolean;
+  handleDetached(value: boolean): void;
+  /**
+   * Specifies the display mode - `"dock"` (full height, displays adjacent to center content), `"float"` (not full height, content is separated detached from `calcite-action-bar`, displays on top of center content),
+   * or `"overlay"` (full height, displays on top of center content).
+   */
+  displayMode: DisplayMode;
+  handleDisplayMode(value: DisplayMode): void;
   /**
-   * When `detached`, specifies the maximum height of the component.
+   * When `displayMode` is `float`, specifies the maximum height of the component.
+   *
+   * @deprecated use `heightScale` instead.
    */
   detachedHeightScale: Scale;
+  handleDetachedHeightScale(value: Scale): void;
+  /**
+   * When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the maximum height of the component.
+   */
+  heightScale: Scale;
+  handleHeightScale(value: Scale): void;
   /**
-   * Specifies the width of the component's content area.
+   * When `layout` is `vertical`, specifies the width of the component.
    */
   widthScale: Scale;
   /**
@@ -35,7 +53,7 @@ export declare class ShellPanel implements ConditionalSlotComponent, LocalizedCo
    */
   position: Position;
   /**
-   * When `true` and not `detached`, the component's content area is resizable.
+   * When `true` and `displayMode` is not `float`, the component's content area is resizable.
    */
   resizable: boolean;
   /**

package/dist/types/components.d.ts

@@ -63,6 +63,7 @@ import { PickListItemMessages } from "./components/pick-list-item/assets/pick-li
 import { PopoverMessages } from "./components/popover/assets/popover/t9n";
 import { RatingMessages } from "./components/rating/assets/rating/t9n";
 import { ScrimMessages } from "./components/scrim/assets/scrim/t9n";
+import { DisplayMode } from "./components/shell-panel/interfaces";
 import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
 import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail } from "./components/stepper/interfaces";
 import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
@@ -2291,7 +2292,7 @@ export namespace Components {
          */
         "step": number;
         /**
-          * The component's value in UTC (always 24-hour format).
+          * The time value in ISO (24-hour) format.
          */
         "value": string;
     }
@@ -3395,12 +3396,22 @@ export namespace Components {
         "collapsed": boolean;
         /**
           * When `true`, the content area displays like a floating panel.
+          * @deprecated use `displayMode` instead.
          */
         "detached": boolean;
         /**
-          * When `detached`, specifies the maximum height of the component.
+          * When `displayMode` is `float`, specifies the maximum height of the component.
+          * @deprecated use `heightScale` instead.
          */
         "detachedHeightScale": Scale;
+        /**
+          * Specifies the display mode - `"dock"` (full height, displays adjacent to center content), `"float"` (not full height, content is separated detached from `calcite-action-bar`, displays on top of center content), or `"overlay"` (full height, displays on top of center content).
+         */
+        "displayMode": DisplayMode;
+        /**
+          * When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the maximum height of the component.
+         */
+        "heightScale": Scale;
         /**
           * The direction of the component.
          */
@@ -3418,11 +3429,11 @@ export namespace Components {
          */
         "position": Position;
         /**
-          * When `true` and not `detached`, the component's content area is resizable.
+          * When `true` and `displayMode` is not `float`, the component's content area is resizable.
          */
         "resizable": boolean;
         /**
-          * Specifies the width of the component's content area.
+          * When `layout` is `vertical`, specifies the width of the component.
          */
         "widthScale": Scale;
     }
@@ -7441,7 +7452,7 @@ declare namespace LocalJSX {
          */
         "step"?: number;
         /**
-          * The component's value in UTC (always 24-hour format).
+          * The time value in ISO (24-hour) format.
          */
         "value"?: string;
     }
@@ -8443,12 +8454,22 @@ declare namespace LocalJSX {
         "collapsed"?: boolean;
         /**
           * When `true`, the content area displays like a floating panel.
+          * @deprecated use `displayMode` instead.
          */
         "detached"?: boolean;
         /**
-          * When `detached`, specifies the maximum height of the component.
+          * When `displayMode` is `float`, specifies the maximum height of the component.
+          * @deprecated use `heightScale` instead.
          */
         "detachedHeightScale"?: Scale;
+        /**
+          * Specifies the display mode - `"dock"` (full height, displays adjacent to center content), `"float"` (not full height, content is separated detached from `calcite-action-bar`, displays on top of center content), or `"overlay"` (full height, displays on top of center content).
+         */
+        "displayMode"?: DisplayMode;
+        /**
+          * When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the maximum height of the component.
+         */
+        "heightScale"?: Scale;
         /**
           * The direction of the component.
          */
@@ -8462,11 +8483,11 @@ declare namespace LocalJSX {
          */
         "position"?: Position;
         /**
-          * When `true` and not `detached`, the component's content area is resizable.
+          * When `true` and `displayMode` is not `float`, the component's content area is resizable.
          */
         "resizable"?: boolean;
         /**
-          * Specifies the width of the component's content area.
+          * When `layout` is `vertical`, specifies the width of the component.
          */
         "widthScale"?: Scale;
     }

package/dist/types/utils/date.d.ts

@@ -37,6 +37,8 @@ export declare function dateFromISO(iso8601: string | Date, isEndDate?: boolean)
  * @param localeData
  */
 export declare function dateFromLocalizedString(value: string, localeData: DateLocaleData): Date;
+export declare function parseCalendarYear(year: number, localeData: DateLocaleData): number;
+export declare function formatCalendarYear(year: number, localeData: DateLocaleData): number;
 /**
  * Retrieve day, month, and year strings from a localized string
  *

package/dist/types/utils/resources.d.ts

@@ -11,6 +11,13 @@ export declare const CSS_UTILITY: {
   darkMode: string;
   lightMode: string;
   rtl: string;
+  calciteAnimate: string;
+  calciteAnimateIn: string;
+  calciteAnimateInUp: string;
+  calciteAnimateInDown: string;
+  calciteAnimateInRight: string;
+  calciteAnimateInLeft: string;
+  calciteAnimateInScale: string;
 };
 export declare const TEXT: {
   loading: string;

package/dist/types/utils/time.d.ts

@@ -50,4 +50,5 @@ interface GetTimePartsParameters {
 }
 export declare function getTimeParts({ value, locale, numberingSystem }: GetTimePartsParameters): Intl.DateTimeFormatPart[];
 export declare function parseTimeString(value: string): Time;
+export declare function toISOTimeString(value: string, includeSeconds?: boolean): string;
 export {};