maquina-components 0.4.4 → 0.5.1

data/app/javascript/controllers/menu_button_controller.js

@@ -1,59 +1,137 @@
 import { Controller } from "@hotwired/stimulus"
 
+/**
+ * MenuButton Controller
+ *
+ * Sidebar-flavored button that toggles a dropdown panel with:
+ * - Click to toggle
+ * - Click outside to close
+ * - Escape key to close
+ * - aria-expanded state on the trigger
+ * - Animation states via data-state
+ */
 export default class extends Controller {
   static targets = ["button", "content"]
 
+  static values = {
+    open: { type: Boolean, default: false }
+  }
+
   connect() {
-    if (!this.hasContentTarget) {
-      return
-    }
+    this.handleClickOutside = this.handleClickOutside.bind(this)
+    this.handleKeydown = this.handleKeydown.bind(this)
+    this.boundTeardown = this.teardown.bind(this)
 
-    this.clickOutside = this.clickOutside.bind(this)
-    this.isOpen = this.buttonTarget.dataset.state === "open"
+    document.addEventListener("turbo:before-cache", this.boundTeardown)
 
-    if (this.isOpen) {
-      this.addClickOutsideListener()
+    if (this.hasContentTarget) {
+      this.contentTarget.hidden = !this.openValue
     }
   }
 
   disconnect() {
-    this.removeClickOutsideListener()
+    this.removeEventListeners()
+    document.removeEventListener("turbo:before-cache", this.boundTeardown)
   }
 
-  toggle() {
-    if (!this.hasContentTarget) {
-      return
+  toggle(event) {
+    event?.preventDefault()
+
+    if (this.openValue) {
+      this.close()
+    } else {
+      this.open()
     }
+  }
+
+  open() {
+    if (this.openValue || !this.hasContentTarget) return
 
+    this.openValue = true
+    this.buttonTarget.dataset.state = "open"
+    this.buttonTarget.setAttribute("aria-expanded", "true")
+    this.contentTarget.dataset.state = "open"
     this.contentTarget.classList.remove("hidden")
+    this.contentTarget.hidden = false
 
-    this.isOpen = !this.isOpen
-    this.buttonTarget.dataset.state = this.isOpen ? "open" : "closed"
+    this.addEventListeners()
+  }
 
-    if (this.isOpen) {
-      // Add a small delay before adding the click outside listener
-      setTimeout(() => {
-        this.addClickOutsideListener()
-      }, 100)
-    } else {
-      this.removeClickOutsideListener()
+  close() {
+    if (!this.openValue || !this.hasContentTarget) return
+
+    // Start closing animation, then hide once it finishes
+    this.contentTarget.dataset.state = "closing"
+
+    const animationDuration = 100 // matches CSS animation duration
+
+    this._closeTimeout = setTimeout(() => {
+      this._closeTimeout = null
+      this.openValue = false
+      this.buttonTarget.dataset.state = "closed"
+      this.buttonTarget.setAttribute("aria-expanded", "false")
+      this.contentTarget.dataset.state = "closed"
+      this.contentTarget.hidden = true
+
+      this.removeEventListeners()
+      this.buttonTarget.focus()
+    }, animationDuration)
+  }
+
+  // Turbo Cache Teardown
+
+  teardown() {
+    if (this._closeTimeout) {
+      clearTimeout(this._closeTimeout)
+      this._closeTimeout = null
+    }
+
+    this.openValue = false
+
+    if (this.hasButtonTarget) {
+      this.buttonTarget.dataset.state = "closed"
+      this.buttonTarget.setAttribute("aria-expanded", "false")
+    }
+
+    if (this.hasContentTarget) {
+      this.contentTarget.dataset.state = "closed"
+      this.contentTarget.hidden = true
     }
+
+    this.removeEventListeners()
   }
 
-  clickOutside(event) {
-    if (!this.isOpen) return
-    if (event.target === this.element) return
+  // Event Handlers
+
+  handleClickOutside(event) {
+    if (!this.openValue) return
+    if (this.element.contains(event.target)) return
+
+    this.close()
+  }
 
-    if (!this.contentTarget.contains(event.target)) {
-      this.toggle()
+  handleKeydown(event) {
+    if (!this.openValue) return
+
+    if (event.key === "Escape") {
+      event.preventDefault()
+      this.close()
     }
   }
 
-  addClickOutsideListener() {
-    document.addEventListener('click', this.clickOutside)
+  // Event Listener Management
+
+  addEventListeners() {
+    // Delay adding click outside listener to prevent immediate close
+    setTimeout(() => {
+      document.addEventListener("click", this.handleClickOutside)
+    }, 0)
+
+    document.addEventListener("keydown", this.handleKeydown)
   }
 
-  removeClickOutsideListener() {
-    document.removeEventListener('click', this.clickOutside)
+  removeEventListeners() {
+    document.removeEventListener("click", this.handleClickOutside)
+    document.removeEventListener("keydown", this.handleKeydown)
   }
 }

data/app/javascript/controllers/sidebar_controller.js

@@ -318,19 +318,17 @@ export default class extends Controller {
   // Scroll Lock (for mobile overlay)
   // ============================================================================
 
+  // Styling lives in drawer.css (body[data-maquina-scroll-locked]); the
+  // controller only records the scroll offset and flips the attribute
   lockScroll() {
     this.scrollPosition = window.pageYOffset
-    document.body.style.overflow = "hidden"
-    document.body.style.position = "fixed"
-    document.body.style.top = `-${this.scrollPosition}px`
-    document.body.style.width = "100%"
+    document.body.style.setProperty("--maquina-scroll-lock-top", `-${this.scrollPosition}px`)
+    document.body.setAttribute("data-maquina-scroll-locked", "")
   }
 
   unlockScroll() {
-    document.body.style.overflow = ""
-    document.body.style.position = ""
-    document.body.style.top = ""
-    document.body.style.width = ""
+    document.body.removeAttribute("data-maquina-scroll-locked")
+    document.body.style.removeProperty("--maquina-scroll-lock-top")
     if (this.scrollPosition !== undefined) {
       window.scrollTo(0, this.scrollPosition)
     }

data/app/javascript/controllers/sidebar_trigger_controller.js

@@ -2,12 +2,13 @@ import { Controller } from "@hotwired/stimulus"
 
 /**
  * Sidebar Trigger Controller
- * 
- * Triggers sidebar toggle via Stimulus outlets.
+ *
+ * Triggers sidebar toggle via Stimulus outlets and mirrors the sidebar's
+ * state on the trigger (aria-expanded, aria-controls).
  * Can be placed anywhere on the page - finds sidebar via outlet selector.
- * 
+ *
  * @example
- * <button 
+ * <button
  *   data-controller="sidebar-trigger"
  *   data-action="click->sidebar-trigger#triggerClick"
  *   data-sidebar-trigger-sidebar-outlet="[data-outlet='sidebar']"
@@ -18,6 +19,23 @@ import { Controller } from "@hotwired/stimulus"
 export default class extends Controller {
   static outlets = ["sidebar"]
 
+  connect() {
+    this.handleStateChanged = this.handleStateChanged.bind(this)
+    window.addEventListener("sidebar:stateChanged", this.handleStateChanged)
+  }
+
+  disconnect() {
+    window.removeEventListener("sidebar:stateChanged", this.handleStateChanged)
+  }
+
+  sidebarOutletConnected(outlet) {
+    this.syncExpanded(outlet.openValue)
+
+    if (outlet.hasSidebarTarget && outlet.sidebarTarget.id) {
+      this.element.setAttribute("aria-controls", outlet.sidebarTarget.id)
+    }
+  }
+
   /**
    * Toggle sidebar when trigger is clicked
    * Works with multiple sidebars if multiple outlets are connected
@@ -29,4 +47,15 @@ export default class extends Controller {
       })
     }
   }
+
+  handleStateChanged(event) {
+    if (!this.hasSidebarOutlet) return
+    if (!this.sidebarOutletElements.includes(event.target)) return
+
+    this.syncExpanded(event.detail.open)
+  }
+
+  syncExpanded(open) {
+    this.element.setAttribute("aria-expanded", open ? "true" : "false")
+  }
 }

data/app/javascript/controllers/toaster_controller.js

@@ -60,6 +60,10 @@ export default class extends Controller {
         return controller.createToast({ title, variant: "error", ...options })
       },
 
+      destructive(title, options = {}) {
+        return controller.createToast({ title, variant: "error", ...options })
+      },
+
       dismiss(toastId) {
         controller.dismissToast(toastId)
       },
@@ -115,6 +119,14 @@ export default class extends Controller {
   }
 
   buildToastHtml({ id, title, description, variant, duration, dismissible, action }) {
+    // Titles/descriptions are escaped below; variant and duration are
+    // interpolated into attributes, so constrain them to safe values.
+    // :destructive is the library-wide alias for toast's error variant.
+    if (variant === "destructive") variant = "error"
+    const knownVariants = ["default", "success", "info", "warning", "error"]
+    variant = knownVariants.includes(variant) ? variant : "default"
+    duration = Number(duration) || 0
+
     const icons = {
       default: "",
       success: this.getIconSvg("circle_check"),

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

@@ -1,5 +1,7 @@
 <%# locals: (variant: :default, icon: nil, css_classes: "", **html_options) %>
-<% merged_data = (html_options.delete(:data) || {}).merge(
+<%# :error is accepted as an alias of the canonical :destructive variant %>
+<% variant = :destructive if variant.to_s == "error" %>
+<% merged_data = merge_component_data(html_options,
     component: :alert,
     variant: variant,
     has_icon: icon.present? || nil

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

@@ -1,5 +1,11 @@
 <%# locals: (variant: :default, size: :md, css_classes: "", **html_options) %>
-<% merged_data = (html_options.delete(:data) || {}).merge(
+<%
+  # Library-wide vocabulary aliases: :default is the canonical middle
+  # size (badge's own is :md), :destructive the canonical danger variant
+  size = :md if size.to_s == "default"
+  variant = :destructive if variant.to_s == "error"
+%>
+<% merged_data = merge_component_data(html_options,
     component: :badge,
     variant: variant,
     size: size

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

@@ -1,5 +1,5 @@
 <%# locals: (css_classes: "", responsive: false, collapse_after: 0, **html_options) %>
-<% merged_data = (html_options.delete(:data) || {}).merge(
+<% merged_data = merge_component_data(html_options,
     component: :breadcrumbs
   )
 

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

@@ -55,7 +55,7 @@
     abbr_day_names.rotate(1) :
     abbr_day_names
 
-  merged_data = (html_options.delete(:data) || {}).merge(
+  merged_data = merge_component_data(html_options,
     controller: "calendar",
     component: "calendar",
     "calendar-mode-value": mode,

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

@@ -1,5 +1,5 @@
 <%# locals: (css_classes: "", **html_options) %>
-<% merged_data = (html_options.delete(:data) || {}).merge(component: :card) %>
+<% merged_data = merge_component_data(html_options, component: :card) %>
 
 <%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
   <%= yield %>

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

@@ -1,6 +1,7 @@
 <%# locals: (id: nil, name: nil, value: nil, placeholder: "Select...", css_classes: "", **html_options) %>
-<% combobox_id = id || "combobox-#{SecureRandom.hex(4)}" %>
-<% merged_data = (html_options.delete(:data) || {}).merge(
+<%# Deterministic fallback id: random ids break idiomorph matching across Turbo morphs %>
+<% combobox_id = id || "combobox-#{name.to_s.parameterize.presence || "default"}" %>
+<% merged_data = merge_component_data(html_options,
     component: :combobox,
     controller: "combobox",
     combobox_value_value: value,

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

@@ -1,7 +1,8 @@
 <%# 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) %>
 <%
-  # Generate unique ID for popover targeting
-  component_id = id || "date-picker-#{SecureRandom.hex(4)}"
+  # Deterministic ID for popover targeting: random ids break idiomorph
+  # matching across Turbo morphs
+  component_id = id || "date-picker-#{input_name.to_s.parameterize.presence || "default"}"
   popover_id = "#{component_id}-popover"
 
   # Parse selected dates for display
@@ -28,7 +29,7 @@
 
   default_placeholder = mode == :range ? "Select date range" : "Select date"
 
-  merged_data = (html_options.delete(:data) || {}).merge(
+  merged_data = merge_component_data(html_options,
     controller: "date-picker",
     component: "date-picker",
     "date-picker-mode-value": mode,

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

@@ -0,0 +1,37 @@
+<%# locals: (id: nil, state: :closed, side: :right, aria_label: "Drawer", css_classes: "", **html_options) %>
+<% stable_id = id || "drawer-#{side}"
+   merged_data = merge_component_data(html_options,
+     drawer_part: :root,
+     drawer_target: "drawer",
+     state: state,
+     side: side
+   ) %>
+<aside
+  id="<%= stable_id %>"
+  class="group peer drawer-loading <%= css_classes %>"
+  <%= tag.attributes(data: merged_data, **html_options) %>
+>
+  <%# Backdrop overlay %>
+  <div
+    id="<%= stable_id %>-backdrop"
+    data-drawer-part="backdrop"
+    data-drawer-target="backdrop"
+    data-action="click->drawer#backdropClick"
+    ></div>
+  <%# Drawer container (fixed positioned) %>
+  <div
+    id="<%= stable_id %>-panel"
+    data-drawer-part="panel"
+    data-drawer-target="panel"
+    role="dialog"
+    aria-modal="true"
+    aria-label="<%= aria_label %>"
+    tabindex="-1"
+    <%= tag.attributes(aria: {hidden: true}, inert: true) if state.to_s == "closed" %>
+  >
+    <%# Inner drawer content wrapper %>
+    <div id="<%= stable_id %>-inner" data-drawer-part="inner">
+      <%= yield %>
+    </div>
+  </div>
+</aside>

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

@@ -1,25 +1,22 @@
-<div
-  data-menu-button-target="content"
-  class="
-    absolute z-10 overflow-hidden border border-border p-1 text-popover-foreground
-    min-w-56 max-w-56 content-fit shadow-md bottom-full rounded-lg hidden
-    peer-data-[state=closed]/menu-button:animate-out
-    peer-data-[state=closed]/menu-button:fade-out-0
-    peer-data-[state=open]/menu-button:fade-in-0
-    peer-data-[state=closed]/menu-button:zoom-out-95
-    peer-data-[state=open]/menu-button:zoom-in-95
-    peer-data-[side=bottom]/menu-button:slide-in-from-top-2
-    peer-data-[side=left]/menu-button:slide-in-from-right-2
-    peer-data-[side=right]/menu-button:slide-in-from-left-2
-    peer-data-[side=top]/menu-button:slide-in-from-bottom-2
-  "
-  role="menu"
-  aria-orientation="vertical"
-  aria-labelledby="menu-button"
-  tabindex="-1"
->
+<%# locals: (id: nil, side: :top, align: :start, css_classes: "", **html_options) %>
+<% merged_data = merge_component_data(html_options,
+    "menu-button-part": "content",
+    "menu-button-target": "content",
+    side: side,
+    align: align,
+    state: "closed"
+  ) %>
+<% aria_attrs = { orientation: "vertical" } %>
+<% aria_attrs[:labelledby] = "#{id}-trigger" if id.present? %>
+
+<%= content_tag :div,
+      id: (id.present? ? "#{id}-content" : nil),
+      role: "menu",
+      tabindex: "-1",
+      aria: aria_attrs,
+      class: css_classes.presence,
+      data: merged_data,
+      hidden: true,
+      **html_options do %>
   <%= yield %>
-</div>
-<!--
-<div role="separator" aria-orientation="horizontal" class="separator"></div>
--->
+<% end %>

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

@@ -1,5 +1,5 @@
 <%# locals: (auto_close: false, css_classes: "", **html_options) %>
-<% merged_data = (html_options.delete(:data) || {}).merge(
+<% merged_data = merge_component_data(html_options,
     component: "dropdown-menu",
     controller: "dropdown-menu"
   ) %>

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

@@ -1,5 +1,5 @@
 <%# locals: (variant: :default, size: :default, css_classes: "", **html_options) %>
-<% merged_data = (html_options.delete(:data) || {}).merge(
+<% merged_data = merge_component_data(html_options,
     component: :empty,
     variant: variant,
     size: size

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

@@ -1,5 +1,5 @@
 <%# locals: (css_classes: "", **html_options) %>
-<% merged_data = (html_options.delete(:data) || {}).merge(
+<% merged_data = merge_component_data(html_options,
     component: :header
   ) %>
 

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

@@ -1,44 +1,39 @@
-<%# locals: (title: "", subtitle: nil, icon: nil, text_icon: nil, icon_classes: "", submenu: false) %>
+<%# locals: (title: "", subtitle: nil, icon: nil, text_icon: nil, icon_classes: "", submenu: false, id: nil, css_classes: "", **html_options) %>
+<% menu_button_id = id || "menu-button-#{title.to_s.parameterize.presence || "menu"}" %>
+<% merged_data = merge_component_data(html_options,
+    component: "menu-button"
+  ) %>
 
-<ul class="flex w-full min-w-0 flex-col gap-1">
-  <li class="group/menu-item relative" data-controller="menu-button">
+<%= content_tag :ul, class: css_classes.presence, data: merged_data, **html_options do %>
+  <li data-menu-button-part="item" data-controller="menu-button">
     <button
+      type="button"
+      id="<%= menu_button_id %>-trigger"
       data-state="closed"
-      class="
-        peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2
-        text-left outline-none ring-sidebar-ring transition-[width,height,padding]
-        focus-visible:ring-2 active:bg-sidebar-accent
-        active:text-sidebar-accent-foreground disabled:pointer-events-none
-        disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50
-        data-[state=open]:bg-sidebar-accent
-        data-[state=open]text-sidebar-accent-foreground
-        group-data-[collapsible=icon]:size-8! [&>span:last-child]:truncate
-        [&>svg]:size-4 [&>svg]:shrink-0 hover:bg-sidebar-accent
-        hover:text-sidebar-accent-foreground h-12 text-sm
-        group-data-[collapsible=icon]:p-0!
-      ", data-action="menu-button#toggle", data-menu-button-target="button" }
+      data-menu-button-part="trigger"
+      data-menu-button-target="button"
+      data-action="menu-button#toggle"
+      aria-haspopup="menu"
+      aria-expanded="false"
     >
-        <% if icon.present? %>
-          <%= image_tag icon, alt: "maquina", class: "#{icon_classes}" %>
-        <% elsif text_icon.present? %>
-          <div
-            class="
-              flex aspect-square size-8 items-center justify-center rounded-lg
-              bg-sidebar-primary text-sidebar-primary-foreground
-            "
-          >
-              <span class="<%= icon_classes %>"><%= text_icon %></span>
-          </div>
-        <% end %>
-      <div class="grid flex-1 text-left text-sm leading-tight">
-        <span class="truncate font-semibold"><%= title %></span>
+      <% if icon.present? %>
+        <%= 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>
+        </span>
+      <% end %>
+
+      <span data-menu-button-part="text">
+        <span data-menu-button-part="title"><%= title %></span>
         <% if subtitle.present? %>
-          <span class="truncate text-xs"><%= subtitle %></span>
+          <span data-menu-button-part="subtitle"><%= subtitle %></span>
         <% end %>
-      </div>
+      </span>
+
       <%= builtin_icon_for(:chevron_up_down, class: "ml-auto") if submenu %>
     </button>
 
-    <%= yield %>
+    <%= yield menu_button_id %>
   </li>
-</ul>
+<% end %>

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

@@ -1,5 +1,5 @@
 <%# locals: (css_classes: "", **html_options) %>
-<% merged_data = (html_options.delete(:data) || {}).merge(
+<% merged_data = merge_component_data(html_options,
     component: :pagination
   ) %>
 

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

@@ -1,11 +1,10 @@
-<%# locals: (orientation: :horizontal) -%>
+<%# locals: (orientation: :horizontal, css_classes: "", **html_options) %>
+<% merged_data = merge_component_data(html_options,
+    component: :separator,
+    orientation: orientation
+  ) %>
 
-<div
-  data-orientation="<%= orientation %>"
-  role="none"
-  class="
-    bg-border shrink-0 data-[orientation=horizontal]:h-px
-    data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px mx-2
-    data-[orientation=vertical]:h-4
-  "
-></div>
+<%= tag.div role: "none",
+      class: css_classes.presence,
+      data: merged_data,
+      **html_options %>

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

@@ -1,7 +1,7 @@
 <%# locals: (id: nil, state: :collapsed, collapsible: :offcanvas, variant: :inset, side: :left, css_classes: "", **html_options) %>
 <% stable_id = id || "sidebar-#{side}"
   
-  merged_data = (html_options.delete(:data) || {}).merge(
+  merged_data = merge_component_data(html_options,
     sidebar_part: :root,
     sidebar_target: "sidebar",
     state: state,

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

@@ -1,4 +1,6 @@
-<%# locals: (collection:, columns:, caption: nil, variant: nil, table_variant: nil, empty_message: "No data available", row_id: nil, html_options: {}) %>
+<%# locals: (collection:, columns:, caption: nil, variant: nil, table_variant: nil, empty_message: "No data available", row_id: nil, html_options: {}, **extra_html_options) %>
+<%# html_options: {} is the legacy call style; bare keyword passthrough is the standard one %>
+<% html_options = html_options.merge(extra_html_options) %>
 <%= render "components/table", variant: variant, table_variant: table_variant, **html_options do %>
   <% if caption.present? %>
     <%= render "components/table/caption" do %><%= caption %><% end %>

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

@@ -1,7 +1,7 @@
 <%# locals: (css_classes: "", container: true, variant: nil, table_variant: nil, **html_options) %>
 <%
   # Table data attributes - merge user data with component defaults
-  table_data = (html_options.delete(:data) || {}).merge(component: :table)
+  table_data = merge_component_data(html_options, component: :table)
   table_data[:variant] = table_variant if table_variant
 
   # Container data attributes

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

@@ -1,5 +1,10 @@
 <%# locals: (variant: :default, title: nil, description: nil, icon: nil, duration: 5000, dismissible: true, content: nil, css_classes: "", **html_options) %>
 <%
+  # :destructive is the library-wide danger variant; toast renders it
+  # with its existing error styling
+  variant = variant.to_s.to_sym
+  variant = :error if variant == :destructive
+
   # Auto-select icon based on variant if not provided
   default_icons = {
     default: nil,
@@ -10,7 +15,7 @@
   }
   toast_icon = icon || default_icons[variant]
 %>
-<% merged_data = (html_options.delete(:data) || {}).merge(
+<% merged_data = merge_component_data(html_options,
     component: :toast,
     controller: "toast",
     variant: variant,

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

@@ -1,5 +1,5 @@
 <%# locals: (position: :bottom_right, content: nil, css_classes: "", **html_options) %>
-<% merged_data = (html_options.delete(:data) || {}).merge(
+<% merged_data = merge_component_data(html_options,
     component: :toaster,
     controller: "toaster",
     position: position.to_s.dasherize,

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

@@ -5,7 +5,7 @@
                     else [value.to_s]
                     end
   
-  merged_data = (html_options.delete(:data) || {}).merge(
+  merged_data = merge_component_data(html_options,
     controller: "toggle-group",
     component: "toggle-group",
     variant: variant,

data/app/views/components/alert/_description.html.erb

@@ -1,5 +1,5 @@
 <%# locals: (text: nil, content: nil, css_classes: "", **html_options) %>
-<% merged_data = (html_options.delete(:data) || {}).merge(alert_part: :description) %>
+<% merged_data = merge_component_data(html_options, alert_part: :description) %>
 
 <%= content_tag :div, class: css_classes.presence, data: merged_data, **html_options do %>
   <%= text || content %>