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

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;
 }

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

@@ -9,72 +9,72 @@ import { BaseComponent } from '../core/base/base-component';
 import { ExpansionPanelAdapter } from './expansion-panel-adapter';
 import { EXPANSION_PANEL_CONSTANTS } from './expansion-panel-constants';
 import { ExpansionPanelFoundation } from './expansion-panel-foundation';
-const template = '<template><div class=\"forge-expansion-panel\" part=\"root\"><div class=\"forge-expansion-panel__header\" part=\"header\"><slot name=\"header\"></slot></div><div class=\"forge-expansion-panel__content\" style=\"height: 0; opacity: 0; visibility: hidden;\" part=\"content\"><slot></slot></div></div></template>';
-const styles = '.forge-expansion-panel{display:block;display:var(--forge-expansion-panel-display,block);height:auto;height:var(--forge-expansion-panel-height,auto)}.forge-expansion-panel__header{outline:0;-webkit-tap-highlight-color:transparent}.forge-expansion-panel__header:hover{cursor:pointer}.forge-expansion-panel__header forge-open-icon{margin-left:auto}.forge-expansion-panel__content{overflow:hidden;overflow:var(--forge-expansion-panel-content-overflow,hidden);max-height:none;max-height:var(--forge-expansion-panel-content-max-height,none)}.forge-expansion-panel__content::-webkit-scrollbar{height:var(--forge-scrollbar-height,16px);width:var(--forge-scrollbar-width,16px)}.forge-expansion-panel__content::-webkit-scrollbar-track{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-expansion-panel__content::-webkit-scrollbar-track:hover{background-color:var(--forge-scrollbar-track-container-hover,var(--forge-theme-surface-container-low,#ebebeb))}.forge-expansion-panel__content::-webkit-scrollbar-corner{background-color:var(--forge-scrollbar-track-container,var(--forge-theme-surface-container-low,#ebebeb))}.forge-expansion-panel__content::-webkit-scrollbar-thumb{height:var(--forge-scrollbar-thumb-min-height,32px);width:var(--forge-scrollbar-thumb-min-width,32px);border-radius:var(--forge-scrollbar-border-radius,var(--forge-shape-full,9999px));border-width:var(--forge-scrollbar-border-width,3px);border-style:solid;border-color:transparent;background-color:var(--forge-scrollbar-thumb-container,var(--forge-theme-surface-container-medium,#c2c2c2));background-clip:content-box}.forge-expansion-panel__content::-webkit-scrollbar-thumb:hover{background-color:var(--forge-scrollbar-thumb-container-hover,var(--forge-theme-surface-container-high,#9e9e9e))}:host{display:block}:host([hidden]){display:none}';
+const template = '<template><div class=\"forge-expansion-panel\" part=\"root\"><div class=\"header\" part=\"header\"><slot name=\"header\"></slot></div><div class=\"content hidden\" part=\"content\"><div class=\"inner\"><slot></slot></div></div></div></template>';
+const styles = ':host{display:block}:host([hidden]){display:none}.forge-expansion-panel{--_expansion-panel-animation-duration:var(--forge-expansion-panel-animation-duration, var(--forge-animation-duration-medium4, 400ms));--_expansion-panel-animation-easing:var(--forge-expansion-panel-animation-easing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)))}.header{outline:0;-webkit-tap-highlight-color:transparent;cursor:pointer}.content{display:grid;grid-template-rows:0fr;-webkit-transition-property:opacity,grid-template-rows;transition-property:opacity,grid-template-rows;transition-property:opacity,grid-template-rows,-ms-grid-rows;-webkit-transition-duration:var(--_expansion-panel-animation-duration);transition-duration:var(--_expansion-panel-animation-duration);-webkit-transition-timing-function:var(--_expansion-panel-animation-easing);transition-timing-function:var(--_expansion-panel-animation-easing);min-height:0;overflow:hidden;opacity:0}.content .inner{display:grid;grid-template-rows:1fr;overflow:hidden}.hidden{visibility:hidden}@media (prefers-reduced-motion:reduce){.content{-webkit-transition:none;transition:none}}:host([open]) .content{opacity:1}:host([open]:is(:not([orientation]),[orientation=vertical])) .content{grid-template-rows:1fr}:host([open][orientation=horizontal]) .content{grid-template-columns:1fr}:host([orientation=horizontal]) .forge-expansion-panel{display:grid;grid-template-columns:auto 1fr}:host([orientation=horizontal]) .content{-webkit-transition-property:opacity,grid-template-columns;transition-property:opacity,grid-template-columns;transition-property:opacity,grid-template-columns,-ms-grid-columns;grid-template-rows:none;grid-template-columns:0fr}:host([animation-type=none]) .content{-webkit-transition:none;transition:none}';
 /**
- * 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.
  */
 let ExpansionPanelComponent = class ExpansionPanelComponent extends BaseComponent {
     static get observedAttributes() {
-        return [
-            EXPANSION_PANEL_CONSTANTS.attributes.OPEN,
-            EXPANSION_PANEL_CONSTANTS.attributes.ORIENTATION,
-            EXPANSION_PANEL_CONSTANTS.attributes.USE_ANIMATIONS
-        ];
+        return Object.values(EXPANSION_PANEL_CONSTANTS.observedAttributes);
     }
     constructor() {
         super();
         attachShadowTemplate(this, template, styles);
         this._foundation = new ExpansionPanelFoundation(new ExpansionPanelAdapter(this));
     }
-    initializedCallback() {
-        this._foundation.initialize();
-    }
     connectedCallback() {
-        this._foundation.connect();
+        this._foundation.initialize();
     }
     attributeChangedCallback(name, oldValue, newValue) {
         switch (name) {
-            case EXPANSION_PANEL_CONSTANTS.attributes.OPEN:
+            case EXPANSION_PANEL_CONSTANTS.observedAttributes.OPEN:
                 this.open = coerceBoolean(newValue);
                 break;
-            case EXPANSION_PANEL_CONSTANTS.attributes.ORIENTATION:
+            case EXPANSION_PANEL_CONSTANTS.observedAttributes.ORIENTATION:
                 this.orientation = newValue;
                 break;
-            case EXPANSION_PANEL_CONSTANTS.attributes.USE_ANIMATIONS:
-                this.useAnimations = coerceBoolean(newValue);
+            case EXPANSION_PANEL_CONSTANTS.observedAttributes.ANIMATION_TYPE:
+                this.animationType = newValue;
                 break;
         }
     }
-    disconnectedCallback() {
-        this._foundation.disconnect();
-    }
-    /** Toggles the collapsed state. */
     toggle() {
         this.open = !this.open;
     }
-    /** Forces the expansion panel to expand/collapse without transition animations. */
-    setOpenImmediate(open) {
-        this._foundation.setOpenImmediate(open);
-    }
 };
 __decorate([
     FoundationProperty()
 ], ExpansionPanelComponent.prototype, "open", void 0);
-__decorate([
-    FoundationProperty()
-], ExpansionPanelComponent.prototype, "openCallback", void 0);
-__decorate([
-    FoundationProperty()
-], ExpansionPanelComponent.prototype, "closeCallback", void 0);
 __decorate([
     FoundationProperty()
 ], ExpansionPanelComponent.prototype, "orientation", void 0);
 __decorate([
     FoundationProperty()
-], ExpansionPanelComponent.prototype, "useAnimations", void 0);
+], ExpansionPanelComponent.prototype, "animationType", void 0);
 ExpansionPanelComponent = __decorate([
     CustomElement({
         name: EXPANSION_PANEL_CONSTANTS.elementName