@shoper/phoenix_design_system 0.9.1 → 0.10.1-1

package/build/esm/packages/phoenix/src/components/accordion/accordion_content.d.ts

@@ -0,0 +1,18 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
+export declare class HAccordionContent extends PhoenixLightLitElement {
+    transitionName: string;
+    private _transitionController;
+    private _contextConsumer;
+    private _accordionGroupProps;
+    private _accordionGroupPropsObserver;
+    private _originalHeight;
+    constructor();
+    connectedCallback(): void;
+    private _setStylingOptions;
+    private _subscribeObserver;
+    private _expand;
+    private _collapse;
+    private _setHeight;
+    private _setAttributes;
+    disconnectedCallback(): void;
+}

package/build/esm/packages/phoenix/src/components/accordion/accordion_content.js

@@ -0,0 +1,63 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { ContextConsumerController } from '../../core/context/context_consumer_controller.js';
+import { property } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
+import { ACCORDION_CONTEXTS } from './accordion_constants.js';
+import { Observer } from '../../core/observer/observer.js';
+import { TransitionController } from '../../controllers/transition_controller/transition_controller.js';
+
+let HAccordionContent = class HAccordionContent extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.transitionName = 'accordion-toggle';
+        this._expand = () => {
+            this._setHeight(this._originalHeight);
+        };
+        this._collapse = () => {
+            this._setHeight('0px');
+        };
+        this.setAttribute('role', 'region');
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._contextConsumer = new ContextConsumerController(this);
+        this._transitionController = new TransitionController(this, this.transitionName);
+        this._setStylingOptions();
+        this._subscribeObserver();
+    }
+    _setStylingOptions() {
+        this._originalHeight = `${this.getBoundingClientRect().height}px`;
+        this.style.height = this._originalHeight;
+    }
+    _subscribeObserver() {
+        this._accordionGroupProps = this._contextConsumer.consume(ACCORDION_CONTEXTS.accordionGroupProps);
+        this._accordionGroupPropsObserver = new Observer((accordionProps) => {
+            this._setAttributes(accordionProps);
+            accordionProps.opened ? this._transitionController.show(this._expand) : this._transitionController.hide(this._collapse);
+        });
+        this._accordionGroupProps.subscribe(this._accordionGroupPropsObserver);
+    }
+    _setHeight(height) {
+        this.style.height = height;
+    }
+    _setAttributes({ regionId, controlsId }) {
+        this.setAttribute('id', controlsId);
+        this.setAttribute('labelledby', regionId);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._accordionGroupProps.unsubscribe(this._accordionGroupPropsObserver);
+    }
+};
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], HAccordionContent.prototype, "transitionName", void 0);
+HAccordionContent = __decorate([
+    phoenixCustomElement('h-accordion-content'),
+    __metadata("design:paramtypes", [])
+], HAccordionContent);
+
+export { HAccordionContent };
+//# sourceMappingURL=accordion_content.js.map

package/build/esm/packages/phoenix/src/components/{modal/modal_backdrop.js.map → accordion/accordion_content.js.map}

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/accordion/accordion_group.d.ts

@@ -0,0 +1,26 @@
+import { IAccordion, IAccordionGroup } from './accordion_types';
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
+export declare class HAccordionGroup extends PhoenixLightLitElement implements IAccordionGroup, IAccordion {
+    opened: boolean;
+    private _isDisabled;
+    private _regionId;
+    private _controlsId;
+    private _accordionGroupPropsSubject;
+    private _accordionGroupContext;
+    private _accordionContextConsumer;
+    private _accordionProps;
+    private _accordionPropsObserver;
+    constructor();
+    connectedCallback(): void;
+    private _subscribeObserver;
+    disconnectedCallback(): void;
+    show(): void;
+    hide(): void;
+    toggle(): void;
+    enable(): void;
+    disable(): void;
+    private _accordionToggle;
+    notify(): void;
+    protected updated(_changedProperties: Map<string, unknown>): void;
+    private _getProps;
+}

package/build/esm/packages/phoenix/src/components/accordion/accordion_group.js

