avo 4.0.0.beta.7 → 4.0.0.beta.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6424e1864bdedf92e5ab1582cdfcaf88370f621124cee06571fe7a1755e7bc93
-  data.tar.gz: bf1057da44c754a0f016a8725f4305bd0d3d63b4e3d9764c41fc7f367b5a06da
+  metadata.gz: 1948f12db4331c8c5d26b0e3530e612f327612747f71b34dd57b9462c44bd8a5
+  data.tar.gz: 5a808757824d134aa507c59b0b704a59f391b3cf030b91b16f95fd9fb5f7c2f4
 SHA512:
-  metadata.gz: 30250565035ceb2f975b9311dc1c65b443e8106d17500c931a25e263c0b4b2c1151af6dc8fa012e80ab48f02fd680550c5bc9a612c6d5f54ed1e35f7d21e5b42
-  data.tar.gz: 958c7972b07da9233434c08b844673f9cbc749b59cf6ec1753c2e16ff1a20c610b6e301c517f6b86c16e70ddfcd0c1d6c52b9cd351e3b3a3fb23b9130dcdc279
+  metadata.gz: 437a8176795c24f5173118886a4c1d2d94afd8ad7c76d911879d8c8f1fd63c220ad2845b5388c3dbe1e0da6f377605353589d2d263fdd64e5eef845b06a8f5ca
+  data.tar.gz: e4adc4d4475a6a9604a01377cad9fa5163a68bcf3ac6704d88f6d98590ed2142555db5d0def4faee8c6b8c9713af8ee278a1dccd076ed6fd7e5c53487c642db1

data/Gemfile

@@ -141,6 +141,7 @@ group :test do
   gem "rspec-rails", "~> 6.0", ">= 6.0.3"
   gem "rspec-retry", "~> 0.6.2"
   gem "rails-controller-testing"
+  gem "parallel_tests"
 
   # Browser testing
   gem "capybara"

data/Gemfile.lock

@@ -1,17 +1,17 @@
 PATH
   remote: .
   specs:
-    avo (4.0.0.beta.7)
+    avo (4.0.0.beta.8)
       actionview (>= 6.1)
       active_link_to
       activerecord (>= 6.1)
       activesupport (>= 6.1)
       addressable
-      avo-icons (>= 0.1.1)
+      avo-icons (>= 0.1.2)
       docile
       meta-tags
       pagy (>= 43.0)
-      prop_initializer (>= 0.2.0)
+      prop_initializer (>= 0.3.0)
       turbo-rails (>= 2.0.0)
       turbo_power (>= 0.6.0)
       view_component (>= 3.7.0)
@@ -177,7 +177,7 @@ GEM
       erubi (~> 1.4)
       parser (>= 2.4)
       smart_properties
-    bigdecimal (4.0.1)
+    bigdecimal (4.1.0)
     bindex (0.8.1)
     bootsnap (1.18.6)
       msgpack (~> 1.2)
@@ -500,6 +500,8 @@ GEM
       uri
       yaml
     parallel (1.27.0)
+    parallel_tests (5.6.0)
+      parallel
     parser (3.3.9.0)
       ast (~> 2.4.1)
       racc
@@ -515,7 +517,7 @@ GEM
     prettyprint (0.2.0)
     prism (1.4.0)
     process_executer (1.3.0)
-    prop_initializer (0.2.0)
+    prop_initializer (0.3.0)
       zeitwerk (>= 2.6.18)
     propshaft (1.1.0)
       actionpack (>= 7.0.0)
@@ -802,6 +804,7 @@ GEM
 PLATFORMS
   arm64-darwin-23
   arm64-darwin-24
+  arm64-darwin-25
   x86_64-linux
 
 DEPENDENCIES
@@ -862,6 +865,7 @@ DEPENDENCIES
   money-rails (~> 1.12)
   net-smtp
   openssl
+  parallel_tests
   pg (>= 0.18, < 2.0)
   pluggy!
   prefixed_ids

data/Rakefile

@@ -4,6 +4,17 @@ rescue LoadError
   puts "You must `gem install bundler` and `bundle install` to run rake tasks"
 end
 
