coveragebook_components 0.6.5 → 0.7.0

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

@@ -733,7 +733,7 @@ select {
   font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 [data-coco].coco-button {
-  display: inline-flex;
+  display: flex;
   width: auto;
   flex: none;
   -webkit-user-select: none;
@@ -857,7 +857,7 @@ select {
   width: 100%;
 }
 [data-coco][data-component="icon"] {
-  display: inline-flex;
+  display: flex;
   height: 1.5rem;
   width: 1.5rem;
   flex: none;
@@ -958,6 +958,104 @@ select {
 [data-coco].coco-link[data-icon-position="end"] [data-component="icon"] {
   order: 2;
 }
+[data-coco][data-component="modal"] {
+  position: fixed;
+  inset: 0px;
+  z-index: 10000;
+  overflow-y: auto;
+}
+[data-coco][data-component="modal"] .modal-overlay {
+  position: fixed;
+  inset: 0px;
+  background-color: rgb(0 0 0 / var(--tw-bg-opacity));
+  --tw-bg-opacity: 0.6;
+}
+[data-coco][data-component="modal"] .modal-container {
+  position: relative;
+  z-index: 10000;
+  display: flex;
+  min-height: 100vh;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+[data-coco][data-component="modal"] .modal-content {
+  display: contents;
+}
+.modal-frame {
+  display: contents;
+}
+[data-coco][data-component="modal-dialog"] {
+  width: 100%;
+  border-radius: 0.75rem;
+  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  max-width: 42rem;
+}
+/* temp until sizes added */
+[data-coco][data-component="modal-dialog"] .modal-dialog-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 4rem;
+  border-top-left-radius: 0.75rem;
+  border-top-right-radius: 0.75rem;
+  border-bottom-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  padding-left: 2rem;
+  padding-right: 2rem;
+}
+[data-coco][data-component="modal-dialog"] .modal-dialog-title {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-right: 1.5rem;
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 600;
+}
+[data-coco][data-component="modal-dialog"] .modal-dialog-close {
+  position: absolute;
+  top: 50%;
+  right: 0.75rem;
+  display: block;
+  flex: none;
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  padding: 0.5rem;
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+[data-coco][data-component="modal-dialog"] .modal-dialog-close:hover {
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+[data-coco][data-component="modal-dialog"] .modal-dialog-close:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+[data-coco][data-component="modal-dialog"] .modal-dialog-content {
+  border-radius: 0.75rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  padding-left: 2rem;
+  padding-right: 2rem;
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+[data-coco][data-component="modal-dialog"] .modal-dialog-header + .modal-dialog-content {
+  border-top-left-radius: 0px;
+  border-top-right-radius: 0px;
+}
 [data-coco][data-component="placeholder"] {
   border-width: 1px;
   border-style: dashed;

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, event, modifiers, callback) {
+  function on(el, event2, modifiers, callback) {
     let listenerTarget = el;
     let handler3 = (e2) => callback(e2);
     let options = {};
     let wrapHandler = (callback2, wrapper) => (e2) => wrapper(callback2, e2);
     if (modifiers.includes("dot"))
-      event = dotSyntax(event);
+      event2 = dotSyntax(event2);
     if (modifiers.includes("camel"))
-      event = camelCase2(event);
+      event2 = camelCase2(event2);
     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(event, handler3, options);
+        listenerTarget.removeEventListener(event2, handler3, options);
       });
     }
     handler3 = wrapHandler(handler3, (next, e2) => {
-      if (isKeyEvent(event)) {
+      if (isKeyEvent(event2)) {
         if (isListeningForASpecificKeyThatHasntBeenPressed(e2, modifiers)) {
           return;
         }
       }
       next(e2);
     });
-    listenerTarget.addEventListener(event, handler3, options);
+    listenerTarget.addEventListener(event2, handler3, options);
     return () => {
-      listenerTarget.removeEventListener(event, handler3, options);
+      listenerTarget.removeEventListener(event2, 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(event) {
-    return ["keydown", "keyup"].includes(event);
+  function isKeyEvent(event2) {
+    return ["keydown", "keyup"].includes(event2);
   }
   function isListeningForASpecificKeyThatHasntBeenPressed(e2, modifiers) {
     let keyModifiers = modifiers.filter((i2) => {
@@ -9557,13 +9557,13 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
           el.setAttribute("name", expression);
       });
     }
-    var event = el.tagName.toLowerCase() === "select" || ["checkbox", "radio"].includes(el.type) || modifiers.includes("lazy") ? "change" : "input";
+    var event2 = el.tagName.toLowerCase() === "select" || ["checkbox", "radio"].includes(el.type) || modifiers.includes("lazy") ? "change" : "input";
     let removeListener = isCloning ? () => {
-    } : on(el, event, modifiers, (e2) => {
+    } : on(el, event2, modifiers, (e2) => {
       setValue(getInputValue(el, modifiers, e2, getValue()));
     });
     if (modifiers.includes("fill") && [null, ""].includes(getValue())) {
-      el.dispatchEvent(new Event(event, {}));
+      el.dispatchEvent(new Event(event2, {}));
     }
     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, event, currentValue) {
+  function getInputValue(el, modifiers, event2, currentValue) {
     return mutateDom(() => {
       var _a;
-      if (event instanceof CustomEvent && event.detail !== void 0)
-        return (_a = event.detail) != null ? _a : event.target.value;
+      if (event2 instanceof CustomEvent && event2.detail !== void 0)
+        return (_a = event2.detail) != null ? _a : event2.target.value;
       else if (el.type === "checkbox") {
         if (Array.isArray(currentValue)) {
-          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));
+          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));
         } else {
-          return event.target.checked;
+          return event2.target.checked;
         }
       } else if (el.tagName.toLowerCase() === "select" && el.multiple) {
-        return modifiers.includes("number") ? Array.from(event.target.selectedOptions).map((option) => {
+        return modifiers.includes("number") ? Array.from(event2.target.selectedOptions).map((option) => {
           let rawValue = option.value || option.text;
           return safeParseNumber(rawValue);
-        }) : Array.from(event.target.selectedOptions).map((option) => {
+        }) : Array.from(event2.target.selectedOptions).map((option) => {
           return option.value || option.text;
         });
       } else {
-        let rawValue = event.target.value;
+        let rawValue = event2.target.value;
         return modifiers.includes("number") ? safeParseNumber(rawValue) : modifiers.includes("trim") ? rawValue.trim() : rawValue;
       }
     });
@@ -13177,8 +13177,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, event) {
-    var clientX = event.clientX, clientY = event.clientY;
+  function isCursorOutsideInteractiveBorder(popperTreeData, event2) {
+    var clientX = event2.clientX, clientY = event2.clientY;
     return popperTreeData.every(function(_ref) {
       var popperRect = _ref.popperRect, popperState = _ref.popperState, props = _ref.props;
       var interactiveBorder = props.interactiveBorder;
@@ -13200,8 +13200,8 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
   }
   function updateTransitionEndListener(box, action, listener) {
     var method = action + "EventListener";
-    ["transitionend", "webkitTransitionEnd"].forEach(function(event) {
-      box[method](event, listener);
+    ["transitionend", "webkitTransitionEnd"].forEach(function(event2) {
+      box[method](event2, listener);
     });
   }
   function actualContains(parent, child) {
@@ -13725,13 +13725,13 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
         return listener !== debouncedOnMouseMove;
       });
     }
-    function onDocumentPress(event) {
+    function onDocumentPress(event2) {
       if (currentInput.isTouch) {
-        if (didTouchMove || event.type === "mousedown") {
+        if (didTouchMove || event2.type === "mousedown") {
           return;
         }
       }
-      var actualTarget = event.composedPath && event.composedPath()[0] || event.target;
+      var actualTarget = event2.composedPath && event2.composedPath()[0] || event2.target;
       if (instance.props.interactive && actualContains(popper2, actualTarget)) {
         return;
       }
@@ -13745,7 +13745,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
           return;
         }
       } else {
-        invokeHook("onClickOutside", [instance, event]);
+        invokeHook("onClickOutside", [instance, event2]);
       }
       if (instance.props.hideOnClick === true) {
         instance.clearDelayTimeouts();
@@ -13791,8 +13791,8 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     }
     function onTransitionEnd(duration, callback) {
       var box = getDefaultTemplateChildren().box;
-      function listener(event) {
-        if (event.target === box) {
+      function listener(event2) {
+        if (event2.target === box) {
           updateTransitionEndListener(box, "remove", listener);
           callback();
         }
@@ -13853,37 +13853,37 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       });
       listeners = [];
     }
-    function onTrigger2(event) {
+    function onTrigger2(event2) {
       var _lastTriggerEvent;
       var shouldScheduleClickHide = false;
-      if (!instance.state.isEnabled || isEventListenerStopped(event) || didHideDueToDocumentMouseDown) {
+      if (!instance.state.isEnabled || isEventListenerStopped(event2) || didHideDueToDocumentMouseDown) {
         return;
       }
       var wasFocused = ((_lastTriggerEvent = lastTriggerEvent) == null ? void 0 : _lastTriggerEvent.type) === "focus";
-      lastTriggerEvent = event;
-      currentTarget = event.currentTarget;
+      lastTriggerEvent = event2;
+      currentTarget = event2.currentTarget;
       handleAriaExpandedAttribute();
-      if (!instance.state.isVisible && isMouseEvent(event)) {
+      if (!instance.state.isVisible && isMouseEvent(event2)) {
         mouseMoveListeners.forEach(function(listener) {
-          return listener(event);
+          return listener(event2);
         });
       }
-      if (event.type === "click" && (instance.props.trigger.indexOf("mouseenter") < 0 || isVisibleFromClick) && instance.props.hideOnClick !== false && instance.state.isVisible) {
+      if (event2.type === "click" && (instance.props.trigger.indexOf("mouseenter") < 0 || isVisibleFromClick) && instance.props.hideOnClick !== false && instance.state.isVisible) {
         shouldScheduleClickHide = true;
       } else {
-        scheduleShow(event);
+        scheduleShow(event2);
       }
-      if (event.type === "click") {
+      if (event2.type === "click") {
         isVisibleFromClick = !shouldScheduleClickHide;
       }
       if (shouldScheduleClickHide && !wasFocused) {
-        scheduleHide(event);
+        scheduleHide(event2);
       }
     }
-    function onMouseMove(event) {
-      var target = event.target;
+    function onMouseMove(event2) {
+      var target = event2.target;
       var isCursorOverReferenceOrPopper = getCurrentTarget().contains(target) || popper2.contains(target);
-      if (event.type === "mousemove" && isCursorOverReferenceOrPopper) {
+      if (event2.type === "mousemove" && isCursorOverReferenceOrPopper) {
         return;
       }
       var popperTreeData = getNestedPopperTree().concat(popper2).map(function(popper3) {
@@ -13899,33 +13899,33 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
         }
         return null;
       }).filter(Boolean);
-      if (isCursorOutsideInteractiveBorder(popperTreeData, event)) {
+      if (isCursorOutsideInteractiveBorder(popperTreeData, event2)) {
         cleanupInteractiveMouseListeners();
-        scheduleHide(event);
+        scheduleHide(event2);
       }
     }
-    function onMouseLeave(event) {
-      var shouldBail = isEventListenerStopped(event) || instance.props.trigger.indexOf("click") >= 0 && isVisibleFromClick;
+    function onMouseLeave(event2) {
+      var shouldBail = isEventListenerStopped(event2) || instance.props.trigger.indexOf("click") >= 0 && isVisibleFromClick;
       if (shouldBail) {
         return;
       }
       if (instance.props.interactive) {
-        instance.hideWithInteractivity(event);
+        instance.hideWithInteractivity(event2);
         return;
       }
-      scheduleHide(event);
+      scheduleHide(event2);
     }
-    function onBlurOrFocusOut(event) {
-      if (instance.props.trigger.indexOf("focusin") < 0 && event.target !== getCurrentTarget()) {
+    function onBlurOrFocusOut(event2) {
+      if (instance.props.trigger.indexOf("focusin") < 0 && event2.target !== getCurrentTarget()) {
         return;
       }
-      if (instance.props.interactive && event.relatedTarget && popper2.contains(event.relatedTarget)) {
+      if (instance.props.interactive && event2.relatedTarget && popper2.contains(event2.relatedTarget)) {
         return;
       }
-      scheduleHide(event);
+      scheduleHide(event2);
     }
-    function isEventListenerStopped(event) {
-      return currentInput.isTouch ? getIsCustomTouchBehavior() !== event.type.indexOf("touch") >= 0 : false;
+    function isEventListenerStopped(event2) {
+      return currentInput.isTouch ? getIsCustomTouchBehavior() !== event2.type.indexOf("touch") >= 0 : false;
     }
     function createPopperInstance() {
       destroyPopperInstance();
@@ -14028,10 +14028,10 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     function getNestedPopperTree() {
       return arrayFrom(popper2.querySelectorAll("[data-tippy-root]"));
     }
-    function scheduleShow(event) {
+    function scheduleShow(event2) {
       instance.clearDelayTimeouts();
-      if (event) {
-        invokeHook("onTrigger", [instance, event]);
+      if (event2) {
+        invokeHook("onTrigger", [instance, event2]);
       }
       addDocumentPress();
       var delay3 = getDelay(true);
@@ -14047,14 +14047,14 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
         instance.show();
       }
     }
-    function scheduleHide(event) {
+    function scheduleHide(event2) {
       instance.clearDelayTimeouts();
-      invokeHook("onUntrigger", [instance, event]);
+      invokeHook("onUntrigger", [instance, event2]);
       if (!instance.state.isVisible) {
         removeDocumentPress();
         return;
       }
-      if (instance.props.trigger.indexOf("mouseenter") >= 0 && instance.props.trigger.indexOf("click") >= 0 && ["mouseleave", "mousemove"].indexOf(event.type) >= 0 && isVisibleFromClick) {
+      if (instance.props.trigger.indexOf("mouseenter") >= 0 && instance.props.trigger.indexOf("click") >= 0 && ["mouseleave", "mousemove"].indexOf(event2.type) >= 0 && isVisibleFromClick) {
         return;
       }
       var delay3 = getDelay(false);
@@ -14227,13 +14227,13 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
         instance.unmount();
       }
     }
-    function hideWithInteractivity(event) {
+    function hideWithInteractivity(event2) {
       if (true) {
         warnWhen(instance.state.isDestroyed, createMemoryLeakWarning("hideWithInteractivity"));
       }
       getDocument().addEventListener("mousemove", debouncedOnMouseMove);
       pushIfUnique(mouseMoveListeners, debouncedOnMouseMove);
-      debouncedOnMouseMove(event);
+      debouncedOnMouseMove(event2);
     }
     function unmount() {
       if (true) {
@@ -14370,10 +14370,10 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
         });
         isInternalUpdate = false;
       }
-      function onMouseMove(event) {
-        var isCursorOverReference = event.target ? reference2.contains(event.target) : true;
+      function onMouseMove(event2) {
+        var isCursorOverReference = event2.target ? reference2.contains(event2.target) : true;
         var followCursor2 = instance.props.followCursor;
-        var clientX = event.clientX, clientY = event.clientY;
+        var clientX = event2.clientX, clientY = event2.clientY;
         var rect = reference2.getBoundingClientRect();
         var relativeX = clientX - rect.left;
         var relativeY = clientY - rect.top;
@@ -14458,14 +14458,14 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
             }
           }
         },
-        onTrigger: function onTrigger2(_2, event) {
-          if (isMouseEvent(event)) {
+        onTrigger: function onTrigger2(_2, event2) {
+          if (isMouseEvent(event2)) {
             mouseCoords = {
-              clientX: event.clientX,
-              clientY: event.clientY
+              clientX: event2.clientX,
+              clientY: event2.clientY
             };
           }
-          wasFocusEvent = event.type === "focus";
+          wasFocusEvent = event2.type === "focus";
         },
         onHidden: function onHidden2() {
           if (instance.props.followCursor) {
@@ -14487,8 +14487,8 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     name: "hideOnEsc",
     defaultValue: true,
     fn({ hide: hide2 }) {
-      function onKeyDown(event) {
-        if (event.keyCode === 27) {
+      function onKeyDown(event2) {
+        if (event2.keyCode === 27) {
           hide2();
         }
       }
@@ -14769,8 +14769,8 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
         clearAutoDismiss() {
           clearTimeout(notification.dismissTimer);
         },
-        clearFromQueue(event) {
-          if (notification.type === event.detail.type && notification.position === "fixed" && notification.id !== event.detail.id && notification.queuePosition < event.detail.queuePosition) {
+        clearFromQueue(event2) {
+          if (notification.type === event2.detail.type && notification.position === "fixed" && notification.id !== event2.detail.id && notification.queuePosition < event2.detail.queuePosition) {
             notification.dismiss();
           }
         }
@@ -15015,15 +15015,15 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
         }
       },
       /* confirmation */
-      checkConfirmation(event) {
+      checkConfirmation(event2) {
         if (!this.confirmed) {
           this.approving = true;
-          event.preventDefault();
+          event2.preventDefault();
         }
       },
-      approveAndRun(event) {
+      approveAndRun(event2) {
         if (this.approving) {
-          event.stopPropagation();
+          event2.stopPropagation();
           this.confirmed = true;
           this.dropdown.trigger.click();
           this.dropdown.hide();
@@ -15031,9 +15031,9 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
           this.approving = false;
         }
       },
-      cancelConfirmation(event) {
+      cancelConfirmation(event2) {
         if (this.approving) {
-          event.stopPropagation();
+          event2.stopPropagation();
           this.approving = false;
           this.dropdown.hide();
         }
@@ -15183,8 +15183,8 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
         this.file = null;
         this.$dispatch("image-uploader:clear");
       },
-      handleDrop(event) {
-        const files = event.detail.files || event.dataTransfer.files;
+      handleDrop(event2) {
+        const files = event2.detail.files || event2.dataTransfer.files;
         this.handleFiles(files);
       },
       handleFiles(files) {
@@ -15210,8 +15210,91 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     };
   });
 
+  // ../../components/coco/base/modal/modal.js
+  var modal_exports = {};
+  __export(modal_exports, {
+    default: () => modal_default
+  });
+  var modal_default = CocoComponent("modal", () => {
+    return {
+      open: false,
+      frame: null,
+      options: ["dismissable", "closeOnSubmit"],
+      init() {
+        this.onFrameSubmitEnd = this.onFrameSubmitEnd.bind(this);
+        this.frame = this.$el.closest("turbo-frame");
+        this.frame.addEventListener("turbo:submit-end", this.onFrameSubmitEnd);
+        this.$nextTick(() => this.show());
+      },
+      show() {
+        this.open = true;
+      },
+      hide() {
+        this.open = false;
+        setTimeout(() => this.clearFrame(), 100);
+      },
+      dismiss(event2) {
+        if (this.$options.dismissable)
+          this.hide();
+      },
+      clearFrame() {
+        this.frame.removeAttribute("src");
+        this.frame.removeAttribute("complete");
+        this.frame.innerHTML = "";
+      },
+      onFrameSubmitEnd() {
+        if (this.$options.closeOnSubmit && event.detail.success) {
+          this.hide();
+        }
+      },
+      destroy() {
+        this.frame.removeEventListener("turbo:submit-end", this.onFrameSubmitEnd);
+      },
+      root: {
+        "x-options": "options",
+        "x-show": "open",
+        "@keydown.escape.document": "dismiss",
+        "@modal:hide.document": "hide"
+      }
+    };
+  });
+
+  // ../../components/coco/base/modal_dialog/modal_dialog.js
+  var modal_dialog_exports = {};
+  __export(modal_dialog_exports, {
+    default: () => modal_dialog_default
+  });
+  var modal_dialog_default = CocoComponent("modalDialog", () => {
+    return {
+      frame: null,
+      init() {
+        this.onFrameLoad = this.onFrameLoad.bind(this);
+        this.frame = this.$el.closest("turbo-frame");
+        if (this.frame) {
+          this.frame.addEventListener("turbo:frame-load", this.onFrameLoad);
+        }
+      },
+      close() {
+        this.$dispatch("modal:hide");
+      },
+      onFrameLoad() {
+        this.$focus.focus(this.firstInput);
+      },
+      destroy() {
+        if (this.frame) {
+          this.frame.removeEventListener("turbo:frame-load", this.onFrameLoad);
+        }
+      },
+      get firstInput() {
+        return this.$root.querySelector(
+          "input:not([type=hidden]), textarea, select"
+        );
+      }
+    };
+  });
+
   // import-glob:/Users/mark/Code/coveragebook/coco/app/assets/js/base|@baseComponents/**/*.js
-  var modules = [button_exports, dropdown_exports, icon_exports, image_uploader_exports];
+  var modules = [button_exports, dropdown_exports, icon_exports, image_uploader_exports, modal_exports, modal_dialog_exports];
   var __default = modules;
 
   // base/components.js

data/app/components/coco/app/elements/snackbar/snackbar.css

@@ -47,7 +47,7 @@
 
     &[data-position="fixed"] {
       @apply fixed bottom-8 left-1/2 -translate-x-1/2;
-      z-index: 1000;
+      z-index: 10001;
     }
 
     /* Themes */

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

@@ -1,6 +1,6 @@
 @layer components {
   [data-coco].coco-button {
-    @apply inline-flex transition-colors w-auto bg-transparent text-current border border-transparent select-none flex-none;
+    @apply flex transition-colors w-auto bg-transparent text-current border border-transparent select-none flex-none;
     width: min-content;
 
     .button-element {

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

@@ -1,6 +1,6 @@
 @layer components {
   [data-coco][data-component="icon"] {
-    @apply inline-flex flex-none w-6 h-6 text-current overflow-hidden;
+    @apply flex flex-none w-6 h-6 text-current overflow-hidden;
 
     svg {
       @apply icon w-full h-full;

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

@@ -0,0 +1,21 @@
+@layer components {
+  [data-coco][data-component="modal"] {
+    @apply fixed inset-0 z-[10000] overflow-y-auto;
+
+    .modal-overlay {
+      @apply fixed inset-0 bg-black bg-opacity-60;
+    }
+
+    .modal-container {
+      @apply relative flex min-h-screen justify-center items-center z-[10000] p-8;
+    }
+
+    .modal-content {
+      @apply contents;
+    }
+  }
+
+  .modal-frame {
+    @apply contents;
+  }
+}