well-petal 0.0.26 → 0.0.28

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 +33 -3
  2. package/package.json +1 -1
package/dist/petal.js CHANGED
@@ -20,13 +20,23 @@ return /******/ (() => { // webpackBootstrap
20
20
  /******/ "use strict";
21
21
  /******/ var __webpack_modules__ = ({
22
22
 
23
+ /***/ "./node_modules/css-loader/dist/cjs.js!./src/lib/dropdown.css":
24
+ /*!********************************************************************!*\
25
+ !*** ./node_modules/css-loader/dist/cjs.js!./src/lib/dropdown.css ***!
26
+ \********************************************************************/
27
+ /***/ ((module, __webpack_exports__, __webpack_require__) => {
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 CSS Variables\n =========================== */\n:root {\n --dropdown-open-duration: 0.5s;\n --dropdown-close-duration: 0.3s;\n}\n\n/* ===========================\n Dropdown Core Styles\n =========================== */\n\n/* Dropdown Menu: Initial (Closed) State */\nhtml:not(.wf-design-mode) [petal-el=\"dropdown\"] > [petal-el=\"dropdown-menu\"] {\n display: grid !important;\n grid-template-columns: minmax(0, 1fr);\n grid-template-rows: 0fr;\n\n transition:\n grid-template-rows var(--dropdown-close-duration) ease,\n opacity var(--dropdown-close-duration) ease,\n visibility 0s var(--dropdown-close-duration);\n\n visibility: hidden;\n opacity: 0;\n}\n\n/* Dropdown Menu: Open State */\nhtml:not(.wf-design-mode) [petal-el=\"dropdown\"] > [petal-el=\"dropdown-menu\"].w--open {\n grid-template-rows: 1fr;\n visibility: visible;\n opacity: 1;\n\n transition:\n grid-template-rows var(--dropdown-open-duration) ease,\n opacity var(--dropdown-open-duration) ease,\n visibility 0s;\n}\n\n/* Overflow hidden on menu children to enable grid animation */\n[petal-el=\"dropdown\"] > [petal-el=\"dropdown-menu\"] > * {\n overflow: hidden;\n}\n\n/* ===========================\n Dropdown Backdrop\n =========================== */\n\n[petal-el=\"dropdown-backdrop\"] {\n transition: opacity var(--dropdown-close-duration);\n opacity: 0;\n}\n\nbody:has([petal-el=\"dropdown\"] > [petal-el=\"dropdown-toggle\"][aria-expanded=\"true\"]) [petal-el=\"dropdown-backdrop\"] {\n opacity: 1;\n}\n\n/* ===========================\n Mobile Styles\n =========================== */\n\n@container (max-width: 65em) {\n /* Open dropdown permanently on mobile */\n [petal-dropdown-open-on-mobile=\"true\"] > [petal-el=\"dropdown-toggle\"] {\n display: none;\n }\n\n [petal-dropdown-open-on-mobile=\"true\"] > [petal-el=\"dropdown-menu\"] {\n visibility: visible !important;\n opacity: 1 !important;\n display: block !important;\n position: relative !important;\n grid-template-rows: 1fr !important;\n }\n\n /* Dropdown scroll styles */\n [petal-el=\"dropdown-scroll\"] {\n background: transparent;\n }\n\n /* Mega dropdown mobile layout */\n [petal-el=\"nav-mega-dropdown\"] {\n width: 100%;\n position: relative;\n top: 0;\n left: 0;\n right: auto;\n bottom: auto;\n }\n\n [petal-el=\"nav-mega-dropdown\"] .w-dropdown-list {\n position: relative;\n }\n\n [petal-el=\"nav-mega-dropdown\"] [petal-el=\"dropdown-scroll\"] {\n padding: 0;\n margin: 0;\n }\n\n [petal-el=\"nav-mega-dropdown\"] [petal-el=\"dropdown-layout\"] {\n display: flex;\n flex-direction: column;\n gap: 0;\n }\n}\n\n/* ===========================\n Desktop Styles\n =========================== */\n\n@container (min-width: 65em) {\n [petal-el=\"dropdown\"] {\n width: auto;\n }\n\n [petal-el=\"dropdown\"] [petal-el=\"dropdown-menu\"] {\n position: absolute;\n }\n\n [petal-el=\"dropdown-scroll\"] {\n overflow-x: hidden;\n overflow-y: auto !important;\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
+
31
+ /***/ }),
32
+
23
33
  /***/ "./node_modules/css-loader/dist/cjs.js!./src/petal.css":
24
34
  /*!*************************************************************!*\
25
35
  !*** ./node_modules/css-loader/dist/cjs.js!./src/petal.css ***!
26
36
  \*************************************************************/
27
37
  /***/ ((module, __webpack_exports__, __webpack_require__) => {
28
38
 
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, `/** BANNER **/\n.petal-hide-banner {\n display: none !important;\n}\n\n/** NAV **/\n\n/* Disable scrolling when mobile nav is open */\nbody:has([petal-el=\"nav\"] .w-nav-button.w--open):not(:has([petal-el=\"nav-desktop\"]:not(.w-condition-invisible))) {\n overflow: hidden;\n}\n`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://petal/./src/petal.css?./node_modules/css-loader/dist/cjs.js");
39
+ 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, `/** BANNER **/\n.petal-hide-banner {\n display: none !important;\n}\n\n/** NAV **/\n\n/* Disable scrolling when mobile nav is open */\nbody:has([petal-el=\"nav\"] .w-nav-button.w--open):not(:has([petal-el=\"nav-desktop\"]:not(.w-condition-invisible))) {\n overflow: hidden;\n}\n\n/** DROPDOWN **/\n`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://petal/./src/petal.css?./node_modules/css-loader/dist/cjs.js");
30
40
 
31
41
  /***/ }),
32
42
 
@@ -176,7 +186,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
176
186
  \*******************************/
177
187
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
178
188
 
179
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\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_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 */ });\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\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_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_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_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_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\";\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?");
180
190
 
181
191
  /***/ }),
