avo 4.0.0.beta.43 → 4.0.0.beta.45

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 48c7b20a4be4b85ecfdc9ddfa3555ff9879a93e198444117995d5114b283008d
-  data.tar.gz: d616fda1761657b357ca2019b05618113b1082d12e78d955aa64cd50af10e96f
+  metadata.gz: 0025b604ab0ca5ff4bdf83b41204be7b6ca2eb6211269b45bb1827f059a731fc
+  data.tar.gz: 1f5ac00fe7cf8b1218c4d6ec6657820175e7fce008d027f449ade483126a9791
 SHA512:
-  metadata.gz: 766ba7782e99ffe20da840c7c3259efe126558aade7c362eecb9aae00672e09ca95294aa9231530ab724591d7c449976a4911732f1b8eeca2bfefa1995baf168
-  data.tar.gz: ee155888e963b4d2f417522044d12b3f26507308e19146cdb3bd8100d3e2808fd9dab9842addab04106683ce33e6d474c7b0b38dd64c7d612811b30acdcf15b3
+  metadata.gz: 9e26e80cadbb04224a25ce1ae3321545426a334ac195cde6f0880143ef3d38377788e39189d2f77e180ea8c5152c7647874b112e4dd1c6b9931907e6628f82d0
+  data.tar.gz: 7d6e56e3c9ddae3a12767064d99166fe603391b2157f792ef79107943e068cd035e11241d32f1f0929a4bcc472e01a3b4513ad7d953391f406aecc33667f6dd3

data/Gemfile.lock

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

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

@@ -349,6 +349,7 @@
     --color-primary: var(--color-white);
     --color-secondary: var(--color-avo-neutral-100);
     --color-tertiary: var(--color-avo-neutral-200);
+    --color-quaternary: var(--color-avo-neutral-300);
     --color-content: var(--color-avo-neutral-950);
     --color-content-secondary: var(--color-avo-neutral-500);
     --color-scheme: var(--color-white);
@@ -361,6 +362,8 @@
     --color-navbar-background: var(--color-avo-neutral-900);
     --color-main-content-background: var(--color-primary);
     --color-main-content-border: var(--border-color);
+    --radius-card: var(--radius-xl);
+    --radius-card-wrapper: var(--radius-lg);
     --top-navbar-height: 3rem;
     --navbar-notch-color: var(--color-navbar-background);
     --border-color: var(--color-tertiary);
@@ -577,6 +580,9 @@
   .inset-auto {
     inset: auto;
   }
+  .inset-y-0 {
+    inset-block: calc(var(--spacing) * 0);
+  }
   .start {
     inset-inline-start: var(--spacing);
   }
@@ -757,6 +763,9 @@
   .my-auto {
     margin-block: auto;
   }
+  .-ms-1\.5 {
+    margin-inline-start: calc(var(--spacing) * -1.5);
+  }
   .ms-1 {
     margin-inline-start: calc(var(--spacing) * 1);
   }
@@ -1963,9 +1972,9 @@
   .rounded-es {
     border-end-start-radius: 0.25rem;
   }
-  .rounded-t {
-    border-top-left-radius: 0.25rem;
-    border-top-right-radius: 0.25rem;
+  .rounded-t-card-wrapper {
+    border-top-left-radius: var(--radius-card-wrapper);
+    border-top-right-radius: var(--radius-card-wrapper);
   }
   .rounded-l {
     border-top-left-radius: 0.25rem;
@@ -2523,6 +2532,9 @@
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
+  .px-2\.5 {
+    padding-inline: calc(var(--spacing) * 2.5);
+  }
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
@@ -2748,9 +2760,6 @@
   .text-amber-700 {
     color: var(--color-amber-700);
   }
-  .text-black {
-    color: var(--color-black);
-  }
   .text-blue-500 {
     color: var(--color-blue-500);
   }
@@ -4601,6 +4610,11 @@
       padding-inline: calc(var(--spacing) * 24);
     }
   }
