avo 4.0.0.beta.1 → 4.0.0.beta.3

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

@@ -559,24 +559,21 @@
   .start-1 {
     inset-inline-start: calc(var(--spacing) * 1);
   }
-  .start-1\/2 {
-    inset-inline-start: calc(1/2 * 100%);
-  }
   .end {
     inset-inline-end: var(--spacing);
   }
   .end-0 {
     inset-inline-end: calc(var(--spacing) * 0);
   }
-  .end-2\.5 {
-    inset-inline-end: calc(var(--spacing) * 2.5);
-  }
   .end-3 {
     inset-inline-end: calc(var(--spacing) * 3);
   }
   .end-auto {
     inset-inline-end: auto;
   }
+  .inset-e-2\.5 {
+    inset-inline-end: calc(var(--spacing) * 2.5);
+  }
   .-top-\[0\.1rem\] {
     top: calc(0.1rem * -1);
   }
@@ -820,9 +817,6 @@
   .mt-8 {
     margin-top: calc(var(--spacing) * 8);
   }
-  .mt-12 {
-    margin-top: calc(var(--spacing) * 12);
-  }
   .mr-0 {
     margin-right: calc(var(--spacing) * 0);
   }
@@ -832,9 +826,6 @@
   .mr-px {
     margin-right: 1px;
   }
-  .\!-mb-8 {
-    margin-bottom: calc(var(--spacing) * -8) !important;
-  }
   .mb-0 {
     margin-bottom: calc(var(--spacing) * 0);
   }
@@ -850,9 +841,6 @@
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
-  .mb-5 {
-    margin-bottom: calc(var(--spacing) * 5);
-  }
   .mb-6 {
     margin-bottom: calc(var(--spacing) * 6);
   }
@@ -926,10 +914,18 @@
     width: calc(var(--spacing) * 6);
     height: calc(var(--spacing) * 6);
   }
+  .size-8 {
+    width: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 8);
+  }
   .size-10 {
     width: calc(var(--spacing) * 10);
     height: calc(var(--spacing) * 10);
   }
+  .size-12 {
+    width: calc(var(--spacing) * 12);
+    height: calc(var(--spacing) * 12);
+  }
   .size-full {
     width: 100%;
     height: 100%;
@@ -958,20 +954,14 @@
   .h-10 {
     height: calc(var(--spacing) * 10);
   }
-  .h-12 {
-    height: calc(var(--spacing) * 12);
-  }
   .h-16 {
     height: calc(var(--spacing) * 16);
   }
   .h-20 {
     height: calc(var(--spacing) * 20);
   }
-  .h-52 {
-    height: calc(var(--spacing) * 52);
-  }
-  .h-64 {
-    height: calc(var(--spacing) * 64);
+  .h-40 {
+    height: calc(var(--spacing) * 40);
   }
   .h-\[0\.75rem\] {
     height: 0.75rem;
@@ -1018,6 +1008,9 @@
   .min-h-24 {
     min-height: calc(var(--spacing) * 24);
   }
+  .min-h-56 {
+    min-height: calc(var(--spacing) * 56);
+  }
   .min-h-\[8rem\] {
     min-height: 8rem;
   }
@@ -1093,9 +1086,6 @@
   .w-10\/12 {
     width: calc(10 / 12 * 100%);
   }
-  .w-12 {
-    width: calc(var(--spacing) * 12);
-  }
   .w-16 {
     width: calc(var(--spacing) * 16);
   }
@@ -1457,9 +1447,6 @@
   .gap-y-4 {
     row-gap: calc(var(--spacing) * 4);
   }
-  .gap-y-12 {
-    row-gap: calc(var(--spacing) * 12);
-  }
   .divide-x {
     :where(& > :not(:last-child)) {
       --tw-divide-x-reverse: 0;
@@ -1632,10 +1619,6 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 1px;
   }
-  .border-b-2 {
-    border-bottom-style: var(--tw-border-style);
-    border-bottom-width: 2px;
-  }
   .border-l {
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
@@ -1673,15 +1656,15 @@
   .border-blue-600 {
     border-color: var(--color-blue-600);
   }
-  .border-content-secondary {
-    border-color: var(--color-content-secondary);
-  }
   .border-cyan-300 {
     border-color: var(--color-cyan-300);
   }
   .border-cyan-500 {
     border-color: var(--color-cyan-500);
   }
+  .border-danger {
+    border-color: var(--color-danger);
+  }
   .border-emerald-300 {
     border-color: var(--color-emerald-300);
   }
@@ -2207,6 +2190,9 @@
   .pe-9 {
     padding-inline-end: calc(var(--spacing) * 9);
   }
+  .pt-0 {
+    padding-top: calc(var(--spacing) * 0);
+  }
   .pt-0\.5 {
     padding-top: calc(var(--spacing) * 0.5);
   }
@@ -2231,9 +2217,6 @@
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
-  .pb-3 {
-    padding-bottom: calc(var(--spacing) * 3);
-  }
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
@@ -2411,6 +2394,9 @@
   .text-cyan-700 {
     color: var(--color-cyan-700);
   }
+  .text-danger {
+    color: var(--color-danger);
+  }
   .text-emerald-500 {
     color: var(--color-emerald-500);
   }
@@ -2423,9 +2409,6 @@
   .text-fuchsia-700 {
     color: var(--color-fuchsia-700);
   }
-  .text-gray-300 {
-    color: var(--color-gray-300);
-  }
   .text-gray-400 {
     color: var(--color-gray-400);
   }
@@ -3036,6 +3019,14 @@
       background-color: var(--color-cyan-600);
     }
   }
+  .hover\:bg-danger\/10 {
+    &:hover {
+      background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-danger) 10%, transparent);
+      }
+    }
+  }
   .hover\:bg-emerald-100 {
     &:hover {
       background-color: var(--color-emerald-100);
@@ -3061,11 +3052,6 @@
       background-color: var(--color-gray-100);
     }
   }
