avo 3.30.4 → 4.0.0.beta.2

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

@@ -0,0 +1,318 @@
+/* TODO: rename this file to theming or something similar */
+@theme {
+  --color-avo-neutral-25: oklch(98.51% 0.0000 89.88);
+  --color-avo-neutral-50: oklch(97.31% 0.0000 89.88);
+  --color-avo-neutral-100: oklch(92.80% 0.0000 89.88);
+  --color-avo-neutral-200: oklch(86.07% 0.0000 89.88);
+  --color-avo-neutral-300: oklch(75.72% 0.0000 89.88);
+  --color-avo-neutral-400: oklch(62.68% 0.0000 89.88);
+  --color-avo-neutral-500: oklch(53.48% 0.0000 89.88);
+  --color-avo-neutral-600: oklch(47.84% 0.0000 89.88);
+  --color-avo-neutral-700: oklch(42.76% 0.0000 89.88);
+  --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);
+
+  /* semantic - Mode 1 */
+  --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);
+
+  --shadow-content: 0 8px 16px 0 rgba(0, 0, 0, 0.08);
+
+  --box-shadow-card: 0px 8px 16px 0px rgba(0, 0, 0, 0.04);
+  --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-active: 0 0 0 2px var(--color-info-foreground);
+  --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);
+  --box-shadow-success: 0 0 5px 1px var(--color-green-600), 0 0 0 1px var(--color-green-600), 0 0 0 3px var(--color-green-300);
+  --box-shadow-focus: 0 0 0 1px var(--color-primary), 0 0 0 3px var(--color-info-foreground);
+  --box-shadow-search-input-shortcut: 0 -1.5px 0 1px var(--color-secondary) inset, 0 0.8px 0 1.3px var(--color-primary) inset;
+
+  /* foundations - Light Mode */
+  --color-background: var(--color-avo-neutral-25);
+  --color-foreground: var(--color-avo-neutral-800);
+  --color-primary: var(--color-white);
+  --color-secondary: var(--color-avo-neutral-50);
+  --color-tertiary: var(--color-avo-neutral-100);
+  --color-content: var(--color-avo-neutral-950);
+  --color-content-secondary: var(--color-avo-neutral-500);
+
+  /* themes - Neutral Light */
+  --color-accent: var(--color-avo-neutral-800);
+  --color-accent-content: var(--color-avo-neutral-950);
+  --color-accent-foreground: var(--color-white);
+}
+
+/* Dark theme */
+.dark {
+  /* foundations - Dark Mode */
+  --color-background: var(--color-avo-neutral-900);
+  --color-foreground: var(--color-avo-neutral-50);
+  --color-primary: var(--color-avo-neutral-950);
+  --color-secondary: var(--color-avo-neutral-800);
+  --color-tertiary: var(--color-avo-neutral-700);
+  --color-content: var(--color-white);
+  --color-content-secondary: var(--color-avo-neutral-300);
+
+  /* themes - Neutral Dark */
+  --color-accent: var(--color-avo-neutral-50);
+  --color-accent-content: var(--color-avo-neutral-100);
+  --color-accent-foreground: var(--color-avo-neutral-950);
+}
+
+.theme-slate {
+  --color-avo-neutral-25: oklch(98.51% 0.0000 89.88);
+  --color-avo-neutral-50: var(--color-slate-50);
+  --color-avo-neutral-100: var(--color-slate-100);
+  --color-avo-neutral-200: var(--color-slate-200);
+  --color-avo-neutral-300: var(--color-slate-300);
+  --color-avo-neutral-400: var(--color-slate-400);
+  --color-avo-neutral-500: var(--color-slate-500);
+  --color-avo-neutral-600: var(--color-slate-600);
+  --color-avo-neutral-700: var(--color-slate-700);
+  --color-avo-neutral-800: var(--color-slate-800);
+  --color-avo-neutral-900: var(--color-slate-900);
+  --color-avo-neutral-950: var(--color-slate-950);
+}
+.theme-stone {
+  --color-avo-neutral-25: oklch(98.51% 0.0000 89.88);
+  --color-avo-neutral-50: var(--color-stone-50);
+  --color-avo-neutral-100: var(--color-stone-100);
+  --color-avo-neutral-200: var(--color-stone-200);
+  --color-avo-neutral-300: var(--color-stone-300);
+  --color-avo-neutral-400: var(--color-stone-400);
+  --color-avo-neutral-500: var(--color-stone-500);
+  --color-avo-neutral-600: var(--color-stone-600);
+  --color-avo-neutral-700: var(--color-stone-700);
+  --color-avo-neutral-800: var(--color-stone-800);
+  --color-avo-neutral-900: var(--color-stone-900);
+  --color-avo-neutral-950: var(--color-stone-950);
+}
+.theme-taupe {
+  --color-avo-neutral-25: oklch(98.5% 0.004 70);
+  --color-avo-neutral-50: var(--color-taupe-50);
+  --color-avo-neutral-100: var(--color-taupe-100);
+  --color-avo-neutral-200: var(--color-taupe-200);
+  --color-avo-neutral-300: var(--color-taupe-300);
+  --color-avo-neutral-400: var(--color-taupe-400);
+  --color-avo-neutral-500: var(--color-taupe-500);
+  --color-avo-neutral-600: var(--color-taupe-600);
+  --color-avo-neutral-700: var(--color-taupe-700);
+  --color-avo-neutral-800: var(--color-taupe-800);
+  --color-avo-neutral-900: var(--color-taupe-900);
+  --color-avo-neutral-950: var(--color-taupe-950);
+}
+.theme-mauve {
+  --color-avo-neutral-25: oklch(98.5% 0.005 310);
+  --color-avo-neutral-50: var(--color-mauve-50);
+  --color-avo-neutral-100: var(--color-mauve-100);
+  --color-avo-neutral-200: var(--color-mauve-200);
+  --color-avo-neutral-300: var(--color-mauve-300);
+  --color-avo-neutral-400: var(--color-mauve-400);
+  --color-avo-neutral-500: var(--color-mauve-500);
+  --color-avo-neutral-600: var(--color-mauve-600);
+  --color-avo-neutral-700: var(--color-mauve-700);
+  --color-avo-neutral-800: var(--color-mauve-800);
+  --color-avo-neutral-900: var(--color-mauve-900);
+  --color-avo-neutral-950: var(--color-mauve-950);
+}
+.theme-mist {
+  --color-avo-neutral-25: oklch(98.5% 0.004 240);
+  --color-avo-neutral-50: var(--color-mist-50);
+  --color-avo-neutral-100: var(--color-mist-100);
+  --color-avo-neutral-200: var(--color-mist-200);
+  --color-avo-neutral-300: var(--color-mist-300);
+  --color-avo-neutral-400: var(--color-mist-400);
+  --color-avo-neutral-500: var(--color-mist-500);
+  --color-avo-neutral-600: var(--color-mist-600);
+  --color-avo-neutral-700: var(--color-mist-700);
+  --color-avo-neutral-800: var(--color-mist-800);
+  --color-avo-neutral-900: var(--color-mist-900);
+  --color-avo-neutral-950: var(--color-mist-950);
+}
+.theme-gray {
+  --color-avo-neutral-25: oklch(98.51% 0.0000 89.88);
+  --color-avo-neutral-50: var(--color-gray-50);
+  --color-avo-neutral-100: var(--color-gray-100);
+  --color-avo-neutral-200: var(--color-gray-200);
+  --color-avo-neutral-300: var(--color-gray-300);
+  --color-avo-neutral-400: var(--color-gray-400);
+  --color-avo-neutral-500: var(--color-gray-500);
+  --color-avo-neutral-600: var(--color-gray-600);
+  --color-avo-neutral-700: var(--color-gray-700);
+  --color-avo-neutral-800: var(--color-gray-800);
+  --color-avo-neutral-900: var(--color-gray-900);
+  --color-avo-neutral-950: var(--color-gray-950);
+}
+.theme-zinc {
+  --color-avo-neutral-25: oklch(98.51% 0.0000 89.88);
+  --color-avo-neutral-50: var(--color-zinc-50);
+  --color-avo-neutral-100: var(--color-zinc-100);
+  --color-avo-neutral-200: var(--color-zinc-200);
+  --color-avo-neutral-300: var(--color-zinc-300);
+  --color-avo-neutral-400: var(--color-zinc-400);
+  --color-avo-neutral-500: var(--color-zinc-500);
+  --color-avo-neutral-600: var(--color-zinc-600);
+  --color-avo-neutral-700: var(--color-zinc-700);
+  --color-avo-neutral-800: var(--color-zinc-800);
+  --color-avo-neutral-900: var(--color-zinc-900);
+  --color-avo-neutral-950: var(--color-zinc-950);
+}
+.theme-neutral {
+  --color-avo-neutral-25: oklch(98.51% 0.0000 89.88);
+  --color-avo-neutral-50: var(--color-neutral-50);
+  --color-avo-neutral-100: var(--color-neutral-100);
+  --color-avo-neutral-200: var(--color-neutral-200);
+  --color-avo-neutral-300: var(--color-neutral-300);
+  --color-avo-neutral-400: var(--color-neutral-400);
+  --color-avo-neutral-500: var(--color-neutral-500);
+  --color-avo-neutral-600: var(--color-neutral-600);
+  --color-avo-neutral-700: var(--color-neutral-700);
+  --color-avo-neutral-800: var(--color-neutral-800);
+  --color-avo-neutral-900: var(--color-neutral-900);
+  --color-avo-neutral-950: var(--color-neutral-950);
+}
+.theme-olive {
+  --color-avo-neutral-25: oklch(98.5% 0.005 140);
+  --color-avo-neutral-50: var(--color-olive-50);
+  --color-avo-neutral-100: var(--color-olive-100);
+  --color-avo-neutral-200: var(--color-olive-200);
+  --color-avo-neutral-300: var(--color-olive-300);
+  --color-avo-neutral-400: var(--color-olive-400);
+  --color-avo-neutral-500: var(--color-olive-500);
+  --color-avo-neutral-600: var(--color-olive-600);
+  --color-avo-neutral-700: var(--color-olive-700);
+  --color-avo-neutral-800: var(--color-olive-800);
+  --color-avo-neutral-900: var(--color-olive-900);
+  --color-avo-neutral-950: var(--color-olive-950);
+}
+
+.accent-red {
+  /* themes - Red */
+  --color-accent: var(--color-red-500);
+  --color-accent-content: var(--color-red-600);
+  --color-accent-foreground: var(--color-white);
+}
+
+.accent-orange {
+  /* themes - Orange */
+  --color-accent: var(--color-orange-500);
+  --color-accent-content: var(--color-orange-600);
+  --color-accent-foreground: var(--color-white);
+}
+
+.accent-amber {
+  /* themes - Amber */
+  --color-accent: var(--color-amber-500);
+  --color-accent-content: var(--color-amber-600);
+  --color-accent-foreground: var(--color-white);
+}
+
+.accent-yellow {
+  /* themes - Yellow */
+  --color-accent: var(--color-yellow-500);
+  --color-accent-content: var(--color-yellow-600);
+  --color-accent-foreground: var(--color-white);
+}
+
+.accent-lime {
+  /* themes - Lime */
+  --color-accent: var(--color-lime-500);
+  --color-accent-content: var(--color-lime-600);
+  --color-accent-foreground: var(--color-white);
+}
+
+.accent-green {
+  /* themes - Green */
+  --color-accent: var(--color-green-500);
+  --color-accent-content: var(--color-green-600);
+  --color-accent-foreground: var(--color-white);
+}
+
+.accent-emerald {
+  /* themes - Emerald */
+  --color-accent: var(--color-emerald-500);
+  --color-accent-content: var(--color-emerald-600);
+  --color-accent-foreground: var(--color-white);
+}
+
+.accent-teal {
+  /* themes - Teal */
+  --color-accent: var(--color-teal-500);
+  --color-accent-content: var(--color-teal-600);
+  --color-accent-foreground: var(--color-white);
+}
+
+.accent-cyan {
+  /* themes - Cyan */
+  --color-accent: var(--color-cyan-500);
+  --color-accent-content: var(--color-cyan-600);
+  --color-accent-foreground: var(--color-white);
+}
+
+.accent-sky {
+  /* themes - Sky */
+  --color-accent: var(--color-sky-500);
+  --color-accent-content: var(--color-sky-600);
+  --color-accent-foreground: var(--color-white);
+}
+
+.accent-blue {
+  /* themes - Blue */
+  --color-accent: var(--color-blue-500);
+  --color-accent-content: var(--color-blue-600);
+  --color-accent-foreground: var(--color-white);
+}
+
+.accent-indigo {
+  /* themes - Indigo */
+  --color-accent: var(--color-indigo-500);
+  --color-accent-content: var(--color-indigo-600);
+  --color-accent-foreground: var(--color-white);
+}
+
+.accent-violet {
+  /* themes - Violet */
+  --color-accent: var(--color-violet-500);
+  --color-accent-content: var(--color-violet-600);
+  --color-accent-foreground: var(--color-white);
+}
+
+.accent-purple {
+  /* themes - Purple */
+  --color-accent: var(--color-purple-500);
+  --color-accent-content: var(--color-purple-600);
+  --color-accent-foreground: var(--color-white);
+}
+
+.accent-fuchsia {
+  /* themes - Fuchsia */
+  --color-accent: var(--color-fuchsia-500);
+  --color-accent-content: var(--color-fuchsia-600);
+  --color-accent-foreground: var(--color-white);
+}
+
+.accent-pink {
+  /* themes - Pink */
+  --color-accent: var(--color-pink-500);
+  --color-accent-content: var(--color-pink-600);
+  --color-accent-foreground: var(--color-white);
+}
+
+.accent-rose {
+  /* themes - Rose */
+  --color-accent: var(--color-rose-500);
+  --color-accent-content: var(--color-rose-600);
+  --color-accent-foreground: var(--color-white);
+}

