basecoat 2.3.0 → 3.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1ec22802652367bcd30144e5e34a1df474e3d52b5943a35c21013d63284e46a1
-  data.tar.gz: 5aa8e17dc9669ff89072f3bb51ef8a4316410f448117406e5a64e18a96dafbfd
+  metadata.gz: 5a0c11b58abe60ce841b3ac9f3cf43c791ac1e48cf4737a5770a0659866291ae
+  data.tar.gz: 931161305163f8f87222a2d67b120f05dfbb8ef43378811985547f54c9a628ed
 SHA512:
-  metadata.gz: 89b9cabbb20c51b45aefdea591f85ccdbe55dcb73c08363f24a8907b0be88886a7c99c19c68a73eef27e47270415e8756ad4a03318963a450f2013e7c422c8bc
-  data.tar.gz: 1aa2c47cb3737cd0e7bd9a4143d4cd8fbc7943e2c9d52e065c7f71042ad6a147963a9891408ca56037f8aa14740807d8818b115f6677fa92ca494e7a3ca5f234
+  metadata.gz: f051fc0aa838857ed26b36cf56bc47099fb387e6446bacf4430220b91593569d99c888fc2898660b026e492dd8e72bddd1eac9bacf1f4cb1bb7d070221d9ab1e
+  data.tar.gz: 9e8003734f72af73e90ade1a43deeffea0991125b0d95aad63ffb8ff2b4361c5192a9cfd50a4ac4d872f9d091a7e713423f752b3fbcd4e15b15fc8948355230d

data/lib/basecoat/form_helper.rb

@@ -84,11 +84,12 @@ module Basecoat
       scrollable = options[:scrollable] || false
       turbo_frame = options[:turbo_frame] || (url ? url.gsub("/", "_") : nil)
 
-      select_attrs = { id: select_id, class: "select" }
+      select_attrs = { id: select_id, class: "combobox" }
       if url
         select_attrs[:data] = {
           controller: "search",
-          search_url_value: url
+          search_url_value: url,
+          filter: "manual" # filtering happens server-side, tell basecoat not to filter
         }
       end
 
@@ -168,7 +169,7 @@ module Basecoat
       basecoat_select_tag(name, choices, options)
 
     rescue LoadError
-      content_tag :div, class: "alert-destructive" do
+      content_tag :div, class: "alert", "data-variant": "destructive" do
         lucide_icon("circle-alert") + tag.section("gem 'countries' required")
       end
     end
@@ -176,23 +177,40 @@ module Basecoat
     private
 
     def basecoat_select_button(select_id, selected_label)
-      content_tag(:button, type: "button", class: "btn-outline justify-between font-normal w-[180px]", id: "#{select_id}-trigger", "aria-haspopup": "listbox", "aria-expanded": "false", "aria-controls": "#{select_id}-listbox") do
-        content_tag(:span, selected_label, class: "truncate") +
+      content_tag(:button, type: "button", class: "btn justify-between font-normal w-[180px]", "data-variant": "outline", id: "#{select_id}-trigger", "aria-haspopup": "listbox", "aria-expanded": "false", "aria-controls": "#{select_id}-listbox") do
+        content_tag(:span, selected_label, class: "truncate", "data-value": "") +
         lucide_icon("chevrons-up-down", class: "text-muted-foreground opacity-50 shrink-0").html_safe
       end
     end
 
     def basecoat_select_popover(select_id, choices, group_label, placeholder, selected_value, url, scrollable, turbo_frame)
       content_tag(:div, id: "#{select_id}-popover", data: { popover: true }, "aria-hidden": "true") do
-        basecoat_select_search_header(select_id, placeholder) +
+        basecoat_select_search_input(select_id, placeholder, url) +
         basecoat_select_listbox(select_id, choices, group_label, selected_value, url, scrollable, turbo_frame)
       end
     end
 
