coveragebook_components 0.19.0 → 0.19.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: eb5049eeec9c70081fd0cc9fec4723e35da58b39e02597077cc1a20625370b8f
-  data.tar.gz: c99db45370f570dd98fb3c67016925f7a1d6c950bbe1b446b3be253a6023ebe2
+  metadata.gz: 5070cfdd98c6756ccb797a78bd59629c232de7dffef0eb89159160c920a770b4
+  data.tar.gz: 26f34b06acd278881a4b3b3c661b746300b014eaf38e2b5d5703bdb4b91dc26c
 SHA512:
-  metadata.gz: '09a1eb6b7ec6f403018617a0f2a9ae3a6a3947673756714a314a3372e20443ce1bea81eb9f8dd755b91fb401fdc3ee034a74280639d9fe15cfb8d0101e6f41a3'
-  data.tar.gz: 805735413da217fedda4b939504d1b0f627effce246aea20fee7aa13ee65870b581060e5513c0a8f19938b089a064a08a83b58bf037a5037092628928a1cd497
+  metadata.gz: aa8823631eab711945f593fe35a9466ce68cccb1c950c5aef153305acd4b4d86e92633070a24fbd3b7f86cbcfaf59eb1d35cd5c77288075dd21e93be3c1587a2
+  data.tar.gz: 9bdfa43e88ccb8ad26b4f29e6138801f98d3af0c5514ede9b5a4b88c3753ec14afbff4b0f711abb96b02430b17ae60320beffa8a0c5868b2be52f77411d8e2ed

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

@@ -591,10 +591,165 @@ select{
   outline: 1px solid ButtonText;
   outline: 1px auto -webkit-focus-ring-color
 }
