better_ui 0.2.0 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7b6dbaeb8dede2be21e4bcff93ba5a7793a08f9e84521c2b46bd8e879be6d072
-  data.tar.gz: b9f58c90c95a748e694018c85aff6ceeb23ecee0f155b8cb45d9b64dc78da2e1
+  metadata.gz: 9f8b92fdba76f5e84f09fb6a3bf9879b209e0e7dfd8f864186784db24b808c59
+  data.tar.gz: 4d21e971baeecb10c7a3c5952041ac7e6911342e0efe4d0015efb92f9f214652
 SHA512:
-  metadata.gz: 7bba346a1d310e3869a232212c8708bbff5ef18f048d9361acc895efa78709b6de1e78bfee44dc3b30db77daf3cf380093331d1443b90d0bb6c18a7ad5d9e2e3
-  data.tar.gz: be0e614d6d37d86946d7908e8f2ae0ff83a452dcfc7fc1dd29c42560f77a368bab654e556e767e2d06dcf26236281b9f39987221f0bbee451ff7a16d1125cf39
+  metadata.gz: 778ee8d067130b37947a227ccf1322e8cf5b82d19c9b3f7a0371cc16b62071daaeb5eb6a191898ef2b06419486fe656bc22bea4314fbf98884fdf16259ac8409
+  data.tar.gz: 1df545b428bdb281fb6f78b7be2e58e455bd6bd67f0202684f51b9e756c9ccc3e928a283f97d98a924185e1bb859b63f8cf2a91857ef49478cf6bfc3f254629d

data/app/components/better_ui/application/sidebar/component.html.erb

@@ -1,10 +1,21 @@
-<aside class="<%= container_classes %>">
+<div data-controller="bui-sidebar" 
+     data-bui-sidebar-width-value="<%= @width == :md ? 256 : 320 %>"
+     data-bui-sidebar-min-width-value="200"
+     data-bui-sidebar-max-width-value="400"
+     data-bui-sidebar-pinned-value="true">
+  
+  <!-- Mobile Overlay -->
+  <div data-bui-sidebar-target="overlay" class="fixed inset-0 bg-black bg-opacity-50 z-40 hidden md:hidden"></div>
+  
+  <!-- Sidebar Container -->
+  <aside data-bui-sidebar-target="container" class="<%= container_classes %>">
   <!-- Header Section -->
   <% if has_header? %>
     <div class="px-6 py-4 border-b border-gray-200">
-      <% if header[:logo].present? %>
-        <div class="flex items-center">
-          <div class="flex-shrink-0">
+      <div class="flex items-center justify-between">
+        <% if header[:logo].present? %>
+          <div class="flex items-center">
+            <div class="flex-shrink-0">
             <% if header[:logo].is_a?(Hash) %>
               <%= bui_avatar(**header[:logo]) %>
             <% else %>
@@ -20,19 +31,30 @@
             </div>
           <% end %>
         </div>
-      <% elsif header[:title].present? %>
-        <div>
-          <h2 class="text-lg font-semibold text-gray-900"><%= header[:title] %></h2>
-          <% if header[:subtitle].present? %>
-            <p class="text-sm text-gray-500"><%= header[:subtitle] %></p>
-          <% end %>
-        </div>
-      <% end %>
+        <% elsif header[:title].present? %>
+          <div>
+            <h2 class="text-lg font-semibold text-gray-900"><%= header[:title] %></h2>
+            <% if header[:subtitle].present? %>
+              <p class="text-sm text-gray-500"><%= header[:subtitle] %></p>
+            <% end %>
+          </div>
+        <% end %>
+        
+        <!-- Collapse Button (solo se collapsible) -->
+        <% if collapsible %>
+          <%= bui_button(
+            icon: "arrow-left",
+            type: :white,
+            size: :small,
+            title: "Comprimi sidebar"
+          ) %>
+        <% end %>
+      </div>
     </div>
   <% end %>
 
   <!-- Navigation Section -->
-  <nav class="flex-1 px-4 py-6 space-y-6">
+  <nav class="flex-1 px-4 py-6 space-y-6 overflow-y-auto">
     <% navigation_sections.each do |section| %>
       <div class="space-y-2">
         <!-- Section Title -->
