coveragebook_components 0.7.8 → 0.7.10

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d300fed697f5a7f4c6efc0d61957f3cd3e4f89cf10907fc89ca8f1964f8d92bd
-  data.tar.gz: dce48e1edfc753eee953bcf11dc66a960f0ba0a56f1728a488b92f65701a1744
+  metadata.gz: 0e49dab540e7bcff41a931205ffb5f404ad1f43b15fad059b58ed114647df93c
+  data.tar.gz: 60d3b1861955797ab13c58b58d20647df994534bfaae136134bf888703c994f2
 SHA512:
-  metadata.gz: 9a32d872cd51dad95415230b33b3b38ba962229b0d292bc13d9a7847ead8cc71f793ea721c24910b92ecd229781cde7c3f395aa542dc98be2313da32bb104d1e
-  data.tar.gz: 525b96dced44fda522bd3ecd7562f84608e2172c85372b705a170af1c42e1e01bf2309ff209470da33a2bbdcf84afd6e7b26958e518f17fb9fe82de873445b93
+  metadata.gz: aa861695cadd42ceb8dc4efa0adc6320b0a89747ec82b371c372c75f2a97c735da05e5ab4bfac03564daae497a5812f8381ccf92ecc8da02dbfa4fa094b66595
+  data.tar.gz: 5cc77f75ddb74d210d46fed6449707c627f77b0826eaf807643cec2daf98e11b082885191d882d837304233a11b11c25f28f52866dc87d8beceb6042d3e4c2f9

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

@@ -521,11 +521,16 @@ select{
 [type='file']:focus{
   outline: 1px solid ButtonText;
   outline: 1px auto -webkit-focus-ring-color}
+  :root {
+    --app-height: 100%;
+  }
+
   html{
   scroll-behavior: smooth;
   font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity))}
+
   @media (prefers-reduced-motion: no-preference){
 
   html{
@@ -685,10 +690,7 @@ select{
 [data-coco]{
   font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity));
-
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale}
+  color: rgb(17 24 39 / var(--tw-text-opacity))}
 [data-coco] h1,
     [data-coco] h2,
     [data-coco] h3,
@@ -767,6 +769,7 @@ select{
   order: 3}
 /* disabled */
 [data-coco].coco-button[data-disabled="true"] .button-element{
+  pointer-events: none;
   cursor: not-allowed}
 /* loading */
 @keyframes spin{
@@ -851,11 +854,14 @@ select{
   height: 1.5rem;
   width: 1.5rem}
 [data-coco][data-component="icon"][data-size="xl"]{
-  height: 2.25rem;
-  width: 2.25rem}
+  height: 2rem;
+  width: 2rem}
 [data-coco][data-component="icon"][data-size="xxl"]{
-  height: 3rem;
-  width: 3rem}
+  height: 2.5rem;
+  width: 2.5rem}
+[data-coco][data-component="icon"][data-size="full"]{
+  height: 100%;
+  width: 100%}
 /* Motion */
 @keyframes spin{
 
@@ -907,7 +913,6 @@ select{
   position: relative;
   z-index: 10000;
   display: flex;
-  min-height: 100vh;
   align-items: center;
   justify-content: center;
   padding: 0.5rem}
@@ -915,6 +920,9 @@ select{
 
   [data-coco][data-component="modal"] .modal-container{
     padding: 2rem}}
+[data-coco][data-component="modal"] .modal-container {
+      min-height: var(--app-height);
+    }
 [data-coco][data-component="modal"] .modal-content{
   display: contents}
 /* transitions */
@@ -1129,13 +1137,19 @@ select{
   --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
 [data-coco][data-component="placeholder"]{
+  padding: 1rem}
+[data-coco][data-component="placeholder"][data-boxed="true"]{
   border-width: 1px;
   border-style: dashed;
   --tw-border-opacity: 1;
   border-color: rgb(156 163 175 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
-  padding: 1rem;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity))}
+[data-coco][data-component="placeholder"][data-prose="true"] .placeholder-content > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse))}
+[data-coco][data-component="placeholder"][data-prose="false"]{
   text-align: center}
 [data-coco][data-component="placeholder"][data-size="full"]{
   height: 100%;
@@ -1792,7 +1806,9 @@ select{
   --tw-bg-opacity: 1;
   background-color: rgb(26 136 113 / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity))}
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale}
 [data-coco][data-component="app-button"][data-theme="primary"]:hover,
     [data-coco][data-component="app-button"][data-theme="positive"]:hover{
   --tw-bg-opacity: 1;
@@ -1907,7 +1923,9 @@ select{
   --tw-bg-opacity: 1;
   background-color: rgb(220 38 38 / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity))}
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale}
 [data-coco][data-component="app-button"][data-theme="negative"]:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(185 28 28 / var(--tw-bg-opacity))}
@@ -1951,7 +1969,9 @@ select{
   --tw-bg-opacity: 1;
   background-color: rgb(245 158 11 / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity))}
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale}
 [data-coco][data-component="app-button"][data-theme="warning"]:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(180 83 9 / var(--tw-bg-opacity))}
@@ -1995,7 +2015,9 @@ select{
   --tw-bg-opacity: 1;
   background-color: rgb(2 132 199 / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity))}
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale}
 [data-coco][data-component="app-button"][data-theme="info"]:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(3 105 161 / var(--tw-bg-opacity))}
