ariadne_view_components 0.0.94.6 → 0.0.95

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

@@ -75,24 +75,24 @@ module Ariadne
         style :popover do
           base do
             [
-              "ariadne-fixed",
-              "ariadne-max-w-[90vw]",
-              "ariadne-z-20",
+              "ariadne:fixed",
+              "ariadne:max-w-[90vw]",
+              "ariadne:z-20",
               "ariadne-scroll",
               "ariadne-scrollbar-trigger",
-              "ariadne-rounded-lg",
-              "ariadne-shadow-lg",
-              "ariadne-bg-popover",
+              "ariadne:rounded-lg",
+              "ariadne:shadow-lg",
+              "ariadne:bg-popover",
               "text-popover-foreground",
             ]
           end
 
           variants do
             size do
-              sm { "ariadne-w-36" }
-              md { "ariadne-w-52" }
-              lg { "ariadne-w-96" }
-              full { "ariadne-w-full" }
+              sm { "ariadne:w-36" }
+              md { "ariadne:w-52" }
+              lg { "ariadne:w-96" }
+              full { "ariadne:w-full" }
               none {} # let the child decide how big its menu ought to be
             end
           end
@@ -101,8 +101,8 @@ module Ariadne
         style :options do
           base do
             [
-              "ariadne-overflow-auto",
-              "ariadne-p-2",
+              "ariadne:overflow-auto",
+              "ariadne:p-2",
             ]
           end
         end

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

@@ -6,8 +6,8 @@
     class="<%= html_attrs[:class] %>"
     data-<%= stimulus_name %>-target="dialog"
     <%= html_attributes %>>
-    <div class="ariadne-flex ariadne-flex-col ariadne-space-y-2 ariadne-text-center sm:ariadne-text-left">
-      <span id="<%= dialog_id %>-title" class="ariadne-text-lg ariadne-font-semibold"><%= title %></span>
+    <div class="ariadne:flex ariadne:flex-col ariadne:space-y-2 ariadne:text-center ariadne:sm:text-left">
+      <span id="<%= dialog_id %>-title" class="ariadne:text-lg ariadne:font-semibold"><%= title %></span>
   <% if content.present? %>
     <%= content %>
   <% else %>
@@ -19,7 +19,7 @@
     <%= footer %>
   <% end %>
 </div>
