fernandes-ui 0.1.0

data/app/behaviors/ui/select_group_behavior.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+# UI::SelectGroupBehavior
+#
+# Shared behavior for Select options group across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation and styling.
+module UI::SelectGroupBehavior
+    # Returns HTML attributes for the select group element
+    def select_group_html_attributes
+      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+      {
+        class: select_group_classes,
+        role: "group",
+        data: {
+          slot: "select-group" # ADDED: data-slot attribute
+        }
+      }.merge(attributes_value || {})
+    end
+
+    # Returns combined CSS classes
+    def select_group_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      TailwindMerge::Merger.new.merge([
+        select_group_base_classes,
+        classes_value
+      ].compact.join(" "))
+    end
+
+    private
+
+    # Base classes for select group
+    def select_group_base_classes
+      "w-full"
+    end
+  end

data/app/behaviors/ui/select_item_behavior.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+# UI::SelectItemBehavior
+#
+# Shared behavior for Individual select option across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation and styling.
+module UI::SelectItemBehavior
+    # Returns HTML attributes for the select item element
+    def select_item_html_attributes
+      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+      attrs = {
+        class: select_item_classes,
+        role: "option",
+        "aria-selected": "false",
+        data: {
+          ui__select_target: "item",
+          action: "click->ui--select#selectItem mouseenter->ui--select#handleItemMouseEnter mouseleave->ui--select#handleItemMouseLeave",
+          value: @value,
+          slot: "select-item" # ADDED: data-slot attribute
+        }
+      }
+
+      # Add disabled state if specified
+      if @disabled
+        attrs[:data][:disabled] = "true"
+        attrs[:"aria-disabled"] = "true"
+        attrs[:data][:state] = "disabled"
+      end
+
+      attrs.merge(attributes_value || {})
+    end
+
+    # Returns combined CSS classes
+    def select_item_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      TailwindMerge::Merger.new.merge([
+        select_item_base_classes,
+        classes_value
+      ].compact.join(" "))
+    end
+
+    private
+
+    # Base classes for select item
+    def select_item_base_classes
+      "relative flex w-full cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50"
+    end
+  end

data/app/behaviors/ui/select_label_behavior.rb

@@ -0,0 +1,34 @@
+# frozen_string_literal: true
+
+# UI::SelectLabelBehavior
+#
+# Shared behavior for Select group label across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation and styling.
+module UI::SelectLabelBehavior
+    # Returns HTML attributes for the select label element
+    def select_label_html_attributes
+      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+      {
+        class: select_label_classes,
+        data: {
+          slot: "select-label" # ADDED: data-slot attribute
+        }
+      }.merge(attributes_value || {})
+    end
+
+    # Returns combined CSS classes
+    def select_label_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      TailwindMerge::Merger.new.merge([
+        select_label_base_classes,
+        classes_value
+      ].compact.join(" "))
+    end
+
+    private
+
+    # Base classes for select label
+    def select_label_base_classes
+      "px-2 py-1.5 text-xs text-muted-foreground"
+    end
+  end

data/app/behaviors/ui/select_scroll_down_button_behavior.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+# UI::SelectScrollDownButtonBehavior
+#
+# Shared behavior for Select scroll down button across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation and styling.
+module UI::SelectScrollDownButtonBehavior
+    # Returns HTML attributes for the select scroll down button element
+    def select_scroll_down_button_html_attributes
+      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+      {
+        class: select_scroll_down_button_classes,
+        "aria-hidden": "true",
+        # FIXED: Removed display: flex - visibility controlled by JavaScript/aria-hidden
+        # ADDED: flex-shrink: 0 as per shadcn implementation
+        style: "flex-shrink: 0;",
+        data: select_scroll_down_button_data_attributes
+      }.merge(attributes_value || {})
+    end
+
+    # Returns data attributes for Stimulus
+    def select_scroll_down_button_data_attributes
+      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+      base_data = {
+        ui__select_target: "scrollDownButton",
+        action: "mouseenter->ui--select#scrollDown mouseleave->ui--select#stopScroll",
+        slot: "select-scroll-down-button" # ADDED: data-slot attribute
+      }
+
+      (attributes_value&.fetch(:data, {}) || {}).merge(base_data)
+    end
+
+    # Returns combined CSS classes
+    def select_scroll_down_button_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      TailwindMerge::Merger.new.merge([
+        select_scroll_down_button_base_classes,
+        classes_value
+      ].compact.join(" "))
+    end
+
+    private
+
+    # Base classes for select scroll down button
+    # FIXED: Removed absolute positioning (absolute bottom-0 left-0 right-0 z-10)
+    # FIXED: Removed hover:bg-accent bg-popover (not in shadcn)
+    # Now matches shadcn structure: simple flex layout
+    def select_scroll_down_button_base_classes
+      "flex cursor-default items-center justify-center py-1"
+    end
+  end

