coveragebook_components 0.5.6 → 0.6.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f0f8a950e6efdf71c86bd953e001515a50f626eee3b399d9e1ab3e8641a414b8
-  data.tar.gz: 5aa2c63fc4dc1b1c8dde15d375e42ea9b075295737c6fa343430329c1e0bfa4e
+  metadata.gz: 324d5f797b12a43ba287186f0bb292881a0b2d7fa3cebf348c66394b1ab56543
+  data.tar.gz: 8d890765e161085db340052746adbe5def80174e6b3c410829d7add5a40d29e3
 SHA512:
-  metadata.gz: c6ea041857553ce066d7b013c4429c458812306c85f1977cc24d18d4f6ac259e2aff72200d4d3070fa33b7fefe5e8da7ec1c9d11668259d3eb62260b1cec1b72
-  data.tar.gz: 5d647e5e78c06a0e484180644dfa62d59bc411c18990c53618ad984ce366677523904c6c4452f6877b456cbb80dc3965b208d3993af6bee81a6055bec4ed3846
+  metadata.gz: c8c4c8539446948b4b2da346ff121fd7420d755ff7a0c992a68b9c26c40d905c6531c476603ba250edfc5b3d2f97da27bf3a587cb82184a4f01966368fb89661
+  data.tar.gz: 9c954db0e3d53181459c812fdd0248f99f2fda517fead437da41be871ea6f2f38598b46d65ee742da0e2557a709bb6d867f61ba0a4c9f2aaa9de09c9b1dfa50e

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

@@ -1104,6 +1104,8 @@ select{
     margin-bottom: 1.5rem}}
 [data-coco][data-component="app-slide-editor"] .editor-form form{
   display: none}