-  .hover\:bg-gray-200 {
-    &:hover {
-      background-color: var(--color-gray-200);
-    }
-  }
   .hover\:bg-gray-600 {
     &:hover {
       background-color: var(--color-gray-600);
@@ -3156,11 +3142,6 @@
       background-color: var(--color-purple-600);
     }
   }
-  .hover\:bg-red-50 {
-    &:hover {
-      background-color: var(--color-red-50);
-    }
-  }
   .hover\:bg-red-100 {
     &:hover {
       background-color: var(--color-red-100);
@@ -3226,6 +3207,11 @@
       background-color: var(--color-teal-600);
     }
   }
+  .hover\:bg-tertiary {
+    &:hover {
+      background-color: var(--color-tertiary);
+    }
+  }
   .hover\:bg-violet-100 {
     &:hover {
       background-color: var(--color-violet-100);
@@ -3269,11 +3255,6 @@
       color: var(--color-blue-500);
     }
   }
-  .hover\:text-blue-700 {
-    &:hover {
-      color: var(--color-blue-700);
-    }
-  }
   .hover\:text-content {
     &:hover {
       color: var(--color-content);
@@ -3339,14 +3320,17 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
-  .focus\:ring-gray-100 {
+  .focus\:ring-danger\/30 {
     &:focus {
-      --tw-ring-color: var(--color-gray-100);
+      --tw-ring-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-danger) 30%, transparent);
+      }
     }
   }
-  .focus\:ring-red-300 {
+  .focus\:ring-tertiary {
     &:focus {
-      --tw-ring-color: var(--color-red-300);
+      --tw-ring-color: var(--color-tertiary);
     }
   }
   .focus\:ring-warning\/50 {
@@ -4438,6 +4422,11 @@
       }
     }
   }