182
192
 
@@ -200,6 +210,26 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
200
210
 
201
211
  /***/ }),
202
212
 
213
+ /***/ "./src/lib/dropdown.css":
214
+ /*!******************************!*\
215
+ !*** ./src/lib/dropdown.css ***!
216
+ \******************************/
217
+ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
218
+
219
+ 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_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! !../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js */ \"./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! !../../node_modules/style-loader/dist/runtime/styleDomAPI.js */ \"./node_modules/style-loader/dist/runtime/styleDomAPI.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! !../../node_modules/style-loader/dist/runtime/insertBySelector.js */ \"./node_modules/style-loader/dist/runtime/insertBySelector.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! !../../node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js */ \"./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! !../../node_modules/style-loader/dist/runtime/insertStyleElement.js */ \"./node_modules/style-loader/dist/runtime/insertStyleElement.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4__);\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! !../../node_modules/style-loader/dist/runtime/styleTagTransform.js */ \"./node_modules/style-loader/dist/runtime/styleTagTransform.js\");\n/* harmony import */ var _node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5__);\n/* harmony import */ var _node_modules_css_loader_dist_cjs_js_dropdown_css__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! !!../../node_modules/css-loader/dist/cjs.js!./dropdown.css */ \"./node_modules/css-loader/dist/cjs.js!./src/lib/dropdown.css\");\n\n \n \n \n \n \n \n \n \n \n\nvar options = {};\n\noptions.styleTagTransform = (_node_modules_style_loader_dist_runtime_styleTagTransform_js__WEBPACK_IMPORTED_MODULE_5___default());\noptions.setAttributes = (_node_modules_style_loader_dist_runtime_setAttributesWithoutAttributes_js__WEBPACK_IMPORTED_MODULE_3___default());\noptions.insert = _node_modules_style_loader_dist_runtime_insertBySelector_js__WEBPACK_IMPORTED_MODULE_2___default().bind(null, \"head\");\noptions.domAPI = (_node_modules_style_loader_dist_runtime_styleDomAPI_js__WEBPACK_IMPORTED_MODULE_1___default());\noptions.insertStyleElement = (_node_modules_style_loader_dist_runtime_insertStyleElement_js__WEBPACK_IMPORTED_MODULE_4___default());\n\nvar update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js__WEBPACK_IMPORTED_MODULE_0___default()(_node_modules_css_loader_dist_cjs_js_dropdown_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"], options);\n\n\n\n\n /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (_node_modules_css_loader_dist_cjs_js_dropdown_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"] && _node_modules_css_loader_dist_cjs_js_dropdown_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"].locals ? _node_modules_css_loader_dist_cjs_js_dropdown_css__WEBPACK_IMPORTED_MODULE_6__[\"default\"].locals : undefined);\n\n\n//# sourceURL=webpack://petal/./src/lib/dropdown.css?");
220
+
221
+ /***/ }),
222
+
223
+ /***/ "./src/lib/dropdown.ts":
224
+ /*!*****************************!*\
225
+ !*** ./src/lib/dropdown.ts ***!
226
+ \*****************************/
227
+ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
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-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 */\n\nfunction initializeDropdowns() {\n document.addEventListener(\"DOMContentLoaded\", () => {\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 // ===========================\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 // ===========================\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 // 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 */\n const openDropdown = () => {\n // Cancel any pending close\n if (timeoutId) {\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 // 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 }\n }\n // Perform the actual open (immediately or delayed)\n const performOpen = () => {\n menu.classList.add(_attributes__WEBPACK_IMPORTED_MODULE_0__.CLASS_DROPDOWN_OPEN);\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 if (totalDelay > 0) {\n setTimeout(performOpen, totalDelay);\n }\n else {\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 */\n const closeDropdown = () => {\n // Cancel any pending close\n if (timeoutId) {\n clearTimeout(timeoutId);\n timeoutId = null;\n }\n menu.classList.remove(_attributes__WEBPACK_IMPORTED_MODULE_0__.CLASS_DROPDOWN_OPEN);\n toggle.setAttribute(_attributes__WEBPACK_IMPORTED_MODULE_0__.ARIA_EXPANDED, \"false\");\n if (background) {\n background.style.opacity = \"0\";\n }\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 if (closeDelay > 0) {\n timeoutId = window.setTimeout(closeDropdown, closeDelay);\n }\n else {\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\n toggle.setAttribute(_attributes__WEBPACK_IMPORTED_MODULE_0__.ARIA_EXPANDED, \"false\");\n // Attach event listeners based on configuration\n if (openOnHover) {\n dropdown.addEventListener(\"mouseenter\", openDropdown);\n dropdown.addEventListener(\"mouseleave\", closeDropdownWithDelay);\n }\n else {\n toggle.addEventListener(\"click\", toggleDropdown);\n // Add outside click listener for click-based dropdowns\n document.addEventListener(\"click\", handleOutsideClick);\n }\n });\n });\n}\n\n\n//# sourceURL=webpack://petal/./src/lib/dropdown.ts?");
230
+
231
+ /***/ }),
232
+
203
233
  /***/ "./src/lib/helpers.ts":
204
234
  /*!****************************!*\
205
235
  !*** ./src/lib/helpers.ts ***!
@@ -236,7 +266,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
236
266
  \**********************/
237
267
  /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
238
268
 
239
- 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 _petal_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./petal.css */ \"./src/petal.css\");\n\n\n\nconsole.log(`🌸 Hello from Wellflow Petal v${\"0.0.26\"}`);\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\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.28\"}`);\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?");
240
270
 
241
271
  /***/ }),
242
272
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "well-petal",
3
- "version": "0.0.26",
3
+ "version": "0.0.28",
4
4
  "description": "Webflow Popups powered by attributes",
5
5
  "main": "dist/petal.js",
6
6
  "files": [