coveragebook_components 0.17.1 → 0.17.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cd71727c5f2de38b71197cc66fafb74c94e49ea9a50b0f1dd6c80d4c90b420b6
-  data.tar.gz: a786af7b55623200e2d6cd4f5c1f0f0a13305f6ef79508c3726445e6dd7ca347
+  metadata.gz: 1fc0953881f78a258a61ca7b0f24ea84133a1f63046af384ea9d081cbc2db6d8
+  data.tar.gz: dfc32ff156d2b19aa5271e42a44c540e0337a9c1b0674d470e88e8b4c4e74845
 SHA512:
-  metadata.gz: 96949e0868cfcf1cab1000c8b8971333620dac8b96626556214477de3ea9aa4141b7785f772a0d90ff9469cf136b27aaff5acbb33569b6ae7543a6db26a5f66f
-  data.tar.gz: 3ef018ff32c75d340bebf3965359888aa875792ebf3f84ed1bf26becc8739e4ddd952aa4fd4ad9bc44ce72bd8d07f17d6382fd7e1cada2f6fda666568f72f637
+  metadata.gz: e4730eeebb41cd89b8bd77645fc50779339b83c3157bab022990d3bfcfcfae2a21b217d7f6d03f011830a6491623f5cfd8fe2529d4acf4625d878551ecf0a061
+  data.tar.gz: 3c0929b433a8eab7860b52107965f3cb7f5b481603e6d903cec8c2bf0554e2ee32f26cd0ac695a8074fceb6037682b413b89ab90957c8f28b2756e6be9785062

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

@@ -2241,6 +2241,10 @@ select{
   border-color: rgb(209 213 219 / var(--tw-border-opacity))
 }
 
+[data-coco][data-component="button-group"][data-reversed="true"] .button-group-buttons{
+  flex-direction: row-reverse
+}
+
 [data-coco][data-component="button-group"][data-align="end"] .button-group-buttons{
   margin-left: auto
 }
@@ -4545,56 +4549,72 @@ select{
 
 [data-coco][data-component="modal-dialog"]{
   width: 100%;
-  border-radius: 0.75rem
+  border-radius: 2rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity))
 }
 
 .modal-frame [data-coco][data-component="modal-dialog"]{
-  --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 */
+  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)
 }
 
+.modal-frame [data-coco][data-component="modal-dialog"][data-size="sm"] {
+        max-width: 480px;
+      }
+
+.modal-frame [data-coco][data-component="modal-dialog"][data-size="md"] {
+        max-width: 520px;
+      }
+
+.modal-frame [data-coco][data-component="modal-dialog"][data-size="lg"] {
+        max-width: 640px;
+      }
+
 [data-coco][data-component="modal-dialog"] .modal-dialog-header{
-  position: relative;
-  display: flex;
-  align-items: center;
-  height: 3.5rem;
-  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));
+  border-top-left-radius: 2rem;
+  border-top-right-radius: 2rem;
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   padding-left: 1rem;
-  padding-right: 1rem
+  padding-right: 1rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem
 }
 
 @media (min-width: 576px){
 
   [data-coco][data-component="modal-dialog"] .modal-dialog-header{
-    height: 4rem;
-    padding-left: 2rem;
-    padding-right: 2rem
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem
   }
 }
 
