coveragebook_components 0.8.0.beta.1 → 0.8.0.beta.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a013cd6c2aecad579366f519d7e5d2a00c09ff8422f0ac70f8a113aa9a84b9fe
-  data.tar.gz: f1bf079ae995e7e96f7610555b1ccc2f283646a667f96c9e3901e18baef87126
+  metadata.gz: fd091a2e16041e7c228e055e43093de5a7b7fefb7747872059c313681993c774
+  data.tar.gz: 9161c4c85b14f3b1bcee2b57472fc0596d74b2543a36ddb714d9582abf897699
 SHA512:
-  metadata.gz: 64b3b4bdd432b07bb48a933672b24c95d85c1ff1b382b58ce818d5f84a02c33785f5f733d748076b3a7c916c80c634a3a185b45d82c86fd54c57ef919228010f
-  data.tar.gz: ba2ca6e54d36e0eb0c4ebf0b334855c20d20de5c31ec3fa207259893ebcabcbb8f43e8671d50e0cb197df9e66aa70091b803ecab8e09bf8dbedded01093723a6
+  metadata.gz: cb9820183b0356270f175fa9b55a4627053b00c495caf31c7e9b1e3cd220f56d7ddbfa0e50486031eab376c373760102964d37d2d494d346377a45dd3ffda617
+  data.tar.gz: a799d7ed6d316ec0fad9d46d94b09c513833d80ab8e77777fa6d2664814d4a97f2511b865374a685c0162af51c2993a9d103a7dd9ab298c343cf26b4b438b17b

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}}
@@ -1392,6 +1395,8 @@ select{
   width: 100%;
   grid-template-rows: repeat(1, minmax(0, 1fr));
     grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1fr)}
