well-petal 0.0.46 → 0.0.48

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/petal.js +5 -5
  2. package/package.json +1 -1
package/dist/petal.js CHANGED
@@ -26,7 +26,7 @@ return /******/ (() => { // webpackBootstrap
26
26
  \********************************************************************/
27
27
  /***/ ((module, __webpack_exports__, __webpack_require__) => {
28
28
 
29
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `/* ===========================\n Dropdown Core Styles\n =========================== */\n\n/* Default CSS variable values */\n[petal-el=\"dropdown\"] {\n --dropdown-open-duration: 0.5s;\n --dropdown-close-duration: 0.3s;\n}\n\n/* ===========================\n Dropdown Animations\n =========================== */\n\n/* Dropdown Menu: Initial (Closed) State - Prevent Interaction */\nhtml:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"] {\n pointer-events: none;\n}\n\n/* Dropdown Menu: Open State - Allow Interaction */\nhtml:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"].w--open {\n pointer-events: auto;\n}\n\n/* Dropdown Drawer: Initial (Closed) State - Common Styles */\nhtml:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-drawer\"] {\n visibility: hidden;\n opacity: 0;\n transition:\n transform var(--dropdown-close-duration, 0.3s) ease,\n opacity var(--dropdown-close-duration, 0.3s) ease,\n visibility 0s var(--dropdown-close-duration, 0.3s);\n}\n\n/* Dropdown Drawer: Open State - Common Styles */\nhtml:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"].w--open [petal-el=\"dropdown-drawer\"] {\n visibility: visible;\n opacity: 1;\n transition:\n transform var(--dropdown-open-duration, 0.5s) ease,\n opacity var(--dropdown-open-duration, 0.5s) ease,\n visibility 0s;\n}\n\n/* Animation: Slide Down (Default) */\nhtml:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim=\"slide-down\"] [petal-el=\"dropdown-drawer\"] {\n transform: translateY(-10px);\n transform-origin: top;\n}\n\nhtml:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim=\"slide-down\"].w--open [petal-el=\"dropdown-drawer\"] {\n transform: translateY(0);\n}\n\n/* Animation: Slide Up */\nhtml:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim=\"slide-up\"] [petal-el=\"dropdown-drawer\"] {\n transform: translateY(10px);\n transform-origin: bottom;\n}\n\nhtml:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim=\"slide-up\"].w--open [petal-el=\"dropdown-drawer\"] {\n transform: translateY(0);\n}\n\n/* Animation: Slide Left */\nhtml:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim=\"slide-left\"] [petal-el=\"dropdown-drawer\"] {\n transform: translateX(10px);\n}\n\nhtml:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim=\"slide-left\"].w--open [petal-el=\"dropdown-drawer\"] {\n transform: translateX(0);\n}\n\n/* Animation: Slide Right */\nhtml:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim=\"slide-right\"] [petal-el=\"dropdown-drawer\"] {\n transform: translateX(-10px);\n}\n\nhtml:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim=\"slide-right\"].w--open [petal-el=\"dropdown-drawer\"] {\n transform: translateX(0);\n}\n\n/* ===========================\n Tablet Animations (max-width: 991px)\n =========================== */\n\n@media screen and (max-width: 991px) {\n /* Animation: Slide Down */\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-tablet=\"slide-down\"] [petal-el=\"dropdown-drawer\"] {\n transform: translateY(-10px);\n transform-origin: top;\n }\n\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-tablet=\"slide-down\"].w--open [petal-el=\"dropdown-drawer\"] {\n transform: translateY(0);\n }\n\n /* Animation: Slide Up */\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-tablet=\"slide-up\"] [petal-el=\"dropdown-drawer\"] {\n transform: translateY(10px);\n transform-origin: bottom;\n }\n\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-tablet=\"slide-up\"].w--open [petal-el=\"dropdown-drawer\"] {\n transform: translateY(0);\n }\n\n /* Animation: Slide Left */\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-tablet=\"slide-left\"] [petal-el=\"dropdown-drawer\"] {\n transform: translateX(10px);\n }\n\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-tablet=\"slide-left\"].w--open [petal-el=\"dropdown-drawer\"] {\n transform: translateX(0);\n }\n\n /* Animation: Slide Right */\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-tablet=\"slide-right\"] [petal-el=\"dropdown-drawer\"] {\n transform: translateX(-10px);\n }\n\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-tablet=\"slide-right\"].w--open [petal-el=\"dropdown-drawer\"] {\n transform: translateX(0);\n }\n}\n\n/* ===========================\n Mobile Landscape Animations (max-width: 767px)\n =========================== */\n\n@media screen and (max-width: 767px) {\n /* Animation: Slide Down */\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-mobile-landscape=\"slide-down\"] [petal-el=\"dropdown-drawer\"] {\n transform: translateY(-10px);\n transform-origin: top;\n }\n\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-mobile-landscape=\"slide-down\"].w--open [petal-el=\"dropdown-drawer\"] {\n transform: translateY(0);\n }\n\n /* Animation: Slide Up */\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-mobile-landscape=\"slide-up\"] [petal-el=\"dropdown-drawer\"] {\n transform: translateY(10px);\n transform-origin: bottom;\n }\n\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-mobile-landscape=\"slide-up\"].w--open [petal-el=\"dropdown-drawer\"] {\n transform: translateY(0);\n }\n\n /* Animation: Slide Left */\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-mobile-landscape=\"slide-left\"] [petal-el=\"dropdown-drawer\"] {\n transform: translateX(10px);\n }\n\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-mobile-landscape=\"slide-left\"].w--open [petal-el=\"dropdown-drawer\"] {\n transform: translateX(0);\n }\n\n /* Animation: Slide Right */\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-mobile-landscape=\"slide-right\"] [petal-el=\"dropdown-drawer\"] {\n transform: translateX(-10px);\n }\n\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-mobile-landscape=\"slide-right\"].w--open [petal-el=\"dropdown-drawer\"] {\n transform: translateX(0);\n }\n}\n\n/* ===========================\n Mobile Animations (max-width: 479px)\n =========================== */\n\n@media screen and (max-width: 479px) {\n /* Animation: Slide Down */\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-mobile=\"slide-down\"] [petal-el=\"dropdown-drawer\"] {\n transform: translateY(-10px);\n transform-origin: top;\n }\n\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-mobile=\"slide-down\"].w--open [petal-el=\"dropdown-drawer\"] {\n transform: translateY(0);\n }\n\n /* Animation: Slide Up */\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-mobile=\"slide-up\"] [petal-el=\"dropdown-drawer\"] {\n transform: translateY(10px);\n transform-origin: bottom;\n }\n\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-mobile=\"slide-up\"].w--open [petal-el=\"dropdown-drawer\"] {\n transform: translateY(0);\n }\n\n /* Animation: Slide Left */\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-mobile=\"slide-left\"] [petal-el=\"dropdown-drawer\"] {\n transform: translateX(10px);\n }\n\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-mobile=\"slide-left\"].w--open [petal-el=\"dropdown-drawer\"] {\n transform: translateX(0);\n }\n\n /* Animation: Slide Right */\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-mobile=\"slide-right\"] [petal-el=\"dropdown-drawer\"] {\n transform: translateX(-10px);\n }\n\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-mobile=\"slide-right\"].w--open [petal-el=\"dropdown-drawer\"] {\n transform: translateX(0);\n }\n}\n\n/* ===========================\n Dropdown Backdrop\n =========================== */\n\n[petal-el=\"dropdown-backdrop\"] {\n opacity: 0;\n transition: opacity var(--dropdown-close-duration, 0.3s) ease;\n}\n\nbody:has([petal-el=\"dropdown\"] > [petal-el=\"dropdown-toggle\"][aria-expanded=\"true\"]) [petal-el=\"dropdown-backdrop\"] {\n opacity: 1;\n transition: opacity var(--dropdown-open-duration, 0.5s) ease;\n}\n\n/* ===========================\n Desktop Styles (Default - applies to all screen sizes first)\n =========================== */\n\n/* All dropdowns get standard desktop behavior by default */\n[petal-el=\"dropdown\"] {\n width: auto;\n}\n\n[petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"] {\n position: absolute;\n z-index: 1000;\n}\n\n[petal-el=\"dropdown-scroll\"] {\n overflow-x: hidden;\n overflow-y: auto !important;\n}\n\n/* ===========================\n Mobile Styles (Override on small containers)\n =========================== */\n\n@media screen and (max-width: 991px) {\n /* Hide dropdown toggle permanently on mobile ONLY when petal-dropdown-open-on-mobile is true */\n [petal-el=\"dropdown\"][petal-dropdown-open-on-tablet=\"true\"] [petal-el=\"dropdown-toggle\"] {\n display: none !important;\n }\n\n /* Make dropdown menu static positioning on mobile */\n [petal-el=\"dropdown\"][petal-dropdown-open-on-tablet=\"true\"] [petal-el=\"dropdown-menu\"] {\n position: static !important;\n }\n\n /* Unset all styles on dropdown-drawer on mobile ONLY when petal-dropdown-open-on-mobile is true */\n html:not(.wf-design-mode) [petal-el=\"dropdown\"][petal-dropdown-open-on-tablet=\"true\"] [petal-el=\"dropdown-drawer\"] {\n all: unset !important;\n display: block !important;\n }\n\n /* Hide dropdown background on mobile ONLY when petal-dropdown-open-on-mobile is true */\n [petal-el=\"dropdown\"][petal-dropdown-open-on-tablet=\"true\"] [petal-el=\"dropdown-background\"] {\n display: none;\n }\n}\n\n@media screen and (max-width: 767px) {\n /* Hide dropdown toggle permanently on mobile ONLY when petal-dropdown-open-on-mobile is true */\n [petal-el=\"dropdown\"][petal-dropdown-open-on-mobile-landscape=\"true\"] [petal-el=\"dropdown-toggle\"] {\n display: none !important;\n }\n\n /* Make dropdown menu static positioning on mobile */\n [petal-el=\"dropdown\"][petal-dropdown-open-on-mobile-landscape=\"true\"] [petal-el=\"dropdown-menu\"] {\n position: static !important;\n }\n\n /* Unset all styles on dropdown-drawer on mobile ONLY when petal-dropdown-open-on-mobile is true */\n html:not(.wf-design-mode) [petal-el=\"dropdown\"][petal-dropdown-open-on-mobile-landscape=\"true\"] [petal-el=\"dropdown-drawer\"] {\n all: unset !important;\n display: block !important;\n }\n\n /* Hide dropdown background on mobile ONLY when petal-dropdown-open-on-mobile is true */\n [petal-el=\"dropdown\"][petal-dropdown-open-on-mobile-landscape=\"true\"] [petal-el=\"dropdown-background\"] {\n display: none;\n }\n}\n\n@media screen and (max-width: 479px) {\n /* Hide dropdown toggle permanently on mobile ONLY when petal-dropdown-open-on-mobile is true */\n [petal-el=\"dropdown\"][petal-dropdown-open-on-mobile=\"true\"] [petal-el=\"dropdown-toggle\"] {\n display: none !important;\n }\n\n /* Make dropdown menu static positioning on mobile */\n [petal-el=\"dropdown\"][petal-dropdown-open-on-mobile=\"true\"] [petal-el=\"dropdown-menu\"] {\n position: static !important;\n }\n\n /* Unset all styles on dropdown-drawer on mobile ONLY when petal-dropdown-open-on-mobile is true */\n html:not(.wf-design-mode) [petal-el=\"dropdown\"][petal-dropdown-open-on-mobile=\"true\"] [petal-el=\"dropdown-drawer\"] {\n all: unset !important;\n display: block !important;\n }\n\n /* Hide dropdown background on mobile ONLY when petal-dropdown-open-on-mobile is true */\n [petal-el=\"dropdown\"][petal-dropdown-open-on-mobile=\"true\"] [petal-el=\"dropdown-background\"] {\n display: none;\n }\n}\n`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://petal/./src/lib/dropdown.css?./node_modules/css-loader/dist/cjs.js");
29
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `/* ===========================\n Dropdown Core Styles\n =========================== */\n\n/* Default CSS variable values */\n[petal-el=\"dropdown\"] {\n --dropdown-open-duration: 0.5s;\n --dropdown-close-duration: 0.3s;\n}\n\n/* ===========================\n Dropdown Animations\n =========================== */\n\n/* Dropdown Menu: Initial (Closed) State - Hidden and prevent interaction */\nhtml:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"] {\n visibility: hidden;\n pointer-events: none;\n}\n\n/* Dropdown Menu: Open State - Visible and allow interaction */\nhtml:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"].w--open {\n visibility: visible;\n pointer-events: auto;\n}\n\n/* Dropdown Drawer: Initial (Closed) State - Common Styles */\nhtml:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-drawer\"] {\n visibility: hidden;\n opacity: 0;\n transition:\n transform var(--dropdown-close-duration, 0.3s) ease,\n opacity var(--dropdown-close-duration, 0.3s) ease,\n visibility 0s var(--dropdown-close-duration, 0.3s);\n}\n\n/* Dropdown Drawer: Open State - Common Styles */\nhtml:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"].w--open [petal-el=\"dropdown-drawer\"] {\n visibility: visible;\n opacity: 1;\n transition:\n transform var(--dropdown-open-duration, 0.5s) ease,\n opacity var(--dropdown-open-duration, 0.5s) ease,\n visibility 0s;\n}\n\n/* Animation: Slide Down (Default) */\nhtml:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim=\"slide-down\"] [petal-el=\"dropdown-drawer\"] {\n transform: translateY(-10px);\n transform-origin: top;\n}\n\nhtml:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim=\"slide-down\"].w--open [petal-el=\"dropdown-drawer\"] {\n transform: translateY(0);\n}\n\n/* Animation: Slide Up */\nhtml:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim=\"slide-up\"] [petal-el=\"dropdown-drawer\"] {\n transform: translateY(10px);\n transform-origin: bottom;\n}\n\nhtml:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim=\"slide-up\"].w--open [petal-el=\"dropdown-drawer\"] {\n transform: translateY(0);\n}\n\n/* Animation: Slide Left */\nhtml:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim=\"slide-left\"] [petal-el=\"dropdown-drawer\"] {\n transform: translateX(10px);\n}\n\nhtml:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim=\"slide-left\"].w--open [petal-el=\"dropdown-drawer\"] {\n transform: translateX(0);\n}\n\n/* Animation: Slide Right */\nhtml:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim=\"slide-right\"] [petal-el=\"dropdown-drawer\"] {\n transform: translateX(-10px);\n}\n\nhtml:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim=\"slide-right\"].w--open [petal-el=\"dropdown-drawer\"] {\n transform: translateX(0);\n}\n\n/* ===========================\n Tablet Animations (max-width: 991px)\n =========================== */\n\n@media screen and (max-width: 991px) {\n /* Animation: Slide Down */\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-tablet=\"slide-down\"] [petal-el=\"dropdown-drawer\"] {\n transform: translateY(-10px);\n transform-origin: top;\n }\n\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-tablet=\"slide-down\"].w--open [petal-el=\"dropdown-drawer\"] {\n transform: translateY(0);\n }\n\n /* Animation: Slide Up */\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-tablet=\"slide-up\"] [petal-el=\"dropdown-drawer\"] {\n transform: translateY(10px);\n transform-origin: bottom;\n }\n\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-tablet=\"slide-up\"].w--open [petal-el=\"dropdown-drawer\"] {\n transform: translateY(0);\n }\n\n /* Animation: Slide Left */\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-tablet=\"slide-left\"] [petal-el=\"dropdown-drawer\"] {\n transform: translateX(10px);\n }\n\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-tablet=\"slide-left\"].w--open [petal-el=\"dropdown-drawer\"] {\n transform: translateX(0);\n }\n\n /* Animation: Slide Right */\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-tablet=\"slide-right\"] [petal-el=\"dropdown-drawer\"] {\n transform: translateX(-10px);\n }\n\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-tablet=\"slide-right\"].w--open [petal-el=\"dropdown-drawer\"] {\n transform: translateX(0);\n }\n}\n\n/* ===========================\n Mobile Landscape Animations (max-width: 767px)\n =========================== */\n\n@media screen and (max-width: 767px) {\n /* Animation: Slide Down */\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-mobile-landscape=\"slide-down\"] [petal-el=\"dropdown-drawer\"] {\n transform: translateY(-10px);\n transform-origin: top;\n }\n\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-mobile-landscape=\"slide-down\"].w--open [petal-el=\"dropdown-drawer\"] {\n transform: translateY(0);\n }\n\n /* Animation: Slide Up */\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-mobile-landscape=\"slide-up\"] [petal-el=\"dropdown-drawer\"] {\n transform: translateY(10px);\n transform-origin: bottom;\n }\n\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-mobile-landscape=\"slide-up\"].w--open [petal-el=\"dropdown-drawer\"] {\n transform: translateY(0);\n }\n\n /* Animation: Slide Left */\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-mobile-landscape=\"slide-left\"] [petal-el=\"dropdown-drawer\"] {\n transform: translateX(10px);\n }\n\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-mobile-landscape=\"slide-left\"].w--open [petal-el=\"dropdown-drawer\"] {\n transform: translateX(0);\n }\n\n /* Animation: Slide Right */\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-mobile-landscape=\"slide-right\"] [petal-el=\"dropdown-drawer\"] {\n transform: translateX(-10px);\n }\n\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-mobile-landscape=\"slide-right\"].w--open [petal-el=\"dropdown-drawer\"] {\n transform: translateX(0);\n }\n}\n\n/* ===========================\n Mobile Animations (max-width: 479px)\n =========================== */\n\n@media screen and (max-width: 479px) {\n /* Animation: Slide Down */\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-mobile=\"slide-down\"] [petal-el=\"dropdown-drawer\"] {\n transform: translateY(-10px);\n transform-origin: top;\n }\n\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-mobile=\"slide-down\"].w--open [petal-el=\"dropdown-drawer\"] {\n transform: translateY(0);\n }\n\n /* Animation: Slide Up */\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-mobile=\"slide-up\"] [petal-el=\"dropdown-drawer\"] {\n transform: translateY(10px);\n transform-origin: bottom;\n }\n\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-mobile=\"slide-up\"].w--open [petal-el=\"dropdown-drawer\"] {\n transform: translateY(0);\n }\n\n /* Animation: Slide Left */\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-mobile=\"slide-left\"] [petal-el=\"dropdown-drawer\"] {\n transform: translateX(10px);\n }\n\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-mobile=\"slide-left\"].w--open [petal-el=\"dropdown-drawer\"] {\n transform: translateX(0);\n }\n\n /* Animation: Slide Right */\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-mobile=\"slide-right\"] [petal-el=\"dropdown-drawer\"] {\n transform: translateX(-10px);\n }\n\n html:not(.wf-design-mode) [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"][data-anim-mobile=\"slide-right\"].w--open [petal-el=\"dropdown-drawer\"] {\n transform: translateX(0);\n }\n}\n\n/* ===========================\n Dropdown Backdrop\n =========================== */\n\n[petal-el=\"dropdown-backdrop\"] {\n opacity: 0;\n transition: opacity var(--dropdown-close-duration, 0.3s) ease;\n}\n\nbody:has([petal-el=\"dropdown\"] > [petal-el=\"dropdown-toggle\"][aria-expanded=\"true\"]) [petal-el=\"dropdown-backdrop\"] {\n opacity: 1;\n transition: opacity var(--dropdown-open-duration, 0.5s) ease;\n}\n\n/* ===========================\n Desktop Styles (Default - applies to all screen sizes first)\n =========================== */\n\n/* All dropdowns get standard desktop behavior by default */\n[petal-el=\"dropdown\"] {\n width: auto;\n}\n\n[petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"] {\n position: absolute;\n z-index: 1000;\n}\n\n[petal-el=\"dropdown-scroll\"] {\n overflow-x: hidden;\n overflow-y: auto !important;\n}\n\n/* ===========================\n Mobile Styles (Override on small containers)\n =========================== */\n\n@media screen and (max-width: 991px) {\n /* Hide dropdown toggle permanently on mobile ONLY when petal-dropdown-open-on-mobile is true */\n [petal-el=\"dropdown\"][petal-dropdown-open-on-tablet=\"true\"] [petal-el=\"dropdown-toggle\"] {\n display: none !important;\n }\n\n /* Make dropdown menu static positioning on mobile */\n [petal-el=\"dropdown\"][petal-dropdown-open-on-tablet=\"true\"] [petal-el=\"dropdown-menu\"] {\n position: static !important;\n }\n\n /* Unset all styles on dropdown-drawer on mobile ONLY when petal-dropdown-open-on-mobile is true */\n html:not(.wf-design-mode) [petal-el=\"dropdown\"][petal-dropdown-open-on-tablet=\"true\"] [petal-el=\"dropdown-drawer\"] {\n all: unset !important;\n display: block !important;\n }\n\n /* Hide dropdown background on mobile ONLY when petal-dropdown-open-on-mobile is true */\n [petal-el=\"dropdown\"][petal-dropdown-open-on-tablet=\"true\"] [petal-el=\"dropdown-background\"] {\n display: none;\n }\n}\n\n@media screen and (max-width: 767px) {\n /* Hide dropdown toggle permanently on mobile ONLY when petal-dropdown-open-on-mobile is true */\n [petal-el=\"dropdown\"][petal-dropdown-open-on-mobile-landscape=\"true\"] [petal-el=\"dropdown-toggle\"] {\n display: none !important;\n }\n\n /* Make dropdown menu static positioning on mobile */\n [petal-el=\"dropdown\"][petal-dropdown-open-on-mobile-landscape=\"true\"] [petal-el=\"dropdown-menu\"] {\n position: static !important;\n }\n\n /* Unset all styles on dropdown-drawer on mobile ONLY when petal-dropdown-open-on-mobile is true */\n html:not(.wf-design-mode) [petal-el=\"dropdown\"][petal-dropdown-open-on-mobile-landscape=\"true\"] [petal-el=\"dropdown-drawer\"] {\n all: unset !important;\n display: block !important;\n }\n\n /* Hide dropdown background on mobile ONLY when petal-dropdown-open-on-mobile is true */\n [petal-el=\"dropdown\"][petal-dropdown-open-on-mobile-landscape=\"true\"] [petal-el=\"dropdown-background\"] {\n display: none;\n }\n}\n\n@media screen and (max-width: 479px) {\n /* Hide dropdown toggle permanently on mobile ONLY when petal-dropdown-open-on-mobile is true */\n [petal-el=\"dropdown\"][petal-dropdown-open-on-mobile=\"true\"] [petal-el=\"dropdown-toggle\"] {\n display: none !important;\n }\n\n /* Make dropdown menu static positioning on mobile */\n [petal-el=\"dropdown\"][petal-dropdown-open-on-mobile=\"true\"] [petal-el=\"dropdown-menu\"] {\n position: static !important;\n }\n\n /* Unset all styles on dropdown-drawer on mobile ONLY when petal-dropdown-open-on-mobile is true */\n html:not(.wf-design-mode) [petal-el=\"dropdown\"][petal-dropdown-open-on-mobile=\"true\"] [petal-el=\"dropdown-drawer\"] {\n all: unset !important;\n display: block !important;\n }\n\n /* Hide dropdown background on mobile ONLY when petal-dropdown-open-on-mobile is true */\n [petal-el=\"dropdown\"][petal-dropdown-open-on-mobile=\"true\"] [petal-el=\"dropdown-background\"] {\n display: none;\n }\n}\n`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://petal/./src/lib/dropdown.css?./node_modules/css-loader/dist/cjs.js");
30
30
 
31
31
  /***/ }),
32
32
 
@@ -176,7 +176,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
176
176
  \*******************************/
177
177
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
178
178
 
179
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ animateCloseSlideDown: () => (/* binding */ animateCloseSlideDown),\n/* harmony export */ animateCloseSlideLeft: () => (/* binding */ animateCloseSlideLeft),\n/* harmony export */ animateCloseSlideRight: () => (/* binding */ animateCloseSlideRight),\n/* harmony export */ animateCloseSlideUp: () => (/* binding */ animateCloseSlideUp),\n/* harmony export */ animateMaskClosed: () => (/* binding */ animateMaskClosed),\n/* harmony export */ animateMaskOpen: () => (/* binding */ animateMaskOpen),\n/* harmony export */ animateOpenSlideDown: () => (/* binding */ animateOpenSlideDown),\n/* harmony export */ animateOpenSlideLeft: () => (/* binding */ animateOpenSlideLeft),\n/* harmony export */ animateOpenSlideRight: () => (/* binding */ animateOpenSlideRight),\n/* harmony export */ animateOpenSlideUp: () => (/* binding */ animateOpenSlideUp),\n/* harmony export */ animateScaleDown: () => (/* binding */ animateScaleDown),\n/* harmony export */ animateScaleUp: () => (/* binding */ animateScaleUp)\n/* harmony export */ });\nfunction animateScaleUp() {\n return {\n from: { scale: 0, opacity: 0 },\n to: { scale: 1, opacity: 1, ease: \"power3.inOut\" },\n };\n}\nfunction animateScaleDown() {\n return {\n from: { scale: 1, opacity: 0 },\n to: { scale: 0, opacity: 1, ease: \"power3.inOut\" },\n };\n}\nfunction animateOpenSlideUp() {\n return {\n from: { y: \"100%\", x: \"0%\", opacity: 0 }, // From bottom\n to: { y: \"0%\", x: \"0%\", opacity: 1, ease: \"power3.inOut\" }, // To top\n };\n}\nfunction animateOpenSlideDown() {\n return {\n from: { y: \"-100%\", x: \"0%\", opacity: 0 }, // From top\n to: { y: \"0%\", x: \"0%\", opacity: 1, ease: \"power3.inOut\" }, // To bottom\n };\n}\nfunction animateOpenSlideRight() {\n return {\n from: { x: \"-100%\", y: \"0%\", opacity: 0 }, // From left\n to: { x: \"0%\", y: \"0%\", opacity: 1, ease: \"power3.inOut\" }, // To center\n };\n}\nfunction animateOpenSlideLeft() {\n return {\n from: { x: \"100%\", y: \"0%\", opacity: 0 }, // From right\n to: { x: \"0%\", y: \"0%\", opacity: 1, ease: \"power3.inOut\" }, // To center\n };\n}\nfunction animateCloseSlideUp() {\n return {\n from: { y: \"0%\", x: \"0%\", opacity: 1 }, // From bottom\n to: { y: \"-100%\", x: \"0%\", opacity: 0, ease: \"power3.inOut\" }, // To top\n };\n}\nfunction animateCloseSlideDown() {\n return {\n from: { y: \"0%\", x: \"0%\", opacity: 1 }, // From top\n to: { y: \"100%\", x: \"0%\", opacity: 0, ease: \"power3.inOut\" }, // To bottom\n };\n}\nfunction animateCloseSlideRight() {\n return {\n from: { x: \"0%\", y: \"0%\", opacity: 1 }, // From left\n to: { x: \"100%\", y: \"0%\", opacity: 0, ease: \"power3.inOut\" }, // To center\n };\n}\nfunction animateCloseSlideLeft() {\n return {\n from: { x: \"0%\", y: \"0%\", opacity: 1 }, // From right\n to: { x: \"-100%\", y: \"0%\", opacity: 0, ease: \"power3.inOut\" }, // To center\n };\n}\n// Mask animations\nfunction animateMaskOpen(opacity) {\n return {\n from: { opacity: 0 },\n to: { opacity: opacity, duration: 0.5 },\n };\n}\nfunction animateMaskClosed(opacity) {\n return {\n from: { opacity: opacity },\n to: { opacity: 0, duration: 0.5 },\n };\n}\n\n\n//# sourceURL=webpack://petal/./src/lib/animations.ts?");
179
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ animateCloseSlideDown: () => (/* binding */ animateCloseSlideDown),\n/* harmony export */ animateCloseSlideLeft: () => (/* binding */ animateCloseSlideLeft),\n/* harmony export */ animateCloseSlideRight: () => (/* binding */ animateCloseSlideRight),\n/* harmony export */ animateCloseSlideUp: () => (/* binding */ animateCloseSlideUp),\n/* harmony export */ animateDropdownCloseSlideDown: () => (/* binding */ animateDropdownCloseSlideDown),\n/* harmony export */ animateDropdownCloseSlideLeft: () => (/* binding */ animateDropdownCloseSlideLeft),\n/* harmony export */ animateDropdownCloseSlideRight: () => (/* binding */ animateDropdownCloseSlideRight),\n/* harmony export */ animateDropdownCloseSlideUp: () => (/* binding */ animateDropdownCloseSlideUp),\n/* harmony export */ animateDropdownOpenSlideDown: () => (/* binding */ animateDropdownOpenSlideDown),\n/* harmony export */ animateDropdownOpenSlideLeft: () => (/* binding */ animateDropdownOpenSlideLeft),\n/* harmony export */ animateDropdownOpenSlideRight: () => (/* binding */ animateDropdownOpenSlideRight),\n/* harmony export */ animateDropdownOpenSlideUp: () => (/* binding */ animateDropdownOpenSlideUp),\n/* harmony export */ animateMaskClosed: () => (/* binding */ animateMaskClosed),\n/* harmony export */ animateMaskOpen: () => (/* binding */ animateMaskOpen),\n/* harmony export */ animateOpenSlideDown: () => (/* binding */ animateOpenSlideDown),\n/* harmony export */ animateOpenSlideLeft: () => (/* binding */ animateOpenSlideLeft),\n/* harmony export */ animateOpenSlideRight: () => (/* binding */ animateOpenSlideRight),\n/* harmony export */ animateOpenSlideUp: () => (/* binding */ animateOpenSlideUp),\n/* harmony export */ animateScaleDown: () => (/* binding */ animateScaleDown),\n/* harmony export */ animateScaleUp: () => (/* binding */ animateScaleUp)\n/* harmony export */ });\nfunction animateScaleUp() {\n return {\n from: { scale: 0, opacity: 0 },\n to: { scale: 1, opacity: 1, ease: \"power3.inOut\" },\n };\n}\nfunction animateScaleDown() {\n return {\n from: { scale: 1, opacity: 0 },\n to: { scale: 0, opacity: 1, ease: \"power3.inOut\" },\n };\n}\nfunction animateOpenSlideUp() {\n return {\n from: { y: \"100%\", x: \"0%\", opacity: 0 }, // From bottom\n to: { y: \"0%\", x: \"0%\", opacity: 1, ease: \"power3.inOut\" }, // To top\n };\n}\nfunction animateOpenSlideDown() {\n return {\n from: { y: \"-100%\", x: \"0%\", opacity: 0 }, // From top\n to: { y: \"0%\", x: \"0%\", opacity: 1, ease: \"power3.inOut\" }, // To bottom\n };\n}\nfunction animateOpenSlideRight() {\n return {\n from: { x: \"-100%\", y: \"0%\", opacity: 0 }, // From left\n to: { x: \"0%\", y: \"0%\", opacity: 1, ease: \"power3.inOut\" }, // To center\n };\n}\nfunction animateOpenSlideLeft() {\n return {\n from: { x: \"100%\", y: \"0%\", opacity: 0 }, // From right\n to: { x: \"0%\", y: \"0%\", opacity: 1, ease: \"power3.inOut\" }, // To center\n };\n}\nfunction animateCloseSlideUp() {\n return {\n from: { y: \"0%\", x: \"0%\", opacity: 1 }, // From bottom\n to: { y: \"-100%\", x: \"0%\", opacity: 0, ease: \"power3.inOut\" }, // To top\n };\n}\nfunction animateCloseSlideDown() {\n return {\n from: { y: \"0%\", x: \"0%\", opacity: 1 }, // From top\n to: { y: \"100%\", x: \"0%\", opacity: 0, ease: \"power3.inOut\" }, // To bottom\n };\n}\nfunction animateCloseSlideRight() {\n return {\n from: { x: \"0%\", y: \"0%\", opacity: 1 }, // From left\n to: { x: \"100%\", y: \"0%\", opacity: 0, ease: \"power3.inOut\" }, // To center\n };\n}\nfunction animateCloseSlideLeft() {\n return {\n from: { x: \"0%\", y: \"0%\", opacity: 1 }, // From right\n to: { x: \"-100%\", y: \"0%\", opacity: 0, ease: \"power3.inOut\" }, // To center\n };\n}\n// Mask animations\nfunction animateMaskOpen(opacity) {\n return {\n from: { opacity: 0 },\n to: { opacity: opacity, duration: 0.5 },\n };\n}\nfunction animateMaskClosed(opacity) {\n return {\n from: { opacity: opacity },\n to: { opacity: 0, duration: 0.5 },\n };\n}\n// Dropdown animations (subtle movements for dropdown menus)\nfunction animateDropdownOpenSlideDown() {\n return {\n from: { y: -10, opacity: 0 },\n to: { y: 0, opacity: 1, ease: \"power2.out\" },\n };\n}\nfunction animateDropdownCloseSlideDown() {\n return {\n from: { y: 0, opacity: 1 },\n to: { y: -10, opacity: 0, ease: \"power2.in\" },\n };\n}\nfunction animateDropdownOpenSlideUp() {\n return {\n from: { y: 10, opacity: 0 },\n to: { y: 0, opacity: 1, ease: \"power2.out\" },\n };\n}\nfunction animateDropdownCloseSlideUp() {\n return {\n from: { y: 0, opacity: 1 },\n to: { y: 100, opacity: 0, ease: \"power2.in\" },\n };\n}\nfunction animateDropdownOpenSlideLeft() {\n return {\n from: { x: 100, opacity: 0 },\n to: { x: 0, opacity: 1, ease: \"power2.in\" },\n };\n}\nfunction animateDropdownCloseSlideLeft() {\n return {\n from: { x: 0, opacity: 1 },\n to: { x: 100, opacity: 0, ease: \"power2.in\" },\n };\n}\nfunction animateDropdownOpenSlideRight() {\n return {\n from: { x: -100, opacity: 0 },\n to: { x: 0, opacity: 1, ease: \"power2.in\" },\n };\n}\nfunction animateDropdownCloseSlideRight() {\n return {\n from: { x: 0, opacity: 1 },\n to: { x: -100, opacity: 0, ease: \"power2.in\" },\n };\n}\n\n\n//# sourceURL=webpack://petal/./src/lib/animations.ts?");
180
180
 
181
181
  /***/ }),
