maglevcms 3.0.0.beta3 → 3.0.1

data/app/assets/javascripts/maglev/editor/patches/turbo_stream_patch.js

@@ -1,18 +1,18 @@
 
 import { StreamActions } from '@hotwired/turbo'
 import TurboDelayedStreams from 'maglev-patches/turbo_delayed_streams'
-import { generateRequestId } from 'maglev-controllers/utils'
+import { generateRequestId, log } from 'maglev-controllers/utils'
 
 // Custom stream actions
 StreamActions.console_log = function() {
   const message = this.getAttribute("message")
-  console.log(message)
+  log(message)
 }
 
 StreamActions.dispatch_event = function() {
   const type = this.getAttribute("type")
   const payload = this.getAttribute("payload")
-  console.log('dispatchEvent', type, payload, `dispatcher:${type}`)
+  log('dispatchEvent', type, payload, `dispatcher:${type}`)
   const event = new CustomEvent(`dispatcher:${type}`, { detail: JSON.parse(payload) })
   window.dispatchEvent(event)
 }

data/app/assets/stylesheets/maglev/tailwind.css.erb

@@ -8,8 +8,12 @@
   --color-editor-primary: var(--editor-color-primary);
 }
 
+/* Empty-state overlay in #root: visible when the preview Stimulus shell has .is-empty */
+@custom-variant editor-preview-empty (body:has([data-controller~="editor-page-preview"].is-empty) &);
+
 @source "<%= Maglev::Engine.root.join('app') %>";
 @source "<%= Maglev::Engine.root.join('lib') %>";
+@source "<%= Maglev::Engine.root.join('spec/components/previews/maglev/uikit') %>";
 
 <% Maglev.config.tailwindcss_folders.each do |folder| %>
 @source "<%= folder %>";
