fernandes-ui 0.1.0 → 0.1.2

data/app/behaviors/ui/select_trigger_behavior.rb

@@ -5,36 +5,36 @@
 # 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 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
+  # 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
+  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
+  # 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

@@ -1,58 +1,62 @@
 # 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
-          }
-        }
+# UI::SeparatorBehavior
+#
+# @ui_component Separator
+# @ui_description Separator - Phlex implementation
+# @ui_category layout
+#
+# @ui_anatomy Separator - Visually or semantically separates content. (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+# @ui_feature ARIA attributes for accessibility
+#
+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
+    # Only add ARIA attributes when separator is not decorative
+    unless @decorative
+      attrs[:role] = "separator"
+      attrs[:"aria-orientation"] = @orientation.to_s
+    end
 
-        attrs
-      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
+  # 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
+  private
 
-      # Base classes applied to all separators
-      # Matches shadcn/ui v4 exactly
-      def separator_base_classes
-        "shrink-0 bg-border"
-      end
+  # 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
+  # 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

@@ -2,70 +2,70 @@
 
 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)
+# 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
+    # 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
 
-        # 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
+    # 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
 
-        merged
-      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

@@ -2,45 +2,66 @@
 
 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
+# UI::SheetBehavior
+#
+# @ui_component Sheet
+# @ui_category overlay
+#
+# @ui_anatomy Sheet - Root container with state management (required)
+# @ui_anatomy Close - Button to close/dismiss the component
+# @ui_anatomy Content - Main content container (required)
+# @ui_anatomy Description - Descriptive text element
+# @ui_anatomy Footer - Footer section with actions
+# @ui_anatomy Header - Header section with title and controls
+# @ui_anatomy Overlay - Background overlay that dims the page
+# @ui_anatomy Title - Title text element
+# @ui_anatomy Trigger - Button or element that activates the component (required)
+#
+# @ui_feature Custom styling with Tailwind classes
+#
+# @ui_aria_pattern Dialog (Modal)
+# @ui_aria_reference https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
+#
+# @ui_related dialog
+# @ui_related drawer
+#
+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

@@ -2,91 +2,91 @@
 
 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
+# 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
+  # 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"
+  # 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
+    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
+  # 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
+  # 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
+  # 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
+  # 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
+  # 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

@@ -2,26 +2,26 @@
 
 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
+# 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
+  # 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
+  # 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