@@ -2039,7 +2061,9 @@ select{
   --tw-bg-opacity: 1;
   background-color: rgb(17 24 39 / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity))}
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale}
 [data-coco][data-component="app-button"][data-theme="neutral-dark"]:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(55 65 81 / var(--tw-bg-opacity))}
@@ -2077,6 +2101,28 @@ select{
   background-color: rgb(255 255 255 / var(--tw-bg-opacity))}
 [data-coco][data-component="app-button"][data-theme="neutral-light"][data-disabled="true"] .button-inner{
   opacity: 0.4}
+[data-coco][data-component="app-button"][data-theme="text-neutral-light"]{
+  background-color: transparent;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale}
+[data-coco][data-component="app-button"][data-theme="text-neutral-light"]:hover{
+  background-color: rgb(255 255 255 / 0.1)}
+[data-coco][data-component="app-button"][data-theme="text-neutral-light"][data-state="active"]{
+  background-color: rgb(255 255 255 / 0.1)}
+[data-coco][data-component="app-button"][data-theme="text-neutral-light"][data-disabled="true"]{
+  opacity: 0.3}
+[data-coco][data-component="app-button"][data-theme="text-neutral-dark"]{
+  background-color: transparent;
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity))}
+[data-coco][data-component="app-button"][data-theme="text-neutral-dark"]:hover{
+  background-color: rgb(17 24 39 / 0.1)}
+[data-coco][data-component="app-button"][data-theme="text-neutral-dark"][data-state="active"]{
+  background-color: rgb(17 24 39 / 0.1)}
+[data-coco][data-component="app-button"][data-theme="text-neutral-dark"][data-disabled="true"]{
+  opacity: 0.3}
 /* Responsive resizing */
 [data-coco][data-component="app-button"][data-size="sm"] .button-content{
   font-size: 14px;
@@ -2555,11 +2601,13 @@ select{
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
 [data-coco][data-component="app-button-to"]{
-  display: inline-flex;
+  display: flex;
     width: -moz-max-content;
     width: max-content}
 [data-coco][data-component="app-button-to"] form{
   width: 100%}
+[data-coco][data-component="app-button-to"][data-fit="full"]{
+  width: 100%}
 [data-coco][data-component="app-color-picker"]{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity))}
@@ -3211,6 +3259,9 @@ select{
   text-align: left}
 [data-coco][data-component="app-menu"] .menu-item > [data-component="app-button"] .button-content, [data-coco][data-component="app-menu"] .menu-item > [data-component="app-button-to"] .button-content, [data-coco][data-component="app-menu"] .menu-item > [data-component="app-menu-button"] .button-content{
   font-weight: 400 !important}
+[data-coco][data-component="app-menu"] .menu-item .divider{
+  margin-top: 0.375rem;
+  margin-bottom: 0.375rem}
 [data-coco][data-component="app-menu"][data-size="sm"]{
   padding-top: 0.375rem;
   padding-bottom: 0.375rem}
@@ -3898,6 +3949,8 @@ select{
   position: static}
 .fixed{
   position: fixed}
