@esri/calcite-components 1.4.0-next.2 → 1.4.0-next.21

package/dist/types/components/color-picker-hex-input/color-picker-hex-input.d.ts

@@ -1,14 +1,11 @@
 import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { Scale } from "../interfaces";
 import Color from "color";
 import { LoadableComponent } from "../../utils/loadable";
 import { NumberingSystem } from "../../utils/locale";
-import { Scale } from "../interfaces";
+import { ColorPickerMessages } from "../color-picker/assets/color-picker/t9n";
 export declare class ColorPickerHexInput implements LoadableComponent {
   el: HTMLCalciteColorPickerHexInputElement;
-  /**
-   * Specifies accessible label for the input field.
-   */
-  hexLabel: string;
   connectedCallback(): void;
   componentWillLoad(): void;
   componentDidLoad(): void;
@@ -18,35 +15,55 @@ export declare class ColorPickerHexInput implements LoadableComponent {
    * When `true`, a color value is enforced, and clearing the input or blurring will restore the last valid `value`. When `false`, an empty color (`null`) will be allowed as a `value`.
    */
   allowEmpty: boolean;
+  /**
+   * When true, the component will allow updates to the color's alpha value.
+   */
+  alphaChannel: boolean;
+  /**
+   * Specifies accessible label for the input field.
+   *
+   * @deprecated use `messages` instead
+   */
+  hexLabel: string;
+  /**
+   * Messages are passed by parent component for accessible labels.
+   *
+   * @internal
+   */
+  messages: ColorPickerMessages;
+  /** Specifies the Unicode numeral system used by the component for localization. */
+  numberingSystem?: NumberingSystem;
   /** Specifies the size of the component. */
   scale: Scale;
   /**
-   * The Hex value.
+   * The hex value.
    */
   value: string;
-  /** Specifies the Unicode numeral system used by the component for localization. */
-  numberingSystem?: NumberingSystem;
   handleValueChange(value: string, oldValue: string): void;
   /**
    * Emitted when the hex value changes.
    */
   calciteColorPickerHexInputChange: EventEmitter<void>;
-  private onCalciteInternalInputBlur;
-  private onInputChange;
-  protected onInputKeyDown(event: KeyboardEvent): void;
-  private onPaste;
-  private inputNode;
+  private onHexInputBlur;
+  private onOpacityInputBlur;
+  private onHexInputChange;
+  private onOpacityInputChange;
+  protected onInputKeyDown: (event: KeyboardEvent) => void;
+  private onHexInputPaste;
+  private hexInputNode;
   /**
    * The last valid/selected color. Used as a fallback if an invalid hex code is entered.
    */
   internalColor: Color | null;
+  private opacityInputNode;
   private previousNonNullValue;
   render(): VNode;
   /** Sets focus on the component. */
   setFocus(): Promise<void>;
   private internalSetValue;
-  private storeInputRef;
-  private formatForInternalInput;
+  private storeHexInputRef;
+  private storeOpacityInputRef;
+  private formatHexForInternalInput;
+  private formatOpacityForInternalInput;
   private nudgeRGBChannels;
-  handleKeyDown(event: KeyboardEvent): void;
 }

package/dist/types/components/color-picker-hex-input/resources.d.ts

@@ -1,5 +1,5 @@
 export declare const CSS: {
   container: string;
-  preview: string;
-  input: string;
+  hexInput: string;
+  opacityInput: string;
 };

package/dist/types/components/color-picker-swatch/color-picker-swatch.d.ts

@@ -10,8 +10,8 @@ export declare class ColorPickerSwatch {
    *
    * @see https://developer.mozilla.org/en-US/docs/Web/CSS/color_value
    */
-  color: string;
-  handleColorChange(color: string): void;
+  color: string | null;
+  handleColorChange(color: string | null): void;
   /**
    * Specifies the size of the component.
    */
@@ -20,4 +20,5 @@ export declare class ColorPickerSwatch {
   private internalColor;
   componentWillLoad(): void;
   render(): VNode;
+  renderSwatch(): VNode;
 }

package/dist/types/components/color-picker-swatch/resources.d.ts

@@ -1,8 +1,13 @@
 export declare const CSS: {
   swatch: string;
-  noColorIcon: string;
+  noColorSwatch: string;
+  checker: string;
 };
 export declare const COLORS: {
   borderLight: string;
   borderDark: string;
 };
+export declare const CHECKER_DIMENSIONS: {
+  squareSize: number;
+  size: number;
+};

package/dist/types/components/combobox/combobox.d.ts

@@ -183,6 +183,7 @@ export declare class Combobox implements LabelableComponent, FormComponent, Inte
   setMaxScrollerHeight: () => Promise<void>;
   calciteChipCloseHandler: (comboboxItem: HTMLCalciteComboboxItemElement) => void;
   clickHandler: (event: MouseEvent) => void;
+  private ensureRecentSelectedItemIsActive;
   setInactiveIfNotContained: (event: Event) => void;
   setFloatingEl: (el: HTMLDivElement) => void;
   setContainerEl: (el: HTMLDivElement) => void;

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/flow-item/flow-item.d.ts

@@ -13,7 +13,7 @@ import { FlowItemMessages } from "./assets/flow-item/t9n";
  * @slot header-content - A slot for adding custom content to the component's header.
  * @slot header-menu-actions - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.
  * @slot fab - A slot for adding a `calcite-fab` (floating action button) to perform an action.
- * @slot footer-actions - A slot for adding `calcite-button`s to the component's footer.
+ * @slot footer-actions - [Deprecated] A slot for adding `calcite-button`s to the component's footer.
  * @slot footer - A slot for adding custom content to the component's footer.
  */
 export declare class FlowItem implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent {

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/input-time-zone/assets/input-time-zone/t9n/index.d.ts

@@ -0,0 +1,109 @@
+export type InputTimeZoneMessages = {
+  chooseTimeZone: string;
+  timeZoneLabel: string;
+  "Africa/Bujumbura": string;
+  "Africa/Ceuta": string;
+  "Africa/Djibouti": string;
+  "Africa/El_Aaiun": string;
+  "Africa/Luanda": string;
+  "Africa/Ouagadougou": string;
+  "America/Adak": string;
+  "America/Anchorage": string;
+  "America/Antigua": string;
+  "America/Argentina/Buenos_Aires": string;
+  "America/Asuncion": string;
+  "America/Belem": string;
+  "America/Belize": string;
+  "America/Creston": string;
+  "America/Danmarkshavn": string;
+  "America/Edmonton": string;
+  "America/Eirunepe": string;
+  "America/Halifax": string;
+  "America/Mazatlan": string;
+  "America/Mexico_City": string;
+  "America/Miquelon": string;
+  "America/Nassau": string;
+  "America/Noronha": string;
+  "America/Nuuk": string;
+  "America/Santiago": string;
+  "America/Scoresbysund": string;
+  "America/St_Johns": string;
+  "America/Vancouver": string;
+  "America/Winnipeg": string;
+  "Antarctica/Casey": string;
+  "Antarctica/Davis": string;
+  "Antarctica/DumontDUrville": string;
+  "Antarctica/Macquarie": string;
+  "Antarctica/Mawson": string;
+  "Antarctica/McMurdo": string;
+  "Antarctica/Palmer": string;
+  "Antarctica/Syowa": string;
+  "Antarctica/Troll": string;
+  "Antarctica/Vostok": string;
+  "Arctic/Longyearbyen": string;
+  "Asia/Amman": string;
+  "Asia/Bahrain": string;
+  "Asia/Beirut": string;
+  "Asia/Brunei": string;
+  "Asia/Damascus": string;
+  "Asia/Dhaka": string;
+  "Asia/Dubai": string;
+  "Asia/Gaza": string;
+  "Asia/Jakarta": string;
+  "Asia/Jayapura": string;
+  "Asia/Jerusalem": string;
+  "Asia/Kabul": string;
+  "Asia/Kamchatka": string;
+  "Asia/Kathmandu": string;
+  "Asia/Kolkata": string;
+  "Asia/Magadan": string;
+  "Asia/Nicosia": string;
+  "Asia/Qyzylorda": string;
+  "Asia/Tehran": string;
+  "Asia/Vladivostok": string;
+  "Asia/Yangon": string;
+  "Atlantic/Azores": string;
+  "Atlantic/Bermuda": string;
+  "Atlantic/Canary": string;
+  "Atlantic/Cape_Verde": string;
+  "Atlantic/Reykjavik": string;
+  "Atlantic/South_Georgia": string;
+  "Atlantic/Stanley": string;
+  "Australia/Brisbane": string;
+  "Australia/Broken_Hill": string;
+  "Australia/Darwin": string;
+  "Australia/Eucla": string;
+  "Australia/Hobart": string;
+  "Australia/Lord_Howe": string;
+  "Australia/Perth": string;
+  "Europe/Andorra": string;
+  "Europe/Astrakhan": string;
+  "Europe/Kaliningrad": string;
+  "Europe/London": string;
+  "Europe/Mariehamn": string;
+  "Europe/Minsk": string;
+  "Indian/Chagos": string;
+  "Indian/Christmas": string;
+  "Indian/Cocos": string;
+  "Indian/Comoro": string;
+  "Indian/Maldives": string;
+  "Indian/Mauritius": string;
+  "Pacific/Apia": string;
+  "Pacific/Auckland": string;
+  "Pacific/Chatham": string;
+  "Pacific/Chuuk": string;
+  "Pacific/Easter": string;
+  "Pacific/Enderbury": string;
+  "Pacific/Fiji": string;
+  "Pacific/Galapagos": string;
+  "Pacific/Gambier": string;
+  "Pacific/Kiritimati": string;
+  "Pacific/Marquesas": string;
+  "Pacific/Norfolk": string;
+  "Pacific/Pago_Pago": string;
+  "Pacific/Palau": string;
+  "Pacific/Pitcairn": string;
+  "Pacific/Pohnpei": string;
+  "Pacific/Rarotonga": string;
+  "Pacific/Tarawa": string;
+};

package/dist/types/components/list/list.d.ts

@@ -68,13 +68,18 @@ export declare class List implements InteractiveComponent, LoadableComponent {
    */
   selectionAppearance: SelectionAppearance;
   handleSelectionAppearanceChange(): void;
+  /**
+   * Emits when any of the list item selections have changed.
+   */
+  calciteListChange: EventEmitter<void>;
   /**
    * Emits when the component's filter has changed.
    */
   calciteListFilter: EventEmitter<void>;
   handleCalciteInternalFocusPreviousItem(event: CustomEvent): void;
-  handleCalciteListItemActive(event: CustomEvent): void;
-  handleCalciteListItemSelect(event: CustomEvent): void;
+  handleCalciteInternalListItemActive(event: CustomEvent): void;
+  handleCalciteListItemSelect(): void;
+  handleCalciteInternalListItemSelect(event: CustomEvent): void;
   handleCalciteListItemClose(): void;
   connectedCallback(): void;
   disconnectedCallback(): void;

package/dist/types/components/list/resources.d.ts

@@ -5,5 +5,5 @@ export declare const CSS: {
   tableContainer: string;
   sticky: string;
 };
-export declare const debounceTimeout = 100;
+export declare const debounceTimeout = 0;
 export type SelectionAppearance = "border" | "icon";

package/dist/types/components/menu/assets/menu/t9n/index.d.ts

@@ -0,0 +1,3 @@
+export type MenuMessages = {
+  more: string;
+};

package/dist/types/components/menu/menu.d.ts

@@ -0,0 +1,51 @@
+import { LoadableComponent } from "../../utils/loadable";
+import { LocalizedComponent } from "../../utils/locale";
+import { T9nComponent } from "../../utils/t9n";
+import { MenuMessages } from "./assets/menu/t9n";
+type Layout = "horizontal" | "vertical";
+export declare class CalciteMenu implements LocalizedComponent, T9nComponent, LoadableComponent {
+  el: HTMLCalciteMenuElement;
+  /**
+   * Accessible name for the component.
+   */
+  label: string;
+  /**
+   * Specifies the layout of the component.
+   */
+  layout: Layout;
+  handleLayoutChange(value: Layout): void;
+  /**
+   * Use this property to override individual strings used by the component.
+   */
+  messageOverrides: Partial<MenuMessages>;
+  onMessagesChange(): void;
+  /**
+   * Made into a prop for testing purposes only.
+   *
+   * @internal
+   */
+  messages: MenuMessages;
+  /**
+   * Specifies the role of `menu` component. Marked as internal for parsing the role attribute in `menu-item` component shadowDOM.
+   * This property falls outside of the `globalAttribute` interface pattern because it is immutable and has a default value.
+   * @internal
+   *
+   */
+  role: string;
+  defaultMessages: MenuMessages;
+  effectiveLocale: string;
+  effectiveLocaleChange(): void;
+  menuItems: HTMLCalciteMenuItemElement[];
+  connectedCallback(): void;
+  componentWillLoad(): Promise<void>;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  /** Sets focus on the component's first focusable element. */
+  setFocus(): Promise<void>;
+  calciteInternalNavMenuItemKeyEvent(event: CustomEvent): void;
+  handleMenuSlotChange: (event: Event) => void;
+  focusParentElement(el: HTMLCalciteMenuItemElement): void;
+  setMenuItemLayout(items: HTMLCalciteMenuItemElement[], layout: Layout): void;
+  render(): any;
+}
+export {};

package/dist/types/components/menu-item/assets/menu-item/t9n/index.d.ts

@@ -0,0 +1,4 @@
+export type MenuItemMessages = {
+  submenu: string;
+  open: string;
+};

package/dist/types/components/menu-item/interfaces.d.ts

@@ -0,0 +1,5 @@
+export interface MenuItemCustomEvent {
+  event: KeyboardEvent;
+  children?: HTMLCalciteMenuItemElement[];
+  isSubmenuOpen?: boolean;
+}

package/dist/types/components/menu-item/menu-item.d.ts

@@ -0,0 +1,100 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { FlipContext } from "../interfaces";
+import { Direction } from "../../utils/dom";
+import { LoadableComponent } from "../../utils/loadable";
+import { MenuItemCustomEvent } from "./interfaces";
+import { T9nComponent } from "../../utils/t9n";
+import { MenuItemMessages } from "./assets/menu-item/t9n";
+import { LocalizedComponent } from "../../utils/locale";
+type Layout = "horizontal" | "vertical";
+export declare class CalciteMenuItem implements LoadableComponent, T9nComponent, LocalizedComponent {
+  el: HTMLCalciteMenuItemElement;
+  /** When `true`, the component is highlighted. */
+  active: boolean;
+  /** When `true`, the component displays a breadcrumb trail for use as a navigational aid. */
+  breadcrumb: boolean;
+  /** Specifies the URL destination of the component, which can be set as an absolute or relative path.*/
+  href: string;
+  /** Specifies an icon to display at the end of the component. */
+  iconEnd: string;
+  /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
+  iconFlipRtl: FlipContext;
+  /** Specifies an icon to display at the start of the component. */
+  iconStart: string;
+  /**
+   * @internal
+   */
+  isTopLevelItem: boolean;
+  /** Accessible name for the component.*/
+  label: string;
+  /**
+   * @internal
+   */
+  layout: Layout;
+  /**
+   * Use this property to override individual strings used by the component.
+   */
+  messageOverrides: Partial<MenuItemMessages>;
+  onMessagesChange(): void;
+  /**
+   * Made into a prop for testing purposes only.
+   *
+   * @internal
+   */
+  messages: MenuItemMessages;
+  /** When `true`, the component will display any slotted `calcite-menu-item` in an open overflow menu.*/
+  open: boolean;
+  /**
+   * Defines the relationship between the `href` value and the current document.
+   *
+   * @mdn [rel](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel)
+   */
+  rel: string;
+  /**
+   * Specifies where to open the linked document defined in the `href` property.
+   *
+   * @mdn [target](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target)
+   */
+  target: string;
+  /** Specifies the text to display.*/
+  text: string;
+  /**
+   * @internal
+   */
+  topLevelMenuLayout: Layout;
+  defaultMessages: MenuItemMessages;
+  effectiveLocale: string;
+  effectiveLocaleChange(): void;
+  hasSubmenu: boolean;
+  submenuItems: HTMLCalciteMenuItemElement[];
+  anchorEl: HTMLAnchorElement;
+  dropdownActionEl: HTMLCalciteActionElement;
+  isFocused: boolean;
+  /** Sets focus on the component. */
+  setFocus(): Promise<void>;
+  /** @internal */
+  calciteInternalMenuItemKeyEvent: EventEmitter<MenuItemCustomEvent>;
+  /** Emits when the component is selected.*/
+  calciteMenuItemSelect: EventEmitter<void>;
+  handleClickOut(event: Event): void;
+  handleFocusOut(event: FocusEvent): void;
+  connectedCallback(): void;
+  componentWillLoad(): Promise<void>;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  private blurHandler;
+  private clickHandler;
+  private focusHandler;
+  private handleMenuItemSlotChange;
+  private keyDownHandler;
+  private selectMenuItem;
+  renderIconStart(): VNode;
+  renderIconEnd(): VNode;
+  renderBreadcrumbIcon(dir: Direction): VNode;
+  renderDropdownIcon(dir: Direction): VNode;
+  renderDropdownAction(dir: Direction): VNode;
+  renderSubmenuItems(dir: Direction): VNode;
+  renderItemContent(dir: Direction): VNode;
+  render(): any;
+}
+export {};

package/dist/types/components/menu-item/resources.d.ts

@@ -0,0 +1,19 @@
+export declare const CSS: {
+  container: string;
+  content: string;
+  dropdownVertical: string;
+  dropdownMenuItems: string;
+  dropdownAction: string;
+  layoutVertical: string;
+  hoverHrefIcon: string;
+  icon: string;
+  iconBreadcrumb: string;
+  iconDropdown: string;
+  iconEnd: string;
+  iconStart: string;
+  isParentVertical: string;
+  itemContent: string;
+  open: string;
+  nested: string;
+  textContainer: string;
+};

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

@@ -13,7 +13,7 @@ import { PanelMessages } from "./assets/panel/t9n";
  * @slot header-content - A slot for adding custom content to the header.
  * @slot header-menu-actions - A slot for adding an overflow menu with actions inside a `calcite-dropdown`.
  * @slot fab - A slot for adding a `calcite-fab` (floating action button) to perform an action.
- * @slot footer-actions - A slot for adding buttons to the footer.
+ * @slot footer-actions - [Deprecated] A slot for adding buttons to the footer.
  * @slot footer - A slot for adding custom content to the footer.
  */
 export declare class Panel implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent {

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;
   /**