data/app/assets/svgs/avo/moon-plus-plus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor"><path d="M10 6C10 10.4183 13.5817 14 18 14C19.4386 14 20.7885 13.6203 21.9549 12.9556C21.4738 18.0302 17.2005 22 12 22C6.47715 22 2 17.5228 2 12C2 6.79948 5.9698 2.52616 11.0444 2.04507C10.3797 3.21152 10 4.56142 10 6ZM4 12C4 16.4183 7.58172 20 12 20C14.9654 20 17.5757 18.3788 18.9571 15.9546C18.6407 15.9848 18.3214 16 18 16C12.4772 16 8 11.5228 8 6C8 5.67863 8.01524 5.35933 8.04536 5.04293C5.62119 6.42426 4 9.03458 4 12ZM18.1642 2.29104L19 2.5V3.5L18.1642 3.70896C17.4476 3.8881 16.8881 4.4476 16.709 5.16417L16.5 6H15.5L15.291 5.16417C15.1119 4.4476 14.5524 3.8881 13.8358 3.70896L13 3.5V2.5L13.8358 2.29104C14.5524 2.1119 15.1119 1.5524 15.291 0.835829L15.5 0H16.5L16.709 0.835829C16.8881 1.5524 17.4476 2.1119 18.1642 2.29104ZM23.1642 7.29104L24 7.5V8.5L23.1642 8.70896C22.4476 8.8881 21.8881 9.4476 21.709 10.1642L21.5 11H20.5L20.291 10.1642C20.1119 9.4476 19.5524 8.8881 18.8358 8.70896L18 8.5V7.5L18.8358 7.29104C19.5524 7.1119 20.1119 6.5524 20.291 5.83583L20.5 5H21.5L21.709 5.83583C21.8881 6.5524 22.4476 7.1119 23.1642 7.29104Z"/></svg>