-<div class="ariadne-absolute ariadne-end-3 ariadne-top-3">
+<div class="ariadne:absolute ariadne:end-3 ariadne:top-3">
   <%= render Ariadne::UI::Button::Component.new(
           scheme: :nude,
           size: :xs,

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

@@ -85,33 +85,33 @@ module Ariadne
         style do
           base do
             [
-              "ariadne-fixed",
-              "ariadne-max-h-[90-vh]",
-              "ariadne-shadow-xl",
-              "ariadne-rounded-2xl",
-              "ariadne-bg-card",
-              "ariadne-text-card-foreground",
-              "ariadne-text-content",
-              "dark:ariadne-text-content-dark",
-              "backdrop:ariadne-bg-zinc-900/20",
-              "backdrop:dark:ariadne-bg-zinc-100/20",
-              "ariadne-relative",
-              "ariadne-px-4",
-              "ariadne-pb-4",
-              "ariadne-pt-5",
-              "ariadne-text-left",
-              "ariadne-shadow-xl",
-              "ariadne-transition-all",
-              "sm:ariadne-w-full",
-              "sm:ariadne-max-w-xl",
-              "sm:ariadne-p-6",
+              "ariadne:fixed",
+              "ariadne:max-h-[90-vh]",
+              "ariadne:shadow-xl",
+              "ariadne:rounded-2xl",
+              "ariadne:bg-card",
+              "ariadne:text-card-foreground",
+              "ariadne:text-content",
+              "ariadne:dark:text-content-dark",
+              "ariadne:backdrop:bg-zinc-900/20",
+              "ariadne:dark:backdrop:bg-zinc-100/20",
+              "ariadne:relative",
+              "ariadne:px-4",
+              "ariadne:pb-4",
+              "ariadne:pt-5",
+              "ariadne:text-left",
+              "ariadne:shadow-xl",
+              "ariadne:transition-all",
+              "ariadne:sm:w-full",
+              "ariadne:sm:max-w-xl",
+              "ariadne:sm:p-6",
             ]
           end
           variants do
             width do
               full do
                 [
-                  "ariadne-w-full",
+                  "ariadne:w-full",
                 ]
               end
             end

data/app/components/ariadne/ui/dialog/footer/component.rb

@@ -19,11 +19,11 @@ module Ariadne
           style do
             base do
               [
-                "ariadne-flex",
-                "ariadne-flex-col-reverse",
-                "sm:ariadne-flex-row",
-                "sm:ariadne-justify-end",
-                "sm:ariadne-space-x-2",
+                "ariadne:flex",
+                "ariadne:flex-col-reverse",
+                "ariadne:sm:flex-row",
+                "ariadne:sm:justify-end",
+                "ariadne:sm:space-x-2",
               ]
             end
           end

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

@@ -57,11 +57,11 @@ module Ariadne
         style do
           variants do
             size do
-              xs { ["ariadne-w-4", "ariadne-h-4"] }
-              sm { ["ariadne-w-5", "ariadne-h-5"] }
-              md { ["ariadne-w-6", "ariadne-h-6"] }
-              lg { ["ariadne-w-10", "ariadne-h-10"] }
-              xl { ["ariadne-w-12", "ariadne-h-12"] }
+              xs { ["ariadne:w-4", "ariadne:h-4"] }
+              sm { ["ariadne:w-5", "ariadne:h-5"] }
+              md { ["ariadne:w-6", "ariadne:h-6"] }
+              lg { ["ariadne:w-10", "ariadne:h-10"] }
+              xl { ["ariadne:w-12", "ariadne:h-12"] }
             end
           end
         end

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

@@ -34,16 +34,16 @@ module Ariadne
 
         style do
           base do
-            ["ariadne-object-cover", "ariadne-object-center"]
+            ["ariadne:object-cover", "ariadne:object-center"]
           end
 
           variants do
             size do
-              xs { "ariadne-w-4" }
-              sm { "ariadne-w-6" }
-              md { "ariadne-w-8" }
-              lg { "ariadne-w-12" }
-              xl { "ariadne-w-16" }
+              xs { "ariadne:w-4" }
+              sm { "ariadne:w-6" }
+              md { "ariadne:w-8" }
+              lg { "ariadne:w-12" }
+              xl { "ariadne:w-16" }
             end
           end
         end

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

@@ -30,13 +30,13 @@ module Ariadne
         style do
           base do
             [
-              "ariadne-cursor-pointer",
-              "ariadne-text-content",
-              "dark:ariadne-text-content-dark",
-              # "ariadne-inline-flex",
-              "ariadne-items-center",
-              "ariadne-border-b",
-              "ariadne-border-transparent",
+              "ariadne:cursor-pointer",
+              "ariadne:text-content",
+              "ariadne:dark:text-content-dark",
+              # "ariadne:inline-flex",
+              "ariadne:items-center",
+              "ariadne:border-b",
+              "ariadne:border-transparent",
             ]
           end
 
@@ -44,35 +44,35 @@ module Ariadne
             scheme do
               base do
                 [
-                  "ariadne-text-indigo-600",
-                  "dark:ariadne-text-indigo-400",
+                  "ariadne:text-indigo-600",
+                  "ariadne:dark:text-indigo-400",
 
-                  "[&>svg]:ariadne-text-zinc-400",
-                  "[&>svg]:dark:ariadne-text-zinc-600",
+                  "ariadne:[&>svg]:text-zinc-400",
+                  "ariadne:dark:[&>svg]:text-zinc-600",
 
-                  "hover:ariadne-text-indigo-500",
-                  "dark:hover:ariadne-text-indigo-300",
-                  "hover:ariadne-border-indigo-500",
-                  "dark:hover:ariadne-border-indigo-300",
-                  "focus:ariadne-text-indigo-500",
-                  "dark:focus:ariadne-text-indigo-300",
-                  "focus:!ariadne-border-transparent",
-                  "active:ariadne-bg-indigo-700/10",
-                  "active:dark:ariadne-bg-indigo-300/10",
+                  "ariadne:hover:text-indigo-500",
+                  "ariadne:dark:hover:text-indigo-300",
+                  "ariadne:hover:border-indigo-500",
+                  "ariadne:dark:hover:border-indigo-300",
+                  "ariadne:focus:text-indigo-500",
+                  "ariadne:dark:focus:text-indigo-300",
+                  "ariadne:focus:border-transparent!",
+                  "ariadne:active:bg-indigo-700/10",
+                  "ariadne:dark:active:bg-indigo-300/10",
                 ]
               end
 
               nude do
                 [
-                  "hover:ariadne-text-indigo-600",
-                  "dark:hover:ariadne-text-indigo-400",
-                  "hover:ariadne-border-indigo-600",
-                  "dark:hover:ariadne-border-indigo-400",
-                  "focus:ariadne-text-indigo-500",
-                  "dark:focus:ariadne-text-indigo-300",
-                  "focus:!ariadne-border-transparent",
-                  "active:ariadne-bg-indigo-700/10",
-                  "active:dark:ariadne-bg-indigo-300/10",
+                  "ariadne:hover:text-indigo-600",
+                  "ariadne:dark:hover:text-indigo-400",
+                  "ariadne:hover:border-indigo-600",
+                  "ariadne:dark:hover:border-indigo-400",
+                  "ariadne:focus:text-indigo-500",
+                  "ariadne:dark:focus:text-indigo-300",
+                  "ariadne:focus:border-transparent!",
+                  "ariadne:active:bg-indigo-700/10",
+                  "ariadne:dark:active:bg-indigo-300/10",
                 ]
               end
 
@@ -82,17 +82,17 @@ module Ariadne
 
               thick do
                 [
-                  "ariadne-font-semibold",
+                  "ariadne:font-semibold",
                 ]
               end
             end
 
             size do
-              xs { "ariadne-text-xs ariadne-gap-0.5 [&>svg]:ariadne-size-3" }
-              sm { "ariadne-text-sm ariadne-gap-0.5 [&>svg]:ariadne-size-4" }
-              md { "ariadne-text-base ariadne-gap-1 [&>svg]:ariadne-size-4" }
-              lg { "ariadne-text-lg ariadne-gap-1 [&>svg]:ariadne-size-5" }
-              xl { "ariadne-text-xl ariadne-gap-1 [&>svg]:ariadne-size-6" }
+              xs { "ariadne:text-xs ariadne:gap-0.5 ariadne:[&>svg]:size-3" }
+              sm { "ariadne:text-sm ariadne:gap-0.5 ariadne:[&>svg]:size-4" }
+              md { "ariadne:text-base ariadne:gap-1 ariadne:[&>svg]:size-4" }
+              lg { "ariadne:text-lg ariadne:gap-1 ariadne:[&>svg]:size-5" }
+              xl { "ariadne:text-xl ariadne:gap-1 ariadne:[&>svg]:size-6" }
             end
           end
         end

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

@@ -1,6 +1,6 @@
 <div class="<%= html_attrs[:class] %>" <%= html_attributes %>>
   <% if filter_field? %>
-    <div class="ariadne-pb-1.5 ariadne-px-1">
+    <div class="ariadne:pb-1.5 ariadne:px-1">
       <%= render filter_field %>
     </div>
   <% end %>
@@ -10,19 +10,19 @@
     <% end %>
     <% checkboxes.each do |checkbox| %>
       <div class="<%= style(:item) %>" data-<%= stimulus_name %>-target="searchString">
-        <div class="ariadne-truncate ariadne-w-full" role="menuitemcheckbox"><%= checkbox %></div>
+        <div class="ariadne:truncate ariadne:w-full" role="menuitemcheckbox"><%= checkbox %></div>
       </div>
     <% end %>
     <% radio_buttons.each do |radio_button| %>
       <div class="<%= style(:item) %>" data-<%= stimulus_name %>-target="searchString">
-        <div class="ariadne-truncate" role="menuitemradiobutton"><%= radio_button %></div>
+        <div class="ariadne:truncate" role="menuitemradiobutton"><%= radio_button %></div>
       </div>
     <% end %>
     <% items.each do |item| %>
       <%= item %>
     <% end %>
   </div>
-  <div class="ariadne-text-center ariadne-hidden" data-<%= stimulus_name %>-target="emptyRoot">
-    <span class="ariadne-py-3 ariadne-text-md ariadne-text-zinc-600 dark:ariadne-text-zinc-400"><%= @empty_placeholder %> </span>
+  <div class="ariadne:text-center ariadne:hidden" data-<%= stimulus_name %>-target="emptyRoot">
+    <span class="ariadne:py-3 ariadne:text-md ariadne:text-zinc-600 ariadne:dark:text-zinc-400"><%= @empty_placeholder %> </span>
   </div>
 </div>

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

@@ -60,16 +60,16 @@ module Ariadne
           options[:html_attrs] ||= {}
           options[:html_attrs][:class] ||= ""
           options[:html_attrs][:class] = [
-            "ariadne-truncate",
-            "ariadne-border-b-0",
-            "ariadne-flex",
-            "ariadne-gap-0.5",
-            "ariadne-items-center",
-            "ariadne-ps-2",
-            "ariadne-pe-1",
-            "ariadne-rounded",
-            "!ariadne-ring-0",
-            "ariadne-cursor-pointer",
+            "ariadne:truncate",
+            "ariadne:border-b-0",
+            "ariadne:flex",
+            "ariadne:gap-0.5",
+            "ariadne:items-center",
+            "ariadne:ps-2",
+            "ariadne:pe-1",
+            "ariadne:rounded",
+            "ariadne:ring-0!",
+            "ariadne:cursor-pointer",
             SHARED_BACKGROUND_COLORS,
             options[:html_attrs][:class],
           ]
@@ -91,26 +91,26 @@ module Ariadne
         end
 
         SHARED_BACKGROUND_COLORS = [
-          "hover:ariadne-bg-blue-100",
-          "hover:dark:ariadne-bg-blue-800",
-          "focus-within:ariadne-bg-blue-100",
-          "focus-within:dark:ariadne-bg-blue-800",
+          "ariadne:hover:bg-blue-100",
+          "ariadne:dark:hover:bg-blue-800",
+          "ariadne:focus-within:bg-blue-100",
+          "ariadne:dark:focus-within:bg-blue-800",
         ]
 
         style do
           base do
             [
-              "ariadne-overflow-y-auto",
-              "ariadne-grow",
+              "ariadne:overflow-y-auto",
+              "ariadne:grow",
             ]
           end
 
           variants do
             size do
-              sm { "ariadne-w-36" }
-              md { "ariadne-w-52" }
-              lg { "ariadne-w-96" }
-              full { "ariadne-w-full" }
+              sm { "ariadne:w-36" }
+              md { "ariadne:w-52" }
+              lg { "ariadne:w-96" }
+              full { "ariadne:w-full" }
             end
           end
         end
@@ -118,9 +118,9 @@ module Ariadne
         style :items do
           base do
             [
-              "ariadne-flex",
-              "ariadne-flex-col",
-              "ariadne-gap-1",
+              "ariadne:flex",
+              "ariadne:flex-col",
+              "ariadne:gap-1",
             ]
           end
         end

data/app/components/ariadne/ui/list/component.ts

@@ -19,16 +19,16 @@ export default class InputFilterController extends controllerFactory()({
       if (!foundSomething && contains) foundSomething = true
 
       if (contains) {
-        el.classList.remove('ariadne-hidden')
+        el.classList.remove('ariadne:hidden')
       } else {
-        el.classList.add('ariadne-hidden')
+        el.classList.add('ariadne:hidden')
       }
     }
 
     if (foundSomething) {
-      this.emptyRootTarget.classList.add('ariadne-hidden')
+      this.emptyRootTarget.classList.add('ariadne:hidden')
     } else {
-      this.emptyRootTarget.classList.remove('ariadne-hidden')
+      this.emptyRootTarget.classList.remove('ariadne:hidden')
     }
   }
 

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

@@ -1,5 +1,5 @@
 <div
   <%= 'role="menuitem"' if as_menu %>
   class="<%= html_attrs[:class] %>" <%= html_attributes %>>
-  <div class="ariadne-relative ariadne-flex ariadne-w-full"><%= content %></div>
+  <div class="ariadne:relative ariadne:flex ariadne:w-full"><%= content %></div>
 </div>

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

@@ -21,21 +21,21 @@ module Ariadne
           style :item do
             base do
               [
-                # "ariadne-gap-0.5",
-                "ariadne-items-center",
-                "ariadne-rounded",
-                "!ariadne-ring-0",
-                "ariadne-cursor-default",
-                "ariadne-select-none",
-                "ariadne-items-center",
-                "ariadne-rounded-sm",
-                "ariadne-px-2",
-                # "ariadne-py-1.5",
-                "ariadne-text-sm",
-                "ariadne-outline-none",
-                "ariadne-transition-colors",
-                "disabled:ariadne-pointer-events-none",
-                "disabled:ariadne-opacity-50",
+                # "ariadne:gap-0.5",
+                "ariadne:items-center",
+                "ariadne:rounded",
+                "ariadne:ring-0!",
+                "ariadne:cursor-default",
+                "ariadne:select-none",
+                "ariadne:items-center",
+                "ariadne:rounded-sm",
+                "ariadne:px-2",
+                # "ariadne:py-1.5",
+                "ariadne:text-sm",
+                "ariadne:outline-hidden",
+                "ariadne:transition-colors",
+                "ariadne:disabled:pointer-events-none",
+                "ariadne:disabled:opacity-50",
               ].concat(Ariadne::UI::List::Component::SHARED_BACKGROUND_COLORS)
             end
           end

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

@@ -40,7 +40,7 @@
             "data-turbo": false,
             selected: option[:selected]
           ) do %>