+begin
+  # Only load `parallel_tests` rake tasks when we actually invoke them.
+  # Loading them for regular Rails rake tasks (eg `bin/rails db:create`) can break
+  # in CI because parallel_tests inspects database config before the Rails app is initialized.
+  if ARGV.any? { |arg| arg.start_with?("parallel:") }
+    require "parallel_tests/tasks"
+  end
+rescue LoadError
+  # parallel_tests is an optional dev/test dependency
+end
+
 require "rdoc/task"
 
 RDoc::Task.new(:rdoc) do |rdoc|

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

@@ -23,6 +23,7 @@
     --color-orange-500: oklch(70.5% 0.213 47.604);
     --color-orange-600: oklch(64.6% 0.222 41.116);
     --color-orange-700: oklch(55.3% 0.195 38.402);
+    --color-orange-950: oklch(26.6% 0.079 36.259);
     --color-amber-50: oklch(98.7% 0.022 95.277);
     --color-amber-100: oklch(96.2% 0.059 95.617);
     --color-amber-300: oklch(87.9% 0.169 91.605);
@@ -241,6 +242,7 @@
     --container-2xl: 42rem;
     --container-3xl: 48rem;
     --container-4xl: 56rem;
+    --container-6xl: 72rem;
     --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
     --text-sm: 0.875rem;
@@ -317,14 +319,20 @@
     --color-avo-neutral-800: oklch(39.04% 0.0000 89.88);
     --color-avo-neutral-900: oklch(27.68% 0.0000 89.88);
     --color-avo-neutral-950: oklch(20.46% 0.0000 89.88);
+    --color-success: var(--color-green-500);
     --color-success-content: var(--color-green-600);
+    --color-success-foreground: var(--color-green-400);
+    --color-info: var(--color-blue-400);
     --color-info-content: var(--color-blue-600);
     --color-info-foreground: var(--color-blue-500);
     --color-warning: var(--color-yellow-500);
     --color-warning-content: var(--color-yellow-600);
+    --color-warning-foreground: var(--color-yellow-400);
     --color-danger: var(--color-red-500);
     --color-danger-content: var(--color-red-600);
+    --color-danger-foreground: var(--color-red-400);
     --box-shadow-card: 0px 8px 16px 0px rgba(0, 0, 0, 0.04);
+    --box-shadow-dropdown-card: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
     --box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
     --box-shadow-grid-card: 0 -1.5px 0 1px var(--color-secondary) inset, 0 0.8px 0 1.3px var(--color-primary) inset;
     --box-shadow-error: 0 0 5px 1px var(--color-red-600), 0 0 0 1px var(--color-red-600), 0 0 0 3px var(--color-red-300);
@@ -1012,6 +1020,9 @@
   .min-h-56 {
     min-height: calc(var(--spacing) * 56);
   }
+  .min-h-64 {
+    min-height: calc(var(--spacing) * 64);
+  }
   .min-h-\[8rem\] {
     min-height: 8rem;
   }
@@ -1144,6 +1155,9 @@
   .max-w-4xl {
     max-width: var(--container-4xl);
   }
+  .max-w-6xl {
+    max-width: var(--container-6xl);
+  }
   .max-w-24 {
     max-width: calc(var(--spacing) * 24);
   }
@@ -1153,8 +1167,8 @@
   .max-w-full {
     max-width: 100%;
   }