@@ -57,7 +79,9 @@
                 <button 
                   type="button" 
                   class="group flex items-center justify-between w-full px-3 py-2 text-sm font-medium text-gray-700 rounded-md hover:bg-gray-50 hover:text-gray-900 transition-colors duration-150"
-                  data-collapse-target="#<%= item[:id] %>"
+                  data-bui-sidebar-target="sectionTrigger"
+                  data-bui-sidebar-section-id="<%= item[:id] %>"
+                  data-action="click->bui-sidebar#toggleSection"
                   aria-expanded="<%= item[:expanded] || false %>"
                 >
                   <div class="flex items-center">
@@ -68,13 +92,14 @@
                     <% end %>
                     <span><%= item[:label] %></span>
                   </div>
-                  <span class="ml-3 transform transition-transform duration-150 <%= 'rotate-90' if item[:expanded] %>">
+                  <span class="ml-3 transform transition-transform duration-150 <%= 'rotate-90' if item[:expanded] %>" data-bui-sidebar-chevron>
                     <%= bui_icon("chevron-right", size: :small) %>
                   </span>
                 </button>
                 
                 <div 
-                  id="<%= item[:id] %>" 
+                  data-bui-sidebar-target="sectionContent"
+                  data-bui-sidebar-section-id="<%= item[:id] %>"
                   class="<%= item[:expanded] ? 'block' : 'hidden' %> mt-1 space-y-1"
                 >
                   <% (item[:children] || []).each do |child| %>
@@ -187,4 +212,16 @@
       <% end %>
     </div>
   <% end %>
+  
+  <!-- Resize Handle (solo se NON collapsible) -->
+  <% unless collapsible %>
+    <div data-bui-sidebar-target="resizeHandle" 
+         class="absolute top-0 right-0 w-1 h-full bg-transparent hover:bg-blue-500 cursor-col-resize transition-colors duration-150 group">
+      <div class="absolute inset-y-0 -right-1 w-3 flex items-center justify-center">
+        <div class="w-0.5 h-8 bg-gray-300 group-hover:bg-blue-500 transition-colors duration-150"></div>
+      </div>
+    </div>
+  <% end %>
 </aside>
+
+</div>

data/app/components/better_ui/application/sidebar/component.rb

@@ -4,9 +4,10 @@ module BetterUi
   module Application
     module Sidebar
       class Component < ViewComponent::Base
-        # Include degli helper per utilizzare bui_icon e bui_avatar
+        # Include degli helper per utilizzare bui_icon, bui_avatar e bui_button
         include BetterUi::General::Components::Icon::IconHelper
         include BetterUi::General::Components::Avatar::AvatarHelper
+        include BetterUi::General::Components::Button::ButtonHelper
         attr_reader :width, :position, :theme, :shadow, :border, :header, :footer, :navigation_sections, :collapsible, :classes
 
         # Larghezze sidebar con classi Tailwind dirette
@@ -74,7 +75,7 @@ module BetterUi
         end
 
         def container_classes
-          base_classes = %w[fixed inset-y-0 z-50 flex flex-col overflow-y-auto]
+          base_classes = %w[fixed inset-y-0 h-screen z-50 flex flex-col]
 
           # Posizione
           base_classes << (position == :right ? "right-0" : "left-0")

data/app/components/better_ui/general/accordion/component.html.erb

@@ -0,0 +1,5 @@
+<div <%= tag.attributes(wrapper_attributes) %>>
+  <% items.each do |item| %>
+    <%= item %>
+  <% end %>
+</div>

data/app/components/better_ui/general/accordion/component.rb