-            <span class="!ariadne-text-gray-700 dark:!ariadne-text-gray-300"><%= option[:label].to_s %></span>
+            <span class="ariadne:text-gray-700! ariadne:dark:text-gray-300!"><%= option[:label].to_s %></span>
           <% end %>
         <% end %>
       <% end %>

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

@@ -49,17 +49,17 @@ module Ariadne
 
         def component_classes
           merge_tailwind_classes(
-            "ariadne-flex ariadne-items-center ariadne-justify-between ariadne-w-full",
+            "ariadne:flex ariadne:items-center ariadne:justify-between ariadne:w-full",
           )
         end
 
         def link_classes(is_active = false)
-          base_classes = "ariadne-inline-flex ariadne-items-center ariadne-justify-center ariadne-min-w-[2rem] ariadne-h-8 ariadne-px-2 ariadne-text-sm ariadne-font-medium ariadne-rounded-md"
+          base_classes = "ariadne:inline-flex ariadne:items-center ariadne:justify-center ariadne:min-w-[2rem] ariadne:h-8 ariadne:px-2 ariadne:text-sm ariadne:font-medium ariadne:rounded-md"
 
           active_classes = if is_active
-            "ariadne-bg-gray-100 dark:ariadne-bg-gray-700 ariadne-text-gray-900 dark:ariadne-text-white ariadne-cursor-default"
+            "ariadne:bg-gray-100 ariadne:dark:bg-gray-700 ariadne:text-gray-900 ariadne:dark:text-white ariadne:cursor-default"
           else