data/app/components/avo/actions_component.html.erb

@@ -1,43 +1,37 @@
-<div class="relative flex flex-col w-full sm:w-auto js-actions-dropdown"
+<div
+  class="actions-dropdown relative flex w-full flex-col sm:w-auto"
   data-component-name="<%= self.class.to_s.underscore %>"
   data-controller="toggle actions-picker"
-  data-actions-picker-enabled-class="text-black hover:bg-primary-500 hover:text-white"
-  data-actions-picker-disabled-class="cursor-wait text-gray-500"
+  data-actions-picker-enabled-class="text-content hover:bg-secondary"
+  data-actions-picker-disabled-class="cursor-wait text-content/60"
   data-resource-name="<%= @resource.class.to_s %>"
-  <% if @resource.record.present? %> data-record-id="<%= @resource.record_param %>" <% end %>
->
-  <%= a_button style: @style,
-    type: :button,
-    color: @color,
-    size: @size,
-    class: "focus:outline-none",
-    icon: @icon,
-    icon_class: @icon_class,
-    data: {
-      action: "click->toggle#togglePanel",
-      actions_dropdown_button: @resource.model_key,
-      tippy: "tooltip",
-      tippy_content: @title
-    } do %>
-    <%= @label %>
+  <% if @resource.record.present? %>
+    data-record-id="<%= @resource.record_param %>"
   <% end %>
