ariadne_view_components 0.0.94.6 → 0.0.95

data/app/components/ariadne/form/toggle_group/option/component.rb

@@ -29,13 +29,13 @@ module Ariadne
           style :tab do
             base do
               [
-                "ariadne-px-1.5",
-                "ariadne-rounded-md",
-                "ariadne-opacity-75",
-                "has-[:checked]:ariadne-shadow-sm",
-                "has-[:checked]:ariadne-opacity-100",
-                "has-[:checked]:ariadne-bg-white",
-                "dark:has-[:checked]:ariadne-bg-white/20",
+                "ariadne:px-1.5",
+                "ariadne:rounded-md",
+                "ariadne:opacity-75",
+                "ariadne:has-checked:shadow-sm",
+                "ariadne:has-checked:opacity-100",
+                "ariadne:has-checked:bg-white",
+                "ariadne:dark:has-checked:bg-white/20",
               ]
             end
           end

data/app/components/ariadne/layout/grid/component.rb

@@ -14,12 +14,12 @@ module Ariadne
         style :grid do
           base do
             [
-              "ariadne-grid",
-              "ariadne-grid-cols-1",
-              "ariadne-gap-6",
-              "sm:ariadne-grid-cols-2",
-              "md:ariadne-grid-cols-3",
-              "lg:ariadne-grid-cols-4",
+              "ariadne:grid",
+              "ariadne:grid-cols-1",
+              "ariadne:gap-6",
+              "ariadne:sm:grid-cols-2",
+              "ariadne:md:grid-cols-3",
+              "ariadne:lg:grid-cols-4",
             ]
           end
         end

data/app/components/ariadne/layout/grid/item/component.html.erb

@@ -1,10 +1,10 @@
 
 <% if blank? %>
-<li class="ariadne-contents" <%= html_attributes %>>
+<li class="ariadne:contents" <%= html_attributes %>>
     <%= content %>
 </li>
 <% else %>
-<li class="ariadne-contents">
+<li class="ariadne:contents">
 <div class="<%= html_attrs[:class] %>" <%= html_attributes %>>
     <%= content %>
     </div>

data/app/components/ariadne/layout/grid/item/component.rb

@@ -19,12 +19,12 @@ module Ariadne
           style :item do
             base do
               [
-                "ariadne-flex",
-                "ariadne-flex-col",
-                "ariadne-gap-3",
-                "ariadne-p-3",
-                "ariadne-ps-4",
-                "ariadne-rounded-xl",
+                "ariadne:flex",
+                "ariadne:flex-col",
+                "ariadne:gap-3",
+                "ariadne:p-3",
+                "ariadne:ps-4",
+                "ariadne:rounded-xl",
               ]
             end
           end

data/app/components/ariadne/layout/label_block/component.html.erb

@@ -1,5 +1,5 @@
 <div class="<%= html_attrs[:class] %>" <%= html_attributes %>>
-  <div class='ariadne-py-1 ariadne-mb-1 text-h5-caps ariadne-text-zinc-600 dark:ariadne-text-zinc-400'>
+  <div class='ariadne:py-1 ariadne:mb-1 text-h5-caps ariadne:text-zinc-600 ariadne:dark:text-zinc-400'>
     <div class="aridne--ml-px aridne-flex aridne-flex-1">
       <%= label %>
       <% if trailing_visual? %>

data/app/components/ariadne/layout/label_block/component.rb

@@ -31,8 +31,8 @@ module Ariadne
           base do
             [
               "araidne-pl-2",
-              "ariadne-text-gray-400",
-              "hover:ariadne-text-gray-500",
+              "ariadne:text-gray-400",
+              "ariadne:hover:text-gray-500",
             ]
           end
         end

data/app/components/ariadne/layout/narrow/component.html.erb

@@ -1,6 +1,6 @@
 <main class="<%= html_attrs[:class] %>" <%= html_attributes %>>
