fernandes-ui 0.1.2 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: da1c77278662e1886130b12bbcbc630a4d19cb0651c81362e6006e8f1a9e5351
-  data.tar.gz: 26c135df8c057f54aa32c8a630e0f551ad1bab59c70b7addf2e1ac7e1a1ff3c4
+  metadata.gz: a5e204a6fcf76008dccc34ec8487f8b2bd80ba924a43aeecd59a44802d744ade
+  data.tar.gz: f470c5ab397812019513fdbb08d6c77166613f06be3e5f22ec801905b32860c7
 SHA512:
-  metadata.gz: 26f10d3e9aa1d9ade5064cb6d9cd8b3f6b52c6eed32ddab06d4860128399aa2c88a94fc284b0fa8be23863f50ac0b8a53faf4655b4c1f5fd31bdc38eb57cda6c
-  data.tar.gz: 85458b4aaedfeae39402e9e008f1b329c11a0ce95489f9a44b62183224a4c2848ed005ebc29ab5bf88d5b71eded993321d67d72b8093432650184e211e224b5f
+  metadata.gz: dfce0d35ccdb4fcc6a09108aef9eb7e197046a9c2bed89545cc5a979f7d7e870f593ba545f632cdf3021557a726f4c1d7d726a0cf08a31f51a9896c376a35fa8
+  data.tar.gz: 22dee7451abe1a42880c98ec161c33e5baf43b264ded6399e8d3c5a24c6f55d9a0bf7355ff684e5c90a4121924babcc6f39dac98a5c48788e00624c413125ca8

data/app/assets/javascripts/ui.esm.js