-  .max-w-lg {
-    max-width: var(--container-lg);
+  .max-w-md {
+    max-width: var(--container-md);
   }
   .max-w-screen-xl {
     max-width: var(--breakpoint-xl);
@@ -1228,6 +1242,14 @@
     --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-x-0 {
+    --tw-translate-x: calc(var(--spacing) * 0);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+  .translate-x-10 {
+    --tw-translate-x: calc(var(--spacing) * 10);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-y-1\/2 {
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1310,6 +1332,9 @@
   .grid-cols-12 {
     grid-template-columns: repeat(12, minmax(0, 1fr));
   }
+  .grid-cols-\[repeat\(auto-fit\,minmax\(min\(100\%\,247px\)\,1fr\)\)\] {
+    grid-template-columns: repeat(auto-fit,minmax(min(100%, 247px),1fr));
+  }
   .grid-rows-1 {
     grid-template-rows: repeat(1, minmax(0, 1fr));
   }
@@ -1393,6 +1418,13 @@
       margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .space-y-3 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-4 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -1605,6 +1637,10 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+  }
   .border-2 {
     border-style: var(--tw-border-style);
     border-width: 2px;
@@ -1705,9 +1741,6 @@
   .border-green-500 {
     border-color: var(--color-green-500);
   }
-  .border-green-600 {
-    border-color: var(--color-green-600);
-  }
   .border-indigo-300 {
     border-color: var(--color-indigo-300);
   }
@@ -1732,8 +1765,11 @@
   .border-orange-500 {
     border-color: var(--color-orange-500);
   }
-  .border-orange-600 {
-    border-color: var(--color-orange-600);
+  .border-orange-600\/40 {
+    border-color: color-mix(in srgb, oklch(64.6% 0.222 41.116) 40%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-orange-600) 40%, transparent);
+    }
   }
   .border-pink-300 {
     border-color: var(--color-pink-300);
@@ -1960,12 +1996,15 @@
   .bg-orange-50 {
     background-color: var(--color-orange-50);
   }
-  .bg-orange-400 {
-    background-color: var(--color-orange-400);
-  }
   .bg-orange-500 {
     background-color: var(--color-orange-500);
   }
+  .bg-orange-500\/10 {
+    background-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 10%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-orange-500) 10%, transparent);
+    }
+  }
   .bg-orange-700 {
     background-color: var(--color-orange-700);
   }
@@ -2289,6 +2328,9 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .text-\[0\.85em\] {
+    font-size: 0.85em;
+  }
   .text-\[10px\] {
     font-size: 10px;
   }
@@ -2465,9 +2507,15 @@
   .text-orange-500 {
     color: var(--color-orange-500);
   }
+  .text-orange-600 {
+    color: var(--color-orange-600);
+  }
   .text-orange-700 {
     color: var(--color-orange-700);
   }
+  .text-orange-950 {
+    color: var(--color-orange-950);
+  }
   .text-pink-500 {
     color: var(--color-pink-500);
   }
@@ -2668,10 +2716,22 @@
     --tw-duration: 200ms;
     transition-duration: 200ms;
   }
+  .duration-300 {
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
+  }
+  .ease-in {
+    --tw-ease: var(--ease-in);
+    transition-timing-function: var(--ease-in);
+  }
   .ease-in-out {
     --tw-ease: var(--ease-in-out);
     transition-timing-function: var(--ease-in-out);
   }
+  .ease-out {
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+  }
   .select-none {
     -webkit-user-select: none;
     user-select: none;
@@ -4434,11 +4494,45 @@
       }
     }
   }
+  .dark\:border-orange-500\/30 {
+    &:where(.dark, .dark *) {
+      border-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        border-color: color-mix(in oklab, var(--color-orange-500) 30%, transparent);
+      }
+    }
+  }
+  .dark\:bg-orange-500\/15 {
+    &:where(.dark, .dark *) {
+      background-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 15%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-orange-500) 15%, transparent);
+      }
+    }
+  }
+  .dark\:bg-orange-950\/30 {
+    &:where(.dark, .dark *) {
+      background-color: color-mix(in srgb, oklch(26.6% 0.079 36.259) 30%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-orange-950) 30%, transparent);
+      }
+    }
+  }
   .dark\:bg-tertiary {
     &:where(.dark, .dark *) {
       background-color: var(--color-tertiary);
     }
   }