+  .dark\:bg-tertiary {
+    &:where(.dark, .dark *) {
+      background-color: var(--color-tertiary);
+    }
+  }
   .print\:hidden {
     @media print {
       display: none;
@@ -7916,6 +7905,9 @@
     @media (width >= 40rem) {
       flex-direction: row;
     }
+    @media (width >= 40rem) {
+      flex-wrap: wrap;
+    }
     @media (width >= 40rem) {
       align-items: flex-end;
     }
@@ -7926,6 +7918,7 @@
   .pagination__per-page {
     --pagination-per-page-width: 10rem;
     display: flex;
+    flex-shrink: 0;
     align-items: center;
   }
   .pagination__per-page-input {
@@ -7984,14 +7977,32 @@
     --tw-font-weight: var(--font-weight-normal);
     font-weight: var(--font-weight-normal);
   }
+  .pagination__controls-wrap {
+    display: flex;
+    width: 100%;
+    min-width: calc(var(--spacing) * 0);
+    @media (width >= 40rem) {
+      min-width: 22rem;
+    }
+    @media (width >= 40rem) {
+      flex: 1 1 28rem;
+    }
+    @media (width >= 40rem) {
+      justify-content: flex-end;
+    }
+  }
   .pagination__controls {
     display: flex;
-    width: fit-content;
-    flex-shrink: 0;
+    width: 100%;
+    max-width: 100%;
+    min-width: calc(var(--spacing) * 0);
+    --tw-pan-x: pan-x;
+    touch-action: var(--tw-pan-x,) var(--tw-pan-y,) var(--tw-pinch-zoom,);
     align-items: center;
     gap: calc(var(--spacing) * 3);
-    overflow: hidden;
-    overflow: visible;
+    overflow-x: auto;
+    overflow-y: hidden;
+    overscroll-behavior-x: contain;
     border-radius: var(--radius-lg);
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -7999,11 +8010,16 @@
     background-color: var(--color-primary);
     padding-inline-start: calc(var(--spacing) * 3);
     padding-inline-end: calc(var(--spacing) * 2);
+    @media (width >= 40rem) {
+      width: fit-content;
+    }
+    -webkit-overflow-scrolling: touch;
+    scrollbar-gutter: stable;
   }
   .pagination__info {
     display: flex;
+    flex-shrink: 0;
     align-items: center;
-    overflow: hidden;
     border-inline-end-style: var(--tw-border-style);
     border-inline-end-width: 1px;
     border-color: var(--color-tertiary);
@@ -8015,7 +8031,6 @@
     line-height: calc(var(--spacing) * 5);
     --tw-font-weight: var(--font-weight-normal);
     font-weight: var(--font-weight-normal);
-    text-overflow: ellipsis;
     white-space: nowrap;
     color: var(--color-content);
     &:last-child {
@@ -8030,12 +8045,15 @@
   }
   .pagination__nav {
     display: flex;
+    flex-shrink: 0;
     align-items: center;
   }
   .pagy.series-nav {
     display: flex;
+    min-width: max-content;
     align-items: center;
     gap: calc(var(--spacing) * 0.5);
+    white-space: nowrap;
     a[role="separator"] {
       padding-inline: calc(var(--spacing) * 2);
       font-size: var(--text-sm);
@@ -10764,6 +10782,203 @@
     --badge-bg: var(--color-rose-400);
     --badge-text: var(--color-rose-600);
   }
+  .state {
+    margin-inline: auto;
+    display: flex;
+    width: 100%;
+    max-width: calc(var(--spacing) * 72);
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: calc(var(--spacing) * 3);
+    border-radius: var(--radius-lg);
+    background-color: var(--color-background);
+    padding: calc(var(--spacing) * 6);
+    text-align: center;
+  }
+  .state__illustration {
+    position: relative;
+    display: flex;
+    height: calc(var(--spacing) * 36);
+    width: calc(var(--spacing) * 60);
+    align-items: center;
+    justify-content: center;
+  }
+  .state__card {
+    position: absolute;
+    display: flex;
+    height: calc(var(--spacing) * 11);
+    width: calc(var(--spacing) * 44);
+    align-items: center;
+    gap: calc(var(--spacing) * 1.5);
+    border-radius: var(--radius-lg);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-secondary);
+    padding: calc(var(--spacing) * 2.5);
+    background: linear-gradient(194deg, var(--color-primary) 27%, var(--color-background) 65%);
+    box-shadow: var(--box-shadow-card);
+  }
+  .state__card--top {
+    inset-inline-start: calc(var(--spacing) * 0);
+    top: calc(var(--spacing) * 0);
+  }
+  .state__card--middle {
+    inset-inline-start: calc(var(--spacing) * 14);
+    top: calc(var(--spacing) * 8);
+  }
+  .state__card--bottom {
+    inset-inline-start: calc(var(--spacing) * 5);
+    top: calc(var(--spacing) * 20);
+  }
+  .state__badge {
+    display: flex;
+    width: calc(var(--spacing) * 6);
+    height: calc(var(--spacing) * 6);
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border-radius: calc(infinity * 1px);
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    --tw-leading: 1;
+    line-height: 1;
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-content);
+    background: color-mix(in srgb, oklch(92.80% 0.0000 89.88) 88%, #fff);
+    @supports (color: color-mix(in lab, red, red)) {
+      background: color-mix(in oklab, var(--color-tertiary) 88%, var(--color-primary));
+    }
+  }
+  .state__body {
+    display: flex;
+    min-width: calc(var(--spacing) * 0);
+    flex: 1;
+    flex-direction: column;
+    gap: calc(var(--spacing) * 1);
+  }
+  .state__line {
+    display: block;
+    height: calc(var(--spacing) * 1.5);
+    border-radius: calc(infinity * 1px);
+    background: color-mix(in srgb, oklch(92.80% 0.0000 89.88) 78%, #fff);
+    @supports (color: color-mix(in lab, red, red)) {
+      background: color-mix(in oklab, var(--color-tertiary) 78%, var(--color-primary));
+    }
+  }
+  .state__line--title {
+    opacity: 75%;
+  }
+  .state__line--large {
+    width: calc(var(--spacing) * 14);
+  }
+  .state__line--medium {
+    width: calc(var(--spacing) * 12);
+  }
+  .state__line--small {
+    width: calc(var(--spacing) * 11);
+  }
+  .state__line--content {
+    width: 100%;
+  }
+  .state__message {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+    --tw-leading: calc(var(--spacing) * 6);
+    line-height: calc(var(--spacing) * 6);
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+    color: var(--color-content-secondary);
+  }
+  .state--frame-load-failed {
+    max-width: calc(var(--spacing) * 96);
+    gap: calc(var(--spacing) * 1);
+  }
+  .state__document {
+    position: absolute;
+    display: flex;
+    height: calc(var(--spacing) * 28);
+    width: calc(var(--spacing) * 20);
+    flex-direction: column;
+    border-radius: var(--radius-lg);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-secondary);
+    padding: calc(var(--spacing) * 0.5);
+    background: linear-gradient(235deg, var(--color-primary) 27%, var(--color-background) 65%);
+  }
+  .state__document--start {
+    inset-inline-start: calc(var(--spacing) * 4);
+    rotate: -21deg;
+  }
+  .state__document--center {
+    inset-inline-start: calc(var(--spacing) * 16);
+    z-index: 10;
+  }
+  .state__document--end {
+    inset-inline-start: calc(var(--spacing) * 24);
+    z-index: 0;
+    rotate: 21deg;
+  }
+  .state__document-body {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    align-items: center;
+    border-radius: var(--radius-lg);
+    padding: calc(var(--spacing) * 2.5);
+    box-shadow: var(--box-shadow-card);
+  }
+  .state__document-lines {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+  .state__document-line {
+    display: block;
+    height: calc(var(--spacing) * 1);
+    width: 100%;
+    border-radius: calc(infinity * 1px);
+    background: color-mix(in srgb, oklch(92.80% 0.0000 89.88) 78%, #fff);
+    @supports (color: color-mix(in lab, red, red)) {
+      background: color-mix(in oklab, var(--color-tertiary) 78%, var(--color-primary));
+    }
+  }
+  .state__document-line--short {
+    width: calc(var(--spacing) * 10);
+  }
+  .state__magnifier {
+    position: absolute;
+    inset-inline-start: 30%;
+    top: 30%;
+    z-index: 20;
+    background-image: none;
+  }
+  .state__magnifier-icon {
+    width: calc(var(--spacing) * 24);
+    height: calc(var(--spacing) * 24);
+    color: var(--color-content-secondary);
+    opacity: 20%;
+  }
+  .state__note {
+    text-align: center;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-leading: calc(var(--spacing) * 5);
+    line-height: calc(var(--spacing) * 5);
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+    color: var(--color-content);
+  }
+  .state__link {
+    color: color-mix(in srgb, oklch(54.6% 0.245 262.881), oklch(20.46% 0.0000 89.88) 10%);
+    @supports (color: color-mix(in lab, red, red)) {
+      color: color-mix(in oklab, var(--color-info-content), var(--color-content) 10%);
+    }
+  }
   .file-upload-input {
     position: relative;
     display: flex;
@@ -12058,29 +12273,13 @@
     }
   }
   .grid-wrapper {
-    margin-top: calc(var(--spacing) * 8);
-    display: grid;
+    --grid-max-cols: 12;
+    --grid-min-col: 13rem;
+    --grid-gap: 1rem;
     width: 100%;
-    grid-template-columns: repeat(1, minmax(0, 1fr));
     gap: calc(var(--spacing) * 4);
-    @media (width >= 30rem) {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-    @media (width >= 40rem) {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-    @media (width >= 48rem) {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-    @media (width >= 64rem) {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-    @media (width >= 80rem) {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-    }
-    @media (width >= 96rem) {
-      grid-template-columns: repeat(6, minmax(0, 1fr));
-    }
+    display: grid;
+    grid-template-columns: repeat( auto-fill, minmax( min( 100%, max( var(--grid-min-col), calc( (100cqw - (var(--grid-max-cols) - 1) * var(--grid-gap)) / var(--grid-max-cols) ) ) ), 1fr ) );
   }
   .grid-card {
     display: flex;
@@ -12173,6 +12372,39 @@
     font-weight: var(--font-weight-normal);
     color: var(--color-content-secondary);
   }
+  @keyframes icon-float {
+    0%, 100% {
+      translate: 0 0;
+    }
+    50% {
+      translate: 0 -5px;
+    }
+  }
+  .grid-card__icon {
+    pointer-events: none;
+    position: absolute;
+    width: calc(var(--spacing) * 4);
+    height: calc(var(--spacing) * 4);
+    transform: translate(var(--tx, 0px), var(--ty, 0px));
+    transition: transform 0.5s ease-out;
+  }
+  .grid-card__icon--repelling {
+    transition: transform 0.08s ease-out;
+  }
+  .grid-card__avocado {
+    display: block;
+    transform: translate(var(--tx, 0px), var(--ty, 0px));
+    transition: transform 0.5s ease-out;
+    &.grid-card__icon--repelling {
+      transition: transform 0.08s ease-out;
+    }
+  }
+  .grid-card__icon--float {
+    animation-name: icon-float;
+    animation-timing-function: ease-in-out;
+    animation-iteration-count: infinite;
+    animation-fill-mode: none;
+  }
   .color-scheme-switcher {
     display: inline-flex;
     align-items: center;
@@ -13520,6 +13752,15 @@
       margin-inline-start: calc(var(--spacing) * 0);
     }
   }
+  .panel-spacer {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    row-gap: calc(var(--spacing) * 12);
+    &>[data-component="avo/ui/panel_header_component"], &>[data-component="avo/cover_component"] {
+      margin-bottom: calc(var(--spacing) * -8);
+    }
+  }
 }
 .loading-spinner {
   position: absolute;
@@ -13854,6 +14095,18 @@
   inherits: false;
   initial-value: solid;
 }
+@property --tw-pan-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-pan-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-pinch-zoom {
+  syntax: "*";
+  inherits: false;
+}
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -13937,6 +14190,9 @@
       --tw-ease: initial;
       --tw-content: "";
       --tw-outline-style: solid;
+      --tw-pan-x: initial;
+      --tw-pan-y: initial;
+      --tw-pinch-zoom: initial;
     }
   }
 }