-    <div class="ariadne-mt-10 sm:ariadne-mx-auto sm:ariadne-w-full sm:ariadne-max-w-[480px]">
-        <div class="ariadne-bg-card dark:ariadne-bg-card-dark ariadne-px-6 ariadne-py-12 ariadne-shadow sm:ariadne-rounded-lg sm:ariadne-px-12">
+    <div class="ariadne:mt-10 ariadne:sm:mx-auto ariadne:sm:w-full ariadne:sm:max-w-[480px]">
+        <div class="ariadne:bg-card ariadne:dark:bg-card-dark ariadne:px-6 ariadne:py-12 ariadne:shadow ariadne:sm:rounded-lg ariadne:sm:px-12">
             <%= content %>
         </div>
   <% if footer? %>

data/app/components/ariadne/layout/narrow/component.rb

@@ -14,14 +14,14 @@ module Ariadne
         style(:container) do
           base do
             [
-              "ariadne-bg-background",
-              "dark:ariadne-bg-background-dark",
-              "ariadne-text-content",
-              "dark:ariadne-text-content-dark",
-              "ariadne-grow",
-              "ariadne-h-screen",
-              "ariadne-py-6",
-              "ariadne-px-1",
+              "ariadne:bg-background",
+              "ariadne:dark:bg-background-dark",
+              "ariadne:text-content",
+              "ariadne:dark:text-content-dark",
+              "ariadne:grow",
+              "ariadne:h-screen",
+              "ariadne:py-6",
+              "ariadne:px-1",
             ]
           end
         end

data/app/components/ariadne/layout/nav_bar/component.html.erb

@@ -1,26 +1,26 @@
 <header class="<%= style %>">
-  <div class="ariadne-mx-auto ariadne-px-2 sm:ariadne-px-4 lg:ariadne-px-8">
-    <nav class="ariadne-flex ariadne-h-16 ariadne-justify-between">
-      <div class="ariadne-flex ariadne-px-2 lg:ariadne-px-0">
+  <div class="ariadne:mx-auto ariadne:px-2 ariadne:sm:px-4 ariadne:lg:px-8">
+    <nav class="ariadne:flex ariadne:h-16 ariadne:justify-between">
+      <div class="ariadne:flex ariadne:px-2 ariadne:lg:px-0">
         <% leading_items.each_with_index do |leading_item, idx| %>
           <div class="<%= style(:leading_item, initial: initial?(idx)) %>">
             <%= leading_item %>
           </div>
         <% end %>
       </div>
-      <div class="ariadne-flex ariadne-items-center ariadne-space-x-4 lg:ariadne-space-x-6 ariadne-mx-6">
+      <div class="ariadne:flex ariadne:items-center ariadne:space-x-4 ariadne:lg:space-x-6 ariadne:mx-6">
         <% @links.each do |link| %>
           <a
             aria-current="<%= link[:current] ? "page" : "false" %>"
             href="<%= link[:href] %>"
             class="<%= style(:tab, active: link[:current] ? :yes : :no) %>">
-            <span class="ariadne-inline-block ariadne-rounded-md group-hover:ariadne-bg-zinc-200/20 dark:group-hover:ariadne-bg-zinc-700/20">
-              <span class="ariadne-px-1.5"><%= link[:label] %></span>
+            <span class="ariadne:inline-block ariadne:rounded-md ariadne:group-hover:bg-zinc-200/20 ariadne:dark:group-hover:bg-zinc-700/20">
+              <span class="ariadne:px-1.5"><%= link[:label] %></span>
             </span>
           </a>
         <% end %>
       </div>
-      <div class="ariadne-hidden lg:ariadne-ml-4 lg:ariadne-flex lg:ariadne-items-center">
+      <div class="ariadne:hidden ariadne:lg:ml-4 ariadne:lg:flex ariadne:lg:items-center">
         <% trailing_items.each_with_index do |trailing_item, idx| %>
           <div class="<%= style(:trailing_item, initial: final?(idx)) %>">
             <%= trailing_item %>