-            "ariadne-transition-colors ariadne-text-gray-600 hover:ariadne-bg-gray-50 dark:ariadne-text-gray-300 dark:hover:ariadne-bg-gray-700 ariadne-cursor-pointer"
+            "ariadne:transition-colors ariadne:text-gray-600 ariadne:hover:bg-gray-50 ariadne:dark:text-gray-300 ariadne:dark:hover:bg-gray-700 ariadne:cursor-pointer"
           end
 
           merge_tailwind_classes([base_classes, active_classes])
@@ -67,25 +67,25 @@ module Ariadne
 
         def disabled_link_classes
           merge_tailwind_classes(
-            "ariadne-inline-flex ariadne-items-center ariadne-justify-center ariadne-min-w-[2rem] ariadne-h-8 ariadne-px-2 ariadne-text-sm ariadne-font-medium ariadne-rounded-md ariadne-text-gray-300 dark:ariadne-text-gray-600 ariadne-cursor-not-allowed",
+            "ariadne:inline-flex ariadne:items-center ariadne:justify-center ariadne:min-w-[2rem] ariadne:h-8 ariadne:px-2 ariadne:text-sm ariadne:font-medium ariadne:rounded-md ariadne:text-gray-300 ariadne:dark:text-gray-600 ariadne:cursor-not-allowed",
           )
         end
 
         def ellipsis_classes
           merge_tailwind_classes(
-            "ariadne-inline-flex ariadne-items-center ariadne-justify-center ariadne-min-w-[2rem] ariadne-h-8 ariadne-px-1 ariadne-text-sm ariadne-font-medium ariadne-text-gray-500 dark:ariadne-text-gray-400",
+            "ariadne:inline-flex ariadne:items-center ariadne:justify-center ariadne:min-w-[2rem] ariadne:h-8 ariadne:px-1 ariadne:text-sm ariadne:font-medium ariadne:text-gray-500 ariadne:dark:text-gray-400",
           )
         end
 
         def select_classes
           merge_tailwind_classes(
-            "ariadne-h-8 ariadne-pl-2 ariadne-pr-8 ariadne-text-sm ariadne-font-medium ariadne-rounded-md ariadne-border ariadne-border-gray-300 dark:ariadne-border-gray-600 ariadne-bg-white dark:ariadne-bg-gray-800 ariadne-text-gray-700 dark:ariadne-text-gray-200 hover:ariadne-border-primary-500 focus:ariadne-outline-none focus:ariadne-ring-1 focus:ariadne-ring-primary-500 focus:ariadne-border-primary-500",
+            "ariadne:h-8 ariadne:pl-2 ariadne:pr-8 ariadne:text-sm ariadne:font-medium ariadne:rounded-md ariadne:border ariadne:border-gray-300 ariadne:dark:border-gray-600 ariadne:bg-white ariadne:dark:bg-gray-800 ariadne:text-gray-700 ariadne:dark:text-gray-200 ariadne:hover:border-primary-500 ariadne:focus:outline-hidden ariadne:focus:ring-1 ariadne:focus:ring-primary-500 ariadne:focus:border-primary-500",
           )
         end
 
         def counter_classes
           merge_tailwind_classes(
-            "ariadne-text-sm ariadne-text-gray-700 dark:ariadne-text-gray-300 ariadne-font-medium",
+            "ariadne:text-sm ariadne:text-gray-700 ariadne:dark:text-gray-300 ariadne:font-medium",
           )
         end
 