@@ -0,0 +1,92 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Accordion
+      class Component < ViewComponent::Base
+        renders_many :items, "BetterUi::General::Accordion::ItemComponent"
+
+        ACCORDION_THEME = {
+          default: 'border-gray-200',
+          white: 'border-gray-100 bg-white',
+          blue: 'border-blue-200',
+          red: 'border-red-200',
+          green: 'border-green-200',
+          yellow: 'border-yellow-200',
+          violet: 'border-violet-200',
+          orange: 'border-orange-200',
+          rose: 'border-rose-200'
+        }.freeze
+
+        ACCORDION_VARIANT = {
+          minimal: '',
+          bordered: 'border rounded-lg',
+          separated: 'space-y-2'
+        }.freeze
+
+        ACCORDION_SIZE = {
+          small: 'text-sm',
+          medium: 'text-base',
+          large: 'text-lg'
+        }.freeze
+
+        def initialize(multiple: false, theme: :default, variant: :bordered, size: :medium, 
+                      classes: '', **options)
+          @multiple = multiple
+          @theme = theme
+          @variant = variant
+          @size = size
+          @classes = classes
+          @options = options
+
+          validate_params
+        end
+
+        private
+
+        attr_reader :multiple, :theme, :variant, :size, :classes, :options
+
+        def validate_params
+          validate_theme
+          validate_variant
+          validate_size
+        end
+
+        def validate_theme
+          return if ACCORDION_THEME.key?(theme)
+
+          raise ArgumentError, "Invalid theme: #{theme}. Must be one of #{ACCORDION_THEME.keys}"
+        end
+
+        def validate_variant
+          return if ACCORDION_VARIANT.key?(variant)
+
+          raise ArgumentError, "Invalid variant: #{variant}. Must be one of #{ACCORDION_VARIANT.keys}"
+        end
+
+        def validate_size
+          return if ACCORDION_SIZE.key?(size)
+
+          raise ArgumentError, "Invalid size: #{size}. Must be one of #{ACCORDION_SIZE.keys}"
+        end
+
+        # Attributi per il wrapper principale
+        def wrapper_attributes
+          base_classes = [
+            'bui-accordion',
+            ACCORDION_SIZE[size],
+            ACCORDION_VARIANT[variant],
+            ACCORDION_THEME[theme],
+            classes
+          ].compact.join(' ')
+
+          {
+            class: base_classes,
+            'data-controller': 'bui-accordion',
+            'data-bui-accordion-multiple-value': multiple
+          }.merge(options)
+        end
+      end
+    end
+  end
+end

data/app/components/better_ui/general/accordion/item_component.html.erb

@@ -0,0 +1,12 @@
+<div <%= tag.attributes(item_attributes) %>>
+  <!-- Header -->
+  <button <%= tag.attributes(header_attributes) %>>
+    <span><%= title %></span>
+    <i class="fas fa-<%= icon %> <%= icon_attributes[:class] %>" <%= tag.attributes(icon_attributes.except(:class)) %>></i>
+  </button>
+  
+  <!-- Content -->
+  <div <%= tag.attributes(content_attributes) %>>
+    <%= content %>
+  </div>
+</div>

data/app/components/better_ui/general/accordion/item_component.rb