@@ -0,0 +1,116 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { ContextProviderController } from '../../core/context/context_provider_controller.js';
+import { ContextConsumerController } from '../../core/context/context_consumer_controller.js';
+import { property, state } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
+import { ACCORDION_CONTEXTS, ACCORDION_EVENTS } from './accordion_constants.js';
+import { Observer } from '../../core/observer/observer.js';
+import { Subject } from '../../core/observer/observable.js';
+
+let HAccordionGroup = class HAccordionGroup extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.opened = false;
+        this._isDisabled = false;
+        this._regionId = self.crypto.randomUUID();
+        this._controlsId = self.crypto.randomUUID();
+        this._accordionToggle = () => {
+            this.toggle();
+        };
+        this._accordionGroupPropsSubject = new Subject();
+        this._accordionGroupContext = new ContextProviderController(this);
+        this._accordionGroupContext.provide(ACCORDION_CONTEXTS.accordionGroupProps, this._accordionGroupPropsSubject);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._accordionContextConsumer = new ContextConsumerController(this);
+        this._subscribeObserver();
+        this.addEventListener(ACCORDION_EVENTS.toggle, this._accordionToggle);
+    }
+    _subscribeObserver() {
+        this._accordionProps = this._accordionContextConsumer.consume(ACCORDION_CONTEXTS.accordionProps);
+        this._accordionPropsObserver = new Observer((accordionProps) => {
+            const hasAccordionBeenDisabled = accordionProps.disabled;
+            if (hasAccordionBeenDisabled) {
+                this.disable();
+                return;
+            }
+            const hasAccordionBeenEnabled = accordionProps.disabled === false;
+            if (hasAccordionBeenEnabled) {
+                this.enable();
+                return;
+            }
+        });
+        this._accordionProps.subscribe(this._accordionPropsObserver);
+    }
+    disconnectedCallback() {
+        this._accordionProps.unsubscribe(this._accordionPropsObserver);
+        this.removeEventListener(ACCORDION_EVENTS.toggle, this._accordionToggle);
+    }
+    show() {
+        this.opened = true;
+    }
+    hide() {
+        this.opened = false;
+    }
+    toggle() {
+        this.opened = !this.opened;
+    }
+    enable() {
+        if (this._isDisabled) {
+            this.addEventListener(ACCORDION_EVENTS.toggle, this._accordionToggle);
+            this.hide();
+            this._isDisabled = false;
+        }
+    }
+    disable() {
+        if (!this._isDisabled) {
+            this.removeEventListener(ACCORDION_EVENTS.toggle, this._accordionToggle);
+            this.show();
+            this._isDisabled = true;
+        }
+    }
+    notify() {
+        this._accordionGroupPropsSubject.notify(this._getProps());
+    }
+    updated(_changedProperties) {
+        if (_changedProperties.has('opened') ||
+            _changedProperties.has('_isDisabled') ||
+            _changedProperties.has('_regionId') ||
+            _changedProperties.has('_controlsId')) {
+            this.notify();
+        }
+    }
+    _getProps() {
+        return {
+            opened: this.opened,
+            disabled: this._isDisabled,
+            regionId: this._regionId,
+            controlsId: this._controlsId
+        };
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true }),
+    __metadata("design:type", Object)
+], HAccordionGroup.prototype, "opened", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], HAccordionGroup.prototype, "_isDisabled", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], HAccordionGroup.prototype, "_regionId", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], HAccordionGroup.prototype, "_controlsId", void 0);
+HAccordionGroup = __decorate([
+    phoenixCustomElement('h-accordion-group'),
+    __metadata("design:paramtypes", [])
+], HAccordionGroup);
+
+export { HAccordionGroup };
+//# sourceMappingURL=accordion_group.js.map

package/build/esm/packages/phoenix/src/components/accordion/accordion_group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/accordion/accordion_toggler.d.ts

@@ -0,0 +1,12 @@
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
+export declare class HAccordionToggler extends PhoenixLightLitElement {
+    private _btnController;
+    private _contextConsumer;
+    private _accordionGroupProps;
+    private _accordionGroupPropsObserver;
+    constructor();
+    connectedCallback(): void;
+    private _setAttributes;
+    private _emitTogglerClicked;
+    disconnectedCallback(): void;
+}

package/build/esm/packages/phoenix/src/components/accordion/accordion_toggler.js

@@ -0,0 +1,44 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { ContextConsumerController } from '../../core/context/context_consumer_controller.js';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
+import { ACCORDION_EVENTS, ACCORDION_CONTEXTS } from './accordion_constants.js';
+import { Observer } from '../../core/observer/observer.js';
+import { BtnController } from '../../controllers/btn_controller.js';
+
+let HAccordionToggler = class HAccordionToggler extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this._emitTogglerClicked = () => {
+            const togglerClickedEvent = new CustomEvent(ACCORDION_EVENTS.toggle, {
+                bubbles: true
+            });
+            this.dispatchEvent(togglerClickedEvent);
+        };
+        this._btnController = new BtnController(this, this._emitTogglerClicked);
+        this._contextConsumer = new ContextConsumerController(this);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._accordionGroupProps = this._contextConsumer.consume(ACCORDION_CONTEXTS.accordionGroupProps);
+        this._accordionGroupPropsObserver = new Observer((accordionProps) => this._setAttributes(accordionProps));
+        this._accordionGroupProps.subscribe(this._accordionGroupPropsObserver);
+        this.addEventListener('click', this._emitTogglerClicked);
+    }
+    _setAttributes({ regionId, opened, controlsId, disabled }) {
+        this.setAttribute('id', regionId);
+        this.setAttribute('aria-expanded', opened ? 'true' : 'false');
+        this.setAttribute('aria-controls', controlsId);
+        this.setAttribute('aria-disabled', disabled ? 'true' : 'false');
+    }
+    disconnectedCallback() {
+        this._accordionGroupProps.unsubscribe(this._accordionGroupPropsObserver);
+    }
+};
+HAccordionToggler = __decorate([
+    phoenixCustomElement('h-accordion-toggler'),
+    __metadata("design:paramtypes", [])
+], HAccordionToggler);
+
+export { HAccordionToggler };
+//# sourceMappingURL=accordion_toggler.js.map

