@esri/calcite-components 1.7.0-next.1 → 1.7.0-next.11

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

@@ -0,0 +1,7 @@
+export declare const CSS: {
+  scrim: string;
+  container: string;
+  containerOpen: string;
+  content: string;
+  containerSlottedInShell: string;
+};

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

@@ -0,0 +1,100 @@
+import { EventEmitter, VNode } from "../../stencil-public-runtime";
+import { FocusTrap, FocusTrapComponent } from "../../utils/focusTrapComponent";
+import { LoadableComponent } from "../../utils/loadable";
+import { OpenCloseComponent } from "../../utils/openCloseComponent";
+import { DisplayMode } from "./interfaces";
+import { LogicalFlowPosition, Scale } from "../interfaces";
+export declare class Sheet implements OpenCloseComponent, FocusTrapComponent, LoadableComponent {
+  /**
+   *  Passes a function to run before the component closes.
+   *
+   * @returns {Promise<void>}
+   */
+  beforeClose: (el: HTMLCalciteSheetElement) => Promise<void>;
+  /**
+   * Specifies the display mode - `"float"` (content is separated detached),
+   * or `"overlay"` (displays on top of center content).
+   */
+  displayMode: DisplayMode;
+  /** When `true`, disables the default close on escape behavior. */
+  escapeDisabled: boolean;
+  /**
+   * When `position` is `"block-start"` or `"block-end"`, specifies the height of the component.
+   */
+  heightScale: Scale;
+  /**
+   * When `true`, prevents focus trapping.
+   */
+  focusTrapDisabled: boolean;
+  handleFocusTrapDisabled(focusTrapDisabled: boolean): void;
+  /**
+   * Specifies the label of the component.
+   */
+  label: string;
+  /** When `true`, displays and positions the component.  */
+  open: boolean;
+  toggleSheet(value: boolean): Promise<void>;
+  /**
+   * We use an internal property to handle styles for when a modal is actually opened, not just when the open attribute is applied. This is a property because we need to apply styles to the host element and to keep the styles present while beforeClose is .
+   *
+   * @internal.
+   */
+  opened: boolean;
+  /** When `true`, disables the closing of the component when clicked outside. */
+  outsideCloseDisabled: boolean;
+  /** Determines where the component will be positioned. */
+  position: LogicalFlowPosition;
+  /**
+   * This internal property, managed by a containing calcite-shell, is used
+   * to inform the component if special configuration or styles are needed
+   *
+   * @internal
+   */
+  slottedInShell: boolean;
+  /**
+   * When `position` is `"inline-start"` or `"inline-end"`, specifies the width of the component.
+   */
+  widthScale: Scale;
+  componentWillLoad(): Promise<void>;
+  componentDidLoad(): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): VNode;
+  openTransitionProp: string;
+  transitionEl: HTMLDivElement;
+  focusTrap: FocusTrap;
+  el: HTMLCalciteSheetElement;
+  private contentId;
+  private initialOverflowCSS;
+  private ignoreOpenChange;
+  private mutationObserver;
+  handleEscape(event: KeyboardEvent): void;
+  /** Fires when the component is requested to be closed and before the closing transition begins. */
+  calciteSheetBeforeClose: EventEmitter<void>;
+  /** Fires when the component is closed and animation is complete. */
+  calciteSheetClose: EventEmitter<void>;
+  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
+  calciteSheetBeforeOpen: EventEmitter<void>;
+  /** Fires when the component is open and animation is complete. */
+  calciteSheetOpen: EventEmitter<void>;
+  /**
+   * Sets focus on the component's "close" button (the first focusable item).
+   *
+   */
+  setFocus(): Promise<void>;
+  /**
+   * Updates the element(s) that are used within the focus-trap of the component.
+   */
+  updateFocusTrapElements(): Promise<void>;
+  onBeforeOpen(): void;
+  onOpen(): void;
+  onBeforeClose(): void;
+  onClose(): void;
+  private setTransitionEl;
+  private openEnd;
+  private openSheet;
+  private handleOutsideClose;
+  private closeSheet;
+  private removeOverflowHiddenClass;
+  private handleMutationObserver;
+}

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

@@ -16,5 +16,6 @@ export declare const SLOTS: {
   header: string;
   footer: string;
   alerts: string;
+  sheets: string;
   modals: string;
 };

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