-    def basecoat_select_search_header(select_id, placeholder)
-      content_tag(:header) do
+    def basecoat_select_search_input(select_id, placeholder, url)
+      input_attrs = {
+        type: "text",
+        value: "",
+        placeholder: placeholder,
+        autocomplete: "off",
+        autocorrect: "off",
+        spellcheck: "false",
+        "aria-autocomplete": "list",
+        role: "combobox",
+        "aria-expanded": "false",
+        "aria-controls": "#{select_id}-listbox",
+        "aria-labelledby": "#{select_id}-trigger"
+      }
+      # Local filtering is handled by basecoat itself; remote search goes
+      # through the Stimulus search controller and Turbo Streams.
+      input_attrs[:data] = { search_target: "input", action: "input->search#search" } if url
+
+      content_tag(:div, class: "input-group") do
         lucide_icon("search").html_safe +
-        tag(:input, type: "text", value: "", placeholder: placeholder, autocomplete: "off", autocorrect: "off", spellcheck: "false", "aria-autocomplete": "list", role: "combobox", "aria-expanded": "false", "aria-controls": "#{select_id}-listbox", "aria-labelledby": "#{select_id}-trigger", data: { search_target: "input", action: "input->search#search" })
+        tag(:input, **input_attrs)
       end
     end
 
@@ -201,18 +219,12 @@ module Basecoat
         role: "listbox",
         id: "#{select_id}-listbox",
         "aria-orientation": "vertical",
-        "aria-labelledby": "#{select_id}-trigger"
+        "aria-labelledby": "#{select_id}-trigger",
+        data: { empty: "No results found." }
       }
 
       listbox_attrs[:class] = "scrollbar overflow-y-auto max-h-64" if scrollable
 
-      if url
-        listbox_attrs[:data] = {
-          controller: "search",
-          search_url_value: url
-        }
-      end
-
       content_tag(:div, listbox_attrs) do
         if url
           turbo_frame_tag(turbo_frame)

data/lib/basecoat/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Basecoat
-  VERSION = "2.3.0"
+  VERSION = "3.0.0"
 end

data/lib/generators/basecoat/templates/devise/registrations/edit.html.erb

@@ -52,12 +52,12 @@
         <p>Unhappy? You can delete your account below.</p>
       </header>
       <footer>
-        <%= button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?", turbo_confirm: "Are you sure?" }, method: :delete, class: "btn-outline" %>
+        <%= button_to "Cancel my account", registration_path(resource_name), data: { confirm: "Are you sure?", turbo_confirm: "Are you sure?", variant: "outline" }, method: :delete, class: "btn" %>
       </footer>
     </div>
 
     <div class="mt-6">
-      <%= link_to "Back", :back, class: "btn-ghost" %>
+      <%= link_to "Back", :back, class: "btn", data: { variant: "ghost" } %>
     </div>
   </div>
 </div>

data/lib/generators/basecoat/templates/devise/shared/_error_messages.html.erb

@@ -1,5 +1,5 @@
 <% if resource.errors.any? %>
-  <div class="alert-destructive max-w-2xl mx-auto" data-turbo-cache="false">
+  <div class="alert max-w-2xl mx-auto" data-variant="destructive" data-turbo-cache="false">
     <%= lucide_icon "circle-x", class: "w-5 h-5" %>
     <h2><%= pluralize(resource.errors.count, "error") %> prohibited this <%= resource.class.model_name.human.downcase %> from being saved</h2>
     <section>

data/lib/generators/basecoat/templates/devise/shared/_links.html.erb

@@ -1,27 +1,27 @@
 <div class="flex flex-col gap-2 text-sm">
   <%- if controller_name != 'sessions' %>
-    <%= link_to "Log in", new_session_path(resource_name), class: "btn-ghost" %>
+    <%= link_to "Log in", new_session_path(resource_name), class: "btn", data: { variant: "ghost" } %>
   <% end %>
 
   <%- if devise_mapping.registerable? && controller_name != 'registrations' %>
-    <%= link_to "Sign up", new_registration_path(resource_name), class: "btn-ghost" %>
+    <%= link_to "Sign up", new_registration_path(resource_name), class: "btn", data: { variant: "ghost" } %>
   <% end %>
 
   <%- if devise_mapping.recoverable? && controller_name != 'passwords' && controller_name != 'registrations' %>