@@ -1703,11 +1703,9 @@ class DropdownController extends Controller {
   openSubmenuHandler(event) {
     const trigger = event.currentTarget;
     const submenu = trigger.nextElementSibling;
-    if (document.activeElement && document.activeElement.hasAttribute("role") && document.activeElement.getAttribute("role") === "menuitem") {
-      document.activeElement.blur();
-    }
     clearAllTabindexes(this.element);
     trigger.setAttribute("tabindex", "0");
+    trigger.focus();
     this.lastHoveredItem = trigger;
     if (this.closeSubmenuTimeouts.has(trigger)) {
       clearTimeout(this.closeSubmenuTimeouts.get(trigger));
@@ -1740,11 +1738,9 @@ class DropdownController extends Controller {
   }
   trackHoveredItem(event) {
     const item = event.currentTarget;
-    if (document.activeElement && document.activeElement.hasAttribute("role") && document.activeElement.getAttribute("role") === "menuitem") {
-      document.activeElement.blur();
-    }
     clearAllTabindexes(this.element);
     item.setAttribute("tabindex", "0");
+    item.focus();
     this.lastHoveredItem = item;
   }
   toggleCheckbox(event) {
@@ -2802,6 +2798,7 @@ class CollapsibleController extends Controller {
       content.dataset.state = state;
       if (isOpen) {
         content.removeAttribute("hidden");
+        void content.offsetHeight;
         content.style.height = `${content.scrollHeight}px`;
       } else {
         if (animate) {

data/app/assets/javascripts/ui.js

@@ -1588,11 +1588,9 @@
     openSubmenuHandler(event) {
       const trigger = event.currentTarget;
       const submenu = trigger.nextElementSibling;
-      if (document.activeElement && document.activeElement.hasAttribute("role") && document.activeElement.getAttribute("role") === "menuitem") {
-        document.activeElement.blur();
-      }
       clearAllTabindexes(this.element);
       trigger.setAttribute("tabindex", "0");
+      trigger.focus();
       this.lastHoveredItem = trigger;
       if (this.closeSubmenuTimeouts.has(trigger)) {
         clearTimeout(this.closeSubmenuTimeouts.get(trigger));
@@ -1625,11 +1623,9 @@
     }
     trackHoveredItem(event) {
       const item = event.currentTarget;
-      if (document.activeElement && document.activeElement.hasAttribute("role") && document.activeElement.getAttribute("role") === "menuitem") {
-        document.activeElement.blur();
-      }
       clearAllTabindexes(this.element);
       item.setAttribute("tabindex", "0");
+      item.focus();
       this.lastHoveredItem = item;
     }
     toggleCheckbox(event) {
@@ -2661,6 +2657,7 @@
         content.dataset.state = state;
         if (isOpen) {
           content.removeAttribute("hidden");
+          void content.offsetHeight;
           content.style.height = `${content.scrollHeight}px`;
         } else {
           if (animate) {

data/app/behaviors/ui/command_dialog_behavior.rb

@@ -1,20 +1,13 @@
 # frozen_string_literal: true
 
-
 # UI::CommandDialogBehavior
 
-#
-
 # @ui_component Command Dialog
 
 # @ui_category other
 
-#
-
 # @ui_anatomy Command Dialog - Root container with state management (required)
 
-#
-
 # @ui_feature Keyboard navigation
 
 # @ui_feature Custom styling with Tailwind classes
@@ -23,7 +16,6 @@
 
 # @ui_feature Animation support
 
-#
 module UI::CommandDialogBehavior
   def command_dialog_base_classes
     ""

data/app/behaviors/ui/empty_behavior.rb

@@ -18,7 +18,7 @@ module UI::EmptyBehavior
   def empty_html_attributes
     {
       class: empty_classes,
-      data: { slot: "empty" }
+      data: {slot: "empty"}
     }
   end
 
@@ -36,7 +36,7 @@ module UI::EmptyHeaderBehavior
   def empty_header_html_attributes
     {
       class: empty_header_classes,
-      data: { slot: "empty-header" }
+      data: {slot: "empty-header"}
     }
   end
 
@@ -54,7 +54,7 @@ module UI::EmptyMediaBehavior
   def empty_media_html_attributes
     {
       class: empty_media_classes,
-      data: { slot: "empty-media" }
+      data: {slot: "empty-media"}
     }
   end
 
@@ -86,7 +86,7 @@ module UI::EmptyTitleBehavior
   def empty_title_html_attributes
     {
       class: empty_title_classes,
-      data: { slot: "empty-title" }
+      data: {slot: "empty-title"}
     }
   end
 
@@ -104,7 +104,7 @@ module UI::EmptyDescriptionBehavior
   def empty_description_html_attributes
     {
       class: empty_description_classes,
-      data: { slot: "empty-description" }
+      data: {slot: "empty-description"}
     }
   end
 
@@ -122,7 +122,7 @@ module UI::EmptyContentBehavior
   def empty_content_html_attributes
     {
       class: empty_content_classes,
-      data: { slot: "empty-content" }
+      data: {slot: "empty-content"}
     }
   end
 

data/app/behaviors/ui/input_behavior.rb

@@ -27,7 +27,7 @@ module UI::InputBehavior
       name: @name,
       id: @id,
       readonly: @readonly,
-      data: { slot: "input" }
+      data: {slot: "input"}
     }.compact
   end
 

data/app/behaviors/ui/input_group_behavior.rb

@@ -32,8 +32,9 @@ module UI::InputGroupBehavior
   private
 
   # Base classes - exact match from shadcn/ui
+  # Uses CSS variable --radius for customizable border radius (defaults to 0.375rem / rounded-md)
   def input_group_base_classes
-    "group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none"
+    "group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-[var(--radius,0.375rem)] border shadow-xs transition-[color,box-shadow] outline-none"
   end
 
   # Height classes
@@ -52,6 +53,7 @@ module UI::InputGroupBehavior
   end
 
   # Focus state classes
+  # Uses box-shadow for focus ring which automatically follows border-radius
   def input_group_focus_classes
     "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]"
   end

data/app/behaviors/ui/input_group_button_behavior.rb

@@ -25,7 +25,7 @@ module UI::InputGroupButtonBehavior
       variant: @variant,
       classes: input_group_button_classes,
       "data-size": @size
-    }.merge(attributes_value).compact
+    }.deep_merge(attributes_value).compact
   end
 
   # Returns combined CSS classes for the button
@@ -72,18 +72,19 @@ module UI::InputGroupButtonBehavior
   end
 
   # Size-specific classes
+  # Uses calc(var(--radius, 0.375rem) - 5px) to create slightly smaller rounded corners for nested buttons
   def input_group_button_size_classes
     case @size.to_s
     when "xs"
-      "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2"
+      "h-6 gap-1 px-2 rounded-[calc(var(--radius,0.375rem)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2"
     when "sm"
-      "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5"
+      "h-8 px-2.5 gap-1.5 rounded-[calc(var(--radius,0.375rem)-5px)] has-[>svg]:px-2.5"
     when "icon-xs"
-      "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0"
+      "size-6 rounded-[calc(var(--radius,0.375rem)-5px)] p-0 has-[>svg]:p-0"
     when "icon-sm"
-      "size-8 p-0 has-[>svg]:p-0"
+      "size-8 rounded-[calc(var(--radius,0.375rem)-5px)] p-0 has-[>svg]:p-0"
     else
-      "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2"
+      "h-6 gap-1 px-2 rounded-[calc(var(--radius,0.375rem)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2"
     end
   end
 end

data/app/behaviors/ui/menubar_checkbox_item_behavior.rb

@@ -39,7 +39,7 @@ module UI::MenubarCheckboxItemBehavior
     attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
     (attributes_value&.fetch(:data, {}) || {}).merge({
       "ui--menubar-target": "item",
-      action: "click->ui--menubar#toggleCheckbox mouseenter->ui--menubar#trackHoveredItem",
+      action: "click->ui--menubar#selectItem mouseenter->ui--menubar#trackHoveredItem",
       state: checked? ? "checked" : "unchecked"
     })
   end

data/app/behaviors/ui/menubar_radio_item_behavior.rb

@@ -39,7 +39,7 @@ module UI::MenubarRadioItemBehavior
     attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
     base_data = {
       "ui--menubar-target": "item",
-      action: "click->ui--menubar#selectRadio mouseenter->ui--menubar#trackHoveredItem",
+      action: "click->ui--menubar#selectItem mouseenter->ui--menubar#trackHoveredItem",
       state: checked? ? "checked" : "unchecked"
     }
 

data/app/behaviors/ui/popover_behavior.rb

@@ -25,12 +25,20 @@
 #
 module UI::PopoverBehavior
   # Returns HTML attributes for the popover container element
+  # When used with asChild, only data attributes are returned (no classes)
   def popover_html_attributes
     attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
-    {
-      class: popover_classes,
+    attrs = {
       data: popover_data_attributes
-    }.merge(attributes_value)
+    }
+
+    # Only add container classes if not using asChild
+    # When asChild is true, the child component handles its own styling
+    unless instance_variable_defined?(:@as_child) && @as_child
+      attrs[:class] = popover_classes
+    end
+
+    attrs.merge(attributes_value)
   end
 
   # Returns combined CSS classes for the popover

data/app/behaviors/ui/spinner_behavior.rb

@@ -18,7 +18,7 @@ module UI::SpinnerBehavior
       class: spinner_classes,
       role: "status",
       "aria-label": "Loading",
-      data: { slot: "spinner" }
+      data: {slot: "spinner"}
     }
   end
 

data/app/behaviors/ui/switch_behavior.rb

@@ -28,62 +28,62 @@
 # @ui_related toggle
 #
 module UI::SwitchBehavior
-# Returns HTML attributes for the switch button element
-def switch_html_attributes
-  {
-    class: switch_classes,
-    role: "switch",
-    type: "button",
-    tabindex: @disabled ? -1 : 0,
-    "aria-checked": switch_aria_checked,
-    "data-state": switch_state,
-    "data-slot": "switch",
-    data: switch_data_attributes
-  }.tap do |attrs|
-    if @disabled
-      attrs[:disabled] = true
-      attrs["aria-disabled"] = "true"
+  # Returns HTML attributes for the switch button element
+  def switch_html_attributes
+    {
+      class: switch_classes,
+      role: "switch",
+      type: "button",
+      tabindex: @disabled ? -1 : 0,
+      "aria-checked": switch_aria_checked,
+      "data-state": switch_state,
+      "data-slot": "switch",
+      data: switch_data_attributes
+    }.tap do |attrs|
+      if @disabled
+        attrs[:disabled] = true
+        attrs["aria-disabled"] = "true"
+      end
     end
   end
-end
 
-# Returns combined CSS classes for the switch
-def switch_classes
-  classes_value = respond_to?(:classes, true) ? classes : @classes
-  TailwindMerge::Merger.new.merge([
-    switch_base_classes,
-    classes_value
-  ].compact.join(" "))
-end
+  # Returns combined CSS classes for the switch
+  def switch_classes
+    classes_value = respond_to?(:classes, true) ? classes : @classes
+    TailwindMerge::Merger.new.merge([
+      switch_base_classes,
+      classes_value
+    ].compact.join(" "))
+  end
 
-# Returns CSS classes for the thumb element
-def switch_thumb_classes
-  "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
-end
+  # Returns CSS classes for the thumb element
+  def switch_thumb_classes
+    "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+  end
 
-private
+  private
 
-# Base classes applied to all switches
-def switch_base_classes
-  "peer data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50"
-end
+  # Base classes applied to all switches
+  def switch_base_classes
+    "peer data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50"
+  end
 
-# Returns the switch state (checked or unchecked)
-def switch_state
-  @checked ? "checked" : "unchecked"
-end
+  # Returns the switch state (checked or unchecked)
+  def switch_state
+    @checked ? "checked" : "unchecked"
+  end
 
-# Returns aria-checked attribute value
-def switch_aria_checked
-  @checked.to_s
-end
+  # Returns aria-checked attribute value
+  def switch_aria_checked
+    @checked.to_s
+  end
 
-# Returns data attributes for Stimulus controller
-def switch_data_attributes
-  {
-    controller: "ui--switch",
-    ui__switch_checked_value: @checked,
-    action: "click->ui--switch#toggle keydown->ui--switch#handleKeydown"
-  }
-end
+  # Returns data attributes for Stimulus controller
+  def switch_data_attributes
+    {
+      controller: "ui--switch",
+      ui__switch_checked_value: @checked,
+      action: "click->ui--switch#toggle keydown->ui--switch#handleKeydown"
+    }
+  end
 end

data/app/behaviors/ui/toggle_group_behavior.rb

@@ -11,11 +11,11 @@ module UI::ToggleGroupBehavior
   def toggle_group_html_attributes
     attrs = {
       class: toggle_group_classes,
-      role: @type == "single" ? "radiogroup" : "group",
+      role: (@type == "single") ? "radiogroup" : "group",
       data: {
         controller: "ui--toggle-group",
         "ui--toggle-group-type-value": @type || "single",
-        "ui--toggle-group-value-value": @value&.to_json || (@type == "multiple" ? "[]" : "null")
+        "ui--toggle-group-value-value": @value&.to_json || ((@type == "multiple") ? "[]" : "null")
       }
     }
 

data/app/behaviors/ui/toggle_group_item_behavior.rb

@@ -12,10 +12,14 @@ module UI::ToggleGroupItemBehavior
     attrs = {
       class: toggle_group_item_classes,
       type: "button",
-      role: @group_type == "single" ? "radio" : "button",
+      role: (@group_type == "single") ? "radio" : "button",
       disabled: @disabled ? true : nil,
-      "aria-pressed": @group_type == "multiple" ? (@pressed ? "true" : "false") : nil,
-      "aria-checked": @group_type == "single" ? (@pressed ? "true" : "false") : nil,
+      "aria-pressed": if @group_type == "multiple"
+                        @pressed ? "true" : "false"
+                      end,
+      "aria-checked": if @group_type == "single"
+                        @pressed ? "true" : "false"
+                      end,
       data: {
         "ui--toggle-group-target": "item",
         action: "click->ui--toggle-group#toggle",

data/app/behaviors/ui/tooltip_behavior.rb

@@ -22,10 +22,20 @@ require "tailwind_merge"
 #
 module UI::TooltipBehavior
   # Returns HTML attributes for the tooltip root element
+  # When as_child is true, don't include the "contents" class since
+  # the parent element will handle its own styling
   def tooltip_html_attributes
-    {
+    attrs = {
       data: tooltip_data_attributes
-    }.compact
+    }
+
+    # Only add "contents" class when not using asChild
+    # asChild mode passes data attributes to parent, which handles its own styling
+    unless instance_variable_defined?(:@as_child) && @as_child
+      attrs[:class] = "contents"
+    end
+
+    attrs.compact
   end
 
   # Returns data attributes for the tooltip controller

data/app/components/ui/base.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module UI
+  class Base < Phlex::HTML
+    # Register lucide_icon as an output helper (returns HTML)
+    register_output_helper :lucide_icon
+  end
+end

data/app/components/ui/calendar.rb

@@ -138,6 +138,14 @@ class UI::Calendar < Phlex::HTML
   end
 
   def render_dropdowns
+    if use_native_select?
+      render_native_dropdowns
+    else
+      render_ui_select_dropdowns
+    end
+  end
+
+  def render_native_dropdowns
     div(class: "flex items-center gap-1") do
       select(
         data: {ui__calendar_target: "monthSelect", action: "change->ui--calendar#goToMonth"},
@@ -160,6 +168,49 @@ class UI::Calendar < Phlex::HTML
     end
   end
 
+  def render_ui_select_dropdowns
+    div(class: "flex items-center gap-1 px-8 flex-1") do
+      # Month select
+      render UI::Select.new(classes: "flex-1", value: (@month.month - 1).to_s) do
+        render UI::SelectTrigger.new(classes: "h-9 w-full gap-1 px-2 text-sm font-medium border-0 shadow-none")
+        render UI::SelectContent.new(classes: "min-w-[8rem]") do
+          Date::MONTHNAMES.compact.each_with_index do |name, i|
+            render UI::SelectItem.new(value: i.to_s) { name }
+          end
+        end
+        input(
+          type: "hidden",
+          value: (@month.month - 1).to_s,
+          data: {
+            ui__select_target: "hiddenInput",
+            ui__calendar_target: "monthSelect",
+            action: "change->ui--calendar#goToMonth"
+          }
+        )
+      end
+
+      # Year select
+      render UI::Select.new(value: @month.year.to_s) do
+        render UI::SelectTrigger.new(classes: "min-w-[75px] h-9 w-auto gap-1 px-2 text-sm font-medium border-0 shadow-none")
+        render UI::SelectContent.new(classes: "min-w-[5rem] max-h-[200px]") do
+          current_year = Date.today.year
+          ((current_year - @year_range)..(current_year + 10)).each do |y|
+            render UI::SelectItem.new(value: y.to_s) { y.to_s }
+          end
+        end
+        input(
+          type: "hidden",
+          value: @month.year.to_s,
+          data: {
+            ui__select_target: "hiddenInput",
+            ui__calendar_target: "yearSelect",
+            action: "change->ui--calendar#goToYear"
+          }
+        )
+      end
+    end
+  end
+
   def render_table
     table(class: "w-full border-collapse space-y-1", role: "grid") do
       thead { render_weekdays }

data/app/components/ui/carousel_next.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class UI::CarouselNext < Phlex::HTML
+class UI::CarouselNext < UI::Base
   def initialize(classes: nil, **attributes)
     @classes = classes
     @attributes = attributes
@@ -10,7 +10,7 @@ class UI::CarouselNext < Phlex::HTML
     extend UI::CarouselNextBehavior
 
     render UI::Button.new(**carousel_next_html_attributes, classes: carousel_next_classes, variant: :outline, size: :icon) do
-      raw(safe(helpers.lucide_icon("arrow-right", class: "size-4")))
+      lucide_icon("arrow-right", class: "size-4")
       span(class: "sr-only") { "Next slide" }
     end
   end

data/app/components/ui/carousel_previous.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class UI::CarouselPrevious < Phlex::HTML
+class UI::CarouselPrevious < UI::Base
   def initialize(classes: nil, **attributes)
     @classes = classes
     @attributes = attributes
@@ -10,7 +10,7 @@ class UI::CarouselPrevious < Phlex::HTML
     extend UI::CarouselPreviousBehavior
 
     render UI::Button.new(**carousel_previous_html_attributes, classes: carousel_previous_classes, variant: :outline, size: :icon) do
-      raw(safe(helpers.lucide_icon("arrow-left", class: "size-4")))
+      lucide_icon("arrow-left", class: "size-4")
       span(class: "sr-only") { "Previous slide" }
     end
   end

data/app/components/ui/date_picker.rb

@@ -116,7 +116,7 @@ class UI::DatePicker < Phlex::HTML
 
   # Render the trigger button
   def trigger(placeholder: @placeholder, selected: @selected, icon: :chevron, classes: "", **attributes, &block)
-    render Trigger.new(
+    render UI::DatePickerTrigger.new(
       placeholder: placeholder,
       selected: selected,
       icon: icon,

data/app/components/ui/date_picker_trigger.rb

@@ -7,7 +7,7 @@
 #   render UI::Trigger.new(placeholder: "Pick a date")
 #
 class UI::DatePickerTrigger < Phlex::HTML
-  include DatePickerTriggerBehavior
+  include UI::DatePickerTriggerBehavior
 
   # @param placeholder [String] Placeholder text when no date selected
   # @param selected [Date, Range, Array] Currently selected date(s) for display

data/app/components/ui/dropdown_menu_trigger.rb

@@ -31,8 +31,9 @@ class UI::DropdownMenuTrigger < Phlex::HTML
     trigger_attrs = dropdown_menu_trigger_html_attributes.deep_merge(@attributes)
 
     if @as_child
-      # Yield attributes to block - child receives trigger behavior
-      yield(trigger_attrs) if block_given?
+      # When as_child is true, only pass functional attributes (data, aria, tabindex, role)
+      # The child component handles its own styling (following shadcn pattern)
+      yield(trigger_attrs.except(:class)) if block_given?
     else
       # Default: render wrapper div with trigger behavior
       div(**trigger_attrs) do

data/app/components/ui/input_group_button.rb

@@ -28,11 +28,18 @@ class UI::InputGroupButton < Phlex::HTML
   end
 
   def view_template(&block)
+    # Merge classes from @attributes[:class] with input_group_button_classes
+    # This is needed when as_child patterns pass classes through attributes
+    merged_classes = TailwindMerge::Merger.new.merge([
+      input_group_button_classes,
+      @attributes[:class]
+    ].compact.join(" "))
+
     # Use input_group_button_classes which includes button behavior + input group styling
     button(
       type: @type,
-      class: input_group_button_classes,
-      **@attributes.except(:type, :variant, :size)
+      class: merged_classes,
+      **@attributes.except(:type, :variant, :size, :class)
     ) do
       yield if block_given?
     end

data/app/components/ui/navigation_menu_content.rb

@@ -14,7 +14,7 @@
 #     end
 #   end
 class UI::NavigationMenuContent < Phlex::HTML
-  include UI::ContentBehavior
+  include UI::NavigationMenuContentBehavior
 
   # @param viewport [Boolean] Whether content should be rendered in viewport (inherited from parent)
   # @param classes [String] Additional CSS classes to merge

data/app/components/ui/navigation_menu_item.rb

@@ -17,7 +17,7 @@
 #     render UI::Link.new(href: "/about") { "About" }
 #   end
 class UI::NavigationMenuItem < Phlex::HTML
-  include UI::ItemBehavior
+  include UI::NavigationMenuItemBehavior
 
   # @param value [String] Optional value for controlled state
   # @param classes [String] Additional CSS classes to merge

data/app/components/ui/navigation_menu_link.rb

@@ -20,7 +20,7 @@
 #     link_to "About", about_path, **link_attrs
 #   end
 class UI::NavigationMenuLink < Phlex::HTML
-  include UI::LinkBehavior
+  include UI::NavigationMenuLinkBehavior
   include UI::SharedAsChildBehavior
 
   # @param href [String] URL for the link (ignored when as_child: true)