coveragebook_components 0.8.0.beta.1 → 0.8.0.beta.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a013cd6c2aecad579366f519d7e5d2a00c09ff8422f0ac70f8a113aa9a84b9fe
-  data.tar.gz: f1bf079ae995e7e96f7610555b1ccc2f283646a667f96c9e3901e18baef87126
+  metadata.gz: b89e4f8770587065a0d3967f7f767ff9b420e36e30abf97c3dc72bcf3bc41d34
+  data.tar.gz: 70662dbab01723243b282c24ea050f697f639044acf91157648945dfe52b9a1e
 SHA512:
-  metadata.gz: 64b3b4bdd432b07bb48a933672b24c95d85c1ff1b382b58ce818d5f84a02c33785f5f733d748076b3a7c916c80c634a3a185b45d82c86fd54c57ef919228010f
-  data.tar.gz: ba2ca6e54d36e0eb0c4ebf0b334855c20d20de5c31ec3fa207259893ebcabcbb8f43e8671d50e0cb197df9e66aa70091b803ecab8e09bf8dbedded01093723a6
+  metadata.gz: eb05436465f98461bbbb58148fe1519e7e0b4bf2981328d0d16aa4a05312aa2755ee24f07de5a4137d138fd42ba0fa002cc4320cae9a687f29421848b9d651f6
+  data.tar.gz: 6dbc15f4ab52cf871137891789fed68a544ed90b824f11381b84559de0c4be3fb49129337a8a744f8c43d444fa23f0da2cba2b82605e29596640019aa698210b

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

@@ -1273,10 +1273,6 @@ select{
   --tw-translate-x: 0.5rem;
   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));
   align-items: center}
-@container (min-width: 56rem){
-
-  [data-coco][data-component="app-header"] .header-mobile-controls{
-    display: none}}
 @media (min-width: 576px){
 
   [data-coco][data-component="app-header"] .header-mobile-controls{
@@ -1287,9 +1283,16 @@ select{
   [data-coco][data-component="app-header"] .header-mobile-controls{
     --tw-translate-x: 1.5rem;
     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))}}
+@media (min-width: 992px){
+
+  [data-coco][data-component="app-header"] .header-mobile-controls{
+    display: none}}
+[data-coco][data-component="app-header"] .coco-button[data-variant="highlighted"]{
+  --tw-text-opacity: 1;
+  color: rgb(252 211 77 / var(--tw-text-opacity))}
 [data-coco][data-component="app-header"].with-nav-drawer .header-link-group{
   display: none}