data/app/components/ariadne/layout/nav_bar/component.rb

@@ -32,13 +32,13 @@ module Ariadne
         style do
           base do
             [
-              "ariadne-bg-panel",
-              "dark:ariadne-bg-panel-dark",
-              "ariadne-border-b",
-              "ariadne-border-zinc-100",
-              "dark:ariadne-border-zinc-900",
-              "ariadne-z-50",
-              "ariadne-overflow-hidden",
+              "ariadne:bg-panel",
+              "ariadne:dark:bg-panel-dark",
+              "ariadne:border-b",
+              "ariadne:border-zinc-100",
+              "ariadne:dark:border-zinc-900",
+              "ariadne:z-50",
+              "ariadne:overflow-hidden",
             ]
           end
         end
@@ -52,8 +52,8 @@ module Ariadne
 
           variants do
             initial do
-              yes { "ariadne-flex ariadne-flex-shrink-0 ariadne-items-center" }
-              no { "ariadne-hidden lg:ariadne-ml-6 lg:ariadne-flex lg:ariadne-space-x-2" }
+              yes { "ariadne:flex ariadne:shrink-0 ariadne:items-center" }
+              no { "ariadne:hidden ariadne:lg:ml-6 ariadne:lg:flex ariadne:lg:space-x-2" }
             end
           end
         end
@@ -61,28 +61,28 @@ module Ariadne
         style :tab do
           base do
             [
-              "ariadne-text-content",
-              "dark:ariadne-text-content-dark",
-              "ariadne-text-base",
-              "ariadne-font-medium",
-              "ariadne-whitespace-nowrap",
-              "ariadne-border-b-2",
-              "ariadne-py-2",
+              "ariadne:text-content",
+              "ariadne:dark:text-content-dark",
+              "ariadne:text-base",
+              "ariadne:font-medium",
+              "ariadne:whitespace-nowrap",
+              "ariadne:border-b-2",
+              "ariadne:py-2",
             ]
           end
           variants do
             active do
               no do
                 [
-                  "ariadne-group", "ariadne-border-transparent",
+                  "ariadne:group", "ariadne:border-transparent",
                 ]
               end
               yes do
                 [
-                  "ariadne-border-billy-purple-700",
-                  "ariadne-text-billy-purple-700",
-                  "dark:ariadne-border-billy-purple-300",
-                  "dark:ariadne-text-billy-purple-300",
+                  "ariadne:border-purple-700",
+                  "ariadne:text-purple-700",
+                  "ariadne:dark:border-purple-300",
+                  "ariadne:dark:text-purple-300",
                 ]
               end
             end
@@ -92,11 +92,11 @@ module Ariadne
         style(:trailing_item) do
           base do
             [
-              "ariadne-flex",
-              "ariadne-flex-1",
-              "ariadne-items-center",
-              "ariadne-justify-end",
-              "ariadne-gap-x-1",
+              "ariadne:flex",
+              "ariadne:flex-1",
+              "ariadne:items-center",
+              "ariadne:justify-end",
+              "ariadne:gap-x-1",
             ]
           end
 

data/app/components/ariadne/layout/section_block/component.html.erb

@@ -1,4 +1,4 @@
-<section class="ariadne-flex ariadne-flex-col ariadne-h-full">
+<section class="ariadne:flex ariadne:flex-col ariadne:h-full">
   <%= header %>
   <%= content %>
 </section>

data/app/components/ariadne/layout/section_block/header/component.html.erb

