maquina-components 0.7.3 → 0.8.0

data/app/javascript/controllers/sidebar_controller.js

@@ -34,8 +34,8 @@ export default class extends Controller {
     // Track if we're on mobile
     this._isMobile = null
 
-    // Guard flag for morph-triggered attribute changes
-    this._morphing = false
+    // Set by a same-URL "replace" visit (a page refresh) until it renders
+    this._refreshing = false
   }
 
   connect() {
@@ -46,11 +46,15 @@ export default class extends Controller {
     this.resizeHandler = this.debounce(this.checkScreenSize.bind(this), 150)
     window.addEventListener("resize", this.resizeHandler)
 
+    this.boundTrackVisit = this.trackVisit.bind(this)
+    this.boundClearVisit = this.clearVisit.bind(this)
     this.boundTeardown = this.teardown.bind(this)
-    this.boundBeforeMorphElement = this.beforeMorphElement.bind(this)
+    this.boundPreserveAttribute = this.preserveAttribute.bind(this)
     this.boundHandleMorph = this.handleMorph.bind(this)
+    document.addEventListener("turbo:visit", this.boundTrackVisit)
+    document.addEventListener("turbo:load", this.boundClearVisit)
     document.addEventListener("turbo:before-cache", this.boundTeardown)
-    document.addEventListener("turbo:before-morph-element", this.boundBeforeMorphElement)
+    document.addEventListener("turbo:before-morph-attribute", this.boundPreserveAttribute)
     document.addEventListener("turbo:morph", this.boundHandleMorph)
 
     // Apply initial state without animation
@@ -59,16 +63,40 @@ export default class extends Controller {
 
   disconnect() {
     window.removeEventListener("resize", this.resizeHandler)
+    document.removeEventListener("turbo:visit", this.boundTrackVisit)
+    document.removeEventListener("turbo:load", this.boundClearVisit)
     document.removeEventListener("turbo:before-cache", this.boundTeardown)
-    document.removeEventListener("turbo:before-morph-element", this.boundBeforeMorphElement)
+    document.removeEventListener("turbo:before-morph-attribute", this.boundPreserveAttribute)
     document.removeEventListener("turbo:morph", this.boundHandleMorph)
   }
 
   // ============================================================================
-  // Turbo Cache Teardown
+  // Turbo Integration (cache teardown and page-refresh morphs)
   // ============================================================================
 
+  // A page refresh is a same-path "replace" visit -- Turbo's own isPageRefresh
+  // test. It covers Turbo.visit(location.href, { action: "replace" }), refresh
+  // broadcasts and same-URL form redirects. The open state must survive it.
+  trackVisit(event) {
+    const { url, action } = event.detail
+    this._refreshing = action === "replace" &&
+      new URL(url, window.location.href).pathname === window.location.pathname
+  }
+
+  clearVisit() {
+    this._refreshing = false
+  }
+
+  // Runs before Turbo snapshots the page. Real navigation parks the mobile
+  // drawer so the cached snapshot (and the next page) starts closed; a page
+  // refresh leaves it open. Either way the scroll lock is released so no
+  // snapshot is cached locked -- handleMorph() re-locks after a refresh.
   teardown() {
+    if (this._refreshing) {
+      this.unlockScroll()
+      return
+    }
+
     if (this.isMobile()) {
       this.openValue = false
     }
@@ -81,19 +109,35 @@ export default class extends Controller {
     this.unlockScroll()
   }
 
-  beforeMorphElement(event) {
-    if (event.target === this.element) {
-      this._morphing = true
+  // The server renders open state from the desktop cookie, which mobile never
+  // writes, so a morph must not overwrite the attributes this controller owns.
+  // The menu contents below them still morph normally.
+  preserveAttribute(event) {
+    const owned = this.ownedAttributes(event.target)
+    if (owned?.includes(event.detail.attributeName)) {
+      event.preventDefault()
     }
   }
 
+  ownedAttributes(element) {
+    if (element === this.element) return ["data-sidebar-open-value"]
+    if (this.hasSidebarTarget && element === this.sidebarTarget) return ["data-state", "data-collapsible"]
+    if (this.hasBackdropTarget && element === this.backdropTarget) return ["data-state", "class"]
+    if (this.hasContainerTarget && element === this.containerTarget) return ["inert"]
+    return null
+  }
+
+  // After a morph: keep the live state on mobile, re-read the cookie on
+  // desktop, then re-apply everything the morph can still reset -- the body
+  // scroll lock (<body> is morphed) and the trigger's aria-expanded.
   handleMorph() {
-    const cookieValue = this.getCookie(this.cookieNameValue)
+    this._refreshing = false
 
-    if (this.isMobile()) {
-      this.openValue = false
-    } else if (cookieValue !== null) {
-      this.openValue = cookieValue === "true"
+    if (!this.isMobile()) {
+      const cookieValue = this.getCookie(this.cookieNameValue)
+      if (cookieValue !== null) {
+        this.openValue = cookieValue === "true"
+      }
     }
 
     if (this.hasSidebarTarget) {
@@ -101,7 +145,7 @@ export default class extends Controller {
     }
 
     this.updateState()
-    this._morphing = false
+    this.dispatchStateChange()
   }
 
   // ============================================================================
@@ -123,7 +167,6 @@ export default class extends Controller {
 
   openValueChanged(new_value, old_value) {
     if (new_value === old_value) return
-    if (this._morphing) return
 
     this.updateState()
     this.persistState()
@@ -278,31 +321,23 @@ export default class extends Controller {
     }
   }
 
+  // data-collapsible describes the current state ("none" just means open), so
+  // only the direction of the crossing matters: entering mobile parks the
+  // drawer closed, leaving it restores the saved desktop state.
   handleScreenSizeChange(wasMobile, isMobile) {
-    if (this.sidebarTarget.getAttribute("data-collapsible") === "offcanvas") {
-      // Mobile to desktop: restore saved state
-      if (wasMobile && !isMobile) {
-        const cookieValue = this.getCookie(this.cookieNameValue)
-        this.openValue = cookieValue !== null
-          ? cookieValue === "true"
-          : this.defaultOpenValue
-      }
-      // Desktop to mobile: close sidebar
-      else if (!wasMobile && isMobile) {
-        this.openValue = false
-      }
-    } else if (this.sidebarTarget.getAttribute("data-collapsible") === "icon") {
-      // Icon mode is always visible, just changes width
-      // Desktop to mobile: might want to close
-      if (!wasMobile && isMobile) {
-        this.openValue = false
-      }
-    } else if (this.sidebarTarget.getAttribute("data-collapsible") === "none") {
-      // Non-collapsible sidebars stay open
-      this.openValue = true
+    if (wasMobile && !isMobile) {
+      const cookieValue = this.getCookie(this.cookieNameValue)
+      this.openValue = cookieValue !== null
+        ? cookieValue === "true"
+        : this.defaultOpenValue
+    } else if (!wasMobile && isMobile) {
+      this.openValue = false
     }
 
+    // Crossing the breakpoint without an open-state change still moves the
+    // drawer between offcanvas and icon rail, and drops a desktop scroll lock
     this.updateState()
+    if (!isMobile) this.unlockScroll()
   }
 
   isMobile() {
@@ -342,19 +377,26 @@ export default class extends Controller {
   // ============================================================================
 
   // Styling lives in drawer.css (body[data-maquina-scroll-locked]); the
-  // controller only records the scroll offset and flips the attribute
+  // controller only records the scroll offset and flips the attribute.
+  //
+  // Idempotent: the offset is recorded once per lock. Re-locking after a morph
+  // reset <body> must not record the locked page's offset of 0.
   lockScroll() {
-    this.scrollPosition = window.pageYOffset
+    if (!this._scrollLocked) {
+      this.scrollPosition = window.scrollY
+      this._scrollLocked = true
+    }
     document.body.style.setProperty("--maquina-scroll-lock-top", `-${this.scrollPosition}px`)
     document.body.setAttribute("data-maquina-scroll-locked", "")
   }
 
   unlockScroll() {
+    if (!this._scrollLocked) return
+
+    this._scrollLocked = false
     document.body.removeAttribute("data-maquina-scroll-locked")
     document.body.style.removeProperty("--maquina-scroll-lock-top")
-    if (this.scrollPosition !== undefined) {
-      window.scrollTo(0, this.scrollPosition)
-    }
+    window.scrollTo(0, this.scrollPosition)
   }
 
   // ============================================================================

data/app/javascript/controllers/sidebar_trigger_controller.js

@@ -21,11 +21,24 @@ export default class extends Controller {
 
   connect() {
     this.handleStateChanged = this.handleStateChanged.bind(this)
+    this.preserveAttribute = this.preserveAttribute.bind(this)
     window.addEventListener("sidebar:stateChanged", this.handleStateChanged)
+    this.element.addEventListener("turbo:before-morph-attribute", this.preserveAttribute)
   }
 
   disconnect() {
     window.removeEventListener("sidebar:stateChanged", this.handleStateChanged)
+    this.element.removeEventListener("turbo:before-morph-attribute", this.preserveAttribute)
+  }
+
+  // The server never renders these (only the client knows the live state), so
+  // without this every page morph strips them from the trigger
+  preserveAttribute(event) {
+    if (event.target !== this.element) return
+
+    if (["aria-expanded", "aria-controls"].includes(event.detail.attributeName)) {
+      event.preventDefault()
+    }
   }
 
   sidebarOutletConnected(outlet) {

data/app/javascript/controllers/toast_controller.js

@@ -101,9 +101,8 @@ export default class extends Controller {
   }
 
   handleAction(event) {
-    // If this toast was created via JS API with an action callback,
-    // the callback is stored on the toaster controller or needs to be
-    // dispatched as an event for the parent to handle
+    // Bubbles to the toaster, which runs the action.onClick given to the
+    // JS API, and on to any document-level `toast:action` listeners
     this.dispatch("action", {
       detail: { toastId: this.element.id },
       bubbles: true

data/app/javascript/controllers/toaster_controller.js

@@ -12,6 +12,7 @@ import { Controller } from "@hotwired/stimulus"
  *   Toast.info("New update available", { duration: 10000 })
  *   Toast.warning("Session expiring soon")
  *   Toast.show("Custom message", { variant: "default" })
+ *   Toast.show("Event created", { action: { label: "Undo", onClick: (event) => undo() } })
  *   Toast.dismiss(toastId)
  *   Toast.dismissAll()
  */
@@ -23,11 +24,18 @@ export default class extends Controller {
   }
 
   connect() {
+    // action.onClick callbacks, keyed by toast element
+    this.actionCallbacks = new WeakMap()
+    this.runActionCallback = this.runActionCallback.bind(this)
+    this.element.addEventListener("toast:action", this.runActionCallback)
+
     // Expose global Toast API
     this.setupGlobalApi()
   }
 
   disconnect() {
+    this.element.removeEventListener("toast:action", this.runActionCallback)
+
     // Clean up global API
     if (window.Toast && window.Toast._controller === this) {
       delete window.Toast
@@ -112,6 +120,10 @@ export default class extends Controller {
     // Insert into container
     this.element.insertAdjacentHTML("beforeend", toastHtml)
 
+    if (typeof action?.onClick === "function") {
+      this.actionCallbacks.set(document.getElementById(toastId), action.onClick)
+    }
+
     // Enforce max visible
     this.enforceMaxVisible()
 
@@ -163,7 +175,7 @@ export default class extends Controller {
            data-variant="${variant}"
            data-toast-duration-value="${duration}"
            data-toast-dismissible-value="${dismissible}"
-           data-toast-action-callback="${action ? "true" : "false"}"
+           data-toast-action-callback-value="${action ? "true" : "false"}"
            data-state="entering">
         ${iconHtml}
         <div data-toast-part="content">
@@ -176,6 +188,16 @@ export default class extends Controller {
     `.trim()
   }
 
+  /**
+   * Runs the action.onClick passed to the JS API when the toast's action
+   * button is clicked. The toast controller dispatches `toast:action`
+   * (bubbling) from the toast element; it still reaches document listeners.
+   */
+  runActionCallback(event) {
+    const callback = this.actionCallbacks.get(event.target)
+    if (callback) callback(event)
+  }
+
   getIconSvg(name) {
     const icons = {
       circle_check: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>',

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) %>
+<%# 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, caption_layout: :label, years: nil, 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
@@ -55,6 +36,18 @@
     abbr_day_names.rotate(1) :
     abbr_day_names
 
+  # caption_layout: :dropdown swaps the caption for month and year selects.
+  # Their locals reach the header only then, so an app's own calendar/header
+  # override written for the caption keeps working.
+  dropdown = caption_layout.to_sym == :dropdown
+  year_range = calendar_year_range(display_year, min_date: min_date_parsed, max_date: max_date_parsed, years: years) if dropdown
+  header_locals = if dropdown
+    {caption_layout: :dropdown, years: year_range,
+     month_options: calendar_month_options(display_year, min_date: min_date_parsed, max_date: max_date_parsed)}
+  else
+    {}
+  end
+
   merged_data = merge_component_data(html_options,
     controller: "calendar",
     component: "calendar",
@@ -65,10 +58,16 @@
     "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,
+    "calendar-start-year-value": year_range&.first,
+    "calendar-end-year-value": year_range&.last
   )
 
-  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,
@@ -95,7 +94,8 @@
   <%= render "components/calendar/header",
         month: display_month,
         year: display_year,
-        month_name: I18n.l(first_of_month, format: "%B %Y") %>
+        month_name: I18n.l(first_of_month, format: "%B %Y"),
+        **header_locals %>
 
   <%# Weekday headers %>
   <div data-calendar-part="weekdays">
@@ -115,8 +115,17 @@
             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>
+
+  <%# Optional footer (actions such as Clear/Done); stays between the grid and
+      a header moved to the bottom when the calendar's popover opens above.
+      Without a caller block a partial's yield returns content_for(:layout),
+      which is the whole page when rendered from a layout, so that is no footer. %>
+  <% footer = capture { yield }.presence %>
+  <% if footer && footer != content_for(:layout) %>
+    <div data-calendar-part="footer"><%= footer %></div>
+  <% end %>
 <% end %>

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, caption_layout: :label, years: nil, 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 %>
@@ -95,9 +81,11 @@
           disabled_dates: disabled_dates,
           show_outside_days: show_outside_days,
           week_starts_on: week_starts_on,
+          caption_layout: caption_layout,
+          years: years,
           data: {
             "date-picker-target": "calendar",
             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 %>