+[data-coco][data-component="modal-dialog"] .modal-dialog-header-container{
+  position: relative;
+  display: flex;
+  height: 2.75rem;
+  align-items: center
+}
+
 [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-size: 20px;
+  line-height: 24px;
   font-weight: 700
 }
 
 [data-coco][data-component="modal-dialog"] .modal-dialog-close{
   position: absolute;
   top: 50%;
-  right: 0.25rem;
+  right: -0.25rem;
   display: block;
   flex: none;
   --tw-translate-y: -50%;
@@ -4605,18 +4625,24 @@ select{
 @media (min-width: 576px){
 
   [data-coco][data-component="modal-dialog"] .modal-dialog-close{
-    right: 0.75rem
+    right: -0.5rem
   }
 }
 
 [data-coco][data-component="modal-dialog"] .modal-dialog-close{
+  border-radius: 9999px;
   --tw-text-opacity: 1;
-  color: rgb(156 163 175 / var(--tw-text-opacity))
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms
 }
 
 [data-coco][data-component="modal-dialog"] .modal-dialog-close:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
-  color: rgb(31 41 55 / var(--tw-text-opacity))
+  color: rgb(17 24 39 / var(--tw-text-opacity))
 }
 
 [data-coco][data-component="modal-dialog"] .modal-dialog-close:focus{
@@ -4627,23 +4653,37 @@ select{
   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-notice [data-component="notice"]{
+  margin-bottom: 1rem;
+  padding-left: 1rem;
+  padding-right: 1rem
+}
+
+@media (min-width: 576px){
+
+  [data-coco][data-component="modal-dialog"] .modal-dialog-notice [data-component="notice"]{
+    margin-bottom: 1.5rem;
+    padding-left: 2.5rem;
+    padding-right: 2.5rem
+  }
+}
+
 [data-coco][data-component="modal-dialog"] .modal-dialog-content{
-  border-radius: 0.75rem;
+  border-bottom-right-radius: 2rem;
+  border-bottom-left-radius: 2rem;
   --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   padding-left: 1rem;
   padding-right: 1rem;
-  padding-top: 1rem;
-  padding-bottom: 1rem
+  padding-bottom: 1.5rem
 }
 
 @media (min-width: 576px){
 
   [data-coco][data-component="modal-dialog"] .modal-dialog-content{
-    padding-left: 2rem;
-    padding-right: 2rem;
-    padding-top: 1.5rem;
-    padding-bottom: 1.5rem
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+    padding-bottom: 2rem
   }
 }
 

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

@@ -7176,6 +7176,7 @@ var require_module_cjs = __commonJS({
     });
     var module_exports = {};
     __export2(module_exports, {
+      Alpine: () => src_default,
       default: () => module_default
     });
     module.exports = __toCommonJS(module_exports);
@@ -7262,6 +7263,24 @@ var require_module_cjs = __commonJS({
         cleanup();
       }];
     }
+    function watch(getter, callback) {
+      let firstTime = true;
+      let oldValue;
+      let effectReference = effect(() => {
+        let value = getter();
+        JSON.stringify(value);
+        if (!firstTime) {
+          queueMicrotask(() => {
+            callback(value, oldValue);
+            oldValue = value;
+          });
+        } else {
+          oldValue = value;
+        }
+        firstTime = false;
+      });
+      return () => release(effectReference);
+    }
     function dispatch(el, name, detail = {}) {
       el.dispatchEvent(
         new CustomEvent(name, {
@@ -7421,21 +7440,17 @@ var require_module_cjs = __commonJS({
       observer.disconnect();
       currentlyObserving = false;
     }
-    var recordQueue = [];
-    var willProcessRecordQueue = false;
+    var queuedMutations = [];
     function flushObserver() {
-      recordQueue = recordQueue.concat(observer.takeRecords());
-      if (recordQueue.length && !willProcessRecordQueue) {
-        willProcessRecordQueue = true;
-        queueMicrotask(() => {
-          processRecordQueue();
-          willProcessRecordQueue = false;
-        });
-      }
-    }
-    function processRecordQueue() {
-      onMutate(recordQueue);
-      recordQueue.length = 0;
+      let records = observer.takeRecords();
+      queuedMutations.push(() => records.length > 0 && onMutate(records));
+      let queueLengthWhenTriggered = queuedMutations.length;
+      queueMicrotask(() => {
+        if (queuedMutations.length === queueLengthWhenTriggered) {
+          while (queuedMutations.length > 0)
+            queuedMutations.shift()();
+        }
+      });
     }
     function mutateDom(callback) {
       if (!currentlyObserving)
@@ -7460,16 +7475,16 @@ var require_module_cjs = __commonJS({
         deferredMutations = deferredMutations.concat(mutations);
         return;
       }
-      let addedNodes = [];
-      let removedNodes = [];
+      let addedNodes = /* @__PURE__ */ new Set();
+      let removedNodes = /* @__PURE__ */ new Set();
       let addedAttributes = /* @__PURE__ */ new Map();
       let removedAttributes = /* @__PURE__ */ new Map();
       for (let i2 = 0; i2 < mutations.length; i2++) {
         if (mutations[i2].target._x_ignoreMutationObserver)
           continue;
         if (mutations[i2].type === "childList") {
-          mutations[i2].addedNodes.forEach((node) => node.nodeType === 1 && addedNodes.push(node));
-          mutations[i2].removedNodes.forEach((node) => node.nodeType === 1 && removedNodes.push(node));
+          mutations[i2].addedNodes.forEach((node) => node.nodeType === 1 && addedNodes.add(node));
+          mutations[i2].removedNodes.forEach((node) => node.nodeType === 1 && removedNodes.add(node));
         }
         if (mutations[i2].type === "attributes") {
           let el = mutations[i2].target;
@@ -7502,7 +7517,7 @@ var require_module_cjs = __commonJS({
         onAttributeAddeds.forEach((i2) => i2(el, attrs));
       });
       for (let node of removedNodes) {
-        if (addedNodes.includes(node))
+        if (addedNodes.has(node))
           continue;
         onElRemoveds.forEach((i2) => i2(node));
         destroyTree(node);
@@ -7512,7 +7527,7 @@ var require_module_cjs = __commonJS({
         node._x_ignore = true;
       });
       for (let node of addedNodes) {
-        if (removedNodes.includes(node))
+        if (removedNodes.has(node))
           continue;
         if (!node.isConnected)
           continue;
@@ -7690,7 +7705,10 @@ var require_module_cjs = __commonJS({
       }
     }
     function handleError(error2, el, expression = void 0) {
-      Object.assign(error2, { el, expression });
+      error2 = Object.assign(
+        error2 != null ? error2 : { message: "No error message given." },
+        { el, expression }
+      );
       console.warn(`Alpine Expression Error: ${error2.message}
 
 ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
@@ -7806,9 +7824,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       return {
         before(directive2) {
           if (!directiveHandlers[directive2]) {
-            console.warn(
-              "Cannot find directive `${directive}`. `${name}` will use the default order of execution"
-            );
+            console.warn(String.raw`Cannot find directive \`${directive2}\`. \`${name}\` will use the default order of execution`);
             return;
           }
           const pos = directiveOrder.indexOf(directive2);
@@ -8602,25 +8618,25 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     function entangle({ get: outerGet, set: outerSet }, { get: innerGet, set: innerSet }) {
       let firstRun = true;
       let outerHash;
+      let innerHash;
       let reference = effect(() => {
-        const outer = outerGet();
-        const inner = innerGet();
+        let outer = outerGet();
+        let inner = innerGet();
         if (firstRun) {
           innerSet(cloneIfObject(outer));
           firstRun = false;
-          outerHash = JSON.stringify(outer);
         } else {
-          const outerHashLatest = JSON.stringify(outer);
+          let outerHashLatest = JSON.stringify(outer);
+          let innerHashLatest = JSON.stringify(inner);
           if (outerHashLatest !== outerHash) {
             innerSet(cloneIfObject(outer));
-            outerHash = outerHashLatest;
-          } else {
+          } else if (outerHashLatest !== innerHashLatest) {
             outerSet(cloneIfObject(inner));
-            outerHash = JSON.stringify(inner);
+          } else {
           }
         }
-        JSON.stringify(innerGet());
-        JSON.stringify(outerGet());
+        outerHash = JSON.stringify(outerGet());
+        innerHash = JSON.stringify(innerGet());
       });
       return () => {
         release(reference);
@@ -8729,7 +8745,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       get raw() {
         return raw;
       },
-      version: "3.13.3",
+      version: "3.13.5",
       flushAndStopDeferringMutations,
       dontAutoEvaluateFunctions,
       disableEffectScheduling,
@@ -8782,31 +8798,24 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       // INTERNAL
       bound: getBinding,
       $data: scope,
+      watch,
       walk,
       data,
       bind: bind2
     };
     var alpine_default2 = Alpine3;
-    var import_reactivity9 = __toESM2(require_reactivity());
+    var import_reactivity10 = __toESM2(require_reactivity());
     magic("nextTick", () => nextTick);
     magic("dispatch", (el) => dispatch.bind(dispatch, el));
-    magic("watch", (el, { evaluateLater: evaluateLater2, effect: effect3 }) => (key, callback) => {
+    magic("watch", (el, { evaluateLater: evaluateLater2, cleanup }) => (key, callback) => {
       let evaluate2 = evaluateLater2(key);
-      let firstTime = true;
-      let oldValue;
-      let effectReference = effect3(() => evaluate2((value) => {
-        JSON.stringify(value);
-        if (!firstTime) {
-          queueMicrotask(() => {
-            callback(value, oldValue);
-            oldValue = value;
-          });
-        } else {
-          oldValue = value;
-        }
-        firstTime = false;
-      }));
-      el._x_effects.delete(effectReference);
+      let getter = () => {
+        let value;
+        evaluate2((i2) => value = i2);
+        return value;
+      };
+      let unwatch = watch(getter, callback);
+      cleanup(unwatch);
     });
     magic("store", getStores);
     magic("data", (el) => scope(el));
@@ -8845,11 +8854,31 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       if (!el._x_ids[name])
         el._x_ids[name] = findAndIncrementId(name);
     }
-    magic("id", (el) => (name, key = null) => {
-      let root = closestIdRoot(el, name);
-      let id = root ? root._x_ids[name] : findAndIncrementId(name);
-      return key ? `${name}-${id}-${key}` : `${name}-${id}`;
+    magic("id", (el, { cleanup }) => (name, key = null) => {
+      let cacheKey = `${name}${key ? `-${key}` : ""}`;
+      return cacheIdByNameOnElement(el, cacheKey, cleanup, () => {
+        let root = closestIdRoot(el, name);
+        let id = root ? root._x_ids[name] : findAndIncrementId(name);
+        return key ? `${name}-${id}-${key}` : `${name}-${id}`;
+      });
+    });
+    interceptClone((from, to) => {
+      if (from._x_id) {
+        to._x_id = from._x_id;
+      }
     });
+    function cacheIdByNameOnElement(el, cacheKey, cleanup, callback) {
+      if (!el._x_id)
+        el._x_id = {};
+      if (el._x_id[cacheKey])
+        return el._x_id[cacheKey];
+      let output = callback();
+      el._x_id[cacheKey] = output;
+      cleanup(() => {
+        delete el._x_id[cacheKey];
+      });
+      return output;
+    }
     magic("el", (el) => el);
     warnMissingPluginMagic("Focus", "focus", "focus");
     warnMissingPluginMagic("Persist", "persist", "persist");
@@ -9153,7 +9182,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
         setValue(getInputValue(el, modifiers, e2, getValue()));
       });
       if (modifiers.includes("fill")) {
-        if ([null, ""].includes(getValue()) || el.type === "checkbox" && Array.isArray(getValue())) {
+        if ([void 0, null, ""].includes(getValue()) || el.type === "checkbox" && Array.isArray(getValue())) {
           el.dispatchEvent(new Event(event, {}));
         }
       }
@@ -9618,6 +9647,11 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       let names = evaluate2(expression);
       names.forEach((name) => setIdRoot(el, name));
     });
+    interceptClone((from, to) => {
+      if (from._x_ids) {
+        to._x_ids = from._x_ids;
+      }
+    });
     mapAttributes(startingWith("@", into(prefix("on:"))));
     directive("on", skipDuringClone((el, { value, modifiers, expression }, { cleanup }) => {
       let evaluate2 = expression ? evaluateLater(el, expression) : () => {
@@ -9642,7 +9676,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       directive(directiveName, (el) => warn(`You can't use [x-${directiveName}] without first installing the "${name}" plugin here: https://alpinejs.dev/plugins/${slug}`, el));
     }
     alpine_default2.setEvaluator(normalEvaluator);
-    alpine_default2.setReactivityEngine({ reactive: import_reactivity9.reactive, effect: import_reactivity9.effect, release: import_reactivity9.stop, raw: import_reactivity9.toRaw });
+    alpine_default2.setReactivityEngine({ reactive: import_reactivity10.reactive, effect: import_reactivity10.effect, release: import_reactivity10.stop, raw: import_reactivity10.toRaw });
     var src_default = alpine_default2;
     var module_default = src_default;
   }
@@ -9671,7 +9705,7 @@ var require_module_cjs2 = __commonJS({
     var module_exports = {};
     __export2(module_exports, {
       default: () => module_default,
-      morph: () => morph2
+      morph: () => src_default
     });
     module.exports = __toCommonJS(module_exports);
     function morph2(from, toHtml, options) {
@@ -10034,11 +10068,12 @@ var require_module_cjs3 = __commonJS({
     var module_exports = {};
     __export2(module_exports, {
       default: () => module_default,
+      mask: () => src_default,
       stripDown: () => stripDown
     });
     module.exports = __toCommonJS(module_exports);
     function src_default(Alpine3) {
-      Alpine3.directive("mask", (el, { value, expression }, { effect, evaluateLater }) => {
+      Alpine3.directive("mask", (el, { value, expression }, { effect, evaluateLater, cleanup }) => {
         let templateFn = () => expression;
         let lastInputValue = "";
         queueMicrotask(() => {
@@ -10066,8 +10101,17 @@ var require_module_cjs3 = __commonJS({
           if (el._x_model)
             el._x_model.set(el.value);
         });
-        el.addEventListener("input", () => processInputValue(el));
-        el.addEventListener("blur", () => processInputValue(el, false));
+        const controller = new AbortController();
+        cleanup(() => {
+          controller.abort();
+        });
+        el.addEventListener("input", () => processInputValue(el), {
+          signal: controller.signal,
+          // Setting this as a capture phase listener to ensure it runs
+          // before wire:model or x-model added as a latent binding...
+          capture: true
+        });
+        el.addEventListener("blur", () => processInputValue(el, false), { signal: controller.signal });
         function processInputValue(el2, shouldRestoreCursor = true) {
           let input = el2.value;
           let template = templateFn(input);
@@ -15371,7 +15415,7 @@ var alpine_default = import_alpinejs.default;
 // ../../../package.json
 var package_default = {
   name: "coveragebook-components",
-  version: "0.17.1",
+  version: "0.17.3",
   repository: "git@github.com:coveragebook/coco.git",
   license: "NO LICENSE",
   author: "Mark Perkins <mark@coveragebook.com>",
@@ -15413,14 +15457,14 @@ var package_default = {
   },
   dependencies: {
     "@alpinejs/focus": "^3.13.2",
-    "@alpinejs/mask": "^3.13.3",
-    "@alpinejs/morph": "^3.13.2",
+    "@alpinejs/mask": "^3.13.5",
+    "@alpinejs/morph": "^3.13.5",
     "@jaames/iro": "^5.5.2",
     "@percy/cli": "^1.27.3",
     "@tailwindcss/container-queries": "^0.1.0",
     "@tailwindcss/forms": "^0.5.6",
     "alias-hq": "^6.2.2",
-    alpinejs: "^3.13.2",
+    alpinejs: "^3.13.5",
     autoprefixer: "^10.4.16",
     "container-query-polyfill": "^1.0.2",
     del: "^7.1.0",
@@ -15430,14 +15474,14 @@ var package_default = {
     "fast-sort": "^3.2.1",
     husky: "^8.0.3",
     "js-cookie": "^3.0.5",
-    "lint-staged": "^15.2.0",
+    "lint-staged": "^15.2.2",
     "lodash.camelcase": "^4.3.0",
     "lodash.kebabcase": "^4.1.1",
     "lodash.keyby": "^4.6.0",
     "lodash.mapvalues": "^4.6.0",
     "lucide-static": "^0.303.0",
     postcss: "^8.4.31",
-    "postcss-cli": "^10.1.0",
+    "postcss-cli": "^11.0.0",
     "postcss-value-parser": "^4.2.0",
     prettier: "^3.1.1",
     "release-it": "^17.0.1",

data/app/components/coco/buttons/button_group/button_group.css

@@ -20,6 +20,12 @@
       @apply w-0 border-l border-coco-gray-300 self-stretch;
     }
 
+    &[data-reversed="true"] {
+      .button-group-buttons {
+        @apply flex-row-reverse;
+      }
+    }
+
     &[data-align="end"] {
       .button-group-buttons {
         @apply ml-auto;

data/app/components/coco/buttons/button_group/button_group.rb

@@ -5,6 +5,7 @@ module Coco
 
     accepts_option :size, default: :default, private: true
     accepts_option :theme, default: :primary, private: true
+    accepts_option :reversed, from: [true, false], default: false
     accepts_option :segmented, from: [true, false], default: false
     accepts_option :floating, from: [true, false], default: false
     accepts_option :collapsible, from: [true, false, nil]

data/app/components/coco/concerns/acts_as_button_group.rb

@@ -14,6 +14,7 @@ module Coco
         renders_many :items, types: {
           noop: -> {},
           divider: ->(**kwargs) { tag.div(class: "divider") },
+          html: ->(&block) { block.call },
           button: ->(*args, **kwargs, &block) { coco_button(*args, **button_kwargs(kwargs, :button), &block) },
           menu_button: ->(*args, **kwargs, &block) { instantiate_button(:menu, *args, **kwargs, &block) },
           color_picker_button: ->(*args, **kwargs, &block) { instantiate_button(:color_picker, *args, **kwargs, &block) },
@@ -45,6 +46,10 @@ module Coco
         with_item_button(...)
       end
 
+      def with_button_html(...)
+        with_item_html(...)
+      end
+
       def with_menu_button(...)
         with_item_menu_button(...)
       end

data/app/components/coco/messaging/alert/alert.rb

@@ -35,6 +35,11 @@ module Coco
       unless tag_attr?(:id)
         set_tag_attr(:id, "alert-#{rand(1000)}")
       end
+      with_title { @title } unless title?
+    end
+
+    def initialize(title: nil, **kwargs)
+      @title = title
     end
 
     def dismissable?

data/app/components/coco/messaging/notice/notice.rb

@@ -14,5 +14,13 @@ module Coco
         alert.send(:"with_#{slot_name}", *args, **kwargs, &block)
       end
     end
+
+    before_render do
+      with_title { @title } unless title?
+    end
+
+    def initialize(title: nil, **kwargs)
+      @title = title
+    end
   end
 end

data/app/components/coco/modals/modal_dialog/modal_dialog.css

@@ -1,28 +1,46 @@
 @layer components {
   [data-coco][data-component="modal-dialog"] {
-    @apply rounded-xl w-full;
+    @apply rounded-[2rem] w-full bg-background-light-1;
 
     .modal-frame & {
-      @apply shadow-2xl;
-      @apply max-w-2xl; /* temp until sizes added */
+      @apply shadow-xl;
+
+      &[data-size="sm"] {
+        max-width: 480px;
+      }
+
+      &[data-size="md"] {
+        max-width: 520px;
+      }
+
+      &[data-size="lg"] {
+        max-width: 640px;
+      }
     }
 
     .modal-dialog-header {
-      @apply relative flex items-center;
-      @apply px-4 sm:px-8 h-14 sm:h-16 border-b border-coco-gray-300 rounded-t-xl bg-white;
+      @apply px-4 sm:px-10 py-4 sm:py-6 rounded-t-[2rem] bg-background-light-1;
+    }
+
+    .modal-dialog-header-container {
+      @apply relative flex items-center h-11;
     }
 
     .modal-dialog-title {
-      @apply text-lg pr-6 w-full font-bold truncate;
+      @apply text-heading-5 pr-6 w-full font-bold truncate;
     }
 
     .modal-dialog-close {
-      @apply flex-none block p-2 absolute top-1/2 right-1 sm:right-3 -translate-y-1/2;
-      @apply focus:ring-0 focus:outline-none text-content-dark-muted hover:text-content-dark-2;
+      @apply flex-none block p-2 absolute top-1/2 -right-1 sm:-right-2 -translate-y-1/2;
+      @apply focus:ring-0 focus:outline-none text-content-dark-1 hover:text-content-dark-1 rounded-full hover:bg-coco-gray-100 transition-colors;
+    }
+
+    .modal-dialog-notice [data-component="notice"] {
+      @apply px-4 sm:px-10 mb-4 sm:mb-6;
     }
 
     .modal-dialog-content {
-      @apply px-4 sm:px-8 py-4 sm:py-6 rounded-xl bg-background-light-3;
+      @apply px-4 sm:px-10 pb-6 sm:pb-8 rounded-b-[2rem] bg-background-light-1;
     }
 
     .modal-dialog-header + .modal-dialog-content {

data/app/components/coco/modals/modal_dialog/modal_dialog.html.erb

@@ -1,18 +1,27 @@
 <%= render component_tag(x: {data: x_data("modalDialog")}) do %>
   <% if header? %>
     <header class="modal-dialog-header">
-      <% if title? %>
-        <h4 class="modal-dialog-title" data-role="title">
-          <%= title %>
-        </h4>
-      <% end %>
-      <% if dismissable? %>
-        <button type="button" class="modal-dialog-close" data-role="close" @click="close">
-          <%= coco_icon(:x, size: :md) %>
-        </button>
-      <% end %>
+      <div class="modal-dialog-header-container">
+        <% if title? %>
+          <h4 class="modal-dialog-title" data-role="title">
+            <%= title %>
+          </h4>
+        <% end %>
+        <% if dismissable? %>
+          <button type="button" class="modal-dialog-close" data-role="close" @click="close">
+            <%= coco_icon(:x, size: :md) %>
+          </button>
+        <% end %>
+      </div>
     </header>
   <% end %>
+  
+  <% if notice? %>
+    <div class="modal-dialog-notice">
+      <%= notice %>
+    </div>
+  <% end %>
+  
   <div class="modal-dialog-content">
     <%= content %>
   </div>

data/app/components/coco/modals/modal_dialog/modal_dialog.rb

@@ -3,6 +3,11 @@ module Coco
     include Concerns::AcceptsOptions
 
     accepts_option :dismissable, from: [true, false], default: true
+    accepts_option :size, from: [:sm, :md, :lg], default: :md
+
+    renders_one :notice, ->(**kwargs) do
+      Coco::Notice.new(**kwargs, dismissable: false)
+    end
 
     renders_one :title
 

data/app/helpers/coco/components_helper.rb

@@ -23,40 +23,40 @@ module Coco
       render(component, &block)
     end
 
-    def coco_button_group(**, &block)
-      render Coco::ButtonGroup.new(**), &block
+    def coco_button_group(**, &)
+      render(Coco::ButtonGroup.new(**), &)
     end
 
-    def coco_menu_button(**, &block)
-      render Coco::MenuButton.new(**), &block
+    def coco_menu_button(**, &)
+      render(Coco::MenuButton.new(**), &)
     end
 
-    def coco_menu_item(type, **, &block)
-      render coco_component("menu_items/#{type}", **), &block
+    def coco_menu_item(type, **, &)
+      render(coco_component("menu_items/#{type}", **), &)
     end
 
-    def coco_confirm_button(href = nil, **, &block)
-      render Coco::ConfirmButton.new(href: href, **), &block
+    def coco_confirm_button(href = nil, **, &)
+      render(Coco::ConfirmButton.new(href: href, **), &)
     end
 
-    def coco_color_picker_button(**, &block)
-      render Coco::ColorPickerButton.new(**), &block
+    def coco_color_picker_button(**, &)
+      render(Coco::ColorPickerButton.new(**), &)
     end
 
-    def coco_image_picker_button(**, &block)
-      render Coco::ImagePickerButton.new(**), &block
+    def coco_image_picker_button(**, &)
+      render(Coco::ImagePickerButton.new(**), &)
     end
 
-    def coco_layout_picker_button(**, &block)
-      render Coco::LayoutPickerButton.new(**), &block
+    def coco_layout_picker_button(**, &)
+      render(Coco::LayoutPickerButton.new(**), &)
     end
 
-    def coco_toolbar(**, &block)
-      render Coco::Toolbar.new(**), &block
+    def coco_toolbar(**, &)
+      render(Coco::Toolbar.new(**), &)
     end
 
-    def coco_option_bar(**, &block)
-      render Coco::OptionBar.new(**), &block
+    def coco_option_bar(**, &)
+      render(Coco::OptionBar.new(**), &)
     end
 
     # Embeds
@@ -72,16 +72,16 @@ module Coco
 
     # Forms (WIP)
 
-    def coco_form_with(**, &block)
-      form_with(**, builder: Coco::AppFormBuilder, &block)
+    def coco_form_with(**, &)
+      form_with(**, builder: Coco::AppFormBuilder, &)
     end
 
-    def coco_form_for(*, **, &block)
-      form_for(*, **, builder: Coco::AppFormBuilder, &block)
+    def coco_form_for(*, **, &)
+      form_for(*, **, builder: Coco::AppFormBuilder, &)
     end
 
-    def coco_fields(**, &block)
-      fields(**, builder: Coco::AppFormBuilder, &block)
+    def coco_fields(**, &)
+      fields(**, builder: Coco::AppFormBuilder, &)
     end
 
     # Images
@@ -98,8 +98,8 @@ module Coco
       render Coco::Avatar.new(src: src, name: name, **)
     end
 
-    def coco_icon(icon_name = nil, **, &block)
-      render Coco::Icon.new(name: icon_name, **), &block
+    def coco_icon(icon_name = nil, **, &)
+      render(Coco::Icon.new(name: icon_name, **), &)
     end
 
     # Indicators
@@ -132,45 +132,45 @@ module Coco
     end
     alias_method :space, :coco_spacer
 
-    def coco_stack(spacing: Coco::Spacer::DEFAULT, **, &block)
-      render Coco::Stack.new(spacing:, **), &block
+    def coco_stack(spacing: Coco::Spacer::DEFAULT, **, &)
+      render(Coco::Stack.new(spacing:, **), &)
     end
 
-    def coco_panel(**, &block)
-      render Coco::Panel.new(**), &block
+    def coco_panel(**, &)
+      render(Coco::Panel.new(**), &)
     end
 
-    def coco_page(id, **, &block)
-      render Coco::Page.new(id: id, **), &block
+    def coco_page(id, **, &)
+      render(Coco::Page.new(id: id, **), &)
     end
 
     # Messaging
 
-    def coco_notice(**, &block)
-      render Coco::Notice.new(**), &block
+    def coco_notice(**, &)
+      render(Coco::Notice.new(**), &)
     end
 
-    def coco_snackbar(**, &block)
-      render Coco::Snackbar.new(**), &block
+    def coco_snackbar(**, &)
+      render(Coco::Snackbar.new(**), &)
     end
 
-    def coco_toast(**, &block)
-      render Coco::Toast.new(**), &block
+    def coco_toast(**, &)
+      render(Coco::Toast.new(**), &)
     end
 
-    def coco_system_banner(**, &block)
-      render Coco::SystemBanner.new(**), &block
+    def coco_system_banner(**, &)
+      render(Coco::SystemBanner.new(**), &)
     end
 
     # Modals
 
-    def coco_modal(name = "default", **, &block)
-      render(Coco::Modal.new(name: name, **), &block)
+    def coco_modal(name = "default", **, &)
+      render(Coco::Modal.new(name: name, **), &)
     end
 
-    def coco_modal_dialog(name = "default", **, &block)
+    def coco_modal_dialog(name = "default", size: :md, **, &block)
       render(Coco::Modal.new(name: name, **)) do |modal|
-        modal.with_container_dialog(&block)
+        modal.with_container_dialog(size: size, &block)
       end
     end
 
@@ -220,30 +220,30 @@ module Coco
       render(button, &block)
     end
 
-    def coco_pager_button(direction, **, &block)
-      render Coco::PagerButton.new(direction:, **), &block
+    def coco_pager_button(direction, **, &)
+      render(Coco::PagerButton.new(direction:, **), &)
     end
 
     # Typography
 
-    def coco_prose(**, &block)
-      render Coco::Prose.new(**), &block
+    def coco_prose(**, &)
+      render(Coco::Prose.new(**), &)
     end
 
-    def coco_seamless_textarea(**, &block)
-      render Coco::SeamlessTextarea.new(**), &block
+    def coco_seamless_textarea(**, &)
+      render(Coco::SeamlessTextarea.new(**), &)
     end
 
     # Utilties (internal)
 
-    def coco_placeholder(text_content = nil, **, &block)
-      render Coco::Placeholder.new(text_content:, **), &block
+    def coco_placeholder(text_content = nil, **, &)
+      render(Coco::Placeholder.new(text_content:, **), &)
     end
 
     # General
 
-    def coco_tag(*, **, &block)
-      render Coco::Tag.new(*, **), &block
+    def coco_tag(*, **, &)
+      render(Coco::Tag.new(*, **), &)
     end
 
     def coco_component(name, *, **)

data/lib/coco.rb

@@ -1,3 +1,3 @@
 module Coco
-  VERSION = "0.17.1"
+  VERSION = "0.17.3"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: coveragebook_components
 version: !ruby/object:Gem::Version
-  version: 0.17.1
+  version: 0.17.3
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-02-02 00:00:00.000000000 Z
+date: 2024-03-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails