avo 4.0.0.beta.45 → 4.0.0.beta.46

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0025b604ab0ca5ff4bdf83b41204be7b6ca2eb6211269b45bb1827f059a731fc
-  data.tar.gz: 1f5ac00fe7cf8b1218c4d6ec6657820175e7fce008d027f449ade483126a9791
+  metadata.gz: 885e0a073f4609afd0191e173b2572c935557f8b3fb458f0773d2b8f128a3953
+  data.tar.gz: de1e1ba064326034bce65de538faa3abdc1de5b7bd8f047f97c68253051cdb9c
 SHA512:
-  metadata.gz: 9e26e80cadbb04224a25ce1ae3321545426a334ac195cde6f0880143ef3d38377788e39189d2f77e180ea8c5152c7647874b112e4dd1c6b9931907e6628f82d0
-  data.tar.gz: 7d6e56e3c9ddae3a12767064d99166fe603391b2157f792ef79107943e068cd035e11241d32f1f0929a4bcc472e01a3b4513ad7d953391f406aecc33667f6dd3
+  metadata.gz: b0e3a49508a1c3ae79c8fad5d10ad12fdb39a078f54ddddabec5dd552c2b3f06af9b188b01ce7aa992dd3120171dd20e995e29a589554416139ba5324b562738
+  data.tar.gz: 42252f11e7606bab476a7de70ef429fc766ad99b4213eaaf569b2c1bc38ba5f266a1e4be9e93b009286edce0d5081a8794735f5ec11eae0a9c45cd1fd3c672ea

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    avo (4.0.0.beta.45)
+    avo (4.0.0.beta.46)
       actionview (>= 6.1)
       active_link_to
       activerecord (>= 6.1)

data/app/assets/builds/avo/application.css

@@ -284,6 +284,7 @@
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    --blur-sm: 8px;
     --aspect-video: 16 / 9;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -8675,32 +8676,72 @@ tag.tagify__tag {
       width: 100%;
     }
   }
-  .all-fields-stacked .field-wrapper, .field-wrapper.field-wrapper--stacked {
-    row-gap: calc(var(--spacing) * 2);
-    padding-block: calc(var(--spacing) * 3);
-    @media (width >= 48rem) {
+  .field-wrapper {
+    @media (width < 48rem) {
       flex-direction: column;
-    }
-    @media (width >= 48rem) {
       align-items: flex-start;
-    }
-    .field-wrapper__label {
-      min-height: calc(var(--spacing) * 0);
-      padding-top: calc(var(--spacing) * 0);
-      @media (width >= 48rem) {
+      row-gap: calc(var(--spacing) * 2);
+      padding-block: calc(var(--spacing) * 3);
+      .field-wrapper__label {
+        min-height: calc(var(--spacing) * 0);
+        width: 100%;
+        padding-top: calc(var(--spacing) * 0);
+      }
+      .field-wrapper__label-help {
+        padding-bottom: calc(var(--spacing) * 0);
+      }
+      .field-wrapper__content {
+        width: 100%;
+        padding-inline: calc(var(--spacing) * 4);
+        padding-top: calc(var(--spacing) * 0);
+      }
+      .field-wrapper__content-wrapper {
         width: 100%;
       }
     }
-    .field-wrapper__label-help {
-      padding-bottom: calc(var(--spacing) * 0);
-    }
-    .field-wrapper__content {
-      width: 100%;
-      padding-inline: calc(var(--spacing) * 4);
-      padding-top: calc(var(--spacing) * 0);
+    &:is(.all-fields-stacked .field-wrapper, .field-wrapper.field-wrapper--stacked) {
+      flex-direction: column;
+      align-items: flex-start;
+      row-gap: calc(var(--spacing) * 2);
+      padding-block: calc(var(--spacing) * 3);
+      .field-wrapper__label {
+        min-height: calc(var(--spacing) * 0);
+        width: 100%;
+        padding-top: calc(var(--spacing) * 0);
+      }
+      .field-wrapper__label-help {
+        padding-bottom: calc(var(--spacing) * 0);
+      }
+      .field-wrapper__content {
+        width: 100%;
+        padding-inline: calc(var(--spacing) * 4);
+        padding-top: calc(var(--spacing) * 0);
+      }
+      .field-wrapper__content-wrapper {
+        width: 100%;
+      }
     }
-    .field-wrapper__content-wrapper {
-      width: 100%;
+    :is(.all-fields-stacked .field-wrapper, .field-wrapper.field-wrapper--stacked) & {
+      flex-direction: column;
+      align-items: flex-start;
+      row-gap: calc(var(--spacing) * 2);
+      padding-block: calc(var(--spacing) * 3);
+      .field-wrapper__label {
+        min-height: calc(var(--spacing) * 0);
+        width: 100%;
+        padding-top: calc(var(--spacing) * 0);
+      }
+      .field-wrapper__label-help {
+        padding-bottom: calc(var(--spacing) * 0);
+      }
+      .field-wrapper__content {
+        width: 100%;
+        padding-inline: calc(var(--spacing) * 4);
+        padding-top: calc(var(--spacing) * 0);
+      }
+      .field-wrapper__content-wrapper {
+        width: 100%;
+      }
     }
   }
   .container-small {
@@ -10803,6 +10844,92 @@ tag.tagify__tag {
       display: none;
     }
   }
+  .manual-frame {
+    position: relative;
+    overflow: hidden;
+    border-radius: var(--radius-lg);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-secondary);
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 3);
+  }
+  .manual-frame__overlay {
+    position: absolute;
+    inset: calc(var(--spacing) * 0);
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: color-mix(in srgb, #fff 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-primary) 80%, transparent);
+    }
+    --tw-backdrop-blur: blur(var(--blur-sm));
+    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+  }
+  .manual-frame__loading {
+    display: inline-flex;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    border-radius: var(--radius-lg);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-secondary);
+    background-color: var(--color-primary);
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-content);
+    --tw-shadow: "0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 2px rgba(0, 0, 0, 0.06), 0px 0px 1px rgba(0, 0, 0, 0.04)";
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+  .manual-frame__loading-icon {
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+    animation: var(--animate-spin);
+    color: var(--color-content-secondary);
+  }
+  .manual-frame__error-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: calc(var(--spacing) * 3);
+  }
+  .manual-frame__error-message {
+    display: inline-flex;
+    min-width: calc(var(--spacing) * 0);
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-content-secondary);
+  }
+  .manual-frame__error-icon {
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+    flex-shrink: 0;
+    color: var(--color-danger-content);
+  }
+  .manual-frame__error-note {
+    margin-top: calc(var(--spacing) * 2);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    color: var(--color-content-secondary);
+  }
+  .manual-frame__error-link {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    text-decoration-line: underline;
+    text-underline-offset: 2px;
+  }
   .modal {
     --modal-height-sm: 24rem;
     --modal-height-md: 28rem;
@@ -10820,6 +10947,7 @@ tag.tagify__tag {
     height: 100%;
     align-items: center;
     justify-content: center;
+    overflow: hidden;
     border-style: var(--tw-border-style);
     border-width: 0px;
     background-color: transparent;
@@ -10856,7 +10984,8 @@ tag.tagify__tag {
     position: relative;
     display: flex;
     width: 100%;
-    flex-shrink: 0;
+    height: 100%;
+    min-height: calc(var(--spacing) * 0);
     flex-direction: column;
     align-items: center;
     justify-content: center;
@@ -10864,15 +10993,23 @@ tag.tagify__tag {
   .modal__card {
     position: relative;
     display: flex;
+    min-height: calc(var(--spacing) * 0);
     width: 100%;
     flex-shrink: 0;
     flex-direction: column;
+    overflow: hidden;
     max-height: calc(100dvh - 2rem);
+    max-width: calc(100dvw - 1rem);
     box-shadow: var(--shadow-modal);
     opacity: 0;
     transform: scale(0.975);
     transition: opacity var(--modal-transition-duration) ease-out, transform var(--modal-transition-duration) ease-out;
   }
+  @media (min-width: 640px) {
+    .modal__card {
+      max-width: calc(100dvw - 2rem);
+    }
+  }
   .modal:popover-open .modal__card {
     opacity: 1;
     transform: scale(1);
@@ -10923,6 +11060,7 @@ tag.tagify__tag {
     min-height: calc(var(--spacing) * 0);
     width: 100%;
     flex: 1;
+    overflow: hidden;
   }
   .modal__card > .card > .card__wrapper {
     display: flex;
@@ -10930,18 +11068,22 @@ tag.tagify__tag {
     width: 100%;
     flex: 1;
     flex-direction: column;
+    overflow: hidden;
   }
   .modal__card .card__header {
+    flex-shrink: 0;
     padding-inline: calc(var(--spacing) * 4);
     padding-block: calc(var(--spacing) * 3);
   }
   .modal__card > .card > .card__wrapper > .card__body {
-    display: flex;
-    min-height: calc(var(--spacing) * 64);
+    display: block;
+    min-height: calc(var(--spacing) * 0);
     flex: 1;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: calc(var(--spacing) * 4);
+    overflow: auto;
+    border-radius: 0;
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    background-color: transparent;
     padding-inline: calc(var(--spacing) * 0);
     padding-top: calc(var(--spacing) * 0);
   }
@@ -10989,8 +11131,13 @@ tag.tagify__tag {
     }
   }
   .modal__body-content {
+    min-height: calc(var(--spacing) * 48);
     width: 100%;
-    height: 100%;
+    border-radius: var(--radius-card-wrapper);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-tertiary);
+    background-color: var(--color-primary);
   }
   .card__body.modal-form-body {
     padding: calc(var(--spacing) * 4) !important;
@@ -10998,6 +11145,7 @@ tag.tagify__tag {
   .modal__controls {
     display: flex;
     width: 100%;
+    flex-shrink: 0;
     align-items: center;
     justify-content: space-between;
     gap: calc(var(--spacing) * 2);