@esri/calcite-components 1.9.0-next.10 → 1.9.0-next.12

package/dist/extras/vscode-data.json

@@ -2319,6 +2319,14 @@
           "name": "closed",
           "description": "When `true`, the component will be hidden."
         },
+        {
+          "name": "collapsed",
+          "description": "When `true`, hides the component's content area."
+        },
+        {
+          "name": "collapsible",
+          "description": "When `true`, the component is collapsible."
+        },
         {
           "name": "description",
           "description": "A description for the component."
@@ -4669,6 +4677,14 @@
           "name": "closed",
           "description": "When `true`, the component will be hidden."
         },
+        {
+          "name": "collapsed",
+          "description": "When `true`, hides the component's content area."
+        },
+        {
+          "name": "collapsible",
+          "description": "When `true`, the component is collapsible."
+        },
         {
           "name": "description",
           "description": "A description for the component."

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-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.10
+ * v1.9.0-next.12
  */
 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-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.10
+ * v1.9.0-next.12
  */
 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-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.10
+ * v1.9.0-next.12
  */
 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-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.10
+ * v1.9.0-next.12
  */
 (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/dropdown-group/dropdown-group.d.ts

@@ -27,6 +27,7 @@ export declare class DropdownGroup {
   calciteInternalDropdownItemChange: EventEmitter<RequestedItem>;
   connectedCallback(): void;
   componentWillLoad(): void;
+  disconnectedCallback(): void;
   render(): VNode;
   updateActiveItemOnChange(event: CustomEvent): void;
   el: HTMLCalciteDropdownGroupElement;

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

@@ -21,6 +21,20 @@ export declare class FlowItem implements InteractiveComponent, LoadableComponent
   closable: boolean;
   /** When `true`, the component will be hidden. */
   closed: boolean;
+  /**
+   * When `true`, hides the component's content area.
+   */
+  collapsed: boolean;
+  /**
+   * Specifies the direction of the collapse.
+   *
+   * @internal
+   */
+  collapseDirection: "down" | "up";
+  /**
+   * When `true`, the component is collapsible.
+   */
+  collapsible: boolean;
   /**
    * When provided, the method will be called before it is removed from its parent `calcite-flow`.
    */
@@ -81,6 +95,10 @@ export declare class FlowItem implements InteractiveComponent, LoadableComponent
    * Fires when the close button is clicked.
    */
   calciteFlowItemClose: EventEmitter<void>;
+  /**
+   * Fires when the collapse button is clicked.
+   */
+  calciteFlowItemToggle: EventEmitter<void>;
   el: HTMLCalciteFlowItemElement;
   containerEl: HTMLCalcitePanelElement;
   backButtonEl: HTMLCalciteActionElement;
@@ -89,6 +107,8 @@ export declare class FlowItem implements InteractiveComponent, LoadableComponent
   effectiveLocaleChange(): void;
   /**
    * Sets focus on the component.
+   *
+   * @returns promise.
    */
   setFocus(): Promise<void>;
   /**
@@ -100,11 +120,13 @@ export declare class FlowItem implements InteractiveComponent, LoadableComponent
    *   top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element
    *   behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).
    * });
-   * @param options
+   * @param options - allows specific coordinates to be defined.
+   * @returns - promise that resolves once the content is scrolled to.
    */
   scrollContentTo(options?: ScrollToOptions): Promise<void>;
   handlePanelScroll: (event: CustomEvent<void>) => void;
   handlePanelClose: (event: CustomEvent<void>) => void;
+  handlePanelToggle: (event: CustomEvent<void>) => void;
   backButtonClick: () => void;
   setBackRef: (node: HTMLCalciteActionElement) => void;
   setContainerRef: (node: HTMLCalcitePanelElement) => void;

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

@@ -1,4 +1,6 @@
 export type PanelMessages = {
   close: string;
   options: string;
+  collapse: string;
+  expand: string;
 };

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

@@ -25,6 +25,20 @@ export declare class Panel implements InteractiveComponent, LoadableComponent, L
   disabled: boolean;
   /** When `true`, displays a close button in the trailing side of the header. */
   closable: boolean;
+  /**
+   * When `true`, hides the component's content area.
+   */
+  collapsed: boolean;
+  /**
+   * Specifies the direction of the collapse.
+   *
+   * @internal
+   */
+  collapseDirection: "down" | "up";
+  /**
+   * When `true`, the component is collapsible.
+   */
+  collapsible: boolean;
   /**
    * Specifies the number at which section headings should start.
    */
@@ -60,8 +74,6 @@ export declare class Panel implements InteractiveComponent, LoadableComponent, L
   componentDidRender(): void;
   disconnectedCallback(): void;
   el: HTMLCalcitePanelElement;
-  backButtonEl: HTMLCalciteActionElement;
-  closeButtonEl: HTMLCalciteActionElement;
   containerEl: HTMLElement;
   panelScrollEl: HTMLElement;
   resizeObserver: ResizeObserver;
@@ -81,16 +93,19 @@ export declare class Panel implements InteractiveComponent, LoadableComponent, L
    * Fires when the close button is clicked.
    */
   calcitePanelClose: EventEmitter<void>;
+  /**
+   * Fires when the collapse button is clicked.
+   */
+  calcitePanelToggle: EventEmitter<void>;
   /**
    * Fires when the content is scrolled.
    */
   calcitePanelScroll: EventEmitter<void>;
   resizeHandler: () => void;
   setContainerRef: (node: HTMLElement) => void;
-  setCloseRef: (node: HTMLCalciteActionElement) => void;
-  setBackRef: (node: HTMLCalciteActionElement) => void;
   panelKeyDownHandler: (event: KeyboardEvent) => void;
   close: () => void;
+  collapse: () => void;
   panelScrollHandler: () => void;
   handleHeaderActionsStartSlotChange: (event: Event) => void;
   handleHeaderActionsEndSlotChange: (event: Event) => void;
@@ -113,14 +128,12 @@ export declare class Panel implements InteractiveComponent, LoadableComponent, L
    *   top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element
    *   behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).
    * });