-    <%= link_to "Forgot your password?", new_password_path(resource_name), class: "btn-ghost" %>
+    <%= link_to "Forgot your password?", new_password_path(resource_name), class: "btn", data: { variant: "ghost" } %>
   <% end %>
 
   <%- if devise_mapping.confirmable? && controller_name != 'confirmations' %>
-    <%= link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name), class: "btn-ghost" %>
+    <%= link_to "Didn't receive confirmation instructions?", new_confirmation_path(resource_name), class: "btn", data: { variant: "ghost" } %>
   <% end %>
 
   <%- if devise_mapping.lockable? && resource_class.unlock_strategy_enabled?(:email) && controller_name != 'unlocks' %>
-    <%= link_to "Didn't receive unlock instructions?", new_unlock_path(resource_name), class: "btn-ghost" %>
+    <%= link_to "Didn't receive unlock instructions?", new_unlock_path(resource_name), class: "btn", data: { variant: "ghost" } %>
   <% end %>
 
   <%- if devise_mapping.omniauthable? %>
     <%- resource_class.omniauth_providers.each do |provider| %>
-      <%= button_to "Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider), data: { turbo: false }, class: "btn-outline" %>
+      <%= button_to "Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider), data: { turbo: false, variant: "outline" }, class: "btn" %>
     <% end %>
   <% end %>
 </div>

data/lib/generators/basecoat/templates/devise.html.erb

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <%= render "layouts/head" %>
-  <body class="dark">
+  <body>
     <%= render 'layouts/notice', notice: notice if notice %>
     <div class="grid min-h-svh lg:grid-cols-2">
       <div class="flex flex-col gap-4 p-6 md:p-10">

data/lib/generators/basecoat/templates/layouts/_alert.html.erb

@@ -1,4 +1,4 @@
-<div class="alert-destructive max-w-2xl mx-auto" data-turbo-cache="false">
+<div class="alert max-w-2xl mx-auto" data-variant="destructive" data-turbo-cache="false">
   <%= lucide_icon "circle-x", class: "w-5 h-5" %>
   <h2><%= alert %></h2>
 </div>

data/lib/generators/basecoat/templates/layouts/_aside.html.erb

@@ -1,13 +1,13 @@
 <aside class="sidebar" data-side="left" aria-hidden="false">
   <nav aria-label="Sidebar navigation">
     <header>
-      <a href="/" class="btn-ghost p-2 h-12 w-full justify-start" aria-current="page">
+      <a href="/" class="btn p-2 h-12 w-full justify-start" data-variant="ghost" aria-current="page">
         <div class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" class="h-4 w-4"><rect width="256" height="256" fill="none"></rect><line x1="208" y1="128" x2="128" y2="208" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></line><line x1="192" y1="40" x2="40" y2="192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></line></svg>
         </div>
         <div class="grid flex-1 text-left text-sm leading-tight">
           <span class="truncate font-medium">Basecoat</span>
-          <span class="truncate text-xs">v0.3.10</span>
+          <span class="truncate text-xs">v1.0.2</span>
         </div>
       </a>
     </header>

data/lib/generators/basecoat/templates/layouts/_form_errors.html.erb

@@ -1,4 +1,4 @@
-<div class="alert-destructive max-w-2xl mx-auto">
+<div class="alert max-w-2xl mx-auto" data-variant="destructive">
   <%= lucide_icon "circle-x", class: "w-5 h-5" %>
   <h2><%= pluralize(object.errors.count, "error") %> prohibited this object from being saved</h2>
   <section>

data/lib/generators/basecoat/templates/layouts/_head.html.erb

@@ -19,6 +19,9 @@
   <%= stylesheet_link_tag :app, "data-turbo-track": "reload" %>
   <%= javascript_importmap_tags %>
   <script>