+.\!block{
+  display: block !important}
 .block{
   display: block}
 .flex{

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

@@ -6118,7 +6118,8 @@
           primary: {
             DEFAULT: colors.green[500],
             dark: colors.green[600],
-            inverse: colors.green[300]
+            inverse: colors.green[300],
+            "inverse-vivid": "#009979"
           },
           negative: {
             DEFAULT: colors.red[600],
@@ -6150,6 +6151,7 @@
         xl: "1200px",
         "2xl": "1400px",
         max: "1800px",
+        "small-landscape": { raw: "(max-height: 760px) and (min-width: 576px)" },
         print: { raw: "print" }
         // Note: PDFs are rendered at a viewport width of 1280px
       };
@@ -6158,6 +6160,7 @@
         "para-sm": ["14px", "20px"],
         "para-md": ["16px", "24px"],
         "para-lg": ["18px", "27px"],
+        "label-xxs": ["10px", "12px"],
         "label-xs": ["12px", "14px"],
         "label-sm": ["14px", "16px"],
         "label-md": ["16px", "20px"],
@@ -14032,7 +14035,7 @@
   var package_default = {
     name: "coveragebook-components",
     type: "module",
-    version: "0.7.8",
+    version: "0.7.10",
     main: "index.js",
     repository: "git@github.com:coveragebook/coco.git",
     author: "Mark Perkins <mark@coveragebook.com>",
@@ -23006,6 +23009,27 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
   tippy.defaultProps = defaultProps;
   tippy.setDefaultProps = setDefaultProps;
   tippy.currentInput = currentInput;
+  var hideAll = function hideAll2(_temp) {
+    var _ref = _temp === void 0 ? {} : _temp, excludedReferenceOrInstance = _ref.exclude, duration = _ref.duration;
+    mountedInstances.forEach(function(instance) {
+      var isExcluded = false;
+      if (excludedReferenceOrInstance) {
+        isExcluded = isReferenceElement(excludedReferenceOrInstance) ? instance.reference === excludedReferenceOrInstance : instance.popper === excludedReferenceOrInstance.popper;
+      }
+      if (!isExcluded) {
+        var originalDuration = instance.props.duration;
+        instance.setProps({
+          duration
+        });
+        instance.hide();
+        if (!instance.state.isDestroyed) {
+          instance.setProps({
+            duration: originalDuration
+          });
+        }
+      }
+    });
+  };
   var applyStylesModifier = Object.assign({}, applyStyles_default, {
     effect: function effect6(_ref) {
       var state = _ref.state;
@@ -23662,6 +23686,31 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
   module_default.plugin(notification_default);
   var alpine_default2 = module_default;
 
+  // helpers/location.js
+  function navigateTo(url, options = {}) {
+    if (window.Turbo && options.turbo === true) {
+      window.Turbo.visit(url, { action: options.action || "advance" });
+    } else {
+      location.assign(url);
+    }
+  }
+
+  // app/setup.js
+  window.addEventListener("navigate", (event) => {
+    const { url, turbo, action } = event.detail;
+    if (url) {
+      navigateTo(url, { turbo, action });
+    }
+  });
+  function setAppHeightProperty() {
+    document.documentElement.style.setProperty(
+      "--app-height",
+      `${window.innerHeight}px`
+    );
+  }
+  window.addEventListener("resize", setAppHeightProperty);
+  setAppHeightProperty();
+
   // ../../components/coco/base/button/button.js
   var button_exports = {};
   __export(button_exports, {
@@ -23962,6 +24011,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       },
       show() {
         this.open = true;
+        hideAll();
         setTimeout(() => {
           this.$dispatch("modal:shown");
         }, 400);
@@ -24080,12 +24130,12 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       },
       imageLoaded() {
         this.loaded = true;
-        this.$nextTick(() => {
+        setTimeout(() => {
           const scrollTop = parseInt(this.img.dataset.scrollTop, 10);
           if (!isNaN(scrollTop) && scrollTop !== 0) {
             this.modal.scrollTo(scrollTop);
           }
-        });
+        }, 200);
       },
       get img() {
         return this.$refs.media.querySelector("img");

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

@@ -542,12 +542,17 @@ select {
   outline: 1px solid ButtonText;
   outline: 1px auto -webkit-focus-ring-color;
 }
+  :root {
+    --app-height: 100%;
+  }
+
   html {
   scroll-behavior: smooth;
   font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
+
   @media (prefers-reduced-motion: no-preference) {
 
   html {
@@ -723,9 +728,6 @@ select {
   font-family: proxima-nova, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
-
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
 }
 [data-coco] h1,
     [data-coco] h2,
@@ -797,6 +799,7 @@ select {
 }
 /* disabled */
 [data-coco].coco-button[data-disabled="true"] .button-element {
+  pointer-events: none;
   cursor: not-allowed;
 }
 /* loading */
@@ -904,12 +907,16 @@ select {
   width: 1.5rem;
 }
 [data-coco][data-component="icon"][data-size="xl"] {
-  height: 2.25rem;
-  width: 2.25rem;
+  height: 2rem;
+  width: 2rem;
 }
 [data-coco][data-component="icon"][data-size="xxl"] {
-  height: 3rem;
-  width: 3rem;
+  height: 2.5rem;
+  width: 2.5rem;
+}
+[data-coco][data-component="icon"][data-size="full"] {
+  height: 100%;
+  width: 100%;
 }
 /* Motion */
 @keyframes spin {
@@ -979,7 +986,6 @@ select {
   position: relative;
   z-index: 10000;
   display: flex;
-  min-height: 100vh;
   align-items: center;
   justify-content: center;
   padding: 0.5rem;
@@ -990,6 +996,9 @@ select {
     padding: 2rem;
   }
 }
+[data-coco][data-component="modal"] .modal-container {
+      min-height: var(--app-height);
+    }
 [data-coco][data-component="modal"] .modal-content {
   display: contents;
 }
@@ -1252,13 +1261,22 @@ select {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 [data-coco][data-component="placeholder"] {
+  padding: 1rem;
+}
+[data-coco][data-component="placeholder"][data-boxed="true"] {
   border-width: 1px;
   border-style: dashed;
   --tw-border-opacity: 1;
   border-color: rgb(156 163 175 / var(--tw-border-opacity));
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
-  padding: 1rem;
+}
+[data-coco][data-component="placeholder"][data-prose="true"] .placeholder-content > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
+}
+[data-coco][data-component="placeholder"][data-prose="false"] {
   text-align: center;
 }
 [data-coco][data-component="placeholder"][data-size="full"] {
@@ -1754,6 +1772,9 @@ select {
 .fixed {
   position: fixed;
 }
+.\!block {
+  display: block !important;
+}
 .block {
   display: block;
 }

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

@@ -14395,6 +14395,27 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
   tippy.defaultProps = defaultProps;
   tippy.setDefaultProps = setDefaultProps;
   tippy.currentInput = currentInput;
+  var hideAll = function hideAll2(_temp) {
+    var _ref = _temp === void 0 ? {} : _temp, excludedReferenceOrInstance = _ref.exclude, duration = _ref.duration;
+    mountedInstances.forEach(function(instance) {
+      var isExcluded = false;
+      if (excludedReferenceOrInstance) {
+        isExcluded = isReferenceElement(excludedReferenceOrInstance) ? instance.reference === excludedReferenceOrInstance : instance.popper === excludedReferenceOrInstance.popper;
+      }
+      if (!isExcluded) {
+        var originalDuration = instance.props.duration;
+        instance.setProps({
+          duration
+        });
+        instance.hide();
+        if (!instance.state.isDestroyed) {
+          instance.setProps({
+            duration: originalDuration
+          });
+        }
+      }
+    });
+  };
   var applyStylesModifier = Object.assign({}, applyStyles_default, {
     effect: function effect6(_ref) {
       var state = _ref.state;
@@ -15188,6 +15209,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       },
       show() {
         this.open = true;
+        hideAll();
         setTimeout(() => {
           this.$dispatch("modal:shown");
         }, 400);
@@ -15306,12 +15328,12 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       },
       imageLoaded() {
         this.loaded = true;
-        this.$nextTick(() => {
+        setTimeout(() => {
           const scrollTop = parseInt(this.img.dataset.scrollTop, 10);
           if (!isNaN(scrollTop) && scrollTop !== 0) {
             this.modal.scrollTo(scrollTop);
           }
-        });
+        }, 200);
       },
       get img() {
         return this.$refs.media.querySelector("img");

data/app/assets/css/base/base.css

@@ -10,10 +10,22 @@
 @import "./components/coco";
 
 @layer base {
+  :root {
+    --app-height: 100%;
+  }
+
   html {
     @apply font-body scroll-smooth motion-safe:scroll-auto text-content-dark-1;
   }
 
+  html.app-layout,
+  html.app-layout body {
+    width: 100vw;
+    height: 100vh;
+    height: var(—-app-height);
+    overflow: hidden;
+  }
+
   a {
     @apply text-current underline underline-offset-2;
   }

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

@@ -2,9 +2,6 @@
   [data-coco] {
     @apply text-content-dark-1 font-body;
 
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-
     h1,
     h2,
     h3,

data/app/assets/js/app/setup.js

@@ -0,0 +1,22 @@
+import { navigateTo } from "@helpers/location";
+
+// Global JS navigation handler.
+// Optionally uses Turbo for the page navigation.
+window.addEventListener("navigate", (event) => {
+  const { url, turbo, action } = event.detail;
+  if (url) {
+    navigateTo(url, { turbo, action });
+  }
+});
+
+// Uodate the value of the `--app-height` css variable
+// when the viewport size changes. To help work around the
+// issues when using 100vh on mobile safari (https://medium.com/quick-code/100vh-problem-with-ios-safari-92ab23c852a8)
+function setAppHeightProperty() {
+  document.documentElement.style.setProperty(
+    "--app-height",
+    `${window.innerHeight}px`
+  );
+}
+window.addEventListener("resize", setAppHeightProperty);
+setAppHeightProperty();

data/app/assets/js/app.js

@@ -5,6 +5,8 @@ console.info("Initializing Coco JS", packageJSON.version);
 import "container-query-polyfill";
 import Alpine from "@libs/alpine";
 
+import "./app/setup";
+
 import "./base/components";
 import "./book/components";
 import "./app/components";

data/app/assets/js/helpers/location.js

@@ -0,0 +1,9 @@
+function navigateTo(url, options = {}) {
+  if (window.Turbo && options.turbo === true) {
+    window.Turbo.visit(url, { action: options.action || "advance" });
+  } else {
+    location.assign(url);
+  }
+}
+
+export { navigateTo };

data/app/assets/js/libs/tippy/index.js

@@ -1,4 +1,9 @@
-import tippy, { createSingleton, followCursor, roundArrow } from "tippy.js";
+import tippy, {
+  createSingleton,
+  followCursor,
+  roundArrow,
+  hideAll,
+} from "tippy.js";
 import hideOnEsc from "./plugins/hide_on_esc";
 
 tippy.setDefaultProps({
@@ -9,4 +14,4 @@ tippy.setDefaultProps({
 });
 
 export default tippy;
-export { tippy, createSingleton, hideOnEsc, followCursor };
+export { tippy, createSingleton, hideOnEsc, followCursor, hideAll };

data/app/components/coco/app/elements/alert/alert.html.erb

@@ -24,7 +24,12 @@
 
         <% if link? %>
           <div class="alert-link" data-role="link">
-            <%= link %>
+            <%= helpers.coco_link(
+                *@link_data[:args],
+                **@link_data[:kwargs],
+                size: :sm,
+                &@link_data[:block]
+              ) %>
           </div>
         <% end %>
       </div>
@@ -36,7 +41,12 @@
               x-ref="action"
               @click="dismiss"
               data-role="action">
-              <%= action %>
+              <%= coco_button(
+                *@action_data[:args],
+                **@action_data[:kwargs],
+                size: :sm,
+                &@action_data[:block]
+              ) %>
             </div>
           <% end %>
 
@@ -45,7 +55,12 @@
               x-ref="secondaryAction"
               @click="dismiss"
               data-role="secondary-action">
-              <%= secondary_action %>
+              <%= coco_button(
+                *@secondary_action_data[:args],
+                **@secondary_action_data[:kwargs],
+                size: :sm,
+                &@secondary_action_data[:block]
+              ) %>
             </div>
           <% end %>
         </div>

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

@@ -25,19 +25,19 @@ module Coco
 
         renders_one :title
 
-        renders_one :action, ->(**kwargs, &block) do
+        renders_one :action, ->(*args, **kwargs, &block) do
           theme = vivid? ? "neutral-dark" : get_option_value(:theme)
-          Coco::App::Elements::Button.new(**kwargs, theme: theme, size: :sm, icon: nil)
+          @action_data = {args: args, kwargs: kwargs.merge(theme: theme), block: block}
         end
 
-        renders_one :secondary_action, ->(**kwargs, &block) do
+        renders_one :secondary_action, ->(*args, **kwargs, &block) do
           theme = vivid? ? "neutral-light" : "text-#{get_option_value(:theme)}"
-          Coco::App::Elements::Button.new(**kwargs, theme: theme, size: :sm, icon: nil)
+          @secondary_action_data = {args: args, kwargs: kwargs.merge(theme: theme), block: block}
         end
 
-        renders_one :link, ->(**kwargs, &block) do
+        renders_one :link, ->(*args, **kwargs, &block) do
           theme = vivid? ? nil : unvividify(get_option_value(:theme))
-          Coco::App::Elements::Link.new(**kwargs, theme: theme, size: :sm, icon: nil)
+          @link_data = {args: args, kwargs: kwargs.merge(theme: theme), block: block}
         end
 
         before_render do

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

@@ -13,7 +13,7 @@
 
     &[data-theme="primary"],
     &[data-theme="positive"] {
-      @apply bg-background-primary text-content-light-1 hover:bg-primary-600 active:bg-primary-700;
+      @apply bg-background-primary text-content-light-1 hover:bg-primary-600 active:bg-primary-700 antialiased;
 
       &[data-state="loading"] {
         @apply bg-background-primary;
@@ -105,7 +105,7 @@
     }
 
     &[data-theme="negative"] {
-      @apply bg-background-negative text-content-light-1 hover:bg-negative-700 active:bg-negative-800;
+      @apply bg-background-negative text-content-light-1 hover:bg-negative-700 active:bg-negative-800 antialiased;
 
       &[data-state="loading"] {
         @apply bg-background-negative;
@@ -145,7 +145,7 @@
     }
 
     &[data-theme="warning"] {
-      @apply bg-background-warning text-content-light-1 hover:bg-warning-700 active:bg-warning-800;
+      @apply bg-background-warning text-content-light-1 hover:bg-warning-700 active:bg-warning-800 antialiased;
 
       &[data-state="loading"] {
         @apply bg-background-warning;
@@ -185,7 +185,7 @@
     }
 
     &[data-theme="info"] {
-      @apply bg-background-info text-content-light-1 hover:bg-info-700 active:bg-info-800;
+      @apply bg-background-info text-content-light-1 hover:bg-info-700 active:bg-info-800 antialiased;
 
       &[data-state="loading"] {
         @apply bg-background-info;
@@ -225,7 +225,7 @@
     }
 
     &[data-theme="neutral-dark"] {
-      @apply bg-background-dark-1 text-content-light-1 hover:bg-gray-700 active:bg-gray-600;
+      @apply bg-background-dark-1 text-content-light-1 hover:bg-gray-700 active:bg-gray-600 antialiased;
 
       &[data-state="loading"] {
         @apply bg-background-dark-1;
@@ -260,6 +260,30 @@
       }
     }
 
+    &[data-theme="text-neutral-light"] {
+      @apply bg-transparent text-content-light-1 hover:bg-content-light-1/10 antialiased;
+
+      &[data-state="active"] {
+        @apply bg-content-light-1/10;
+      }
+
+      &[data-disabled="true"] {
+        @apply opacity-30;
+      }
+    }
+
+    &[data-theme="text-neutral-dark"] {
+      @apply bg-transparent text-content-dark-1 hover:bg-content-dark-1/10;
+
+      &[data-state="active"] {
+        @apply bg-content-dark-1/10;
+      }
+
+      &[data-disabled="true"] {
+        @apply opacity-30;
+      }
+    }
+
     /* Responsive resizing */
 
     &[data-size="sm"] {

data/app/components/coco/app/elements/button/button.rb

@@ -26,6 +26,8 @@ module Coco
           "text-toolbar",
           "neutral-dark",
           "neutral-light",
+          "text-neutral-light",
+          "text-neutral-dark",
           "blank",
           nil
         ]
@@ -44,6 +46,21 @@ module Coco
           end
         }
 
+        before_initialize do |kwargs|
+          kwargs[:button_element] ||= {}
+          if kwargs.key?(:modal)
+            modal_name = (kwargs[:modal] == true) ? "default" : kwargs[:modal]
+            kwargs[:button_element][:data] = kwargs[:button_element].fetch(:data, {}).merge(coco_modal_data_attributes(modal_name))
+            kwargs.delete(:modal)
+          end
+          if kwargs.key?(:frame)
+            turbo_data = {turbo: true, turbo_frame: kwargs[:frame]}
+            kwargs[:button_element][:data] = kwargs[:button_element].fetch(:data, {}).merge(turbo_data)
+            kwargs.delete(:frame)
+          end
+          kwargs
+        end
+
         before_render do
           if confirm? && !dropdown?
             with_confirmation do |confirm|
@@ -60,6 +77,10 @@ module Coco
         def with_confirmation(...)
           with_dropdown_confirmation(...)
         end
+
+        class << self
+          include Coco::BaseHelper
+        end
       end
     end
   end

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

@@ -1,10 +1,14 @@
 @layer components {
   [data-coco][data-component="app-button-to"] {
-    @apply inline-flex;
+    @apply flex;
     width: max-content;
 
     form {
       @apply w-full;
     }
+
+    &[data-fit="full"] {
+      @apply w-full;
+    }
   }
 }

data/app/components/coco/app/elements/button_to/button_to.rb

@@ -3,9 +3,16 @@ module Coco
     module Elements
       class ButtonTo < Coco::Component
         include Concerns::WrapsComponent
+        include Concerns::AcceptsOptions
+
+        accepts_option :fit, from: [:auto, :full]
 
         wraps_component :button do |args|
-          Coco::App::Elements::Button.new(type: :submit, **args)
+          Coco::App::Elements::Button.new(
+            type: :submit,
+            fit: get_option_value(:fit) || :auto,
+            **args
+          )
         end
 
         %i[confirmation].each do |slot_name|

data/app/components/coco/app/elements/link/link.rb

@@ -9,6 +9,24 @@ module Coco
 
         accepts_option :theme, from: THEMES
         accepts_option :underline, from: [true, false]
+
+        before_initialize do |kwargs|
+          if kwargs.key?(:modal)
+            modal_name = (kwargs[:modal] == true) ? "default" : kwargs[:modal]
+            kwargs[:data] = kwargs.fetch(:data, {}).merge(coco_modal_data_attributes(modal_name))
+            kwargs.delete(:modal)
+          end
+          if kwargs.key?(:frame)
+            turbo_data = {turbo: true, turbo_frame: kwargs[:frame]}
+            kwargs[:data] = kwargs.fetch(:data, {}).merge(turbo_data)
+            kwargs.delete(:frame)
+          end
+          kwargs
+        end
+
+        class << self
+          include Coco::BaseHelper
+        end
       end
     end
   end

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

@@ -20,6 +20,10 @@
           @apply !font-[400];
         }
       }
+
+      .divider {
+        @apply my-1.5;
+      }
     }
 
     &[data-size="sm"] {

data/app/components/coco/app/elements/menu_button/menu_button.html.erb

@@ -1,5 +1,11 @@
 <%= render component_tag(x: {data: "appMenuButton"}) do %>
   <%= render button do |btn| %>
+    <% if icon? %>
+      <% btn.with_icon do %>
+        <%= icon %>
+      <% end %>
+    <% end %>
+    
     <% if menu? %>
       <% btn.with_dropdown do %>
         <%= menu %>

data/app/components/coco/app/elements/menu_button/menu_button.rb

@@ -3,11 +3,17 @@ module Coco
     module Elements
       class MenuButton < Coco::Component
         include Concerns::AcceptsOptions
+        include Concerns::WithIcon
         include Concerns::WrapsComponent
         include Coco::AppHelper
 
-        wraps_component :button do |args|
-          Coco::App::Elements::Button.new(toggle: :vertical, fit: get_option_value(:fit) || :auto, **args)
+        wraps_component :button do |kwargs|
+          @size = kwargs.fetch(:size, :default)&.to_sym
+          if @size.in?(Coco::App::Elements::Button::SIZE_ALIASES.keys) && !kwargs.key?(:resize)
+            @size, @resize = Coco::App::Elements::Button::SIZE_ALIASES.fetch(@size)
+          end
+
+          Coco::App::Elements::Button.new(toggle: :vertical, fit: get_option_value(:fit) || :auto, **kwargs)
         end
 
         accepts_option :fit, from: [:auto, :full]
@@ -20,13 +26,6 @@ module Coco
 
         attr_reader :size, :resize
 
-        def initialize(button: {}, **kwargs)
-          @size = kwargs.fetch(:size, :default)&.to_sym
-          if @size.in?(Coco::App::Elements::Button::SIZE_ALIASES.keys) && !kwargs.key?(:resize)
-            @size, @resize = Coco::App::Elements::Button::SIZE_ALIASES.fetch(@size)
-          end
-        end
-
         def button_text
           text || content
         end

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

@@ -12,8 +12,8 @@ module Coco
         end
 
         %i[title action secondary_action link].each do |slot_name|
-          renders_one slot_name, ->(**kwargs, &block) do
-            alert.send("with_#{slot_name}".to_sym, **kwargs, &block)
+          renders_one slot_name, ->(*args, **kwargs, &block) do
+            alert.send("with_#{slot_name}".to_sym, *args, **kwargs, &block)
           end
         end
       end

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

@@ -35,7 +35,7 @@
     /* disabled */
 
     &[data-disabled="true"] .button-element {
-      @apply cursor-not-allowed;
+      @apply cursor-not-allowed pointer-events-none;
     }
 
     /* loading */

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

@@ -35,11 +35,15 @@
     }
 
     &[data-size="xl"] {
-      @apply w-9 h-9;
+      @apply w-8 h-8;
     }
 
     &[data-size="xxl"] {
-      @apply w-12 h-12;
+      @apply w-10 h-10;
+    }
+
+    &[data-size="full"] {
+      @apply w-full h-full;
     }
 
     /* Motion */

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

@@ -6,7 +6,7 @@ module Coco
 
     InvalidIconError = Class.new(StandardError)
 
-    accepts_option :size, from: %i[xs sm md lg xl xxl]
+    accepts_option :size, from: %i[xs sm md lg xl xxl full]
     accepts_option :spin, from: [true, false]
     accepts_option :style, from: [:line, :fill, :custom]
 

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

@@ -7,7 +7,8 @@
     }
 
     .modal-container {
-      @apply relative flex min-h-screen justify-center items-center z-[10000] p-2 sm:p-8;
+      @apply relative flex justify-center items-center z-[10000] p-2 sm:p-8;
+      min-height: var(--app-height);
     }
 
     .modal-content {

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

@@ -1,4 +1,5 @@
 import { CocoComponent } from "@js/coco";
+import { hideAll } from "@libs/tippy";
 
 export default CocoComponent("modal", () => {
   return {
@@ -19,6 +20,7 @@ export default CocoComponent("modal", () => {
 
     show() {
       this.open = true;
+      hideAll();
       setTimeout(() => {
         this.$dispatch("modal:shown");
       }, 400);

data/app/components/coco/base/modal_lightbox/modal_lightbox.js

@@ -16,12 +16,12 @@ export default CocoComponent("modalLightbox", () => {
 
     imageLoaded() {
       this.loaded = true;
-      this.$nextTick(() => {
+      setTimeout(() => {
         const scrollTop = parseInt(this.img.dataset.scrollTop, 10);
         if (!isNaN(scrollTop) && scrollTop !== 0) {
           this.modal.scrollTo(scrollTop);
         }
-      });
+      }, 200);
     },
 
     get img() {

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

@@ -1,6 +1,20 @@
 @layer components {
   [data-coco][data-component="placeholder"] {
-    @apply border border-dashed border-gray-400 p-4 bg-gray-50 text-center;
+    @apply p-4;
+
+    &[data-boxed="true"] {
+      @apply border border-dashed border-gray-400 bg-gray-50;
+    }
+
+    &[data-prose="true"] {
+      .placeholder-content {
+        @apply space-y-3;
+      }
+    }
+
+    &[data-prose="false"] {
+      @apply text-center;
+    }
 
     &[data-size="full"] {
       @apply w-full h-full;

data/app/components/coco/base/placeholder/placeholder.rb

@@ -3,5 +3,7 @@ module Coco
     include Concerns::AcceptsOptions
 
     accepts_option :size, from: [:auto, :full], default: :auto
+    accepts_option :prose, from: [true, false], default: false
+    accepts_option :boxed, from: [true, false], default: true
   end
 end

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

@@ -4,24 +4,37 @@ module Coco
       extend ActiveSupport::Concern
       include Coco::AppHelper
 
+      BUTTON_TYPES = {
+        menu: "Coco::App::Elements::MenuButton",
+        color_picker: "Coco::App::Elements::ColorPickerButton",
+        layout_picker: "Coco::App::Elements::LayoutPickerButton",
+        image_picker: "Coco::App::Elements::ImagePickerButton",
+        dropdown: "Coco::App::Elements::DropdownButton"
+      }
+
       included do
         renders_many :items, types: {
           divider: ->(**kwargs) { tag.div(class: "divider") },
-          button: ->(**kwargs) {
-            if kwargs.key?(:action) || kwargs.key?(:method) || kwargs.key?(:params)
-              App::Elements::ButtonTo.new(**button_kwargs(kwargs, :button_to))
-            else
-              App::Elements::Button.new(**button_kwargs(kwargs, :button))
-            end
-          },
-          menu_button: ->(**kwargs) { App::Elements::MenuButton.new(**button_kwargs(kwargs, :menu)) },
-          color_picker_button: ->(**kwargs) { App::Elements::ColorPickerButton.new(**button_kwargs(kwargs, :color_picker)) },
-          layout_picker_button: ->(**kwargs) { App::Elements::LayoutPickerButton.new(**button_kwargs(kwargs, :layout_picker)) },
-          image_picker_button: ->(**kwargs) { App::Elements::ImagePickerButton.new(**button_kwargs(kwargs, :image_picker)) },
-          dropdown_button: ->(**kwargs) { App::Elements::DropdownButton.new(**button_kwargs(kwargs, :dropdown)) }
+          button: ->(*args, **kwargs, &block) { coco_button(*args, **button_kwargs(kwargs, :button), &block) },
+          menu_button: ->(*args, **kwargs, &block) { instantiate_button(:menu, *args, **kwargs, &block) },
+          dropdown_button: ->(*args, **kwargs, &block) { instantiate_button(:dropdown, *args, **kwargs, &block) },
+          color_picker_button: ->(*args, **kwargs, &block) { instantiate_button(:color_picker, *args, **kwargs, &block) },
+          image_picker_button: ->(*args, **kwargs, &block) { instantiate_button(:image_picker, *args, **kwargs, &block) },
+          layout_picker_button: ->(*args, **kwargs, &block) { instantiate_button(:layout_picker, *args, **kwargs, &block) }
         }
       end
 
+      def instantiate_button(type, *args, **kwargs, &block)
+        href, content = if block
+          [args.first, nil]
+        else
+          (args.size == 1) ? [nil, args.first] : args[0..2].reverse!
+        end
+        component = BUTTON_TYPES[type].constantize.new(href: href, **button_kwargs(kwargs, type))
+        component.with_content(content) if !block && content.present?
+        component
+      end
+
       def with_divider(...)
         with_item_divider(...)
       end

data/app/helpers/coco/app_helper.rb

@@ -1,28 +1,24 @@
 module Coco
   module AppHelper
-    def coco_link(*args, **kwargs, &block)
-      href, content = args[0..2].reverse!
-
-      if kwargs.key?(:modal)
-        modal_name = (kwargs[:modal] == true) ? "default" : kwargs[:modal]
-        kwargs[:data] = kwargs.fetch(:data, {}).merge(coco_modal_data_attributes(modal_name))
-        kwargs.delete(:modal)
-      end
-
-      if kwargs.key?(:frame)
-        turbo_data = {turbo: true, turbo_frame: kwargs[:frame]}
-        kwargs[:data] = kwargs.fetch(:data, {}).merge(turbo_data)
-        kwargs.delete(:frame)
+    def coco_link(*args, **, &block)
+      href, content = if block
+        [args.first, nil]
+      else
+        (args.size == 1) ? [nil, args.first] : args[0..2].reverse!
       end
 
-      link = Coco::App::Elements::Link.new(href: href, **kwargs)
+      link = Coco::App::Elements::Link.new(href: href, **)
       link = link.with_content(content) if !block && content.present?
 
       render(link, &block)
     end
 
     def coco_button(*args, **kwargs, &block)
-      href, content = args[0..2].reverse!
+      href, content = if block
+        [args.first, nil]
+      else
+        (args.size == 1) ? [nil, args.first] : args[0..2].reverse!
+      end
 
       button = if kwargs.key?(:action) || kwargs.key?(:method) || kwargs.key?(:params)
         "ButtonTo"
@@ -30,20 +26,6 @@ module Coco
         "Button"
       end
 
-      kwargs[:button_element] ||= {}
-
-      if kwargs.key?(:modal)
-        modal_name = (kwargs[:modal] == true) ? "default" : kwargs[:modal]
-        kwargs[:button_element][:data] = kwargs[:button_element].fetch(:data, {}).merge(coco_modal_data_attributes(modal_name))
-        kwargs.delete(:modal)
-      end
-
-      if kwargs.key?(:frame)
-        turbo_data = {turbo: true, turbo_frame: kwargs[:frame]}
-        kwargs[:button_element][:data] = kwargs[:button_element].fetch(:data, {}).merge(turbo_data)
-        kwargs.delete(:frame)
-      end
-
       component = "Coco::App::Elements::#{button}".constantize.new(href: href, **kwargs)
       component = component.with_content(content) if !block && content.present?
 

data/app/helpers/coco/base_helper.rb

@@ -56,6 +56,8 @@ module Coco
     end
 
     def coco_modal_data_attributes(name = "default")
+      return {} if name.nil?
+
       {
         turbo: true,
         turbo_frame: coco_modal_frame_id(name)

data/app/helpers/coco/url_helper.rb

@@ -9,7 +9,11 @@ module Coco
 
       href = Coco::ActionViewHelper.url_target(name, options)
 
-      coco_link(name, href, **html_options.symbolize_keys!, &block)
+      if block
+        coco_link(href, **html_options.symbolize_keys!, &block)
+      else
+        coco_link(name, href, **html_options.symbolize_keys!)
+      end
     end
 
     def coco_button_to(name = nil, options = nil, html_options = nil, &block)

data/config/tailwind.base.config.cjs

@@ -26,6 +26,9 @@ module.exports = {
         spin: "spin 1.5s linear infinite",
         "spin-reverse": "spin 1.5s linear infinite reverse",
       },
+      width: {
+        18: "4.5rem",
+      },
       customForms: () => ({
         DEFAULT: {
           checkbox: {

data/config/tokens.cjs

@@ -136,6 +136,7 @@ const colorAliases = {
       DEFAULT: colors.green[500],
       dark: colors.green[600],
       inverse: colors.green[300],
+      "inverse-vivid": "#009979",
     },
     negative: {
       DEFAULT: colors.red[600],
@@ -168,6 +169,7 @@ const screens = {
   xl: "1200px",
   "2xl": "1400px",
   max: "1800px",
+  "small-landscape": { raw: "(max-height: 760px) and (min-width: 576px)" },
   print: { raw: "print" }, // Note: PDFs are rendered at a viewport width of 1280px
 };
 
@@ -177,6 +179,7 @@ const fontSize = {
   "para-md": ["16px", "24px"],
   "para-lg": ["18px", "27px"],
 
+  "label-xxs": ["10px", "12px"],
   "label-xs": ["12px", "14px"],
   "label-sm": ["14px", "16px"],
   "label-md": ["16px", "20px"],

data/lib/coco.rb

@@ -1,3 +1,3 @@
 module Coco
-  VERSION = "0.7.8"
+  VERSION = "0.7.10"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: coveragebook_components
 version: !ruby/object:Gem::Version
-  version: 0.7.8
+  version: 0.7.10
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-10-13 00:00:00.000000000 Z
+date: 2023-10-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -1323,6 +1323,7 @@ files:
 - app/assets/img/test/slides/slide-foreground-portrait.jpg
 - app/assets/js/app.js
 - app/assets/js/app/components.js
+- app/assets/js/app/setup.js
 - app/assets/js/base/components.js
 - app/assets/js/book.js
 - app/assets/js/book/components.js
@@ -1332,6 +1333,7 @@ files:
 - app/assets/js/helpers/dom.js
 - app/assets/js/helpers/file.js
 - app/assets/js/helpers/lang.js
+- app/assets/js/helpers/location.js
 - app/assets/js/helpers/path.js
 - app/assets/js/helpers/screenshot.js
 - app/assets/js/helpers/turbo_events.js