coveragebook_components 0.9.1 → 0.10.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 201cc10a1c0aa8649d80c72ff1e37f7b73eb77785451cab30fc4b3f0bb666900
-  data.tar.gz: e67c3da496a5b3a55feaf4750cda66f20ca825fb92aa8e94d47c313be7236fbd
+  metadata.gz: b8872e7a60fbb79859f877a3cd3de06216dace6160d04e09e0a9ce54fed30d49
+  data.tar.gz: fc562227556ca75b3dde25211f1a4d8742b085ce0317164e7085b5f9f997aec2
 SHA512:
-  metadata.gz: 1acd500aded11cd641e5478b788e2c8911cf2aea0e19b5d418eb3d6bc469d8f5876a09ad90a691e204892cc947b2b02aefda51809eb66ca5a6771d2d424fb559
-  data.tar.gz: 4f2bafaf1a89da669543de3feab4e240c0a76d710d575a9322daf6257f9a78be61b3623ac5b9cf988c857eb75b0428e600efe5d77f04887cfc06af397000a5e4
+  metadata.gz: 26ce2e732310bc88e304110e7d45ec2f27e5f40776e5c461251db4b673743fec294f9a8b91f6dcbbba028084aeeb0aafce8e6b9779ffa99be5dd69049c654eb8
+  data.tar.gz: 1dc4db593e2ef260943afb19f54a3d9ccf99d25d6499f3b0efcd40896a22c559ac903852065d2bfe5302e080672d7d4edf56a3bd8712d84a586046223bd3d978

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

@@ -707,13 +707,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))}
-[data-coco] h1,
-    [data-coco] h2,
-    [data-coco] h3,
-    [data-coco] h4,
-    [data-coco] h5,
-    [data-coco] h6{
-  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"}
 /*
    * Tippy dropdown theme
    */
@@ -1953,45 +1946,6 @@ select{
       [data-coco][data-component="app-sidebar-nav"] .nav-item-action [data-component="app-sidebar-nav-item"]{
     padding-bottom: 0.625rem}
     }
-[data-coco][data-component="app-slat"]{
-  padding-left: 0.75rem}
-@media (min-width: 576px){
-
-  [data-coco][data-component="app-slat"]{
-    padding-left: 1.5rem}}
-@media (min-width: 768px){
-
-  [data-coco][data-component="app-slat"]{
-    padding-left: 2rem}}
-@media (min-width: 992px){
-
-  [data-coco][data-component="app-slat"]{
-    padding-left: 2.5rem}}
-@media (min-width: 1200px){
-
-  [data-coco][data-component="app-slat"]{
-    padding-left: 2.75rem}}
-[data-coco][data-component="app-slat"]{
-  padding-right: 0.75rem}
-@media (min-width: 576px){
-
-  [data-coco][data-component="app-slat"]{
-    padding-right: 1.5rem}}
-@media (min-width: 768px){
-
-  [data-coco][data-component="app-slat"]{
-    padding-right: 2rem}}
-@media (min-width: 992px){
-
-  [data-coco][data-component="app-slat"]{
-    padding-right: 2.5rem}}
-@media (min-width: 1200px){
-
-  [data-coco][data-component="app-slat"]{
-    padding-right: 2.75rem}}
-[data-coco][data-component="app-slat"][data-padded="false"]{
-  padding-left: 0px;
-  padding-right: 0px}
 [data-coco][data-component="app-slide-editor"] .editor-toolbar{
   margin-bottom: 1rem}
 @media (min-width: 1200px){
@@ -2185,14 +2139,14 @@ select{
   padding-right: 1rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem}
-[data-coco][data-component="app-alert"] .alert-icon{
-  display: flex;
-  align-items: center;
-  border-radius: 9999px;
-  padding: 0.5rem}
-[data-coco][data-component="app-alert"] .alert-icon .coco-icon{
-  height: 1.25rem;
-  width: 1.25rem}
+/* 
+    .alert-icon {
+      @apply flex items-center p-2 rounded-full;
+
+      .coco-icon {
+        @apply w-5 h-5;
+      }
+    } */
 [data-coco][data-component="app-alert"] .alert-body{
   padding-left: 1rem;
   padding-right: 0.5rem}
@@ -2268,6 +2222,12 @@ select{
 
   [data-coco][data-component="app-alert"][data-banner="true"] .alert-body{
     width: auto}}
+[data-coco][data-component="app-alert"][data-banner="true"] .alert-stamp .coco-icon{
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity))}
+[data-coco][data-component="app-alert"][data-banner="true"][data-theme="warning-vivid"] .alert-stamp .coco-icon{
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity))}
 /* Dismissable */
 [data-coco][data-component="app-alert"][data-dismissable="true"] .alert-dismiss{
   flex: none}
@@ -2290,9 +2250,6 @@ select{
         padding-top: 0.375rem;
         padding-bottom: 0.375rem;
       }