@@ -0,0 +1,176 @@
+# frozen_string_literal: true
+
+module BetterUi
+  module General
+    module Accordion
+      class ItemComponent < ViewComponent::Base
+        ITEM_THEME = {
+          default: 'border-gray-200 bg-white',
+          white: 'border-gray-100 bg-white',
+          blue: 'border-blue-200 bg-blue-50',
+          red: 'border-red-200 bg-red-50',
+          green: 'border-green-200 bg-green-50',
+          yellow: 'border-yellow-200 bg-yellow-50',
+          violet: 'border-violet-200 bg-violet-50',
+          orange: 'border-orange-200 bg-orange-50',
+          rose: 'border-rose-200 bg-rose-50'
+        }.freeze
+
+        ITEM_HEADER_THEME = {
+          default: 'text-gray-900 hover:bg-gray-50',
+          white: 'text-gray-900 hover:bg-gray-50',
+          blue: 'text-blue-900 hover:bg-blue-100',
+          red: 'text-red-900 hover:bg-red-100',
+          green: 'text-green-900 hover:bg-green-100',
+          yellow: 'text-yellow-900 hover:bg-yellow-100',
+          violet: 'text-violet-900 hover:bg-violet-100',
+          orange: 'text-orange-900 hover:bg-orange-100',
+          rose: 'text-rose-900 hover:bg-rose-100'
+        }.freeze
+
+        ITEM_SIZE_HEADER = {
+          small: 'text-sm px-4 py-3',
+          medium: 'text-base px-5 py-4',
+          large: 'text-lg px-6 py-5'
+        }.freeze
+
+        ITEM_SIZE_CONTENT = {
+          small: 'px-4 py-3',
+          medium: 'px-5 py-4',
+          large: 'px-6 py-5'
+        }.freeze
+
+        ITEM_SIZE_ICON = {
+          small: 'w-4 h-4',
+          medium: 'w-5 h-5',
+          large: 'w-6 h-6'
+        }.freeze
+
+        def initialize(title:, expanded: false, disabled: false, icon: 'chevron-down', 
+                      theme: :default, size: :medium, classes: '', **options)
+          @title = title
+          @expanded = expanded
+          @disabled = disabled
+          @icon = icon
+          @theme = theme
+          @size = size
+          @classes = classes
+          @options = options
+
+          validate_params
+        end
+
+        private
+
+        attr_reader :title, :expanded, :disabled, :icon, :theme, :size, :classes, :options
+
+        def validate_params
+          validate_theme
+          validate_size
+          
+          raise ArgumentError, 'title cannot be blank' if title.blank?
+        end
+
+        def validate_theme
+          return if ITEM_THEME.key?(theme)
+
+          raise ArgumentError, "Invalid theme: #{theme}. Must be one of #{ITEM_THEME.keys}"
+        end
+
+        def validate_size
+          return if ITEM_SIZE_HEADER.key?(size)
+
+          raise ArgumentError, "Invalid size: #{size}. Must be one of #{ITEM_SIZE_HEADER.keys}"
+        end
+
+        def unique_id
+          @unique_id ||= "accordion-item-#{SecureRandom.hex(4)}"
+        end
+
+        def content_id
+          "#{unique_id}-content"
+        end
+
+        def header_id
+          "#{unique_id}-header"
+        end
+
+        # Attributi per il wrapper dell'item
+        def item_attributes
+          base_classes = [
+            'bui-accordion-item',
+            ITEM_THEME[theme],
+            classes
+          ].compact.join(' ')
+
+          {
+            class: base_classes,
+            'data-bui-accordion-target': 'item'
+          }.merge(options)
+        end
+
+        # Attributi per il button header
+        def header_attributes
+          base_classes = [
+            'bui-accordion-header',
+            'w-full flex items-center justify-between text-left font-medium transition-colors duration-200',
+            ITEM_SIZE_HEADER[size],
+            ITEM_HEADER_THEME[theme],
+            disabled? ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+          ].compact.join(' ')
+
+          {
+            class: base_classes,
+            type: 'button',
+            id: header_id,
+            'aria-expanded': expanded,
+            'aria-controls': content_id,
+            'data-action': 'click->bui-accordion#toggle',
+            'data-bui-accordion-target': 'trigger',
+            disabled: disabled
+          }
+        end
+
+        # Attributi per il contenuto
+        def content_attributes
+          base_classes = [
+            'bui-accordion-content',
+            'transition-all duration-300 ease-in-out overflow-hidden',
+            ITEM_SIZE_CONTENT[size],
+            expanded? ? 'block' : 'hidden'
+          ].compact.join(' ')
+
+          {
+            class: base_classes,
+            id: content_id,
+            'aria-labelledby': header_id,
+            'data-bui-accordion-target': 'content'
+          }
+        end
+
+        # Attributi per l'icona
+        def icon_attributes
+          base_classes = [
+            'bui-accordion-icon',
+            'transition-transform duration-200',
+            ITEM_SIZE_ICON[size],
+            expanded? ? 'rotate-180' : ''
+          ].compact.join(' ')
+
+          {
+            class: base_classes,
+            'data-bui-accordion-target': 'icon'
+          }
+        end
+
+        def disabled?
+          disabled
+        end
+
+        def expanded?
+          expanded
+        end
+      end
+    end
+  end
+end

data/app/components/better_ui/general/button/component.html.erb

