coveragebook_components 0.18.8 → 0.19.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3a51adb34f4dc39457d366fbbc14b9e2abbd2fff64af693cb117911d3268edb1
-  data.tar.gz: 2778a57ba70462d2fd13d789808f07c5c04fb3706da3a137528b783cd19e733e
+  metadata.gz: ddda4d2e278e6259a45856fe50f05eefffa161a337489494e12b8198584b7afb
+  data.tar.gz: e2476d7be98d6c3b35529d498cb3d4c1c88b4eb51ce1cc11b76bbf3fdc927d79
 SHA512:
-  metadata.gz: ed9dfd6d27da7988a058de1a47e5a8ab28d8705f8bab863e9c06af7b853cf258c4eae4d141a1e1fcbe140903df52088ad3868a98270edfd8fe3377364c3bcea7
-  data.tar.gz: 1133b75a1f2d5c687aa80ba08d4badc01bd763d107a1aada465f2ea94217c1505a59005d04218f99cf587dbd125a7e8deb1f06a9c08224adaf5a434b02e902d0
+  metadata.gz: 6457b878c1d4891014e51a9439fe3e145b0bc55612b79ab594c98c1999929385015d9d37f983e35b48bee973af1409aabd2d08577b8587c9d51f68da2597f178
+  data.tar.gz: 382ec0a0021eb489bc7901c67f4cac5825cdf115d3b8d3f439b6873092790413be6c8357968b522b4ab32e954a59a5bd3933b024dd73fa83e8ba1d7e4aeb6d28

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

@@ -731,6 +731,10 @@ select{
   --tw-contain-style:  
 }
 
+:root {
+    --button-border-radius: 44px;
+  }
+
 .coco-button-wrapper{
   display: contents !important
 }
@@ -864,7 +868,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 +2229,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 +2349,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 +2632,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
 }
@@ -5032,6 +5040,48 @@ select{
   margin-right: -0.25rem
 }
 
+[data-coco][data-component="tabs"]{
+  border-bottom-width: 1px;
+  border-color: rgba(0, 12, 39, 0.18)
+}
+
+[data-coco][data-component="tabs"] [role="tablist"] {
+      display: flex;
+      position: relative;
+      width: 100%;
+    }
+
+[data-coco][data-component="tabs"] [role="tab"]{
+  border-bottom-width: 2px;
+  border-color: transparent;
+      position: relative;
+      bottom: -1px
+}
+
+[data-coco][data-component="tabs"] [role="tab"] .coco-button{
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity))
+}
+
+[data-coco][data-component="tabs"] [role="tab"] .coco-button:hover{
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity))
+}
+
+[data-coco][data-component="tabs"] [role="tab"].active{
+  --tw-border-opacity: 1;
+  border-color: rgb(17 24 39 / var(--tw-border-opacity))
+}
+
+[data-coco][data-component="tabs"] [role="tab"].active .coco-button{
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity))
+}
+
+[data-coco][data-component="tabs"][data-fit="full"] [role="tab"] {
+      width: 100%;
+    }
+
 [data-coco][data-component="color-picker"]{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity))

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(() => {
@@ -15296,7 +15326,7 @@ var alpine_default = import_alpinejs.default;
 // ../../../package.json
 var package_default = {
   name: "coveragebook-components",
-  version: "0.18.8",
+  version: "0.19.1",
   repository: "git@github.com:coveragebook/coco.git",
   license: "NO LICENSE",
   author: "Mark Perkins <mark@coveragebook.com>",
@@ -15311,9 +15341,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 +15369,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 +15395,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",

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/navigation/tabs/tabs.css

@@ -0,0 +1,37 @@
+@layer components {
+  [data-coco][data-component="tabs"] {
+    @apply border-b border-gray-transparent-200;
+
+    [role="tablist"] {
+      display: flex;
+      position: relative;
+      width: 100%;
+    }
+
+    [role="tab"] {
+      @apply border-b-2 border-transparent;
+      position: relative;
+      bottom: -1px;
+
+      .coco-button {
+        @apply text-content-dark-muted;
+
+        &:hover {
+          @apply text-content-dark-2;
+        }
+      }
+
+      &.active {
+        @apply border-background-dark-1;
+
+        .coco-button {
+          @apply text-content-dark-1;
+        }
+      }
+    }
+
+    &[data-fit="full"] [role="tab"] {
+      width: 100%;
+    }
+  }
+}

data/app/components/coco/navigation/tabs/tabs.html.erb

@@ -0,0 +1,5 @@
+<%= render component_tag(:nav) do %>
+  <ul role="tablist">
+    <%= safe_join(tabs) %>
+  </ul>
+<% end %>

data/app/components/coco/navigation/tabs/tabs.rb

@@ -0,0 +1,13 @@
+module Coco
+  class Tabs < Coco::Component
+    include Concerns::AcceptsOptions
+
+    accepts_option :fit, from: [:auto, :full], default: :auto
+
+    renders_many :tabs, ->(*args, active: false, **kwargs, &block) do
+      tag.li(class: {active:}, role: "tab") do
+        coco_button(*args, **kwargs, theme: :blank, fit: get_option_value(:fit), &block)
+      end
+    end
+  end
+end

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/app/helpers/coco/components_helper.rb

@@ -236,6 +236,10 @@ module Coco
       render(Coco::PagerButton.new(direction:, **), &)
     end
 
+    def coco_tabs(**, &)
+      render(Coco::Tabs.new(**), &)
+    end
+
     # Typography
 
     def coco_prose(**, &)

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/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.18.8"
+  VERSION = "0.19.1"
 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.18.8
+  version: 0.19.1
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-07-05 00:00:00.000000000 Z
+date: 2024-09-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -1685,6 +1685,9 @@ files:
 - app/components/coco/navigation/pager_button/pager_button.css
 - app/components/coco/navigation/pager_button/pager_button.html.erb
 - app/components/coco/navigation/pager_button/pager_button.rb
+- app/components/coco/navigation/tabs/tabs.css
+- app/components/coco/navigation/tabs/tabs.html.erb
+- app/components/coco/navigation/tabs/tabs.rb
 - app/components/coco/pickers/color_picker/color_picker.css
 - app/components/coco/pickers/color_picker/color_picker.html.erb
 - app/components/coco/pickers/color_picker/color_picker.js
@@ -1720,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
@@ -1746,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