+[data-coco][data-component="app-sidebar-nav"] .nav-action{
+  cursor: pointer}
 [data-coco][data-component="app-sidebar-nav"] .nav-action .nav-item-label{
   display: none;
   --tw-text-opacity: 1 !important;
@@ -1450,7 +1455,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;
@@ -1511,6 +1516,7 @@ select{
   }
 [data-coco][data-component="app-sidebar-nav-item"]{
   flex: none;
+  cursor: pointer;
   --tw-bg-opacity: 1;
   background-color: rgb(31 41 55 / var(--tw-bg-opacity));
   text-align: center;
@@ -1542,6 +1548,7 @@ select{
 [data-coco][data-component="app-sidebar-nav-item"] .nav-item-label{
   margin-top: 0.125rem;
   display: block;
+  cursor: pointer;
   font-size: 10px;
   line-height: 12px;
   font-weight: 600;
@@ -1598,7 +1605,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 +1757,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 +2109,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 +2152,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 +2166,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 +2199,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 +2224,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 +2245,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 +2280,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;
@@ -2626,26 +2690,29 @@ select{
   --tw-bg-opacity: 1;
   background-color: rgb(209 213 219 / var(--tw-bg-opacity))}
 [data-coco][data-component="app-button"][data-theme="neutral-light"]{
+  border-width: 1px;
+  border-color: transparent}
+[data-coco][data-component="app-button"][data-theme="neutral-light"] .button-element{
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity))}
-[data-coco][data-component="app-button"][data-theme="neutral-light"]:hover{
+[data-coco][data-component="app-button"][data-theme="neutral-light"] .button-element:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity))}
-[data-coco][data-component="app-button"][data-theme="neutral-light"]:active{
+[data-coco][data-component="app-button"][data-theme="neutral-light"] .button-element:active{
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity))}
-[data-coco][data-component="app-button"][data-theme="neutral-light"][data-state="loading"]{
+[data-coco][data-component="app-button"][data-theme="neutral-light"][data-state="loading"] .button-element{
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity))}
-[data-coco][data-component="app-button"][data-theme="neutral-light"][data-state="active"]{
+[data-coco][data-component="app-button"][data-theme="neutral-light"][data-state="active"] .button-element{
   --tw-bg-opacity: 1;
   background-color: rgb(243 244 246 / var(--tw-bg-opacity))}
-[data-coco][data-component="app-button"][data-theme="neutral-light"][data-disabled="true"]{
+[data-coco][data-component="app-button"][data-theme="neutral-light"][data-disabled="true"] .button-element{
   --tw-bg-opacity: 1;
   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{
+[data-coco][data-component="app-button"][data-theme="neutral-light"][data-disabled="true"] .button-element .button-inner{
   opacity: 0.4}
 [data-coco][data-component="app-button"][data-theme="text-neutral-light"]{
   background-color: transparent;
@@ -2670,9 +2737,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 +2749,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 +2819,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 +2833,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 +2914,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 +2928,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 +3009,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 +3023,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 +3105,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 +3122,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 +3235,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 +3249,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 +4026,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 +4952,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 +4966,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 +4993,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 +5012,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 +5028,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 +5052,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.3",
     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

@@ -5,6 +5,8 @@
     grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1fr);
 
     .nav-action {
+      @apply cursor-pointer;
+
       .nav-item-label {
         @apply hidden !text-content-primary-inverse-vivid;
       }
@@ -35,7 +37,7 @@
       @apply sidebar-nav-vertical-condensed;
     }
 
-    @media screen(md) {
+    @media screen(lg) {
       @apply sidebar-nav-vertical;
     }
 

data/app/components/coco/app/blocks/sidebar_nav/sidebar_nav.html.erb

@@ -8,7 +8,7 @@
           </span>
         <% end %>
 
-        <% item.with_menu do %>
+        <% item.with_menu(id: "actions-nav-link") do %>
           <% actions_data.each do |action| %>
             <%= coco_link(action[:href],
               **action.except(:label, :description, :href, :icon),

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

@@ -1,6 +1,6 @@
 @layer components {
   [data-coco][data-component="app-sidebar-nav-item"] {
-    @apply bg-background-dark-2 text-content-dark-muted text-center no-underline transition-colors flex-none;
+    @apply bg-background-dark-2 text-content-dark-muted text-center no-underline transition-colors flex-none cursor-pointer;
     @apply flex items-center justify-center px-4 w-full flex-col;
 
     &[href] {
@@ -13,7 +13,7 @@
     }
 
     .nav-item-label {
-      @apply block font-semibold text-label-xxs transition-colors mt-0.5;
+      @apply block font-semibold text-label-xxs transition-colors mt-0.5 cursor-pointer;
     }
 
     &.emphasised {
@@ -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/blocks/sidebar_nav_item/sidebar_nav_item.html.erb

@@ -12,8 +12,10 @@
     <%= label %>
   </label>
   <% if menu? || menu_items? %>
-    <template x-ref="menu">
-      <div class="sidebar-nav-menu" x-cloak>
+    <%= tag.template id: menu_template_id, "x-ref": "menu" do %>
+      <%= tag.div id: menu_id,
+        class: "sidebar-nav-menu",
+        "x-cloak": "" do %>
         <% if menu? %>
           <%= menu %>
         <% else %>
@@ -37,7 +39,7 @@
 
           <%= menu_action %>
         <% end %>
-      </div>
-    </template>
+      <% end %>
+    <% end %>
   <% end %>
 <% end %>

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

@@ -25,6 +25,7 @@ module Coco
         end
 
         before_render do
+          set_tag_attr(:id, item_id)
           if @icon && !icon?
             with_icon do
               tag.span(class: "nav-item-icon") do
@@ -34,9 +35,10 @@ module Coco
           end
         end
 
-        attr_reader :label, :tooltip, :dropdown_menu_items, :max_menu_items
+        attr_reader :label, :tooltip, :dropdown_menu_items, :max_menu_items, :item_id
 
-        def initialize(label:, icon: nil, emphasise: false, active: false, tooltip: nil, menu_select_placeholder: nil, max_menu_items: 6, **)
+        def initialize(label:, id: nil, icon: nil, emphasise: false, active: false, tooltip: nil, menu_select_placeholder: nil, max_menu_items: 6, **)
+          @item_id = id
           @label = label
           @icon = icon
           @emphasise = emphasise
@@ -63,6 +65,14 @@ module Coco
           @menu_select_placeholder || "More items..."
         end
 
+        def menu_id
+          "#{item_id}-menu" if item_id.present?
+        end
+
+        def menu_template_id
+          "#{menu_id}-template" if menu_id.present?
+        end
+
         class SidebarNavMenuItem < Coco::Component
           attr_reader :icon, :href, :modal
 

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

@@ -241,17 +241,21 @@
     }
 
     &[data-theme="neutral-light"] {
-      @apply bg-background-light-1 text-content-dark-1 hover:bg-background-light-2 active:bg-background-light-3;
+      @apply border border-transparent;
 
-      &[data-state="loading"] {
+      .button-element {
+        @apply bg-background-light-1 text-content-dark-1 hover:bg-background-light-2 active:bg-background-light-3;
+      }
+
+      &[data-state="loading"] .button-element {
         @apply bg-background-light-1;
       }
 
-      &[data-state="active"] {
+      &[data-state="active"] .button-element {
         @apply bg-background-light-3;
       }
 
-      &[data-disabled="true"] {
+      &[data-disabled="true"] .button-element {
         @apply bg-background-light-1;
 
         .button-inner {
@@ -401,7 +405,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 +418,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.3"
 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.3
 platform: ruby
 authors:
 - Mark Perkins