@@ -2,7 +2,7 @@
 <% if link? %>
   <%= link_to @href, **link_attributes do %>
     <% if @icon && @icon_position == :left %>
-      <span class="flex-shrink-0 mr-2"><%= render_icon(@icon) %></span>
+      <span class="flex-shrink-0<%= @label.present? ? ' mr-2' : '' %>"><%= render_icon(@icon) %></span>
     <% end %>
     
     <% if @label %>
@@ -10,7 +10,7 @@
     <% end %>
     
     <% if @icon && @icon_position == :right %>
-      <span class="flex-shrink-0 ml-2"><%= render_icon(@icon) %></span>
+      <span class="flex-shrink-0<%= @label.present? ? ' ml-2' : '' %>"><%= render_icon(@icon) %></span>
     <% end %>
     
     <%= content %>
@@ -18,7 +18,7 @@
 <% else %>
   <%= tag.button(**button_attributes) do %>
     <% if @icon && @icon_position == :left %>
-      <span class="flex-shrink-0 mr-2"><%= render_icon(@icon) %></span>
+      <span class="flex-shrink-0<%= @label.present? ? ' mr-2' : '' %>"><%= render_icon(@icon) %></span>
     <% end %>
     
     <% if @label %>
@@ -26,7 +26,7 @@
     <% end %>
     
     <% if @icon && @icon_position == :right %>
-      <span class="flex-shrink-0 ml-2"><%= render_icon(@icon) %></span>
+      <span class="flex-shrink-0<%= @label.present? ? ' ml-2' : '' %>"><%= render_icon(@icon) %></span>
     <% end %>
     
     <%= content %>

data/app/components/better_ui/general/dropdown/component.html.erb

@@ -1,13 +1,24 @@
-<div <%= tag.attributes(container_attributes) %>>
-  <button <%= tag.attributes(trigger_attributes) %>>
+<div class="relative inline-block <%= @classes %>" 
+     data-controller="bui-dropdown" 
+     data-bui-dropdown-open-value="false"
+     <%= tag.attributes(@html_options.except(:class)) %>>
+  
+  <button type="button"
+          class="inline-flex items-center justify-center border font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors <%= dynamic_trigger_classes %>"
+          data-bui-dropdown-target="trigger"
+          data-action="click->bui-dropdown#toggle keydown->bui-dropdown#keydown"
+          aria-expanded="false"
+          aria-haspopup="true">
     <%= @trigger %>
-    <svg class="ml-2 -mr-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-      <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
-    </svg>
+    <%= bui_icon("chevron-down", size: :small, classes: "ml-2 -mr-1") %>
   </button>
 
-  <div <%= tag.attributes(menu_attributes) %>>
-    <div class="py-1" role="none">
+  <div class="absolute z-50 mt-2 origin-top-right bg-white border border-gray-200 shadow-lg focus:outline-none <%= dynamic_menu_classes %>"
+       data-bui-dropdown-target="menu"
+       role="menu"
+       aria-orientation="vertical"
+       style="display: none;">
+    <div class="py-1" role="none" data-action="click->bui-dropdown#itemClick">
       <%= content %>
     </div>
   </div>

data/app/components/better_ui/general/dropdown/component.rb

@@ -4,16 +4,11 @@ module BetterUi
   module General
     module Dropdown
       class Component < ViewComponent::Base
+        include BetterUi::General::Components::Icon::IconHelper
+        
         attr_reader :trigger, :position, :theme, :size, :rounded, :animation, :classes, :html_options
 