+  .lg\:ms-0 {
+    @media (width >= 64rem) {
+      margin-inline-start: calc(var(--spacing) * 0);
+    }
+  }
   .lg\:flex {
     @media (width >= 64rem) {
       display: flex;
@@ -4954,6 +4968,7 @@ tag.tagify__tag {
     --color-primary: var(--color-avo-neutral-950);
     --color-secondary: var(--color-avo-neutral-800);
     --color-tertiary: var(--color-avo-neutral-700);
+    --color-quaternary: var(--color-avo-neutral-600);
     --color-content: var(--color-white);
     --color-content-secondary: var(--color-avo-neutral-300);
     --color-scheme: var(--color-black);
@@ -5884,31 +5899,26 @@ tag.tagify__tag {
   }
   [data-controller~="sidebar"] {
     --sidebar-width: calc(var(--spacing) * 64);
-    --sidebar-offset-size: 0rem;
-    --content-width: calc(100% - var(--spacing));
+    --sidebar-offset-size: 0;
+    --content-width: calc(100%);
   }
   @media (min-width: 64rem) {
     [data-controller~="sidebar"][data-sidebar-open-value="true"] {
       --sidebar-offset-size: var(--sidebar-width);
     }
   }
-  [data-controller~="sidebar"][data-sidebar-open-value="false"] {
-    .main-content {
-      margin-inline-start: calc(var(--spacing) * 0);
-    }
-  }
   .main {
     padding-top: var(--top-navbar-height);
-    padding-inline-start: calc(var(--sidebar-offset-size) - var(--spacing));
+    padding-inline-start: var(--sidebar-offset-size);
     transition: padding 0.1s ease-in-out;
   }
   .main-content {
-    --main-content-start-radius: 0px;
-    --main-content-end-radius: 0px;
+    --main-content-start-radius: 0;
+    --main-content-end-radius: 0;
+    --main-content-width: var(--content-width);
     position: relative;
-    margin-inline-start: calc(var(--spacing) * 1);
     display: flex;
-    width: var(--content-width);
+    width: var(--main-content-width);
     flex-direction: column;
     border-start-start-radius: var(--main-content-start-radius);
     border-start-end-radius: var(--main-content-end-radius);
@@ -5927,10 +5937,33 @@ tag.tagify__tag {
     transition: margin 0.1s ease-in-out, width 0.1s ease-in-out;
     min-height: calc(100dvh - var(--top-navbar-height) - var(--spacing));
     @container style(--navbar-notch-enabled: true) {
+      --main-content-start-radius: var(--main-content-radius);
       --main-content-end-radius: var(--main-content-radius);
     }
     @container style(--navbar-notch-enabled: true) and style(--top-navbar-start-notch-align-with-main-content: true) {
       --main-content-start-radius: var(--main-content-radius);
+      --main-content-end-radius: var(--main-content-radius);
+    }
+  }
+  @media (min-width: 64rem) {
+    .sidebar-open .avo-sidebar {
+      transform: translateX(0);
+    }
+    html[dir="rtl"] .sidebar-open .avo-sidebar {
+      transform: translateX(0);
+    }
+    @container style(--navbar-notch-enabled: true) and style(--top-navbar-start-notch-align-with-main-content: false) {
+      .sidebar-open .main-content {
+        --main-content-start-radius: 0;
+      }
+    }
+  }
+  @media (width < 64rem) {
+    .sidebar-mobile-open .avo-sidebar {
+      transform: translateX(0);
+    }
+    html[dir="rtl"] .sidebar-mobile-open .avo-sidebar {
+      transform: translateX(0);
     }
   }
   .main-content.focused, .main-content:focus-visible {
@@ -5941,7 +5974,10 @@ tag.tagify__tag {
     display: flex;
     flex: 1;
     flex-direction: column;
-    padding-inline: calc(var(--spacing) * 2);
+    padding-inline: calc(var(--spacing) * 0);
+    @media (width >= 48rem) {
+      padding-inline: calc(var(--spacing) * 2);
+    }
   }
   .container-large {
     @media (width >= 96rem) {
@@ -6152,25 +6188,6 @@ tag.tagify__tag {
   html[dir="rtl"] .avo-sidebar {
     transform: translateX(100%);
   }
-  @media (min-width: 64rem) {
-    .sidebar-open .avo-sidebar {
-      transform: translateX(0);
-    }
-    html[dir="rtl"] .sidebar-open .avo-sidebar {
-      transform: translateX(0);
-    }
-    .main:not(.sidebar-open) .main-content {
-      margin-inline-start: calc(var(--spacing) * 0);
-    }
-  }
-  @media (width < 64rem) {
-    .sidebar-mobile-open .avo-sidebar {
-      transform: translateX(0);
-    }
-    html[dir="rtl"] .sidebar-mobile-open .avo-sidebar {
-      transform: translateX(0);
-    }
-  }
   .button-spinner {
     width: 24px;
     height: 24px;
@@ -6964,7 +6981,7 @@ tag.tagify__tag {
     flex-direction: column;
     align-items: flex-start;
     align-self: stretch;
-    border-radius: var(--radius-xl);
+    border-radius: var(--radius-card);
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: var(--color-tertiary);
@@ -7043,7 +7060,7 @@ tag.tagify__tag {
     flex-direction: column;
     align-items: flex-start;
     align-self: stretch;
-    border-radius: var(--radius-lg);
+    border-radius: var(--radius-card-wrapper);
     border-style: var(--tw-border-style);
     border-width: 1px;
     border-color: var(--color-tertiary);
@@ -7374,6 +7391,28 @@ tag.tagify__tag {
       border-color: var(--color-accent);
       margin-bottom: -1px;
     }
+    .tab-group {
+      position: relative;
+      border-radius: var(--radius-2xl);
+      border-style: var(--tw-border-style);
+      border-width: 1px;
+      --tw-border-style: dashed;
+      border-style: dashed;
+      border-color: var(--color-tertiary);
+      &:hover {
+        border-color: var(--color-quaternary);
+      }
+      --tab-group-modifier: 4;
+      --tab-group-padding: calc(var(--tab-group-modifier) - (var(--tab-group-modifier)/2));
+      width: calc(100% + calc(var(--spacing) * var(--tab-group-modifier)));
+      margin-inline: calc(var(--spacing) * var(--tab-group-padding) * -1);
+      padding: calc(var(--spacing) * var(--tab-group-padding));
+    }
+    @media (width > 48rem) {
+      .tab-group {
+        --tab-group-modifier: 8;
+      }
+    }
   }
   .badge {
     display: inline-flex;
@@ -7941,7 +7980,6 @@ tag.tagify__tag {
   .dropdown-menu {
     display: flex;
     width: 100%;
-    min-width: calc(var(--spacing) * 48);
     flex-direction: column;
     border-radius: var(--radius-lg);
     border-style: var(--tw-border-style);
@@ -8400,9 +8438,10 @@ tag.tagify__tag {
       display: flex;
       cursor: pointer;
       align-items: center;
+      justify-content: center;
       border-radius: var(--radius-lg);
       color: var(--color-content-secondary);
-      padding-inline-end: var(--input-icon-offset);
+      padding-inline: var(--input-icon-offset);
       outline-offset: var(--focus-outline-offset-inset);
     }
     .field-wrapper__input:has(.input-field__password-toggle) input {
@@ -8954,11 +8993,12 @@ tag.tagify__tag {
   }
   .breadcrumbs {
     position: sticky;
+    top: var(--top-navbar-height);
     z-index: 40;
     margin-bottom: calc(var(--spacing) * 4);
     width: 100%;
     background-color: var(--color-main-content-background);
-    top: calc(var(--top-navbar-height));
+    margin-top: calc(var(--spacing) * -1);
   }
   .breadcrumbs::after {
     content: "";
@@ -9009,6 +9049,12 @@ tag.tagify__tag {
     &:first-child {
       margin-inline-start: calc(var(--spacing) * -1);
     }
+    &:first-child:has(.breadcrumb-element__icon) .breadcrumb-element__text {
+      display: none;
+      @media (width >= 48rem) {
+        display: inline;
+      }
+    }
     &:focus-visible {
       outline-offset: var(--focus-outline-offset-inset);
     }
@@ -10066,12 +10112,12 @@ tag.tagify__tag {
   }
   .color-scheme-switcher__compact-trigger {
     display: inline-flex;
-    height: calc(var(--spacing) * 8);
+    height: calc(var(--spacing) * 6);
     align-items: center;
     gap: calc(var(--spacing) * 1);
     border-radius: var(--radius-lg);
-    padding-inline-start: calc(var(--spacing) * 2);
-    padding-inline-end: calc(var(--spacing) * 1.5);
+    padding-inline-start: calc(var(--spacing) * 1.5);
+    padding-inline-end: calc(var(--spacing) * 1);
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
@@ -10097,6 +10143,13 @@ tag.tagify__tag {
       color: var(--top-navbar-content-hover);
     }
   }
+  @media (min-width: 64rem) {
+    .color-scheme-switcher__compact-trigger {
+      height: calc(var(--spacing) * 8);
+      padding-inline-start: calc(var(--spacing) * 2);
+      padding-inline-end: calc(var(--spacing) * 1.5);
+    }
+  }
   .color-scheme-switcher__chevron {
     width: calc(var(--spacing) * 3);
     height: calc(var(--spacing) * 3);
@@ -11165,8 +11218,9 @@ tag.tagify__tag {
     inset-inline-end: calc(var(--spacing) * 0);
     display: flex;
     align-items: center;
+    justify-content: center;
     border-radius: var(--radius-lg);
-    padding-inline-end: calc(var(--spacing) * 2.5);
+    padding-inline: calc(var(--spacing) * 2.5);
     color: var(--color-content-secondary);
     outline-offset: var(--focus-outline-offset-inset);
   }
@@ -11190,22 +11244,6 @@ tag.tagify__tag {
     text-align: start;
     white-space: normal;
   }
-  @layer components {
-    .tab-group {
-      position: relative;
-      border-radius: var(--radius-2xl);
-      border-style: var(--tw-border-style);
-      border-width: 1px;
-      --tw-border-style: dashed;
-      border-style: dashed;
-      border-color: var(--color-tertiary);
-      --tab-group-modifier: 8;
-      --tab-group-padding: calc(var(--tab-group-modifier) - (var(--tab-group-modifier)/2));
-      width: calc(100% + calc(var(--spacing) * var(--tab-group-modifier)));
-      margin-inline: calc(var(--spacing) * var(--tab-group-padding) * -1);
-      padding: calc(var(--spacing) * var(--tab-group-padding));
-    }
-  }
   .css-animate-dialog-slide-down[open], .css-animate-slide-down {
     opacity: 1;
     transform: translateY(0);

data/app/assets/stylesheets/application.css

@@ -162,7 +162,6 @@
   @import "./css/components/hotkey.css";
   @import "./css/components/modal.css";
   @import "./css/components/filters.css";
-  @import "./css/components/tab_group.css";
   @import "./css/css-animations.css";
   @import "./css/sidebar.css";
 

data/app/assets/stylesheets/css/components/breadcrumbs.css

@@ -1,6 +1,7 @@
 .breadcrumbs {
-  @apply sticky z-40 w-full bg-(--color-main-content-background) mb-4;
-  top: calc(var(--top-navbar-height));
+  @apply sticky z-40 w-full bg-(--color-main-content-background) mb-4 top-(--top-navbar-height);
+  /* Vertical optical adjustment */
+  @apply  -mt-1;
 }
 
 /* Soft fade strip just below the sticky breadcrumbs. Eases the seam between
@@ -36,6 +37,14 @@
     @apply -ms-1;
   }
 
+  /* The home crumb is the first element and is the only one carrying an icon by
+     default. On small screens collapse it to just the icon to save horizontal
+     space; the label returns at md. Scoping to :has(icon) means a custom first
+     crumb without an icon keeps its text instead of rendering empty. */
+  &:first-child:has(.breadcrumb-element__icon) .breadcrumb-element__text {
+    @apply hidden md:inline;
+  }
+
   &:focus-visible {
     outline-offset: var(--focus-outline-offset-inset);
   }

data/app/assets/stylesheets/css/components/color_scheme_switcher.css

@@ -20,7 +20,7 @@
 }
 
 .color-scheme-switcher__compact-trigger {
-  @apply inline-flex items-center gap-1 h-8 ps-2 pe-1.5 rounded-lg transition-all duration-150;
+  @apply inline-flex items-center gap-1 h-6 ps-1.5 pe-1 rounded-lg transition-all duration-150;
   @apply text-avo-neutral-300 bg-avo-neutral-800 border border-avo-neutral-700 hover:bg-avo-neutral-700 hover:text-avo-neutral-50;
   @apply cursor-pointer;
   background-color: var(--top-navbar-control-background);
@@ -33,6 +33,12 @@
   }
 }
 
+@media (min-width: theme(--breakpoint-lg)) {
+  .color-scheme-switcher__compact-trigger {
+    @apply h-8 ps-2 pe-1.5;
+  }
+}
+
 .color-scheme-switcher__chevron {
   @apply size-3 opacity-60;
 }

data/app/assets/stylesheets/css/components/filters.css

@@ -51,7 +51,7 @@
 }
 
 .filters-date-input__action {
-  @apply absolute inset-y-0 end-0 flex items-center pe-2.5 text-content-secondary rounded-lg;
+  @apply absolute inset-y-0 end-0 flex items-center justify-center px-2.5 text-content-secondary rounded-lg;
 
   outline-offset: var(--focus-outline-offset-inset);
 }

data/app/assets/stylesheets/css/components/input.css

@@ -150,9 +150,9 @@
     ========================================================================== */
 
   .input-field__password-toggle {
-    @apply absolute text-content-secondary inset-y-0 end-0 flex items-center cursor-pointer rounded-lg;
+    @apply absolute text-content-secondary inset-y-0 end-0 flex items-center justify-center cursor-pointer rounded-lg;
 
-    padding-inline-end: var(--input-icon-offset);
+    padding-inline: var(--input-icon-offset);
     outline-offset: var(--focus-outline-offset-inset);
   }
 

data/app/assets/stylesheets/css/components/ui/card.css

@@ -1,6 +1,12 @@
+/* Card radii as shared design tokens. Consumed via Tailwind's `rounded-(--var)`
+   arbitrary-property syntax so the value can be reused and overridden anywhere
+   instead of being a one-off literal. */
+@theme {
+}
+
 /* Card Component - Based on Figma Design System */
 .card {
-  @apply flex flex-col items-start self-stretch rounded-xl border border-tertiary bg-secondary;
+  @apply flex flex-col items-start self-stretch rounded-card border border-tertiary bg-secondary;
 
   /* Contain horizontal overflow so a wide inner scroller (e.g. .card__wrapper
      wrapping a wide table) can't bleed past the card and push the document
@@ -79,7 +85,7 @@
 
 /* Card body */
 .card__body {
-  @apply flex flex-col items-start self-stretch w-full rounded-lg border border-tertiary bg-primary;
+  @apply flex flex-col items-start self-stretch w-full rounded-card-wrapper border border-tertiary bg-primary;
 }
 
 /* Card footer - full width so pagination can span edge to edge */

data/app/assets/stylesheets/css/components/ui/dropdown.css

@@ -19,7 +19,7 @@
 }
 
 .dropdown-menu {
-  @apply flex flex-col w-full rounded-lg border border-tertiary bg-primary min-w-48;
+  @apply flex flex-col w-full rounded-lg border border-tertiary bg-primary;
 }
 
 .dropdown-menu--scrollable {

data/app/assets/stylesheets/css/components/ui/tabs.css

@@ -155,4 +155,26 @@
     @apply border-b-2 border-accent;
     margin-bottom: -1px; /* Overlap with container border */
   }
+
+  /* Tab Group Component */
+  /* Dashed border wraps both the tabs list and the active tab's content.
+     The element extends 5px past each side of its container so the border
+     sits outside the panel padding without requiring the parent to know
+     about it. Uses width + negative margin-inline (RTL-safe) instead of
+     left/right. */
+  .tab-group {
+    @apply relative border border-dashed border-1 border-tertiary hover:border-quaternary rounded-2xl;
+    --tab-group-modifier: 4;
+    --tab-group-padding: calc(var(--tab-group-modifier) - (var(--tab-group-modifier)/2));
+
+    width: calc(100% + calc(var(--spacing) * var(--tab-group-modifier)));
+    margin-inline: calc(var(--spacing) * var(--tab-group-padding) * -1);
+    padding: calc(var(--spacing) * var(--tab-group-padding));
+  }
+
+  @media (width > theme(--breakpoint-md)) {
+    .tab-group {
+      --tab-group-modifier: 8;
+    }
+  }
 }

data/app/assets/stylesheets/css/layout.css

@@ -41,8 +41,9 @@
    mx-auto happens inside the area to the right of the sidebar, not the page. */
 [data-controller~="sidebar"] {
   --sidebar-width: --spacing(64);
-  --sidebar-offset-size: 0rem;
-  --content-width: calc(100% - var(--spacing));
+  --sidebar-offset-size: 0;
+
+  --content-width: calc(100%);
 }
 
 @media (min-width: theme(--breakpoint-lg)) {
@@ -51,35 +52,65 @@
   }
 }
 
-[data-controller~="sidebar"][data-sidebar-open-value="false"] {
-  .main-content {
-    @apply ms-0;
-  }
-}
-
 .main {
   padding-top: var(--top-navbar-height);
-  padding-inline-start: calc(var(--sidebar-offset-size) - var(--spacing));
+  padding-inline-start: var(--sidebar-offset-size);
   transition: padding 0.1s ease-in-out;
 }
 
 .main-content {
-  --main-content-start-radius: 0px;
-  --main-content-end-radius: 0px;
+  --main-content-start-radius: 0;
+  --main-content-end-radius: 0;
+  --main-content-width: var(--content-width);
 
-  @apply relative w-(--content-width) flex flex-col bg-(--color-main-content-background) py-2 lg:py-4 px-2 lg:px-4 border-s border-(--color-main-content-border) ms-1 rounded-se-(--main-content-end-radius) rounded-ss-(--main-content-start-radius);
+  @apply relative w-(--main-content-width) flex flex-col bg-(--color-main-content-background) py-2 lg:py-4 px-2 lg:px-4 border-s border-(--color-main-content-border) rounded-se-(--main-content-end-radius) rounded-ss-(--main-content-start-radius);
 
   transition: margin 0.1s ease-in-out, width 0.1s ease-in-out;
   min-height: calc(100dvh - var(--top-navbar-height) - var(--spacing));
 
   @container style(--navbar-notch-enabled: true) {
+    --main-content-start-radius: var(--main-content-radius);
     --main-content-end-radius: var(--main-content-radius);
   }
 
   @container style(--navbar-notch-enabled: true) and style(--top-navbar-start-notch-align-with-main-content: true) {
     --main-content-start-radius: var(--main-content-radius);
+    --main-content-end-radius: var(--main-content-radius);
+  }
+
+}
+
+/* Desktop: show sidebar when sidebar-open class is present (lg+ only) */
+@media (min-width: theme(--breakpoint-lg)) {
+  .sidebar-open .avo-sidebar {
+    transform: translateX(0);
+  }
+
+  html[dir="rtl"] .sidebar-open .avo-sidebar {
+    transform: translateX(0);
+  }
+
+  /* With the sidebar open the content panel butts up against it, so flatten the
+     start corner. When the sidebar is closed the panel floats free and keeps the
+     rounded start corner it inherits from the base block. The
+     align-with-main-content layout reads as one continuous strip, so it stays
+     rounded regardless of sidebar state (the `: false` style query excludes it). */
+  @container style(--navbar-notch-enabled: true) and style(--top-navbar-start-notch-align-with-main-content: false) {
+    .sidebar-open .main-content {
+      --main-content-start-radius: 0;
+    }
+  }
+}
+
+/* Mobile: show sidebar only when explicitly toggled open */
+@media (width < theme(--breakpoint-lg)) {
+  .sidebar-mobile-open .avo-sidebar {
+    transform: translateX(0);
   }
 
+  html[dir="rtl"] .sidebar-mobile-open .avo-sidebar {
+    transform: translateX(0);
+  }
 }
 
 .main-content.focused,
@@ -89,7 +120,7 @@
 }
 
 .main-content__container {
-  @apply flex flex-1 flex-col px-2;
+  @apply flex flex-1 flex-col px-0 md:px-2;
 }
 
 .container-large {
@@ -107,29 +138,6 @@
 .top-navbar {
   @apply z-400 fixed top-0 inset-x-0 w-full shrink-0 pointer-events-none;
 
-  /* Top navbar theme contract.
-     Override these variables on `.top-navbar` when the navbar needs its own
-     palette. They are defined here so the customization point stays local to
-     the navbar while popovers, dropdown panels, and the main content keep using
-     their own surface tokens.
-
-     Example:
-       .top-navbar {
-         --top-navbar-background: var(--color-primary);
-         --top-navbar-content: var(--color-content-secondary);
-         --top-navbar-content-hover: var(--color-content);
-         --top-navbar-control-background: var(--color-secondary);
-         --top-navbar-control-background-hover: var(--color-tertiary);
-         --top-navbar-control-border: var(--color-tertiary);
-         --top-navbar-control-content: var(--color-content);
-         --top-navbar-control-muted: var(--color-content-secondary);
-         --top-navbar-control-shortcut-background: var(--color-primary);
-         --top-navbar-control-shortcut-border: var(--color-tertiary);
-         --top-navbar-control-shortcut-content: var(--color-content-secondary);
-         --top-navbar-active-background: var(--color-foreground);
-         --top-navbar-active-content: var(--color-background);
-       }
-  */
   --top-navbar-background: var(--color-navbar-background);
   --top-navbar-content: var(--color-avo-neutral-300);
   --top-navbar-content-hover: var(--color-avo-neutral-50);
@@ -334,28 +342,3 @@ button[data-sidebar-toggle-icon] {
 html[dir="rtl"] .avo-sidebar {
   transform: translateX(100%);
 }
-
-/* Desktop: show sidebar when sidebar-open class is present (lg+ only) */
-@media (min-width: theme(--breakpoint-lg)) {
-  .sidebar-open .avo-sidebar {
-    transform: translateX(0);
-  }
-
-  html[dir="rtl"] .sidebar-open .avo-sidebar {
-    transform: translateX(0);
-  }
-  .main:not(.sidebar-open) .main-content {
-    @apply ms-0;
-  }
-}
-
-/* Mobile: show sidebar only when explicitly toggled open */
-@media (width < theme(--breakpoint-lg)) {
-  .sidebar-mobile-open .avo-sidebar {
-    transform: translateX(0);
-  }
-
-  html[dir="rtl"] .sidebar-mobile-open .avo-sidebar {
-    transform: translateX(0);
-  }
-}

data/app/assets/stylesheets/css/variables.css

@@ -61,6 +61,7 @@
   --color-primary: var(--color-white);
   --color-secondary: var(--color-avo-neutral-100);
   --color-tertiary: var(--color-avo-neutral-200);
+  --color-quaternary: var(--color-avo-neutral-300);
   --color-content: var(--color-avo-neutral-950);
   --color-content-secondary: var(--color-avo-neutral-500);
 
@@ -108,6 +109,8 @@
      --border-color by default, so it resolves per-scheme automatically. */
   --color-main-content-border: var(--border-color);
 
+  --radius-card: var(--radius-xl);
+  --radius-card-wrapper: var(--radius-lg);
 }
 
 /* Navbar notch knobs live in a plain :root block, not in @theme:
@@ -167,6 +170,7 @@
     --color-primary: var(--color-avo-neutral-950);
     --color-secondary: var(--color-avo-neutral-800);
     --color-tertiary: var(--color-avo-neutral-700);
+    --color-quaternary: var(--color-avo-neutral-600);
     --color-content: var(--color-white);
     --color-content-secondary: var(--color-avo-neutral-300);
 

data/app/components/avo/fields/common/heading_component.html.erb

@@ -1,9 +1,7 @@
 <%= content_tag :div, class: @classes, data: @data do %>
-  <div class="py-2 px-4 h-full w-full">
     <% if @field.as_html %>
       <%= sanitize @field.value %>
     <% else %>
-      <div class="font-medium uppercase"><%= @field.value %></div>
+      <div class="uppercase"><%= @field.value %></div>
     <% end %>
-  </div>
 <% end %>

data/app/components/avo/fields/common/heading_component.rb

@@ -7,7 +7,7 @@ class Avo::Fields::Common::HeadingComponent < Avo::BaseComponent
 
   def after_initialize
     @view = @field.resource.view
-    @classes = "flex items-start py-1 leading-tight bg-secondary text-content-secondary text-xs #{@field.get_html(:classes, view: @view, element: :wrapper)}"
+    @classes = "flex items-start leading-tight bg-background text-content-secondary font-medium text-xs py-2 px-4 h-full w-full #{@field.get_html(:classes, view: @view, element: :wrapper)}"
     @data = {**stimulus_data_attributes, **@field.get_html(:data, view: @view, element: :wrapper)}
     add_stimulus_attributes_for(@field.resource, @data)
   end

data/app/components/avo/fields/date_field/edit_component.html.erb

@@ -36,16 +36,17 @@
     %>
 
     <%= content_tag :button,
-      class: "absolute end-0 self-center me-2 uppercase font-semibold text-xs disabled:cursor-not-allowed disabled:opacity-50 text-content-secondary cursor-pointer rounded-md",
+      class: "absolute inset-y-0 end-0 flex items-center justify-center px-2.5 uppercase font-semibold text-xs disabled:cursor-not-allowed disabled:opacity-50 text-content-secondary cursor-pointer rounded-lg",
       id: :reset,
       type: :button,
       title: t("avo.reset").capitalize,
       disabled: disabled?,
+      style: "outline-offset: var(--focus-outline-offset-inset)",
       data: {
         action: "click->date-field#clear",
         tippy: :tooltip
       } do %>
-      <%= helpers.svg "tabler/outline/x", class: "h-4" %>
+      <%= helpers.svg "tabler/outline/x", class: "size-4" %>
     <% end %>
   <% end %>
 <% end %>

data/app/components/avo/fields/date_time_field/edit_component.html.erb

@@ -37,16 +37,17 @@
       style: @field.get_html(:style, view: view, element: :input)
     %>
     <%= content_tag :button,
-      class: "absolute end-0 self-center me-2 uppercase font-semibold text-xs disabled:cursor-not-allowed disabled:opacity-50 text-content-secondary cursor-pointer rounded-md",
+      class: "absolute inset-y-0 end-0 flex items-center justify-center px-2.5 uppercase font-semibold text-xs disabled:cursor-not-allowed disabled:opacity-50 text-content-secondary cursor-pointer rounded-lg",
       id: :reset,
       type: :button,
       title: t("avo.reset").capitalize,
       disabled: disabled?,
+      style: "outline-offset: var(--focus-outline-offset-inset)",
       data: {
         action: "click->date-field#clear",
         tippy: :tooltip
       } do %>
-      <%= helpers.svg "tabler/outline/x", class: "h-4" %>
+      <%= helpers.svg "tabler/outline/x", class: "size-4" %>
     <% end %>
   <% end %>
 <% end %>

data/app/components/avo/fields/heading_field/edit_component.html.erb

@@ -1,3 +1,3 @@
-<div class="<%= class_names("w-full",{'overflow-hidden rounded-t': @index == 0}) %>" data-field-id="<%= @field.id %>">
+<%= content_tag :div, class: class_names("w-full", {"overflow-hidden rounded-t-card-wrapper": @index == 0}), data: {field_id: @field.id} do %>
   <%= render Avo::Fields::Common::HeadingComponent.new field: @field %>
-</div>
+<% end %>

data/app/components/avo/fields/heading_field/show_component.html.erb

@@ -1,3 +1,3 @@
-<%= tag.div class: class_names(@field.width_class, "overflow-hidden rounded-t": @index == 0), data: {field_id: @field.id} do %>
+<%= tag.div class: class_names(@field.width_class, "overflow-hidden rounded-t-card-wrapper": @index == 0), data: {field_id: @field.id, index: @index} do %>
   <%= render Avo::Fields::Common::HeadingComponent.new field: @field %>
 <% end %>

data/app/components/avo/fields/time_field/edit_component.html.erb

@@ -37,16 +37,17 @@
       style: @field.get_html(:style, view: view, element: :input)
     %>
     <%= content_tag :button,
-      class: "absolute end-0 self-center me-2 uppercase font-semibold text-xs disabled:cursor-not-allowed disabled:opacity-50 text-content-secondary cursor-pointer rounded-md",
+      class: "absolute inset-y-0 end-0 flex items-center justify-center px-2.5 uppercase font-semibold text-xs disabled:cursor-not-allowed disabled:opacity-50 text-content-secondary cursor-pointer rounded-lg",
       id: :reset,
       type: :button,
       title: t("avo.reset").capitalize,
       disabled: disabled?,
+      style: "outline-offset: var(--focus-outline-offset-inset)",
       data: {
         action: "click->date-field#clear",
         tippy: :tooltip
       } do %>
-      <%= helpers.svg "tabler/outline/x", class: "h-4" %>
+      <%= helpers.svg "tabler/outline/x", class: "size-4" %>
     <% end %>
   <% end %>
 <% end %>

data/app/components/avo/views/resource_index_component.html.erb

@@ -62,11 +62,9 @@
         <% end %>
 
         <% header.with_controls do %>
-          <div class="flex gap-3 flex-wrap">
-            <% @resource.render_index_controls(item: singular_resource_name.downcase).each do |control| %>
-              <%= render_control control %>
-            <% end %>
-          </div>
+          <% @resource.render_index_controls(item: singular_resource_name.downcase).each do |control| %>
+            <%= render_control control %>
+          <% end %>
         <% end %>
       <% end %>
     <% end %>

data/app/views/avo/partials/_navbar.html.erb

@@ -7,9 +7,10 @@
   <div class="top-navbar__start">
     <%# Mobile always needs a toggle to reach the overlay sidebar. Desktop toggle
         is optional and controlled by sidebar_toggle_visible. %>
-    <%= a_button class: class_names('shrink-0', 'lg:hidden': !Avo.configuration.sidebar_toggle_visible),
+    <%= a_button class: class_names("shrink-0 -ms-1.5 lg:ms-0", "lg:hidden": !Avo.configuration.sidebar_toggle_visible),
                  size: :sm,
                  style: :text,
+                 padding: :sm,
                  data: {
                    action: 'click->sidebar#toggleSidebarForViewport',
                    sidebar_toggle_icon: true,

data/lib/avo/configuration.rb

@@ -140,7 +140,7 @@ module Avo
       @license_key = nil
       @current_user = proc {}
       @authenticate = proc {}
-      @explicit_authorization = false
+      @explicit_authorization = true
       @authorization_methods = {
         index: "index?",
         show: "show?",

data/lib/avo/fields/belongs_to_field.rb

@@ -119,11 +119,7 @@ module Avo
         resource = target_resource
         resource = Avo.resource_manager.get_resource_by_model_class model if model.present?
 
-        query = resource.query_scope
-
-        if attach_scope.present?
-          query = Avo::ExecutionContext.new(target: attach_scope, query: query, parent: get_record).handle
-        end
+        query = scoped_target_query(resource, get_record)
 
         query.all.limit(Avo.configuration.associations_lookup_list_limit).map do |record|
           [resource.new(record: record).record_title, record.to_param]
@@ -212,12 +208,18 @@ module Avo
           if valid_model_class.blank? || id_from_param.blank?
             record.send(:"#{polymorphic_as}_id=", nil)
           else
-            record_id = target_resource(record:, polymorphic_model_class: value.safe_constantize).find_record(id_from_param).id
+            target = target_resource(record:, polymorphic_model_class: value.safe_constantize)
+            record_id = target.find_record(id_from_param, query: scoped_target_query(target, record, for_find: true)).id
 
             record.send(:"#{polymorphic_as}_id=", record_id)
           end
         else
-          record_id = value.blank? ? value : target_resource(record:).find_record(value).send(reflection.association_primary_key)
+          target = target_resource(record:)
+          record_id = if value.blank?
+            value
+          else
+            target.find_record(value, query: scoped_target_query(target, record, for_find: true)).send(reflection.association_primary_key)
+          end
 
           record.send(:"#{key}=", record_id)
         end
@@ -325,6 +327,15 @@ module Avo
 
       private
 
+      def scoped_target_query(resource, parent_record, for_find: false)
+        resource_class = resource.is_a?(Class) ? resource : resource.class
+        query = for_find ? resource_class.find_scope : resource_class.query_scope
+
+        return query if attach_scope.blank?
+
+        Avo::ExecutionContext.new(target: attach_scope, query: query, parent: parent_record).handle
+      end
+
       def get_model_class(record)
         if record.nil?
           @resource.model_class

data/lib/avo/version.rb

@@ -1,3 +1,3 @@
 module Avo
-  VERSION = "4.0.0.beta.43" unless const_defined?(:VERSION)
+  VERSION = "4.0.0.beta.45" unless const_defined?(:VERSION)
 end

data/lib/generators/avo/templates/initializer/avo.tt

@@ -37,7 +37,7 @@ Avo.configure do |config|
   # }
   # config.raise_error_on_missing_policy = false
   config.authorization_client = nil
-  config.explicit_authorization = true
+  # config.explicit_authorization = true
 
   ## == Localization ==
   # config.locale = 'en-US'

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: avo
 version: !ruby/object:Gem::Version
-  version: 4.0.0.beta.43
+  version: 4.0.0.beta.45
 platform: ruby
 authors:
 - Adrian Marin
@@ -267,7 +267,6 @@ files:
 - app/assets/stylesheets/css/components/input.css
 - app/assets/stylesheets/css/components/media_library.css
 - app/assets/stylesheets/css/components/modal.css
-- app/assets/stylesheets/css/components/tab_group.css
 - app/assets/stylesheets/css/components/tooltip.css
 - app/assets/stylesheets/css/components/ui/badge.css
 - app/assets/stylesheets/css/components/ui/card.css

data/app/assets/stylesheets/css/components/tab_group.css

@@ -1,18 +0,0 @@
-/* Tab Group Component */
-@layer components {
-  /* Dashed border wraps both the tabs list and the active tab's content.
-     The element extends 5px past each side of its container so the border
-     sits outside the panel padding without requiring the parent to know
-     about it. Uses width + negative margin-inline (RTL-safe) instead of
-     left/right. */
-  .tab-group {
-    @apply relative border border-dashed border-tertiary rounded-2xl;
-    --tab-group-modifier: 8;
-    --tab-group-padding: calc(var(--tab-group-modifier) - (var(--tab-group-modifier)/2));
-
-    width: calc(100% + calc(var(--spacing) * var(--tab-group-modifier)));
-    margin-inline: calc(var(--spacing) * var(--tab-group-padding) * -1);
-    padding: calc(var(--spacing) * var(--tab-group-padding));
-
-  }
-}