data/app/behaviors/ui/select_scroll_up_button_behavior.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+# UI::SelectScrollUpButtonBehavior
+#
+# Shared behavior for Select scroll up button across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation and styling.
+module UI::SelectScrollUpButtonBehavior
+    # Returns HTML attributes for the select scroll up button element
+    def select_scroll_up_button_html_attributes
+      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+      {
+        class: select_scroll_up_button_classes,
+        "aria-hidden": "true",
+        # FIXED: Removed display: none - visibility controlled by JavaScript/aria-hidden
+        # ADDED: flex-shrink: 0 as per shadcn implementation
+        style: "flex-shrink: 0;",
+        data: select_scroll_up_button_data_attributes
+      }.merge(attributes_value || {})
+    end
+
+    # Returns data attributes for Stimulus
+    def select_scroll_up_button_data_attributes
+      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+      base_data = {
+        ui__select_target: "scrollUpButton",
+        action: "mouseenter->ui--select#scrollUp mouseleave->ui--select#stopScroll",
+        slot: "select-scroll-up-button" # ADDED: data-slot attribute
+      }
+
+      (attributes_value&.fetch(:data, {}) || {}).merge(base_data)
+    end
+
+    # Returns combined CSS classes
+    def select_scroll_up_button_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      TailwindMerge::Merger.new.merge([
+        select_scroll_up_button_base_classes,
+        classes_value
+      ].compact.join(" "))
+    end
+
+    private
+
+    # Base classes for select scroll up button
+    # FIXED: Removed absolute positioning (absolute top-0 left-0 right-0 z-10)
+    # FIXED: Removed hover:bg-accent bg-popover (not in shadcn)
+    # Now matches shadcn structure: simple flex layout
+    def select_scroll_up_button_base_classes
+      "flex cursor-default items-center justify-center py-1"
+    end
+  end

data/app/behaviors/ui/select_trigger_behavior.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+# UI::SelectTriggerBehavior
+#
+# Shared behavior for Select trigger button across ERB, ViewComponent, and Phlex implementations.
+# This module provides consistent HTML attribute generation and styling.
+module UI::SelectTriggerBehavior
+    # Returns HTML attributes for the select trigger element
+    def select_trigger_html_attributes
+      attributes_value = respond_to?(:attributes, true) ? attributes : @attributes
+      {
+        type: "button",
+        role: "combobox",
+        "aria-expanded": "false",
+        "aria-haspopup": "listbox",
+        class: select_trigger_classes,
+        data: {
+          ui__select_target: "trigger",
+          action: "click->ui--select#toggle",
+          slot: "select-trigger"
+        }
+      }.merge(attributes_value || {})
+    end
+
+    # Returns combined CSS classes
+    def select_trigger_classes
+      classes_value = respond_to?(:classes, true) ? classes : @classes
+      TailwindMerge::Merger.new.merge([
+        select_trigger_base_classes,
+        classes_value
+      ].compact.join(" "))
+    end
+
+    private
+
+    # Base classes for select trigger
+    def select_trigger_base_classes
+      "inline-flex h-9 w-full items-center justify-between gap-2 whitespace-nowrap rounded-lg border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background transition-[color,box-shadow] outline-none focus:ring-1 focus:ring-ring focus-visible:ring-[3px] focus-visible:border-ring focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 appearance-none bg-[url('data:image/svg+xml;charset=UTF-8,%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20width%3d%2224%22%20height%3d%2224%22%20viewBox%3d%220%200%2024%2024%22%20fill%3d%22none%22%20stroke%3d%22currentColor%22%20stroke-width%3d%222%22%20stroke-linecap%3d%22round%22%20stroke-linejoin%3d%22round%22%3e%3cpath%20d%3d%22m6%209%206%206%206-6%22%2f%3e%3c%2fsvg%3e')] bg-[length:1rem] bg-[right_0.75rem_center] bg-no-repeat pr-10 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 data-[placeholder]:text-muted-foreground aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:border-input dark:hover:bg-input/50"
+    end
+  end