-        # Classi base per il contenitore dropdown
-        DROPDOWN_CONTAINER_CLASSES = "relative inline-block"
-
-        # Classi base per il pulsante trigger
-        DROPDOWN_TRIGGER_BASE_CLASSES = "inline-flex items-center justify-center border font-medium focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors"
-
-        # Classi base per il menu dropdown  
-        DROPDOWN_MENU_BASE_CLASSES = "absolute z-50 mt-2 origin-top-right bg-white border border-gray-200 shadow-lg focus:outline-none"
+        # Classi base spostate nel template HTML per migliore leggibilità
 
         # Temi per il trigger del dropdown con classi Tailwind dirette
         DROPDOWN_TRIGGER_THEME = {
@@ -81,69 +76,25 @@ module BetterUi
           validate_params
         end
 
-        # Combina tutte le classi per il contenitore
-        def container_classes
+        # Restituisce solo le classi dinamiche per il trigger
+        def dynamic_trigger_classes
           [
-            DROPDOWN_CONTAINER_CLASSES,
-            @classes
-          ].compact.join(" ")
-        end
-
-        # Combina tutte le classi per il trigger
-        def trigger_classes
-          [
-            DROPDOWN_TRIGGER_BASE_CLASSES,
             get_trigger_theme_classes,
             get_trigger_size_classes,
             get_trigger_rounded_classes
           ].compact.join(" ")
         end
 
-        # Combina tutte le classi per il menu
-        def menu_classes
+        # Restituisce solo le classi dinamiche per il menu
+        def dynamic_menu_classes
           [
-            DROPDOWN_MENU_BASE_CLASSES,
             get_position_classes,
             get_animation_classes,
             get_menu_rounded_classes
           ].compact.join(" ")
         end
 
-        # Restituisce gli attributi per il contenitore
-        def container_attributes
-          attrs = {
-            class: container_classes,
-            "data-dropdown": true
-          }
-
-          @html_options.except(:class).each do |key, value|
-            attrs[key] = value
-          end
-
-          attrs
-        end
-
-        # Restituisce gli attributi per il trigger
-        def trigger_attributes
-          {
-            type: "button",
-            class: trigger_classes,
-            "data-dropdown-trigger": true,
-            "aria-expanded": "false",
-            "aria-haspopup": "true"
-          }
-        end
-
-        # Restituisce gli attributi per il menu
-        def menu_attributes
-          {
-            class: menu_classes,
-            "data-dropdown-menu": true,
-            role: "menu",
-            "aria-orientation": "vertical",
-            style: "display: none;"
-          }
-        end
+        # Metodi per attributi rimossi - ora gestiti direttamente nel template HTML
 
         # Verifica se rendere il componente
         def render?

data/app/components/better_ui/general/dropdown/item_component.rb

@@ -68,7 +68,8 @@ module BetterUi
         def item_attributes
           attrs = {
             class: item_classes,
-            role: "menuitem"
+            role: "menuitem",
+            "data-bui-dropdown-target": "item"
           }
 
           if @href.present? && !@disabled

data/app/components/better_ui/general/modal/component.html.erb

@@ -1,42 +1,5 @@
-<%# Template per il modal %>
-<% if @backdrop %>
-  <%= tag.div **backdrop_attributes do %>
-    <%= tag.div **container_attributes do %>
-      <%# Header del modal %>
-      <%= tag.div **header_attributes do %>
-        <h3 class="text-lg font-semibold" id="modal-title"><%= @title %></h3>
-        <% if @closable %>
-          <button type="button" class="text-gray-400 hover:text-gray-600 focus:outline-none focus:text-gray-600 transition-colors duration-200" aria-label="Chiudi modal">
-            <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-            </svg>
-          </button>
-        <% end %>
-      <% end %>
-      
-      <%# Body del modal %>
-      <div class="p-6">
-        <%= content %>
-      </div>
-    <% end %>
-  <% end %>
-<% else %>
-  <%= tag.div **container_attributes do %>
-    <%# Header del modal %>
-    <%= tag.div **header_attributes do %>
-      <h3 class="text-lg font-semibold" id="modal-title"><%= @title %></h3>
-      <% if @closable %>
-        <button type="button" class="text-gray-400 hover:text-gray-600 focus:outline-none focus:text-gray-600 transition-colors duration-200" aria-label="Chiudi modal">
-          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-          </svg>
-        </button>
-      <% end %>
-    <% end %>
-    
-    <%# Body del modal %>
-    <div class="p-6">
-      <%= content %>
-    </div>
-  <% end %>
-<% end %>
+<%# Wrapper component con controller Stimulus e slots %>
+<div <%= tag.attributes(wrapper_attributes) %>>
+  <%= trigger %>
+  <%= modal %>
+</div>