maquina-components 0.7.3 → 0.7.4

data/app/javascript/controllers/toggle_group_controller.js

@@ -32,13 +32,26 @@ export default class extends Controller {
     this.syncItemStates()
   }
 
+  /**
+   * A group rendered with disabled: true (aria-disabled="true") disables
+   * every item, including items rendered directly from partials and items
+   * added later, so they leave the tab order and ignore keyboard input.
+   */
+  itemTargetConnected(item) {
+    if (this.disabled) item.disabled = true
+  }
+
+  get disabled() {
+    return this.element.getAttribute("aria-disabled") === "true"
+  }
+
   /**
    * Toggle an item's state
    * @param {Event} event - Click event from toggle item
    */
   toggle(event) {
     const item = event.currentTarget
-    if (item.disabled) return
+    if (item.disabled || this.disabled) return
 
     const value = item.dataset.value
     const isPressed = item.dataset.state === "on"
@@ -66,6 +79,8 @@ export default class extends Controller {
    * @param {KeyboardEvent} event
    */
   handleKeydown(event) {
+    if (this.disabled) return
+
     const item = event.currentTarget
     const items = this.itemTargets.filter(i => !i.disabled)
     const currentIndex = items.indexOf(item)
@@ -125,12 +140,8 @@ export default class extends Controller {
         : this.selectedValue
     }
 
+    // Emits a single bubbling `toggle-group:change` from the group element
     this.dispatch("change", { detail })
-
-    this.element.dispatchEvent(new CustomEvent("toggle-group:change", {
-      bubbles: true,
-      detail
-    }))
   }
 
   /**

data/app/views/components/_badge.html.erb

@@ -11,6 +11,6 @@
     size: size
   ) %>
 
-<%= content_tag :span, class: css_classes, data: merged_data, **html_options do %>
+<%= content_tag :span, class: css_classes.presence, data: merged_data, **html_options do %>
   <%= yield %>
 <% end %>

data/app/views/components/_breadcrumbs.html.erb

@@ -4,12 +4,12 @@
     component: :breadcrumbs
   )
 
-  merged_data[:controller] = "breadcrumb" if responsive %>
+  merged_data[:controller] = "breadcrumb" if responsive
 
-<nav
-  aria-label="Breadcrumb"
-  class="<%= css_classes %>"
-  <%= tag.attributes(data: merged_data, **html_options) %>
->
+  # A caller's aria-label (either spelling) replaces the default one.
+  aria = (html_options.delete(:aria) || {}).symbolize_keys
+  aria[:label] = html_options.delete(:"aria-label") || aria[:label] || "Breadcrumb" %>
+
+<%= content_tag :nav, class: css_classes.presence, data: merged_data, aria: aria, **html_options do %>
   <%= yield %>
-</nav>
+<% end %>

data/app/views/components/_calendar.html.erb

@@ -1,30 +1,11 @@
 <%# locals: (selected: nil, selected_end: nil, month: nil, year: nil, mode: :single, min_date: nil, max_date: nil, disabled_dates: [], show_outside_days: true, week_starts_on: :sunday, cell_size: nil, input_name: nil, input_name_end: nil, css_classes: "", **html_options) %>
 <%
-  # Parse selected dates
-  selected_date = case selected
-                  when String then Date.parse(selected) rescue nil
-                  when Date, Time, DateTime then selected.to_date
-                  else nil
-                  end
-
-  selected_end_date = case selected_end
-                      when String then Date.parse(selected_end) rescue nil
-                      when Date, Time, DateTime then selected_end.to_date
-                      else nil
-                      end
-
-  # Parse min/max dates
-  min_date_parsed = case min_date
-                    when String then Date.parse(min_date) rescue nil
-                    when Date, Time, DateTime then min_date.to_date
-                    else nil
-                    end
-
-  max_date_parsed = case max_date
-                    when String then Date.parse(max_date) rescue nil
-                    when Date, Time, DateTime then max_date.to_date
-                    else nil
-                    end
+  # Dates may arrive as Date, Time or ISO strings
+  selected_date = calendar_to_date(selected)
+  selected_end_date = calendar_to_date(selected_end)
+  min_date_parsed = calendar_to_date(min_date)
+  max_date_parsed = calendar_to_date(max_date)
+  disabled_dates_parsed = Array(disabled_dates).filter_map { |date| calendar_to_date(date) }
 
   # Determine display month/year
   display_date = selected_date || Date.current
@@ -65,10 +46,14 @@
     "calendar-selected-end-value": selected_end_date&.iso8601,
     "calendar-min-date-value": min_date_parsed&.iso8601,
     "calendar-max-date-value": max_date_parsed&.iso8601,
-    "calendar-week-starts-on-value": week_starts_on
+    "calendar-week-starts-on-value": week_starts_on,
+    "calendar-disabled-dates-value": disabled_dates_parsed.map(&:iso8601).presence,
+    "calendar-show-outside-days-value": show_outside_days
   )
 
-  style_attr = cell_size ? "--cell-size: #{cell_size};" : nil
+  # cell_size and a caller's style: both write the style attribute, so join them
+  style_attr = [("--cell-size: #{cell_size};" if cell_size), html_options.delete(:style).presence]
+    .compact.join(" ").presence
 %>
 
 <%= content_tag :div,
@@ -115,7 +100,7 @@
             mode: mode,
             min_date: min_date_parsed,
             max_date: max_date_parsed,
-            disabled_dates: disabled_dates,
+            disabled_dates: disabled_dates_parsed,
             show_outside_days: show_outside_days %>
     <% end %>
   </div>

data/app/views/components/_combobox.html.erb

@@ -10,5 +10,7 @@
   ) %>
 
 <%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
+  <%# Submits the selection with the surrounding form; the controller keeps it in sync %>
+  <%= hidden_field_tag name, value, id: nil, data: {combobox_target: "hiddenInput"} if name.present? %>
   <%= yield combobox_id %>
 <% end %>

data/app/views/components/_date_picker.html.erb

@@ -1,4 +1,4 @@
-<%# locals: (selected: nil, selected_end: nil, mode: :single, min_date: nil, max_date: nil, disabled_dates: [], show_outside_days: true, week_starts_on: :sunday, placeholder: nil, input_name: nil, input_name_end: nil, id: nil, disabled: false, required: false, css_classes: "", **html_options) %>
+<%# locals: (selected: nil, selected_end: nil, mode: :single, min_date: nil, max_date: nil, disabled_dates: [], show_outside_days: true, week_starts_on: :sunday, placeholder: nil, input_name: nil, input_name_end: nil, id: nil, disabled: false, required: false, size: :default, full_width: false, css_classes: "", **html_options) %>
 <%
   # Deterministic ID for popover targeting: random ids break idiomorph
   # matching across Turbo morphs
@@ -6,46 +6,34 @@
   popover_id = "#{component_id}-popover"
 
   # Parse selected dates for display
-  selected_date = case selected
-                  when String then Date.parse(selected) rescue nil
-                  when Date, Time, DateTime then selected.to_date
-                  else nil
-                  end
-
-  selected_end_date = case selected_end
-                      when String then Date.parse(selected_end) rescue nil
-                      when Date, Time, DateTime then selected_end.to_date
-                      else nil
-                      end
+  selected_date = calendar_to_date(selected)
+  selected_end_date = calendar_to_date(selected_end)
 
-  # Format display value
-  display_value = if mode == :range && selected_date && selected_end_date
-                    "#{I18n.l(selected_date, format: :short)} - #{I18n.l(selected_end_date, format: :short)}"
-                  elsif mode == :range && selected_date
-                    "#{I18n.l(selected_date, format: :short)} - ..."
-                  elsif selected_date
-                    I18n.l(selected_date, format: :long)
+  # Same helpers the controller mirrors client-side, so connect() never
+  # rewrites the server-rendered text
+  display_value = if mode == :range
+                    date_picker_format_range(selected_date, selected_end_date)
+                  else
+                    date_picker_format(selected_date)
                   end
 
-  default_placeholder = mode == :range ? "Select date range" : "Select date"
+  placeholder_text = placeholder.presence || (mode == :range ? "Select date range" : "Select date")
 
   merged_data = merge_component_data(html_options,
     controller: "date-picker",
     component: "date-picker",
+    size: size,
+    full_width: (full_width ? true : nil),
     "date-picker-mode-value": mode,
     "date-picker-selected-value": selected_date&.iso8601,
-    "date-picker-selected-end-value": selected_end_date&.iso8601
+    "date-picker-selected-end-value": selected_end_date&.iso8601,
+    "date-picker-placeholder-value": placeholder_text,
+    "date-picker-placeholder-range-value": (placeholder_text if mode == :range),
+    "date-picker-locale-value": date_picker_locale_data
   )
 %>
 
-<div id="<%= component_id %>"
-     class="<%= css_classes.presence %>"
-     data-controller="date-picker"
-     data-component="date-picker"
-     data-date-picker-mode-value="<%= mode %>"
-     data-date-picker-selected-value="<%= selected_date&.iso8601 %>"
-     data-date-picker-selected-end-value="<%= selected_end_date&.iso8601 %>">
-
+<%= content_tag :div, id: component_id, class: css_classes.presence, data: merged_data, **html_options do %>
   <%# Hidden inputs for form submission %>
   <% if input_name %>
     <input type="hidden"
@@ -70,9 +58,7 @@
           aria-haspopup="dialog"
           aria-expanded="false">
     <%= builtin_icon_for :calendar, class: "size-4" %>
-    <span data-date-picker-target="display">
-      <%= display_value || placeholder || default_placeholder %>
-    </span>
+    <span data-date-picker-target="display"><%= display_value || placeholder_text %></span>
     <% unless display_value %>
       <span data-date-picker-part="placeholder-indicator"></span>
     <% end %>
@@ -100,4 +86,4 @@
             action: "calendar:change->date-picker#handleChange calendar:navigate->date-picker#handleNavigate"
           } %>
   </div>
-</div>
+<% end %>

data/app/views/components/_drawer.html.erb

@@ -8,7 +8,7 @@
    ) %>
 <aside
   id="<%= stable_id %>"
-  class="group peer drawer-loading <%= css_classes %>"
+  class="<%= class_names("group peer drawer-loading", css_classes) %>"
   <%= tag.attributes(data: merged_data, **html_options) %>
 >
   <%# Backdrop overlay %>

data/app/views/components/_menu_button.html.erb

@@ -20,7 +20,7 @@
         <%= image_tag icon, alt: title.presence || "", class: icon_classes.presence %>
       <% elsif text_icon.present? %>
         <span data-menu-button-part="avatar">
-          <span class="<%= icon_classes %>"><%= text_icon %></span>
+          <%= tag.span text_icon, class: icon_classes.presence %>
         </span>
       <% end %>
 

data/app/views/components/_sidebar.html.erb

@@ -12,7 +12,7 @@
 
 <aside
   id="<%= stable_id %>"
-  class="group peer sidebar-loading <%= css_classes %>"
+  class="<%= class_names("group peer sidebar-loading", css_classes) %>"
   <%= tag.attributes(data: merged_data, **html_options) %>
 >
   <%# Sidebar gap (creates space for sidebar on desktop) %>

data/app/views/components/breadcrumbs/_ellipsis.html.erb

@@ -3,7 +3,7 @@
     breadcrumb_part: :ellipsis
   ) %>
 
-<%= content_tag :span, role: "presentation", class: css_classes, data: merged_data, **html_options do %>
+<%= content_tag :span, role: "presentation", class: css_classes.presence, data: merged_data, **html_options do %>
   <%= builtin_icon_for(:ellipsis) %>
   <span class="sr-only">More</span>
 <% end %>

data/app/views/components/breadcrumbs/_item.html.erb

@@ -3,6 +3,6 @@
     breadcrumb_part: :item
   ) %>
 
-<%= content_tag :li, class: css_classes, data: merged_data, **html_options do %>
+<%= content_tag :li, class: css_classes.presence, data: merged_data, **html_options do %>
   <%= yield %>
 <% end %>

data/app/views/components/breadcrumbs/_link.html.erb

@@ -3,6 +3,6 @@
     breadcrumb_part: :link
   ) %>
 
-<%= link_to href, class: css_classes, data: merged_data, **html_options do %>
+<%= link_to href, class: css_classes.presence, data: merged_data, **html_options do %>
   <%= yield %>
 <% end %>

data/app/views/components/breadcrumbs/_list.html.erb

@@ -3,6 +3,6 @@
     breadcrumb_part: :list
   ) %>
 
-<%= content_tag :ol, class: css_classes, data: merged_data, **html_options do %>
+<%= content_tag :ol, class: css_classes.presence, data: merged_data, **html_options do %>
   <%= yield %>
 <% end %>

data/app/views/components/breadcrumbs/_page.html.erb

@@ -3,6 +3,6 @@
     breadcrumb_part: :page
   ) %>
 
-<%= content_tag :span, role: "link", aria: {current: "page", disabled: true}, class: css_classes, data: merged_data, **html_options do %>
+<%= content_tag :span, role: "link", aria: {current: "page", disabled: true}, class: css_classes.presence, data: merged_data, **html_options do %>
   <%= yield %>
 <% end %>

data/app/views/components/breadcrumbs/_separator.html.erb

@@ -6,8 +6,7 @@
 <li
   role="presentation"
   aria-hidden="true"
-  class="<%= css_classes %>"
-  <%= tag.attributes(data: merged_data, **html_options) %>
+  <%= tag.attributes(class: css_classes.presence, data: merged_data, **html_options) %>
 >
   <% if icon == :custom %>
     <%= yield %>

data/app/views/components/calendar/_week.html.erb

@@ -3,8 +3,14 @@
 
 <%= content_tag :div, role: "row", class: css_classes.presence, data: merged_data, **html_options do %>
   <% days.each do |day| %>
+    <% is_outside = day.month != display_month %>
+    <%# A hidden outside day keeps its grid column, so the month's first day
+        still lands under the right weekday %>
+    <% if is_outside && !show_outside_days %>
+      <%= tag.span aria: {hidden: true}, data: {calendar_part: "outside-day"} %>
+      <% next %>
+    <% end %>
     <%
-      is_outside = day.month != display_month
       is_today = day == Date.current
       is_selected = selected_date && day == selected_date
       is_range_end = selected_end_date && day == selected_end_date
@@ -24,9 +30,6 @@
                     "selected"
                   end
 
-      # Skip rendering if outside day and not showing them
-      next if is_outside && !show_outside_days
-
       day_data = {
         "calendar-part": "day",
         "calendar-target": "day",

data/app/views/components/card/_content.html.erb

@@ -1,7 +1,7 @@
 <%# locals: (spacing: :default, css_classes: "", **html_options) %>
 <% merged_data = merge_component_data(html_options,
     card_part: :content,
-    spacing: (spacing == :full ? :full : nil)
+    spacing: (spacing.to_sym == :full ? :full : nil)
   ).compact %>
 
 <%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>

data/app/views/components/card/_footer.html.erb

@@ -1,15 +1,8 @@
 <%# locals: (align: :start, spacing: :default, css_classes: "", **html_options) %>
-<% align_value = case align.to_sym
-    when :between then :between
-    when :end then :end
-    when :center then :center
-    else nil
-  end
-  
-  merged_data = merge_component_data(html_options,
+<% merged_data = merge_component_data(html_options,
     card_part: :footer,
-    align: align_value,
-    spacing: (spacing == :full ? :full : nil)
+    align: align.to_sym.presence_in(%i[between end center]),
+    spacing: (spacing.to_sym == :full ? :full : nil)
   ).compact %>
 
 <%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>

data/app/views/components/card/_header.html.erb

@@ -1,7 +1,7 @@
 <%# locals: (layout: :column, css_classes: "", **html_options) %>
 <% merged_data = merge_component_data(html_options,
     card_part: :header,
-    layout: (layout == :row ? :row : nil)
+    layout: (layout.to_sym == :row ? :row : nil)
   ).compact %>
 
 <%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>

data/app/views/components/card/_title.html.erb

@@ -1,7 +1,7 @@
 <%# locals: (text: nil, content: nil, size: :default, css_classes: "", **html_options) %>
 <% merged_data = merge_component_data(html_options,
     card_part: :title,
-    size: (size == :sm ? :sm : nil)
+    size: (size.to_sym == :sm ? :sm : nil)
   ).compact %>
 
 <%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>

data/app/views/components/combobox/_option.html.erb

@@ -17,8 +17,8 @@
       class: css_classes.presence,
       data: merged_data,
       **html_options do %>
-  <span data-combobox-part="check" class="<%= 'invisible' unless selected %>">
+  <%= tag.span data: {combobox_part: "check"}, class: ("invisible" unless selected) do %>
     <%= builtin_icon_for :check, class: "size-4" %>
-  </span>
+  <% end %>
   <%= yield %>
 <% end %>

data/app/views/components/drawer/_close.html.erb

@@ -1,10 +1,16 @@
-<%# locals: (show_icon: true, css_classes: "", **html_options) %>
-<% merged_data = merge_component_data(html_options,
+<%# locals: (show_icon: true, variant: nil, size: nil, css_classes: "", **html_options) %>
+<%
+  # Without variant: it is the drawer's icon button (drawer.css). With one it
+  # renders as a regular data-component="button" in that variant and size.
+  button_data = variant ? {component: :button, variant: variant, size: size} : {}
+  merged_data = merge_component_data(html_options,
+    **button_data,
     drawer_part: :close,
     action: "click->drawer#close"
-  ) %>
-<%= content_tag :button, type: :button, class: css_classes, data: merged_data, **html_options do %>
-  <% if show_icon %> 
+  )
+%>
+<%= content_tag :button, type: :button, class: css_classes.presence, data: merged_data, **html_options do %>
+  <% if show_icon %>
     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
       <path d="M18 6 6 18"></path>
       <path d="m6 6 12 12"></path>

data/app/views/components/drawer/_content.html.erb

@@ -2,6 +2,6 @@
 <% merged_data = merge_component_data(html_options,
     drawer_part: :content
   ) %>
-<%= content_tag :div, class: css_classes, data: merged_data, **html_options do %>
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
   <%= yield %>
 <% end %>

data/app/views/components/drawer/_footer.html.erb

@@ -2,6 +2,6 @@
 <% merged_data = merge_component_data(html_options,
     drawer_part: :footer
   ) %>
-<%= content_tag :div, class: css_classes, data: merged_data, **html_options do %>
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
   <%= yield %>
 <% end %>

data/app/views/components/drawer/_header.html.erb

@@ -2,7 +2,7 @@
 <% merged_data = merge_component_data(html_options,
     drawer_part: :header
   ) %>
-<%= content_tag :div, class: css_classes, data: merged_data, **html_options do %>
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
   <div data-drawer-part="header-content">
     <%= yield %>
   </div>

data/app/views/components/drawer/_provider.html.erb

@@ -18,6 +18,6 @@
     action: "keydown.meta+#{keyboard_shortcut}@window->drawer#toggleWithKeyboard keydown.ctrl+#{keyboard_shortcut}@window->drawer#toggleWithKeyboard keydown.esc@window->drawer#closeOnEscape"
   )
 %>
-<%= content_tag :div, id: provider_id, class: css_classes, data: merged_data, **html_options do %>
+<%= content_tag :div, id: provider_id, class: css_classes.presence, data: merged_data, **html_options do %>
   <%= yield %>
 <% end %>

data/app/views/components/drawer/_trigger.html.erb

@@ -23,9 +23,11 @@
     action: "click->drawer-trigger#triggerClick",
     drawer_trigger_drawer_outlet: drawer_selector
   )
-  button_data = merged_data.merge(component: "button")
+  # The variant:/size: locals style the button. A caller's data: { variant: }
+  # (the pre-0.7.4 workaround) still wins so existing markup keeps its look.
+  button_data = {variant: variant, size: size}.merge(merged_data, component: "button")
 %>
-<%= content_tag :button, type: :button, class: css_classes, data: button_data, **html_options do %>
+<%= content_tag :button, type: :button, class: css_classes.presence, data: button_data, **html_options do %>
   <%= icon_for(icon_name) if icon_name %>
   <%= yield %>
 <% end %>

data/app/views/components/pagination/_ellipsis.html.erb

@@ -1,12 +1,9 @@
 <%# locals: (css_classes: "", **html_options) %>
-<% sr_label = t("maquina_components.pagination.more_pages", default: "More pages") %>
+<% sr_label = t("maquina_components.pagination.more_pages", default: "More pages")
+  merged_data = merge_component_data(html_options, "pagination-part": "ellipsis") %>
 
-<span
-  class="<%= css_classes.presence %>"
-  data-pagination-part="ellipsis"
-  aria-hidden="true"
-  <%= tag.attributes(html_options.except(:data)) %>
->
+<%# Only the glyph is hidden from assistive tech, so the label is announced. %>
+<%= content_tag :span, class: css_classes.presence, data: merged_data, **html_options do %>
   <svg
     xmlns="http://www.w3.org/2000/svg"
     width="24"
@@ -25,4 +22,4 @@
   </svg>
 
   <span class="sr-only"><%= sr_label %></span>
-</span>
+<% end %>

data/app/views/components/pagination/_link.html.erb

@@ -1,7 +1,7 @@
 <%# locals: (href:, active: false, disabled: false, css_classes: "", **html_options) %>
 <% merged_data = merge_component_data(html_options,
     "pagination-part": "link",
-    active: active
+    active: (active ? true : nil)
   ) %>
 
 <% if disabled %>

data/app/views/components/pagination/_next.html.erb

@@ -4,12 +4,11 @@
   merged_data = merge_component_data(html_options, "pagination-part": "next") %>
 
 <% if is_disabled %>
-  <span
-    class="<%= css_classes.presence %>"
-    data-pagination-part="next"
-    aria-disabled="true"
-    <%= tag.attributes(html_options.except(:data)) %>
-  >
+  <%= content_tag :span,
+        class: css_classes.presence,
+        data: merged_data,
+        "aria-disabled": "true",
+        **html_options do %>
     <% if show_label %>
       <span><%= display_label %></span>
     <% end %>
@@ -28,7 +27,7 @@
     >
       <path d="m9 18 6-6-6-6" />
     </svg>
-  </span>
+  <% end %>
 <% else %>
   <%= link_to href,
         class: css_classes.presence,

data/app/views/components/pagination/_previous.html.erb

@@ -4,12 +4,11 @@
   merged_data = merge_component_data(html_options, "pagination-part": "previous") %>
 
 <% if is_disabled %>
-  <span
-    class="<%= css_classes.presence %>"
-    data-pagination-part="previous"
-    aria-disabled="true"
-    <%= tag.attributes(html_options.except(:data)) %>
-  >
+  <%= content_tag :span,
+        class: css_classes.presence,
+        data: merged_data,
+        "aria-disabled": "true",
+        **html_options do %>
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="24"
@@ -28,7 +27,7 @@
     <% if show_label %>
       <span><%= display_label %></span>
     <% end %>
-  </span>
+  <% end %>
 <% else %>
   <%= link_to href,
         class: css_classes.presence,

data/app/views/components/sidebar/_content.html.erb

@@ -3,6 +3,6 @@
     sidebar_part: :content
   ) %>
 
-<%= content_tag :div, class: css_classes, data: merged_data, **html_options do %>
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
   <%= yield %>
 <% end %>

data/app/views/components/sidebar/_footer.html.erb

@@ -3,6 +3,6 @@
     sidebar_part: :footer
   ) %>
 
-<%= content_tag :div, class: css_classes, data: merged_data, **html_options do %>
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
   <%= yield %>
 <% end %>

data/app/views/components/sidebar/_group.html.erb

@@ -3,7 +3,7 @@
     sidebar_part: :group
   ) %>
 
-<%= content_tag :div, class: css_classes, data: merged_data, **html_options do %>
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
   <% if title.present? %>
     <div data-sidebar-part="group-label"><%= title %></div>
   <% end %>

data/app/views/components/sidebar/_header.html.erb

@@ -3,6 +3,6 @@
     sidebar_part: :header
   ) %>
 
-<%= content_tag :div, class: css_classes, data: merged_data, **html_options do %>
+<%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
   <%= yield %>
 <% end %>

data/app/views/components/sidebar/_inset.html.erb

@@ -3,6 +3,6 @@
     sidebar_part: :inset
   ) %>
 
-<%= content_tag :main, class: css_classes, data: merged_data, **html_options do %>
+<%= content_tag :main, class: css_classes.presence, data: merged_data, **html_options do %>
   <%= yield %>
 <% end %>

data/app/views/components/sidebar/_menu.html.erb

@@ -3,6 +3,6 @@
     sidebar_part: :menu
   ) %>
 
-<%= content_tag :ul, class: css_classes, data: merged_data, **html_options do %>
+<%= content_tag :ul, class: css_classes.presence, data: merged_data, **html_options do %>
   <%= yield %>
 <% end %>