-  <div
-    class="absolute flex inset-auto xl:right-0 top-full bg-white w-full sm:w-auto sm:min-w-[300px] mt-2 z-40 shadow-modal rounded overflow-hidden hidden"
-    data-toggle-target="panel"
-    data-controller="actions-overflow"
-    data-actions-overflow-panel-list-value="<%= !@as_row_control %>"
-    data-actions-overflow-target="content"
-    data-transition-enter="transition ease-out duration-100"
-    data-transition-enter-start="transform opacity-0 -translate-y-1"
-    data-transition-enter-end="transform opacity-100 translate-y-0"
-    data-transition-leave="transition ease-in duration-75"
-    data-transition-leave-start="transform opacity-100 translate-y-0"
-    data-transition-leave-end="transform opacity-0 -translate-y-1"
-  >
-    <div data-target="actions-list" class="w-full space divide-y">
+>
+
+  <%= render ui.dropdown(classes: "z-100", data: { dropdown_list: @label }) do |component| %>
+    <% component.with_trigger do %>
+      <%= a_button style: @style,
+        type: :button,
+        color: @color,
+        size: @size,
+        class: "focus:outline-hidden",
+        icon: @icon,
+        icon_class: @icon_class,
+        data: {
+          action: component.action,
+          actions_dropdown_button: @resource.model_key,
+          tippy: "tooltip",
+          tippy_content: @title
+        } do %>
+        <%= @label %>
+      <% end %>
+    <% end %>
+    <% component.with_items do %>
       <% @actions.each do |action| %>