@@ -1,4 +1,4 @@
-<div class="ariadne-flex ariadne-justify-between ariadne-items-center ariadne-p-1">
-  <div class="ariadne-uppercase ariadne-text-muted-foreground dark:ariadne-text-muted-foreground-dark ariadne-text-xs"><%= label %></div>
+<div class="ariadne:flex ariadne:justify-between ariadne:items-center ariadne:p-1">
+  <div class="ariadne:uppercase ariadne:text-muted-foreground ariadne:dark:text-muted-foreground-dark ariadne:text-xs"><%= label %></div>
   <%= content %>
 </div>

data/app/components/ariadne/layout/two_panel/component.html.erb

@@ -1,11 +1,11 @@
-<main class="ariadne-grow ariadne-flex">
-    <div class="ariadne-grow">
+<main class="ariadne:grow ariadne:flex">
+    <div class="ariadne:grow">
 <div class="<%= style %>">
   <div class="<%= style(:menu) %>">
     <%= left_panel %>
   </div>
-    <div class="ariadne-grow ariadne-min-w-0 ariadne-w-full">
-    <div class="md:ariadne-w-4/5 md:ariadne-mx-auto ariadne-p-2.5">
+    <div class="ariadne:grow ariadne:min-w-0 ariadne:w-full">
+    <div class="ariadne:md:w-4/5 ariadne:md:mx-auto ariadne:p-2.5">
         <%= content %>
     </div>
 

data/app/components/ariadne/layout/two_panel/component.rb

@@ -10,7 +10,7 @@ module Ariadne
         style do
           base do
             [
-              "ariadne-flex", "ariadne-flex-col", "sm:ariadne-flex-row", "ariadne-h-full",
+              "ariadne:flex", "ariadne:flex-col", "ariadne:sm:flex-row", "ariadne:h-full",
             ]
           end
         end
@@ -18,17 +18,17 @@ module Ariadne
         style :menu do
           base do
             [
-              "ariadne-basis-1/4",
-              "ariadne-shrink-0",
-              "ariadne-px-2",
-              "ariadne-pb-2",
-              "sm:ariadne-p-4",
-              "ariadne-bg-zinc-50",
-              "dark:ariadne-bg-zinc-900",
-              "max-sm:ariadne-border-b",
-              "sm:ariadne-border-e",
-              "ariadne-border-black/10",
-              "dark:ariadne-border-white/10",
+              "ariadne:basis-1/4",
+              "ariadne:shrink-0",
+              "ariadne:px-2",
+              "ariadne:pb-2",
+              "ariadne:sm:p-4",
+              "ariadne:bg-zinc-50",
+              "ariadne:dark:bg-zinc-900",
+              "ariadne:max-sm:border-b",
+              "ariadne:sm:border-e",
+              "ariadne:border-black/10",
+              "ariadne:dark:border-white/10",
             ]
           end
         end

data/app/components/ariadne/layout/wide/component.rb

@@ -10,12 +10,12 @@ module Ariadne
         style do
           base do
             [
-              "ariadne-h-screen",
-              "ariadne-grow",
-              "ariadne-bg-background",
-              "dark:ariadne-bg-background-dark",
-              "ariadne-py-6",
-              "ariadne-px-1",
+              "ariadne:h-screen",
+              "ariadne:grow",
+              "ariadne:bg-background",
+              "ariadne:dark:bg-background-dark",
+              "ariadne:py-6",
+              "ariadne:px-1",
             ]
           end
         end

data/app/components/ariadne/ui/accordion/component.html.erb

@@ -1,5 +1,5 @@
 <div class="<%= html_attrs[:class] %>" <%= html_attributes %>>
-  <div class="ariadne-w-full">
+  <div class="ariadne:w-full">
     <% items.each do |item| %>
       <%= item %>
     <% end %>

data/app/components/ariadne/ui/accordion/component.rb

@@ -16,10 +16,10 @@ module Ariadne
         style do
           base do
             [
-              "ariadne-flex",
-              "ariadne-w-full",
-              "ariadne-justify-center",
-              "ariadne-items-center",
+              "ariadne:flex",
+              "ariadne:w-full",
+              "ariadne:justify-center",
+              "ariadne:items-center",
             ]
           end
         end