@@ -11,6 +11,7 @@ import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
  * @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 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 shell.
+ * @slot sheets - A slot for adding `calcite-sheet` components. When placed in this slot, the alert position will be constrained to the extent of the shell.
  */
 export declare class Shell implements ConditionalSlotComponent {
   /**
@@ -22,15 +23,18 @@ export declare class Shell implements ConditionalSlotComponent {
   hasFooter: boolean;
   hasAlerts: boolean;
   hasModals: boolean;
+  hasSheets: boolean;
   connectedCallback(): void;
   disconnectedCallback(): void;
   handleHeaderSlotChange: (event: Event) => void;
   handleFooterSlotChange: (event: Event) => void;
   handleAlertsSlotChange: (event: Event) => void;
+  handleSheetsSlotChange: (event: Event) => void;
   handleModalsSlotChange: (event: Event) => void;
   renderHeader(): VNode;
   renderFooter(): VNode;
   renderAlerts(): VNode;
+  renderSheets(): VNode;
   renderModals(): VNode;
   renderContent(): VNode[];
   renderMain(): VNode;

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

@@ -7,4 +7,9 @@ export interface TreeItemSelectDetail {
    * Indicate if an item should be collapsed/expanded even if child selection is enabled.
    */
   forceToggle: boolean;
+  /**
+   * Indicates if an item selected & indeterminate properties should be updated.
+   * This will be set to true for user interaction changes and false for programmatic changes.
+   */
+  updateItem?: boolean;
 }

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

@@ -15,13 +15,14 @@ export declare class TreeItem implements ConditionalSlotComponent, InteractiveCo
   disabled: boolean;
   /** When `true`, the component is expanded. */
   expanded: boolean;
+  expandedHandler(newValue: boolean): void;
   /** When `true`, the icon will be 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;
   /** When `true`, the component is selected. */
   selected: boolean;
-  expandedHandler(newValue: boolean): void;
+  handleSelectedChange(value: boolean): void;
   /**
    * @internal
    */
@@ -70,6 +71,7 @@ export declare class TreeItem implements ConditionalSlotComponent, InteractiveCo
    * @internal
    */
   calciteInternalTreeItemSelect: EventEmitter<TreeItemSelectDetail>;
+  hasEndActions: boolean;
   /**
    * Used to make sure initially expanded tree-item can properly
    * transition and emit events from closed state when rendered.
@@ -77,11 +79,11 @@ export declare class TreeItem implements ConditionalSlotComponent, InteractiveCo
    * @private
    */
   updateAfterInitialRender: boolean;
+  actionSlotWrapper: HTMLElement;
   childrenSlotWrapper: HTMLElement;
   defaultSlotWrapper: HTMLElement;
-  actionSlotWrapper: HTMLElement;
   private parentTreeItem?;
-  hasEndActions: boolean;
+  private userChangedValue;
   private isActionEndEvent;
   private updateParentIsExpanded;
   /**

package/dist/types/components.d.ts

@@ -66,7 +66,8 @@ 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 { DisplayMode } from "./components/sheet/interfaces";
+import { DisplayMode as DisplayMode1 } 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";
@@ -215,6 +216,10 @@ export namespace Components {
         "textEnabled": boolean;
     }
     interface CalciteActionBar {
+        /**
+          * Specifies the accessible label for the last action-group.
+         */
+        "actionsEndGroupLabel": string;
         /**
           * When `true`, the expand-toggling behavior is disabled.
          */
