coveragebook_components 0.7.4 → 0.7.5

data/app/assets/build/coco/book.js

@@ -9370,15 +9370,15 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
   };
   directive("ignore", handler);
   directive("effect", (el, { expression }, { effect: effect32 }) => effect32(evaluateLater(el, expression)));
-  function on(el, event2, modifiers, callback) {
+  function on(el, event, modifiers, callback) {
     let listenerTarget = el;
     let handler3 = (e2) => callback(e2);
     let options = {};
     let wrapHandler = (callback2, wrapper) => (e2) => wrapper(callback2, e2);
     if (modifiers.includes("dot"))
-      event2 = dotSyntax(event2);
+      event = dotSyntax(event);
     if (modifiers.includes("camel"))
-      event2 = camelCase2(event2);
+      event = camelCase2(event);
     if (modifiers.includes("passive"))
       options.passive = true;
     if (modifiers.includes("capture"))
@@ -9428,20 +9428,20 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     if (modifiers.includes("once")) {
       handler3 = wrapHandler(handler3, (next, e2) => {
         next(e2);
-        listenerTarget.removeEventListener(event2, handler3, options);
+        listenerTarget.removeEventListener(event, handler3, options);
       });
     }
     handler3 = wrapHandler(handler3, (next, e2) => {
-      if (isKeyEvent(event2)) {
+      if (isKeyEvent(event)) {
         if (isListeningForASpecificKeyThatHasntBeenPressed(e2, modifiers)) {
           return;
         }
       }
       next(e2);
     });
-    listenerTarget.addEventListener(event2, handler3, options);
+    listenerTarget.addEventListener(event, handler3, options);
     return () => {
-      listenerTarget.removeEventListener(event2, handler3, options);
+      listenerTarget.removeEventListener(event, handler3, options);
     };
   }
   function dotSyntax(subject) {
@@ -9458,8 +9458,8 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       return subject;
     return subject.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[_\s]/, "-").toLowerCase();
   }
-  function isKeyEvent(event2) {
-    return ["keydown", "keyup"].includes(event2);
+  function isKeyEvent(event) {
+    return ["keydown", "keyup"].includes(event);
   }
   function isListeningForASpecificKeyThatHasntBeenPressed(e2, modifiers) {
     let keyModifiers = modifiers.filter((i2) => {
@@ -9557,13 +9557,13 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
           el.setAttribute("name", expression);
       });
     }
-    var event2 = el.tagName.toLowerCase() === "select" || ["checkbox", "radio"].includes(el.type) || modifiers.includes("lazy") ? "change" : "input";
+    var event = el.tagName.toLowerCase() === "select" || ["checkbox", "radio"].includes(el.type) || modifiers.includes("lazy") ? "change" : "input";
     let removeListener = isCloning ? () => {
-    } : on(el, event2, modifiers, (e2) => {
+    } : on(el, event, modifiers, (e2) => {
       setValue(getInputValue(el, modifiers, e2, getValue()));
     });
     if (modifiers.includes("fill") && [null, ""].includes(getValue())) {
-      el.dispatchEvent(new Event(event2, {}));
+      el.dispatchEvent(new Event(event, {}));
     }
     if (!el._x_removeModelListeners)
       el._x_removeModelListeners = {};
@@ -9598,27 +9598,27 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       el._x_forceModelUpdate(value);
     });
   });