data/app/components/ariadne/ui/accordion/item/component.html.erb

@@ -5,7 +5,7 @@
     <% if heroicon? %>
       <%= heroicon %>
     <% else %>
-      <%= render Ariadne::UI::Heroicon::Component.new(icon: "chevron-down", size: :sm, variant: :solid, html_attrs: { class: "ariadne-transition-transform ariadne-duration-200 ariadne-opacity-50" }) %>
+      <%= render Ariadne::UI::Heroicon::Component.new(icon: "chevron-down", size: :sm, variant: :solid, html_attrs: { class: "ariadne:transition-transform ariadne:duration-200 ariadne:opacity-50" }) %>
     <% end %>
   </div>
 </button>

data/app/components/ariadne/ui/accordion/item/component.rb

@@ -27,8 +27,8 @@ module Ariadne
           style(:item) do
             base do
               [
-                "ariadne-border-b",
-                "ariadne-cursor-pointer",
+                "ariadne:border-b",
+                "ariadne:cursor-pointer",
               ]
             end
           end
@@ -36,15 +36,15 @@ module Ariadne
           style(:trigger) do
             base do
               [
-                "ariadne-flex",
-                "ariadne-flex-1",
-                "ariadne-items-center",
-                "ariadne-justify-between",
-                "ariadne-py-4",
-                "ariadne-font-medium",
-                "ariadne-transition-all",
-                "ariadne-w-full",
-                "hover:ariadne-underline",
+                "ariadne:flex",
+                "ariadne:flex-1",
+                "ariadne:items-center",
+                "ariadne:justify-between",
+                "ariadne:py-4",
+                "ariadne:font-medium",
+                "ariadne:transition-all",
+                "ariadne:w-full",
+                "ariadne:hover:underline",
               ]
             end
           end
@@ -52,7 +52,7 @@ module Ariadne
           style(:content) do
             base do
               [
-                "ariadne-overflow-y-hidden",
+                "ariadne:overflow-y-hidden",
               ]
             end
           end

data/app/components/ariadne/ui/avatar/component.rb

@@ -36,23 +36,23 @@ module Ariadne
         style do
           base do
             [
-              "ariadne-select-none",
-              "ariadne-object-cover",
-              "ariadne-outline",
-              "ariadne-outline-1",
-              "-ariadne-outline-offset-1",
-              "ariadne-outline-black/20",
-              "dark:ariadne-outline-white/20",
+              "ariadne:select-none",
+              "ariadne:object-cover",
+              "ariadne:outline",
+              "ariadne:outline-1",
+              "ariadne:-outline-offset-1",
+              "ariadne:outline-black/20",
+              "ariadne:dark:outline-white/20",
             ]
           end
 
           variants do
             size do
-              xs { ["ariadne-size-4", "ariadne-text-xs", "ariadne-rounded"] }
-              sm { ["ariadne-size-5", "ariadne-text-sm", "ariadne-rounded-sm"] }
-              md { ["ariadne-size-8", "ariadne-text-md", "ariadne-rounded-md"] }
-              lg { ["ariadne-size-10", "ariadne-text-lg", "ariadne-rounded-lg"] }
-              xl { ["ariadne-size-12", "ariadne-text-xl", "ariadne-rounded-xl"] }
+              xs { ["ariadne:size-4", "ariadne:text-xs", "ariadne:rounded"] }
+              sm { ["ariadne:size-5", "ariadne:text-sm", "ariadne:rounded-sm"] }
+              md { ["ariadne:size-8", "ariadne:text-md", "ariadne:rounded-md"] }
+              lg { ["ariadne:size-10", "ariadne:text-lg", "ariadne:rounded-lg"] }
+              xl { ["ariadne:size-12", "ariadne:text-xl", "ariadne:rounded-xl"] }
             end
 
             shape do