data/app/behaviors/ui/separator_behavior.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+    # SeparatorBehavior
+    #
+    # Shared behavior for Separator component across ERB, ViewComponent, and Phlex implementations.
+    # This module provides consistent styling and HTML attribute generation.
+    #
+    # Based on shadcn/ui Separator: https://ui.shadcn.com/docs/components/separator
+    # Based on Radix UI Separator: https://www.radix-ui.com/primitives/docs/components/separator
+    module UI::SeparatorBehavior
+      # Returns HTML attributes for the separator element
+      def separator_html_attributes
+        attrs = {
+          class: separator_classes,
+          data: {
+            slot: "separator",
+            orientation: @orientation
+          }
+        }
+
+        # Only add ARIA attributes when separator is not decorative
+        unless @decorative
+          attrs[:role] = "separator"
+          attrs[:"aria-orientation"] = @orientation.to_s
+        end
+
+        attrs
+      end
+
+      # Returns combined CSS classes for the separator
+      def separator_classes
+        classes_value = respond_to?(:classes, true) ? classes : @classes
+        TailwindMerge::Merger.new.merge([
+          separator_base_classes,
+          separator_orientation_classes,
+          classes_value
+        ].compact.join(" "))
+      end
+
+      private
+
+      # Base classes applied to all separators
+      # Matches shadcn/ui v4 exactly
+      def separator_base_classes
+        "shrink-0 bg-border"
+      end
+
+      # Orientation-specific classes based on @orientation
+      # Matches shadcn/ui v4 exactly
+      def separator_orientation_classes
+        case @orientation.to_s
+        when "vertical"
+          "h-full w-px"
+        else # horizontal (default)
+          "h-px w-full"
+        end
+      end
+    end

data/app/behaviors/ui/shared_as_child_behavior.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # AsChildBehavior provides the `asChild` composition pattern
+    # Inspired by Radix UI's Slot component
+    #
+    # When `as_child: true`, components don't render their own wrapper element.
+    # Instead, they yield attributes to the block, allowing the child to receive them.
+    #
+    # Example:
+    #   render UI::DialogTrigger.new(as_child: true) do |attrs|
+    #     render UI::Button.new(**attrs, variant: :outline) do
+    #       "Open"
+    #     end
+    #   end
+    module UI::SharedAsChildBehavior
+      # Merges parent component attributes with child component attributes
+      #
+      # Uses Rails' deep_merge for nested hashes (like data attributes)
+      # Uses TailwindMerge for CSS classes to resolve conflicts
+      # Concatenates Stimulus actions so both handlers execute
+      #
+      # @param parent_attrs [Hash] Attributes from parent component
+      # @param child_attrs [Hash] Attributes from child element
+      # @return [Hash] Merged attributes hash
+      #
+      # @example Basic merge
+      #   merge_attributes(
+      #     { class: "p-4", data: { controller: "dialog" } },
+      #     { class: "p-2", data: { testid: "button" } }
+      #   )
+      #   # => { class: "p-2", data: { controller: "dialog", testid: "button" } }
+      #
+      # @example Stimulus actions concatenation
+      #   merge_attributes(
+      #     { data: { action: "click->dialog#open" } },
+      #     { data: { action: "click->analytics#track" } }
+      #   )
+      #   # => { data: { action: "click->dialog#open click->analytics#track" } }
+      def merge_attributes(parent_attrs, child_attrs)
+        # Use Rails' deep_merge for automatic nested hash merging
+        merged = parent_attrs.deep_merge(child_attrs)
+
+        # CSS Classes: Use TailwindMerge to resolve conflicts intelligently
+        # Example: "p-4 text-sm" + "p-2 text-lg" => "p-2 text-lg"
+        # (later values override earlier conflicting values)
+        if parent_attrs[:class] && child_attrs[:class]
+          merged[:class] = TailwindMerge::Merger.new.merge(
+            [parent_attrs[:class], child_attrs[:class]].join(" ")
+          )
+        end
+
+        # Stimulus Actions: Concatenate so both handlers execute
+        # This is critical for composition - both parent and child actions should run
+        if parent_attrs.dig(:data, :action) && child_attrs.dig(:data, :action)
+          merged[:data][:action] = [
+            parent_attrs.dig(:data, :action),
+            child_attrs.dig(:data, :action)
+          ].join(" ")
+        end
+
+        # Styles: Concatenate with semicolon (if both exist)
+        # Example: "padding: 8px" + "background: blue" => "padding: 8px; background: blue"
+        if parent_attrs[:style] && child_attrs[:style]
+          merged[:style] = "#{parent_attrs[:style]}; #{child_attrs[:style]}"
+        end
+
+        merged
+      end
+    end