+  .dark\:text-orange-50 {
+    &:where(.dark, .dark *) {
+      color: var(--color-orange-50);
+    }
+  }
+  .dark\:text-orange-300 {
+    &:where(.dark, .dark *) {
+      color: var(--color-orange-300);
+    }
+  }
   .print\:hidden {
     @media print {
       display: none;
@@ -7682,6 +7776,9 @@
     transform: scale(0.75) translateY(2px);
     box-shadow: none;
   }
+  .hotkeys-hide-badges .hotkey-badge kbd {
+    display: none;
+  }
   @layer base {
     a {
       color: var(--color-info-content);
@@ -8412,7 +8509,7 @@
       border-radius: var(--radius-2xl);
       background-color: var(--color-primary);
       padding: calc(var(--spacing) * 4);
-      --tw-shadow: 0 8px 16px 0 var(--tw-shadow-color, rgba(0, 0, 0, 0.08));
+      --tw-shadow: 0px 8px 16px 0px var(--tw-shadow-color, rgba(0, 0, 0, 0.08));
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
       transition: margin 0.1s ease-in-out, width 0.1s ease-in-out;
       height: calc(100dvh - var(--spacing) - var(--top-navbar-height));
@@ -8423,6 +8520,7 @@
         flex-direction: column;
         overflow-y: auto;
         padding-inline: calc(var(--spacing) * 2);
+        padding-top: calc(var(--spacing) * 1);
       }
       .avo-container {
         display: flex;
@@ -10596,6 +10694,7 @@
     display: flex;
     width: 100%;
     flex: 1;
+    flex-direction: column;
     flex-wrap: wrap;
     :where(& > :not(:last-child)) {
       --tw-divide-y-reverse: 0;
@@ -11319,15 +11418,32 @@
       background-color: transparent !important;
       color: var(--color-content-secondary);
     }
+    &.menu__item--action {
+      gap: calc(var(--spacing) * 1.5);
+      color: var(--color-content-secondary);
+      &.dropdown-menu__item--disabled {
+        opacity: 60%;
+      }
+    }
+    &:hover {
+      background-color: var(--color-secondary);
+      color: var(--color-content);
+    }
   }
-  .dropdown-menu__item--active, .dropdown-menu__item:hover, .dropdown-menu__list > :is(a, button):hover {
+  .dropdown-menu__list > :is(a, button):hover {
     background-color: var(--color-secondary);
   }
+  .dropdown-menu__item--active {
+    background: color-mix(in srgb, oklch(97.31% 0.0000 89.88), oklch(20.46% 0.0000 89.88) 5%);
+    @supports (color: color-mix(in lab, red, red)) {
+      background: color-mix(in oklab, var(--color-secondary), var(--color-content) 5%);
+    }
+  }
   .dropdown-menu__item:focus-visible, .dropdown-menu__list > :is(a, button):focus-visible {
     background-color: var(--color-primary);
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    --tw-ring-color: var(--color-content);
+    --tw-ring-color: var(--color-info-foreground);
     --tw-outline-style: none;
     outline-style: none;
     --tw-ring-inset: inset;
@@ -11336,7 +11452,34 @@
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
     flex-shrink: 0;
-    color: var(--color-content);
+    color: inherit;
+    &.menu__item__icon--action {
+      box-sizing: content-box;
+      border-radius: var(--radius-sm);
+      background-color: var(--color-secondary);
+      padding: calc(var(--spacing) * 0.5);
+      .dropdown-menu__item--active &, .dropdown-menu__item:hover & {
+        background-color: inherit;
+      }
+    }
+  }
+  .dropdown-card {
+    overflow: hidden;
+    border-radius: var(--radius-lg);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-tertiary);
+    background-color: var(--color-secondary);
+    padding: calc(var(--spacing) * 0.5);
+    box-shadow: var(--box-shadow-dropdown-card);
+  }
+  .dropdown-card__body {
+    overflow: hidden;
+    border-radius: var(--radius-lg);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--color-tertiary);
+    background-color: var(--color-primary);
   }
   @layer base {
     input[type="radio"] {
@@ -11889,6 +12032,120 @@
     --tw-leading: calc(var(--spacing) * 4);
     line-height: calc(var(--spacing) * 4);
   }
+  .alert {
+    pointer-events: auto;
+    position: relative;
+    display: grid;
+    width: 100%;
+    max-width: var(--container-md);
+    min-width: calc(var(--spacing) * 0);
+    --tw-translate-x: calc(var(--spacing) * 10);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+    align-items: flex-start;
+    gap: calc(var(--spacing) * 1);
+    border-radius: var(--radius-lg);
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    padding: calc(var(--spacing) * 3);
+    opacity: 0%;
+    grid-template-columns: auto 1fr auto;
+    background: var(--alert-background);
+    border-color: var(--alert-border);
+    will-change: opacity, transform;
+    --alert-color: var(--color-foreground);
+    --alert-title-color: oklch(20.46% 0.0000 89.88);
+    @supports (color: color-mix(in lab, red, red)) {
+      --alert-title-color: color-mix(in oklab, var(--color-content) 20%, var(--alert-color));
+    }
+    --alert-message-color: oklch(20.46% 0.0000 89.88);
+    @supports (color: color-mix(in lab, red, red)) {
+      --alert-message-color: color-mix(in oklab, var(--color-content) 10%, var(--alert-color));
+    }
+    --alert-background: var(--color-background);
+    --alert-border: var(--color-tertiary);
+  }
+  .alert__icon-container {
+    display: flex;
+    flex-shrink: 0;
+    align-items: flex-start;
+    justify-content: center;
+    padding: calc(var(--spacing) * 1);
+    color: var(--alert-title-color);
+  }
+  .alert__icon-container--status {
+    grid-column-start: 1;
+    align-self: stretch;
+  }
+  .alert__icon {
+    width: calc(var(--spacing) * 3.5);
+    height: calc(var(--spacing) * 3.5);
+  }
+  .alert__body {
+    grid-column-start: 2;
+    display: flex;
+    min-width: calc(var(--spacing) * 0);
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+    gap: calc(var(--spacing) * 0.5);
+    align-self: stretch;
+  }
+  .alert__title {
+    width: 100%;
+    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-medium);
+    font-weight: var(--font-weight-medium);
+    color: var(--alert-title-color);
+  }
+  .alert__message {
+    width: 100%;
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    --tw-leading: calc(var(--spacing) * 4);
+    line-height: calc(var(--spacing) * 4);
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+    color: var(--alert-message-color);
+  }
+  .alert__icon-container--close {
+    grid-column-start: 3;
+    align-self: flex-start;
+  }
+  .alert--success {
+    --alert-color: var(--color-success-content);
+    --alert-background: color-mix(in srgb, oklch(72.3% 0.219 149.579) 15%, #fff);
+    @supports (color: color-mix(in lab, red, red)) {
+      --alert-background: color-mix(in oklab, var(--color-success) 15%, var(--color-primary));
+    }
+    --alert-border: var(--color-success-foreground);
+  }
+  .alert--info {
+    --alert-color: var(--color-info-content);
+    --alert-background: color-mix(in srgb, oklch(70.7% 0.165 254.624) 15%, #fff);
+    @supports (color: color-mix(in lab, red, red)) {
+      --alert-background: color-mix(in oklab, var(--color-info) 15%, var(--color-primary));
+    }
+    --alert-border: var(--color-info-foreground);
+  }
+  .alert--warning {
+    --alert-color: var(--color-warning-content);
+    --alert-background: color-mix(in srgb, oklch(79.5% 0.184 86.047) 15%, #fff);
+    @supports (color: color-mix(in lab, red, red)) {
+      --alert-background: color-mix(in oklab, var(--color-warning) 15%, var(--color-primary));
+    }
+    --alert-border: var(--color-warning-foreground);
+  }
+  .alert--danger {
+    --alert-color: var(--color-danger-content);
+    --alert-background: color-mix(in srgb, oklch(63.7% 0.237 25.331) 15%, #fff);
+    @supports (color: color-mix(in lab, red, red)) {
+      --alert-background: color-mix(in oklab, var(--color-danger) 15%, var(--color-primary));
+    }
+    --alert-border: var(--color-danger-foreground);
+  }
   .breadcrumbs {
     width: 100%;
   }
@@ -11954,6 +12211,16 @@
     }
   }
   @layer base {
+    .button-icon {
+      display: inline-flex;
+      cursor: pointer;
+      &:focus-visible {
+        border-radius: var(--radius-lg);
+        --tw-outline-style: none;
+        outline-style: none;
+        box-shadow: var(--box-shadow-focus);
+      }
+    }
     .button {
       display: inline-flex;
       flex-grow: 0;
@@ -11997,7 +12264,7 @@
         border-radius: var(--radius-lg);
         --tw-outline-style: none;
         outline-style: none;
-        box-shadow: 0 0 0 1px var(--color-primary), 0 0 0 3px var(--color-info-foreground);
+        box-shadow: var(--box-shadow-focus);
       }
       --btn-color-accent: var(--color-avo-neutral-50);
       --btn-color-accent-content: var(--color-avo-neutral-100);