+      // Apply the stored theme before first paint to prevent flickering.
+      // Toggling is handled by basecoat (window.basecoat.theme), which
+      // reads and writes the same 'themeMode' localStorage key.
       (() => {
           try {
               const stored = localStorage.getItem('themeMode');
@@ -27,18 +30,6 @@
                   document.documentElement.classList.add('dark');
               }
           } catch (_) {}
-
-          const apply = dark => {
-              document.documentElement.classList.toggle('dark', dark);
-              try { localStorage.setItem('themeMode', dark ? 'dark' : 'light'); } catch (_) {}
-          };
-
-          document.addEventListener('basecoat:theme', (event) => {
-              const mode = event.detail?.mode;
-              apply(mode === 'dark' ? true
-                  : mode === 'light' ? false
-                      : !document.documentElement.classList.contains('dark'));
-          });
       })();
   </script>
 </head>

data/lib/generators/basecoat/templates/layouts/_header.html.erb

@@ -1,6 +1,6 @@
 <header class="bg-background sticky inset-x-0 top-0 isolate flex shrink-0 items-center gap-2 border-b z-10 px-4">
   <div class="flex h-14 flex-1 items-center gap-2">
-    <button type="button" onclick="document.dispatchEvent(new CustomEvent('basecoat:sidebar'))" aria-label="Toggle sidebar" data-tooltip="Toggle sidebar" data-side="bottom" data-align="start" class="btn-sm-icon-ghost mr-auto size-7 -ml-1.5">
+    <button type="button" onclick="document.querySelector('.sidebar')?.toggle()" aria-label="Toggle sidebar" data-tooltip="Toggle sidebar" data-side="bottom" data-align="start" class="btn mr-auto size-7 -ml-1.5" data-variant="ghost" data-size="icon-sm">
       <%= lucide_icon "panel-left" %>
     </button>
     <%= render "layouts/theme_toggle" %>

data/lib/generators/basecoat/templates/layouts/_theme_toggle.html.erb

@@ -1,4 +1,4 @@
-<button type="button" aria-label="Toggle dark mode" data-tooltip="Toggle dark mode" data-side="left" onclick="document.dispatchEvent(new CustomEvent('basecoat:theme'))" class="btn-ghost size-8">
+<button type="button" aria-label="Toggle dark mode" data-tooltip="Toggle dark mode" data-side="left" onclick="window.basecoat.theme.toggle()" class="btn size-8" data-variant="ghost" data-size="icon">
   <span class="hidden dark:block"><%= lucide_icon "sun" %></span>
   <span class="block dark:hidden"><%= lucide_icon "moon" %></span>
 </button>

data/lib/generators/basecoat/templates/search_controller.js

@@ -17,5 +17,8 @@ export default class extends Controller {
     })
       .then(response => response.text())
       .then(html => Turbo.renderStreamMessage(html))
+      // Basecoat comboboxes cache their options on init, so they need a
+      // refresh after Turbo has rendered the new options into the listbox.
+      .then(() => this.element.refresh?.())
   }
 }

data/lib/generators/basecoat/templates/sessions.html.erb

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <%= render "layouts/head" %>
-<body class="dark">
+<body>
 <%= render 'layouts/notice', notice: notice if notice %>
 <div class="grid min-h-svh lg:grid-cols-2">
     <div class="flex flex-col gap-4 p-6 md:p-10">

data/lib/tasks/basecoat.rake

@@ -51,7 +51,7 @@ namespace :basecoat do
 
       unless importmap_content.include?("basecoat-css")
         File.open(importmap_path, "a") do |f|
-          f.puts "\npin \"basecoat-css/all\", to: \"https://cdn.jsdelivr.net/npm/basecoat-css@0.3.10/dist/js/all.js\""
+          f.puts "\npin \"basecoat-css/all\", to: \"https://cdn.jsdelivr.net/npm/basecoat-css@1.0.2/dist/js/all.js\""
         end
         puts "  Added: basecoat-css to config/importmap.rb"
       end
@@ -192,6 +192,38 @@ namespace :basecoat do
       end
     end
 