data/app/behaviors/ui/sheet_behavior.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for Sheet component
+    # Reuses ui--dialog Stimulus controller since Sheet extends Dialog
+    module UI::SheetBehavior
+      # Generate data attributes for Stimulus controller
+      def sheet_data_attributes
+        attrs = {
+          controller: "ui--dialog",
+          ui__dialog_open_value: @open.to_s
+        }
+
+        # Only add optional values if they are explicitly set (not nil)
+        attrs[:ui__dialog_close_on_escape_value] = @close_on_escape.to_s unless @close_on_escape.nil?
+        attrs[:ui__dialog_close_on_overlay_click_value] = @close_on_overlay_click.to_s unless @close_on_overlay_click.nil?
+
+        attrs
+      end
+
+      # Merge user-provided data attributes
+      def merged_sheet_data_attributes
+        user_data = @attributes&.fetch(:data, {}) || {}
+        user_data.merge(sheet_data_attributes)
+      end
+
+      # Build complete HTML attributes hash
+      def sheet_html_attributes
+        base_attrs = @attributes&.except(:data) || {}
+        base_attrs.merge(
+          class: sheet_classes,
+          data: merged_sheet_data_attributes
+        )
+      end
+
+      # Base CSS classes
+      def sheet_base_classes
+        ""
+      end
+
+      # Generate final classes using TailwindMerge
+      def sheet_classes
+        TailwindMerge::Merger.new.merge([sheet_base_classes, @classes].compact.join(" "))
+      end
+    end

data/app/behaviors/ui/sheet_content_behavior.rb

@@ -0,0 +1,92 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for Sheet Content component
+    # Handles side variants and slide animations
+    module UI::SheetContentBehavior
+      SIDES = %w[top right bottom left].freeze
+
+      # Base CSS classes for sheet content (all sides)
+      # Match shadcn exactly - slide animations with proper pointer-events
+      def sheet_content_base_classes
+        [
+          # Base structure (same as shadcn) - shadow only when open to avoid shadow bleeding when closed
+          "bg-background fixed z-50 flex flex-col gap-4",
+          "data-[state=open]:shadow-lg data-[state=closed]:shadow-none",
+          # Pointer events control - prevent interaction when closed
+          "data-[state=open]:pointer-events-auto data-[state=closed]:pointer-events-none",
+          # Transition timing (same as shadcn)
+          "transition ease-in-out",
+          "data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          # Animation (same as shadcn)
+          "data-[state=open]:animate-in data-[state=closed]:animate-out",
+          # Prevent exit animation on page load (our addition)
+          "data-[initial]:animate-none data-[initial]:invisible"
+        ].join(" ")
+      end
+
+      # Side-specific CSS classes
+      # Include translate classes to keep content off-screen when closed (after animation ends)
+      def sheet_content_side_classes
+        side = @side || "right"
+
+        case side.to_s
+        when "right"
+          "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right data-[state=closed]:translate-x-full data-[state=open]:translate-x-0 inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm"
+        when "left"
+          "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left data-[state=closed]:-translate-x-full data-[state=open]:translate-x-0 inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm"
+        when "top"
+          "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top data-[state=closed]:-translate-y-full data-[state=open]:translate-y-0 inset-x-0 top-0 h-auto border-b"
+        when "bottom"
+          "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom data-[state=closed]:translate-y-full data-[state=open]:translate-y-0 inset-x-0 bottom-0 h-auto border-t"
+        else
+          # Default to right
+          "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right data-[state=closed]:translate-x-full data-[state=open]:translate-x-0 inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm"
+        end
+      end
+
+      # Merge base classes with side classes and custom classes
+      def sheet_content_classes
+        TailwindMerge::Merger.new.merge([
+          sheet_content_base_classes,
+          sheet_content_side_classes,
+          @classes
+        ].compact.join(" "))
+      end
+
+      # Data attributes for Stimulus target
+      def sheet_content_data_attributes
+        {
+          ui__dialog_target: "content"
+        }
+      end
+
+      # Merge user-provided data attributes
+      def merged_sheet_content_data_attributes
+        user_data = @attributes&.fetch(:data, {}) || {}
+        user_data.merge(sheet_content_data_attributes)
+      end
+
+      # Build complete HTML attributes hash for sheet content
+      def sheet_content_html_attributes
+        base_attrs = @attributes&.except(:data) || {}
+        attrs = base_attrs.merge(
+          class: sheet_content_classes,
+          role: "dialog",
+          "aria-modal": "true",
+          "data-state": @open ? "open" : "closed",
+          data: merged_sheet_content_data_attributes
+        )
+        # Add data-initial when closed to prevent exit animations on page load
+        attrs["data-initial"] = "" unless @open
+        # Add inert when closed to prevent focus on elements inside
+        attrs[:inert] = true unless @open
+        attrs
+      end
+
+      # CSS classes for the built-in close button
+      def sheet_content_close_button_classes
+        "ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none"
+      end
+    end