-   * @param options
+   * @param options - allows specific coordinates to be defined.
+   * @returns - promise that resolves once the content is scrolled to.
    */
   scrollContentTo(options?: ScrollToOptions): Promise<void>;
   renderHeaderContent(): VNode;
   renderActionBar(): VNode;
-  /**
-   * Allows user to override the entire header-content node.
-   */
   renderHeaderSlottedContent(): VNode;
   renderHeaderStartActions(): VNode;
   renderHeaderActionsEnd(): VNode;

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

@@ -21,6 +21,8 @@ export declare const ICONS: {
   menu: string;
   backLeft: string;
   backRight: string;
+  expand: string;
+  collapse: string;
 };
 export declare const SLOTS: {
   actionBar: string;

package/dist/types/components.d.ts

@@ -1564,6 +1564,18 @@ export namespace Components {
           * When `true`, the component will be hidden.
          */
         "closed": boolean;
+        /**
+          * Specifies the direction of the collapse.
+         */
+        "collapseDirection": "down" | "up";
+        /**
+          * When `true`, hides the component's content area.
+         */
+        "collapsed": boolean;
+        /**
+          * When `true`, the component is collapsible.
+         */
+        "collapsible": boolean;
         /**
           * A description for the component.
          */
@@ -1599,11 +1611,13 @@ export namespace Components {
         /**
           * Scrolls the component's content to a specified set of coordinates.
           * @example myCalciteFlowItem.scrollContentTo({   left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.   top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element   behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value). });
-          * @param options
+          * @param options - allows specific coordinates to be defined.
+          * @returns - promise that resolves once the content is scrolled to.
          */
         "scrollContentTo": (options?: ScrollToOptions) => Promise<void>;
         /**
           * Sets focus on the component.
+          * @returns promise.
          */
         "setFocus": () => Promise<void>;
         /**
@@ -3157,6 +3171,18 @@ export namespace Components {
           * When `true`, the component will be hidden.
          */
         "closed": boolean;
+        /**
+          * Specifies the direction of the collapse.
+         */
+        "collapseDirection": "down" | "up";
+        /**
+          * When `true`, hides the component's content area.
+         */
+        "collapsed": boolean;
+        /**
+          * When `true`, the component is collapsible.
+         */
+        "collapsible": boolean;
         /**
           * A description for the component.
          */
@@ -3192,7 +3218,8 @@ export namespace Components {
         /**
           * Scrolls the component's content to a specified set of coordinates.
           * @example myCalciteFlowItem.scrollContentTo({   left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.   top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element   behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value). });
-          * @param options
+          * @param options - allows specific coordinates to be defined.
+          * @returns - promise that resolves once the content is scrolled to.
          */
         "scrollContentTo": (options?: ScrollToOptions) => Promise<void>;
         /**
@@ -7433,6 +7460,14 @@ declare namespace LocalJSX {
           * When `true`, the component will be hidden.
          */
         "closed"?: boolean;
+        /**
+          * When `true`, hides the component's content area.
+         */
+        "collapsed"?: boolean;
+        /**
+          * When `true`, the component is collapsible.
+         */
+        "collapsible"?: boolean;
         /**
           * A description for the component.
          */
@@ -7473,6 +7508,10 @@ declare namespace LocalJSX {
           * Fires when the content is scrolled.
          */
         "onCalciteFlowItemScroll"?: (event: CalciteFlowItemCustomEvent<void>) => void;
+        /**
+          * Fires when the collapse button is clicked.
+         */
+        "onCalciteFlowItemToggle"?: (event: CalciteFlowItemCustomEvent<void>) => void;
     }
     interface CalciteGraph {
         /**
@@ -8938,6 +8977,14 @@ declare namespace LocalJSX {
           * When `true`, the component will be hidden.
          */
         "closed"?: boolean;
+        /**
+          * When `true`, hides the component's content area.
+         */
+        "collapsed"?: boolean;
+        /**
+          * When `true`, the component is collapsible.
+         */
+        "collapsible"?: boolean;
         /**
           * A description for the component.
          */
@@ -8974,6 +9021,10 @@ declare namespace LocalJSX {
           * Fires when the content is scrolled.
          */
         "onCalcitePanelScroll"?: (event: CalcitePanelCustomEvent<void>) => void;
+        /**
+          * Fires when the collapse button is clicked.
+         */
+        "onCalcitePanelToggle"?: (event: CalcitePanelCustomEvent<void>) => void;
     }
     /**
      * @deprecated Use the `list` component instead.

package/dist/types/preact.d.ts

@@ -151,10 +151,11 @@ declare module "preact/src/jsx" {
 
       "calcite-flow": JSX.CalciteFlow & JSXInternal.HTMLAttributes<HTMLCalciteFlowElement>
 
-      "calcite-flow-item": Omit<JSX.CalciteFlowItem, "onCalciteFlowItemBack" | "onCalciteFlowItemScroll" | "onCalciteFlowItemClose"> & JSXInternal.HTMLAttributes<HTMLCalciteFlowItemElement> & {
+      "calcite-flow-item": Omit<JSX.CalciteFlowItem, "onCalciteFlowItemBack" | "onCalciteFlowItemScroll" | "onCalciteFlowItemClose" | "onCalciteFlowItemToggle"> & JSXInternal.HTMLAttributes<HTMLCalciteFlowItemElement> & {
         "oncalciteFlowItemBack"?: (event: CustomEvent<any>) => void;
         "oncalciteFlowItemScroll"?: (event: CustomEvent<any>) => void;
         "oncalciteFlowItemClose"?: (event: CustomEvent<any>) => void;
+        "oncalciteFlowItemToggle"?: (event: CustomEvent<any>) => void;
       }
 
       "calcite-graph": JSX.CalciteGraph & JSXInternal.HTMLAttributes<HTMLCalciteGraphElement>
@@ -290,8 +291,9 @@ declare module "preact/src/jsx" {
         "oncalcitePaginationChange"?: (event: CustomEvent<any>) => void;
       }
 
-      "calcite-panel": Omit<JSX.CalcitePanel, "onCalcitePanelClose" | "onCalcitePanelScroll"> & JSXInternal.HTMLAttributes<HTMLCalcitePanelElement> & {
+      "calcite-panel": Omit<JSX.CalcitePanel, "onCalcitePanelClose" | "onCalcitePanelToggle" | "onCalcitePanelScroll"> & JSXInternal.HTMLAttributes<HTMLCalcitePanelElement> & {
         "oncalcitePanelClose"?: (event: CustomEvent<any>) => void;
+        "oncalcitePanelToggle"?: (event: CustomEvent<any>) => void;
         "oncalcitePanelScroll"?: (event: CustomEvent<any>) => void;
       }
 

package/hydrate/index.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-design-system/blob/main/LICENSE.md for details.
- * v1.9.0-next.10
+ * v1.9.0-next.12
  */
 'use strict';
 
@@ -21885,10 +21885,14 @@ class DropdownGroup {
   //--------------------------------------------------------------------------
   connectedCallback() {
     this.updateItems();
+    this.mutationObserver?.observe(this.el, { childList: true });
   }
   componentWillLoad() {
     this.groupPosition = this.getGroupPosition();
   }
+  disconnectedCallback() {
+    this.mutationObserver?.disconnect();
+  }
   render() {
     const groupTitle = this.groupTitle ? (hAsync("span", { "aria-hidden": "true", class: "dropdown-title" }, this.groupTitle)) : null;
     const dropdownSeparator = this.groupPosition > 0 ? hAsync("div", { class: "dropdown-separator", role: "separator" }) : null;
@@ -22555,6 +22559,8 @@ const ICONS$b = {
   menu: "ellipsis",
   backLeft: "chevron-left",
   backRight: "chevron-right",
+  expand: "chevron-up",
+  collapse: "chevron-down",
 };
 const SLOTS$n = {
   actionBar: "action-bar",
@@ -22585,7 +22591,7 @@ const SLOTS$m = {
   footerActions: "footer-actions",
 };
 
-const flowItemCss = "/*!@:host*/.sc-calcite-flow-item-h{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}/*!@:host **/.sc-calcite-flow-item-h *.sc-calcite-flow-item{box-sizing:border-box}/*!@:host([disabled])*/[disabled].sc-calcite-flow-item-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-flow-item-h *.sc-calcite-flow-item,.sc-calcite-flow-item-h[disabled] .sc-calcite-flow-item-s>*{pointer-events:none}/*!@:host*/.sc-calcite-flow-item-h{position:relative;display:flex;inline-size:100%;flex:1 1 auto;overflow:hidden;--calcite-flow-item-footer-padding:0.5rem}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-flow-item-h[disabled] .sc-calcite-flow-item-s>[calcite-hydrated][disabled],[disabled].sc-calcite-flow-item-h [calcite-hydrated][disabled].sc-calcite-flow-item{opacity:1}/*!@.back-button*/.back-button.sc-calcite-flow-item{border-width:0px;border-style:solid;border-color:var(--calcite-ui-border-3);border-inline-end-width:1px}/*!@calcite-panel*/calcite-panel.sc-calcite-flow-item{--calcite-panel-footer-padding:var(--calcite-flow-item-footer-padding)}/*!@:host([hidden])*/[hidden].sc-calcite-flow-item-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-flow-item{display:none}";
+const flowItemCss = "/*!@:host*/.sc-calcite-flow-item-h{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}/*!@:host **/.sc-calcite-flow-item-h *.sc-calcite-flow-item{box-sizing:border-box}/*!@:host([disabled])*/[disabled].sc-calcite-flow-item-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-flow-item-h *.sc-calcite-flow-item,.sc-calcite-flow-item-h[disabled] .sc-calcite-flow-item-s>*{pointer-events:none}/*!@:host*/.sc-calcite-flow-item-h{position:relative;display:flex;inline-size:100%;flex:1 1 auto;overflow:hidden}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-flow-item-h[disabled] .sc-calcite-flow-item-s>[calcite-hydrated][disabled],[disabled].sc-calcite-flow-item-h [calcite-hydrated][disabled].sc-calcite-flow-item{opacity:1}/*!@.back-button*/.back-button.sc-calcite-flow-item{border-width:0px;border-style:solid;border-color:var(--calcite-ui-border-3);border-inline-end-width:1px}/*!@calcite-panel*/calcite-panel.sc-calcite-flow-item{--calcite-panel-footer-padding:var(--calcite-flow-item-footer-padding);--calcite-panel-header-border-block-end:var(--calcite-flow-item-header-border-block-end)}/*!@:host([hidden])*/[hidden].sc-calcite-flow-item-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-flow-item{display:none}";
 
 /**
  * @slot - A slot for adding custom content.
@@ -22604,6 +22610,7 @@ class FlowItem {
     this.calciteFlowItemBack = createEvent(this, "calciteFlowItemBack", 7);
     this.calciteFlowItemScroll = createEvent(this, "calciteFlowItemScroll", 6);
     this.calciteFlowItemClose = createEvent(this, "calciteFlowItemClose", 6);
+    this.calciteFlowItemToggle = createEvent(this, "calciteFlowItemToggle", 6);
     // --------------------------------------------------------------------------
     //
     //  Private Methods
@@ -22617,6 +22624,10 @@ class FlowItem {
       event.stopPropagation();
       this.calciteFlowItemClose.emit();
     };
+    this.handlePanelToggle = (event) => {
+      event.stopPropagation();
+      this.calciteFlowItemToggle.emit();
+    };
     this.backButtonClick = () => {
       this.calciteFlowItemBack.emit();
     };
@@ -22628,6 +22639,9 @@ class FlowItem {
     };
     this.closable = false;
     this.closed = false;
+    this.collapsed = false;
+    this.collapseDirection = "down";
+    this.collapsible = false;
     this.beforeBack = undefined;
     this.description = undefined;
     this.disabled = false;
@@ -22679,6 +22693,8 @@ class FlowItem {
   // --------------------------------------------------------------------------
   /**
    * Sets focus on the component.
+   *
+   * @returns promise.
    */
   async setFocus() {
     await componentFocusable(this);
@@ -22699,7 +22715,8 @@ class FlowItem {
    *   top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element
    *   behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).
    * });
-   * @param options
+   * @param options - allows specific coordinates to be defined.
+   * @returns - promise that resolves once the content is scrolled to.
    */
   async scrollContentTo(options) {
     await this.containerEl?.scrollContentTo(options);
@@ -22720,8 +22737,8 @@ class FlowItem {
       ref: this.setBackRef })) : null;
   }
   render() {
-    const { closable, closed, description, disabled, heading, headingLevel, loading, menuOpen, messages, } = this;
-    return (hAsync(Host, null, hAsync("calcite-panel", { closable: closable, closed: closed, description: description, disabled: disabled, heading: heading, headingLevel: headingLevel, loading: loading, menuOpen: menuOpen, messageOverrides: messages, onCalcitePanelClose: this.handlePanelClose, onCalcitePanelScroll: this.handlePanelScroll,
+    const { collapsed, collapseDirection, collapsible, closable, closed, description, disabled, heading, headingLevel, loading, menuOpen, messages, } = this;
+    return (hAsync(Host, null, hAsync("calcite-panel", { closable: closable, closed: closed, collapseDirection: collapseDirection, collapsed: collapsed, collapsible: collapsible, description: description, disabled: disabled, heading: heading, headingLevel: headingLevel, loading: loading, menuOpen: menuOpen, messageOverrides: messages, onCalcitePanelClose: this.handlePanelClose, onCalcitePanelScroll: this.handlePanelScroll, onCalcitePanelToggle: this.handlePanelToggle,
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setContainerRef }, this.renderBackButton(), hAsync("slot", { name: SLOTS$m.actionBar, slot: SLOTS$n.actionBar }), hAsync("slot", { name: SLOTS$m.headerActionsStart, slot: SLOTS$n.headerActionsStart }), hAsync("slot", { name: SLOTS$m.headerActionsEnd, slot: SLOTS$n.headerActionsEnd }), hAsync("slot", { name: SLOTS$m.headerContent, slot: SLOTS$n.headerContent }), hAsync("slot", { name: SLOTS$m.headerMenuActions, slot: SLOTS$n.headerMenuActions }), hAsync("slot", { name: SLOTS$m.fab, slot: SLOTS$n.fab }), hAsync("slot", { name: SLOTS$m.footerActions, slot: SLOTS$n.footerActions }), hAsync("slot", { name: SLOTS$m.footer, slot: SLOTS$n.footer }), hAsync("slot", null))));
   }
@@ -22738,6 +22755,9 @@ class FlowItem {
     "$members$": {
       "closable": [516],
       "closed": [516],
+      "collapsed": [516],
+      "collapseDirection": [1, "collapse-direction"],
+      "collapsible": [516],
       "beforeBack": [16],
       "description": [1],
       "disabled": [516],
@@ -22755,7 +22775,7 @@ class FlowItem {
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": [["closable", "closable"], ["closed", "closed"], ["disabled", "disabled"], ["headingLevel", "heading-level"], ["loading", "loading"], ["menuOpen", "menu-open"]]
+    "$attrsToReflect$": [["closable", "closable"], ["closed", "closed"], ["collapsed", "collapsed"], ["collapsible", "collapsible"], ["disabled", "disabled"], ["headingLevel", "heading-level"], ["loading", "loading"], ["menuOpen", "menu-open"]]
   }; }
 }
 
@@ -34960,7 +34980,7 @@ class Pagination {
   }; }
 }
 
-const panelCss = "/*!@:host*/.sc-calcite-panel-h{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}/*!@:host **/.sc-calcite-panel-h *.sc-calcite-panel{box-sizing:border-box}/*!@:host([disabled])*/[disabled].sc-calcite-panel-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-panel-h *.sc-calcite-panel,.sc-calcite-panel-h[disabled] .sc-calcite-panel-s>*{pointer-events:none}/*!@:host*/.sc-calcite-panel-h{position:relative;display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;overflow:hidden;--calcite-min-header-height:calc(var(--calcite-icon-size) * 3);--calcite-panel-footer-padding:0.5rem;--calcite-internal-panel-header-border-block-end:1px solid var(--calcite-ui-border-3)}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-panel-h[disabled] .sc-calcite-panel-s>[calcite-hydrated][disabled],[disabled].sc-calcite-panel-h [calcite-hydrated][disabled].sc-calcite-panel{opacity:1}/*!@.header*/.header.sc-calcite-panel{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-ui-text-2);color:var(--calcite-ui-text-2)}/*!@.heading*/.heading.sc-calcite-panel{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}/*!@.header .heading*/.header.sc-calcite-panel .heading.sc-calcite-panel{flex:1 1 auto;padding:0.5rem}/*!@.container*/.container.sc-calcite-panel{margin:0px;display:flex;inline-size:100%;flex:1 1 auto;flex-direction:column;align-items:stretch;background-color:var(--calcite-ui-background);padding:0px;transition:max-block-size var(--calcite-animation-timing), inline-size var(--calcite-animation-timing)}/*!@.container[hidden]*/.container[hidden].sc-calcite-panel{display:none}/*!@.header*/.header.sc-calcite-panel{z-index:var(--calcite-app-z-index-header);display:flex;flex-direction:column;background-color:var(--calcite-ui-foreground-1);border-block-end:var(--calcite-internal-panel-header-border-block-end)}/*!@.header-container*/.header-container.sc-calcite-panel{display:flex;inline-size:100%;flex-direction:row;align-items:stretch;justify-content:flex-start;flex:0 0 auto}/*!@.header-container--border-end*/.header-container--border-end.sc-calcite-panel{border-block-end:1px solid var(--calcite-ui-border-3)}/*!@.action-bar-container*/.action-bar-container.sc-calcite-panel{inline-size:100%}/*!@.action-bar-container ::slotted(calcite-action-bar)*/.action-bar-container .sc-calcite-panel-s>calcite-action-bar{inline-size:100%}/*!@.header-content*/.header-content.sc-calcite-panel{display:flex;flex-direction:column;overflow:hidden;padding-inline:0.75rem;padding-block:0.875rem;margin-inline-end:auto}/*!@.header-content .heading,\n.header-content .description*/.header-content.sc-calcite-panel .heading.sc-calcite-panel,.header-content.sc-calcite-panel .description.sc-calcite-panel{display:block;overflow-wrap:break-word;padding:0px}/*!@.header-content .heading*/.header-content.sc-calcite-panel .heading.sc-calcite-panel{margin-inline:0px;margin-block:0px 0.25rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;font-weight:var(--calcite-font-weight-medium)}/*!@.header-content .heading:only-child*/.header-content.sc-calcite-panel .heading.sc-calcite-panel:only-child{margin-block-end:0px}/*!@.header-content .description*/.header-content.sc-calcite-panel .description.sc-calcite-panel{font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-ui-text-2)}/*!@.back-button*/.back-button.sc-calcite-panel{border-width:0px;border-style:solid;border-color:var(--calcite-ui-border-3);border-inline-end-width:1px}/*!@.header-actions*/.header-actions.sc-calcite-panel{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch}/*!@.header-actions--end*/.header-actions--end.sc-calcite-panel{margin-inline-start:auto}/*!@.content-wrapper*/.content-wrapper.sc-calcite-panel{display:flex;block-size:100%;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch;overflow:auto;background-color:var(--calcite-ui-background)}/*!@.footer*/.footer.sc-calcite-panel{display:flex;inline-size:100%;justify-content:space-evenly;background-color:var(--calcite-ui-foreground-1);flex:0 0 auto;padding:var(--calcite-panel-footer-padding);border-block-start:1px solid var(--calcite-ui-border-3)}/*!@.fab-container*/.fab-container.sc-calcite-panel{position:sticky;inset-block-end:0px;z-index:var(--calcite-app-z-index-sticky);margin-block:0px;margin-inline:auto;display:block;padding:0.5rem;inset-inline:0;inline-size:-moz-fit-content;inline-size:fit-content}/*!@:host([hidden])*/[hidden].sc-calcite-panel-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-panel{display:none}";
+const panelCss = "/*!@:host*/.sc-calcite-panel-h{box-sizing:border-box;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2);font-size:var(--calcite-font-size--1)}/*!@:host **/.sc-calcite-panel-h *.sc-calcite-panel{box-sizing:border-box}/*!@:host([disabled])*/[disabled].sc-calcite-panel-h{cursor:default;-webkit-user-select:none;user-select:none;opacity:var(--calcite-ui-opacity-disabled)}/*!@:host([disabled]) *,\n:host([disabled]) ::slotted(*)*/[disabled].sc-calcite-panel-h *.sc-calcite-panel,.sc-calcite-panel-h[disabled] .sc-calcite-panel-s>*{pointer-events:none}/*!@:host*/.sc-calcite-panel-h{position:relative;display:flex;block-size:100%;inline-size:100%;flex:1 1 auto;overflow:hidden;--calcite-min-header-height:calc(var(--calcite-icon-size) * 3)}/*!@:host([disabled]) ::slotted([calcite-hydrated][disabled]),\n:host([disabled]) [calcite-hydrated][disabled]*/.sc-calcite-panel-h[disabled] .sc-calcite-panel-s>[calcite-hydrated][disabled],[disabled].sc-calcite-panel-h [calcite-hydrated][disabled].sc-calcite-panel{opacity:1}/*!@.header*/.header.sc-calcite-panel{margin:0px;display:flex;align-content:space-between;align-items:center;fill:var(--calcite-ui-text-2);color:var(--calcite-ui-text-2)}/*!@.heading*/.heading.sc-calcite-panel{margin:0px;padding:0px;font-weight:var(--calcite-font-weight-medium)}/*!@.header .heading*/.header.sc-calcite-panel .heading.sc-calcite-panel{flex:1 1 auto;padding:0.5rem}/*!@.container*/.container.sc-calcite-panel{margin:0px;display:flex;inline-size:100%;flex:1 1 auto;flex-direction:column;align-items:stretch;background-color:var(--calcite-ui-background);padding:0px;transition:max-block-size var(--calcite-animation-timing), inline-size var(--calcite-animation-timing)}/*!@.container[hidden]*/.container[hidden].sc-calcite-panel{display:none}/*!@.header*/.header.sc-calcite-panel{z-index:var(--calcite-app-z-index-header);display:flex;flex-direction:column;background-color:var(--calcite-ui-foreground-1);border-block-end:var(--calcite-panel-header-border-block-end, 1px solid var(--calcite-ui-border-3))}/*!@.header-container*/.header-container.sc-calcite-panel{display:flex;inline-size:100%;flex-direction:row;align-items:stretch;justify-content:flex-start;flex:0 0 auto}/*!@.header-container--border-end*/.header-container--border-end.sc-calcite-panel{border-block-end:1px solid var(--calcite-ui-border-3)}/*!@.action-bar-container*/.action-bar-container.sc-calcite-panel{inline-size:100%}/*!@.action-bar-container ::slotted(calcite-action-bar)*/.action-bar-container .sc-calcite-panel-s>calcite-action-bar{inline-size:100%}/*!@.header-content*/.header-content.sc-calcite-panel{display:flex;flex-direction:column;overflow:hidden;padding-inline:0.75rem;padding-block:0.875rem;margin-inline-end:auto}/*!@.header-content .heading,\n.header-content .description*/.header-content.sc-calcite-panel .heading.sc-calcite-panel,.header-content.sc-calcite-panel .description.sc-calcite-panel{display:block;overflow-wrap:break-word;padding:0px}/*!@.header-content .heading*/.header-content.sc-calcite-panel .heading.sc-calcite-panel{margin-inline:0px;margin-block:0px 0.25rem;font-size:var(--calcite-font-size-0);line-height:1.25rem;font-weight:var(--calcite-font-weight-medium)}/*!@.header-content .heading:only-child*/.header-content.sc-calcite-panel .heading.sc-calcite-panel:only-child{margin-block-end:0px}/*!@.header-content .description*/.header-content.sc-calcite-panel .description.sc-calcite-panel{font-size:var(--calcite-font-size--1);line-height:1rem;color:var(--calcite-ui-text-2)}/*!@.back-button*/.back-button.sc-calcite-panel{border-width:0px;border-style:solid;border-color:var(--calcite-ui-border-3);border-inline-end-width:1px}/*!@.header-actions*/.header-actions.sc-calcite-panel{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:stretch}/*!@.header-actions--end*/.header-actions--end.sc-calcite-panel{margin-inline-start:auto}/*!@.content-wrapper*/.content-wrapper.sc-calcite-panel{display:flex;block-size:100%;flex:1 1 auto;flex-direction:column;flex-wrap:nowrap;align-items:stretch;overflow:auto;background-color:var(--calcite-ui-background)}/*!@.footer*/.footer.sc-calcite-panel{display:flex;inline-size:100%;justify-content:space-evenly;background-color:var(--calcite-ui-foreground-1);flex:0 0 auto;padding:var(--calcite-panel-footer-padding, 0.5rem);border-block-start:1px solid var(--calcite-ui-border-3)}/*!@.fab-container*/.fab-container.sc-calcite-panel{position:sticky;inset-block-end:0px;z-index:var(--calcite-app-z-index-sticky);margin-block:0px;margin-inline:auto;display:block;padding:0.5rem;inset-inline:0;inline-size:-moz-fit-content;inline-size:fit-content}/*!@:host([hidden])*/[hidden].sc-calcite-panel-h{display:none}/*!@[hidden]*/[hidden].sc-calcite-panel{display:none}";
 
 /**
  * @slot - A slot for adding custom content.
@@ -34977,6 +34997,7 @@ class Panel {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.calcitePanelClose = createEvent(this, "calcitePanelClose", 6);
+    this.calcitePanelToggle = createEvent(this, "calcitePanelToggle", 6);
     this.calcitePanelScroll = createEvent(this, "calcitePanelScroll", 6);
     this.resizeObserver = createObserver();
     // --------------------------------------------------------------------------
@@ -34996,12 +35017,6 @@ class Panel {
     this.setContainerRef = (node) => {
       this.containerEl = node;
     };
-    this.setCloseRef = (node) => {
-      this.closeButtonEl = node;
-    };
-    this.setBackRef = (node) => {
-      this.backButtonEl = node;
-    };
     this.panelKeyDownHandler = (event) => {
       if (this.closable && event.key === "Escape" && !event.defaultPrevented) {
         this.close();
@@ -35012,6 +35027,10 @@ class Panel {
       this.closed = true;
       this.calcitePanelClose.emit();
     };
+    this.collapse = () => {
+      this.collapsed = !this.collapsed;
+      this.calcitePanelToggle.emit();
+    };
     this.panelScrollHandler = () => {
       this.calcitePanelScroll.emit();
     };
@@ -35052,6 +35071,9 @@ class Panel {
     this.closed = false;
     this.disabled = false;
     this.closable = false;
+    this.collapsed = false;
+    this.collapseDirection = "down";
+    this.collapsible = false;
     this.headingLevel = undefined;
     this.loading = false;
     this.heading = undefined;
@@ -35124,7 +35146,8 @@ class Panel {
    *   top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element
    *   behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).
    * });
-   * @param options
+   * @param options - allows specific coordinates to be defined.
+   * @returns - promise that resolves once the content is scrolled to.
    */
   async scrollContentTo(options) {
     this.panelScrollEl?.scrollTo(options);
@@ -35143,9 +35166,6 @@ class Panel {
   renderActionBar() {
     return (hAsync("div", { class: CSS$N.actionBarContainer, hidden: !this.hasActionBar }, hAsync("slot", { name: SLOTS$n.actionBar, onSlotchange: this.handleActionBarSlotChange })));
   }
-  /**
-   * Allows user to override the entire header-content node.
-   */
   renderHeaderSlottedContent() {
     return (hAsync("div", { class: CSS$N.headerContent, hidden: !this.hasHeaderContent, key: "slotted-header-content" }, hAsync("slot", { name: SLOTS$n.headerContent, onSlotchange: this.handleHeaderContentSlotChange })));
   }
@@ -35154,26 +35174,30 @@ class Panel {
     return (hAsync("div", { class: { [CSS$N.headerActionsStart]: true, [CSS$N.headerActions]: true }, hidden: !hasStartActions, key: "header-actions-start" }, hAsync("slot", { name: SLOTS$n.headerActionsStart, onSlotchange: this.handleHeaderActionsStartSlotChange })));
   }
   renderHeaderActionsEnd() {
-    const { close, hasEndActions, messages, closable, hasMenuItems } = this;
-    const text = messages.close;
-    const closableNode = closable ? (hAsync("calcite-action", { "aria-label": text, "data-test": "close", icon: ICONS$b.close, onClick: close, text: text, title: text,
-      // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
-      ref: this.setCloseRef })) : null;
+    const { hasEndActions, messages, closable, collapsed, collapseDirection, collapsible, hasMenuItems, } = this;
+    const { collapse, expand, close } = messages;
+    const icons = [ICONS$b.expand, ICONS$b.collapse];
+    if (collapseDirection === "up") {
+      icons.reverse();
+    }
+    const collapseNode = collapsible ? (hAsync("calcite-action", { "aria-expanded": toAriaBoolean(!collapsed), "aria-label": collapse, "data-test": "collapse", icon: collapsed ? icons[0] : icons[1], onClick: this.collapse, text: collapse, title: !collapsed ? expand : collapse })) : null;
+    const closeNode = closable ? (hAsync("calcite-action", { "aria-label": close, "data-test": "close", icon: ICONS$b.close, onClick: this.close, text: close, title: close })) : null;
     const slotNode = (hAsync("slot", { name: SLOTS$n.headerActionsEnd, onSlotchange: this.handleHeaderActionsEndSlotChange }));
-    const showContainer = hasEndActions || closableNode || hasMenuItems;
-    return (hAsync("div", { class: { [CSS$N.headerActionsEnd]: true, [CSS$N.headerActions]: true }, hidden: !showContainer, key: "header-actions-end" }, slotNode, this.renderMenu(), closableNode));
+    const showContainer = hasEndActions || collapseNode || closeNode || hasMenuItems;
+    return (hAsync("div", { class: { [CSS$N.headerActionsEnd]: true, [CSS$N.headerActions]: true }, hidden: !showContainer, key: "header-actions-end" }, slotNode, this.renderMenu(), collapseNode, closeNode));
   }
   renderMenu() {
     const { hasMenuItems, messages, menuOpen } = this;
     return (hAsync("calcite-action-menu", { flipPlacements: ["top", "bottom"], hidden: !hasMenuItems, key: "menu", label: messages.options, open: menuOpen, placement: "bottom-end" }, hAsync("calcite-action", { icon: ICONS$b.menu, slot: SLOTS$w.trigger, text: messages.options }), hAsync("slot", { name: SLOTS$n.headerMenuActions, onSlotchange: this.handleHeaderMenuActionsSlotChange })));
   }
   renderHeaderNode() {
-    const { hasHeaderContent, hasStartActions, hasEndActions, closable, hasMenuItems, hasActionBar, } = this;
+    const { hasHeaderContent, hasStartActions, hasEndActions, closable, collapsible, hasMenuItems, hasActionBar, } = this;
     const headerContentNode = this.renderHeaderContent();
     const showHeaderContent = hasHeaderContent ||
       !!headerContentNode ||
       hasStartActions ||
       hasEndActions ||
+      collapsible ||
       closable ||
       hasMenuItems;
     this.showHeaderContent = showHeaderContent;
@@ -35185,7 +35209,7 @@ class Panel {
     return (hAsync("footer", { class: CSS$N.footer, hidden: !showFooter }, hAsync("slot", { key: "footer-slot", name: SLOTS$n.footer, onSlotchange: this.handleFooterSlotChange }), hAsync("slot", { key: "footer-actions-slot", name: SLOTS$n.footerActions, onSlotchange: this.handleFooterActionsSlotChange })));
   }
   renderContent() {
-    return (hAsync("div", { class: CSS$N.contentWrapper, onScroll: this.panelScrollHandler,
+    return (hAsync("div", { class: CSS$N.contentWrapper, hidden: this.collapsible && this.collapsed, onScroll: this.panelScrollHandler,
       // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
       ref: this.setPanelScrollEl }, hAsync("slot", null), this.renderFab()));
   }
@@ -35213,6 +35237,9 @@ class Panel {
       "closed": [1540],
       "disabled": [516],
       "closable": [516],
+      "collapsed": [516],
+      "collapseDirection": [1, "collapse-direction"],
+      "collapsible": [516],
       "headingLevel": [514, "heading-level"],
       "loading": [516],
       "heading": [1],
@@ -35236,7 +35263,7 @@ class Panel {
     },
     "$listeners$": undefined,
     "$lazyBundleId$": "-",
-    "$attrsToReflect$": [["closed", "closed"], ["disabled", "disabled"], ["closable", "closable"], ["headingLevel", "heading-level"], ["loading", "loading"], ["menuOpen", "menu-open"]]
+    "$attrsToReflect$": [["closed", "closed"], ["disabled", "disabled"], ["closable", "closable"], ["collapsed", "collapsed"], ["collapsible", "collapsible"], ["headingLevel", "heading-level"], ["loading", "loading"], ["menuOpen", "menu-open"]]
   }; }
 }