@@ -62,8 +62,8 @@ module Ariadne
 
               circle do
                 [
-                  "ariadne-rounded-full",
-                  "*:ariadne-rounded-full",
+                  "ariadne:rounded-full",
+                  "ariadne:*:rounded-full",
                 ]
               end
             end
@@ -71,13 +71,13 @@ module Ariadne
             has_src do
               no do
                 [
-                  "ariadne-inline-flex",
-                  "ariadne-items-center",
-                  "ariadne-justify-center",
-                  "ariadne-bg-violet-200",
-                  "dark:ariadne-bg-violet-800",
-                  "ariadne-text-violet-600",
-                  "dark:ariadne-text-violet-400",
+                  "ariadne:inline-flex",
+                  "ariadne:items-center",
+                  "ariadne:justify-center",
+                  "ariadne:bg-violet-200",
+                  "ariadne:dark:bg-violet-800",
+                  "ariadne:text-violet-600",
+                  "ariadne:dark:text-violet-400",
                 ]
               end
             end

data/app/components/ariadne/ui/badge/component.rb

@@ -45,22 +45,22 @@ module Ariadne
         style do
           base do
             [
-              "ariadne-truncate",
-              "ariadne-max-w-full",
-              "ariadne-border",
-              "ariadne-border-solid",
-              "ariadne-border-black/10",
-              "dark:ariadne-border-white/10",
-              "ariadne-text-content",
-              "dark:ariadne-text-content-dark",
-              "ariadne-outline-none",
-              "ariadne-ring-offset-0",
-              "focus-visible:ariadne-ring-2",
-              "ariadne-ring-blue-400",
-              "dark:ariadne-ring-blue-600",
-              "ariadne-py-1",
-              "ariadne-px-1.5",
-              "ariadne-rounded-md",
+              "ariadne:truncate",
+              "ariadne:max-w-full",
+              "ariadne:border",
+              "ariadne:border-solid",
+              "ariadne:border-black/10",
+              "ariadne:dark:border-white/10",
+              "ariadne:text-content",
+              "ariadne:dark:text-content-dark",
+              "ariadne:outline-hidden",
+              "ariadne:ring-offset-0",
+              "ariadne:focus-visible:ring-2",
+              "ariadne:ring-blue-400",
+              "ariadne:dark:ring-blue-600",
+              "ariadne:py-1",
+              "ariadne:px-1.5",
+              "ariadne:rounded-md",
             ]
           end
 
@@ -69,31 +69,31 @@ module Ariadne
             include_colors!
 
             with_leading_item do
-              yes { "ariadne-inline-flex ariadne-items-center" }
-              no { "ariadne-inline-block" }
+              yes { "ariadne:inline-flex ariadne:items-center" }
+              no { "ariadne:inline-block" }
             end
 
             theme do
-              outline { "ariadne-bg-transparent ariadne-text-blue-400 ariadne-border-blue-400" }
-              ghost { "ariadne-bg-blue-400 ariadne-text-white ariadne-border-blue-400" }
+              outline { "ariadne:bg-transparent ariadne:text-blue-400 ariadne:border-blue-400" }
+              ghost { "ariadne:bg-blue-400 ariadne:text-white ariadne:border-blue-400" }
             end
 
             size do
-              xs { "ariadne-text-xs ariadne-leading-3" }
-              sm { "ariadne-text-xs ariadne-leading-4" }
-              md { "ariadne-text-base ariadne-leading-5" }
-              lg { "ariadne-text-lg ariadne-leading-6" }
-              xl { "ariadne-text-xl ariadne-leading-8" }
+              xs { "ariadne:text-xs ariadne:leading-3" }
+              sm { "ariadne:text-xs ariadne:leading-4" }
+              md { "ariadne:text-base ariadne:leading-5" }
+              lg { "ariadne:text-lg ariadne:leading-6" }
+              xl { "ariadne:text-xl ariadne:leading-8" }
             end
           end
 