182
182
 
@@ -186,7 +186,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
186
186
  \*******************************/
187
187
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
188
188
 
189
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ ARIA_EXPANDED: () => (/* binding */ ARIA_EXPANDED),\n/* harmony export */ ATTR_ALLOW_CLOSE: () => (/* binding */ ATTR_ALLOW_CLOSE),\n/* harmony export */ ATTR_PETAL_ANIM_CLOSE: () => (/* binding */ ATTR_PETAL_ANIM_CLOSE),\n/* harmony export */ ATTR_PETAL_ANIM_CLOSE_MOBILE: () => (/* binding */ ATTR_PETAL_ANIM_CLOSE_MOBILE),\n/* harmony export */ ATTR_PETAL_ANIM_OPEN: () => (/* binding */ ATTR_PETAL_ANIM_OPEN),\n/* harmony export */ ATTR_PETAL_ANIM_OPEN_MOBILE: () => (/* binding */ ATTR_PETAL_ANIM_OPEN_MOBILE),\n/* harmony export */ ATTR_PETAL_BANNER: () => (/* binding */ ATTR_PETAL_BANNER),\n/* harmony export */ ATTR_PETAL_BANNER_CLOSE: () => (/* binding */ ATTR_PETAL_BANNER_CLOSE),\n/* harmony export */ ATTR_PETAL_BANNER_CLOSED_CLASS: () => (/* binding */ ATTR_PETAL_BANNER_CLOSED_CLASS),\n/* harmony export */ ATTR_PETAL_CLOSE: () => (/* binding */ ATTR_PETAL_CLOSE),\n/* harmony export */ ATTR_PETAL_DROPDOWN: () => (/* binding */ ATTR_PETAL_DROPDOWN),\n/* harmony export */ ATTR_PETAL_DROPDOWN_ANIM: () => (/* binding */ ATTR_PETAL_DROPDOWN_ANIM),\n/* harmony export */ ATTR_PETAL_DROPDOWN_ANIM_MOBILE: () => (/* binding */ ATTR_PETAL_DROPDOWN_ANIM_MOBILE),\n/* harmony export */ ATTR_PETAL_DROPDOWN_ANIM_MOBILE_LANDSCAPE: () => (/* binding */ ATTR_PETAL_DROPDOWN_ANIM_MOBILE_LANDSCAPE),\n/* harmony export */ ATTR_PETAL_DROPDOWN_ANIM_TABLET: () => (/* binding */ ATTR_PETAL_DROPDOWN_ANIM_TABLET),\n/* harmony export */ ATTR_PETAL_DROPDOWN_BACKDROP: () => (/* binding */ ATTR_PETAL_DROPDOWN_BACKDROP),\n/* harmony export */ ATTR_PETAL_DROPDOWN_BACKGROUND: () => (/* binding */ ATTR_PETAL_DROPDOWN_BACKGROUND),\n/* harmony export */ ATTR_PETAL_DROPDOWN_CLOSE_DELAY: () => (/* binding */ ATTR_PETAL_DROPDOWN_CLOSE_DELAY),\n/* harmony export */ ATTR_PETAL_DROPDOWN_GROUP: () => (/* binding */ ATTR_PETAL_DROPDOWN_GROUP),\n/* harmony export */ ATTR_PETAL_DROPDOWN_MENU: () => (/* binding */ ATTR_PETAL_DROPDOWN_MENU),\n/* harmony export */ ATTR_PETAL_DROPDOWN_MENU_BOX: () => (/* binding */ ATTR_PETAL_DROPDOWN_MENU_BOX),\n/* harmony export */ ATTR_PETAL_DROPDOWN_OPEN_DELAY: () => (/* binding */ ATTR_PETAL_DROPDOWN_OPEN_DELAY),\n/* harmony export */ ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER: () => (/* binding */ ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER),\n/* harmony export */ ATTR_PETAL_DROPDOWN_OPEN_ON_MOBILE: () => (/* binding */ ATTR_PETAL_DROPDOWN_OPEN_ON_MOBILE),\n/* harmony export */ ATTR_PETAL_DROPDOWN_OPEN_ON_MOBILE_LANDSCAPE: () => (/* binding */ ATTR_PETAL_DROPDOWN_OPEN_ON_MOBILE_LANDSCAPE),\n/* harmony export */ ATTR_PETAL_DROPDOWN_OPEN_ON_TABLET: () => (/* binding */ ATTR_PETAL_DROPDOWN_OPEN_ON_TABLET),\n/* harmony export */ ATTR_PETAL_DROPDOWN_SCROLL: () => (/* binding */ ATTR_PETAL_DROPDOWN_SCROLL),\n/* harmony export */ ATTR_PETAL_DROPDOWN_SHOW_MENU: () => (/* binding */ ATTR_PETAL_DROPDOWN_SHOW_MENU),\n/* harmony export */ ATTR_PETAL_DROPDOWN_TOGGLE: () => (/* binding */ ATTR_PETAL_DROPDOWN_TOGGLE),\n/* harmony export */ ATTR_PETAL_DURATION: () => (/* binding */ ATTR_PETAL_DURATION),\n/* harmony export */ ATTR_PETAL_ELEMENT: () => (/* binding */ ATTR_PETAL_ELEMENT),\n/* harmony export */ ATTR_PETAL_MASK: () => (/* binding */ ATTR_PETAL_MASK),\n/* harmony export */ ATTR_PETAL_MASK_CLOSE: () => (/* binding */ ATTR_PETAL_MASK_CLOSE),\n/* harmony export */ ATTR_PETAL_MASK_OPACITY: () => (/* binding */ ATTR_PETAL_MASK_OPACITY),\n/* harmony export */ ATTR_PETAL_NAME: () => (/* binding */ ATTR_PETAL_NAME),\n/* harmony export */ ATTR_PETAL_OPEN: () => (/* binding */ ATTR_PETAL_OPEN),\n/* harmony export */ ATTR_PETAL_POPUP: () => (/* binding */ ATTR_PETAL_POPUP),\n/* harmony export */ ATTR_PETAL_SESSION_TTL: () => (/* binding */ ATTR_PETAL_SESSION_TTL),\n/* harmony export */ ATTR_PETAL_SHOW_DELAY: () => (/* binding */ ATTR_PETAL_SHOW_DELAY),\n/* harmony export */ ATTR_PETAL_SHOW_ONCE: () => (/* binding */ ATTR_PETAL_SHOW_ONCE),\n/* harmony export */ ATTR_PETAL_SLOT: () => (/* binding */ ATTR_PETAL_SLOT),\n/* harmony export */ CLASS_DROPDOWN_OPEN: () => (/* binding */ CLASS_DROPDOWN_OPEN)\n/* harmony export */ });\n// BASE\nconst ATTR_PETAL_NAME = \"petal\";\nconst ATTR_PETAL_ELEMENT = \"petal-el\";\n// BEHAVIOR\nconst ATTR_PETAL_SHOW_ONCE = \"petal-show-once\"; // Regardless of other settings, only show the popup once per user session\nconst ATTR_PETAL_SHOW_DELAY = \"petal-show-delay\"; // Time to wait before showing popup (in seconds)\nconst ATTR_PETAL_SESSION_TTL = \"petal-session-ttl\"; // Time to keep user session (in hours)\n/**-------------------------*\n * POPUP\n *--------------------------*/\n// ELEMENTS\nconst ATTR_PETAL_POPUP = \"popup\";\nconst ATTR_PETAL_OPEN = \"open\";\nconst ATTR_PETAL_CLOSE = \"close\";\nconst ATTR_PETAL_MASK = \"mask\";\nconst ATTR_PETAL_SLOT = \"slot\";\n// MASK\nconst ATTR_PETAL_MASK_OPACITY = \"petal-mask-opacity\";\nconst ATTR_PETAL_MASK_CLOSE = \"petal-mask-close\";\n// ANIMATIONS\nconst ATTR_PETAL_ANIM_OPEN = \"petal-anim-open\";\nconst ATTR_PETAL_ANIM_CLOSE = \"petal-anim-close\";\nconst ATTR_PETAL_ANIM_OPEN_MOBILE = \"petal-anim-open-mobile\";\nconst ATTR_PETAL_ANIM_CLOSE_MOBILE = \"petal-anim-close-mobile\";\nconst ATTR_PETAL_DURATION = \"petal-duration\";\n/**-------------------------*\n * BANNER\n *--------------------------*/\n// ELEMENTS\nconst ATTR_PETAL_BANNER = \"banner\";\nconst ATTR_PETAL_BANNER_CLOSE = \"banner-close\";\n// SETTINGS\nconst ATTR_ALLOW_CLOSE = \"petal-allow-close\";\n// CSS\nconst ATTR_PETAL_BANNER_CLOSED_CLASS = \"petal-hide-nav-banner\";\n/**-------------------------*\n * DROPDOWN\n *--------------------------*/\n// ELEMENTS\nconst ATTR_PETAL_DROPDOWN = \"dropdown\";\nconst ATTR_PETAL_DROPDOWN_TOGGLE = \"dropdown-toggle\";\nconst ATTR_PETAL_DROPDOWN_MENU = \"dropdown-menu\";\nconst ATTR_PETAL_DROPDOWN_MENU_BOX = \"dropdown-drawer\";\nconst ATTR_PETAL_DROPDOWN_BACKGROUND = \"dropdown-background\";\nconst ATTR_PETAL_DROPDOWN_SCROLL = \"dropdown-scroll\";\nconst ATTR_PETAL_DROPDOWN_BACKDROP = \"dropdown-backdrop\";\n// BEHAVIOR\nconst ATTR_PETAL_DROPDOWN_GROUP = \"petal-dropdown-group\";\nconst ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER = \"petal-dropdown-open-on-hover\";\nconst ATTR_PETAL_DROPDOWN_OPEN_DELAY = \"petal-dropdown-open-delay\";\nconst ATTR_PETAL_DROPDOWN_CLOSE_DELAY = \"petal-dropdown-close-delay\";\nconst ATTR_PETAL_DROPDOWN_SHOW_MENU = \"petal-dropdown-show-menu\";\nconst ATTR_PETAL_DROPDOWN_OPEN_ON_MOBILE = \"petal-dropdown-open-on-mobile\";\nconst ATTR_PETAL_DROPDOWN_OPEN_ON_MOBILE_LANDSCAPE = \"petal-dropdown-open-on-mobile-landscape\";\nconst ATTR_PETAL_DROPDOWN_OPEN_ON_TABLET = \"petal-dropdown-open-on-tablet\";\n// ANIMATIONS\nconst ATTR_PETAL_DROPDOWN_ANIM = \"petal-dropdown-anim\";\nconst ATTR_PETAL_DROPDOWN_ANIM_TABLET = \"petal-dropdown-anim-tablet\";\nconst ATTR_PETAL_DROPDOWN_ANIM_MOBILE_LANDSCAPE = \"petal-dropdown-anim-mobile-landscape\";\nconst ATTR_PETAL_DROPDOWN_ANIM_MOBILE = \"petal-dropdown-anim-mobile\";\n// CSS CLASSES\nconst CLASS_DROPDOWN_OPEN = \"w--open\";\n// ARIA ATTRIBUTES\nconst ARIA_EXPANDED = \"aria-expanded\";\n\n\n//# sourceURL=webpack://petal/./src/lib/attributes.ts?");
189
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ ARIA_EXPANDED: () => (/* binding */ ARIA_EXPANDED),\n/* harmony export */ ATTR_ALLOW_CLOSE: () => (/* binding */ ATTR_ALLOW_CLOSE),\n/* harmony export */ ATTR_PETAL_ANIM_CLOSE: () => (/* binding */ ATTR_PETAL_ANIM_CLOSE),\n/* harmony export */ ATTR_PETAL_ANIM_CLOSE_MOBILE: () => (/* binding */ ATTR_PETAL_ANIM_CLOSE_MOBILE),\n/* harmony export */ ATTR_PETAL_ANIM_OPEN: () => (/* binding */ ATTR_PETAL_ANIM_OPEN),\n/* harmony export */ ATTR_PETAL_ANIM_OPEN_MOBILE: () => (/* binding */ ATTR_PETAL_ANIM_OPEN_MOBILE),\n/* harmony export */ ATTR_PETAL_BANNER: () => (/* binding */ ATTR_PETAL_BANNER),\n/* harmony export */ ATTR_PETAL_BANNER_CLOSE: () => (/* binding */ ATTR_PETAL_BANNER_CLOSE),\n/* harmony export */ ATTR_PETAL_BANNER_CLOSED_CLASS: () => (/* binding */ ATTR_PETAL_BANNER_CLOSED_CLASS),\n/* harmony export */ ATTR_PETAL_CLOSE: () => (/* binding */ ATTR_PETAL_CLOSE),\n/* harmony export */ ATTR_PETAL_DROPDOWN: () => (/* binding */ ATTR_PETAL_DROPDOWN),\n/* harmony export */ ATTR_PETAL_DROPDOWN_ANIM: () => (/* binding */ ATTR_PETAL_DROPDOWN_ANIM),\n/* harmony export */ ATTR_PETAL_DROPDOWN_ANIM_CLOSE_SPEED: () => (/* binding */ ATTR_PETAL_DROPDOWN_ANIM_CLOSE_SPEED),\n/* harmony export */ ATTR_PETAL_DROPDOWN_ANIM_MOBILE: () => (/* binding */ ATTR_PETAL_DROPDOWN_ANIM_MOBILE),\n/* harmony export */ ATTR_PETAL_DROPDOWN_ANIM_MOBILE_LANDSCAPE: () => (/* binding */ ATTR_PETAL_DROPDOWN_ANIM_MOBILE_LANDSCAPE),\n/* harmony export */ ATTR_PETAL_DROPDOWN_ANIM_OPEN_SPEED: () => (/* binding */ ATTR_PETAL_DROPDOWN_ANIM_OPEN_SPEED),\n/* harmony export */ ATTR_PETAL_DROPDOWN_ANIM_TABLET: () => (/* binding */ ATTR_PETAL_DROPDOWN_ANIM_TABLET),\n/* harmony export */ ATTR_PETAL_DROPDOWN_BACKDROP: () => (/* binding */ ATTR_PETAL_DROPDOWN_BACKDROP),\n/* harmony export */ ATTR_PETAL_DROPDOWN_BACKGROUND: () => (/* binding */ ATTR_PETAL_DROPDOWN_BACKGROUND),\n/* harmony export */ ATTR_PETAL_DROPDOWN_CLOSE_DELAY: () => (/* binding */ ATTR_PETAL_DROPDOWN_CLOSE_DELAY),\n/* harmony export */ ATTR_PETAL_DROPDOWN_GROUP: () => (/* binding */ ATTR_PETAL_DROPDOWN_GROUP),\n/* harmony export */ ATTR_PETAL_DROPDOWN_MENU: () => (/* binding */ ATTR_PETAL_DROPDOWN_MENU),\n/* harmony export */ ATTR_PETAL_DROPDOWN_MENU_BOX: () => (/* binding */ ATTR_PETAL_DROPDOWN_MENU_BOX),\n/* harmony export */ ATTR_PETAL_DROPDOWN_OPEN_DELAY: () => (/* binding */ ATTR_PETAL_DROPDOWN_OPEN_DELAY),\n/* harmony export */ ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER: () => (/* binding */ ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER),\n/* harmony export */ ATTR_PETAL_DROPDOWN_OPEN_ON_MOBILE: () => (/* binding */ ATTR_PETAL_DROPDOWN_OPEN_ON_MOBILE),\n/* harmony export */ ATTR_PETAL_DROPDOWN_OPEN_ON_MOBILE_LANDSCAPE: () => (/* binding */ ATTR_PETAL_DROPDOWN_OPEN_ON_MOBILE_LANDSCAPE),\n/* harmony export */ ATTR_PETAL_DROPDOWN_OPEN_ON_TABLET: () => (/* binding */ ATTR_PETAL_DROPDOWN_OPEN_ON_TABLET),\n/* harmony export */ ATTR_PETAL_DROPDOWN_SCROLL: () => (/* binding */ ATTR_PETAL_DROPDOWN_SCROLL),\n/* harmony export */ ATTR_PETAL_DROPDOWN_SHOW_MENU: () => (/* binding */ ATTR_PETAL_DROPDOWN_SHOW_MENU),\n/* harmony export */ ATTR_PETAL_DROPDOWN_TOGGLE: () => (/* binding */ ATTR_PETAL_DROPDOWN_TOGGLE),\n/* harmony export */ ATTR_PETAL_DURATION: () => (/* binding */ ATTR_PETAL_DURATION),\n/* harmony export */ ATTR_PETAL_ELEMENT: () => (/* binding */ ATTR_PETAL_ELEMENT),\n/* harmony export */ ATTR_PETAL_MASK: () => (/* binding */ ATTR_PETAL_MASK),\n/* harmony export */ ATTR_PETAL_MASK_CLOSE: () => (/* binding */ ATTR_PETAL_MASK_CLOSE),\n/* harmony export */ ATTR_PETAL_MASK_OPACITY: () => (/* binding */ ATTR_PETAL_MASK_OPACITY),\n/* harmony export */ ATTR_PETAL_NAME: () => (/* binding */ ATTR_PETAL_NAME),\n/* harmony export */ ATTR_PETAL_OPEN: () => (/* binding */ ATTR_PETAL_OPEN),\n/* harmony export */ ATTR_PETAL_POPUP: () => (/* binding */ ATTR_PETAL_POPUP),\n/* harmony export */ ATTR_PETAL_SESSION_TTL: () => (/* binding */ ATTR_PETAL_SESSION_TTL),\n/* harmony export */ ATTR_PETAL_SHOW_DELAY: () => (/* binding */ ATTR_PETAL_SHOW_DELAY),\n/* harmony export */ ATTR_PETAL_SHOW_ONCE: () => (/* binding */ ATTR_PETAL_SHOW_ONCE),\n/* harmony export */ ATTR_PETAL_SLOT: () => (/* binding */ ATTR_PETAL_SLOT),\n/* harmony export */ CLASS_DROPDOWN_OPEN: () => (/* binding */ CLASS_DROPDOWN_OPEN)\n/* harmony export */ });\n// BASE\nconst ATTR_PETAL_NAME = \"petal\";\nconst ATTR_PETAL_ELEMENT = \"petal-el\";\n// BEHAVIOR\nconst ATTR_PETAL_SHOW_ONCE = \"petal-show-once\"; // Regardless of other settings, only show the popup once per user session\nconst ATTR_PETAL_SHOW_DELAY = \"petal-show-delay\"; // Time to wait before showing popup (in seconds)\nconst ATTR_PETAL_SESSION_TTL = \"petal-session-ttl\"; // Time to keep user session (in hours)\n/**-------------------------*\n * POPUP\n *--------------------------*/\n// ELEMENTS\nconst ATTR_PETAL_POPUP = \"popup\";\nconst ATTR_PETAL_OPEN = \"open\";\nconst ATTR_PETAL_CLOSE = \"close\";\nconst ATTR_PETAL_MASK = \"mask\";\nconst ATTR_PETAL_SLOT = \"slot\";\n// MASK\nconst ATTR_PETAL_MASK_OPACITY = \"petal-mask-opacity\";\nconst ATTR_PETAL_MASK_CLOSE = \"petal-mask-close\";\n// ANIMATIONS\nconst ATTR_PETAL_ANIM_OPEN = \"petal-anim-open\";\nconst ATTR_PETAL_ANIM_CLOSE = \"petal-anim-close\";\nconst ATTR_PETAL_ANIM_OPEN_MOBILE = \"petal-anim-open-mobile\";\nconst ATTR_PETAL_ANIM_CLOSE_MOBILE = \"petal-anim-close-mobile\";\nconst ATTR_PETAL_DURATION = \"petal-duration\";\n/**-------------------------*\n * BANNER\n *--------------------------*/\n// ELEMENTS\nconst ATTR_PETAL_BANNER = \"banner\";\nconst ATTR_PETAL_BANNER_CLOSE = \"banner-close\";\n// SETTINGS\nconst ATTR_ALLOW_CLOSE = \"petal-allow-close\";\n// CSS\nconst ATTR_PETAL_BANNER_CLOSED_CLASS = \"petal-hide-nav-banner\";\n/**-------------------------*\n * DROPDOWN\n *--------------------------*/\n// ELEMENTS\nconst ATTR_PETAL_DROPDOWN = \"dropdown\";\nconst ATTR_PETAL_DROPDOWN_TOGGLE = \"dropdown-toggle\";\nconst ATTR_PETAL_DROPDOWN_MENU = \"dropdown-menu\";\nconst ATTR_PETAL_DROPDOWN_MENU_BOX = \"dropdown-drawer\";\nconst ATTR_PETAL_DROPDOWN_BACKGROUND = \"dropdown-background\";\nconst ATTR_PETAL_DROPDOWN_SCROLL = \"dropdown-scroll\";\nconst ATTR_PETAL_DROPDOWN_BACKDROP = \"dropdown-backdrop\";\n// BEHAVIOR\nconst ATTR_PETAL_DROPDOWN_GROUP = \"petal-dropdown-group\";\nconst ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER = \"petal-dropdown-open-on-hover\";\nconst ATTR_PETAL_DROPDOWN_OPEN_DELAY = \"petal-dropdown-open-delay\";\nconst ATTR_PETAL_DROPDOWN_CLOSE_DELAY = \"petal-dropdown-close-delay\";\nconst ATTR_PETAL_DROPDOWN_SHOW_MENU = \"petal-dropdown-show-menu\";\nconst ATTR_PETAL_DROPDOWN_OPEN_ON_MOBILE = \"petal-dropdown-open-on-mobile\";\nconst ATTR_PETAL_DROPDOWN_OPEN_ON_MOBILE_LANDSCAPE = \"petal-dropdown-open-on-mobile-landscape\";\nconst ATTR_PETAL_DROPDOWN_OPEN_ON_TABLET = \"petal-dropdown-open-on-tablet\";\n// ANIMATIONS\nconst ATTR_PETAL_DROPDOWN_ANIM = \"petal-dropdown-anim\";\nconst ATTR_PETAL_DROPDOWN_ANIM_TABLET = \"petal-dropdown-anim-tablet\";\nconst ATTR_PETAL_DROPDOWN_ANIM_MOBILE_LANDSCAPE = \"petal-dropdown-anim-mobile-landscape\";\nconst ATTR_PETAL_DROPDOWN_ANIM_MOBILE = \"petal-dropdown-anim-mobile\";\nconst ATTR_PETAL_DROPDOWN_ANIM_OPEN_SPEED = \"petal-dropdown-anim-open-speed\";\nconst ATTR_PETAL_DROPDOWN_ANIM_CLOSE_SPEED = \"petal-dropdown-anim-close-speed\";\n// CSS CLASSES\nconst CLASS_DROPDOWN_OPEN = \"w--open\";\n// ARIA ATTRIBUTES\nconst ARIA_EXPANDED = \"aria-expanded\";\n\n\n//# sourceURL=webpack://petal/./src/lib/attributes.ts?");
190
190
 