-        <%= render_item(action)%>
+        <%= render_item(action) %>
       <% end %>
-    </div>
-  </div>
+    <% end %>
+  <% end %>
 </div>

data/app/components/avo/actions_component.rb

@@ -8,9 +8,7 @@ class Avo::ActionsComponent < Avo::BaseComponent
   prop :icon_class
   prop :size, default: :md
   prop :title
-  prop :color do |value|
-    value || :primary
-  end
+  prop :color
   prop :include, default: [].freeze do |include|
     Array(include).to_set
   end
@@ -22,7 +20,7 @@ class Avo::ActionsComponent < Avo::BaseComponent
       label || I18n.t("avo.actions")
     end
   end
-  prop :style, default: :outline
+  prop :style, default: :primary
   prop :actions, default: [].freeze
   prop :exclude, default: [].freeze do |exclude|
     Array(exclude).to_set
@@ -63,7 +61,7 @@ class Avo::ActionsComponent < Avo::BaseComponent
   private
 
   def icon(icon)
-    helpers.svg icon, class: "h-5 shrink-0 mr-1 inline pointer-events-none"
+    helpers.svg icon, class: "h-5 shrink-0 me-1 inline pointer-events-none"
   end
 
   def render_item(action)
@@ -76,7 +74,7 @@ class Avo::ActionsComponent < Avo::BaseComponent
       render_action_link(action.action, icon: action.icon)
     when defined?(Avo::Advanced::Resources::Controls::LinkTo) && Avo::Advanced::Resources::Controls::LinkTo
       link_to action.args[:path],
