@tylertech/forge 3.0.0-next.20 → 3.0.0-next.22

package/esm/expansion-panel/expansion-panel-adapter.js

@@ -9,174 +9,37 @@ import { EXPANSION_PANEL_CONSTANTS } from './expansion-panel-constants';
 export class ExpansionPanelAdapter extends BaseAdapter {
     constructor(component) {
         super(component);
+        this._transitionStartListener = this._onTransitionStart.bind(this);
+        this._transitionEndListener = this._onTransitionEnd.bind(this);
         this._headerElement = getShadowElement(this._component, EXPANSION_PANEL_CONSTANTS.selectors.HEADER);
         this._contentElement = getShadowElement(this._component, EXPANSION_PANEL_CONSTANTS.selectors.CONTENT);
-        this._headerSlotElement = getShadowElement(this._component, EXPANSION_PANEL_CONSTANTS.selectors.HEADER_SLOT);
     }
-    initialize(open, orientation = 'vertical') {
-        const assignedNodes = this._headerElement.children[0].assignedNodes();
-        this.setHeaderVisibility(!!assignedNodes.length);
-        if (orientation === EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_HORIZONTAL) {
-            this._contentElement.style.height = '';
-            this._contentElement.style.width = '0px';
-        }
-        if (open) {
-            if (orientation === 'vertical') {
-                this._contentElement.style.height = '';
-            }
-            else {
-                this._contentElement.style.width = '';
-            }
-            this._contentElement.style.removeProperty('opacity');
-            this._contentElement.style.removeProperty('visibility');
-            const openIconElement = this._component.querySelector(EXPANSION_PANEL_CONSTANTS.selectors.OPEN_ICON);
-            if (openIconElement) {
-                openIconElement.open = true;
-            }
-        }
+    setAnimationCompleteListener(listener) {
+        this._transitionCompleteListener = listener;
+        this._contentElement.addEventListener('transitionstart', this._transitionStartListener);
+        this._contentElement.addEventListener('transitionend', this._transitionEndListener);
     }
-    setHeaderVisibility(visible) {
-        if (visible) {
-            this._headerElement.style.display = '';
-        }
-        else {
-            this._headerElement.style.display = 'none';
-        }
+    addHeaderListener(type, listener) {
+        this._headerElement.addEventListener(type, listener);
     }
-    setOpenState(opening, orientation = EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_VERTICAL, animate = true) {
-        const assignedNodes = this._contentElement.children[0].assignedNodes();
+    tryToggleOpenIcon(value) {
         const openIconElement = this._component.querySelector(EXPANSION_PANEL_CONSTANTS.selectors.OPEN_ICON);
-        if (animate && assignedNodes && assignedNodes.length && assignedNodes[0]) {
-            const transitionEndListener = ({ propertyName }) => {
-                // If the state has changed since it started, then ignore the transition
-                if (this._component.open !== opening) {
-                    this._contentElement.removeEventListener('transitionend', transitionEndListener);
-                    return;
-                }
-                if (propertyName === 'height' || propertyName === 'width') {
-                    this._contentElement.removeEventListener('transitionend', transitionEndListener);
-                    this._contentElement.style.removeProperty('transition');
-                    if (opening) {
-                        if (orientation === EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_HORIZONTAL) {
-                            this._contentElement.style.width = '';
-                        }
-                        else {
-                            this._contentElement.style.height = '';
-                        }
-                        this._contentElement.style.removeProperty('opacity');
-                    }
-                    else {
-                        // We set to hidden to ensure that collapsed elements are non-interactive
-                        this._contentElement.style.visibility = 'hidden';
-                    }
-                }
-            };
-            this._contentElement.addEventListener('transitionend', transitionEndListener);
-            if (opening) {
-                if (orientation === EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_HORIZONTAL) {
-                    this._contentElement.style.width = '0px';
-                }
-                else {
-                    this._contentElement.style.height = '0px';
-                }
-                this._contentElement.style.opacity = '0';
-                this._contentElement.style.removeProperty('visibility');
-            }
-            else {
-                if (orientation === EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_HORIZONTAL) {
-                    this._contentElement.style.width = `${this._contentElement.scrollWidth}px`;
-                }
-                else {
-                    this._contentElement.style.height = `${this._contentElement.scrollHeight}px`;
-                }
-                this._contentElement.style.opacity = '1';
-            }
-            if (orientation === EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_HORIZONTAL) {
-                this._contentElement.style.transition = EXPANSION_PANEL_CONSTANTS.strings.EXPANSION_HORIZONTAL_TRANSITION;
-            }
-            else {
-                this._contentElement.style.transition = EXPANSION_PANEL_CONSTANTS.strings.EXPANSION_VERTICAL_TRANSITION;
-            }
-            this._activeAnimationFrame = window.requestAnimationFrame(() => {
-                this._activeAnimationFrame = window.requestAnimationFrame(() => {
-                    this._activeAnimationFrame = undefined;
-                    if (opening) {
-                        if (orientation === EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_HORIZONTAL) {
-                            this._contentElement.style.width = `${this._contentElement.scrollWidth}px`;
-                        }
-                        else {
-                            this._contentElement.style.height = `${this._contentElement.scrollHeight}px`;
-                        }
-                        this._contentElement.style.opacity = '1';
-                        if (openIconElement) {
-                            openIconElement.open = true;
-                        }
-                    }
-                    else {
-                        if (orientation === EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_HORIZONTAL) {
-                            this._contentElement.style.width = '0px';
-                        }
-                        else {
-                            this._contentElement.style.height = '0px';
-                        }
-                        this._contentElement.style.opacity = '0';
-                        if (openIconElement) {
-                            openIconElement.open = false;
-                        }
-                    }
-                });
-            });
-        }
-        else {
-            if (this._activeAnimationFrame) {
-                window.cancelAnimationFrame(this._activeAnimationFrame);
-                this._activeAnimationFrame = undefined;
-            }
-            this._contentElement.style.removeProperty('transition');
-            if (opening) {
-                if (orientation === EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_HORIZONTAL) {
-                    this._contentElement.style.width = '';
-                }
-                else {
-                    this._contentElement.style.height = '';
-                }
-                this._contentElement.style.removeProperty('visibility');
-                this._contentElement.style.removeProperty('opacity');
-                if (openIconElement) {
-                    openIconElement.open = true;
-                }
-            }
-            else {
-                if (orientation === EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_HORIZONTAL) {
-                    this._contentElement.style.width = '0px';
-                }
-                else {
-                    this._contentElement.style.height = '0px';
-                }
-                this._contentElement.style.opacity = '0';
-                this._contentElement.style.visibility = 'hidden';
-                if (openIconElement) {
-                    openIconElement.open = false;
-                }
-            }
+        if (openIconElement) {
+            openIconElement.open = value;
         }
     }
-    registerClickListener(listener) {
-        this._headerElement.addEventListener('click', listener);
+    setContentVisibility(visible) {
+        this._contentElement.classList.toggle(EXPANSION_PANEL_CONSTANTS.classes.HIDDEN, !visible);
     }
-    deregisterClickListener(listener) {
-        this._headerElement.removeEventListener('click', listener);
-    }
-    registerKeydownListener(listener) {
-        this._headerElement.addEventListener('keydown', listener);
-    }
-    deregisterKeydownListener(listener) {
-        this._headerElement.removeEventListener('keydown', listener);
-    }
-    registerHeaderSlotListener(listener) {
-        this._headerSlotElement.addEventListener('slotchange', listener);
+    _onTransitionStart(evt) {
+        if (evt.propertyName.startsWith('grid-template')) {
+            this.toggleHostAttribute(EXPANSION_PANEL_CONSTANTS.attributes.OPENING, true);
+        }
     }
-    deregisterHeaderSlotListener(listener) {
-        this._headerSlotElement.removeEventListener('slotchange', listener);
+    _onTransitionEnd(evt) {
+        if (evt.propertyName.startsWith('grid-template')) {
+            this.toggleHostAttribute(EXPANSION_PANEL_CONSTANTS.attributes.OPENING, false);
+            this._transitionCompleteListener();
+        }
     }
 }

package/esm/expansion-panel/expansion-panel-constants.d.ts

@@ -5,36 +5,30 @@
  */
 export declare const EXPANSION_PANEL_CONSTANTS: {
     elementName: "forge-expansion-panel";
+    observedAttributes: {
+        OPEN: string;
+        ORIENTATION: string;
+        ANIMATION_TYPE: string;
+    };
+    attributes: {
+        OPENING: string;
+        OPEN: string;
+        ORIENTATION: string;
+        ANIMATION_TYPE: string;
+    };
     classes: {
-        CONTAINER: string;
-        HEADER: string;
-        CONTENT: string;
+        HIDDEN: string;
     };
     selectors: {
-        CONTAINER: string;
         HEADER: string;
         CONTENT: string;
-        HEADER_SLOT: string;
+        IGNORE: string;
         OPEN_ICON: string;
     };
     events: {
         TOGGLE: string;
-    };
-    attributes: {
-        OPEN: string;
-        ORIENTATION: string;
-        USE_ANIMATIONS: string;
-        IGNORE: string;
-        IGNORE_ALT: string;
-    };
-    numbers: {
-        COLLAPSE_ANIMATION_DURATION: number;
-        CLICK_DEBOUNCE_THRESHOLD: number;
-    };
-    strings: {
-        ORIENTATION_VERTICAL: string;
-        ORIENTATION_HORIZONTAL: string;
-        EXPANSION_VERTICAL_TRANSITION: string;
-        EXPANSION_HORIZONTAL_TRANSITION: string;
+        ANIMATION_COMPLETE: string;
     };
 };
+export type ExpansionPanelOrientation = 'horizontal' | 'vertical';
+export type ExpansionPanelAnimationType = 'default' | 'none';

package/esm/expansion-panel/expansion-panel-constants.js

@@ -6,44 +6,30 @@
 import { COMPONENT_NAME_PREFIX } from '../constants';
 import { OPEN_ICON_CONSTANTS } from '../open-icon';
 const elementName = `${COMPONENT_NAME_PREFIX}expansion-panel`;
+const observedAttributes = {
+    OPEN: 'open',
+    ORIENTATION: 'orientation',
+    ANIMATION_TYPE: 'animation-type'
+};
+const attributes = Object.assign(Object.assign({}, observedAttributes), { OPENING: 'opening' });
 const classes = {
-    CONTAINER: 'forge-expansion-panel',
-    HEADER: 'forge-expansion-panel__header',
-    CONTENT: 'forge-expansion-panel__content'
+    HIDDEN: 'hidden'
 };
 const selectors = {
-    CONTAINER: `.${classes.CONTAINER}`,
-    HEADER: `.${classes.HEADER}`,
-    CONTENT: `.${classes.CONTENT}`,
-    HEADER_SLOT: `.${classes.HEADER} > slot[name=header]`,
-    OPEN_ICON: `[slot=header] ${OPEN_ICON_CONSTANTS.elementName}`
+    HEADER: '.header',
+    CONTENT: '.content',
+    IGNORE: ':is([data-forge-ignore],[forge-ignore])',
+    OPEN_ICON: `:is([slot=header] ${OPEN_ICON_CONSTANTS.elementName}, ${OPEN_ICON_CONSTANTS.elementName}[slot^=header])`
 };
 const events = {
-    TOGGLE: `${elementName}-toggle`
-};
-const attributes = {
-    OPEN: 'open',
-    ORIENTATION: 'orientation',
-    USE_ANIMATIONS: 'use-animations',
-    IGNORE: 'data-forge-ignore',
-    IGNORE_ALT: 'forge-ignore'
-};
-const numbers = {
-    COLLAPSE_ANIMATION_DURATION: 400,
-    CLICK_DEBOUNCE_THRESHOLD: 200
-};
-const strings = {
-    ORIENTATION_VERTICAL: 'vertical',
-    ORIENTATION_HORIZONTAL: 'horizontal',
-    EXPANSION_VERTICAL_TRANSITION: `height ${numbers.COLLAPSE_ANIMATION_DURATION}ms cubic-bezier(0.4, 0, 0.2, 1), opacity ${numbers.COLLAPSE_ANIMATION_DURATION}ms ease-in-out`,
-    EXPANSION_HORIZONTAL_TRANSITION: `width ${numbers.COLLAPSE_ANIMATION_DURATION}ms cubic-bezier(0.4, 0, 0.2, 1), opacity ${numbers.COLLAPSE_ANIMATION_DURATION}ms ease-in-out`
+    TOGGLE: `${elementName}-toggle`,
+    ANIMATION_COMPLETE: `${elementName}-animation-complete`
 };
 export const EXPANSION_PANEL_CONSTANTS = {
     elementName,
+    observedAttributes,
+    attributes,
     classes,
     selectors,
-    events,
-    attributes,
-    numbers,
-    strings
+    events
 };

package/esm/expansion-panel/expansion-panel-foundation.d.ts

@@ -5,55 +5,32 @@
  */
 import { ICustomElementFoundation } from '@tylertech/forge-core';
 import { IExpansionPanelAdapter } from './expansion-panel-adapter';
+import { ExpansionPanelAnimationType, ExpansionPanelOrientation } from './expansion-panel-constants';
 export interface IExpansionPanelFoundation extends ICustomElementFoundation {
     open: boolean;
-    orientation: string;
-    useAnimations: boolean;
-    openCallback: () => void | Promise<void>;
-    closeCallback: () => void | Promise<void>;
-    setOpenImmediate(open: boolean): void;
+    orientation: ExpansionPanelOrientation;
+    animationType: ExpansionPanelAnimationType;
 }
 export declare class ExpansionPanelFoundation implements IExpansionPanelFoundation {
     private _adapter;
     private _open;
-    private _useAnimations;
-    private _openCallback;
-    private _closeCallback;
     private _orientation;
+    private _animationType;
     private _clickListener;
     private _keydownListener;
-    private _headerSlotChangeListener;
-    private _isInitialized;
+    private _animationCompleteListener;
     constructor(_adapter: IExpansionPanelAdapter);
     initialize(): void;
-    connect(): void;
-    disconnect(): void;
-    setOpenImmediate(open: boolean): void;
-    private _applyOpen;
-    /** Controls the open state of the panel. */
-    get open(): boolean;
-    set open(value: boolean);
-    get openCallback(): () => void | Promise<void>;
-    set openCallback(callback: () => void | Promise<void>);
-    get closeCallback(): () => void | Promise<void>;
-    set closeCallback(callback: () => void | Promise<void>);
-    get orientation(): string;
-    set orientation(value: string);
-    get useAnimations(): boolean;
-    set useAnimations(value: boolean);
-    /**
-     * Handles click events on the header element.
-     * @param {MouseEvent} evt The click event.
-     */
     private _onClick;
-    /**
-     * Handles keydown events on the header.
-     * @param {KeyboardEvent} evt The keydown event
-     */
     private _onKeydown;
-    private _emitEvent;
+    private _onAnimationComplete;
+    private _togglePanel;
+    private _dispatchToggleEvent;
     private _toggle;
-    private _openPanel;
-    private _closePanel;
-    private _onHeaderSlotChanged;
+    get open(): boolean;
+    set open(value: boolean);
+    get orientation(): ExpansionPanelOrientation;
+    set orientation(value: ExpansionPanelOrientation);
+    get animationType(): ExpansionPanelAnimationType;
+    set animationType(value: ExpansionPanelAnimationType);
 }

package/esm/expansion-panel/expansion-panel-foundation.js

@@ -3,152 +3,85 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { debounce, getEventPath } from '@tylertech/forge-core';
 import { EXPANSION_PANEL_CONSTANTS } from './expansion-panel-constants';
 export class ExpansionPanelFoundation {
     constructor(_adapter) {
         this._adapter = _adapter;
         this._open = false;
-        this._useAnimations = true;
-        this._orientation = EXPANSION_PANEL_CONSTANTS.strings.ORIENTATION_VERTICAL;
-        this._isInitialized = false;
-        this._clickListener = debounce((evt) => this._onClick(evt), EXPANSION_PANEL_CONSTANTS.numbers.CLICK_DEBOUNCE_THRESHOLD, true);
-        this._keydownListener = (evt) => this._onKeydown(evt);
-        this._headerSlotChangeListener = (evt) => this._onHeaderSlotChanged(evt);
+        this._orientation = 'vertical';
+        this._animationType = 'default';
+        this._clickListener = this._onClick.bind(this);
+        this._keydownListener = this._onKeydown.bind(this);
+        this._animationCompleteListener = this._onAnimationComplete.bind(this);
     }
     initialize() {
-        this.connect();
-        this._adapter.initialize(this._open, this._orientation);
-        this._isInitialized = true;
+        this._adapter.addHeaderListener('click', this._clickListener);
+        this._adapter.addHeaderListener('keydown', this._keydownListener);
+        this._adapter.setAnimationCompleteListener(this._animationCompleteListener);
     }
-    connect() {
-        this._adapter.registerHeaderSlotListener(this._headerSlotChangeListener);
-        this._adapter.registerClickListener(this._clickListener);
-        this._adapter.registerKeydownListener(this._keydownListener);
-    }
-    disconnect() {
-        this._adapter.deregisterHeaderSlotListener(this._headerSlotChangeListener);
-        this._adapter.deregisterClickListener(this._clickListener);
-        this._adapter.deregisterKeydownListener(this._keydownListener);
-    }
-    setOpenImmediate(open) {
-        if (open) {
-            this._openPanel(false);
-        }
-        else {
-            this._closePanel(false);
+    _onClick(evt) {
+        const fromIgnoredEl = evt.composedPath().find((el) => el.nodeType === Node.ELEMENT_NODE && el.matches(EXPANSION_PANEL_CONSTANTS.selectors.IGNORE));
+        if (fromIgnoredEl) {
+            return;
         }
+        evt.stopPropagation();
+        this._toggle();
+        this._dispatchToggleEvent();
     }
-    _applyOpen(value) {
-        if (!this._isInitialized) {
-            this._open = value;
-            return;
+    _onKeydown(evt) {
+        if (evt.key === ' ' || evt.key === 'Enter') {
+            evt.stopPropagation();
+            evt.preventDefault();
+            this._toggle();
+            this._dispatchToggleEvent();
         }
-        if (value) {
-            if (this._openCallback) {
-                Promise.resolve(this._openCallback())
-                    .then(() => {
-                    this._open = value;
-                    this._openPanel(this._useAnimations);
-                })
-                    .catch(() => { });
-            }
-            else {
-                this._open = value;
-                this._openPanel(this._useAnimations);
-            }
+    }
+    _onAnimationComplete() {
+        if (!this._open) {
+            this._adapter.setContentVisibility(false);
         }
-        else {
-            if (this._closeCallback) {
-                Promise.resolve(this._closeCallback())
-                    .then(() => {
-                    this._open = value;
-                    this._closePanel(this._useAnimations);
-                })
-                    .catch(() => { });
-            }
-            else {
-                this._open = value;
-                this._closePanel(this._useAnimations);
-            }
+        this._adapter.dispatchHostEvent(new CustomEvent(EXPANSION_PANEL_CONSTANTS.events.ANIMATION_COMPLETE, { detail: this._open }));
+    }
+    _togglePanel() {
+        this._adapter.toggleHostAttribute(EXPANSION_PANEL_CONSTANTS.attributes.OPEN, this._open);
+        this._adapter.tryToggleOpenIcon(this._open);
+        if (this._open) {
+            this._adapter.setContentVisibility(true);
         }
     }
-    /** Controls the open state of the panel. */
+    _dispatchToggleEvent() {
+        const evt = new CustomEvent(EXPANSION_PANEL_CONSTANTS.events.TOGGLE, { detail: this._open, bubbles: true, composed: true });
+        this._adapter.dispatchHostEvent(evt);
+    }
+    _toggle() {
+        this.open = !this.open;
+    }
     get open() {
         return this._open;
     }
     set open(value) {
         value = Boolean(value);
         if (this._open !== value) {
-            this._applyOpen(value);
+            this._open = value;
+            this._togglePanel();
         }
     }
-    get openCallback() {
-        return this._openCallback;
-    }
-    set openCallback(callback) {
-        this._openCallback = callback;
-    }
-    get closeCallback() {
-        return this._closeCallback;
-    }
-    set closeCallback(callback) {
-        this._closeCallback = callback;
-    }
     get orientation() {
         return this._orientation;
     }
     set orientation(value) {
-        this._orientation = value;
-    }
-    get useAnimations() {
-        return this._useAnimations;
-    }
-    set useAnimations(value) {
-        if (this._useAnimations !== !!value) {
-            this._useAnimations = !!value;
-            this._adapter.setHostAttribute(EXPANSION_PANEL_CONSTANTS.attributes.USE_ANIMATIONS, `${this._useAnimations}`);
+        if (this._orientation !== value) {
+            this._orientation = value;
+            this._adapter.setHostAttribute(EXPANSION_PANEL_CONSTANTS.attributes.ORIENTATION, this._orientation);
         }
     }
-    /**
-     * Handles click events on the header element.
-     * @param {MouseEvent} evt The click event.
-     */
-    _onClick(evt) {
-        if (getEventPath(evt).find(p => p.nodeType === 1 && (p.hasAttribute(EXPANSION_PANEL_CONSTANTS.attributes.IGNORE) || p.hasAttribute(EXPANSION_PANEL_CONSTANTS.attributes.IGNORE_ALT)))) {
-            return;
-        }
-        evt.stopPropagation();
-        this._toggle();
-        this._emitEvent();
+    get animationType() {
+        return this._animationType;
     }
-    /**
-     * Handles keydown events on the header.
-     * @param {KeyboardEvent} evt The keydown event
-     */
-    _onKeydown(evt) {
-        if (evt.key === ' ' || evt.key === 'Enter') {
-            evt.stopPropagation();
-            evt.preventDefault();
-            this._toggle();
-            this._emitEvent();
+    set animationType(value) {
+        if (this._animationType !== value) {
+            this._animationType = value;
+            this._adapter.setHostAttribute(EXPANSION_PANEL_CONSTANTS.attributes.ANIMATION_TYPE, this._animationType);
         }
     }
-    _emitEvent() {
-        this._adapter.emitHostEvent(EXPANSION_PANEL_CONSTANTS.events.TOGGLE, this._open);
-    }
-    _toggle() {
-        this.open = !this.open;
-    }
-    _openPanel(animate) {
-        this._adapter.setHostAttribute(EXPANSION_PANEL_CONSTANTS.attributes.OPEN, '');
-        this._adapter.setOpenState(true, this._orientation, animate);
-    }
-    _closePanel(animate) {
-        this._adapter.removeHostAttribute(EXPANSION_PANEL_CONSTANTS.attributes.OPEN);
-        this._adapter.setOpenState(false, this._orientation, animate);
-    }
-    _onHeaderSlotChanged(evt) {
-        this._adapter.setHeaderVisibility(!!evt.target.assignedNodes().length);
-    }
 }

package/esm/expansion-panel/expansion-panel.d.ts

@@ -4,14 +4,12 @@
  * License: Apache-2.0
  */
 import { BaseComponent, IBaseComponent } from '../core/base/base-component';
+import { ExpansionPanelAnimationType, ExpansionPanelOrientation } from './expansion-panel-constants';
 export interface IExpansionPanelComponent extends IBaseComponent {
     open: boolean;
-    useAnimations: boolean;
-    openCallback: () => void | Promise<void>;
-    closeCallback: () => void | Promise<void>;
-    orientation: string;
+    orientation: ExpansionPanelOrientation;
+    animationType: ExpansionPanelAnimationType;
     toggle(): void;
-    setOpenImmediate(open: boolean): void;
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -19,44 +17,43 @@ declare global {
     }
     interface HTMLElementEventMap {
         'forge-expansion-panel-toggle': CustomEvent<boolean>;
+        'forge-expansion-panel-animation-complete': CustomEvent<boolean>;
     }
 }
 /**
- * A web component that encapsulates the functionality of expanding/collapsing content when clicked.
- *
  * @tag forge-expansion-panel
+ *
+ * @summary Expansion panels provide progressive disclosure of content.
+ *
+ * @property {boolean} open - Whether the panel is open or closed.
+ * @property {ExpansionPanelOrientation} orientation - The orientation of the panel.
+ * @property {ExpansionPanelAnimationType} animationType - The type of animation to use when opening/closing the panel.
+ *
+ * @attribute {boolean} open - Whether the panel is open or closed.
+ * @attribute {ExpansionPanelOrientation} orientation - The orientation of the panel.
+ * @attribute {ExpansionPanelAnimationType} animation-type - The type of animation to use when opening/closing the panel.
+ *
+ * @fires forge-expansion-panel-toggle - Event fired when the panel is toggled open or closed.
+ * @fires forge-expansion-panel-animation-complete - Event fired when the panel has finished animating when toggling.
+ *
+ * @cssproperty --forge-expansion-animation-duration - The duration of the open/close animation.
+ * @cssproperty --forge-expansion-animation-easing - The easing function of the open/close animation.
+ *
+ * @csspart root - The root element of the panel.
+ * @csspart header - The header of the panel.
+ * @csspart content - The content of the panel.
+ *
+ * @slot - The content of the panel.
+ * @slot header - The header of the panel.
  */
 export declare class ExpansionPanelComponent extends BaseComponent implements IExpansionPanelComponent {
     static get observedAttributes(): string[];
     private _foundation;
     constructor();
-    initializedCallback(): void;
     connectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    disconnectedCallback(): void;
-    /** Controls the open state of the panel. */
     open: boolean;
-    /**
-     * Sets the function to call when the panel wants to open.
-     * The function must return a promise which can be resolved to
-     * open the panel or rejected which cancels the panel open.
-     */
-    openCallback: () => void | Promise<void>;
-    /**
-     * Sets the function to call when the panel wants to close.
-     * The function must return a promise which can be resolved to
-     * close the panel or rejected which cancels the panel close.
-     */
-    closeCallback: () => void | Promise<void>;
-    /**
-     * Sets the orientation of the panel expansion.
-     * Valid values are 'vertical' (default) or 'horizontal'.
-     */
-    orientation: string;
-    /** Gets/sets if animations are used in the expand/collapse transition. */
-    useAnimations: boolean;
-    /** Toggles the collapsed state. */
+    orientation: ExpansionPanelOrientation;
+    animationType: ExpansionPanelAnimationType;
     toggle(): void;
-    /** Forces the expansion panel to expand/collapse without transition animations. */
-    setOpenImmediate(open: boolean): void;
 }