package/build/esm/packages/phoenix/src/components/accordion/accordion_toggler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/accordion/accordion_types.d.ts

@@ -0,0 +1,31 @@
+import { HAccordion } from './accordion';
+import { HAccordionContent } from "./accordion_content";
+import { HAccordionGroup } from "./accordion_group";
+import { HAccordionToggler } from "./accordion_toggler";
+export interface IAccordion {
+    enable(): void;
+    disable(): void;
+    notify(): void;
+}
+export interface IAccordionGroup {
+    show(): void;
+    hide(): void;
+    toggle(): void;
+}
+export declare type TAccordionProps = {
+    disabled: boolean;
+};
+export declare type TAccordionGroupProps = {
+    opened: boolean;
+    disabled: boolean;
+    regionId: string;
+    controlsId: string;
+};
+declare global {
+    interface HTMLElementTagNameMap {
+        'h-accordion': HAccordion;
+        'h-accordion-group': HAccordionGroup;
+        'h-accordion-toggler': HAccordionToggler;
+        'h-accordion-content': HAccordionContent;
+    }
+}

package/build/esm/packages/phoenix/src/components/accordion/accordion_types.js

@@ -0,0 +1,5 @@
+import './accordion';
+import '@phoenixRoot/components/accordion/accordion_content';
+import '@phoenixRoot/components/accordion/accordion_group';
+import '@phoenixRoot/components/accordion/accordion_toggler';
+//# sourceMappingURL=accordion_types.js.map

package/build/esm/packages/phoenix/src/components/accordion/accordion_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion_types.js","sourceRoot":"","sources":["../../../../../../../src/components/accordion/accordion_types.ts"],"names":[],"mappings":"AAAA,OAA2B,aAAa,CAAC;AACzC,OAAkC,qDAAqD,CAAC;AACxF,OAAgC,mDAAmD,CAAC;AACpF,OAAkC,qDAAqD,CAAC"}

package/build/esm/packages/phoenix/src/components/backdrop/backdrop.d.ts

@@ -0,0 +1,17 @@
+import { TemplateResult } from 'lit';
+import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
+export declare class HBackdrop extends PhoenixLightLitElement {
+    visible: boolean;
+    onClickArray: (() => void)[];
+    private _backdropLayerCounter;
+    constructor();
+    disconnectedCallback(): void;
+    private _appendBackdrop;
+    private _show;
+    private _hide;
+    protected updated(): void;
+    private _disableScrolling;
+    private _enableScrolling;
+    private _dispatchBackdropClickedEvent;
+    protected render(): TemplateResult;
+}

package/build/esm/packages/phoenix/src/components/backdrop/backdrop.js