191
191
  /***/ }),
192
192
 
@@ -226,7 +226,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
226
226
  \*****************************/
227
227
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
228
228
 
229
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ initializeDropdowns: () => (/* binding */ initializeDropdowns)\n/* harmony export */ });\n/* harmony import */ var _attributes__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./attributes */ \"./src/lib/attributes.ts\");\n/**\n * Dropdown Component\n *\n * Handles interactive dropdown menus with support for:\n * - Click or hover-based opening\n * - Customizable close delays\n * - Grouped dropdown coordination\n * - CSS-based animations\n * - Accessibility (aria-expanded)\n *\n * HTML Attributes (defined in attributes.ts):\n * - petal-el=\"dropdown\" - Container element\n * - petal-el=\"dropdown-toggle\" - Clickable/hoverable trigger\n * - petal-el=\"dropdown-menu\" - Menu content\n * - petal-el=\"dropdown-drawer\" - Menu inner box\n * - petal-el=\"dropdown-background\" (optional) - Background overlay\n * - petal-dropdown-group=\"name\" (optional) - Group name for coordinated animations\n * - petal-dropdown-open-on-hover=\"true\" (optional) - Use hover instead of click\n * - petal-dropdown-open-delay=\"ms\" (optional) - Open delay in milliseconds (default: 0)\n * - petal-dropdown-close-delay=\"ms\" (optional) - Close delay in milliseconds (default: 0)\n * - petal-dropdown-anim=\"slide-down|slide-up|slide-left|slide-right\" (optional) - Desktop animation (default: slide-down)\n * - petal-dropdown-anim-tablet=\"slide-down|slide-up|slide-left|slide-right\" (optional) - Tablet animation (inherits from petal-dropdown-anim)\n * - petal-dropdown-anim-mobile-landscape=\"slide-down|slide-up|slide-left|slide-right\" (optional) - Mobile landscape animation (inherits from petal-dropdown-anim-tablet)\n * - petal-dropdown-anim-mobile=\"slide-down|slide-up|slide-left|slide-right\" (optional) - Mobile animation (inherits from petal-dropdown-anim-mobile-landscape)\n */\n\nfunction initializeDropdowns() {\n const init = () => {\n console.log(\"Dropdown script loaded\");\n const dropdowns = document.querySelectorAll(`[${_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ELEMENT}='${_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN}']`);\n console.log(`Found ${dropdowns.length} dropdown(s)`);\n dropdowns.forEach((dropdown, index) => {\n console.log(`\\n=== Initializing Dropdown ${index + 1} ===`);\n // ===========================\n // Element References\n // ===========================\n const toggle = dropdown.querySelector(`[${_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ELEMENT}='${_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_TOGGLE}']`);\n const menu = dropdown.querySelector(`[${_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ELEMENT}='${_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_MENU}']`);\n const background = dropdown.querySelector(`[${_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ELEMENT}='${_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_BACKGROUND}']`);\n console.log(`Dropdown ${index + 1} - Found toggle:`, toggle);\n console.log(`Dropdown ${index + 1} - Found menu:`, menu);\n console.log(`Dropdown ${index + 1} - Found background:`, background);\n // ===========================\n // Configuration\n // ===========================\n const group = dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_GROUP) || null;\n const openOnHover = dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER) === \"true\";\n const openDelay = parseInt(dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_OPEN_DELAY) || \"200\");\n const closeDelay = parseInt(dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_CLOSE_DELAY) || \"200\");\n // Animation configuration\n const anim = dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_ANIM) || \"slide-down\";\n const animTablet = dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_ANIM_TABLET) || anim;\n const animMobileLandscape = dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_ANIM_MOBILE_LANDSCAPE) || animTablet;\n const animMobile = dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_ANIM_MOBILE) || animMobileLandscape;\n console.log(`Dropdown ${index + 1} - Config:`, {\n group,\n openOnHover,\n openDelay,\n closeDelay,\n anim,\n animTablet,\n animMobileLandscape,\n animMobile\n });\n // Set CSS variables for animation durations (convert ms to seconds)\n if (openDelay > 0) {\n const openDuration = `${openDelay / 1000}s`;\n dropdown.style.setProperty(\"--dropdown-open-duration\", openDuration);\n console.log(`Dropdown ${index + 1} - Set --dropdown-open-duration to ${openDuration}`);\n }\n if (closeDelay > 0) {\n const closeDuration = `${closeDelay / 1000}s`;\n dropdown.style.setProperty(\"--dropdown-close-duration\", closeDuration);\n console.log(`Dropdown ${index + 1} - Set --dropdown-close-duration to ${closeDuration}`);\n }\n // Apply animation classes to menu element\n if (menu) {\n menu.setAttribute(\"data-anim\", anim);\n menu.setAttribute(\"data-anim-tablet\", animTablet);\n menu.setAttribute(\"data-anim-mobile-landscape\", animMobileLandscape);\n menu.setAttribute(\"data-anim-mobile\", animMobile);\n console.log(`Dropdown ${index + 1} - Applied animation attributes`);\n }\n // Validate required elements\n if (!toggle || !menu) {\n console.warn(`Dropdown ${index + 1} - Missing toggle or menu, skipping`);\n return;\n }\n // ===========================\n // State Management\n // ===========================\n let isOpen = false;\n let timeoutId = null;\n // ===========================\n // Core Functions\n // ===========================\n /**\n * Opens the dropdown menu\n * - Cancels any pending close timeout\n * - Delays opening if specified or if another dropdown in same group is open\n * - Adds w--open class and sets aria-expanded=\"true\"\n * - Sets display to block immediately to allow animations\n */\n const openDropdown = () => {\n console.log(`Dropdown ${index + 1} - openDropdown() called`);\n // Cancel any pending close\n if (timeoutId) {\n console.log(`Dropdown ${index + 1} - Cancelling pending close timeout`);\n clearTimeout(timeoutId);\n timeoutId = null;\n }\n // Check if we need to delay opening (group coordination)\n let groupCoordinationDelay = 0;\n if (group) {\n const groupDropdowns = document.querySelectorAll(`[${_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ELEMENT}='${_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN}'][${_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_GROUP}='${group}']`);\n console.log(`Dropdown ${index + 1} - Found ${groupDropdowns.length} dropdowns in group '${group}'`);\n // Find the currently open dropdown in this group\n const openDropdownInGroup = Array.from(groupDropdowns).find((dd) => {\n const ddToggle = dd.querySelector(`[${_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_ELEMENT}='${_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_TOGGLE}']`);\n return ddToggle && ddToggle !== toggle && ddToggle.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_0__.ARIA_EXPANDED) === \"true\";\n });\n // If another is open, get its close delay attribute for coordination\n if (openDropdownInGroup) {\n groupCoordinationDelay = parseInt(openDropdownInGroup.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_0__.ATTR_PETAL_DROPDOWN_CLOSE_DELAY) || \"0\", 10);\n console.log(`Dropdown ${index + 1} - Another dropdown in group is open, coordinating with delay: ${groupCoordinationDelay}ms`);\n }\n }\n // Perform the actual open (immediately or delayed)\n const performOpen = () => {\n console.log(`Dropdown ${index + 1} - performOpen() executing, adding ${_attributes__WEBPACK_IMPORTED_MODULE_0__.CLASS_DROPDOWN_OPEN} class`);\n console.log(`Dropdown ${index + 1} - Menu element:`, menu);\n // Set display to block first to allow animations\n menu.style.display = \"block\";\n // Use double requestAnimationFrame to ensure display change is fully rendered before animation starts\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n menu.classList.add(_attributes__WEBPACK_IMPORTED_MODULE_0__.CLASS_DROPDOWN_OPEN);\n console.log(`Dropdown ${index + 1} - Menu classes after add:`, menu.classList.toString());\n });\n });\n toggle.setAttribute(_attributes__WEBPACK_IMPORTED_MODULE_0__.ARIA_EXPANDED, \"true\");\n if (background) {\n background.style.opacity = \"1\";\n }\n isOpen = true;\n };\n // Use the greater of openDelay or groupCoordinationDelay\n const totalDelay = Math.max(openDelay, groupCoordinationDelay);\n console.log(`Dropdown ${index + 1} - Total delay: ${totalDelay}ms (openDelay: ${openDelay}ms, groupCoordination: ${groupCoordinationDelay}ms)`);\n if (totalDelay > 0) {\n console.log(`Dropdown ${index + 1} - Scheduling open in ${totalDelay}ms`);\n setTimeout(performOpen, totalDelay);\n }\n else {\n console.log(`Dropdown ${index + 1} - Opening immediately`);\n performOpen();\n }\n };\n /**\n * Closes the dropdown menu\n * - Cancels any pending close timeout\n * - Removes w--open class and sets aria-expanded=\"false\"\n * - Sets display to none after animation completes\n */\n const closeDropdown = () => {\n console.log(`Dropdown ${index + 1} - closeDropdown() called`);\n // Cancel any pending close\n if (timeoutId) {\n console.log(`Dropdown ${index + 1} - Cancelling existing timeout`);\n clearTimeout(timeoutId);\n timeoutId = null;\n }\n console.log(`Dropdown ${index + 1} - Menu classes before remove:`, menu.classList.toString());\n menu.classList.remove(_attributes__WEBPACK_IMPORTED_MODULE_0__.CLASS_DROPDOWN_OPEN);\n console.log(`Dropdown ${index + 1} - Menu classes after remove:`, menu.classList.toString());\n toggle.setAttribute(_attributes__WEBPACK_IMPORTED_MODULE_0__.ARIA_EXPANDED, \"false\");\n if (background) {\n background.style.opacity = \"0\";\n }\n // Set display to none after close animation completes\n setTimeout(() => {\n menu.style.display = \"none\";\n }, closeDelay);\n isOpen = false;\n };\n /**\n * Closes the dropdown with an optional delay\n * - Uses petal-dropdown-delay attribute value\n * - Stores timeout ID for potential cancellation\n */\n const closeDropdownWithDelay = () => {\n console.log(`Dropdown ${index + 1} - closeDropdownWithDelay() called with delay: ${closeDelay}ms`);\n if (closeDelay > 0) {\n console.log(`Dropdown ${index + 1} - Scheduling close in ${closeDelay}ms`);\n timeoutId = window.setTimeout(closeDropdown, closeDelay);\n }\n else {\n console.log(`Dropdown ${index + 1} - Closing immediately (no delay)`);\n closeDropdown();\n }\n };\n /**\n * Toggles the dropdown between open and closed states\n * - Used for click-based dropdowns\n */\n const toggleDropdown = () => {\n if (isOpen) {\n closeDropdown();\n }\n else {\n openDropdown();\n }\n };\n /**\n * Handles clicks outside the dropdown\n * - Only active for click-based dropdowns\n * - Closes dropdown if click is outside both toggle and menu\n */\n const handleOutsideClick = (event) => {\n if (!isOpen)\n return;\n const clickedInsideDropdown = dropdown.contains(event.target);\n if (!clickedInsideDropdown) {\n closeDropdown();\n }\n };\n // ===========================\n // Initialization\n // ===========================\n // Set initial aria-expanded state and ensure menu is closed\n toggle.setAttribute(_attributes__WEBPACK_IMPORTED_MODULE_0__.ARIA_EXPANDED, \"false\");\n menu.classList.remove(_attributes__WEBPACK_IMPORTED_MODULE_0__.CLASS_DROPDOWN_OPEN);\n menu.style.display = \"none\";\n // Attach event listeners based on configuration\n if (openOnHover) {\n console.log(`Dropdown ${index + 1} - Attaching hover event listeners`);\n dropdown.addEventListener(\"mouseenter\", () => {\n console.log(`Dropdown ${index + 1} - MOUSEENTER event triggered`);\n openDropdown();\n });\n dropdown.addEventListener(\"mouseleave\", () => {\n console.log(`Dropdown ${index + 1} - MOUSELEAVE event triggered`);\n closeDropdownWithDelay();\n });\n }\n else {\n console.log(`Dropdown ${index + 1} - Attaching click event listeners`);\n toggle.addEventListener(\"click\", toggleDropdown);\n // Add outside click listener for click-based dropdowns\n document.addEventListener(\"click\", handleOutsideClick);\n }\n console.log(`Dropdown ${index + 1} - Initialization complete\\n`);\n });\n };\n // Run immediately if DOM is ready, otherwise wait for DOMContentLoaded\n if (document.readyState === \"loading\") {\n document.addEventListener(\"DOMContentLoaded\", init);\n }\n else {\n init();\n }\n}\n\n\n//# sourceURL=webpack://petal/./src/lib/dropdown.ts?");
229
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ initializeDropdowns: () => (/* binding */ initializeDropdowns)\n/* harmony export */ });\n/* harmony import */ var gsap__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! gsap */ \"./node_modules/gsap/index.js\");\n/* harmony import */ var _animations__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./animations */ \"./src/lib/animations.ts\");\n/* harmony import */ var _attributes__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./attributes */ \"./src/lib/attributes.ts\");\n/**\n * Dropdown Component\n *\n * Handles interactive dropdown menus with support for:\n * - Click or hover-based opening\n * - Customizable close delays\n * - Grouped dropdown coordination\n * - CSS-based animations\n * - Accessibility (aria-expanded)\n *\n * HTML Attributes (defined in attributes.ts):\n * - petal-el=\"dropdown\" - Container element\n * - petal-el=\"dropdown-toggle\" - Clickable/hoverable trigger\n * - petal-el=\"dropdown-menu\" - Menu content\n * - petal-el=\"dropdown-drawer\" - Menu inner box\n * - petal-el=\"dropdown-background\" (optional) - Background overlay\n * - petal-dropdown-group=\"name\" (optional) - Group name for coordinated animations\n * - petal-dropdown-open-on-hover=\"true\" (optional) - Use hover instead of click\n * - petal-dropdown-open-delay=\"ms\" (optional) - Open delay in milliseconds (default: 200)\n * - petal-dropdown-close-delay=\"ms\" (optional) - Close delay in milliseconds (default: 200)\n * - petal-dropdown-anim=\"slide-down|slide-up|slide-left|slide-right\" (optional) - Desktop animation (default: slide-down)\n * - petal-dropdown-anim-tablet=\"slide-down|slide-up|slide-left|slide-right\" (optional) - Tablet animation (inherits from petal-dropdown-anim)\n * - petal-dropdown-anim-mobile-landscape=\"slide-down|slide-up|slide-left|slide-right\" (optional) - Mobile landscape animation (inherits from petal-dropdown-anim-tablet)\n * - petal-dropdown-anim-mobile=\"slide-down|slide-up|slide-left|slide-right\" (optional) - Mobile animation (inherits from petal-dropdown-anim-mobile-landscape)\n * - petal-dropdown-anim-open-speed=\"ms\" (optional) - Animation speed when opening in milliseconds (default: 500)\n * - petal-dropdown-anim-close-speed=\"ms\" (optional) - Animation speed when closing in milliseconds (default: 300)\n */\n\n\n\nconst animationOpenMap = {\n \"slide-down\": _animations__WEBPACK_IMPORTED_MODULE_0__.animateDropdownOpenSlideDown,\n \"slide-up\": _animations__WEBPACK_IMPORTED_MODULE_0__.animateDropdownOpenSlideUp,\n \"slide-left\": _animations__WEBPACK_IMPORTED_MODULE_0__.animateDropdownOpenSlideLeft,\n \"slide-right\": _animations__WEBPACK_IMPORTED_MODULE_0__.animateDropdownOpenSlideRight,\n};\nconst animationCloseMap = {\n \"slide-down\": _animations__WEBPACK_IMPORTED_MODULE_0__.animateDropdownCloseSlideDown,\n \"slide-up\": _animations__WEBPACK_IMPORTED_MODULE_0__.animateDropdownCloseSlideUp,\n \"slide-left\": _animations__WEBPACK_IMPORTED_MODULE_0__.animateDropdownCloseSlideLeft,\n \"slide-right\": _animations__WEBPACK_IMPORTED_MODULE_0__.animateDropdownCloseSlideRight,\n};\n// Helper to check if animation name is a preset\nconst isPresetAnimation = (anim) => {\n return anim in animationOpenMap;\n};\n// Helper to trigger custom Webflow animation\nconst triggerWebflowAnimation = (animName, isOpen) => {\n try {\n // Check if Webflow is available\n if (typeof window !== 'undefined' && 'Webflow' in window && typeof window.Webflow.require === 'function') {\n const wfIx = window.Webflow.require(\"ix3\");\n const eventName = isOpen ? animName : `${animName}-close`;\n wfIx.emit(eventName);\n return true;\n }\n else {\n console.error(`Webflow animation \"${animName}\" failed: Webflow.require(\"ix3\") is not available`);\n return false;\n }\n }\n catch (error) {\n console.error(`Webflow animation event \"${animName}\" was not found or failed to trigger:`, error);\n return false;\n }\n};\nfunction initializeDropdowns() {\n const init = () => {\n console.log(\"Dropdown script loaded\");\n const dropdowns = document.querySelectorAll(`[${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ELEMENT}='${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN}']`);\n console.log(`Found ${dropdowns.length} dropdown(s)`);\n dropdowns.forEach((dropdown, index) => {\n console.log(`\\n=== Initializing Dropdown ${index + 1} ===`);\n // ===========================\n // Element References\n // ===========================\n const toggle = dropdown.querySelector(`[${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ELEMENT}='${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_TOGGLE}']`);\n const menu = dropdown.querySelector(`[${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ELEMENT}='${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_MENU}']`);\n const background = dropdown.querySelector(`[${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ELEMENT}='${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_BACKGROUND}']`);\n console.log(`Dropdown ${index + 1} - Found toggle:`, toggle);\n console.log(`Dropdown ${index + 1} - Found menu:`, menu);\n console.log(`Dropdown ${index + 1} - Found background:`, background);\n // ===========================\n // Configuration\n // ===========================\n const group = dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_GROUP) || null;\n const openOnHover = dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_OPEN_ON_HOVER) === \"true\";\n const openDelay = parseInt(dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_OPEN_DELAY) || \"200\");\n const closeDelay = parseInt(dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_CLOSE_DELAY) || \"200\");\n // Animation configuration\n const anim = dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_ANIM) || \"slide-down\";\n const animTablet = dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_ANIM_TABLET) || anim;\n const animMobileLandscape = dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_ANIM_MOBILE_LANDSCAPE) || animTablet;\n const animMobile = dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_ANIM_MOBILE) || animMobileLandscape;\n // Animation speed configuration (in milliseconds, converted to seconds for GSAP)\n const animOpenSpeed = parseInt(dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_ANIM_OPEN_SPEED) || \"500\") / 1000;\n const animCloseSpeed = parseInt(dropdown.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_ANIM_CLOSE_SPEED) || \"300\") / 1000;\n console.log(`Dropdown ${index + 1} - Config:`, {\n group,\n openOnHover,\n openDelay,\n closeDelay,\n anim,\n animTablet,\n animMobileLandscape,\n animMobile,\n animOpenSpeed: `${animOpenSpeed}s`,\n animCloseSpeed: `${animCloseSpeed}s`\n });\n // Helper function to get the current animation type based on screen size\n const getCurrentAnimation = () => {\n const width = window.innerWidth;\n if (width <= 479)\n return animMobile;\n if (width <= 767)\n return animMobileLandscape;\n if (width <= 991)\n return animTablet;\n return anim;\n };\n // Validate required elements\n if (!toggle || !menu) {\n console.warn(`Dropdown ${index + 1} - Missing toggle or menu, skipping`);\n return;\n }\n // ===========================\n // State Management\n // ===========================\n let isOpen = false;\n let timeoutId = null;\n let currentTimeline = null;\n // ===========================\n // Core Functions\n // ===========================\n /**\n * Opens the dropdown menu using GSAP\n * - Cancels any pending close timeout\n * - Delays opening if specified or if another dropdown in same group is open\n * - Animates using GSAP timeline\n */\n const openDropdown = () => {\n console.log(`Dropdown ${index + 1} - openDropdown() called`);\n // Cancel any pending close\n if (timeoutId) {\n console.log(`Dropdown ${index + 1} - Cancelling pending close timeout`);\n clearTimeout(timeoutId);\n timeoutId = null;\n }\n // Kill any existing timeline\n if (currentTimeline) {\n currentTimeline.kill();\n currentTimeline = null;\n }\n // Check if we need to delay opening (group coordination)\n let groupCoordinationDelay = 0;\n if (group) {\n const groupDropdowns = document.querySelectorAll(`[${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ELEMENT}='${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN}'][${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_GROUP}='${group}']`);\n console.log(`Dropdown ${index + 1} - Found ${groupDropdowns.length} dropdowns in group '${group}'`);\n // Find the currently open dropdown in this group\n const openDropdownInGroup = Array.from(groupDropdowns).find((dd) => {\n const ddToggle = dd.querySelector(`[${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ELEMENT}='${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_TOGGLE}']`);\n return ddToggle && ddToggle !== toggle && ddToggle.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ARIA_EXPANDED) === \"true\";\n });\n // If another is open, get its close delay attribute for coordination\n if (openDropdownInGroup) {\n groupCoordinationDelay = parseInt(openDropdownInGroup.getAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_DROPDOWN_CLOSE_DELAY) || \"0\", 10);\n console.log(`Dropdown ${index + 1} - Another dropdown in group is open, coordinating with delay: ${groupCoordinationDelay}ms`);\n }\n }\n // Perform the actual open (immediately or delayed)\n const performOpen = () => {\n console.log(`Dropdown ${index + 1} - performOpen() executing`);\n // Get the appropriate animation\n const currentAnim = getCurrentAnimation();\n // Check if it's a preset animation or custom Webflow animation\n if (isPresetAnimation(currentAnim)) {\n // Use preset GSAP animation\n console.log(`Dropdown ${index + 1} - Using preset animation: ${currentAnim}`);\n const animFunc = animationOpenMap[currentAnim];\n const anim = animFunc();\n // Create GSAP timeline\n const tl = gsap__WEBPACK_IMPORTED_MODULE_2__.gsap.timeline();\n currentTimeline = tl;\n // Find the drawer element to animate\n const drawer = menu.querySelector(`[${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ELEMENT}='dropdown-drawer']`);\n // Set menu to visible\n tl.set(menu, { visibility: \"visible\" });\n // Animate the drawer\n if (drawer) {\n anim.to.duration = animOpenSpeed;\n tl.fromTo(drawer, anim.from, anim.to, \"<\");\n }\n // Update ARIA and state\n toggle.setAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ARIA_EXPANDED, \"true\");\n menu.classList.add(_attributes__WEBPACK_IMPORTED_MODULE_1__.CLASS_DROPDOWN_OPEN);\n if (background) {\n tl.to(background, { opacity: 1, duration: animOpenSpeed }, \"<\");\n }\n isOpen = true;\n }\n else {\n // Try to trigger custom Webflow animation\n console.log(`Dropdown ${index + 1} - Attempting custom Webflow animation: ${currentAnim}`);\n const success = triggerWebflowAnimation(currentAnim, true);\n if (success) {\n // Set menu to visible for custom animation\n gsap__WEBPACK_IMPORTED_MODULE_2__.gsap.set(menu, { visibility: \"visible\" });\n // Update ARIA and state\n toggle.setAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ARIA_EXPANDED, \"true\");\n menu.classList.add(_attributes__WEBPACK_IMPORTED_MODULE_1__.CLASS_DROPDOWN_OPEN);\n if (background) {\n gsap__WEBPACK_IMPORTED_MODULE_2__.gsap.to(background, { opacity: 1, duration: animOpenSpeed });\n }\n isOpen = true;\n }\n else {\n console.warn(`Dropdown ${index + 1} - Custom animation failed, dropdown will not open`);\n }\n }\n };\n // Use the greater of openDelay or groupCoordinationDelay\n const totalDelay = Math.max(openDelay, groupCoordinationDelay);\n console.log(`Dropdown ${index + 1} - Total delay: ${totalDelay}ms (openDelay: ${openDelay}ms, groupCoordination: ${groupCoordinationDelay}ms)`);\n if (totalDelay > 0) {\n console.log(`Dropdown ${index + 1} - Scheduling open in ${totalDelay}ms`);\n setTimeout(performOpen, totalDelay);\n }\n else {\n console.log(`Dropdown ${index + 1} - Opening immediately`);\n performOpen();\n }\n };\n /**\n * Closes the dropdown menu using GSAP\n * - Cancels any pending close timeout\n * - Animates using GSAP timeline\n * - Sets visibility to hidden after animation completes\n */\n const closeDropdown = () => {\n console.log(`Dropdown ${index + 1} - closeDropdown() called`);\n // Cancel any pending close\n if (timeoutId) {\n console.log(`Dropdown ${index + 1} - Cancelling existing timeout`);\n clearTimeout(timeoutId);\n timeoutId = null;\n }\n // Kill any existing timeline\n if (currentTimeline) {\n currentTimeline.kill();\n currentTimeline = null;\n }\n console.log(`Dropdown ${index + 1} - closeDropdown() executing`);\n // Get the appropriate animation\n const currentAnim = getCurrentAnimation();\n // Check if it's a preset animation or custom Webflow animation\n if (isPresetAnimation(currentAnim)) {\n // Use preset GSAP animation\n console.log(`Dropdown ${index + 1} - Using preset animation: ${currentAnim}`);\n const animFunc = animationCloseMap[currentAnim];\n const anim = animFunc();\n // Create GSAP timeline\n const tl = gsap__WEBPACK_IMPORTED_MODULE_2__.gsap.timeline({\n onComplete: () => {\n // Set visibility to hidden after animation completes\n gsap__WEBPACK_IMPORTED_MODULE_2__.gsap.set(menu, { visibility: \"hidden\" });\n }\n });\n currentTimeline = tl;\n // Find the drawer element to animate\n const drawer = menu.querySelector(`[${_attributes__WEBPACK_IMPORTED_MODULE_1__.ATTR_PETAL_ELEMENT}='dropdown-drawer']`);\n // Animate the drawer\n if (drawer) {\n anim.to.duration = animCloseSpeed;\n tl.fromTo(drawer, anim.from, anim.to);\n }\n // Update ARIA and state\n toggle.setAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ARIA_EXPANDED, \"false\");\n menu.classList.remove(_attributes__WEBPACK_IMPORTED_MODULE_1__.CLASS_DROPDOWN_OPEN);\n if (background) {\n tl.to(background, { opacity: 0, duration: animCloseSpeed }, \"<\");\n }\n isOpen = false;\n }\n else {\n // Try to trigger custom Webflow animation\n console.log(`Dropdown ${index + 1} - Attempting custom Webflow animation close: ${currentAnim}`);\n const success = triggerWebflowAnimation(currentAnim, false);\n if (success) {\n // Update ARIA and state\n toggle.setAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ARIA_EXPANDED, \"false\");\n menu.classList.remove(_attributes__WEBPACK_IMPORTED_MODULE_1__.CLASS_DROPDOWN_OPEN);\n if (background) {\n gsap__WEBPACK_IMPORTED_MODULE_2__.gsap.to(background, { opacity: 0, duration: animCloseSpeed });\n }\n // Hide menu after animation duration\n setTimeout(() => {\n gsap__WEBPACK_IMPORTED_MODULE_2__.gsap.set(menu, { visibility: \"hidden\" });\n }, animCloseSpeed * 1000);\n isOpen = false;\n }\n else {\n console.warn(`Dropdown ${index + 1} - Custom animation close failed`);\n }\n }\n };\n /**\n * Closes the dropdown with an optional delay\n * - Uses petal-dropdown-delay attribute value\n * - Stores timeout ID for potential cancellation\n */\n const closeDropdownWithDelay = () => {\n console.log(`Dropdown ${index + 1} - closeDropdownWithDelay() called with delay: ${closeDelay}ms`);\n if (closeDelay > 0) {\n console.log(`Dropdown ${index + 1} - Scheduling close in ${closeDelay}ms`);\n timeoutId = window.setTimeout(closeDropdown, closeDelay);\n }\n else {\n console.log(`Dropdown ${index + 1} - Closing immediately (no delay)`);\n closeDropdown();\n }\n };\n /**\n * Toggles the dropdown between open and closed states\n * - Used for click-based dropdowns\n */\n const toggleDropdown = () => {\n if (isOpen) {\n closeDropdown();\n }\n else {\n openDropdown();\n }\n };\n /**\n * Handles clicks outside the dropdown\n * - Only active for click-based dropdowns\n * - Closes dropdown if click is outside both toggle and menu\n */\n const handleOutsideClick = (event) => {\n if (!isOpen)\n return;\n const clickedInsideDropdown = dropdown.contains(event.target);\n if (!clickedInsideDropdown) {\n closeDropdown();\n }\n };\n // ===========================\n // Initialization\n // ===========================\n // Set initial aria-expanded state and ensure menu is closed\n toggle.setAttribute(_attributes__WEBPACK_IMPORTED_MODULE_1__.ARIA_EXPANDED, \"false\");\n menu.classList.remove(_attributes__WEBPACK_IMPORTED_MODULE_1__.CLASS_DROPDOWN_OPEN);\n // Attach event listeners based on configuration\n if (openOnHover) {\n console.log(`Dropdown ${index + 1} - Attaching hover event listeners`);\n dropdown.addEventListener(\"mouseenter\", () => {\n console.log(`Dropdown ${index + 1} - MOUSEENTER event triggered`);\n openDropdown();\n });\n dropdown.addEventListener(\"mouseleave\", () => {\n console.log(`Dropdown ${index + 1} - MOUSELEAVE event triggered`);\n closeDropdownWithDelay();\n });\n }\n else {\n console.log(`Dropdown ${index + 1} - Attaching click event listeners`);\n toggle.addEventListener(\"click\", toggleDropdown);\n // Add outside click listener for click-based dropdowns\n document.addEventListener(\"click\", handleOutsideClick);\n }\n console.log(`Dropdown ${index + 1} - Initialization complete\\n`);\n });\n };\n // Run immediately if DOM is ready, otherwise wait for DOMContentLoaded\n if (document.readyState === \"loading\") {\n document.addEventListener(\"DOMContentLoaded\", init);\n }\n else {\n init();\n }\n}\n\n\n//# sourceURL=webpack://petal/./src/lib/dropdown.ts?");
230
230
 