+    # Make sure the theme bootstrap script is present in _head.html.erb.
+    # Basecoat only writes the themeMode localStorage key; applying it on
+    # page load is the app's job. Without this script the theme reverts to
+    # light on every refresh (and dark mode flickers). This matters when
+    # the head was extracted from an existing layout instead of copied
+    # from the gem's template.
+    head_destination = partials_destination.join("_head.html.erb")
+    if File.exist?(head_destination)
+      head_content = File.read(head_destination)
+      unless head_content.include?("themeMode")
+        theme_script = <<~HTML.gsub(/^/, "  ")
+          <script>
+              // Apply the stored theme before first paint to prevent flickering.
+              // Toggling is handled by basecoat (window.basecoat.theme), which
+              // reads and writes the same 'themeMode' localStorage key.
+              (() => {
+                  try {
+                      const stored = localStorage.getItem('themeMode');
+                      if (stored ? stored === 'dark'
+                          : matchMedia('(prefers-color-scheme: dark)').matches) {
+                          document.documentElement.classList.add('dark');
+                      }
+                  } catch (_) {}
+              })();
+          </script>
+        HTML
+        updated_content = head_content.sub(/(<\/head>)/, "#{theme_script}\\1")
+        File.write(head_destination, updated_content)
+        puts "  Added: theme bootstrap script to app/views/layouts/_head.html.erb"
+      end
+    end
+
     # Copy application layout
     layout_source = File.expand_path("../generators/basecoat/templates/application.html.erb", __dir__)
     if prompt_overwrite(layout_destination, overwrite_all)
@@ -236,7 +268,7 @@ namespace :basecoat do
         head_content = File.read(head_path)
         unless head_content.include?("basecoat.cdn.min.css")
           cdn_link = '  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basecoat-css@0.3.10/dist/basecoat.cdn.min.css">'
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/basecoat-css@1.0.2/dist/basecoat.cdn.min.css">'
           # Insert before the closing </head> tag
           updated_content = head_content.sub(/(<\/head>)/, "#{cdn_link}\n\\1")
           File.write(head_path, updated_content)
@@ -306,13 +338,13 @@ namespace :basecoat do
 
             <% if defined?(user_signed_in?) && user_signed_in? %>
               <div id="dropdown-user" class="dropdown-menu">
-                <button type="button" id="dropdown-user-trigger" aria-haspopup="menu" aria-controls="dropdown-user-menu" aria-expanded="false" class="btn-ghost size-8">
+                <button type="button" id="dropdown-user-trigger" aria-haspopup="menu" aria-controls="dropdown-user-menu" aria-expanded="false" class="btn size-8" data-variant="ghost" data-size="icon">
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-user-icon lucide-circle-user"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg>
                 </button>
                 <div id="dropdown-user-popover" data-popover="" aria-hidden="true" data-align="end">
                   <div role="menu" id="dropdown-user-menu" aria-labelledby="dropdown-user-trigger">
                     <div class="px-1 py-1.5">
-                      <%= button_to destroy_user_session_path, method: :delete, class: "btn-link" do %>
+                      <%= button_to destroy_user_session_path, method: :delete, class: "btn", data: { variant: "link" } do %>
                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
                         Log out
                       <% end %>
@@ -447,13 +479,13 @@ namespace :basecoat do
 
             <% if defined?(Current) && defined?(Current.user) && Current.user %>
               <div id="dropdown-user" class="dropdown-menu">
-                <button type="button" id="dropdown-user-trigger" aria-haspopup="menu" aria-controls="dropdown-user-menu" aria-expanded="false" class="btn-ghost size-8">
+                <button type="button" id="dropdown-user-trigger" aria-haspopup="menu" aria-controls="dropdown-user-menu" aria-expanded="false" class="btn size-8" data-variant="ghost" data-size="icon">
                   <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-user-icon lucide-circle-user"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg>
                 </button>
                 <div id="dropdown-user-popover" data-popover="" aria-hidden="true" data-align="end">
                   <div role="menu" id="dropdown-user-menu" aria-labelledby="dropdown-user-trigger">
                     <div class="px-1 py-1.5">
-                      <%= button_to session_path, method: :delete, class: "btn-link" do %>
+                      <%= button_to session_path, method: :delete, class: "btn", data: { variant: "link" } do %>
                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
                         Log out
                       <% end %>