@@ -0,0 +1,89 @@
+import { __decorate, __metadata } from '../../../../../external/tslib/tslib.es6.js';
+import { html } from 'lit';
+import { property, state } from 'lit/decorators';
+import { PhoenixLightLitElement } from '../../core/phoenix_light_lit_element.js';
+import { phoenixCustomElement } from '../../core/decorators/phoenix_custom_element.js';
+import { BACKDROP_NAME, BACKDROP_EVENTS, BACKDROP_CLASS } from './backdrop_constants.js';
+
+let HBackdrop = class HBackdrop extends PhoenixLightLitElement {
+    constructor() {
+        super();
+        this.visible = false;
+        this.onClickArray = [];
+        this._backdropLayerCounter = 0;
+        this._appendBackdrop = () => {
+            const $backdrop = document.querySelector(BACKDROP_NAME);
+            if (!$backdrop) {
+                const $newBackdrop = document.createElement(BACKDROP_NAME);
+                document.body.appendChild($newBackdrop);
+            }
+        };
+        this._show = () => {
+            this._backdropLayerCounter += 1;
+            this.visible = true;
+        };
+        this._hide = () => {
+            this._backdropLayerCounter -= 1;
+            if (this._backdropLayerCounter !== 0)
+                return;
+            this.visible = false;
+        };
+        this._dispatchBackdropClickedEvent = () => {
+            const backdropClickedEvent = new CustomEvent(BACKDROP_EVENTS.clicked, {
+                bubbles: true
+            });
+            document.dispatchEvent(backdropClickedEvent);
+        };
+        this._appendBackdrop();
+        document.addEventListener(BACKDROP_EVENTS.show, this._show);
+        document.addEventListener(BACKDROP_EVENTS.hide, this._hide);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener(BACKDROP_EVENTS.show, this._show);
+        document.removeEventListener(BACKDROP_EVENTS.hide, this._hide);
+    }
+    updated() {
+        if (this.visible) {
+            this._disableScrolling();
+        }
+        else {
+            this._enableScrolling();
+        }
+    }
+    _disableScrolling() {
+        document.body.style.overflow = 'hidden';
+        document.body.style.paddingRight = '15px';
+    }
+    _enableScrolling() {
+        document.body.style.removeProperty('overflow');
+        document.body.style.removeProperty('padding-right');
+    }
+    render() {
+        return html ` <div
+            aria-hidden="true"
+            ?hidden="${!this.visible}"
+            @click="${this._dispatchBackdropClickedEvent}"
+            class="${BACKDROP_CLASS}"
+        ></div>`;
+    }
+};
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], HBackdrop.prototype, "visible", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], HBackdrop.prototype, "onClickArray", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], HBackdrop.prototype, "_backdropLayerCounter", void 0);
+HBackdrop = __decorate([
+    phoenixCustomElement('h-backdrop'),
+    __metadata("design:paramtypes", [])
+], HBackdrop);
+
+export { HBackdrop };
+//# sourceMappingURL=backdrop.js.map

package/build/esm/packages/phoenix/src/components/backdrop/backdrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,uCAAuC,4CAAgD;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/backdrop/backdrop_constants.d.ts

@@ -0,0 +1,7 @@
+export declare const BACKDROP_NAME = "h-backdrop";
+export declare const BACKDROP_CLASS = "backdrop";
+export declare const BACKDROP_EVENTS: {
+    show: string;
+    hide: string;
+    clicked: string;
+};

package/build/esm/packages/phoenix/src/components/backdrop/backdrop_constants.js

@@ -0,0 +1,11 @@
+const BACKDROP_NAME = 'h-backdrop';
+const BACKDROP_CLASS = 'backdrop';
+const BACKDROP_EVENT = 'backdrop';
+const BACKDROP_EVENTS = {
+    show: `${BACKDROP_EVENT}.show`,
+    hide: `${BACKDROP_EVENT}.hide`,
+    clicked: `${BACKDROP_EVENT}.clicked`
+};
+
+export { BACKDROP_CLASS, BACKDROP_EVENTS, BACKDROP_NAME };
+//# sourceMappingURL=backdrop_constants.js.map

package/build/esm/packages/phoenix/src/components/backdrop/backdrop_constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/phoenix/src/components/backdrop/backdrop_types.d.ts

@@ -0,0 +1,3 @@
+export declare type TBackdropProps = {
+    onClick: () => void;
+};

package/build/esm/packages/phoenix/src/components/backdrop/backdrop_types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=backdrop_types.js.map

package/build/esm/packages/phoenix/src/components/backdrop/backdrop_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"backdrop_types.js","sourceRoot":"","sources":["../../../../../../../src/components/backdrop/backdrop_types.ts"],"names":[],"mappings":""}

package/build/esm/packages/phoenix/src/components/dropdown/dropdown.d.ts

@@ -1,4 +1,5 @@
 import { TemplateResult } from 'lit';
+import { HDropdownContent } from './dropdown_content';
 import { IDropdown } from "./dropdown_types";
 import { PhoenixLightLitElement } from "../../core/phoenix_light_lit_element";
 export declare class HDropdown extends PhoenixLightLitElement implements IDropdown {
@@ -6,18 +7,25 @@ export declare class HDropdown extends PhoenixLightLitElement implements IDropdo
     direction: "bottom-center";
     toggleOnHover: boolean;
     name: string;
+    transition: string;
     portalTarget: string;
     $dropdownToggler: HTMLElement | null;
     $dropdownContent: HTMLElement | null;
+    $nestedDropdownContentElements?: HDropdownContent[];
+    $hoverableDropdownContentElements: HDropdownContent[];
     private _positionController;
     private _clickOutsideController;
     connectedCallback(): void;
-    private _setupListeners;
     private _appendDropdownPortal;
+    private _setupListeners;
     private _handleClickOutside;
     toggle: () => void;
-    show: () => void;
-    hide: () => void;
+    show: () => Promise<void>;
+    private _dispatchShowDropdownEvent;
+    hide: () => Promise<void>;
+    private _dispatchHideDropdownEvent;
+    private _hoverToggle;
+    private _isHoveredWithinDropdown;
     private _positionDropdownContent;
     disconnectedCallback(): void;
     render(): TemplateResult;