coveragebook_components 0.17.0 → 0.17.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: dc43045cc6048971e404fd7a2379f96920e0010e55c24b699b6765a03b1f94cc
-  data.tar.gz: 4149e9785f9e4d7a23b07cf10683ca7da2375b9d7ead3f248f5779d33d5734da
+  metadata.gz: a2af0604e33ee8ea690a93abf997f126ecaeb23528b3bf682fadc79eed353df2
+  data.tar.gz: 6d055a247adaa8f2a794d3a6864d38a23fd2059d0c01d08ea183e751c06c440c
 SHA512:
-  metadata.gz: ed242d2d14c076df4b69ef6de50b5bf8478680cd78372d54d4e3836fbdb86408f0dce619881a726312b6ac0e517ac2886d0c61cfdd411581228e181de8272334
-  data.tar.gz: accd767375b3d5f2cc9a479fa8d60bde2e4f894226f1673f8758624e00ba79d34e2ba55a7aae950272afb977778d714869b7914c46808b559dd67a5062b33c4c
+  metadata.gz: eb41e2bfb905a693fb9a9ac36019d09699001552fa9f6aa2ce0df0b7f8281ebcc159f15cf41a58c059e1f83fe6907c085265cddee43dc893d8d475e34b146092
+  data.tar.gz: 9c229a0bf2926994c7bf5699485365d74956e3fc23cb0df41842b11ca5e27df24f3603c9339a86771316acdf94b185e83250f9e2b5c651771f0fcb130c0f7f24

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
 }

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

@@ -4220,15 +4220,15 @@ var require_tippy_cjs = __commonJS({
       }
       return arrow;
     }