data/app/behaviors/ui/sheet_footer_behavior.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for Sheet Footer component
+    module UI::SheetFooterBehavior
+      # Returns HTML attributes for the sheet footer
+      def sheet_footer_html_attributes
+        {
+          class: sheet_footer_classes
+        }
+      end
+
+      # Returns combined CSS classes for the sheet footer
+      def sheet_footer_classes
+        TailwindMerge::Merger.new.merge([
+          sheet_footer_base_classes,
+          @classes
+        ].compact.join(" "))
+      end
+
+      # Base classes applied to sheet footer
+      # Different from Dialog: uses mt-auto and p-4
+      def sheet_footer_base_classes
+        "mt-auto flex flex-col gap-2 p-4"
+      end
+    end

data/app/behaviors/ui/sheet_header_behavior.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for Sheet Header component
+    module UI::SheetHeaderBehavior
+      # Returns HTML attributes for the sheet header
+      def sheet_header_html_attributes
+        {
+          class: sheet_header_classes
+        }
+      end
+
+      # Returns combined CSS classes for the sheet header
+      def sheet_header_classes
+        TailwindMerge::Merger.new.merge([
+          sheet_header_base_classes,
+          @classes
+        ].compact.join(" "))
+      end
+
+      # Base classes applied to sheet header
+      # Different from Dialog: uses gap-1.5 and p-4
+      def sheet_header_base_classes
+        "flex flex-col gap-1.5 p-4"
+      end
+    end

data/app/behaviors/ui/sheet_overlay_behavior.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+require "tailwind_merge"
+
+    # Shared behavior for Sheet Overlay component
+    # Handles backdrop/overlay styling and attributes
+    module UI::SheetOverlayBehavior
+      # Base CSS classes for overlay backdrop
+      # data-[initial] prevents exit animation on page load
+      def sheet_overlay_base_classes
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:opacity-0 data-[state=open]:opacity-100 data-[state=open]:pointer-events-auto data-[state=closed]:pointer-events-none data-[initial]:animate-none data-[initial]:opacity-0 fixed inset-0 z-50 bg-black/50"
+      end
+
+      # Merge base classes with custom classes using TailwindMerge
+      def sheet_overlay_classes
+        TailwindMerge::Merger.new.merge([sheet_overlay_base_classes].compact.join(" "))
+      end
+
+      # Container wrapper classes
+      # Use data-[initial]:invisible to hide on page load without animations
+      # After first open, data-initial is removed and animations work normally
+      def sheet_overlay_container_base_classes
+        "data-[initial]:invisible data-[state=closed]:pointer-events-none data-[state=open]:pointer-events-auto fixed inset-0 z-50"
+      end
+
+      # Merge container base classes with custom classes
+      def sheet_overlay_container_classes
+        TailwindMerge::Merger.new.merge([sheet_overlay_container_base_classes, @classes].compact.join(" "))
+      end
+
+      # Data attributes for container
+      def sheet_overlay_container_data_attributes
+        {
+          ui__dialog_target: "container"
+        }
+      end
+
+      # Data attributes for overlay backdrop
+      def sheet_overlay_data_attributes
+        {
+          ui__dialog_target: "overlay",
+          action: "click->ui--dialog#closeOnOverlayClick"
+        }
+      end
+
+      # Merge user-provided data attributes for container
+      def merged_sheet_overlay_container_data_attributes
+        user_data = @attributes&.fetch(:data, {}) || {}
+        user_data.merge(sheet_overlay_container_data_attributes)
+      end
+
+      # Build complete HTML attributes hash for container wrapper
+      def sheet_overlay_container_html_attributes
+        base_attrs = @attributes&.except(:data) || {}
+        attrs = base_attrs.merge(
+          class: sheet_overlay_container_classes,
+          "data-state": @open ? "open" : "closed",
+          data: merged_sheet_overlay_container_data_attributes
+        )
+        # Add data-initial when closed to prevent exit animations on page load
+        attrs["data-initial"] = "" unless @open
+        attrs
+      end
+
+      # Build complete HTML attributes hash for overlay backdrop
+      def sheet_overlay_html_attributes
+        attrs = {
+          class: sheet_overlay_classes,
+          "data-state": @open ? "open" : "closed",
+          data: sheet_overlay_data_attributes
+        }
+        # Add data-initial when closed to prevent exit animations on page load
+        attrs["data-initial"] = "" unless @open
+        attrs
+      end
+    end