@@ -265,6 +270,10 @@ export namespace Components {
           * When `true`, the component is expanded.
          */
         "expanded": boolean;
+        /**
+          * Specifies the label of the component. Required for accessibility.
+         */
+        "label": string;
         /**
           * Indicates the layout of the component.
           * @deprecated Use the `layout` property on the component's parent instead.
@@ -330,6 +339,10 @@ export namespace Components {
         "setFocus": () => Promise<void>;
     }
     interface CalciteActionPad {
+        /**
+          * Specifies the accessible label for the last action-group.
+         */
+        "actionsEndGroupLabel": string;
         /**
           * When `true`, the expand-toggling behavior is disabled.
          */
@@ -1015,10 +1028,10 @@ export namespace Components {
          */
         "selectedItems": HTMLCalciteComboboxItemElement[];
         /**
-          * specify the selection mode - multiple: allow any number of selected items (default) - single: only one selection) - ancestors: like multiple, but show ancestors of selected items as selected, only deepest children shown in chips
+          * Specifies the selection mode: - "multiple" allows any number of selected items (default), - "single" allows only one selection, - "single-persist" allow and require one open item, - "ancestors" is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips.
          */
         "selectionMode": Extract<
-    "single" | "ancestors" | "multiple",
+    "single" | "single-persist" | "ancestors" | "multiple",
     SelectionMode
   >;
         /**
@@ -1059,10 +1072,21 @@ export namespace Components {
           * When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`).
          */
         "iconFlipRtl": boolean;
+        /**
+          * Specifies the size of the component inherited from the `calcite-combobox`, defaults to `m`.
+         */
+        "scale": Scale;
         /**
           * When `true`, the component is selected.
          */
         "selected": boolean;
+        /**
+          * Specifies the selection mode: - "multiple" allows any number of selected items (default), - "single" allows only one selection, - "single-persist" allow and require one open item, - "ancestors" is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips.
+         */
+        "selectionMode": Extract<
+    "single" | "single-persist" | "ancestors" | "multiple",
+    SelectionMode
+  >;
         /**
           * The component's text.
          */
@@ -1085,6 +1109,10 @@ export namespace Components {
           * Specifies the title of the component.
          */
         "label": string;
+        /**
+          * Specifies the size of the component inherited from the `calcite-combobox`, defaults to `m`.
+         */
+        "scale": Scale;
     }
     interface CalciteDatePicker {
         /**
@@ -1354,13 +1382,13 @@ export namespace Components {
          */
         "groupTitle": string;
         /**
-          * Specifies the size of the component.
+          * Specifies the size of the component inherited from the parent `calcite-dropdown`, defaults to `m`.
          */
         "scale": Scale;
         /**
-          * Specifies the component's selection mode, where `"multiple"` allows any number of (or no) selected `calcite-dropdown-item`s, `"single"` allows and requires one selected `calcite-dropdown-item`, and `"none"` does not allow selection on `calcite-dropdown-item`s.
+          * Specifies the selection mode for `calcite-dropdown-item` children, defaults to `single`: - `multiple` allows any number of selected items, - `single` allows only one selection (default), - `none` doesn't allow for any selection.
          */
-        "selectionMode": Extract<"single" | "none" | "multiple", SelectionMode>;
+        "selectionMode": Extract<"none" | "single" | "multiple", SelectionMode>;
     }
     interface CalciteDropdownItem {
         /**
@@ -1387,10 +1415,18 @@ export namespace Components {
           * Specifies the relationship to the linked document defined in `href`.
          */
         "rel": string;
+        /**
+          * Specifies the size of the component inherited from `calcite-dropdown`, defaults to `m`.
+         */
+        "scale": Scale;
         /**
           * When `true`, the component is selected.
          */
         "selected": boolean;
+        /**
+          * Specifies the selection mode inherited from `calcite-dropdown-group`, defaults to `single`: - `multiple` allows any number of selected items, - `single` allows only one selection (default), - `none` doesn't allow for any selection.
+         */
+        "selectionMode": Extract<"none" | "single" | "multiple", SelectionMode>;
         /**
           * Sets focus on the component.
          */
@@ -2528,6 +2564,7 @@ export namespace Components {
   >;
         /**
           * Sets focus on the component's first focusable element.
+          * @returns
          */
         "setFocus": () => Promise<void>;
     }
@@ -2811,7 +2848,7 @@ export namespace Components {
         /**
           * Passes a function to run before the component closes.
          */
-        "beforeClose": (el: HTMLElement) => Promise<void>;
+        "beforeClose": (el: HTMLCalciteModalElement) => Promise<void>;
         /**
           * When `true`, disables the component's close button.
          */
@@ -2848,6 +2885,10 @@ export namespace Components {
           * When `true`, displays and positions the component.
          */
         "open": boolean;
+        /**
+          * We use an internal property to handle styles for when a modal is actually opened, not just when the open attribute is applied. This is a property because we need to apply styles to the host element and to keep the styles present while beforeClose is.
+         */
+        "opened": boolean;
         /**
           * When `true`, disables the closing of the component when clicked outside.
          */
@@ -3591,6 +3632,10 @@ export namespace Components {
         "width": Extract<"auto" | "full", Width>;
     }
     interface CalciteSegmentedControlItem {
+        /**
+          * Specifies the appearance style of the component inherited from parent `calcite-segmented-control`, defaults to `solid`.
+         */
+        "appearance": Extract<"outline" | "outline-fill" | "solid", Appearance>;
         /**
           * When `true`, the component is checked.
          */
@@ -3607,6 +3652,14 @@ export namespace Components {
           * Specifies an icon to display at the start of the component.
          */
         "iconStart": string;
+        /**
+          * Defines the layout of the component inherited from parent `calcite-segmented-control`, defaults to `horizontal`.
+         */
+        "layout": Layout;
+        /**
+          * Specifies the size of the component inherited from the `calcite-segmented-control`, defaults to `m`.
+         */
+        "scale": Scale;
         /**
           * The component's value.
          */
@@ -3655,6 +3708,65 @@ export namespace Components {
          */
         "width": Width;
     }
+    interface CalciteSheet {
+        /**
+          * Passes a function to run before the component closes.
+          * @returns
+         */
+        "beforeClose": (el: HTMLCalciteSheetElement) => Promise<void>;
+        /**
+          * Specifies the display mode - `"float"` (content is separated detached), or `"overlay"` (displays on top of center content).
+         */
+        "displayMode": DisplayMode;
+        /**
+          * When `true`, disables the default close on escape behavior.
+         */
+        "escapeDisabled": boolean;
+        /**
+          * When `true`, prevents focus trapping.
+         */
+        "focusTrapDisabled": boolean;
+        /**
+          * When `position` is `"block-start"` or `"block-end"`, specifies the height of the component.
+         */
+        "heightScale": Scale;
+        /**
+          * Specifies the label of the component.
+         */
+        "label": string;
+        /**
+          * When `true`, displays and positions the component.
+         */
+        "open": boolean;
+        /**
+          * We use an internal property to handle styles for when a modal is actually opened, not just when the open attribute is applied. This is a property because we need to apply styles to the host element and to keep the styles present while beforeClose is .
+         */
+        "opened": boolean;
+        /**
+          * When `true`, disables the closing of the component when clicked outside.
+         */
+        "outsideCloseDisabled": boolean;
+        /**
+          * Determines where the component will be positioned.
+         */
+        "position": LogicalFlowPosition;
+        /**
+          * Sets focus on the component's "close" button (the first focusable item).
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed
+         */
+        "slottedInShell": boolean;
+        /**
+          * Updates the element(s) that are used within the focus-trap of the component.
+         */
+        "updateFocusTrapElements": () => Promise<void>;
+        /**
+          * When `position` is `"inline-start"` or `"inline-end"`, specifies the width of the component.
+         */
+        "widthScale": Scale;
+    }
     interface CalciteShell {
         /**
           * Positions the center content behind any `calcite-shell-panel`s.
@@ -3693,7 +3805,7 @@ export namespace Components {
         /**
           * 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;
+        "displayMode": DisplayMode1;
         /**
           * When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the maximum height of the component.
          */
@@ -4918,6 +5030,10 @@ export interface CalciteSelectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCalciteSelectElement;
 }
+export interface CalciteSheetCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteSheetElement;
+}
 export interface CalciteSliderCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCalciteSliderElement;
@@ -5451,6 +5567,12 @@ declare global {
         prototype: HTMLCalciteSelectElement;
         new (): HTMLCalciteSelectElement;
     };
+    interface HTMLCalciteSheetElement extends Components.CalciteSheet, HTMLStencilElement {
+    }
+    var HTMLCalciteSheetElement: {
+        prototype: HTMLCalciteSheetElement;
+        new (): HTMLCalciteSheetElement;
+    };
     interface HTMLCalciteShellElement extends Components.CalciteShell, HTMLStencilElement {
     }
     var HTMLCalciteShellElement: {
@@ -5694,6 +5816,7 @@ declare global {
         "calcite-segmented-control": HTMLCalciteSegmentedControlElement;
         "calcite-segmented-control-item": HTMLCalciteSegmentedControlItemElement;
         "calcite-select": HTMLCalciteSelectElement;
+        "calcite-sheet": HTMLCalciteSheetElement;
         "calcite-shell": HTMLCalciteShellElement;
         "calcite-shell-center-row": HTMLCalciteShellCenterRowElement;
         "calcite-shell-panel": HTMLCalciteShellPanelElement;
@@ -5834,6 +5957,10 @@ declare namespace LocalJSX {
         "textEnabled"?: boolean;
     }
     interface CalciteActionBar {
+        /**
+          * Specifies the accessible label for the last action-group.
+         */
+        "actionsEndGroupLabel"?: string;
         /**
           * When `true`, the expand-toggling behavior is disabled.
          */
@@ -5876,6 +6003,10 @@ declare namespace LocalJSX {
           * When `true`, the component is expanded.
          */
         "expanded"?: boolean;
+        /**
+          * Specifies the label of the component. Required for accessibility.
+         */
+        "label"?: string;
         /**
           * Indicates the layout of the component.
           * @deprecated Use the `layout` property on the component's parent instead.
@@ -5933,6 +6064,10 @@ declare namespace LocalJSX {
         "scale"?: Scale;
     }
     interface CalciteActionPad {
+        /**
+          * Specifies the accessible label for the last action-group.
+         */
+        "actionsEndGroupLabel"?: string;
         /**
           * When `true`, the expand-toggling behavior is disabled.
          */
@@ -6589,10 +6724,10 @@ declare namespace LocalJSX {
          */
         "selectedItems"?: HTMLCalciteComboboxItemElement[];
         /**
-          * specify the selection mode - multiple: allow any number of selected items (default) - single: only one selection) - ancestors: like multiple, but show ancestors of selected items as selected, only deepest children shown in chips
+          * Specifies the selection mode: - "multiple" allows any number of selected items (default), - "single" allows only one selection, - "single-persist" allow and require one open item, - "ancestors" is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips.
          */
         "selectionMode"?: Extract<
-    "single" | "ancestors" | "multiple",
+    "single" | "single-persist" | "ancestors" | "multiple",
     SelectionMode
   >;
         /**
@@ -6914,13 +7049,9 @@ declare namespace LocalJSX {
          */
         "groupTitle"?: string;
         /**
-          * Specifies the size of the component.
+          * Specifies the selection mode for `calcite-dropdown-item` children, defaults to `single`: - `multiple` allows any number of selected items, - `single` allows only one selection (default), - `none` doesn't allow for any selection.
          */
-        "scale"?: Scale;
-        /**
-          * Specifies the component's selection mode, where `"multiple"` allows any number of (or no) selected `calcite-dropdown-item`s, `"single"` allows and requires one selected `calcite-dropdown-item`, and `"none"` does not allow selection on `calcite-dropdown-item`s.
-         */
-        "selectionMode"?: Extract<"single" | "none" | "multiple", SelectionMode>;
+        "selectionMode"?: Extract<"none" | "single" | "multiple", SelectionMode>;
     }
     interface CalciteDropdownItem {
         /**
@@ -8268,7 +8399,7 @@ declare namespace LocalJSX {
         /**
           * Passes a function to run before the component closes.
          */
-        "beforeClose"?: (el: HTMLElement) => Promise<void>;
+        "beforeClose"?: (el: HTMLCalciteModalElement) => Promise<void>;
         /**
           * When `true`, disables the component's close button.
          */
@@ -9044,6 +9175,65 @@ declare namespace LocalJSX {
          */
         "width"?: Width;
     }
+    interface CalciteSheet {
+        /**
+          * Passes a function to run before the component closes.
+          * @returns
+         */
+        "beforeClose"?: (el: HTMLCalciteSheetElement) => Promise<void>;
+        /**
+          * Specifies the display mode - `"float"` (content is separated detached), or `"overlay"` (displays on top of center content).
+         */
+        "displayMode"?: DisplayMode;
+        /**
+          * When `true`, disables the default close on escape behavior.
+         */
+        "escapeDisabled"?: boolean;
+        /**
+          * When `true`, prevents focus trapping.
+         */
+        "focusTrapDisabled"?: boolean;
+        /**
+          * When `position` is `"block-start"` or `"block-end"`, specifies the height of the component.
+         */
+        "heightScale"?: Scale;
+        /**
+          * Specifies the label of the component.
+         */
+        "label": string;
+        /**
+          * Fires when the component is requested to be closed and before the closing transition begins.
+         */
+        "onCalciteSheetBeforeClose"?: (event: CalciteSheetCustomEvent<void>) => void;
+        /**
+          * Fires when the component is added to the DOM but not rendered, and before the opening transition begins.
+         */
+        "onCalciteSheetBeforeOpen"?: (event: CalciteSheetCustomEvent<void>) => void;
+        /**
+          * Fires when the component is closed and animation is complete.
+         */
+        "onCalciteSheetClose"?: (event: CalciteSheetCustomEvent<void>) => void;
+        /**
+          * Fires when the component is open and animation is complete.
+         */
+        "onCalciteSheetOpen"?: (event: CalciteSheetCustomEvent<void>) => void;
+        /**
+          * When `true`, displays and positions the component.
+         */
+        "open"?: boolean;
+        /**
+          * When `true`, disables the closing of the component when clicked outside.
+         */
+        "outsideCloseDisabled"?: boolean;
+        /**
+          * Determines where the component will be positioned.
+         */
+        "position"?: LogicalFlowPosition;
+        /**
+          * When `position` is `"inline-start"` or `"inline-end"`, specifies the width of the component.
+         */
+        "widthScale"?: Scale;
+    }
     interface CalciteShell {
         /**
           * Positions the center content behind any `calcite-shell-panel`s.
@@ -9082,7 +9272,7 @@ declare namespace LocalJSX {
         /**
           * 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;
+        "displayMode"?: DisplayMode1;
         /**
           * When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the maximum height of the component.
          */
@@ -10102,6 +10292,7 @@ declare namespace LocalJSX {
         "calcite-segmented-control": CalciteSegmentedControl;
         "calcite-segmented-control-item": CalciteSegmentedControlItem;
         "calcite-select": CalciteSelect;
+        "calcite-sheet": CalciteSheet;
         "calcite-shell": CalciteShell;
         "calcite-shell-center-row": CalciteShellCenterRow;
         "calcite-shell-panel": CalciteShellPanel;
@@ -10221,6 +10412,7 @@ declare module "@stencil/core" {
             "calcite-segmented-control": LocalJSX.CalciteSegmentedControl & JSXBase.HTMLAttributes<HTMLCalciteSegmentedControlElement>;
             "calcite-segmented-control-item": LocalJSX.CalciteSegmentedControlItem & JSXBase.HTMLAttributes<HTMLCalciteSegmentedControlItemElement>;
             "calcite-select": LocalJSX.CalciteSelect & JSXBase.HTMLAttributes<HTMLCalciteSelectElement>;
+            "calcite-sheet": LocalJSX.CalciteSheet & JSXBase.HTMLAttributes<HTMLCalciteSheetElement>;
             "calcite-shell": LocalJSX.CalciteShell & JSXBase.HTMLAttributes<HTMLCalciteShellElement>;
             "calcite-shell-center-row": LocalJSX.CalciteShellCenterRow & JSXBase.HTMLAttributes<HTMLCalciteShellCenterRowElement>;
             "calcite-shell-panel": LocalJSX.CalciteShellPanel & JSXBase.HTMLAttributes<HTMLCalciteShellPanelElement>;

package/dist/types/preact.d.ts

@@ -337,6 +337,13 @@ declare module "preact/src/jsx" {
         "oncalciteSelectChange"?: (event: CustomEvent<any>) => void;
       }
 
+      "calcite-sheet": Omit<JSX.CalciteSheet, "onCalciteSheetBeforeClose" | "onCalciteSheetClose" | "onCalciteSheetBeforeOpen" | "onCalciteSheetOpen"> & JSXInternal.HTMLAttributes<HTMLCalciteSheetElement> & {
+        "oncalciteSheetBeforeClose"?: (event: CustomEvent<any>) => void;
+        "oncalciteSheetClose"?: (event: CustomEvent<any>) => void;
+        "oncalciteSheetBeforeOpen"?: (event: CustomEvent<any>) => void;
+        "oncalciteSheetOpen"?: (event: CustomEvent<any>) => void;
+      }
+
       "calcite-shell": JSX.CalciteShell & JSXInternal.HTMLAttributes<HTMLCalciteShellElement>
 
       "calcite-shell-center-row": JSX.CalciteShellCenterRow & JSXInternal.HTMLAttributes<HTMLCalciteShellCenterRowElement>