231
231
  /***/ }),
232
232
 
@@ -266,7 +266,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
266
266
  \**********************/
267
267
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
268
268
 
269
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _popup__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./popup */ \"./src/popup.ts\");\n/* harmony import */ var _banner__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./banner */ \"./src/banner.ts\");\n/* harmony import */ var _lib_dropdown__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./lib/dropdown */ \"./src/lib/dropdown.ts\");\n/* harmony import */ var _petal_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./petal.css */ \"./src/petal.css\");\n/* harmony import */ var _lib_dropdown_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./lib/dropdown.css */ \"./src/lib/dropdown.css\");\n\n\n\n\n\nconsole.log(`🌸 Hello from Wellflow Petal v${\"0.0.46\"}`);\n(0,_popup__WEBPACK_IMPORTED_MODULE_0__.initializeAllPopups)();\n(0,_popup__WEBPACK_IMPORTED_MODULE_0__.initializePopupTriggers)();\n(0,_banner__WEBPACK_IMPORTED_MODULE_1__.initializeBanner)();\n(0,_lib_dropdown__WEBPACK_IMPORTED_MODULE_2__.initializeDropdowns)();\n\n\n//# sourceURL=webpack://petal/./src/petal.ts?");
269
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _popup__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./popup */ \"./src/popup.ts\");\n/* harmony import */ var _banner__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./banner */ \"./src/banner.ts\");\n/* harmony import */ var _lib_dropdown__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./lib/dropdown */ \"./src/lib/dropdown.ts\");\n/* harmony import */ var _petal_css__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./petal.css */ \"./src/petal.css\");\n/* harmony import */ var _lib_dropdown_css__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./lib/dropdown.css */ \"./src/lib/dropdown.css\");\n\n\n\n\n\nconsole.log(`🌸 Hello from Wellflow Petal v${\"0.0.48\"}`);\n(0,_popup__WEBPACK_IMPORTED_MODULE_0__.initializeAllPopups)();\n(0,_popup__WEBPACK_IMPORTED_MODULE_0__.initializePopupTriggers)();\n(0,_banner__WEBPACK_IMPORTED_MODULE_1__.initializeBanner)();\n(0,_lib_dropdown__WEBPACK_IMPORTED_MODULE_2__.initializeDropdowns)();\n\n\n//# sourceURL=webpack://petal/./src/petal.ts?");
270
270
 
271
271
  /***/ }),
272
272
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "well-petal",
3
- "version": "0.0.46",
3
+ "version": "0.0.48",
4
4
  "description": "Webflow Popups powered by attributes",
5
5
  "main": "dist/petal.js",
6
6
  "files": [