-[data-coco][data-component="app-alert"][data-condensed="true"] .alert-icon{
-  background-color: transparent !important;
-  padding: 0px}
 [data-coco][data-component="app-alert"][data-condensed="true"] .alert-body{
   padding-left: 0.75rem}
 [data-coco][data-component="app-alert"][data-condensed="true"] .alert-title{
@@ -2331,7 +2288,7 @@ select{
 [data-coco][data-component="app-alert"][data-condensed="true"] .alert-container{
   padding-top: 0.75rem;
   padding-bottom: 0.75rem}
-[data-coco][data-component="app-alert"][data-condensed="true"] .coco-icon{
+[data-coco][data-component="app-alert"][data-condensed="true"] .coco-stamp{
   margin-top: 0.375rem}
 [data-coco][data-component="app-alert"][data-condensed="true"].with-title .alert-message{
   margin-top: 0px}
@@ -2344,7 +2301,7 @@ select{
   margin-left: auto}
 [data-coco][data-component="app-alert"]:not(.with-title):not(.with-action) .alert-container{
   align-items: center}
-[data-coco][data-component="app-alert"]:not(.with-title):not(.with-action) .alert-icon{
+[data-coco][data-component="app-alert"]:not(.with-title):not(.with-action) .alert-stamp{
   align-self: center}
 [data-coco][data-component="app-alert"]:not(.with-title):not(.with-action)[data-dismissable="true"] .alert-dismiss{
   position: absolute;
@@ -2358,7 +2315,7 @@ select{
     padding-top: 0.625rem;
     padding-bottom: 0.625rem}
 
-    [data-coco][data-component="app-alert"] .alert-icon{
+    [data-coco][data-component="app-alert"] .alert-stamp{
     align-self: center}
 
     [data-coco][data-component="app-alert"] .alert-body{
@@ -2379,7 +2336,7 @@ select{
     padding-top: 0.5rem;
     padding-bottom: 0.5rem}
 
-      [data-coco][data-component="app-alert"][data-condensed="true"] .coco-icon{
+      [data-coco][data-component="app-alert"][data-condensed="true"] .coco-stamp{
     margin-top: 0px}
 
       [data-coco][data-component="app-alert"][data-condensed="true"].with-title .alert-message{
@@ -2439,7 +2396,7 @@ select{
     padding-top: 0.625rem;
     padding-bottom: 0.625rem}
 
-    [data-coco][data-component="app-alert"][data-single-line="true"].force-multi-line .alert-icon{
+    [data-coco][data-component="app-alert"][data-single-line="true"].force-multi-line .alert-stamp{
     align-self: center}
 
     [data-coco][data-component="app-alert"][data-single-line="true"].force-multi-line .alert-body{
@@ -2460,7 +2417,7 @@ select{
     padding-top: 0.5rem;
     padding-bottom: 0.5rem}
 
-      [data-coco][data-component="app-alert"][data-single-line="true"].force-multi-line[data-condensed="true"] .coco-icon{
+      [data-coco][data-component="app-alert"][data-single-line="true"].force-multi-line[data-condensed="true"] .coco-stamp{
     margin-top: 0px}
 
       [data-coco][data-component="app-alert"][data-single-line="true"].force-multi-line[data-condensed="true"].with-title .alert-message{
@@ -2490,9 +2447,6 @@ select{
 [data-coco][data-component="app-alert"][data-theme*="vivid"] .alert-content{
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity))}
-[data-coco][data-component="app-alert"][data-theme*="vivid"] .alert-icon{
-  --tw-text-opacity: 1;
-  color: rgb(255 255 255 / var(--tw-text-opacity))}
 [data-coco][data-component="app-alert"][data-theme*="vivid"] .coco_link:not([data-theme]){
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity))}
@@ -2504,17 +2458,9 @@ select{
 [data-coco][data-component="app-alert"][data-theme="positive"]:hover{
   --tw-border-opacity: 1;
   border-color: rgb(72 160 141 / var(--tw-border-opacity))}
-[data-coco][data-component="app-alert"][data-theme="positive"] .alert-icon{
-  --tw-bg-opacity: 1;
-  background-color: rgb(163 207 197 / var(--tw-bg-opacity));
-  --tw-text-opacity: 1;
-  color: rgb(26 136 113 / var(--tw-text-opacity))}
 [data-coco][data-component="app-alert"][data-theme="positive-vivid"]{
   --tw-bg-opacity: 1;
   background-color: rgb(26 136 113 / var(--tw-bg-opacity))}
-[data-coco][data-component="app-alert"][data-theme="positive-vivid"] .alert-icon{
-  --tw-bg-opacity: 1;
-  background-color: rgb(13 97 89 / var(--tw-bg-opacity))}
 [data-coco][data-component="app-alert"][data-theme="warning"]{
   --tw-border-opacity: 1;
   border-color: rgb(252 211 77 / var(--tw-border-opacity));
@@ -2523,20 +2469,12 @@ select{
 [data-coco][data-component="app-alert"][data-theme="warning"]:hover{
   --tw-border-opacity: 1;
   border-color: rgb(251 191 36 / var(--tw-border-opacity))}
-[data-coco][data-component="app-alert"][data-theme="warning"] .alert-icon{
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 243 199 / var(--tw-bg-opacity));
-  --tw-text-opacity: 1;
-  color: rgb(217 119 6 / var(--tw-text-opacity))}
 [data-coco][data-component="app-alert"][data-theme="warning-vivid"]{
   --tw-bg-opacity: 1;
   background-color: rgb(245 158 11 / var(--tw-bg-opacity))}
 [data-coco][data-component="app-alert"][data-theme="warning-vivid"] .alert-content{
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity))}
-[data-coco][data-component="app-alert"][data-theme="warning-vivid"] .alert-icon{
-  --tw-bg-opacity: 1;
-  background-color: rgb(217 119 6 / var(--tw-bg-opacity))}
 [data-coco][data-component="app-alert"][data-theme="warning-vivid"] .coco-link:not([data-theme]){
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity))}
@@ -2548,17 +2486,9 @@ select{
 [data-coco][data-component="app-alert"][data-theme="negative"]:hover{
   --tw-border-opacity: 1;
   border-color: rgb(248 113 113 / var(--tw-border-opacity))}
-[data-coco][data-component="app-alert"][data-theme="negative"] .alert-icon{
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
-  --tw-text-opacity: 1;
-  color: rgb(220 38 38 / var(--tw-text-opacity))}
 [data-coco][data-component="app-alert"][data-theme="negative-vivid"]{
   --tw-bg-opacity: 1;
   background-color: rgb(220 38 38 / var(--tw-bg-opacity))}
-[data-coco][data-component="app-alert"][data-theme="negative-vivid"] .alert-icon{
-  --tw-bg-opacity: 1;
-  background-color: rgb(185 28 28 / var(--tw-bg-opacity))}
 [data-coco][data-component="app-alert"][data-theme="info"]{
   --tw-border-opacity: 1;
   border-color: rgb(125 211 252 / var(--tw-border-opacity));
@@ -2567,17 +2497,9 @@ select{
 [data-coco][data-component="app-alert"][data-theme="info"]:hover{
   --tw-border-opacity: 1;
   border-color: rgb(56 189 248 / var(--tw-border-opacity))}
-[data-coco][data-component="app-alert"][data-theme="info"] .alert-icon{
-  --tw-bg-opacity: 1;
-  background-color: rgb(186 230 253 / var(--tw-bg-opacity));
-  --tw-text-opacity: 1;
-  color: rgb(2 132 199 / var(--tw-text-opacity))}
 [data-coco][data-component="app-alert"][data-theme="info-vivid"]{
   --tw-bg-opacity: 1;
   background-color: rgb(2 132 199 / var(--tw-bg-opacity))}
-[data-coco][data-component="app-alert"][data-theme="info-vivid"] .alert-icon{
-  --tw-bg-opacity: 1;
-  background-color: rgb(3 105 161 / var(--tw-bg-opacity))}
 /* Themes */
 [data-coco][data-component="app-button"][data-theme]{
   overflow: hidden;
@@ -4491,6 +4413,102 @@ select{
   --tw-scale-y: .9;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   opacity: 0}
+[data-coco][data-component="app-stamp"]:not([data-style="compact"]){
+  position: relative;
+  border-radius: 9999px}
+[data-coco][data-component="app-stamp"]:not([data-style="compact"]) .coco-icon{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  --tw-translate-x: -50%;
+  --tw-translate-y: -50%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}
+/* Sizes */
+[data-coco][data-component="app-stamp"]:not([data-style="compact"])[data-size="xs"]{
+  height: 1.5rem;
+  width: 1.5rem}
+[data-coco][data-component="app-stamp"]:not([data-style="compact"])[data-size="sm"]{
+  height: 1.75rem;
+  width: 1.75rem}
+[data-coco][data-component="app-stamp"]:not([data-style="compact"])[data-size="md"]{
+  height: 2.25rem;
+  width: 2.25rem}
+[data-coco][data-component="app-stamp"]:not([data-style="compact"])[data-size="lg"]{
+  height: 2.75rem;
+  width: 2.75rem}
+/* Themes */
+[data-coco][data-component="app-stamp"][data-theme="positive"][data-style="subtle"]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(163 207 197 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(26 136 113 / var(--tw-text-opacity))}
+[data-coco][data-component="app-stamp"][data-theme="positive"][data-style="vivid"]{
+  --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))}
+[data-coco][data-component="app-stamp"][data-theme="positive"][data-style="inverse"]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(13 97 89 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity))}
+[data-coco][data-component="app-stamp"][data-theme="positive"][data-style="compact"]{
+  --tw-text-opacity: 1;
+  color: rgb(26 136 113 / var(--tw-text-opacity))}
+[data-coco][data-component="app-stamp"][data-theme="negative"][data-style="subtle"]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity))}
+[data-coco][data-component="app-stamp"][data-theme="negative"][data-style="vivid"]{
+  --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))}
+[data-coco][data-component="app-stamp"][data-theme="negative"][data-style="inverse"]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(185 28 28 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity))}
+[data-coco][data-component="app-stamp"][data-theme="negative"][data-style="compact"]{
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity))}
+[data-coco][data-component="app-stamp"][data-theme="warning"][data-style="subtle"]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 243 199 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(217 119 6 / var(--tw-text-opacity))}
+[data-coco][data-component="app-stamp"][data-theme="warning"][data-style="vivid"]{
+  --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))}
+[data-coco][data-component="app-stamp"][data-theme="warning"][data-style="inverse"]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(217 119 6 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity))}
+[data-coco][data-component="app-stamp"][data-theme="warning"][data-style="compact"]{
+  --tw-text-opacity: 1;
+  color: rgb(217 119 6 / var(--tw-text-opacity))}
+[data-coco][data-component="app-stamp"][data-theme="info"][data-style="subtle"]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(186 230 253 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(2 132 199 / var(--tw-text-opacity))}
+[data-coco][data-component="app-stamp"][data-theme="info"][data-style="vivid"]{
+  --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))}
+[data-coco][data-component="app-stamp"][data-theme="info"][data-style="inverse"]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(3 105 161 / var(--tw-bg-opacity));
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity))}
+[data-coco][data-component="app-stamp"][data-theme="info"][data-style="compact"]{
+  --tw-text-opacity: 1;
+  color: rgb(2 132 199 / var(--tw-text-opacity))}
 [data-coco][data-component="app-system-banner"] {
   }
 [data-coco][data-component="app-toast"]{
@@ -4610,6 +4628,8 @@ select{
   height: 100%;
   overflow-y: auto;
   scroll-behavior: smooth;
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
       grid-area: body}
 [data-coco][data-component="application-layout"] .layout-sidebar-nav{
   scroll-behavior: smooth;
@@ -4709,6 +4729,10 @@ select{
 
   [data-coco][data-component="page-layout"] .page-body{
     padding-right: 2.75rem}}
+[data-coco][data-component="page-layout"] .page-sections > :not([hidden]) ~ :not([hidden]){
+  --tw-space-y-reverse: 0;
+  margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(3rem * var(--tw-space-y-reverse))}
 [data-coco][data-component="page-layout"] .page-controls{
   position: fixed;
   top: 50%;
@@ -5172,6 +5196,7 @@ select{
   }
 .icon {
   }
+/* branded */
 .tippy-dropdown-box{
   border-radius: 0.5rem;
   border-width: 1px;
@@ -5303,8 +5328,6 @@ select{
 .app-alert-stacked[data-condensed="true"] .alert-container{
   padding-top: 0.75rem;
   padding-bottom: 0.75rem}
-.app-alert-stacked[data-condensed="true"] .coco-icon{
-  margin-top: 0.375rem}
 .app-alert-stacked[data-condensed="true"].with-title .alert-message{
   margin-top: 0px}
 .app-alert-stacked[data-dismissable="true"] .alert-container{
@@ -5316,7 +5339,7 @@ select{
   margin-left: auto}
 .app-alert-stacked:not(.with-title):not(.with-action) .alert-container{
   align-items: center}
-.app-alert-stacked:not(.with-title):not(.with-action) .alert-icon{
+.app-alert-stacked:not(.with-title):not(.with-action) .alert-stamp{
   align-self: center}
 .app-alert-stacked:not(.with-title):not(.with-action)[data-dismissable="true"] .alert-dismiss{
   position: absolute;
@@ -5328,7 +5351,7 @@ select{
   align-items: center;
   padding-top: 0.625rem;
   padding-bottom: 0.625rem}
-.app-alert-multi-line .alert-icon{
+.app-alert-multi-line .alert-stamp{
   align-self: center}
 .app-alert-multi-line .alert-body{
   display: flex;
@@ -5344,8 +5367,6 @@ select{
 .app-alert-multi-line[data-condensed="true"] .alert-container{
   padding-top: 0.5rem;
   padding-bottom: 0.5rem}
-.app-alert-multi-line[data-condensed="true"] .coco-icon{
-  margin-top: 0px}
 .app-alert-multi-line[data-condensed="true"].with-title .alert-message{
   margin-top: 0px}
 .app-alert-multi-line .alert-actions{

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

@@ -6178,11 +6178,15 @@
         "display-2": ["80px", "84px"],
         "display-3": ["64px", "68px"],
         "display-4": ["48px", "52px"],
-        "heading-1": ["48px", "50px"],
-        "heading-2": ["36px", "40px"],
-        "heading-3": ["30px", "36px"],
+        "relaxed-display-1": ["96px", "104px"],
+        "relaxed-display-2": ["80px", "88px"],
+        "relaxed-display-3": ["64px", "72px"],
+        "relaxed-display-4": ["48px", "56px"],
+        "heading-1": ["40px", "48px"],
+        "heading-2": ["32px", "40px"],
+        "heading-3": ["28px", "36px"],
         "heading-4": ["24px", "30px"],
-        "heading-5": ["20px", "25px"],
+        "heading-5": ["20px", "24px"],
         "heading-6": ["16px", "20px"],
         "subheading-1": ["32px", "40px"],
         "subheading-2": ["24px", "32px"],
@@ -14044,7 +14048,7 @@
   var package_default = {
     name: "coveragebook-components",
     type: "module",
-    version: "0.9.1",
+    version: "0.10.0",
     main: "index.js",
     repository: "git@github.com:coveragebook/coco.git",
     author: "Mark Perkins <mark@coveragebook.com>",
@@ -24376,7 +24380,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
           this.hide();
       },
       visit(url) {
-        navigateTo(url, { frame: this.frame.id });
+        navigateTo(url, { frame: this.frame.id, turbo: true });
       },
       scrollTo(pos) {
         setTimeout(() => {

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

@@ -743,14 +743,6 @@ select {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
-[data-coco] h1,
-    [data-coco] h2,
-    [data-coco] h3,
-    [data-coco] h4,
-    [data-coco] h5,
-    [data-coco] h6 {
-  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";
-}
 [data-coco][data-component="avatar"] {
   display: block;
   flex: none;
@@ -1978,6 +1970,7 @@ select {
   }
 .icon {
   }
+/* branded */
 .tippy-box[data-animation=fade][data-state=hidden]{opacity:0}
 [data-tippy-root]{max-width:calc(100vw - 10px)}
 .tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}

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

@@ -15598,7 +15598,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
           this.hide();
       },
       visit(url) {
-        navigateTo(url, { frame: this.frame.id });
+        navigateTo(url, { frame: this.frame.id, turbo: true });
       },
       scrollTo(pos) {
         setTimeout(() => {

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

@@ -5,6 +5,7 @@
 @import "../libs/tippy";
 @import "./utils/colors";
 @import "./utils/icons";
+@import "./utils/text";
 @import "./components/tooltip";
 @import "./components/dropdown";
 @import "./components/coco";

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

@@ -1,14 +1,5 @@
 @layer components {
   [data-coco] {
     @apply text-content-dark-1 font-body;
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      @apply font-display;
-    }
   }
 }

data/app/assets/css/base/utils/text.css

@@ -0,0 +1,79 @@
+@layer utilities {
+  .coco-heading-1 {
+    @apply font-body text-heading-1;
+  }
+
+  .coco-heading-2 {
+    @apply font-body text-heading-2;
+  }
+
+  .coco-heading-3 {
+    @apply font-body text-heading-3;
+  }
+
+  .coco-heading-4 {
+    @apply font-body text-heading-4;
+  }
+
+  .coco-heading-5 {
+    @apply font-body text-heading-5;
+  }
+
+  .coco-heading-6 {
+    @apply font-body text-heading-6;
+  }
+
+  .coco-display-1 {
+    @apply font-display text-display-1;
+  }
+
+  .coco-display-2 {
+    @apply font-display text-display-2;
+  }
+
+  .coco-display-3 {
+    @apply font-display text-display-3;
+  }
+
+  .coco-display-4 {
+    @apply font-display text-display-4;
+  }
+
+  /* branded */
+
+  .coco-branded-heading-1 {
+    @apply font-branded text-heading-1;
+  }
+
+  .coco-branded-heading-2 {
+    @apply font-branded text-heading-2;
+  }
+
+  .coco-branded-heading-3 {
+    @apply font-branded text-heading-3;
+  }
+
+  .coco-branded-heading-4 {
+    @apply font-branded text-heading-4;
+  }
+
+  .coco-branded-heading-5 {
+    @apply font-branded text-heading-5;
+  }
+
+  .coco-branded-display-1 {
+    @apply font-branded text-relaxed-display-1;
+  }
+
+  .coco-branded-display-2 {
+    @apply font-branded text-relaxed-display-2;
+  }
+
+  .coco-branded-display-3 {
+    @apply font-branded text-relaxed-display-3;
+  }
+
+  .coco-branded-display-4 {
+    @apply font-branded text-relaxed-display-4;
+  }
+}

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

@@ -5,14 +5,14 @@
     .alert-container {
       @apply flex items-start px-4 py-2 relative;
     }
-
+    /* 
     .alert-icon {
       @apply flex items-center p-2 rounded-full;
 
       .coco-icon {
         @apply w-5 h-5;
       }
-    }
+    } */
 
     .alert-body {
       @apply pl-4 pr-2;
@@ -58,6 +58,14 @@
       .alert-body {
         @apply @[1000px]:w-auto;
       }
+
+      .alert-stamp .coco-icon {
+        @apply text-content-light-1;
+      }
+
+      &[data-theme="warning-vivid"] .alert-stamp .coco-icon {
+        @apply text-content-dark-1;
+      }
     }
 
     /* Dismissable */
@@ -80,10 +88,6 @@
         @apply py-1.5;
       }
 
-      .alert-icon {
-        @apply p-0 !bg-transparent;
-      }
-
       .alert-body {
         @apply pl-3;
       }
@@ -122,10 +126,6 @@
         @apply text-content-light-1;
       }
 
-      .alert-icon {
-        @apply text-content-light-1;
-      }
-
       .coco_link:not([data-theme]) {
         @apply app-link-neutral-light;
       }
@@ -133,26 +133,14 @@
 
     &[data-theme="positive"] {
       @apply bg-background-positive-light border-positive-300 hover:border-positive-400;
-
-      .alert-icon {
-        @apply text-content-positive bg-positive-200;
-      }
     }
 
     &[data-theme="positive-vivid"] {
       @apply bg-background-positive;
-
-      .alert-icon {
-        @apply bg-positive-700;
-      }
     }
 
     &[data-theme="warning"] {
       @apply bg-background-warning-light border-warning-300  hover:border-warning-400;
-
-      .alert-icon {
-        @apply text-content-warning bg-warning-100;
-      }
     }
 
     &[data-theme="warning-vivid"] {
@@ -162,10 +150,6 @@
         @apply text-content-dark-1;
       }
 
-      .alert-icon {
-        @apply bg-warning-600;
-      }
-
       .coco-link:not([data-theme]) {
         @apply app-link-neutral-dark;
       }
@@ -173,34 +157,18 @@
 
     &[data-theme="negative"] {
       @apply bg-background-negative-light border-negative-300 hover:border-negative-400;
-
-      .alert-icon {
-        @apply text-content-negative bg-negative-200;
-      }
     }
 
     &[data-theme="negative-vivid"] {
       @apply bg-background-negative;
-
-      .alert-icon {
-        @apply bg-negative-700;
-      }
     }
 
     &[data-theme="info"] {
       @apply bg-background-info-light border-info-300 hover:border-info-400;
-
-      .alert-icon {
-        @apply text-content-info bg-info-200;
-      }
     }
 
     &[data-theme="info-vivid"] {
       @apply bg-background-info;
-
-      .alert-icon {
-        @apply bg-info-700;
-      }
     }
   }
 }
@@ -224,7 +192,7 @@
         @apply py-3;
       }
 
-      .coco-icon {
+      .coco-stamp {
         @apply mt-1.5;
       }
 
@@ -249,7 +217,7 @@
           @apply items-center;
         }
 
-        .alert-icon {
+        .alert-stamp {
           @apply self-center;
         }
 
@@ -267,7 +235,7 @@
       @apply items-center py-2.5;
     }
 
-    .alert-icon {
+    .alert-stamp {
       @apply self-center;
     }
 
@@ -292,7 +260,7 @@
         @apply py-2;
       }
 
-      .coco-icon {
+      .coco-stamp {
         @apply mt-0;
       }
 

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

@@ -9,8 +9,8 @@
   "vivid": vivid?
 }) do %>
   <div class="alert-container">
-    <div class="alert-icon" data-role="icon">
-      <%= icon %>  
+    <div class="alert-stamp" data-role="icon">
+      <%= stamp %>
     </div>
     
     <div class="alert-body">

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

@@ -2,22 +2,11 @@ module Coco
   module App
     module Elements
       class Alert < Coco::Component
-        include Concerns::WithIcon
+        include Concerns::AcceptsOptions
         include Concerns::AcceptsTheme
 
         THEMES = %W[positive warning negative info positive-vivid warning-vivid negative-vivid info-vivid]
 
-        THEME_ICONS = {
-          positive: :check_circle,
-          positive_vivid: :check_circle,
-          warning: :alert_triangle,
-          warning_vivid: :alert_triangle,
-          negative: :alert_circle,
-          negative_vivid: :alert_circle,
-          info: :info,
-          info_vivid: :info
-        }.freeze
-
         accepts_option :dismissable, from: [true, false], default: false
         accepts_option :dismiss_after_action, from: [true, false], default: true
         accepts_option :banner, from: [true, false], default: false
@@ -45,13 +34,9 @@ module Coco
         end
 
         before_render do
-          theme = get_option_value(:theme)
-
           unless tag_attr?(:id)
             set_tag_attr(:id, "alert-#{rand(1000)}")
           end
-
-          icon(name: THEME_ICONS[theme.tr("-", "_").to_sym])
         end
 
         def dismissable?
@@ -78,6 +63,16 @@ module Coco
         def button_size
           get_option_value(:condensed) ? :xs : :sm
         end
+
+        def stamp
+          type = unvividify(get_option_value(:theme))&.to_sym
+          style = if get_option_value(:banner)
+            :compact
+          else
+            vivid? ? :inverse : :subtle
+          end
+          coco_stamp(type, style:)
+        end
       end
     end
   end

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

@@ -0,0 +1,103 @@
+@layer components {
+  [data-coco][data-component="app-stamp"] {
+    &:not([data-style="compact"]) {
+      @apply rounded-full relative;
+
+      .coco-icon {
+        @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
+      }
+
+      /* Sizes */
+
+      &[data-size="xs"] {
+        @apply w-6 h-6;
+      }
+
+      &[data-size="sm"] {
+        @apply w-7 h-7;
+      }
+
+      &[data-size="md"] {
+        @apply w-9 h-9;
+      }
+
+      &[data-size="lg"] {
+        @apply w-11 h-11;
+      }
+    }
+
+    /* Themes */
+
+    &[data-theme="positive"] {
+      &[data-style="subtle"] {
+        @apply bg-green-200 text-content-positive;
+      }
+
+      &[data-style="vivid"] {
+        @apply bg-background-positive text-content-light-1;
+      }
+
+      &[data-style="inverse"] {
+        @apply bg-green-700 text-content-light-1;
+      }
+
+      &[data-style="compact"] {
+        @apply text-content-positive;
+      }
+    }
+
+    &[data-theme="negative"] {
+      &[data-style="subtle"] {
+        @apply bg-red-200 text-content-negative;
+      }
+
+      &[data-style="vivid"] {
+        @apply bg-background-negative text-content-light-1;
+      }
+
+      &[data-style="inverse"] {
+        @apply bg-red-700 text-content-light-1;
+      }
+
+      &[data-style="compact"] {
+        @apply text-content-negative;
+      }
+    }
+
+    &[data-theme="warning"] {
+      &[data-style="subtle"] {
+        @apply bg-amber-100 text-content-warning;
+      }
+
+      &[data-style="vivid"] {
+        @apply bg-background-warning text-content-light-1;
+      }
+
+      &[data-style="inverse"] {
+        @apply bg-amber-600 text-content-light-1;
+      }
+
+      &[data-style="compact"] {
+        @apply text-content-warning;
+      }
+    }
+
+    &[data-theme="info"] {
+      &[data-style="subtle"] {
+        @apply bg-blue-200 text-content-info;
+      }
+
+      &[data-style="vivid"] {
+        @apply bg-background-info text-content-light-1;
+      }
+
+      &[data-style="inverse"] {
+        @apply bg-blue-700 text-content-light-1;
+      }
+
+      &[data-style="compact"] {
+        @apply text-content-info;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,3 @@
+<%= render component_tag do %>
+  <%= coco_icon(icon_name, size: get_option_value(:size)) %>
+<% end %>

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

@@ -0,0 +1,29 @@
+module Coco
+  module App
+    module Elements
+      class Stamp < Coco::Component
+        include Concerns::AcceptsOptions
+        include Concerns::AcceptsTheme
+
+        THEMES = [
+          "positive",
+          "negative",
+          "warning",
+          "info"
+        ]
+
+        DEFAULT_THEME = "info"
+
+        accepts_option :size, from: %i[xs sm md lg], default: :md
+        accepts_option :style, from: %i[subtle vivid inverse compact], default: :subtle
+        accepts_option :theme, from: THEMES, default: DEFAULT_THEME
+
+        attr_reader :icon_name
+
+        def initialize(icon:, **kwargs)
+          @icon_name = icon
+        end
+      end
+    end
+  end
+end

data/app/components/coco/app/layouts/application/application.css

@@ -52,7 +52,7 @@
     }
 
     .layout-body {
-      @apply relative z-0 h-full overflow-y-auto scroll-smooth;
+      @apply relative z-0 h-full overflow-y-auto scroll-smooth bg-background-light-2;
       grid-area: body;
     }
 

data/app/components/coco/app/layouts/page/page.css

@@ -4,6 +4,10 @@
       @apply pt-12 pb-12 px-app w-full;
     }
 
+    .page-sections {
+      @apply space-y-12;
+    }
+
     .page-controls {
       @apply fixed top-1/2 -translate-y-1/2 right-0 flex justify-between;
 

data/app/components/coco/app/layouts/page/page.html.erb

@@ -6,6 +6,11 @@
   <% end %>
   <div class="page-body" data-role="page-body">
     <div class="page-body-content">
+      <% if sections? %>
+        <div class="page-sections">
+          <%= safe_join(sections) %>
+        </div>  
+      <% end %>
       <%= content %>
     </div>
   </div>

data/app/components/coco/app/layouts/page/page.rb

@@ -11,6 +11,10 @@ module Coco
         renders_one :header
         renders_many :hidden_sections
 
+        renders_many :sections, ->(**kwargs, &block) do
+          coco_tag(:section, **kwargs, &block)
+        end
+
         renders_one :previous_link, ->(**kwargs) do
           Coco::PagerLink.new(**kwargs, direction: :previous, class: "page-control-previous")
         end

data/app/components/coco/base/modal/modal.html.erb

@@ -24,11 +24,11 @@
 <% else %>
   <div data-role="inline-modal-content">
     <% if container_type == :dialog %>
-      <%= render Coco::ModalDialog.new(title: title.to_s, dismissable: false) do %>
+      <%= render Coco::ModalDialog.new(id: @container_id, title: title.to_s, dismissable: false) do %>
         <%= content %>
       <% end %>
     <% else %>
-      <%= coco_panel do %>
+      <%= coco_panel(id: @container_id) do %>
         <%= content %>
       <% end %>
     <% end %>

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

@@ -40,7 +40,7 @@ export default CocoComponent("modal", () => {
     },
 
     visit(url) {
-      navigateTo(url, { frame: this.frame.id });
+      navigateTo(url, { frame: this.frame.id, turbo: true });
     },
 
     scrollTo(pos) {

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

@@ -9,15 +9,17 @@ module Coco
     renders_one :title
 
     renders_one :container, types: {
-      dialog: ->(**kwargs, &block) do
+      dialog: ->(id: nil, **kwargs, &block) do
         @container_content = block
+        @container_id = id
         @container_type = :dialog
-        Coco::ModalDialog.new(dismissable: get_option_value(:dismissable), **kwargs)
+        Coco::ModalDialog.new(dismissable: get_option_value(:dismissable), id:, **kwargs)
       end,
 
-      lightbox: ->(**kwargs, &block) do
+      lightbox: ->(id: nil, **kwargs, &block) do
         @container_type = :lightbox
-        Coco::ModalLightbox.new(dismissable: get_option_value(:dismissable), **kwargs)
+        @container_id = id
+        Coco::ModalLightbox.new(dismissable: get_option_value(:dismissable), id:, **kwargs)
       end
     }
 

data/app/components/coco/base/placeholder/placeholder.html.erb

@@ -1,7 +1,7 @@
 <%= render component_tag do %>
   <div class="placeholder-inner">
     <div class="placeholder-content">
-      <%= content %>
+      <%= text_content || content %>
     </div>
   </div>
 <% end %>

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

@@ -5,5 +5,11 @@ module Coco
     accepts_option :size, from: [:auto, :full], default: :auto
     accepts_option :prose, from: [true, false], default: false
     accepts_option :boxed, from: [true, false], default: true
+
+    attr_reader :text_content
+
+    def initialize(text_content: nil, **)
+      @text_content = text_content
+    end
   end
 end

data/app/helpers/coco/app_helper.rb

@@ -68,6 +68,23 @@ module Coco
       render Coco::App::Elements::SeamlessTextarea.new(**), &block
     end
 
+    def coco_stamp(type = nil, **)
+      props = case type
+      when :success, :positive
+        {icon: :check_circle, theme: :positive}
+      when :error, :negative
+        {icon: :alert_circle, theme: :negative}
+      when :warning
+        {icon: :alert_triangle, theme: :warning}
+      when :info
+        {icon: :info, theme: :info}
+      else
+        {}
+      end
+
+      render Coco::App::Elements::Stamp.new(**props, **)
+    end
+
     def coco_snackbar(**, &block)
       render Coco::App::Elements::Snackbar.new(**), &block
     end

data/app/helpers/coco/base_helper.rb

@@ -29,8 +29,8 @@ module Coco
       end
     end
 
-    def coco_placeholder(*, **, &block)
-      render Coco::Placeholder.new(*, **), &block
+    def coco_placeholder(text_content = nil, **, &block)
+      render Coco::Placeholder.new(text_content:, **), &block
     end
 
     def coco_modal(name = "default", **, &block)

data/config/tailwind.app.config.cjs

@@ -12,7 +12,7 @@ module.exports = merge(baseConfig, {
     fontFamily: {
       display: [fontFamily.displaySans, ...defaultTheme.fontFamily.sans],
       body: [fontFamily.bodySans, ...defaultTheme.fontFamily.sans],
-      serif: [fontFamily.displaySerif, ...defaultTheme.fontFamily.serif],
+      branded: [fontFamily.displaySerif, ...defaultTheme.fontFamily.serif],
     },
     extend: {
       fontSize,

data/config/tailwind.book.config.cjs

@@ -12,6 +12,7 @@ module.exports = merge(baseConfig, {
     fontFamily: {
       display: [fontFamily.displaySans, ...defaultTheme.fontFamily.sans],
       body: [fontFamily.bodySans, ...defaultTheme.fontFamily.sans],
+      branded: [fontFamily.displaySerif, ...defaultTheme.fontFamily.serif],
     },
     extend: {
       fontSize,

data/config/tokens.cjs

@@ -199,11 +199,16 @@ const fontSize = {
   "display-3": ["64px", "68px"],
   "display-4": ["48px", "52px"],
 
-  "heading-1": ["48px", "50px"],
-  "heading-2": ["36px", "40px"],
-  "heading-3": ["30px", "36px"],
+  "relaxed-display-1": ["96px", "104px"],
+  "relaxed-display-2": ["80px", "88px"],
+  "relaxed-display-3": ["64px", "72px"],
+  "relaxed-display-4": ["48px", "56px"],
+
+  "heading-1": ["40px", "48px"],
+  "heading-2": ["32px", "40px"],
+  "heading-3": ["28px", "36px"],
   "heading-4": ["24px", "30px"],
-  "heading-5": ["20px", "25px"],
+  "heading-5": ["20px", "24px"],
   "heading-6": ["16px", "20px"],
 
   "subheading-1": ["32px", "40px"],

data/lib/coco/engine.rb

@@ -30,8 +30,10 @@ module Coco
         end
       end
 
-      Rails.application.config.to_prepare do
-        Rails.autoloaders.main.eager_load_dir(coco_dir)
+      if Rails.env.production?
+        Rails.application.config.to_prepare do
+          Rails.autoloaders.main.eager_load_dir(coco_dir)
+        end
       end
     end
 

data/lib/coco.rb

@@ -1,3 +1,3 @@
 module Coco
-  VERSION = "0.9.1"
+  VERSION = "0.10.0"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: coveragebook_components
 version: !ruby/object:Gem::Version
-  version: 0.9.1
+  version: 0.10.0
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-11-22 00:00:00.000000000 Z
+date: 2023-11-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -1423,6 +1423,7 @@ files:
 - app/assets/css/base/components/tooltip.css
 - app/assets/css/base/utils/colors.css
 - app/assets/css/base/utils/icons.css
+- app/assets/css/base/utils/text.css
 - app/assets/css/book.css
 - app/assets/css/book/config.css
 - app/assets/css/libs/tippy.css
@@ -1492,8 +1493,6 @@ files:
 - app/components/coco/app/blocks/sidebar_nav/navbar/navbar.html.erb
 - app/components/coco/app/blocks/sidebar_nav/navbar/navbar.js
 - app/components/coco/app/blocks/sidebar_nav/navbar/navbar.rb
-- app/components/coco/app/blocks/slat/slat.css
-- app/components/coco/app/blocks/slat/slat.rb
 - app/components/coco/app/blocks/slide_editor/slide_editor.css
 - app/components/coco/app/blocks/slide_editor/slide_editor.html.erb
 - app/components/coco/app/blocks/slide_editor/slide_editor.js
@@ -1559,6 +1558,9 @@ files:
 - app/components/coco/app/elements/snackbar/snackbar.html.erb
 - app/components/coco/app/elements/snackbar/snackbar.js
 - app/components/coco/app/elements/snackbar/snackbar.rb
+- app/components/coco/app/elements/stamp/stamp.css
+- app/components/coco/app/elements/stamp/stamp.html.erb
+- app/components/coco/app/elements/stamp/stamp.rb
 - app/components/coco/app/elements/system_banner/system_banner.css
 - app/components/coco/app/elements/system_banner/system_banner.html.erb
 - app/components/coco/app/elements/system_banner/system_banner.js

data/app/components/coco/app/blocks/slat/slat.css

@@ -1,9 +0,0 @@
-@layer components {
-  [data-coco][data-component="app-slat"] {
-    @apply px-app;
-
-    &[data-padded="false"] {
-      @apply px-0;
-    }
-  }
-}

data/app/components/coco/app/blocks/slat/slat.rb

@@ -1,13 +0,0 @@
-# frozen_string_literal: true
-
-module Coco
-  module App
-    module Blocks
-      class Slat < Coco::Component
-        include Concerns::AcceptsOptions
-
-        accepts_option :padded, from: [true, false]
-      end
-    end
-  end
-end