+[data-coco][data-component="app-slide-editor"] .slide-media{
+  position: relative}
 [data-coco][data-component="app-slide-editor"] .editor-slide{
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
@@ -1111,6 +1113,97 @@ select{
 [data-coco][data-component="app-slide-editor"] .editor-slide textarea{
   width: 100%;
   flex: none}
+[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader{
+  position: relative;
+  height: 100%;
+  width: 100%}
+[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-foreground-image{
+  position: relative;
+  height: 100%;
+  width: 100%;
+  transition-property: outline-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 100ms}
+[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-foreground-image:hover{
+  outline-style: solid;
+  outline-width: 1px;
+  outline-offset: 0px;
+  outline-color: transparent}
+[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-foreground-image img{
+  height: 100%;
+  width: 100%;
+  -o-object-fit: contain;
+     object-fit: contain}
+[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-placeholder{
+  inset: 0px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center}
+@supports (aspect-ratio: 1 / 1){
+
+  [data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-placeholder{
+    aspect-ratio: 4/3}}
+@supports not (aspect-ratio: 1 / 1){
+
+  [data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-placeholder::before{
+    content: "";
+    float: left;
+    padding-top: calc(100% / (4/3))}
+
+  [data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-placeholder::after{
+    clear: left;
+    content: "";
+    display: block}}
+@container (min-width: 700px){
+
+  [data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-placeholder{
+    position: absolute}
+
+  @supports (aspect-ratio: 1 / 1){
+
+    [data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-placeholder{
+      aspect-ratio: auto}}
+
+  @supports not (aspect-ratio: 1 / 1){
+
+    [data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-placeholder::before{
+      content: "";
+      float: left;
+      padding-top: calc(100% / (auto))}
+
+    [data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-placeholder::after{
+      clear: left;
+      content: "";
+      display: block}}}
+[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-placeholder{
+  outline-style: solid;
+  outline-width: 1px;
+  outline-offset: 0px;
+  outline-color: transparent;
+        background-color: rgba(255, 255, 255, 0.1)}
+[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-placeholder .coco-icon{
+  color: currentColor;
+          width: 3em;
+          height: 3em;
+          margin-bottom: 0.6em}
+[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-placeholder .coco-icon,
+        [data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-placeholder .editor-image-upload-placeholder-text{
+  opacity: 0.5}
+[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader .editor-image-upload-toolbar{
+  position: absolute;
+  left: 50%;
+  top: 0px;
+  --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));
+  opacity: 0;
+  transition-property: opacity;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 100ms}
+[data-coco][data-component="app-slide-editor"] .editor-foreground-image-uploader:hover .editor-image-upload-toolbar{
+  opacity: 1}
 [data-coco][data-component="app-slide-editor"] .coco-button.editor-saving{
   cursor: not-allowed}
 [data-coco][data-component="app-slide-editor"] .editor-thumbnail-wrapper{
@@ -1122,7 +1215,13 @@ select{
   position: absolute;
   top: 0px;
   z-index: -1000;
-  width: 500px}
+  width: 780px}
+[data-coco][data-component="app-slide-editor"] .editor-thumbnail-image{
+  height: 100%;
+  width: 100%;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat}
 [data-coco][data-component="app-slide-editor"] .editor-icon-bg-color{
   fill: currentColor;
   stroke: #111827;
@@ -1131,19 +1230,36 @@ select{
   outline-style: solid;
   outline-width: 1px;
   outline-offset: 0px;
-  outline-color: transparent}
+  outline-color: transparent;
+  transition-property: outline-color;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 100ms}
 [data-coco][data-component="app-slide-editor"] [data-component="app-seamless-textarea"] textarea::-moz-placeholder{
   font-style: italic}
 [data-coco][data-component="app-slide-editor"] [data-component="app-seamless-textarea"] textarea::placeholder{
   font-style: italic}
+[data-coco][data-component="app-slide-editor"] .slide-bg-light .editor-foreground-image,
+      [data-coco][data-component="app-slide-editor"] .slide-bg-light .editor-image-upload-placeholder {
+        outline-color: rgba(0, 0, 0, 0.3) !important;
+      }
+[data-coco][data-component="app-slide-editor"] .slide-bg-light .editor-image-upload-placeholder{
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity))}
 [data-coco][data-component="app-slide-editor"] .slide-bg-light [data-component="app-seamless-textarea"] textarea:hover,
-        [data-coco][data-component="app-slide-editor"] .slide-bg-light [data-component="app-seamless-textarea"] textarea:focus {
-          outline-color: rgba(0, 0, 0, 0.3);
-        }
+          [data-coco][data-component="app-slide-editor"] .slide-bg-light [data-component="app-seamless-textarea"] textarea:focus {
+            outline-color: rgba(0, 0, 0, 0.3);
+          }
+[data-coco][data-component="app-slide-editor"] .slide-bg-dark .editor-foreground-image,
+      [data-coco][data-component="app-slide-editor"] .slide-bg-dark .editor-image-upload-placeholder {
+        outline-color: rgba(255, 255, 255, 0.3) !important;
+      }
+[data-coco][data-component="app-slide-editor"] .slide-bg-dark .editor-image-upload-placeholder{
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity))}
 [data-coco][data-component="app-slide-editor"] .slide-bg-dark [data-component="app-seamless-textarea"] textarea:hover,
-        [data-coco][data-component="app-slide-editor"] .slide-bg-dark [data-component="app-seamless-textarea"] textarea:focus {
-          outline-color: rgba(255, 255, 255, 0.3);
-        }
+          [data-coco][data-component="app-slide-editor"] .slide-bg-dark [data-component="app-seamless-textarea"] textarea:focus {
+            outline-color: rgba(255, 255, 255, 0.3);
+          }
 [data-coco][data-component="app-alert"]{
   overflow: hidden;
   border-radius: 0.75rem;
@@ -1461,30 +1577,47 @@ select{
   background-color: transparent;
   opacity: 0.3}
 [data-coco][data-component="app-button"][data-theme="secondary"],
-    [data-coco][data-component="app-button"][data-theme="toolbar"]{
+    [data-coco][data-component="app-button"][data-theme="toolbar"],
+    [data-coco][data-component="app-button"][data-theme="toolbar-floating"]{
   border-color: rgba(0, 12, 39, 0.18);
   background-color: transparent;
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity))}
 [data-coco][data-component="app-button"][data-theme="secondary"]:hover,
-    [data-coco][data-component="app-button"][data-theme="toolbar"]:hover{
+    [data-coco][data-component="app-button"][data-theme="toolbar"]:hover,
+    [data-coco][data-component="app-button"][data-theme="toolbar-floating"]:hover{
   background-color: rgba(0, 12, 39, 0.06);
     background-blend-mode: hard-light}
 [data-coco][data-component="app-button"][data-theme="secondary"]:active,
-    [data-coco][data-component="app-button"][data-theme="toolbar"]:active{
+    [data-coco][data-component="app-button"][data-theme="toolbar"]:active,
+    [data-coco][data-component="app-button"][data-theme="toolbar-floating"]:active{
   background-color: rgba(0, 12, 39, 0.1);
     background-blend-mode: hard-light}
-[data-coco][data-component="app-button"][data-theme="secondary"][data-state="loading"], [data-coco][data-component="app-button"][data-theme="toolbar"][data-state="loading"]{
+[data-coco][data-component="app-button"][data-theme="secondary"][data-state="loading"], [data-coco][data-component="app-button"][data-theme="toolbar"][data-state="loading"], [data-coco][data-component="app-button"][data-theme="toolbar-floating"][data-state="loading"]{
   background-color: transparent}
-[data-coco][data-component="app-button"][data-theme="secondary"][data-state="active"], [data-coco][data-component="app-button"][data-theme="toolbar"][data-state="active"]{
+[data-coco][data-component="app-button"][data-theme="secondary"][data-state="active"], [data-coco][data-component="app-button"][data-theme="toolbar"][data-state="active"], [data-coco][data-component="app-button"][data-theme="toolbar-floating"][data-state="active"]{
   background-color: rgba(0, 12, 39, 0.1);
     background-blend-mode: hard-light}
-[data-coco][data-component="app-button"][data-theme="secondary"][data-state="loading"] > .button-element .button-icon, [data-coco][data-component="app-button"][data-theme="toolbar"][data-state="loading"] > .button-element .button-icon{
+[data-coco][data-component="app-button"][data-theme="secondary"][data-state="loading"] > .button-element .button-icon, [data-coco][data-component="app-button"][data-theme="toolbar"][data-state="loading"] > .button-element .button-icon, [data-coco][data-component="app-button"][data-theme="toolbar-floating"][data-state="loading"] > .button-element .button-icon{
   --tw-text-opacity: 1;
   color: rgb(118 184 170 / var(--tw-text-opacity))}
-[data-coco][data-component="app-button"][data-theme="secondary"][data-disabled="true"], [data-coco][data-component="app-button"][data-theme="toolbar"][data-disabled="true"]{
+[data-coco][data-component="app-button"][data-theme="secondary"][data-disabled="true"], [data-coco][data-component="app-button"][data-theme="toolbar"][data-disabled="true"], [data-coco][data-component="app-button"][data-theme="toolbar-floating"][data-disabled="true"]{
   background-color: transparent;
   opacity: 0.3}
+[data-coco][data-component="app-button"][data-theme="toolbar-floating"]{
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity))}
+[data-coco][data-component="app-button"][data-theme="toolbar-floating"]:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity))}
+[data-coco][data-component="app-button"][data-theme="toolbar-floating"]:active{
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity))}
+[data-coco][data-component="app-button"][data-theme="toolbar-floating"][data-state="active"]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(229 231 235 / var(--tw-bg-opacity))}
 [data-coco][data-component="app-button"][data-theme="text-secondary"],
     [data-coco][data-component="app-button"][data-theme="text-toolbar"]{
   background-color: transparent;
@@ -2129,6 +2262,7 @@ select{
 [data-coco][data-component="app-button-group"] {
     width: -moz-fit-content;
     width: fit-content;
+    border-radius: 44px;
   }
 [data-coco][data-component="app-button-group"] .button-group-buttons{
   display: flex;
@@ -2145,6 +2279,20 @@ select{
   border-color: rgb(209 213 219 / var(--tw-border-opacity))}
 [data-coco][data-component="app-button-group"][data-align="end"] .button-group-buttons{
   margin-left: auto}
+[data-coco][data-component="app-button-group"][data-segmented="true"] .button-group-buttons{
+  -moz-column-gap: 0px;
+       column-gap: 0px}
+[data-coco][data-component="app-button-group"][data-segmented="true"] .coco-button:not(:first-child){
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+  border-left-width: 0px}
+[data-coco][data-component="app-button-group"][data-segmented="true"] .coco-button:not(:last-child){
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px}
+[data-coco][data-component="app-button-group"][data-segmented="true"][data-floating="true"]{
+  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}
 [data-coco][data-component="app-color-picker"]{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity))}
@@ -2660,8 +2808,81 @@ select{
     width: max-content}
 [data-coco][data-component="app-image-picker-button"] [data-component="app-image-picker"]{
   border-radius: 0.375rem}
-[data-coco][data-component="app-image-picker-button"] .picker-file-input{
-  display: none}
+[data-coco][data-component="app-layout-picker-button"]{
+  display: inline-flex;
+    width: -moz-max-content;
+    width: max-content}
+[data-coco][data-component="app-layout-picker-button"] .layout-picker{
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr))}
+[data-coco][data-component="app-layout-picker-button"] .layout-picker-option{
+  overflow: hidden;
+  border-radius: 0.5rem;
+  border-width: 1px;
+  border-color: rgba(0, 12, 39, 0.1);
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms}
+[data-coco][data-component="app-layout-picker-button"] .layout-picker-option:hover{
+  border-color: rgba(0, 12, 39, 0.18)}
+[data-coco][data-component="app-layout-picker-button"] .layout-picker-option svg{
+  width: 100%}
+[data-coco][data-component="app-layout-picker-button"] .layout-picker-option-current{
+  --tw-border-opacity: 1;
+  border-color: rgb(26 136 113 / var(--tw-border-opacity))}
+[data-coco][data-component="app-layout-picker-button"] .layout-picker-option-current:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(26 136 113 / var(--tw-border-opacity))}
+/* Sizes */
+[data-coco][data-component="app-layout-picker-button"] .layout-picker[data-size="sm"] {
+    width: 284px;
+    gap: 1rem;
+    padding: 1rem;
+  }
+[data-coco][data-component="app-layout-picker-button"] .layout-picker[data-size="md"] {
+    width: 380px;
+    gap: 1.5rem;
+    padding: 1.5rem;
+  }
+@media (min-width: 768px) {
+  [data-coco][data-component="app-layout-picker-button"] .layout-picker[data-size-md="sm"] {
+    width: 284px;
+    gap: 1rem;
+    padding: 1rem;
+  }
+
+  [data-coco][data-component="app-layout-picker-button"] .layout-picker[data-size-md="md"] {
+    width: 380px;
+    gap: 1.5rem;
+    padding: 1.5rem;
+  }
+    }
+@media (min-width: 992px) {
+  [data-coco][data-component="app-layout-picker-button"] .layout-picker[data-size-lg="sm"] {
+    width: 284px;
+    gap: 1rem;
+    padding: 1rem;
+  }
+
+  [data-coco][data-component="app-layout-picker-button"] .layout-picker[data-size-lg="md"] {
+    width: 380px;
+    gap: 1.5rem;
+    padding: 1.5rem;
+  }
+    }
+@media (min-width: 1200px) {
+  [data-coco][data-component="app-layout-picker-button"] .layout-picker[data-size-xl="sm"] {
+    width: 284px;
+    gap: 1rem;
+    padding: 1rem;
+  }
+
+  [data-coco][data-component="app-layout-picker-button"] .layout-picker[data-size-xl="md"] {
+    width: 380px;
+    gap: 1.5rem;
+    padding: 1.5rem;
+  }
+    }
 [data-coco][data-component="app-link"]{
   text-decoration-line: none}
 [data-coco][data-component="app-link"]:hover{
@@ -3105,7 +3326,7 @@ select{
 [data-coco][data-component="book-editable-slide"] [data-slide-region],
     [data-coco][data-component="book-editable-slide"] .slide-header,
     [data-coco][data-component="book-editable-slide"] .slide-text,
-    [data-coco][data-component="book-editable-slide"] .slide-image{
+    [data-coco][data-component="book-editable-slide"] .slide-media{
   display: none}
 [data-coco][data-component="book-editable-slide"] .slide-group{
   display: contents}
@@ -3120,7 +3341,9 @@ select{
       line-height: 1.5;
       font-size: var(--text-font-size)}
 [data-coco][data-component="book-editable-slide"] .slide-media{
-  width: 100%}
+  width: 100%;
+  color: currentColor;
+      font-size: var(--text-font-size)}
 [data-coco][data-component="book-editable-slide"] .slide-media img{
   height: 100%;
   width: 100%;
@@ -3187,6 +3410,14 @@ select{
 [data-coco][data-component="book-editable-slide"][data-layout="one-col-title"] .slide-text {
         line-height: 1.4;
       }
+[data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] .slide-container{
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem}
+@container (min-width: 700px){
+
+  [data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] .slide-container{
+    padding-top: var(--slide-padding-sm);
+    padding-bottom: var(--slide-padding-sm)}}
 [data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] .slide-container{
   display: flex;
   align-items: center}
@@ -3221,13 +3452,11 @@ select{
 [data-coco][data-component="book-editable-slide"][data-layout="one-col-text"] [data-slide-region="content-1"] .slide-text{
   display: block}
 [data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] .slide-container{
-  padding-top: 1.5rem;
-  padding-bottom: 1.5rem}
+  padding: 1.5rem}
 @container (min-width: 700px){
 
   [data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] .slide-container{
-    padding-top: var(--slide-padding-sm);
-    padding-bottom: var(--slide-padding-sm)}}
+    padding: var(--slide-padding-sm)}}
 [data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] .slide-layout,
       [data-coco][data-component="book-editable-slide"][data-layout="one-col-media"] .slide-content{
   height: 100%}
@@ -3287,21 +3516,15 @@ select{
       [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-1"],
       [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-2"]{
   display: block}
-[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-slide-region="content-1"] .slide-text,
-        [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-slide-region="content-1"] .slide-media,
-        [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-slide-region="content-2"] .slide-text,
-        [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-slide-region="content-2"] .slide-media,
-        [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-1"] .slide-text,
-        [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-1"] .slide-media,
-        [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-2"] .slide-text,
-        [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-2"] .slide-media{
-  display: block}
 [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-slide-region="content-1"], [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-1"]{
   margin-bottom: var(--slide-padding-sm)}
 @container (min-width: 700px){
 
   [data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] [data-slide-region="content-1"], [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] [data-slide-region="content-1"]{
-    margin-bottom: 0px}
+    margin-bottom: 0px}}
+[data-coco][data-component="book-editable-slide"][data-layout="two-col-text"] .slide-text{
+  display: block}
+@container (min-width: 700px){
 
   [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-layout{
     height: 100%}}
@@ -3312,7 +3535,10 @@ select{
   [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-content{
     display: flex;
     height: 100%;
-    align-items: center}
+    align-items: center}}
+[data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-media{
+  display: block}
+@container (min-width: 700px){
 
   [data-coco][data-component="book-editable-slide"][data-layout="two-col-media"] .slide-media{
     position: absolute;

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

@@ -14604,7 +14604,7 @@
   var package_default = {
     name: "coveragebook-components",
     type: "module",
-    version: "0.5.6",
+    version: "0.6.0",
     main: "index.js",
     repository: "git@github.com:coveragebook/coco.git",
     author: "Mark Perkins <mark@coveragebook.com>",
@@ -28847,6 +28847,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
             trigger: "click",
             interactive: true,
             animation: false,
+            maxWidth: 380,
             triggerTarget,
             content,
             onShow: (...args) => {
@@ -29275,7 +29276,8 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       confirmed: true,
       lastState: null,
       stateTooltips: data2.tooltips || {},
-      tooltipText: null
+      tooltipText: null,
+      dropdown: null
     }, data2.props || {}), {
       init() {
         this.lastState = this.state;
@@ -29315,6 +29317,17 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       set disabled(value) {
         this.$options.disabled = value;
       },
+      /* dropdown */
+      hideDropdown() {
+        if (this.dropdown) {
+          this.dropdown.hide();
+        }
+      },
+      showDropdown() {
+        if (this.dropdown) {
+          this.dropdown.show();
+        }
+      },
       /* confirmation */
       checkConfirmation(event) {
         if (!this.confirmed) {
@@ -29511,14 +29524,14 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     };
   });
 
-  // import-glob:/Users/mark/Projects/coveragebook/coco/app/assets/js/base|@baseComponents/**/*.js
+  // import-glob:/Users/mark/Code/coveragebook/coco/app/assets/js/base|@baseComponents/**/*.js
   var modules = [button_exports, dropdown_exports, icon_exports, image_uploader_exports];
   var __default = modules;
 
   // base/components.js
   var components_default = registerComponents(__default);
 
-  // import-glob:/Users/mark/Projects/coveragebook/coco/app/assets/js/book|@bookComponents/**/*.js
+  // import-glob:/Users/mark/Code/coveragebook/coco/app/assets/js/book|@bookComponents/**/*.js
   var modules2 = [];
   var __default2 = modules2;
 
@@ -29664,11 +29677,20 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       layout: data2.layout,
       title: data2.title,
       text1: data2.text1,
+      text2: data2.text2,
       bgColor: data2.bgColor,
       textColor: data2.textColor,
       bgImage: {
         name: data2.bgImage,
         data: data2.bgImage
+      },
+      image1: {
+        name: data2.image1,
+        data: data2.image1
+      },
+      image2: {
+        name: data2.image2,
+        data: data2.image2
       }
     };
     return __spreadProps(__spreadValues({
@@ -29683,6 +29705,9 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       get bgImagePicker() {
         return getData(this.$root.querySelector("[data-role='bg-image-picker']"));
       },
+      get layoutPicker() {
+        return getData(this.$root.querySelector("[data-role='layout-picker']"));
+      },
       init() {
         this.$watch("errors", (errors) => {
           errors.forEach((error2) => console.error(error2.message));
@@ -29711,6 +29736,9 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
         );
         Array.from(inputs).forEach((el) => getData(el).onResize());
       },
+      setLayout(layout) {
+        this.layout = layout;
+      },
       handleImageDrop(event) {
         this.dragging = false;
         if (this.bgImagePicker) {
@@ -29781,6 +29809,12 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
       get hasBgImage() {
         return !!(this.bgImage && this.bgImage.data);
       },
+      get hasImage1() {
+        return !!(this.image1 && this.image1.data);
+      },
+      get hasImage2() {
+        return !!(this.image2 && this.image2.data);
+      },
       get bgColorHex() {
         return this.bgColor.replace("#", "");
       },
@@ -29817,16 +29851,22 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
             "slide-bg-dark": this.isDarkBg,
             "slide-bg-light": !this.isDarkBg
           };
-        }
+        },
+        [":data-layout"]: "layout"
       },
       input: {
-        layout: { "x-model.fill": "layout" },
+        layout: { "x-model.fill": "layout.replace(/-/g,'_')" },
         title: { "x-model.fill": "title" },
         text1: { "x-model.fill": "text1" },
+        text2: { "x-model.fill": "text2" },
         bgColor: { "x-model.fill": "bgColorHex" },
         textColor: { "x-model.fill": "textColorHex" },
         bgImage: { "x-effect": "syncFileInput($el, bgImage.file)" },
         bgImagePurge: { ":checked": "!hasBgImage" },
+        image1: { "x-effect": "syncFileInput($el, image1.file)" },
+        image1Purge: { ":checked": "!hasImage1" },
+        image2: { "x-effect": "syncFileInput($el, image2.file)" },
+        image2Purge: { ":checked": "!hasImage2" },
         thumbnailImage: { "x-effect": "syncFileInput($el, thumbnailFile)" }
       }
     });
@@ -31869,6 +31909,28 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     };
   });
 
+  // ../../components/coco/app/elements/layout_picker_button/layout_picker_button.js
+  var layout_picker_button_exports = {};
+  __export(layout_picker_button_exports, {
+    default: () => layout_picker_button_default
+  });
+  var layout_picker_button_default = CocoComponent("appLayoutPickerButton", ({ selected }) => {
+    return {
+      selectedLayout: selected,
+      getPicker() {
+        return getData(
+          this.$root.querySelector("[data-role='layout-picker']").firstElementChild
+        );
+      },
+      getButton() {
+        return getData(this.$root.querySelector(".layout-picker-trigger"));
+      },
+      init() {
+        this.$watch("selectedLayout", () => this.getButton().hideDropdown());
+      }
+    };
+  });
+
   // ../../components/coco/app/elements/menu_button/menu_button.js
   var menu_button_exports = {};
   __export(menu_button_exports, {
@@ -32032,8 +32094,8 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el);
     };
   });
 
-  // import-glob:/Users/mark/Projects/coveragebook/coco/app/assets/js/app|@appComponents/**/*.js
-  var modules3 = [nav_bar_exports, nav_drawer_exports, slide_editor_exports, alert_exports, button_group_exports, color_picker_exports, color_picker_button_exports, confirm_panel_exports, image_picker_exports, image_picker_button_exports, menu_button_exports, notice_exports, seamless_textarea_exports, snackbar_exports, system_banner_exports, toast_exports, toolbar_exports];
+  // import-glob:/Users/mark/Code/coveragebook/coco/app/assets/js/app|@appComponents/**/*.js
+  var modules3 = [nav_bar_exports, nav_drawer_exports, slide_editor_exports, alert_exports, button_group_exports, color_picker_exports, color_picker_button_exports, confirm_panel_exports, image_picker_exports, image_picker_button_exports, layout_picker_button_exports, menu_button_exports, notice_exports, seamless_textarea_exports, snackbar_exports, system_banner_exports, toast_exports, toolbar_exports];
   var __default3 = modules3;
 
   // app/components.js