-@container (min-width: 56rem){
+@media (min-width: 992px){
 
   [data-coco][data-component="app-header"].with-nav-drawer .header-link-group{
     display: flex}}
@@ -1450,7 +1453,7 @@ select{
       [data-coco][data-component="app-sidebar-nav"] .nav-actions-button .coco-icon{
     height: 2rem;
     width: 2rem}}
-@media (min-width: 768px) {
+@media (min-width: 992px) {
 
   [data-coco][data-component="app-sidebar-nav"]{
     display: block;
@@ -1598,7 +1601,7 @@ select{
     --tw-bg-opacity: 1;
     background-color: rgb(55 65 81 / var(--tw-bg-opacity))}
     }
-@media (min-width: 768px) {
+@media (min-width: 992px) {
 
   [data-coco][data-component="app-sidebar-nav-item"]{
     padding-top: 1.25rem;
@@ -1750,7 +1753,7 @@ select{
     line-height: 1.25rem;
       width: 240px}
     }
-@media (min-width: 768px) {
+@media (min-width: 992px) {
     .sidebar-nav-menu .sidebar-nav-menu-select{
     font-size: 1rem;
     line-height: 1.5rem}
@@ -2102,17 +2105,42 @@ select{
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity))}
 /* Condensed */
-[data-coco][data-component="app-alert"][data-condensed="true"] .alert-icon .coco-icon{
-  height: 1rem;
-  width: 1rem}
+[data-coco][data-component="app-alert"][data-condensed="true"] .alert-container {
+        min-height: 3rem;
+        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{
-  font-size: 14px;
-  line-height: 20px}
+  font-size: 16px;
+  line-height: 24px}
+@media (min-width: 576px){
+
+  [data-coco][data-component="app-alert"][data-condensed="true"] .alert-title{
+    font-size: 14px;
+    line-height: 20px}}
+@media (min-width: 1200px){
+
+  [data-coco][data-component="app-alert"][data-condensed="true"] .alert-title{
+    font-size: 16px;
+    line-height: 24px}}
 [data-coco][data-component="app-alert"][data-condensed="true"] .alert-message{
-  font-size: 14px;
-  line-height: 20px}
+  font-size: 16px;
+  line-height: 24px}
+@media (min-width: 576px){
+
+  [data-coco][data-component="app-alert"][data-condensed="true"] .alert-message{
+    font-size: 14px;
+    line-height: 20px}}
+@media (min-width: 1200px){
+
+  [data-coco][data-component="app-alert"][data-condensed="true"] .alert-message{
+    font-size: 16px;
+    line-height: 24px}}
 [data-coco][data-component="app-alert"] .alert-container{
   padding-top: 1rem;
   padding-bottom: 1rem}
@@ -2120,6 +2148,13 @@ select{
   margin-top: 0.75rem}
 [data-coco][data-component="app-alert"].with-title .alert-message{
   margin-top: 0.25rem}
+[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{
+  margin-top: 0.375rem}
+[data-coco][data-component="app-alert"][data-condensed="true"].with-title .alert-message{
+  margin-top: 0px}
 [data-coco][data-component="app-alert"][data-dismissable="true"] .alert-container{
   padding-right: 3rem}
 [data-coco][data-component="app-alert"][data-dismissable="true"] .alert-dismiss{
@@ -2127,6 +2162,16 @@ select{
   top: 0.5rem;
   right: 0.5rem;
   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{
+  align-self: center}
+[data-coco][data-component="app-alert"]:not(.with-title):not(.with-action)[data-dismissable="true"] .alert-dismiss{
+  position: absolute;
+  right: 0.75rem;
+  top: 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))}
 @container (min-width: 576px){
     [data-coco][data-component="app-alert"] .alert-container{
     align-items: center;
@@ -2150,15 +2195,21 @@ select{
 
     [data-coco][data-component="app-alert"].with-title .alert-message{
     margin-top: 0.25rem}
+      [data-coco][data-component="app-alert"][data-condensed="true"] .alert-container{
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem}
 
-    [data-coco][data-component="app-alert"][data-condensed="true"].with-title .alert-message{
-    margin-top: 0.125rem}
+      [data-coco][data-component="app-alert"][data-condensed="true"] .coco-icon{
+    margin-top: 0px}
+
+      [data-coco][data-component="app-alert"][data-condensed="true"].with-title .alert-message{
+    margin-top: 0px}
 
     [data-coco][data-component="app-alert"] .alert-actions{
     margin-top: 0px;
     margin-left: auto}
       [data-coco][data-component="app-alert"][data-dismissable="true"] .alert-body{
-    padding-right: 2.5rem}
+    padding-right: 0.5rem}
 
       [data-coco][data-component="app-alert"][data-dismissable="true"] .alert-dismiss{
     position: absolute;
@@ -2169,8 +2220,8 @@ select{
 /* Layout */
 @container (min-width: 1000px){
     [data-coco][data-component="app-alert"][data-single-line="true"]:not(.force-multi-line) .alert-container{
-    padding-top: 0.75rem;
-    padding-bottom: 0.75rem}
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem}
 
     [data-coco][data-component="app-alert"][data-single-line="true"]:not(.force-multi-line) .alert-content{
     display: flex;
@@ -2190,13 +2241,16 @@ select{
 
     [data-coco][data-component="app-alert"][data-single-line="true"]:not(.force-multi-line) .alert-link{
     display: none}
+      [data-coco][data-component="app-alert"][data-single-line="true"]:not(.force-multi-line)[data-dismissable="true"] .alert-body{
+    padding-right: 0.5rem}
+
       [data-coco][data-component="app-alert"][data-single-line="true"]:not(.force-multi-line)[data-dismissable="true"] .alert-container{
     padding-left: 3rem;
     padding-right: 3rem}
 
       [data-coco][data-component="app-alert"][data-single-line="true"]:not(.force-multi-line)[data-dismissable="true"] .alert-dismiss{
     position: absolute;
-    right: 21px;
+    right: 0.75rem;
     top: 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))}
@@ -2222,15 +2276,21 @@ select{
 
     [data-coco][data-component="app-alert"][data-single-line="true"].force-multi-line.with-title .alert-message{
     margin-top: 0.25rem}
+      [data-coco][data-component="app-alert"][data-single-line="true"].force-multi-line[data-condensed="true"] .alert-container{
+    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{
+    margin-top: 0px}
 
-    [data-coco][data-component="app-alert"][data-single-line="true"].force-multi-line[data-condensed="true"].with-title .alert-message{
-    margin-top: 0.125rem}
+      [data-coco][data-component="app-alert"][data-single-line="true"].force-multi-line[data-condensed="true"].with-title .alert-message{
+    margin-top: 0px}
 
     [data-coco][data-component="app-alert"][data-single-line="true"].force-multi-line .alert-actions{
     margin-top: 0px;
     margin-left: auto}
       [data-coco][data-component="app-alert"][data-single-line="true"].force-multi-line[data-dismissable="true"] .alert-body{
-    padding-right: 2.5rem}
+    padding-right: 0.5rem}
 
       [data-coco][data-component="app-alert"][data-single-line="true"].force-multi-line[data-dismissable="true"] .alert-dismiss{
     position: absolute;
@@ -2670,9 +2730,10 @@ select{
 [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="xs"] .button-content{
-  font-size: 12px;
-  line-height: 14px}
+[data-coco][data-component="app-button"][data-size="xs"] .button-content {
+      font-size: 14px;
+      line-height: 14px;
+    }
 [data-coco][data-component="app-button"][data-size="xs"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size="xs"] .button-toggle{
   height: 0.875rem;
   width: 0.875rem}
@@ -2681,12 +2742,12 @@ select{
   padding-bottom: 0.5rem;
   padding-left: 0.75rem;
   padding-right: 0.75rem}
-[data-coco][data-component="app-button"][data-size="xs"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size="xs"][data-theme][data-collapsed="true"] > .button-element .button-icon{
-  margin-left: -0.375rem;
-  margin-right: -0.375rem}
+[data-coco][data-component="app-button"][data-size="xs"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size="xs"][data-collapsed="true"] > .button-element .button-icon{
+  margin-left: -0.25rem;
+  margin-right: -0.25rem}
 [data-coco][data-component="app-button"][data-size="xs"][data-theme|="text"] .button-element{
-  padding-left: 0.25rem;
-  padding-right: 0.25rem}
+  padding-left: 0.5rem;
+  padding-right: 0.5rem}
 [data-coco][data-component="app-button"][data-size="xs"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size="xs"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
   padding-left: 0.5rem;
   padding-right: 0.5rem}
@@ -2751,9 +2812,10 @@ select{
   padding-left: 0.75rem;
   padding-right: 0.75rem}
 @media (min-width: 768px) {
-    [data-coco][data-component="app-button"][data-size-md="xs"] .button-content{
-    font-size: 12px;
-    line-height: 14px}
+    [data-coco][data-component="app-button"][data-size-md="xs"] .button-content {
+      font-size: 14px;
+      line-height: 14px;
+    }
 
     [data-coco][data-component="app-button"][data-size-md="xs"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-md="xs"] .button-toggle{
     height: 0.875rem;
@@ -2764,12 +2826,12 @@ select{
     padding-left: 0.75rem;
     padding-right: 0.75rem}
 
-      [data-coco][data-component="app-button"][data-size-md="xs"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-md="xs"][data-theme][data-collapsed="true"] > .button-element .button-icon{
-    margin-left: -0.375rem;
-    margin-right: -0.375rem}
+    [data-coco][data-component="app-button"][data-size-md="xs"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-md="xs"][data-collapsed="true"] > .button-element .button-icon{
+    margin-left: -0.25rem;
+    margin-right: -0.25rem}
       [data-coco][data-component="app-button"][data-size-md="xs"][data-theme|="text"] .button-element{
-    padding-left: 0.25rem;
-    padding-right: 0.25rem}
+    padding-left: 0.5rem;
+    padding-right: 0.5rem}
 
       [data-coco][data-component="app-button"][data-size-md="xs"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-md="xs"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
     padding-left: 0.5rem;
@@ -2845,9 +2907,10 @@ select{
     padding-right: 0.75rem}
     }
 @media (min-width: 992px) {
-    [data-coco][data-component="app-button"][data-size-lg="xs"] .button-content{
-    font-size: 12px;
-    line-height: 14px}
+    [data-coco][data-component="app-button"][data-size-lg="xs"] .button-content {
+      font-size: 14px;
+      line-height: 14px;
+    }
 
     [data-coco][data-component="app-button"][data-size-lg="xs"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-lg="xs"] .button-toggle{
     height: 0.875rem;
@@ -2858,12 +2921,12 @@ select{
     padding-left: 0.75rem;
     padding-right: 0.75rem}
 
-      [data-coco][data-component="app-button"][data-size-lg="xs"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-lg="xs"][data-theme][data-collapsed="true"] > .button-element .button-icon{
-    margin-left: -0.375rem;
-    margin-right: -0.375rem}
+    [data-coco][data-component="app-button"][data-size-lg="xs"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-lg="xs"][data-collapsed="true"] > .button-element .button-icon{
+    margin-left: -0.25rem;
+    margin-right: -0.25rem}
       [data-coco][data-component="app-button"][data-size-lg="xs"][data-theme|="text"] .button-element{
-    padding-left: 0.25rem;
-    padding-right: 0.25rem}
+    padding-left: 0.5rem;
+    padding-right: 0.5rem}
 
       [data-coco][data-component="app-button"][data-size-lg="xs"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-lg="xs"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
     padding-left: 0.5rem;
@@ -2939,9 +3002,10 @@ select{
     padding-right: 0.75rem}
     }
 @media (min-width: 1200px) {
-    [data-coco][data-component="app-button"][data-size-xl="xs"] .button-content{
-    font-size: 12px;
-    line-height: 14px}
+    [data-coco][data-component="app-button"][data-size-xl="xs"] .button-content {
+      font-size: 14px;
+      line-height: 14px;
+    }
 
     [data-coco][data-component="app-button"][data-size-xl="xs"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-xl="xs"] .button-toggle{
     height: 0.875rem;
@@ -2952,12 +3016,12 @@ select{
     padding-left: 0.75rem;
     padding-right: 0.75rem}
 
-      [data-coco][data-component="app-button"][data-size-xl="xs"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xl="xs"][data-theme][data-collapsed="true"] > .button-element .button-icon{
-    margin-left: -0.375rem;
-    margin-right: -0.375rem}
+    [data-coco][data-component="app-button"][data-size-xl="xs"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xl="xs"][data-collapsed="true"] > .button-element .button-icon{
+    margin-left: -0.25rem;
+    margin-right: -0.25rem}
       [data-coco][data-component="app-button"][data-size-xl="xs"][data-theme|="text"] .button-element{
-    padding-left: 0.25rem;
-    padding-right: 0.25rem}
+    padding-left: 0.5rem;
+    padding-right: 0.5rem}
 
       [data-coco][data-component="app-button"][data-size-xl="xs"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xl="xs"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
     padding-left: 0.5rem;
@@ -3034,9 +3098,10 @@ select{
     }
 @media (min-width: 1400px) {
     [data-coco][data-component="app-button"][data-size-xxl="xs"] .button-content,
-      [data-coco][data-component="app-button"][data-size-2xl="xs"] .button-content{
-    font-size: 12px;
-    line-height: 14px}
+      [data-coco][data-component="app-button"][data-size-2xl="xs"] .button-content {
+      font-size: 14px;
+      line-height: 14px;
+    }
 
     [data-coco][data-component="app-button"][data-size-xxl="xs"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-xxl="xs"] .button-toggle,
       [data-coco][data-component="app-button"][data-size-2xl="xs"] .button-icon [data-component="icon"],
@@ -3050,15 +3115,15 @@ select{
     padding-left: 0.75rem;
     padding-right: 0.75rem}
 
-      [data-coco][data-component="app-button"][data-size-xxl="xs"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xxl="xs"][data-theme][data-collapsed="true"] > .button-element .button-icon,
-      [data-coco][data-component="app-button"][data-size-2xl="xs"][data-theme].icon-only > .button-element .button-icon,
-      [data-coco][data-component="app-button"][data-size-2xl="xs"][data-theme][data-collapsed="true"] > .button-element .button-icon{
-    margin-left: -0.375rem;
-    margin-right: -0.375rem}
+    [data-coco][data-component="app-button"][data-size-xxl="xs"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xxl="xs"][data-collapsed="true"] > .button-element .button-icon,
+      [data-coco][data-component="app-button"][data-size-2xl="xs"].icon-only > .button-element .button-icon,
+      [data-coco][data-component="app-button"][data-size-2xl="xs"][data-collapsed="true"] > .button-element .button-icon{
+    margin-left: -0.25rem;
+    margin-right: -0.25rem}
       [data-coco][data-component="app-button"][data-size-xxl="xs"][data-theme|="text"] .button-element,
       [data-coco][data-component="app-button"][data-size-2xl="xs"][data-theme|="text"] .button-element{
-    padding-left: 0.25rem;
-    padding-right: 0.25rem}
+    padding-left: 0.5rem;
+    padding-right: 0.5rem}
 
       [data-coco][data-component="app-button"][data-size-xxl="xs"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-xxl="xs"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon,
       [data-coco][data-component="app-button"][data-size-2xl="xs"][data-theme|="text"].icon-only > .button-element .button-icon,
@@ -3163,9 +3228,10 @@ select{
     padding-right: 0.75rem}
     }
 @media (min-width: 1800px) {
-    [data-coco][data-component="app-button"][data-size-max="xs"] .button-content{
-    font-size: 12px;
-    line-height: 14px}
+    [data-coco][data-component="app-button"][data-size-max="xs"] .button-content {
+      font-size: 14px;
+      line-height: 14px;
+    }
 
     [data-coco][data-component="app-button"][data-size-max="xs"] .button-icon [data-component="icon"],[data-coco][data-component="app-button"][data-size-max="xs"] .button-toggle{
     height: 0.875rem;
@@ -3176,12 +3242,12 @@ select{
     padding-left: 0.75rem;
     padding-right: 0.75rem}
 
-      [data-coco][data-component="app-button"][data-size-max="xs"][data-theme].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-max="xs"][data-theme][data-collapsed="true"] > .button-element .button-icon{
-    margin-left: -0.375rem;
-    margin-right: -0.375rem}
+    [data-coco][data-component="app-button"][data-size-max="xs"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-max="xs"][data-collapsed="true"] > .button-element .button-icon{
+    margin-left: -0.25rem;
+    margin-right: -0.25rem}
       [data-coco][data-component="app-button"][data-size-max="xs"][data-theme|="text"] .button-element{
-    padding-left: 0.25rem;
-    padding-right: 0.25rem}
+    padding-left: 0.5rem;
+    padding-right: 0.5rem}
 
       [data-coco][data-component="app-button"][data-size-max="xs"][data-theme|="text"].icon-only > .button-element .button-icon,[data-coco][data-component="app-button"][data-size-max="xs"][data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
     padding-left: 0.5rem;
@@ -3953,19 +4019,20 @@ select{
 [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"]{
+[data-coco][data-component="app-menu"][data-size="sm"],
+    [data-coco][data-component="app-menu"][data-size="xs"]{
   padding-top: 0.375rem;
   padding-bottom: 0.375rem}
-[data-coco][data-component="app-menu"][data-size="sm"] .menu-item [data-component="app-button"] > .button-element{
+[data-coco][data-component="app-menu"][data-size="sm"] .menu-item [data-component="app-button"] > .button-element, [data-coco][data-component="app-menu"][data-size="xs"] .menu-item [data-component="app-button"] > .button-element{
   padding-left: 1rem;
   padding-right: 1rem;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
   font-size: 14px;
   line-height: 16px}
-[data-coco][data-component="app-menu"][data-size="sm"] .menu-item [data-component="app-button"] > .button-element .button-inner{
+[data-coco][data-component="app-menu"][data-size="sm"] .menu-item [data-component="app-button"] > .button-element .button-inner, [data-coco][data-component="app-menu"][data-size="xs"] .menu-item [data-component="app-button"] > .button-element .button-inner{
   gap: 0.5rem}
-[data-coco][data-component="app-menu"][data-size="sm"] .menu-item [data-component="app-button"] > .button-element .button-inner > [data-component="icon"]{
+[data-coco][data-component="app-menu"][data-size="sm"] .menu-item [data-component="app-button"] > .button-element .button-inner > [data-component="icon"], [data-coco][data-component="app-menu"][data-size="xs"] .menu-item [data-component="app-button"] > .button-element .button-inner > [data-component="icon"]{
   height: 1rem;
   width: 1rem}
 [data-coco][data-component="app-menu"][data-size="md"]{
@@ -4878,6 +4945,13 @@ select{
   margin-top: 0.75rem}
 .app-alert-stacked.with-title .alert-message{
   margin-top: 0.25rem}
+.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{
   padding-right: 3rem}
 .app-alert-stacked[data-dismissable="true"] .alert-dismiss{
@@ -4885,6 +4959,16 @@ select{
   top: 0.5rem;
   right: 0.5rem;
   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{
+  align-self: center}
+.app-alert-stacked:not(.with-title):not(.with-action)[data-dismissable="true"] .alert-dismiss{
+  position: absolute;
+  right: 0.75rem;
+  top: 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))}
 .app-alert-multi-line .alert-container{
   align-items: center;
   padding-top: 0.625rem;
@@ -4902,13 +4986,18 @@ select{
     }
 .app-alert-multi-line.with-title .alert-message{
   margin-top: 0.25rem}
+.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: 0.125rem}
+  margin-top: 0px}
 .app-alert-multi-line .alert-actions{
   margin-top: 0px;
   margin-left: auto}
 .app-alert-multi-line[data-dismissable="true"] .alert-body{
-  padding-right: 2.5rem}
+  padding-right: 0.5rem}
 .app-alert-multi-line[data-dismissable="true"] .alert-dismiss{
   position: absolute;
   right: 0.75rem;
@@ -4916,8 +5005,8 @@ select{
   --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))}
 .app-alert-single-line .alert-container{
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem}
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem}
 .app-alert-single-line .alert-content{
   display: flex;
   width: 100%;
@@ -4932,18 +5021,21 @@ select{
   margin-top: 0px}
 .app-alert-single-line .alert-link{
   display: none}
+.app-alert-single-line[data-dismissable="true"] .alert-body{
+  padding-right: 0.5rem}
 .app-alert-single-line[data-dismissable="true"] .alert-container{
   padding-left: 3rem;
   padding-right: 3rem}
 .app-alert-single-line[data-dismissable="true"] .alert-dismiss{
   position: absolute;
-  right: 21px;
+  right: 0.75rem;
   top: 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))}
-.app-button-xs .button-content{
-  font-size: 12px;
-  line-height: 14px}
+.app-button-xs .button-content {
+      font-size: 14px;
+      line-height: 14px;
+    }
 .app-button-xs .button-icon [data-component="icon"],
     .app-button-xs .button-toggle{
   height: 0.875rem;
@@ -4953,13 +5045,13 @@ select{
   padding-bottom: 0.5rem;
   padding-left: 0.75rem;
   padding-right: 0.75rem}
-.app-button-xs[data-theme].icon-only > .button-element .button-icon,
-      .app-button-xs[data-theme][data-collapsed="true"] > .button-element .button-icon{
-  margin-left: -0.375rem;
-  margin-right: -0.375rem}
+.app-button-xs.icon-only > .button-element .button-icon,
+    .app-button-xs[data-collapsed="true"] > .button-element .button-icon{
+  margin-left: -0.25rem;
+  margin-right: -0.25rem}
 .app-button-xs[data-theme|="text"] .button-element{
-  padding-left: 0.25rem;
-  padding-right: 0.25rem}
+  padding-left: 0.5rem;
+  padding-right: 0.5rem}
 .app-button-xs[data-theme|="text"].icon-only > .button-element .button-icon,
       .app-button-xs[data-theme|="text"][data-collapsed="true"] > .button-element .button-icon{
   padding-left: 0.5rem;

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

@@ -14038,7 +14038,7 @@
   var package_default = {
     name: "coveragebook-components",
     type: "module",
-    version: "0.8.0-beta.1",
+    version: "0.8.0-beta.2",
     main: "index.js",
     repository: "git@github.com:coveragebook/coco.git",
     author: "Mark Perkins <mark@coveragebook.com>",
@@ -24579,6 +24579,12 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       dismissed: false,
       forceMultiLine: false,
       dismissDuration: 300,
+      init() {
+        this.checkSingleLineWrap = Alpine.throttle(
+          this.checkSingleLineWrap.bind(this),
+          200
+        );
+      },
       dismiss() {
         if (this.$options.dismissable) {
           this.$dispatch("alert:dismiss", {
@@ -24595,9 +24601,11 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       },
       checkSingleLineWrap({ height }) {
         this.forceMultiLine = false;
-        this.$nextTick(() => {
-          this.forceMultiLine = height > 24 && this.$options.singleLine;
-        });
+        if (height > 24 && this.$options.singleLine) {
+          this.$nextTick(() => {
+            this.forceMultiLine = true;
+          });
+        }
       },
       root: {
         "x-options": '["dismissable", "singleLine"]',

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

@@ -31,12 +31,16 @@
     }
 
     .header-mobile-controls {
-      @apply flex @4xl:hidden items-center ml-auto translate-x-2 sm:translate-x-4 md:translate-x-6;
+      @apply flex lg:hidden items-center ml-auto translate-x-2 sm:translate-x-4 md:translate-x-6;
+    }
+
+    .coco-button[data-variant="highlighted"] {
+      @apply text-amber-300;
     }
 
     &.with-nav-drawer {
       .header-link-group {
-        @apply hidden @4xl:flex;
+        @apply hidden lg:flex;
       }
     }
   }

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

@@ -6,7 +6,7 @@ module Coco
           Coco::App::Elements::ButtonGroup.new(
             theme: :text_neutral_light,
             collapsible: false,
-            size: :sm,
+            size: :xs,
             **kwargs
           )
         end
@@ -15,7 +15,7 @@ module Coco
           Coco::App::Elements::ButtonGroup.new(
             theme: :text_neutral_light,
             collapsible: false,
-            size: :sm,
+            size: :xs,
             **kwargs
           )
         end

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

@@ -35,7 +35,7 @@
       @apply sidebar-nav-vertical-condensed;
     }
 
-    @media screen(md) {
+    @media screen(lg) {
       @apply sidebar-nav-vertical;
     }
 

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

@@ -44,7 +44,7 @@
       @apply sidebar-nav-item-vertical-condensed;
     }
 
-    @media screen(md) {
+    @media screen(lg) {
       @apply sidebar-nav-item-vertical;
     }
 
@@ -90,7 +90,7 @@
       @apply sidebar-nav-menu-small;
     }
 
-    @media screen(md) {
+    @media screen(lg) {
       @apply sidebar-nav-menu-large;
     }
 

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

@@ -75,10 +75,13 @@
     /* Condensed */
 
     &[data-condensed="true"] {
+      .alert-container {
+        min-height: theme(spacing.12);
+        @apply py-1.5;
+      }
+
       .alert-icon {
-        .coco-icon {
-          @apply w-4 h-4;
-        }
+        @apply p-0 !bg-transparent;
       }
 
       .alert-body {
@@ -86,11 +89,11 @@
       }
 
       .alert-title {
-        @apply text-para-sm;
+        @apply text-para-md sm:text-para-sm xl:text-para-md;
       }
 
       .alert-message {
-        @apply text-para-sm;
+        @apply text-para-md sm:text-para-sm xl:text-para-md;
       }
     }
 
@@ -216,6 +219,20 @@
       @apply mt-1;
     }
 
+    &[data-condensed="true"] {
+      .alert-container {
+        @apply py-3;
+      }
+
+      .coco-icon {
+        @apply mt-1.5;
+      }
+
+      &.with-title .alert-message {
+        @apply mt-0;
+      }
+    }
+
     &[data-dismissable="true"] {
       .alert-container {
         @apply pr-12;
@@ -225,6 +242,24 @@
         @apply ml-auto absolute top-2 right-2;
       }
     }
+
+    &:not(.with-title) {
+      &:not(.with-action) {
+        .alert-container {
+          @apply items-center;
+        }
+
+        .alert-icon {
+          @apply self-center;
+        }
+
+        &[data-dismissable="true"] {
+          .alert-dismiss {
+            @apply absolute right-3 top-1/2 -translate-y-1/2;
+          }
+        }
+      }
+    }
   }
 
   .app-alert-multi-line {
@@ -252,8 +287,18 @@
       @apply mt-1;
     }
 
-    &[data-condensed="true"].with-title .alert-message {
-      @apply mt-0.5;
+    &[data-condensed="true"] {
+      .alert-container {
+        @apply py-2;
+      }
+
+      .coco-icon {
+        @apply mt-0;
+      }
+
+      &.with-title .alert-message {
+        @apply mt-0;
+      }
     }
 
     .alert-actions {
@@ -262,7 +307,7 @@
 
     &[data-dismissable="true"] {
       .alert-body {
-        @apply pr-10;
+        @apply pr-2;
       }
 
       .alert-dismiss {
@@ -273,7 +318,7 @@
 
   .app-alert-single-line {
     .alert-container {
-      @apply py-3;
+      @apply py-2;
     }
 
     .alert-content {
@@ -293,12 +338,16 @@
     }
 
     &[data-dismissable="true"] {
+      .alert-body {
+        @apply pr-2;
+      }
+
       .alert-container {
         @apply px-12;
       }
 
       .alert-dismiss {
-        @apply absolute right-[21px] top-1/2 -translate-y-1/2;
+        @apply absolute right-3 top-1/2 -translate-y-1/2;
       }
     }
   }

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

@@ -5,6 +5,7 @@
   cloak: (true if cloak?)
 }, class: {
   "with-title": title?,
+  "with-action": action? || secondary_action?,
   "vivid": vivid?
 }) do %>
   <div class="alert-container">

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

@@ -7,6 +7,13 @@ export default CocoComponent("appAlert", () => {
     forceMultiLine: false,
     dismissDuration: 300,
 
+    init() {
+      this.checkSingleLineWrap = Alpine.throttle(
+        this.checkSingleLineWrap.bind(this),
+        200
+      );
+    },
+
     dismiss() {
       if (this.$options.dismissable) {
         this.$dispatch("alert:dismiss", {
@@ -27,9 +34,11 @@ export default CocoComponent("appAlert", () => {
 
     checkSingleLineWrap({ height }) {
       this.forceMultiLine = false;
-      this.$nextTick(() => {
-        this.forceMultiLine = height > 24 && this.$options.singleLine;
-      });
+      if (height > 24 && this.$options.singleLine) {
+        this.$nextTick(() => {
+          this.forceMultiLine = true;
+        });
+      }
     },
 
     root: {

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

@@ -401,7 +401,8 @@
 @layer utilities {
   .app-button-xs {
     .button-content {
-      @apply text-label-xs;
+      font-size: 14px;
+      line-height: 14px;
     }
 
     .button-icon [data-component="icon"],
@@ -413,16 +414,16 @@
       .button-element {
         @apply py-2 px-3;
       }
+    }
 
-      &.icon-only > .button-element .button-icon,
-      &[data-collapsed="true"] > .button-element .button-icon {
-        @apply -ml-1.5 -mr-1.5;
-      }
+    &.icon-only > .button-element .button-icon,
+    &[data-collapsed="true"] > .button-element .button-icon {
+      @apply -ml-1 -mr-1;
     }
 
     &[data-theme|="text"] {
       .button-element {
-        @apply px-1;
+        @apply px-2;
       }
 
       &.icon-only > .button-element .button-icon,

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

@@ -36,6 +36,7 @@ module Coco
 
         accepts_option :size, from: SIZES, default: :md
         accepts_option :theme, from: THEMES, default: DEFAULT_THEME
+        accepts_option :variant
 
         renders_one :dropdown, types: {
           content: ->(&block) { block.call },

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

@@ -27,7 +27,8 @@
       }
     }
 
-    &[data-size="sm"] {
+    &[data-size="sm"],
+    &[data-size="xs"] {
       @apply py-1.5;
 
       .menu-item {

data/lib/coco.rb

@@ -1,3 +1,3 @@
 module Coco
-  VERSION = "0.8.0.beta.1"
+  VERSION = "0.8.0.beta.2"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: coveragebook_components
 version: !ruby/object:Gem::Version
-  version: 0.8.0.beta.1
+  version: 0.8.0.beta.2
 platform: ruby
 authors:
 - Mark Perkins