-  function getInputValue(el, modifiers, event2, currentValue) {
+  function getInputValue(el, modifiers, event, currentValue) {
     return mutateDom(() => {
       var _a;
-      if (event2 instanceof CustomEvent && event2.detail !== void 0)
-        return (_a = event2.detail) != null ? _a : event2.target.value;
+      if (event instanceof CustomEvent && event.detail !== void 0)
+        return (_a = event.detail) != null ? _a : event.target.value;
       else if (el.type === "checkbox") {
         if (Array.isArray(currentValue)) {
-          let newValue = modifiers.includes("number") ? safeParseNumber(event2.target.value) : event2.target.value;
-          return event2.target.checked ? currentValue.concat([newValue]) : currentValue.filter((el2) => !checkedAttrLooseCompare2(el2, newValue));
+          let newValue = modifiers.includes("number") ? safeParseNumber(event.target.value) : event.target.value;
+          return event.target.checked ? currentValue.concat([newValue]) : currentValue.filter((el2) => !checkedAttrLooseCompare2(el2, newValue));
         } else {
-          return event2.target.checked;
+          return event.target.checked;
         }
       } else if (el.tagName.toLowerCase() === "select" && el.multiple) {
-        return modifiers.includes("number") ? Array.from(event2.target.selectedOptions).map((option) => {
+        return modifiers.includes("number") ? Array.from(event.target.selectedOptions).map((option) => {
           let rawValue = option.value || option.text;
           return safeParseNumber(rawValue);
-        }) : Array.from(event2.target.selectedOptions).map((option) => {
+        }) : Array.from(event.target.selectedOptions).map((option) => {
           return option.value || option.text;
         });
       } else {
-        let rawValue = event2.target.value;
+        let rawValue = event.target.value;
         return modifiers.includes("number") ? safeParseNumber(rawValue) : modifiers.includes("trim") ? rawValue.trim() : rawValue;
       }
     });
@@ -13268,8 +13268,8 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     var _normalizeToArray = normalizeToArray(elementOrElements), element = _normalizeToArray[0];
     return element != null && (_element$ownerDocumen = element.ownerDocument) != null && _element$ownerDocumen.body ? element.ownerDocument : document;
   }
-  function isCursorOutsideInteractiveBorder(popperTreeData, event2) {
-    var clientX = event2.clientX, clientY = event2.clientY;
+  function isCursorOutsideInteractiveBorder(popperTreeData, event) {
+    var clientX = event.clientX, clientY = event.clientY;
     return popperTreeData.every(function(_ref) {
       var popperRect = _ref.popperRect, popperState = _ref.popperState, props = _ref.props;
       var interactiveBorder = props.interactiveBorder;
@@ -13291,8 +13291,8 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
   }
   function updateTransitionEndListener(box, action, listener) {
     var method = action + "EventListener";
-    ["transitionend", "webkitTransitionEnd"].forEach(function(event2) {
-      box[method](event2, listener);
+    ["transitionend", "webkitTransitionEnd"].forEach(function(event) {
+      box[method](event, listener);
     });
   }
   function actualContains(parent, child) {
@@ -13816,13 +13816,13 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
         return listener !== debouncedOnMouseMove;
       });
     }
-    function onDocumentPress(event2) {
+    function onDocumentPress(event) {
       if (currentInput.isTouch) {
-        if (didTouchMove || event2.type === "mousedown") {
+        if (didTouchMove || event.type === "mousedown") {
           return;
         }
       }
-      var actualTarget = event2.composedPath && event2.composedPath()[0] || event2.target;
+      var actualTarget = event.composedPath && event.composedPath()[0] || event.target;
       if (instance.props.interactive && actualContains(popper2, actualTarget)) {
         return;
       }
@@ -13836,7 +13836,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
           return;
         }
       } else {
-        invokeHook("onClickOutside", [instance, event2]);
+        invokeHook("onClickOutside", [instance, event]);
       }
       if (instance.props.hideOnClick === true) {
         instance.clearDelayTimeouts();
@@ -13882,8 +13882,8 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     }
     function onTransitionEnd(duration, callback) {
       var box = getDefaultTemplateChildren().box;
-      function listener(event2) {
-        if (event2.target === box) {
+      function listener(event) {
+        if (event.target === box) {
           updateTransitionEndListener(box, "remove", listener);
           callback();
         }
@@ -13944,37 +13944,37 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       });
       listeners = [];
     }
-    function onTrigger2(event2) {
+    function onTrigger2(event) {
       var _lastTriggerEvent;
       var shouldScheduleClickHide = false;
-      if (!instance.state.isEnabled || isEventListenerStopped(event2) || didHideDueToDocumentMouseDown) {
+      if (!instance.state.isEnabled || isEventListenerStopped(event) || didHideDueToDocumentMouseDown) {
         return;
       }
       var wasFocused = ((_lastTriggerEvent = lastTriggerEvent) == null ? void 0 : _lastTriggerEvent.type) === "focus";
-      lastTriggerEvent = event2;
-      currentTarget = event2.currentTarget;
+      lastTriggerEvent = event;
+      currentTarget = event.currentTarget;
       handleAriaExpandedAttribute();
-      if (!instance.state.isVisible && isMouseEvent(event2)) {
+      if (!instance.state.isVisible && isMouseEvent(event)) {
         mouseMoveListeners.forEach(function(listener) {
-          return listener(event2);
+          return listener(event);
         });
       }
-      if (event2.type === "click" && (instance.props.trigger.indexOf("mouseenter") < 0 || isVisibleFromClick) && instance.props.hideOnClick !== false && instance.state.isVisible) {
+      if (event.type === "click" && (instance.props.trigger.indexOf("mouseenter") < 0 || isVisibleFromClick) && instance.props.hideOnClick !== false && instance.state.isVisible) {
         shouldScheduleClickHide = true;
       } else {
-        scheduleShow(event2);
+        scheduleShow(event);
       }
-      if (event2.type === "click") {
+      if (event.type === "click") {
         isVisibleFromClick = !shouldScheduleClickHide;
       }
       if (shouldScheduleClickHide && !wasFocused) {
-        scheduleHide(event2);
+        scheduleHide(event);
       }
     }
-    function onMouseMove(event2) {
-      var target = event2.target;
+    function onMouseMove(event) {
+      var target = event.target;
       var isCursorOverReferenceOrPopper = getCurrentTarget().contains(target) || popper2.contains(target);
-      if (event2.type === "mousemove" && isCursorOverReferenceOrPopper) {
+      if (event.type === "mousemove" && isCursorOverReferenceOrPopper) {
         return;
       }
       var popperTreeData = getNestedPopperTree().concat(popper2).map(function(popper3) {
@@ -13990,33 +13990,33 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
         }
         return null;
       }).filter(Boolean);
-      if (isCursorOutsideInteractiveBorder(popperTreeData, event2)) {
+      if (isCursorOutsideInteractiveBorder(popperTreeData, event)) {
         cleanupInteractiveMouseListeners();
-        scheduleHide(event2);
+        scheduleHide(event);
       }
     }
-    function onMouseLeave(event2) {
-      var shouldBail = isEventListenerStopped(event2) || instance.props.trigger.indexOf("click") >= 0 && isVisibleFromClick;
+    function onMouseLeave(event) {
+      var shouldBail = isEventListenerStopped(event) || instance.props.trigger.indexOf("click") >= 0 && isVisibleFromClick;
       if (shouldBail) {
         return;
       }
       if (instance.props.interactive) {
-        instance.hideWithInteractivity(event2);
+        instance.hideWithInteractivity(event);
         return;
       }
-      scheduleHide(event2);
+      scheduleHide(event);
     }
-    function onBlurOrFocusOut(event2) {
-      if (instance.props.trigger.indexOf("focusin") < 0 && event2.target !== getCurrentTarget()) {
+    function onBlurOrFocusOut(event) {
+      if (instance.props.trigger.indexOf("focusin") < 0 && event.target !== getCurrentTarget()) {
         return;
       }
-      if (instance.props.interactive && event2.relatedTarget && popper2.contains(event2.relatedTarget)) {
+      if (instance.props.interactive && event.relatedTarget && popper2.contains(event.relatedTarget)) {
         return;
       }
-      scheduleHide(event2);
+      scheduleHide(event);
     }
-    function isEventListenerStopped(event2) {
-      return currentInput.isTouch ? getIsCustomTouchBehavior() !== event2.type.indexOf("touch") >= 0 : false;
+    function isEventListenerStopped(event) {
+      return currentInput.isTouch ? getIsCustomTouchBehavior() !== event.type.indexOf("touch") >= 0 : false;
     }
     function createPopperInstance() {
       destroyPopperInstance();
@@ -14119,10 +14119,10 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     function getNestedPopperTree() {
       return arrayFrom(popper2.querySelectorAll("[data-tippy-root]"));
     }
-    function scheduleShow(event2) {
+    function scheduleShow(event) {
       instance.clearDelayTimeouts();
-      if (event2) {
-        invokeHook("onTrigger", [instance, event2]);
+      if (event) {
+        invokeHook("onTrigger", [instance, event]);
       }
       addDocumentPress();
       var delay3 = getDelay(true);
@@ -14138,14 +14138,14 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
         instance.show();
       }
     }
-    function scheduleHide(event2) {
+    function scheduleHide(event) {
       instance.clearDelayTimeouts();
-      invokeHook("onUntrigger", [instance, event2]);
+      invokeHook("onUntrigger", [instance, event]);
       if (!instance.state.isVisible) {
         removeDocumentPress();
         return;
       }
-      if (instance.props.trigger.indexOf("mouseenter") >= 0 && instance.props.trigger.indexOf("click") >= 0 && ["mouseleave", "mousemove"].indexOf(event2.type) >= 0 && isVisibleFromClick) {
+      if (instance.props.trigger.indexOf("mouseenter") >= 0 && instance.props.trigger.indexOf("click") >= 0 && ["mouseleave", "mousemove"].indexOf(event.type) >= 0 && isVisibleFromClick) {
         return;
       }
       var delay3 = getDelay(false);
@@ -14318,13 +14318,13 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
         instance.unmount();
       }
     }
-    function hideWithInteractivity(event2) {
+    function hideWithInteractivity(event) {
       if (true) {
         warnWhen(instance.state.isDestroyed, createMemoryLeakWarning("hideWithInteractivity"));
       }
       getDocument().addEventListener("mousemove", debouncedOnMouseMove);
       pushIfUnique(mouseMoveListeners, debouncedOnMouseMove);
-      debouncedOnMouseMove(event2);
+      debouncedOnMouseMove(event);
     }
     function unmount() {
       if (true) {
@@ -14461,10 +14461,10 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
         });
         isInternalUpdate = false;
       }
-      function onMouseMove(event2) {
-        var isCursorOverReference = event2.target ? reference2.contains(event2.target) : true;
+      function onMouseMove(event) {
+        var isCursorOverReference = event.target ? reference2.contains(event.target) : true;
         var followCursor2 = instance.props.followCursor;
-        var clientX = event2.clientX, clientY = event2.clientY;
+        var clientX = event.clientX, clientY = event.clientY;
         var rect = reference2.getBoundingClientRect();
         var relativeX = clientX - rect.left;
         var relativeY = clientY - rect.top;
@@ -14549,14 +14549,14 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
             }
           }
         },
-        onTrigger: function onTrigger2(_2, event2) {
-          if (isMouseEvent(event2)) {
+        onTrigger: function onTrigger2(_2, event) {
+          if (isMouseEvent(event)) {
             mouseCoords = {
-              clientX: event2.clientX,
-              clientY: event2.clientY
+              clientX: event.clientX,
+              clientY: event.clientY
             };
           }
-          wasFocusEvent = event2.type === "focus";
+          wasFocusEvent = event.type === "focus";
         },
         onHidden: function onHidden2() {
           if (instance.props.followCursor) {
@@ -14578,8 +14578,8 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     name: "hideOnEsc",
     defaultValue: true,
     fn({ hide: hide2 }) {
-      function onKeyDown(event2) {
-        if (event2.keyCode === 27) {
+      function onKeyDown(event) {
+        if (event.keyCode === 27) {
           hide2();
         }
       }
@@ -14860,8 +14860,8 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
         clearAutoDismiss() {
           clearTimeout(notification.dismissTimer);
         },
-        clearFromQueue(event2) {
-          if (notification.type === event2.detail.type && notification.position === "fixed" && notification.id !== event2.detail.id && notification.queuePosition < event2.detail.queuePosition) {
+        clearFromQueue(event) {
+          if (notification.type === event.detail.type && notification.position === "fixed" && notification.id !== event.detail.id && notification.queuePosition < event.detail.queuePosition) {
             notification.dismiss();
           }
         }
@@ -14975,15 +14975,15 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
         }
       },
       /* confirmation */
-      checkConfirmation(event2) {
+      checkConfirmation(event) {
         if (!this.confirmed) {
           this.approving = true;
-          event2.preventDefault();
+          event.preventDefault();
         }
       },
-      approveAndRun(event2) {
+      approveAndRun(event) {
         if (this.approving) {
-          event2.stopPropagation();
+          event.stopPropagation();
           this.confirmed = true;
           this.dropdown.trigger.click();
           this.dropdown.hide();
@@ -14991,9 +14991,9 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
           this.approving = false;
         }
       },
-      cancelConfirmation(event2) {
+      cancelConfirmation(event) {
         if (this.approving) {
-          event2.stopPropagation();
+          event.stopPropagation();
           this.approving = false;
           this.dropdown.hide();
         }
@@ -15141,8 +15141,8 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
         this.file = null;
         this.$dispatch("image-uploader:clear");
       },
-      handleDrop(event2) {
-        const files = event2.detail.files || event2.dataTransfer.files;
+      handleDrop(event) {
+        const files = event.detail.files || event.dataTransfer.files;
         this.handleFiles(files);
       },
       handleFiles(files) {
@@ -15177,8 +15177,10 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     return {
       open: false,
       frame: null,
+      modal: null,
       options: ["dismissable", "closeOnSubmit"],
       init() {
+        this.modal = this;
         this.onFrameSubmitEnd = this.onFrameSubmitEnd.bind(this);
         this.frame = this.$el.closest("turbo-frame");
         this.frame.addEventListener("turbo:submit-end", this.onFrameSubmitEnd);
@@ -15186,21 +15188,30 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       },
       show() {
         this.open = true;
+        setTimeout(() => {
+          this.$dispatch("modal:shown");
+        }, 400);
       },
       hide() {
         this.open = false;
-        setTimeout(() => this.clearFrame(), 100);
+        setTimeout(() => {
+          this.clearFrame();
+          this.$dispatch("modal:hidden");
+        }, 200);
       },
-      dismiss(event2) {
+      dismiss(event) {
         if (this.$options.dismissable)
           this.hide();
       },
+      scrollTo(pos) {
+        this.$root.scrollTop = pos + this.contentOffsetTop;
+      },
       clearFrame() {
         this.frame.removeAttribute("src");
         this.frame.removeAttribute("complete");
         this.frame.innerHTML = "";
       },
-      onFrameSubmitEnd() {
+      onFrameSubmitEnd(event) {
         if (this.$options.closeOnSubmit && event.detail.success) {
           this.hide();
         }
@@ -15208,11 +15219,35 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       destroy() {
         this.frame.removeEventListener("turbo:submit-end", this.onFrameSubmitEnd);
       },
+      get contentOffsetTop() {
+        return parseInt(
+          window.getComputedStyle(this.$refs.container).paddingTop,
+          10
+        );
+      },
       root: {
         "x-options": "options",
         "x-show": "open",
         "@keydown.escape.document": "dismiss",
         "@modal:hide.document": "hide"
+      },
+      overlay: {
+        "x-show": "open",
+        "x-transition:enter": "overlay-enter",
+        "x-transition:enter-start": "overlay-enter-start",
+        "x-transition:enter-end": "overlay-enter-end",
+        "x-transition:leave": "overlay-leave",
+        "x-transition:leave-start": "overlay-leave-start",
+        "x-transition:leave-end": "overlay-leave-end"
+      },
+      container: {
+        "x-show": "open",
+        "x-transition:enter": "container-enter",
+        "x-transition:enter-start": "container-enter-start",
+        "x-transition:enter-end": "container-enter-end",
+        "x-transition:leave": "container-leave",
+        "x-transition:leave-start": "container-leave-start",
+        "x-transition:leave-end": "container-leave-end"
       }
     };
   });
@@ -15233,7 +15268,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
         }
       },
       close() {
-        this.$dispatch("modal:hide");
+        this.modal.hide();
       },
       onFrameLoad() {
         this.$focus.focus(this.firstInput);
@@ -15251,8 +15286,42 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     };
   });
 
+  // ../../components/coco/base/modal_lightbox/modal_lightbox.js
+  var modal_lightbox_exports = {};
+  __export(modal_lightbox_exports, {
+    default: () => modal_lightbox_default
+  });
+  var modal_lightbox_default = CocoComponent("modalLightbox", () => {
+    return {
+      loaded: false,
+      init() {
+        if (this.img.complete && this.img.naturalHeight !== 0) {
+          this.imageLoaded();
+        }
+      },
+      close() {
+        this.modal.hide();
+      },
+      imageLoaded() {
+        this.loaded = true;
+        this.$nextTick(() => {
+          const scrollTop = parseInt(this.img.dataset.scrollTop, 10);
+          if (!isNaN(scrollTop) && scrollTop !== 0) {
+            this.modal.scrollTo(scrollTop);
+          }
+        });
+      },
+      get img() {
+        return this.$refs.media.querySelector("img");
+      },
+      root: {
+        ":class": "{loaded}"
+      }
+    };
+  });
+
   // import-glob:/Users/mark/Code/coveragebook/coco/app/assets/js/base|@baseComponents/**/*.js
-  var modules = [button_exports, dropdown_exports, icon_exports, image_uploader_exports, modal_exports, modal_dialog_exports];
+  var modules = [button_exports, dropdown_exports, icon_exports, image_uploader_exports, modal_exports, modal_dialog_exports, modal_lightbox_exports];
   var __default = modules;
 
   // base/components.js

data/app/assets/css/libs/tippy.css

@@ -3,6 +3,10 @@
 @import "tippy.js/dist/border.css";
 
 @layer components {
+  [data-tippy-root] {
+    @apply !z-[10010];
+  }
+
   [data-coco] .tippy-box {
     @apply bg-transparent text-gray-900 text-label-md whitespace-normal;
   }

data/app/components/coco/base/modal/modal.css

@@ -1,6 +1,6 @@
 @layer components {
   [data-coco][data-component="modal"] {
-    @apply fixed inset-0 z-[10000] overflow-y-auto;
+    @apply fixed inset-0 z-[10000] overflow-y-auto scroll-smooth;
 
     .modal-overlay {
       @apply fixed inset-0 bg-black bg-opacity-60;
@@ -13,6 +13,60 @@
     .modal-content {
       @apply contents;
     }
+
+    /* transitions */
+
+    .modal-overlay {
+      &.overlay-enter {
+        @apply ease-out duration-200;
+      }
+
+      &.overlay-enter-start {
+        @apply opacity-0;
+      }
+
+      &.overlay-enter-end {
+        @apply opacity-100;
+      }
+
+      &.overlay-leave {
+        @apply ease-in duration-150;
+      }
+
+      &.overlay-leave-start {
+        @apply opacity-100;
+      }
+
+      &.overlay-leave-end {
+        @apply opacity-0;
+      }
+    }
+
+    .modal-container {
+      &.container-enter {
+        @apply ease-out duration-[400ms];
+      }
+
+      &.container-enter-start {
+        @apply opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95;
+      }
+
+      &.container-enter-end {
+        @apply opacity-100 translate-y-0 sm:scale-100;
+      }
+
+      &.container-leave {
+        @apply ease-in duration-150;
+      }
+
+      &.container-leave-start {
+        @apply opacity-100 translate-y-0 sm:scale-100;
+      }
+
+      &.container-leave-end {
+        @apply opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95;
+      }
+    }
   }
 
   .modal-frame {

data/app/components/coco/base/modal/modal.html.erb

@@ -11,8 +11,8 @@
         cloak: true,
       },
     ) do %>
-      <div class="modal-overlay" x-show="open" x-transition.opacity></div>
-      <div class="modal-container" x-show="open" x-transition>
+      <div class="modal-overlay" x-bind="overlay"></div>
+      <div class="modal-container"  x-bind="container" x-ref="container">
         <div class="modal-content" x-trap.noscroll.inert.noreturn="open">
           <%= modal_content %>
         </div>