@@ -113,7 +113,7 @@ module Ariadne
 
         def nav_section_classes
           merge_tailwind_classes(
-            "ariadne-flex ariadne-items-center ariadne-gap-1 ariadne-justify-center",
+            "ariadne:flex ariadne:items-center ariadne:gap-1 ariadne:justify-center",
           )
         end
       end

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

@@ -79,12 +79,12 @@ module Ariadne
         style do
           base do
             [
-              "ariadne-fixed",
-              "ariadne-z-20",
-              "ariadne-rounded-lg",
-              "ariadne-shadow-lg",
-              "ariadne-bg-popover",
-              "dark:ariadne-bg-popover-dark",
+              "ariadne:fixed",
+              "ariadne:z-20",
+              "ariadne:rounded-lg",
+              "ariadne:shadow-lg",
+              "ariadne:bg-popover",
+              "ariadne:dark:bg-popover-dark",
             ]
           end
         end

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

@@ -1,4 +1,4 @@
-<span class="ariadne-inline-flex ariadne-items-center ariadne-gap-2">
+<span class="ariadne:inline-flex ariadne:items-center ariadne:gap-1">
   <kbd data-controller='<%= stimulus_name %>' <%= html_attributes %>>
   <% keys.each_with_index do |key, index| %>
     <% if special_keys.include? key.downcase %>
@@ -8,12 +8,12 @@
     <%= key.capitalize %>
   </kbd>
 <% elsif key.downcase == 'enter' %>
-  <kbd class="<%= html_attrs[:class] %> !ariadne-font-fallback">↵</kbd>
+  <kbd class="<%= html_attrs[:class] %> ariadne:font-fallback!">↵</kbd>
 <% else %>
-  <kbd class="<%= html_attrs[:class] %> ariadne-uppercase"><%= key %></kbd>
+  <kbd class="<%= html_attrs[:class] %>"><%= key %></kbd>
 <% end %>
 <% if index != keys.size - 1 %>
-  <span class="sr-only">+</span>
+  <span class="ariadne:text-muted-foreground ariadne:mx-0.5">+</span>
 <% end %>
 <% end %>
 </kbd>