@@ -28,6 +32,10 @@
 }
 
 @layer base {
+  .turbo-progress-bar {
+    background-color: var(--editor-color-primary) !important;
+  }
+
   /* Tiptap / ProseMirror */
   .ProseMirror {
     @apply block py-2 px-3 rounded bg-gray-100 text-gray-800 focus:outline-none focus:ring focus:ring-inset focus:ring-2 focus:ring-editor-primary/50 placeholder-gray-500;
@@ -143,7 +151,6 @@
       td,
       th {
         min-width: 1em;
-        // border: 2px solid $color-grey;
         @apply border-2;
         @apply border-solid;
         padding: 3px 5px;

data/app/components/maglev/content/link.rb

@@ -4,7 +4,7 @@ module Maglev
   module Content
     class Link < Base
       def href
-        link[:href]
+        link[:href] || '#'
       end
 
       def text

data/app/components/maglev/editor/settings/link/link_component.rb

@@ -6,12 +6,18 @@ module Maglev
       module Link
         class LinkComponent < Maglev::Editor::Settings::BaseComponent
           def edit_link_path
-            fetch_path(:edit_link_path, { value: value, input_name: input_name })
+            fetch_path(:edit_link_path, { value: value || default_value, input_name: input_name })
           end
 
           def after_initialize
             @value = value&.with_indifferent_access
           end
+
+          private
+
+          def default_value
+            { link_type: 'url' }
+          end
         end
       end
     end

data/app/components/maglev/section_component.rb

@@ -1,5 +1,10 @@
 # frozen_string_literal: true
 
+# NOTE: this class is too long (but not too complex),
+# we need to move it along with the PageComponent and BlockComponent
+# to a separate folder (content?)
+
+# rubocop:disable Metrics/ClassLength
 module Maglev
   class SectionComponent < BaseComponent
     include TagHelper
@@ -31,7 +36,7 @@ module Maglev
     end
 
     def lock_version
-      @lock_version ||= attributes[:lock_version] || '0'
+      @lock_version ||= lock_source&.lock_version || '0'
     end
 
     def dom_data
@@ -63,6 +68,10 @@ module Maglev
 
     private
 
+    def lock_source
+      definition&.site_scoped? ? site : page
+    end
+
     def build_block_list
       build_blocks(attributes[:blocks])
     end
@@ -131,3 +140,4 @@ module Maglev
     end
   end
 end
+# rubocop:enable Metrics/ClassLength

data/app/components/maglev/uikit/app_layout/sidebar/link_component.html.erb

@@ -1,5 +1,5 @@
 <li>
-  <%= link_to path, class: link_classes(active: active?), data: data do %>
+  <%= link_to path, link_html_options do %>
     <%= render Maglev::Uikit::IconComponent.new(name: icon, size: icon_size) %>
   <% end %>
 </li>

data/app/components/maglev/uikit/app_layout/sidebar/link_component.rb

@@ -5,12 +5,24 @@ module Maglev
     module AppLayout
       module Sidebar
         class LinkComponent < Maglev::Uikit::BaseComponent
-          attr_reader :path, :icon, :icon_size, :active, :data
+          LINK_BASE_CLASSES = [
+            'relative flex w-full min-h-11 items-center justify-center rounded py-3',
+            'outline-none transition-colors duration-200',
+            'focus-visible:ring-2 focus-visible:ring-editor-primary/50',
+            'focus-visible:ring-offset-2 focus-visible:ring-offset-white'
+          ].join(' ')
 
-          def initialize(path:, icon:, active: false, options: {})
+          LINK_ACTIVE_CLASSES = 'bg-gray-100 text-editor-primary hover:bg-gray-100'
+
+          LINK_INACTIVE_CLASSES = 'text-black hover:bg-gray-100'
+
+          attr_reader :path, :icon, :icon_size, :active, :data, :label
+
+          def initialize(path:, icon:, active: false, label: nil, options: {})
             @path = path
             @active = active
             @icon = icon
+            @label = label
             @icon_size = options[:icon_size] || '1.5rem'
             @position = options[:position] || :top
             @data = options[:data]
@@ -24,15 +36,33 @@ module Maglev
             @position == :top
           end
 
+          def link_html_options
+            {
+              class: link_classes(active: active?),
+              data: data,
+              title: label.presence,
+              aria: link_aria_attributes
+            }.compact
+          end
+
           def link_classes(...)
             class_variants(
-              base: 'flex justify-center py-5 -ml-4 -mr-4 hover:bg-gray-100 transition-colors duration-200',
+              base: LINK_BASE_CLASSES,
               variants: {
-                active: 'bg-gray-100',
-                '!active': 'bg-white'
+                active: LINK_ACTIVE_CLASSES,
+                '!active': LINK_INACTIVE_CLASSES
               }
             ).render(...)
           end
+
+          private
+
+          def link_aria_attributes
+            aria = {}
+            aria[:label] = label.presence
+            aria[:current] = 'page' if active?
+            aria.compact.presence
+          end
         end
       end
     end

data/app/components/maglev/uikit/app_layout/sidebar_component.html.erb

@@ -2,15 +2,14 @@
   id="app-layout-sidebar"
   class="w-16 flex-shrink-0 flex content-center h-full border-r border-gray-200 relative z-20 bg-white"
 >
-  <nav class="w-16 flex flex-col justify-between">
-    <ol class="divide-y divide-gray-300 px-4">
+  <nav class="flex h-full w-16 flex-col justify-between py-2">
+    <ol class="flex flex-col gap-1 px-2">
       <% links.each do |link| %>
         <%= link if link.top? %>
       <% end %>      
     </ol>
 
-    <ol class="divide-y divide-gray-300 px-4">
-      <li></li>
+    <ol class="flex flex-col gap-1 px-2">
       <% links.each do |link| %>
         <%= link unless link.top? %>
       <% end %>      

data/app/components/maglev/uikit/app_layout/topbar_component.html.erb

@@ -9,7 +9,7 @@
     <%= render Maglev::Uikit::DeviceTogglerComponent.new %>
   </div>
 
-  <div class="col-span-2 flex justify-end h-full">
+  <div class="col-span-2 flex justify-end h-full items-center">
     <%= actions %>
   </div>
 </div>

data/app/components/maglev/uikit/app_layout/topbar_component.rb

@@ -5,7 +5,7 @@ module Maglev
     module AppLayout
       class TopbarComponent < ViewComponent::Base
         renders_one :logo, 'Maglev::Uikit::AppLayout::Topbar::LogoComponent'
-        # -> { Maglev::Uikit::AppLayout::Topbar::LogoComponent.new(root_path: root_path, logo_url: logo_url) }
+
         renders_one :page_info
         renders_one :actions
 

data/app/components/maglev/uikit/button_group_component/button_group_component.html.erb

@@ -0,0 +1,5 @@
+<div class="[&>*:first-child]:rounded-l-sm [&>*:last-child]:rounded-r-sm inline-flex items-center text-white divide-x divide-white/15">
+  <% buttons.each do |button| %>
+    <%= button %>    
+  <% end %>
+</div>

data/app/components/maglev/uikit/button_group_component.rb

@@ -0,0 +1,70 @@
+# frozen_string_literal: true
+
+module Maglev
+  module Uikit
+    class ButtonGroupComponent < Maglev::Uikit::BaseComponent
+      renders_many :buttons
+
+      attr_reader :color, :size
+
+      def initialize(color: nil, size: nil)
+        @color = color || :primary
+        @size = size || :medium
+      end
+
+      # rubocop:disable Metrics/MethodLength
+      def button_classes
+        class_variants(
+          base: %(
+            inline-flex items-center justify-center cursor-pointer
+            group-[.is-success]/form:bg-green-500/95 group-[.is-success]/form:hover:bg-green-500/100
+            group-[.is-success]/form:disabled:bg-green-500/75
+            group-[.is-error]/form:bg-red-500/95 group-[.is-error]/form:hover:bg-red-500/100
+            group-[.is-error]/form:disabled:bg-red-500/75
+          ),
+          variants: {
+            size: {
+              medium: 'inline-flex items-center justify-center px-4 h-10'
+            },
+            color: {
+              primary: 'text-white bg-editor-primary hover:bg-editor-primary/90 disabled:bg-editor-primary/75',
+              secondary: 'text-gray-800 hover:bg-gray-100'
+            }
+          }
+        ).render(color: color, size: size)
+      end
+      # rubocop:enable Metrics/MethodLength
+
+      # rubocop:disable Metrics/MethodLength
+      def wrapper_classes(**args)
+        class_variants(
+          base: %(
+            inline-flex items-center transition-colors duration-200 h-full
+            [.is-success]:bg-green-500/95 [.is-success]:hover:bg-green-500/100
+            [.is-success]:disabled:bg-green-500/75
+            [.is-error]:bg-red-500/95 [.is-error]:hover:bg-red-500/100
+            [.is-error]:disabled:bg-red-500/75
+          ),
+          variants: {
+            color: {
+              primary: 'text-white bg-editor-primary hover:bg-editor-primary/90 has-[:disabled]:bg-editor-primary/75',
+              secondary: 'text-gray-800 hover:bg-gray-100'
+            }
+          }
+        ).render(color: color, **args)
+      end
+      # rubocop:enable Metrics/MethodLength
+
+      def wrapped_button_classes(**args)
+        class_variants(
+          base: 'cursor-pointer',
+          variants: {
+            size: {
+              medium: 'inline-flex items-center justify-center px-4 h-10'
+            }
+          }
+        ).render(size: size, **args)
+      end
+    end
+  end
+end

data/app/components/maglev/uikit/device_toggler_component.rb

@@ -5,13 +5,22 @@ module Maglev
     class DeviceTogglerComponent < Maglev::Uikit::BaseComponent
       def toggler_classes(...)
         class_variants(
-          base: 'cursor-pointer hover:bg-gray-100 h-10 w-10 flex items-center justify-center',
+          base: base_classes,
           variants: {
             active: active_classes
           }
         ).render(...)
       end
 
+      def base_classes
+        [
+          'cursor-pointer hover:bg-gray-100 h-10 w-10 flex items-center justify-center rounded',
+          'outline-none transition-colors duration-200',
+          'focus-visible:ring-2 focus-visible:ring-editor-primary/50',
+          'focus-visible:ring-offset-2 focus-visible:ring-offset-white'
+        ].join(' ').freeze
+      end
+
       def active_classes
         'bg-gray-100'
       end

data/app/components/maglev/uikit/dropdown_component/dropdown_component.html.erb

@@ -1,5 +1,5 @@
 <%= tag.div(
-  class: 'relative',
+  class: wrapper_classes,
   data: {
     controller: 'uikit-dropdown',
     'uikit-dropdown-placement-value': placement
@@ -8,7 +8,7 @@
   <%= trigger %>
 
   <div 
-    class="hidden z-50 opacity-0 scale-95 shadow-lg rounded p-1 text-sm bg-white w-max fixed" 
+    class="hidden z-50 opacity-0 scale-95 shadow-lg rounded text-sm bg-white w-max fixed" 
     data-aria-orientation="vertical"
     data-aria-labelledby="dropdown-button"
     data-uikit-dropdown-target="content"

data/app/components/maglev/uikit/dropdown_component.rb

@@ -7,9 +7,14 @@ module Maglev
 
       attr_reader :placement
 
-      def initialize(placement: 'bottom-start')
+      def initialize(placement: 'bottom-start', wrapper_classes: nil)
+        @wrapper_classes = wrapper_classes
         @placement = placement
       end
+
+      def wrapper_classes
+        helpers.class_names('relative', @wrapper_classes)
+      end
     end
   end
 end

data/app/components/maglev/uikit/form/color_field_component.html.erb

@@ -50,7 +50,7 @@
             ) %>            
           <% end %>
                   
-          <div class="flex flex-row flex-wrap gap-2">
+          <div class="flex flex-row flex-wrap gap-2 p-2">
             <% presets.each do |preset| %>
               <%= tag.button(
                 type: 'button',

data/app/components/maglev/uikit/form/combobox_component.html.erb

@@ -33,6 +33,7 @@
         placeholder: placeholder || t('maglev.uikit.form.combobox.placeholder'),
         value: selected_label,
         aria: { controls: 'options', expanded: 'false' },
+        autocomplete: 'off',
         data: { 
           'uikit-form-combobox-target' => 'input', 
           'uikit-dropdown-target' => 'button', 

data/app/components/maglev/uikit/form/link_component.rb

@@ -59,7 +59,7 @@ module Maglev
 
         def self.link_type_component(input_name:, value:, path:)
           # Default to url if the link type is not found (shouldn't happen)
-          klass = link_type_klasses_map.fetch(value[:link_type].to_sym, 'url')
+          klass = link_type_klasses_map.fetch(value[:link_type]&.to_sym, default_link_type_klass)
 
           return unless klass
 
@@ -74,6 +74,10 @@ module Maglev
             static_page: Maglev::Uikit::Form::Link::StaticPageLinkComponent
           }
         end
+
+        def self.default_link_type_klass
+          Maglev::Uikit::Form::Link::UrlLinkComponent
+        end
       end
     end
   end

data/app/components/maglev/uikit/form/richtext_controller.js

@@ -1,5 +1,6 @@
 import { Controller } from '@hotwired/stimulus'
 import { Editor, Document, Text, Paragraph, Heading, Blockquote, CodeBlock, History, Bold, Italic, Underline, Strike, Superscript, HardBreak, Link, ListItem, BulletList, OrderedList } from 'tiptap'
+import { log } from 'maglev-controllers/utils'
 
 const MaglevLink = Link.extend({
   addAttributes() {
@@ -205,11 +206,11 @@ export default class extends Controller {
   }
 
   openLinkModal(event) {
-    console.log('toggleLink', event)
+    log('toggleLink', event)
     const url = new URL(this.editLinkPathValue, window.location.origin)
     const link = this.editor.getAttributes('link')
 
-    console.log('toggleLink,build link from', link)
+    log('toggleLink,build link from', link)
     
     url.searchParams.set('input_name', this.inputNameValue)
     url.searchParams.set('link[href]', link.href ?? '')
@@ -230,8 +231,8 @@ export default class extends Controller {
   }
 
   setLink(event) {
-    const link = JSON.parse(event.detail)
-    console.log('setLink, link=', link)
+    const link = typeof event.detail === 'string' ? JSON.parse(event.detail) : event.detail
+    log('setLink, link=', link)
     this.editor.commands.setLink({ 
       href: link.href, 
       target: link.open_new_window ? '_blank' : '', 

data/app/components/maglev/uikit/form/search_form_component.html.erb

@@ -14,6 +14,7 @@
     value: value,
     placeholder: placeholder,
     aria_label: placeholder,
+    autocomplete: 'off',
     class: 'block w-full border-0 bg-transparent focus:outline-none placeholder-gray-500',
     data: { uikit_search_form_target: 'input' } 
   ) %>

data/app/components/maglev/uikit/icon_component.rb

@@ -68,6 +68,7 @@ module Maglev
         arrow_down: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="fill-current"><path fill="none" d="M0 0h24v24H0z"></path><path d="m12 13.172 4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"></path></svg>',
         arrow_left: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path></svg>',
         arrow_right: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path></svg>',
+        arrow_right_long: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M1.99974 13.0001L1.9996 11.0002L18.1715 11.0002L14.2218 7.05044L15.636 5.63623L22 12.0002L15.636 18.3642L14.2218 16.9499L18.1716 13.0002L1.99974 13.0001Z"></path></svg>',
 
         image: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M4.828 21l-.02.02-.021-.02H2.992A.993.993 0 0 1 2 20.007V3.993A1 1 0 0 1 2.992 3h18.016c.548 0 .992.445.992.993v16.014a1 1 0 0 1-.992.993H4.828zM20 15V5H4v14L14 9l6 6zm0 2.828l-6-6L6.828 19H20v-1.172zM8 11a2 2 0 1 1 0-4 2 2 0 0 1 0 4z" fill="#000"/></svg>',
 
@@ -131,6 +132,8 @@ module Maglev
 
         logout: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M5 22a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v3h-2V4H6v16h12v-2h2v3a1 1 0 0 1-1 1H5zm13-6v-3h-7v-2h7V8l5 4-5 4z"/></svg>',
 
+        history: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12H4C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C9.25022 4 6.82447 5.38734 5.38451 7.50024L8 7.5V9.5H2V3.5H4L3.99989 5.99918C5.82434 3.57075 8.72873 2 12 2ZM13 7L12.9998 11.585L16.2426 14.8284L14.8284 16.2426L10.9998 12.413L11 7H13Z"></path></svg>',
+
         # Spinners
         spinner: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M18.364 5.63604L16.9497 7.05025C15.683 5.7835 13.933 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19C15.866 19 19 15.866 19 12H21C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C14.4853 3 16.7353 4.00736 18.364 5.63604Z"></path></svg>'
       }.with_indifferent_access.freeze

data/app/components/maglev/uikit/image_library/uploader_controller.js

@@ -1,5 +1,6 @@
 import { Controller } from '@hotwired/stimulus'
 import { FetchRequest } from '@rails/request.js'
+import { log } from 'maglev-controllers/utils'
 
 export default class extends Controller {
   static targets = ['button', 'fileInput']
@@ -11,7 +12,7 @@ export default class extends Controller {
   }
 
   connect() {
-    console.log('UploaderController connected')
+    log('UploaderController connected')
   }
 
   openFileDialog() {    
@@ -64,7 +65,7 @@ export default class extends Controller {
   }
 
   reloadFrameTag() {
-    console.log('reloadFrameTag', this.refreshPathValue)
+    log('reloadFrameTag', this.refreshPathValue)
     const frame = document.querySelector(`turbo-frame#modal-dialog`)
     if (frame) {
       frame.src = this.refreshPathValue

data/app/components/maglev/uikit/list/list_item_component.html.erb

@@ -1,29 +1,48 @@
 <%= tag.div(data: { sortable_target: sortable_target, item_id: id, item_index: index }) do %>
-  <%= tag.div(class: wrapper_classes) do %>
+  <%= content_tag(wrapper_tag_name.to_sym, class: wrapper_classes) do %>
+    <%= content if content? %>
 
     <%= tag.div(class: 'flex items-center cursor-move', data: { sortable_target: sortable_handle }) do %>
       <%= render Maglev::Uikit::IconComponent.new(name: "draggable") %>
     <% end if handle? %>
     
     <% item_body = capture do %>
-      <% if image? %>
-        <div class="h-8 w-8 bg-gray-400">
-          <%= image %>
+      <% if icon? %>
+        <div class="grid grid-cols-[auto_1fr_auto] flex flex-1 items-center">
+          <div class="mr-2">
+            <%= icon %>
+          </div>
+          <div class="text-gray-800 truncate"><%= title %></div>
+          <% if sub_title? %>
+            <div class="col-start-2 text-gray-500 text-xs"><%= sub_title %></div>
+          <% end %>
         </div>
-      <% end %>
-
-      <% if big_image? %>
-        <%= big_image %>
-      <% end %>
+      <% else %>
+        <% if image? %>
+          <div class="h-8 w-8 bg-gray-400">
+            <%= image %>
+          </div>
+        <% end %>
 
-      <div class="flex flex-col overflow-hidden">
-        <% if pre_title? %>
-          <div class="text-gray-500 text-xs"><%= pre_title %></div>
-          <div class="text-gray-800 truncate"><%= title %></div>
-        <% else %>
-          <div class="truncate"><%= title %></div>
+        <% if big_image? %>
+          <%= big_image %>
         <% end %>
-      </div>    
+
+        <div class="flex flex-col overflow-hidden">
+          <% if pre_title? %>
+            <div class="text-gray-500 text-xs"><%= pre_title %></div>
+            <div class="text-gray-800 truncate"><%= title %></div>
+            <% if sub_title? %>
+              <div class="text-gray-500 text-xs"><%= sub_title %></div>
+            <% end %>
+          <% else %>
+            <div class="truncate"><%= title %></div>
+            <% if sub_title? %>
+              <div class="text-gray-500 text-xs"><%= sub_title %></div>
+            <% end %>
+          <% end %>
+        </div>    
+      <% end %>
     <% end %>
 
     <% if link? %>
@@ -41,7 +60,5 @@
         <%= action %>
       </div>
     <% end %>  
-  <% end %>
-
-  <%= content if content? %>
+  <% end %>  
 <% end %>

data/app/components/maglev/uikit/list/list_item_component.rb

@@ -7,16 +7,20 @@ module Maglev
         renders_one :handle
         renders_one :image
         renders_one :big_image
+        renders_one :icon
         renders_one :pre_title
+        renders_one :sub_title
         renders_one :title
         renders_one :action
 
-        attr_reader :link, :index, :options
+        attr_reader :link, :index, :options, :variant, :wrapper_tag_name
 
         def initialize(id: nil, link: nil, options: {})
           @id = id
           @link = link
+          @variant = options.fetch(:variant, :filled).to_sym
           @custom_wrapper_classes = options[:wrapper_classes]
+          @wrapper_tag_name = options[:wrapper_tag] || :div
           @index = options[:index]
           @options = options
         end
@@ -37,18 +41,28 @@ module Maglev
           link[:data] || {}
         end
 
+        # rubocop:disable Metrics/MethodLength
         def wrapper_classes
           class_variants(
-            base: 'bg-gray-100 rounded-md px-2 flex text-gray-800'
-          ).render(class: @custom_wrapper_classes)
+            base: 'rounded-md flex text-gray-800',
+            variants: {
+              variant: {
+                filled: 'bg-gray-100',
+                ghost: 'hover:bg-gray-50 transition-colors duration-200'
+              },
+              padding: { default: 'p-2', medium: 'p-3' }
+            },
+            default: { variant: :filled, padding: :default }
+          ).render(variant: variant, padding: big_image? ? :medium : :default, class: @custom_wrapper_classes)
         end
+        # rubocop:enable Metrics/MethodLength
 
         def content_classes
           class_variants(
-            base: 'flex flex-1 py-3 gap-3 overflow-hidden px-2',
+            base: 'flex flex-1 gap-3 overflow-hidden',
             variants: {
               disposition: {
-                row: 'flex-row items-center',
+                row: 'flex-row items-center px-2',
                 col: 'flex-col'
               }
             },

data/app/components/maglev/uikit/locale_switcher_component/locale_switcher_component.html.erb

@@ -1,22 +1,18 @@
 <%= render(Maglev::Uikit::MenuDropdownComponent.new) do |dropdown| %>
   <% dropdown.with_trigger do %>
-    <button 
-      class="flex-1 h-full w-full px-6 hover:bg-gray-100 transition-colors duration-200 flex items-center focus:outline-none focus:none cursor-pointer space-x-2"
-      data-action="click->uikit-dropdown#toggle" 
-      data-uikit-dropdown-target="button">
+    <%= tag.button class: helpers.maglev_button_classes(color: :secondary, class: 'space-x-2'), data: { action: 'click->uikit-dropdown#toggle', 'uikit-dropdown-target': 'button' } do %>
       <%= render Maglev::Uikit::IconComponent.new(name: 'global') %>
       <span class="whitespace-nowrap">
         <%= current_locale_label %>
       </span>
       <%= render Maglev::Uikit::IconComponent.new(name: 'arrow_down') %>
-    </button>
+    <% end %>
   <% end %>
   
   <% locales.each do |locale| %>
-    <% dropdown.with_item do %>
-      <%= link_to locale[:path], class: dropdown.item_classes, data: locale[:data_attributes] do %>
-        <span class="<%= 'font-bold' if locale[:value] == current_locale %>"><%= locale[:label] %></span>
-      <% end %>
-    <% end %>
+    <% dropdown.with_item_link_to(locale[:path], data: locale[:data_attributes]) do |menu_item| %>
+      <% menu_item.with_label_content(locale[:label]) %>
+      <% menu_item.with_icon_content('check') if locale[:value] == current_locale %>
+    <% end %>   
   <% end %>
 <% end %>