-    function setContent(content2, props) {
+    function setContent(content, props) {
       if (isElement(props.content)) {
-        dangerouslySetInnerHTML(content2, "");
-        content2.appendChild(props.content);
+        dangerouslySetInnerHTML(content, "");
+        content.appendChild(props.content);
       } else if (typeof props.content !== "function") {
         if (props.allowHTML) {
-          dangerouslySetInnerHTML(content2, props.content);
+          dangerouslySetInnerHTML(content, props.content);
         } else {
-          content2.textContent = props.content;
+          content.textContent = props.content;
         }
       }
     }
@@ -4254,15 +4254,15 @@ var require_tippy_cjs = __commonJS({
       box.className = BOX_CLASS;
       box.setAttribute("data-state", "hidden");
       box.setAttribute("tabindex", "-1");
-      var content2 = div();
-      content2.className = CONTENT_CLASS;
-      content2.setAttribute("data-state", "hidden");
-      setContent(content2, instance.props);
+      var content = div();
+      content.className = CONTENT_CLASS;
+      content.setAttribute("data-state", "hidden");
+      setContent(content, instance.props);
       popper.appendChild(box);
-      box.appendChild(content2);
+      box.appendChild(content);
       onUpdate(instance.props, instance.props);
       function onUpdate(prevProps, nextProps) {
-        var _getChildren = getChildren(popper), box2 = _getChildren.box, content3 = _getChildren.content, arrow = _getChildren.arrow;
+        var _getChildren = getChildren(popper), box2 = _getChildren.box, content2 = _getChildren.content, arrow = _getChildren.arrow;
         if (nextProps.theme) {
           box2.setAttribute("data-theme", nextProps.theme);
         } else {
@@ -4285,7 +4285,7 @@ var require_tippy_cjs = __commonJS({
           box2.removeAttribute("role");
         }
         if (prevProps.content !== nextProps.content || prevProps.allowHTML !== nextProps.allowHTML) {
-          setContent(content3, instance.props);
+          setContent(content2, instance.props);
         }
         if (nextProps.arrow) {
           if (!arrow) {
@@ -4877,9 +4877,9 @@ var require_tippy_cjs = __commonJS({
         }
         invokeHook("onAfterUpdate", [instance, partialProps]);
       }
-      function setContent2(content2) {
+      function setContent2(content) {
         instance.setProps({
-          content: content2
+          content
         });
       }
       function show() {
@@ -4911,8 +4911,8 @@ var require_tippy_cjs = __commonJS({
           popper.style.transition = "none";
         }
         if (getIsDefaultRenderFn()) {
-          var _getDefaultTemplateCh2 = getDefaultTemplateChildren(), box = _getDefaultTemplateCh2.box, content2 = _getDefaultTemplateCh2.content;
-          setTransitionDuration([box, content2], 0);
+          var _getDefaultTemplateCh2 = getDefaultTemplateChildren(), box = _getDefaultTemplateCh2.box, content = _getDefaultTemplateCh2.content;
+          setTransitionDuration([box, content], 0);
         }
         onFirstUpdate = function onFirstUpdate2() {
           var _instance$popperInsta2;
@@ -4967,10 +4967,10 @@ var require_tippy_cjs = __commonJS({
         removeDocumentPress();
         handleStyles(true);
         if (getIsDefaultRenderFn()) {
-          var _getDefaultTemplateCh4 = getDefaultTemplateChildren(), box = _getDefaultTemplateCh4.box, content2 = _getDefaultTemplateCh4.content;
+          var _getDefaultTemplateCh4 = getDefaultTemplateChildren(), box = _getDefaultTemplateCh4.box, content = _getDefaultTemplateCh4.content;
           if (instance.props.animation) {
-            setTransitionDuration([box, content2], duration);
-            setVisibilityState([box, content2], "hidden");
+            setTransitionDuration([box, content], duration);
+            setVisibilityState([box, content], "hidden");
           }
         }
         handleAriaContentAttribute();
@@ -5387,7 +5387,7 @@ var require_tippy_cjs = __commonJS({
           }
           return {};
         }
-        var _getChildren = getChildren(instance.popper), box = _getChildren.box, content2 = _getChildren.content;
+        var _getChildren = getChildren(instance.popper), box = _getChildren.box, content = _getChildren.content;
         var backdrop = instance.props.animateFill ? createBackdropElement() : null;
         return {
           onCreate: function onCreate() {
@@ -5405,7 +5405,7 @@ var require_tippy_cjs = __commonJS({
             if (backdrop) {
               var transitionDuration = box.style.transitionDuration;
               var duration = Number(transitionDuration.replace("ms", ""));
-              content2.style.transitionDelay = Math.round(duration / 10) + "ms";
+              content.style.transitionDelay = Math.round(duration / 10) + "ms";
               backdrop.style.transitionDuration = transitionDuration;
               setVisibilityState([backdrop], "visible");
             }
@@ -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);
@@ -10265,8 +10309,8 @@ var require_module_cjs4 = __commonJS({
             var element = elementsToCheck.shift();
             if (element.tagName === "SLOT") {
               var assigned = element.assignedElements();
-              var content2 = assigned.length ? assigned : element.children;
-              var nestedCandidates = getCandidatesIteratively2(content2, true, options);
+              var content = assigned.length ? assigned : element.children;
+              var nestedCandidates = getCandidatesIteratively2(content, true, options);
               if (options.flatten) {
                 candidates.push.apply(candidates, nestedCandidates);
               } else {
@@ -15126,13 +15170,13 @@ function tooltip_default(Alpine3) {
       let initialContent = null;
       const enableTooltip = () => el.__x_tippy.enable();
       const disableTooltip = () => el.__x_tippy.disable();
-      const setupTooltip = (content2) => {
-        if (!content2) {
+      const setupTooltip = (content) => {
+        if (!content) {
           disableTooltip();
         } else {
           enableTooltip();
-          el.__x_tippy.setContent(content2);
-          initialContent = initialContent || content2;
+          el.__x_tippy.setContent(content);
+          initialContent = initialContent || content;
         }
       };
       if (modifiers.includes("raw")) {
@@ -15140,21 +15184,21 @@ function tooltip_default(Alpine3) {
       } else {
         const getContent = evaluateLater(expression);
         effect(() => {
-          getContent((content2) => {
-            if (typeof content2 === "object" && content2 !== null) {
-              el.__x_tippy.setProps(content2);
-              initialContent = initialContent || content2.content;
+          getContent((content) => {
+            if (typeof content === "object" && content !== null) {
+              el.__x_tippy.setProps(content);
+              initialContent = initialContent || content.content;
               enableTooltip();
             } else {
-              setupTooltip(content2);
+              setupTooltip(content);
             }
           });
         });
       }
       setData(el, {
         tooltip: {
-          setContent(content2) {
-            setupTooltip(content2);
+          setContent(content) {
+            setupTooltip(content);
           },
           disable: () => disableTooltip(),
           enable: () => enableTooltip(),
@@ -15183,7 +15227,7 @@ function destroy_default(Alpine3) {
 function dropdown_default(Alpine3) {
   Alpine3.directive(
     "dropdown",
-    (el, { value, modifiers, expression }, { evaluate, effect }) => {
+    (el, { value, modifiers, expression }, { evaluate }) => {
       if (value)
         return;
       const data = getData(el);
@@ -15192,7 +15236,7 @@ function dropdown_default(Alpine3) {
       const directiveConfig = isObject(result) ? result : {};
       let { triggerTarget, contentTarget, anchorTarget, ...config } = directiveConfig;
       contentTarget = contentTarget || el.querySelector("[x-dropdown\\:content]");
-      content = isNode(contentTarget) ? contentTarget.firstElementChild : contentTarget;
+      const content = isNode(contentTarget) ? contentTarget.firstElementChild : contentTarget;
       triggerTarget = triggerTarget || el.querySelector("[x-dropdown\\:trigger]") || el;
       anchorTarget = anchorTarget || el.querySelector("[x-dropdown\\:anchor]") || el;
       if (!el.__x_dropdown) {
@@ -15371,7 +15415,7 @@ var alpine_default = import_alpinejs.default;
 // ../../../package.json
 var package_default = {
   name: "coveragebook-components",
-  version: "0.17.0",
+  version: "0.17.2",
   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",
@@ -15618,8 +15662,8 @@ var button_default = CocoComponent("button", (data = {}) => {
       this.state = this.state === state1 ? state2 : state1;
     },
     getContentForState(state) {
-      const content2 = this.$refs[`${state}Content`];
-      return content2 ? content2.innerText : null;
+      const content = this.$refs[`${state}Content`];
+      return content ? content.innerText : null;
     },
     hasIconForState(state) {
       return !!this.$refs[`${state}Icon`];

data/app/assets/js/base/alpine/directives/dropdown.js

@@ -7,7 +7,7 @@ import { setData, getData } from "@helpers/alpine";
 export default function (Alpine) {
   Alpine.directive(
     "dropdown",
-    (el, { value, modifiers, expression }, { evaluate, effect }) => {
+    (el, { value, modifiers, expression }, { evaluate }) => {
       // Don't run for dropdown sub-elements
       // like `x-dropdown:trigger` and `x-dropdown:content`
       if (value) return;
@@ -21,7 +21,7 @@ export default function (Alpine) {
 
       contentTarget =
         contentTarget || el.querySelector("[x-dropdown\\:content]");
-      content = isNode(contentTarget)
+      const content = isNode(contentTarget)
         ? contentTarget.firstElementChild
         : contentTarget;
       triggerTarget =

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/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,40 +132,40 @@ 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)
@@ -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.0"
+  VERSION = "0.17.2"
 end

metadata

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