data/lib/templates/erb/scaffold/_form.html.erb.tt

@@ -40,7 +40,7 @@
 
 <% end -%>
   <div class="flex justify-end space-x-3 pt-6">
-    <%%= link_to "Cancel", <%= index_helper(type: :path) %>, class: "btn-outline" %>
+    <%%= link_to "Cancel", <%= index_helper(type: :path) %>, class: "btn", data: { variant: "outline" } %>
     <%%= form.submit class: "btn" %>
   </div>
 <%% end %>

data/lib/templates/erb/scaffold/edit.html.erb.tt

@@ -12,8 +12,8 @@
     </div>
 
     <div class="flex flex-wrap gap-3 mt-6">
-      <%%= link_to "Show this <%= human_name.downcase %>", <%= model_resource_name(prefix: "@") %>, class: "btn-outline", data: { turbo_action: "advance" } %>
-      <%%= link_to "Back to <%= human_name.pluralize.downcase %>", <%= index_helper(type: :path) %>, class: "btn-outline", data: { turbo_action: "advance" } %>
+      <%%= link_to "Show this <%= human_name.downcase %>", <%= model_resource_name(prefix: "@") %>, class: "btn", data: { variant: "outline", turbo_action: "advance" } %>
+      <%%= link_to "Back to <%= human_name.pluralize.downcase %>", <%= index_helper(type: :path) %>, class: "btn", data: { variant: "outline", turbo_action: "advance" } %>
     </div>
   </div>
 <%% end %>

data/lib/templates/erb/scaffold/index.html.erb.tt

@@ -36,7 +36,7 @@
             </td>
 <% end -%>
             <td class="bg-background sticky right-0">
-              <%%= link_to "Show", <%= model_resource_name(singular_table_name) %>, class: "btn-outline", data: { turbo_action: "advance" } %>
+              <%%= link_to "Show", <%= model_resource_name(singular_table_name) %>, class: "btn", data: { variant: "outline", turbo_action: "advance" } %>
             </td>
           </tr>
         <%% end %>

data/lib/templates/erb/scaffold/new.html.erb.tt

@@ -12,7 +12,7 @@
     </div>
 
     <div class="mt-6">
-      <%%= link_to "Back to <%= human_name.pluralize.downcase %>", <%= index_helper(type: :path) %>, class: "btn-outline", data: { turbo_action: "advance" } %>
+      <%%= link_to "Back to <%= human_name.pluralize.downcase %>", <%= index_helper(type: :path) %>, class: "btn", data: { variant: "outline", turbo_action: "advance" } %>
     </div>
   </div>
 <%% end %>

data/lib/templates/erb/scaffold/show.html.erb.tt

@@ -28,12 +28,12 @@
 
   <div class="flex flex-wrap gap-3 mt-6">
     <%%= link_to "Edit this <%= human_name.downcase %>", <%= edit_helper(type: :path) %>, class: "btn", data: { turbo_action: "advance" } %>
-    <%%= link_to "Back to <%= human_name.pluralize.downcase %>", <%= index_helper(type: :path) %>, class: "btn-outline", data: { turbo_action: "advance" } %>
+    <%%= link_to "Back to <%= human_name.pluralize.downcase %>", <%= index_helper(type: :path) %>, class: "btn", data: { variant: "outline", turbo_action: "advance" } %>
     <%%= button_to "Delete this <%= human_name.downcase %>",
           <%= model_resource_name(prefix: "@") %>,
           method: :delete,
-          class: "btn-destructive",
-          data: { turbo_confirm: "Are you sure you want to delete this <%= human_name.downcase %>?", turbo_action: "advance" },
+          class: "btn",
+          data: { variant: "destructive", turbo_confirm: "Are you sure you want to delete this <%= human_name.downcase %>?", turbo_action: "advance" },
           form_class: "inline-block" %>
   </div>
 </div>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: basecoat
 version: !ruby/object:Gem::Version
-  version: 2.3.0
+  version: 3.0.0
 platform: ruby
 authors:
 - Martijn Lafeber