-        class: action.args.delete(:class) || "flex items-center px-4 py-3 w-full text-black font-semibold text-sm hover:bg-primary-100",
+        class: action.args.delete(:class),
         **action.args.except(:path, :label, :icon) do
           raw("#{icon(action.args[:icon])} #{action.args[:label]}")
         end
@@ -102,16 +100,15 @@ class Avo::ActionsComponent < Avo::BaseComponent
       "actions-picker-target": action.standalone ? "standaloneAction" : "resourceAction",
       disabled: action.disabled?,
       turbo_prefetch: false,
-      enabled_classes: "text-black",
-      disabled_classes: "text-gray-500",
+      disabled_classes: "dropdown-menu__item--disabled",
       resource_name: action.resource.model_key
     }
   end
 
   def action_css_class(action)
-    helpers.class_names("flex items-center px-4 py-3 w-full font-semibold text-sm hover:bg-primary-100", {
-      "text-gray-500": action.disabled?,
-      "text-black": action.enabled?,
+    helpers.class_names("", {
+      "dropdown-menu__item--disabled": action.disabled?,
+      "": action.enabled?,
     })
   end
 end

data/app/components/avo/alert_component.html.erb

@@ -10,13 +10,13 @@
       <div class="flex items-center min-h-full">
         <%= helpers.svg icon, class: "h-6" %>
       </div>
-      <div class="ml-3 w-0 flex-1 pt-0.5">
+      <div class="ms-3 w-0 flex-1 pt-0.5">
         <p class="text-sm leading-5 font-semibold">
           <%= sanitize @message.to_s %>
         </p>
       </div>
-      <div class="ml-4 flex-shrink-0 flex items-center">
-        <button data-action="alert#close" class="inline-flex text-white focus:outline-none focus:text-gray-300 transition ease-in-out duration-150">
+      <div class="ms-4 shrink-0 flex items-center">
+        <button data-action="alert#close" class="inline-flex text-white focus:outline-hidden focus:text-gray-300 transition ease-in-out duration-150">
           <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
             <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
           </svg>

data/app/components/avo/alert_component.rb

@@ -19,7 +19,7 @@ class Avo::AlertComponent < Avo::BaseComponent
   def classes
     return "hidden" if is_empty?
 
-    result = "max-w-lg w-full shadow-lg rounded px-4 py-3 rounded relative border text-white pointer-events-auto"
+    result = "max-w-lg w-full shadow-lg px-4 py-3 rounded-sm relative border text-white pointer-events-auto"
 
     result += if is_error?
       " bg-red-400 border-red-600"

data/app/components/avo/asset_manager/javascript_component.html.erb

@@ -8,5 +8,4 @@
 <% end %>
 
 <%# This is the last script to run so it can register custom StimulusJS controllers from plugins. %>
-<% path = Avo::PACKED ? '/avo-assets/late-registration' : 'late-registration' %>
-<%= javascript_include_tag path, "data-turbo-track": "reload", defer: true %>
+<%= javascript_include_tag 'avo/late-registration', "data-turbo-track": "reload", defer: true %>

data/app/components/avo/backtrace_alert_component.html.erb

@@ -1,21 +1,21 @@
 <div data-controller="alert"
   data-alert-dismiss-after-value="<%= Avo.configuration.alert_dismiss_time %>"
   data-alert-remove-delay-value="0"
-  class="w-full shadow-lg px-4 py-3 rounded relative border text-white pointer-events-auto bg-red-400 border-red-600"
+  class="w-full shadow-lg px-4 py-3 rounded-sm relative border text-white pointer-events-auto bg-red-400 border-red-600"
 >
   <div class="px-2">
     <div class="flex h-full">
       <div class="flex items-center min-h-full">
         <%= helpers.svg "heroicons/solid/exclamation-circle", class: "h-6" %>
       </div>
-      <div class="ml-3 w-0 flex-1 pt-0.5">
+      <div class="ms-3 w-0 flex-1 pt-0.5">
         <p class="text-sm leading-5 font-semibold">
           <strong>Backtrace:</strong>
           <pre class='overflow-y-scroll max-h-64 whitespace-pre-wrap text-xs'><%= @backtrace.join("\n") %></pre>
         </p>
       </div>
-      <div class="ml-4 flex-shrink-0 flex items-center">
-        <button data-action="alert#close" class="inline-flex text-white focus:outline-none focus:text-gray-300 transition ease-in-out duration-150">
+      <div class="ms-4 shrink-0 flex items-center">
+        <button data-action="alert#close" class="inline-flex text-white focus:outline-hidden focus:text-gray-300 transition ease-in-out duration-150">
           <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
             <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
           </svg>

data/app/components/avo/base_component.rb

@@ -4,15 +4,14 @@ class Avo::BaseComponent < ViewComponent::Base
   extend PropInitializer::Properties
   include Turbo::FramesHelper
   include Avo::Concerns::FindAssociationField
+  include Avo::ApplicationHelper
 
   delegate :e, to: :helpers
   delegate :d, to: :helpers
   delegate :main_app, to: :helpers
   delegate :avo, to: :helpers
-
-  def has_with_trial(ability)
-    Avo.license.has_with_trial(ability)
-  end
+  delegate :ui, to: :helpers
+  delegate :svg, to: :helpers
 
   def component_name = self.class.name.to_s.underscore
 

data/app/components/avo/breadcrumb_element_component.html.erb

@@ -0,0 +1,17 @@
+<%= wrapper_element class: class_names(
+  "breadcrumb-element",
+  "breadcrumb-element--link": link?
+) do %>
+  <% if @avatar.present? %>
+    <div class="breadcrumb-element__avatar">
+      <%= render Avo::UI::AvatarComponent.new src: helpers.main_app.url_for(@avatar.value), shape: :square, type: :avatar, size: :tiny %>
+    </div>
+  <% elsif @initials.present? %>
+    <span class="breadcrumb-element__initials"><%= render Avo::UI::AvatarComponent.new shape: :square, type: :initials, size: :tiny, initials: @initials %></span>
+  <% end %>
+  <% if @icon.present? %>
+    <%= helpers.svg @icon, class: "breadcrumb-element__icon" %>
+  <% end %>
+
+  <%= content_tag :span, @text, class: "breadcrumb-element__text" %>
+<% end %>

data/app/components/avo/breadcrumb_element_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class Avo::BreadcrumbElementComponent < Avo::BaseComponent
+  prop :text
+  prop :url, default: nil
+  prop :icon, default: nil
+  prop :initials, default: nil
+  prop :avatar
+
+  def link?
+    @url.present?
+  end
+
+  def wrapper_element(args = {}, &block)
+    if link?
+      link_to @url, **args, &block
+    else
+      content_tag :span, **args, &block
+    end
+  end
+end

data/app/components/avo/breadcrumbs_component.html.erb

@@ -0,0 +1,19 @@
+<%= tag.nav class: "breadcrumbs", aria: { label: "Breadcrumb" } do %>
+  <div class="breadcrumbs__container">
+    <% @items.each_with_index do |item, index| %>
+      <% is_last = index == @items.length - 1 %>
+
+      <%= render Avo::BreadcrumbElementComponent.new(
+        text: item.title,
+        url: item.path,
+        icon: item.icon,
+        avatar: item.avatar,
+        initials: item.initials
+      ) %>
+
+      <% unless is_last %>
+        <span class="breadcrumbs__separator">/</span>
+      <% end %>
+    <% end %>
+  </div>
+<% end %>

data/app/components/avo/breadcrumbs_component.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+class Avo::BreadcrumbsComponent < Avo::BaseComponent
+  prop :items, default: -> { [] }
+end