-          compound(size: :xs, with_leading_item: :yes) { ["ariadne-pe-1 ariadne-ps-0.5"] }
-          compound(size: :sm, with_leading_item: :yes) { ["ariadne-pe-1.5 ariadne-ps-0.5"] }
-          compound(size: :md, with_leading_item: :yes) { ["ariadne-pe-1.5 ariadne-ps-0.5"] }
+          compound(size: :xs, with_leading_item: :yes) { ["ariadne:pe-1 ariadne:ps-0.5"] }
+          compound(size: :sm, with_leading_item: :yes) { ["ariadne:pe-1.5 ariadne:ps-0.5"] }
+          compound(size: :md, with_leading_item: :yes) { ["ariadne:pe-1.5 ariadne:ps-0.5"] }
 
-          compound(size: :xs, with_leading_item: :no) { ["ariadne-px-1"] }
-          compound(size: :sm, with_leading_item: :no) { ["ariadne-px-1.5"] }
-          compound(size: :md, with_leading_item: :no) { ["ariadne-px-2"] }
+          compound(size: :xs, with_leading_item: :no) { ["ariadne:px-1"] }
+          compound(size: :sm, with_leading_item: :no) { ["ariadne:px-1.5"] }
+          compound(size: :md, with_leading_item: :no) { ["ariadne:px-2"] }
         end
       end
     end

data/app/components/ariadne/ui/banner/component.html.erb

@@ -1,19 +1,19 @@
 <div class="<%= html_attrs[:class] %>" <%= html_attributes %>>
-  <section aria-labelledby="<%= @header_id %>" class="ariadne-p-4">
-    <div class="ariadne-flex ariadne-items-center">
-      <div class="ariadne-flex-shrink-0 <%= style(:text, scheme:) %>">
+  <section aria-labelledby="<%= @header_id %>" class="ariadne:p-4">
+    <div class="ariadne:flex ariadne:items-center">
+      <div class="ariadne:shrink-0 <%= style(:text, scheme:) %>">
         <%= render heroicon_or_default %>
       </div>
-      <div class="ariadne-ml-3 ariadne-w-0 ariadne-flex-1 ariadne-pt-0.5 <%= style(:text, scheme:) %>">
-        <p id="<%= @header_id %>" class="ariadne-text-sm ariadne-font-semibold" data-<%= Ariadne::UI::Banner::Component.stimulus_name %>-target="title"><%= title %></p>
-        <p class="ariadne-mt-1 ariadne-text-sm" data-<%= Ariadne::UI::Banner::Component.stimulus_name %>-target="message"><%= content %></p>
+      <div class="ariadne:ml-3 ariadne:w-0 ariadne:flex-1 ariadne:pt-0.5 <%= style(:text, scheme:) %>">
+        <p id="<%= @header_id %>" class="ariadne:text-sm ariadne:font-semibold" data-<%= Ariadne::UI::Banner::Component.stimulus_name %>-target="title"><%= title %></p>
+        <p class="ariadne:mt-1 ariadne:text-sm" data-<%= Ariadne::UI::Banner::Component.stimulus_name %>-target="message"><%= content %></p>
       </div>
       <% if action %>
-        <div class="ariadne-flex">
+        <div class="ariadne:flex">
           <%= action %>
         </div>
       <% end %>
-      <div class="ariadne-ml-4 ariadne-flex ariadne-flex-shrink-0 ">
+      <div class="ariadne:ml-4 ariadne:flex ariadne:shrink-0 ">
         <% if @dismissible %>
           <%= render Ariadne::UI::Button::Component.new(scheme: :nude, html_attrs: { class: style(:dismissable, scheme:), aria: { label: dismiss_label }, data: { action: "click->#{stimulus_name}#dismiss" } }).as_icon(icon: "x-mark", variant: :outline) %>
         <% end %>