-  :root {
+
+:root{
+  --coco-colors-transparent: transparent;
+  --coco-colors-current: currentColor;
+  --coco-colors-black: #000000;
+  --coco-colors-white: #FFFFFF;
+  --coco-colors-gray-50: #F9FAFB;
+  --coco-colors-gray-100: #F3F4F6;
+  --coco-colors-gray-200: #E5E7EB;
+  --coco-colors-gray-300: #D1D5DB;
+  --coco-colors-gray-400: #9CA3AF;
+  --coco-colors-gray-500: #6B7280;
+  --coco-colors-gray-600: #4B5563;
+  --coco-colors-gray-700: #374151;
+  --coco-colors-gray-800: #1F2937;
+  --coco-colors-gray-900: #111827;
+  --coco-colors-green-50: #E8F3F1;
+  --coco-colors-green-100: #D1E7E2;
+  --coco-colors-green-200: #A3CFC5;
+  --coco-colors-green-300: #76B8AA;
+  --coco-colors-green-400: #48A08D;
+  --coco-colors-green-500: #1A8871;
+  --coco-colors-green-600: #137464;
+  --coco-colors-green-700: #0D6159;
+  --coco-colors-green-800: #084C4E;
+  --coco-colors-green-900: #013C43;
+  --coco-colors-red-50: #FEF2F2;
+  --coco-colors-red-100: #FEE2E2;
+  --coco-colors-red-200: #FECACA;
+  --coco-colors-red-300: #FCA5A5;
+  --coco-colors-red-400: #F87171;
+  --coco-colors-red-500: #EF4444;
+  --coco-colors-red-600: #DC2626;
+  --coco-colors-red-700: #B91C1C;
+  --coco-colors-red-800: #991B1B;
+  --coco-colors-red-900: #7F1D1D;
+  --coco-colors-amber-50: #FFFBEB;
+  --coco-colors-amber-100: #FEF3C7;
+  --coco-colors-amber-200: #FDE68A;
+  --coco-colors-amber-300: #FCD34D;
+  --coco-colors-amber-400: #FBBF24;
+  --coco-colors-amber-500: #F59E0B;
+  --coco-colors-amber-600: #D97706;
+  --coco-colors-amber-700: #B45309;
+  --coco-colors-amber-800: #92400E;
+  --coco-colors-amber-900: #78350F;
+  --coco-colors-blue-50: #F0F9FF;
+  --coco-colors-blue-100: #E0F2FE;
+  --coco-colors-blue-200: #BAE6FD;
+  --coco-colors-blue-300: #7DD3FC;
+  --coco-colors-blue-400: #38BDF8;
+  --coco-colors-blue-500: #0EA5E9;
+  --coco-colors-blue-600: #0284C7;
+  --coco-colors-blue-700: #0369A1;
+  --coco-colors-blue-800: #075985;
+  --coco-colors-blue-900: #0C4A6E;
+  --coco-colors-teal-50: #F0FDFA;
+  --coco-colors-teal-100: #CCFBF1;
+  --coco-colors-teal-200: #99F6E4;
+  --coco-colors-teal-300: #5EEAD4;
+  --coco-colors-teal-400: #2DD4BF;
+  --coco-colors-teal-500: #14B8A6;
+  --coco-colors-teal-600: #0D9488;
+  --coco-colors-teal-700: #0F766E;
+  --coco-colors-teal-800: #115E59;
+  --coco-colors-teal-900: #134E4A;
+  --coco-colors-primary-50: #E8F3F1;
+  --coco-colors-primary-100: #D1E7E2;
+  --coco-colors-primary-200: #A3CFC5;
+  --coco-colors-primary-300: #76B8AA;
+  --coco-colors-primary-400: #48A08D;
+  --coco-colors-primary-500: #1A8871;
+  --coco-colors-primary-600: #137464;
+  --coco-colors-primary-700: #0D6159;
+  --coco-colors-primary-800: #084C4E;
+  --coco-colors-primary-900: #013C43;
+  --coco-colors-positive-50: #E8F3F1;
+  --coco-colors-positive-100: #D1E7E2;
+  --coco-colors-positive-200: #A3CFC5;
+  --coco-colors-positive-300: #76B8AA;
+  --coco-colors-positive-400: #48A08D;
+  --coco-colors-positive-500: #1A8871;
+  --coco-colors-positive-600: #137464;
+  --coco-colors-positive-700: #0D6159;
+  --coco-colors-positive-800: #084C4E;
+  --coco-colors-positive-900: #013C43;
+  --coco-colors-negative-50: #FEF2F2;
+  --coco-colors-negative-100: #FEE2E2;
+  --coco-colors-negative-200: #FECACA;
+  --coco-colors-negative-300: #FCA5A5;
+  --coco-colors-negative-400: #F87171;
+  --coco-colors-negative-500: #EF4444;
+  --coco-colors-negative-600: #DC2626;
+  --coco-colors-negative-700: #B91C1C;
+  --coco-colors-negative-800: #991B1B;
+  --coco-colors-negative-900: #7F1D1D;
+  --coco-colors-warning-50: #FFFBEB;
+  --coco-colors-warning-100: #FEF3C7;
+  --coco-colors-warning-200: #FDE68A;
+  --coco-colors-warning-300: #FCD34D;
+  --coco-colors-warning-400: #FBBF24;
+  --coco-colors-warning-500: #F59E0B;
+  --coco-colors-warning-600: #D97706;
+  --coco-colors-warning-700: #B45309;
+  --coco-colors-warning-800: #92400E;
+  --coco-colors-warning-900: #78350F;
+  --coco-colors-info-50: #F0F9FF;
+  --coco-colors-info-100: #E0F2FE;
+  --coco-colors-info-200: #BAE6FD;
+  --coco-colors-info-300: #7DD3FC;
+  --coco-colors-info-400: #38BDF8;
+  --coco-colors-info-500: #0EA5E9;
+  --coco-colors-info-600: #0284C7;
+  --coco-colors-info-700: #0369A1;
+  --coco-colors-info-800: #075985;
+  --coco-colors-info-900: #0C4A6E;
+  --coco-colors-background-header: #427484;
+  --coco-colors-background-light-1: #FFFFFF;
+  --coco-colors-background-light-2: #F9FAFB;
+  --coco-colors-background-light-3: #F3F4F6;
+  --coco-colors-background-dark-1: #111827;
+  --coco-colors-background-dark-2: #1F2937;
+  --coco-colors-background-dark-3: #374151;
+  --coco-colors-background-primary: #1A8871;
+  --coco-colors-background-primary-light: #D1E7E2;
+  --coco-colors-background-negative: #DC2626;
+  --coco-colors-background-negative-light: #FEE2E2;
+  --coco-colors-background-warning: #F59E0B;
+  --coco-colors-background-warning-light: #FFFBEB;
+  --coco-colors-background-positive: #1A8871;
+  --coco-colors-background-positive-light: #D1E7E2;
+  --coco-colors-background-info: #0284C7;
+  --coco-colors-background-info-light: #E0F2FE;
+  --coco-colors-content-dark-1: #111827;
+  --coco-colors-content-dark-2: #1F2937;
+  --coco-colors-content-dark-3: #4B5563;
+  --coco-colors-content-dark-muted: #9CA3AF;
+  --coco-colors-content-light-1: #FFFFFF;
+  --coco-colors-content-light-2: #E5E7EB;
+  --coco-colors-content-light-muted: #9CA3AF;
+  --coco-colors-content-primary: #1A8871;
+  --coco-colors-content-primary-dark: #137464;
+  --coco-colors-content-primary-inverse: #76B8AA;
+  --coco-colors-content-primary-inverse-vivid: #009979;
+  --coco-colors-content-negative: #DC2626;
+  --coco-colors-content-negative-dark: #B91C1C;
+  --coco-colors-content-negative-inverse: #FCA5A5;
+  --coco-colors-content-warning: #D97706;
+  --coco-colors-content-warning-dark: #B45309;
+  --coco-colors-content-warning-inverse: #FCD34D;
+  --coco-colors-content-positive: #1A8871;
+  --coco-colors-content-positive-dark: #137464;
+  --coco-colors-content-positive-inverse: #76B8AA;
+  --coco-colors-content-info: #0284C7;
+  --coco-colors-content-info-dark: #0369A1;
+  --coco-colors-content-info-inverse: #7DD3FC;
     --snackbar-bottom-offset: 2rem;
-    --app-height: 100%;
-  }
+    --app-height: 100%
+}
 
   html{
   scroll-behavior: smooth;
@@ -731,6 +886,10 @@ select{
   --tw-contain-style:  
 }
 
+:root {
+    --button-border-radius: 44px;
+  }
+
 .coco-button-wrapper{
   display: contents !important
 }
@@ -864,7 +1023,7 @@ select{
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
-      border-radius: 44px
+      border-radius: var(--button-border-radius)
 }
 
 [data-coco].coco-button[data-theme] .button-content{
@@ -2225,7 +2384,7 @@ select{
 [data-coco][data-component="button-group"] {
     width: -moz-fit-content;
     width: fit-content;
-    border-radius: 44px;
+    border-radius: var(--button-border-radius);
   }
 
 [data-coco][data-component="button-group"][data-collapsible="true"]{
@@ -2345,6 +2504,10 @@ select{
   line-height: 16px
 }
 
+[data-coco][data-component="confirm-panel"] .coco-button {
+      border-radius: var(--button-border-radius) !important;
+    }
+
 [data-coco][data-component="image-picker-button"]{
   display: contents
 }
@@ -2624,7 +2787,7 @@ select{
   background-color: rgba(0, 12, 39, 0.06);
   padding: 0.25rem;
 
-    border-radius: 44px;
+    border-radius: var(--button-border-radius);
     width: -moz-fit-content;
     width: fit-content
 }

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

@@ -7280,112 +7280,6 @@ var require_module_cjs = __commonJS({
       });
       return () => release(effectReference);
     }
-    function dispatch(el, name, detail = {}) {
-      el.dispatchEvent(
-        new CustomEvent(name, {
-          detail,
-          bubbles: true,
-          // Allows events to pass the shadow DOM barrier.
-          composed: true,
-          cancelable: true
-        })
-      );
-    }
-    function walk(el, callback) {
-      if (typeof ShadowRoot === "function" && el instanceof ShadowRoot) {
-        Array.from(el.children).forEach((el2) => walk(el2, callback));
-        return;
-      }
-      let skip = false;
-      callback(el, () => skip = true);
-      if (skip)
-        return;
-      let node = el.firstElementChild;
-      while (node) {
-        walk(node, callback, false);
-        node = node.nextElementSibling;
-      }
-    }
-    function warn(message, ...args) {
-      console.warn(`Alpine Warning: ${message}`, ...args);
-    }
-    var started = false;
-    function start() {
-      if (started)
-        warn("Alpine has already been initialized on this page. Calling Alpine.start() more than once can cause problems.");
-      started = true;
-      if (!document.body)
-        warn("Unable to initialize. Trying to load Alpine before `<body>` is available. Did you forget to add `defer` in Alpine's `<script>` tag?");
-      dispatch(document, "alpine:init");
-      dispatch(document, "alpine:initializing");
-      startObservingMutations();
-      onElAdded((el) => initTree(el, walk));
-      onElRemoved((el) => destroyTree(el));
-      onAttributesAdded((el, attrs) => {
-        directives(el, attrs).forEach((handle) => handle());
-      });
-      let outNestedComponents = (el) => !closestRoot(el.parentElement, true);
-      Array.from(document.querySelectorAll(allSelectors().join(","))).filter(outNestedComponents).forEach((el) => {
-        initTree(el);
-      });
-      dispatch(document, "alpine:initialized");
-    }
-    var rootSelectorCallbacks = [];
-    var initSelectorCallbacks = [];
-    function rootSelectors() {
-      return rootSelectorCallbacks.map((fn) => fn());
-    }
-    function allSelectors() {
-      return rootSelectorCallbacks.concat(initSelectorCallbacks).map((fn) => fn());
-    }
-    function addRootSelector(selectorCallback) {
-      rootSelectorCallbacks.push(selectorCallback);
-    }
-    function addInitSelector(selectorCallback) {
-      initSelectorCallbacks.push(selectorCallback);
-    }
-    function closestRoot(el, includeInitSelectors = false) {
-      return findClosest(el, (element) => {
-        const selectors = includeInitSelectors ? allSelectors() : rootSelectors();
-        if (selectors.some((selector) => element.matches(selector)))
-          return true;
-      });
-    }
-    function findClosest(el, callback) {
-      if (!el)
-        return;
-      if (callback(el))
-        return el;
-      if (el._x_teleportBack)
-        el = el._x_teleportBack;
-      if (!el.parentElement)
-        return;
-      return findClosest(el.parentElement, callback);
-    }
-    function isRoot(el) {
-      return rootSelectors().some((selector) => el.matches(selector));
-    }
-    var initInterceptors = [];
-    function interceptInit(callback) {
-      initInterceptors.push(callback);
-    }
-    function initTree(el, walker = walk, intercept = () => {
-    }) {
-      deferHandlingDirectives(() => {
-        walker(el, (el2, skip) => {
-          intercept(el2, skip);
-          initInterceptors.forEach((i2) => i2(el2, skip));
-          directives(el2, el2.attributes).forEach((handle) => handle());
-          el2._x_ignore && skip();
-        });
-      });
-    }
-    function destroyTree(root, walker = walk) {
-      walker(root, (el) => {
-        cleanupAttributes(el);
-        cleanupElement(el);
-      });
-    }
     var onAttributeAddeds = [];
     var onElRemoveds = [];
     var onElAddeds = [];
@@ -7519,7 +7413,6 @@ var require_module_cjs = __commonJS({
         if (addedNodes.has(node))
           continue;
         onElRemoveds.forEach((i2) => i2(node));
-        destroyTree(node);
       }
       addedNodes.forEach((node) => {
         node._x_ignoreSelf = true;
@@ -7598,7 +7491,7 @@ var require_module_cjs = __commonJS({
         ) || objects[objects.length - 1];
         const descriptor = Object.getOwnPropertyDescriptor(target, name);
         if ((descriptor == null ? void 0 : descriptor.set) && (descriptor == null ? void 0 : descriptor.get))
-          return Reflect.set(target, name, value, thisProxy);
+          return descriptor.set.call(thisProxy, value) || true;
         return Reflect.set(target, name, value);
       }
     };
@@ -7609,7 +7502,7 @@ var require_module_cjs = __commonJS({
         return acc;
       }, {});
     }
-    function initInterceptors2(data2) {
+    function initInterceptors(data2) {
       let isObject2 = (val) => typeof val === "object" && !Array.isArray(val) && val !== null;
       let recurse = (obj, basePath = "") => {
         Object.entries(Object.getOwnPropertyDescriptors(obj)).forEach(([key, { value, enumerable }]) => {
@@ -7833,6 +7726,9 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
         }
       };
     }
+    function directiveExists(name) {
+      return Object.keys(directiveHandlers).includes(name);
+    }
     function directives(el, attributes, originalAttributeOverride) {
       attributes = Array.from(attributes);
       if (el._x_virtualDirectives) {
@@ -7972,6 +7868,132 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       let typeB = directiveOrder.indexOf(b2.type) === -1 ? DEFAULT : b2.type;
       return directiveOrder.indexOf(typeA) - directiveOrder.indexOf(typeB);
     }
+    function dispatch(el, name, detail = {}) {
+      el.dispatchEvent(
+        new CustomEvent(name, {
+          detail,
+          bubbles: true,
+          // Allows events to pass the shadow DOM barrier.
+          composed: true,
+          cancelable: true
+        })
+      );
+    }
+    function walk(el, callback) {
+      if (typeof ShadowRoot === "function" && el instanceof ShadowRoot) {
+        Array.from(el.children).forEach((el2) => walk(el2, callback));
+        return;
+      }
+      let skip = false;
+      callback(el, () => skip = true);
+      if (skip)
+        return;
+      let node = el.firstElementChild;
+      while (node) {
+        walk(node, callback, false);
+        node = node.nextElementSibling;
+      }
+    }
+    function warn(message, ...args) {
+      console.warn(`Alpine Warning: ${message}`, ...args);
+    }
+    var started = false;
+    function start() {
+      if (started)
+        warn("Alpine has already been initialized on this page. Calling Alpine.start() more than once can cause problems.");
+      started = true;
+      if (!document.body)
+        warn("Unable to initialize. Trying to load Alpine before `<body>` is available. Did you forget to add `defer` in Alpine's `<script>` tag?");
+      dispatch(document, "alpine:init");
+      dispatch(document, "alpine:initializing");
+      startObservingMutations();
+      onElAdded((el) => initTree(el, walk));
+      onElRemoved((el) => destroyTree(el));
+      onAttributesAdded((el, attrs) => {
+        directives(el, attrs).forEach((handle) => handle());
+      });
+      let outNestedComponents = (el) => !closestRoot(el.parentElement, true);
+      Array.from(document.querySelectorAll(allSelectors().join(","))).filter(outNestedComponents).forEach((el) => {
+        initTree(el);
+      });
+      dispatch(document, "alpine:initialized");
+      setTimeout(() => {
+        warnAboutMissingPlugins();
+      });
+    }
+    var rootSelectorCallbacks = [];
+    var initSelectorCallbacks = [];
+    function rootSelectors() {
+      return rootSelectorCallbacks.map((fn) => fn());
+    }
+    function allSelectors() {
+      return rootSelectorCallbacks.concat(initSelectorCallbacks).map((fn) => fn());
+    }
+    function addRootSelector(selectorCallback) {
+      rootSelectorCallbacks.push(selectorCallback);
+    }
+    function addInitSelector(selectorCallback) {
+      initSelectorCallbacks.push(selectorCallback);
+    }
+    function closestRoot(el, includeInitSelectors = false) {
+      return findClosest(el, (element) => {
+        const selectors = includeInitSelectors ? allSelectors() : rootSelectors();
+        if (selectors.some((selector) => element.matches(selector)))
+          return true;
+      });
+    }
+    function findClosest(el, callback) {
+      if (!el)
+        return;
+      if (callback(el))
+        return el;
+      if (el._x_teleportBack)
+        el = el._x_teleportBack;
+      if (!el.parentElement)
+        return;
+      return findClosest(el.parentElement, callback);
+    }
+    function isRoot(el) {
+      return rootSelectors().some((selector) => el.matches(selector));
+    }
+    var initInterceptors2 = [];
+    function interceptInit(callback) {
+      initInterceptors2.push(callback);
+    }
+    function initTree(el, walker = walk, intercept = () => {
+    }) {
+      deferHandlingDirectives(() => {
+        walker(el, (el2, skip) => {
+          intercept(el2, skip);
+          initInterceptors2.forEach((i2) => i2(el2, skip));
+          directives(el2, el2.attributes).forEach((handle) => handle());
+          el2._x_ignore && skip();
+        });
+      });
+    }
+    function destroyTree(root, walker = walk) {
+      walker(root, (el) => {
+        cleanupAttributes(el);
+        cleanupElement(el);
+      });
+    }
+    function warnAboutMissingPlugins() {
+      let pluginDirectives = [
+        ["ui", "dialog", ["[x-dialog], [x-popover]"]],
+        ["anchor", "anchor", ["[x-anchor]"]],
+        ["sort", "sort", ["[x-sort]"]]
+      ];
+      pluginDirectives.forEach(([plugin2, directive2, selectors]) => {
+        if (directiveExists(directive2))
+          return;
+        selectors.some((selector) => {
+          if (document.querySelector(selector)) {
+            warn(`found "${selector}", but missing ${plugin2} plugin`);
+            return true;
+          }
+        });
+      });
+    }
     var tickStack = [];
     var isHolding = false;
     function nextTick(callback = () => {
@@ -8232,7 +8254,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
               let carry = Promise.all([
                 el2._x_hidePromise,
                 ...(el2._x_hideChildren || []).map(hideAfterChildren)
-              ]).then(([i2]) => i2());
+              ]).then(([i2]) => i2 == null ? void 0 : i2());
               delete el2._x_hidePromise;
               delete el2._x_hideChildren;
               return carry;
@@ -8663,7 +8685,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       if (typeof value === "object" && value !== null && value.hasOwnProperty("init") && typeof value.init === "function") {
         stores[name].init();
       }
-      initInterceptors2(stores[name]);
+      initInterceptors(stores[name]);
     }
     function getStores() {
       return stores;
@@ -8745,7 +8767,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       get raw() {
         return raw;
       },
-      version: "3.13.8",
+      version: "3.14.1",
       flushAndStopDeferringMutations,
       dontAutoEvaluateFunctions,
       disableEffectScheduling,
@@ -8951,8 +8973,10 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       };
       mutateDom(() => {
         placeInDom(clone2, target, modifiers);
-        initTree(clone2);
-        clone2._x_ignore = true;
+        skipDuringClone(() => {
+          initTree(clone2);
+          clone2._x_ignore = true;
+        })();
       });
       el._x_teleportPutBack = () => {
         let target2 = getTarget(expression);
@@ -9022,10 +9046,12 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
           e2.stopPropagation();
           next(e2);
         });
-      if (modifiers.includes("self"))
+      if (modifiers.includes("once")) {
         handler4 = wrapHandler(handler4, (next, e2) => {
-          e2.target === el && next(e2);
+          next(e2);
+          listenerTarget.removeEventListener(event, handler4, options);
         });
+      }
       if (modifiers.includes("away") || modifiers.includes("outside")) {
         listenerTarget = document;
         handler4 = wrapHandler(handler4, (next, e2) => {
@@ -9040,20 +9066,18 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
           next(e2);
         });
       }
-      if (modifiers.includes("once")) {
+      if (modifiers.includes("self"))
         handler4 = wrapHandler(handler4, (next, e2) => {
-          next(e2);
-          listenerTarget.removeEventListener(event, handler4, options);
+          e2.target === el && next(e2);
         });
-      }
-      handler4 = wrapHandler(handler4, (next, e2) => {
-        if (isKeyEvent(event)) {
+      if (isKeyEvent(event) || isClickEvent(event)) {
+        handler4 = wrapHandler(handler4, (next, e2) => {
           if (isListeningForASpecificKeyThatHasntBeenPressed(e2, modifiers)) {
             return;
           }
-        }
-        next(e2);
-      });
+          next(e2);
+        });
+      }
       listenerTarget.addEventListener(event, handler4, options);
       return () => {
         listenerTarget.removeEventListener(event, handler4, options);
@@ -9078,9 +9102,12 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     function isKeyEvent(event) {
       return ["keydown", "keyup"].includes(event);
     }
+    function isClickEvent(event) {
+      return ["contextmenu", "click", "mouse"].some((i2) => event.includes(i2));
+    }
     function isListeningForASpecificKeyThatHasntBeenPressed(e2, modifiers) {
       let keyModifiers = modifiers.filter((i2) => {
-        return !["window", "document", "prevent", "stop", "once", "capture"].includes(i2);
+        return !["window", "document", "prevent", "stop", "once", "capture", "self", "away", "outside", "passive"].includes(i2);
       });
       if (keyModifiers.includes("debounce")) {
         let debounceIndex = keyModifiers.indexOf("debounce");
@@ -9104,6 +9131,8 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
           return e2[`${modifier}Key`];
         });
         if (activelyPressedKeyModifiers.length === selectedSystemKeyModifiers.length) {
+          if (isClickEvent(e2.type))
+            return false;
           if (keyToModifiers(e2.key).includes(keyModifiers[0]))
             return false;
         }
@@ -9126,6 +9155,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
         "left": "arrow-left",
         "right": "arrow-right",
         "period": ".",
+        "comma": ",",
         "equal": "=",
         "minus": "-",
         "underscore": "_"
@@ -9180,7 +9210,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
         setValue(getInputValue(el, modifiers, e2, getValue()));
       });
       if (modifiers.includes("fill")) {
-        if ([void 0, null, ""].includes(getValue()) || el.type === "checkbox" && Array.isArray(getValue())) {
+        if ([void 0, null, ""].includes(getValue()) || el.type === "checkbox" && Array.isArray(getValue()) || el.tagName.toLowerCase() === "select" && el.multiple) {
           setValue(
             getInputValue(el, modifiers, { target: el }, getValue())
           );
@@ -9192,7 +9222,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       cleanup(() => el._x_removeModelListeners["default"]());
       if (el.form) {
         let removeResetListener = on(el.form, "reset", [], (e2) => {
-          nextTick(() => el._x_model && el._x_model.set(el.value));
+          nextTick(() => el._x_model && el._x_model.set(getInputValue(el, modifiers, { target: el }, getValue())));
         });
         cleanup(() => removeResetListener());
       }
@@ -9232,7 +9262,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
             } else {
               newValue = event.target.value;
             }
-            return event.target.checked ? currentValue.concat([newValue]) : currentValue.filter((el2) => !checkedAttrLooseCompare2(el2, newValue));
+            return event.target.checked ? currentValue.includes(newValue) ? currentValue : currentValue.concat([newValue]) : currentValue.filter((el2) => !checkedAttrLooseCompare2(el2, newValue));
           } else {
             return event.target.checked;
           }
@@ -9371,7 +9401,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
         data2 = {};
       injectMagics(data2, el);
       let reactiveData = reactive(data2);
-      initInterceptors2(reactiveData);
+      initInterceptors(reactiveData);
       let undo = addScopeToNode(el, reactiveData);
       reactiveData["init"] && evaluate(el, reactiveData["init"]);
       cleanup(() => {
@@ -11419,6 +11449,8 @@ var require_tokens = __commonJS({
         900: "#134E4A"
       }
     };
+    var { coco, ...colorVariables } = colors;
+    colorVariables.gray = colors.coco.gray;
     var colorAliases = {
       primary: {
         ...colors.green
@@ -11569,6 +11601,16 @@ var require_tokens = __commonJS({
         displaySans: "proxima-nova",
         bodySans: "proxima-nova",
         displaySerif: "merriweather"
+      },
+      variables: {
+        DEFAULT: {
+          coco: {
+            colors: {
+              ...colorVariables,
+              ...colorAliases
+            }
+          }
+        }
       }
     };
   }
@@ -15296,7 +15338,7 @@ var alpine_default = import_alpinejs.default;
 // ../../../package.json
 var package_default = {
   name: "coveragebook-components",
-  version: "0.19.0",
+  version: "0.19.2",
   repository: "git@github.com:coveragebook/coco.git",
   license: "NO LICENSE",
   author: "Mark Perkins <mark@coveragebook.com>",
@@ -15311,9 +15353,10 @@ var package_default = {
     "css:build": "postcss ./app/assets/css/coco.css -d ./app/assets/build/coco",
     "css:dev": "postcss ./app/assets/css/coco.css -d ./app/assets/build/coco/dev",
     "css:watch": "postcss ./app/assets/css/coco.css -d ./app/assets/build/coco/dev --watch",
-    "js:build": "node esbuild.config.mjs",
-    "js:dev": "node esbuild.config.mjs --dev",
-    "js:watch": "node esbuild.config.mjs --watch",
+    "js:build": "node esbuild.mjs",
+    "js:dev": "node esbuild.mjs --dev",
+    "js:watch": "node esbuild.mjs --watch",
+    "js:analyse": "node lib/scripts/esbuild-meta.mjs",
     "lint:fix": "bundle exec standardrb --fix && prettier --write .",
     "lookbook:build": "cd lookbook && npm run build",
     prepare: "husky install",
@@ -15338,14 +15381,14 @@ var package_default = {
   },
   dependencies: {
     "@alpinejs/focus": "^3.13.2",
-    "@alpinejs/mask": "^3.13.5",
+    "@alpinejs/mask": "^3.14.1",
     "@alpinejs/morph": "^3.13.5",
     "@jaames/iro": "^5.5.2",
     "@percy/cli": "^1.28.8",
     "@tailwindcss/container-queries": "^0.1.0",
     "@tailwindcss/forms": "^0.5.6",
     "alias-hq": "^6.2.2",
-    alpinejs: "^3.13.8",
+    alpinejs: "^3.14.1",
     autoprefixer: "^10.4.16",
     "container-query-polyfill": "^1.0.2",
     del: "^7.1.0",
@@ -15364,7 +15407,7 @@ var package_default = {
     postcss: "^8.4.38",
     "postcss-cli": "^11.0.0",
     "postcss-value-parser": "^4.2.0",
-    prettier: "^3.2.5",
+    prettier: "^3.3.3",
     "release-it": "^17.2.1",
     svgo: "^3.0.2",
     tailwindcss: "^3.4.3",
@@ -15390,6 +15433,9 @@ var package_default = {
       "after:version:bump": "bundle exec rake coco:gem:bump_version[${version}] && bundle && cd lookbook && bundle",
       "after:release": "rake coco:gem:release[${version}]"
     }
+  },
+  devDependencies: {
+    "@mertasan/tailwindcss-variables": "^2.7.0"
   }
 };
 

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

@@ -1,4 +1,8 @@
 @layer components {
+  :root {
+    --button-border-radius: 44px;
+  }
+
   .coco-button-wrapper {
     @apply !contents;
   }
@@ -83,7 +87,7 @@
 
     &[data-theme] {
       @apply transition-all overflow-hidden;
-      border-radius: 44px;
+      border-radius: var(--button-border-radius);
 
       .button-content {
         @apply font-semibold;

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

@@ -1,7 +1,7 @@
 @layer components {
   [data-coco][data-component="button-group"] {
     width: fit-content;
-    border-radius: 44px;
+    border-radius: var(--button-border-radius);
 
     &[data-collapsible="true"] {
       @apply opacity-0;

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

@@ -6,5 +6,9 @@
     .confirm-text {
       @apply label-sm font-semibold;
     }
+
+    .coco-button {
+      border-radius: var(--button-border-radius) !important;
+    }
   }
 }

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

@@ -2,7 +2,7 @@
   [data-coco][data-component="option-bar"] {
     @apply border border-gray-transparent-100 p-1 bg-gray-transparent-50;
 
-    border-radius: 44px;
+    border-radius: var(--button-border-radius);
     width: fit-content;
 
     .option-bar-buttons {

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

@@ -16,12 +16,12 @@ module Coco
         @sections[alignment] = view_context.render(component, &block)
       end
 
-    def initialize(**kwargs)
+    def initialize(**)
       @sections = {
         start: nil,
         end: nil
       }
-      super(**kwargs)
+      super
     end
 
     def start_section

data/app/components/coco/component.rb

@@ -65,7 +65,7 @@ module Coco
         # be used to initialize the component.
         kwargs = run_callbacks(:before_initialize, kwargs, reduce: true)
 
-        obj = super(**kwargs)
+        obj = super
 
         if obj.instance_of?(Coco::Component)
           raise "`Coco::Component` must be subclassed before use"

data/app/components/coco/presented_component.rb

@@ -22,7 +22,7 @@ module Coco
           end
         end
 
-        instance = kwargs.any? ? super(subject, **kwargs) : super(subject)
+        instance = kwargs.any? ? super : super(subject)
         instance.subject = subject
         instance
       end

data/config/esbuild.config.mjs

@@ -0,0 +1,56 @@
+import importGlob from "../lib/scripts/esbuild-plugin-import-glob.mjs";
+import buildIcons from "../lib/scripts/esbuild-plugin-build-icons.mjs";
+import mapAliasedPath from "../lib/scripts/map-aliased-path.mjs";
+import cleanPlugin from "../lib/scripts/esbuild-plugin-clean.mjs";
+import { copy } from "esbuild-plugin-copy";
+import { cocoPath } from "./utils.js";
+
+const watch = process.argv.includes("--watch");
+const dev = watch || process.argv.includes("--dev");
+
+export default {
+  entryPoints: ["coco.js"],
+  bundle: true,
+  metafile: true,
+  outdir: cocoPath("@build"),
+  absWorkingDir: cocoPath("@js"),
+  entryNames: `[dir]${dev ? "/dev" : ""}/[name]`,
+  logLevel: dev ? "warning" : "error",
+  plugins: [
+    importGlob({
+      importMapper: mapAliasedPath,
+    }),
+    cleanPlugin({
+      initialCleanPatterns: [
+        "**/*",
+        "!coco.css",
+        "!coco.js",
+        "!tailwind.preset.js",
+      ],
+    }),
+    buildIcons(
+      cocoPath("@npm/lucide-static/icons"),
+      cocoPath("@build/icons"),
+      cocoPath("@config")
+    ),
+    copy({
+      assets: [
+        {
+          from: ["./app/assets/img/**/*"],
+          to: ["./img"],
+        },
+        {
+          from: ["./app/assets/custom_icons/lucide/**/*"],
+          to: ["./icons"],
+        },
+        {
+          from: ["./app/assets/custom_icons/other/**/*"],
+          to: ["./icons/custom"],
+        },
+      ],
+      watch,
+    }),
+  ],
+  format: "esm",
+  platform: "node",
+};

data/config/tailwind.preset.js

@@ -1,12 +1,19 @@
 /** @type {import('tailwindcss').Config} */
 
 const defaultTheme = require("tailwindcss/defaultTheme");
-const { fontSize, fontFamily, colors, screens } = require("./tokens.js");
+const {
+  fontSize,
+  fontFamily,
+  colors,
+  variables,
+  screens,
+} = require("./tokens.js");
 
 module.exports = {
   theme: {
     colors,
     screens,
+    variables,
     fontFamily: {
       display: [fontFamily.displaySans, ...defaultTheme.fontFamily.sans],
       body: [fontFamily.bodySans, ...defaultTheme.fontFamily.sans],
@@ -58,6 +65,7 @@ module.exports = {
   plugins: [
     require("@tailwindcss/forms"),
     require("@tailwindcss/container-queries"),
+    require("@mertasan/tailwindcss-variables"),
     require("../app/assets/css/plugins/colors.js"),
     require("../app/assets/css/plugins/icons.js"),
     require("../app/assets/css/plugins/layout.js"),

data/config/tokens.js

@@ -86,6 +86,9 @@ const colors = {
   },
 };
 
+const { coco, ...colorVariables } = colors;
+colorVariables.gray = colors.coco.gray;
+
 const colorAliases = {
   primary: {
     ...colors.green,
@@ -244,4 +247,14 @@ module.exports = {
     bodySans: "proxima-nova",
     displaySerif: "merriweather",
   },
+  variables: {
+    DEFAULT: {
+      coco: {
+        colors: {
+          ...colorVariables,
+          ...colorAliases,
+        },
+      },
+    },
+  },
 };

data/lib/coco/options/item.rb

@@ -21,7 +21,7 @@ module Coco
 
       class_methods do
         def new(arg, **opts)
-          arg.is_a?(self) ? arg : super(arg, **opts)
+          arg.is_a?(self) ? arg : super
         end
       end
     end

data/lib/coco.rb

@@ -1,3 +1,3 @@
 module Coco
-  VERSION = "0.19.0"
+  VERSION = "0.19.2"
 end

data/lib/scripts/esbuild-meta.mjs

@@ -0,0 +1,26 @@
+import esbuild from "esbuild";
+import path from "path";
+import fs from "fs";
+import config from "../../config/esbuild.config.mjs";
+
+const metafilePath = "tmp/bundle-metadata.json";
+
+function ensureDirectoryExistence(filePath) {
+  var dirname = path.dirname(filePath);
+  if (fs.existsSync(dirname)) {
+    return true;
+  }
+  ensureDirectoryExistence(dirname);
+  fs.mkdirSync(dirname);
+}
+
+ensureDirectoryExistence(metafilePath);
+
+esbuild.build({ ...config, metafile: true }).then((result) => {
+  fs.writeFileSync(metafilePath, JSON.stringify(result.metafile));
+  console.log("\n✅ Bundle metadata file generated.");
+
+  console.log(
+    `👀 You can now upload '${metafilePath}' to https://esbuild.github.io/analyze/ for bundle analysis.`
+  );
+});

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: coveragebook_components
 version: !ruby/object:Gem::Version
-  version: 0.19.0
+  version: 0.19.2
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-07-08 00:00:00.000000000 Z
+date: 2024-09-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -1723,6 +1723,7 @@ files:
 - app/helpers/coco/integration_helper.rb
 - app/helpers/coco/modal_helper.rb
 - app/helpers/coco/tag_helper.rb
+- config/esbuild.config.mjs
 - config/exports.js
 - config/icons.json
 - config/locales/coco.en.yml
@@ -1749,6 +1750,7 @@ files:
 - lib/generators/coco/templates/component.rb.tt
 - lib/generators/coco/templates/preview.rb.tt
 - lib/generators/coco/templates/test.rb.tt
+- lib/scripts/esbuild-meta.mjs
 - lib/scripts/esbuild-plugin-build-icons.mjs
 - lib/scripts/esbuild-plugin-clean.mjs
 - lib/scripts/esbuild-plugin-import-glob.mjs