fox_tail 0.1.1 → 0.2.0

data/app/components/fox_tail/icon_base_component.rb

@@ -3,23 +3,43 @@
 class FoxTail::IconBaseComponent < FoxTail::InlineSvgComponent
   attr_reader :name
 
-  has_option :variant, default: :solid
+  has_option :variant
+  has_option :icon_set
+
+  def variant
+    options[:variant] ||= default_icon_variant
+  end
 
   def initialize(name, html_attributes = {})
     @name = name.to_s.gsub("_", "-")
-    super nil, html_attributes
+    super(nil, html_attributes)
+  end
+
+  def icon_set
+    @icon_set ||= begin
+      name = options.fetch(:icon_set, default_icon_set).to_sym
+      icon_set = icon_sets.fetch name
+      raise FoxTail::InvalidIconSet.new(name) unless icon_set
+
+      icon_set.new name
+    end
   end
 
   def path
-    icon_fullpath
+    @path ||= icon_set.path(name, variant: variant).to_s
   end
 
   private
 
-  def icon_fullpath
-    filename = "#{name.to_s.gsub("_", "-")}.svg"
-    size = variant.to_sym == :mini ? "20" : "24"
-    style = variant.to_sym == :mini ? "solid" : variant.to_s
-    FoxTail.root.join("app/assets/vendor/heroicons", size, style, filename).to_s
+  def icon_sets
+    FoxTail::Base.fox_tail_config.icon_sets
+  end
+
+  def default_icon_set
+    FoxTail::Base.fox_tail_config.default_icon_set
+  end
+
+  def default_icon_variant
+    FoxTail::Base.fox_tail_config.default_icon_variant
   end
 end

data/app/components/fox_tail/icon_component.rb

@@ -7,6 +7,19 @@ class FoxTail::IconComponent < FoxTail::IconBaseComponent
 
   has_option :color, default: :default
   has_option :size, default: :base
+  has_option :shape, default: :none
+
+  def shape?
+    shape != "none"
+  end
+
+  def call
+    if shape?
+      content_tag :div, super, class: theme.apply(:container, self)
+    else
+      super
+    end
+  end
 
   protected
 

data/app/components/fox_tail/icon_component.theme.yml

@@ -1,23 +1,40 @@
 root:
   size:
-    xs: w-4 h-4
-    sm: w-6 h-6
-    base: w-8 h-8
-    lg: w-10 h-10
-    xl: w-20 h-20
+    xs: w-2 h-2
+    sm: w-3 h-3
+    base: w-4 h-4
+    lg: w-6 h-6
+    xl: w-9 h-9
+    xxl: w-14 h-14
   color:
     neutral: &default text-gray-500 dark:text-gray-400
     dark: text-gray-800 dark:text-gray-900
     light: text-gray-300 dark:text-gray-500
-    info: text-blue-800 dark:text-blue-200
-    success: text-green-800 dark:text-green-200
-    warning: text-yellow-800 dark:text-yellow-200
-    error: text-red-800 dark:text-red-200
-    blue: text-blue-500 dark:text-blue-700
-    red: text-red-500 dark:text-red-700
-    yellow: text-yellow-500 dark:text-yellow-700
-    green: text-green-500 dark:text-green-700
-    indigo: text-indigo-500 dark:text-indigo-700
-    purple: text-purple-500 dark:text-purple-700
-    pink: text-pink-500 dark:text-pink-700
+    primary: text-primary-500 dark:text-primary-700
+    info: text-info-800 dark:text-info-200
+    success: text-success-800 dark:text-success-200
+    warning: text-warning-800 dark:text-warning-200
+    danger: text-danger-800 dark:text-danger-200
     default: *default
+container:
+  base: inline-flex justify-center items-center
+  size:
+    xs: w-4 h-4
+    sm: w-6 h-6
+    base: w-8 h-8
+    lg: w-12 h-12
+    xl: w-16 h-16
+    xxl: w-24 h-24
+  shape:
+    circle: rounded-full
+    square: rounded-sm
+  color:
+    neutral: &default bg-gray-100 dark:bg-gray-700
+    dark: bg-gray-900
+    light: bg-white dark:bg-gray-800
+    primary: bg-primary-100 dark:bg-primary-900
+    info: bg-info-100 dark:bg-info-900
+    success: bg-success-100 dark:bg-success-900
+    warning: bg-warning-100 dark:bg-warning-900
+    danger: bg-danger-100 dark:bg-danger-900
+    default: *default

data/app/components/fox_tail/index.ts

@@ -1,4 +1,5 @@
 export { default as AccordionController } from './accordion_controller';
+export { default as AutocompleteController } from './autocomplete_controller';
 export { default as CarouselController } from './carousel_controller';
 export { default as ClickableController } from './clickable_controller';
 export { default as CollapsibleController } from './collapsible_controller';
@@ -9,12 +10,20 @@ export { default as DrawerController } from './drawer_controller';
 export { default as DrawerTriggerController } from './drawer_trigger_controller';
 export { default as DropdownController } from './dropdown_controller';
 export { default as DropdownTriggerController } from './dropdown_trigger_controller';
+export { default as HistoryController } from './history_controller';
 export { default as FABController } from './fab_controller';
+export { default as FormController } from './form_controller';
+export { default as FormInputController } from './form_field_controller';
+export { default as ListenerController } from './listener_controller';
 export { default as ModalController } from './modal_controller';
 export { default as ModalTriggerController } from './modal_trigger_controller';
+export { default as PasswordInputController } from './password_input_controller';
+export { default as PasswordInputTriggerController } from './password_input_trigger_controller';
 export { default as PopoverController } from './popover_controller';
 export { default as PopoverTriggerController } from './popover_trigger_controller';
 export { default as ProgressBarController } from './progress_bar_controller';
+export { default as ProxyEventsController } from './proxy_events_controller';
+export { default as SearchFilteringController } from './search_filtering_controller';
 export { default as TabController } from './tab_controller';
 export { default as TextareaAutoResizeController } from './textarea_auto_resize_controller';
 export { default as TooltipController } from './tooltip_controller';

data/app/components/fox_tail/inline_svg_component.rb

@@ -25,9 +25,10 @@ class FoxTail::InlineSvgComponent < FoxTail::BaseComponent
   def call
     doc = Nokogiri::XML.parse content? ? content : asset_contents
     sanitized_html_attributes.each { |k, v| doc.child[k.to_s] = v }
-    doc.child[:class] = html_class
-    yield doc if block_given?
-    doc.child.to_s.html_safe
+    node = doc.at_css "svg"
+    node[:class] = html_class
+    yield node if block_given?
+    node.to_s.html_safe # rubocop:disable Rails/OutputSafety
   rescue FoxTail::AssetNotFound => e
     raise e if raise_error?
 

data/app/components/fox_tail/input_base_component.rb

@@ -3,21 +3,26 @@
 class FoxTail::InputBaseComponent < FoxTail::BaseComponent
   include FoxTail::Concerns::Formable
   include FoxTail::Concerns::Placeholderable
+  include FoxTail::Concerns::HasStimulusController
 
   has_option :size, default: :base
   has_option :state
+  has_option :controlled, type: :boolean, default: false
 
-  def initialize(*)
+  def before_render
     super
 
+    add_default_name_and_id
     update_state_from_object!
+    html_attributes[:placeholder] = retrieve_placeholder if placeholder?
   end
 
-  def before_render
-    super
+  def use_stimulus?
+    super && controlled?
+  end
 
-    add_default_name_and_id
-    html_attributes[:placeholder] = retrieve_placeholder if placeholder?
+  def stimulus_controller_options
+    {}
   end
 
   protected
@@ -34,11 +39,17 @@ class FoxTail::InputBaseComponent < FoxTail::BaseComponent
     return unless object? && !options.key(:state)
 
     options[:state] = if object_errors?
-                        :invalid
-                      elsif html_attributes[:value].present?
-                        :valid
-                      else
-                        :none
-                      end
+      :invalid
+    else
+      :none
+    end
   end
+
+  class << self
+    def stimulus_controller_name
+      "form-field"
+    end
+  end
+
+  class StimulusController < FoxTail::StimulusController; end
 end

data/app/components/fox_tail/input_base_component.theme.yml

@@ -5,28 +5,28 @@ root:
     placeholder-gray-600 dark:placeholder-gray-400
     bg-gray-50 dark:bg-gray-700
     rounded-lg border border-gray-300 dark:border-gray-600
-    focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-500 dark:focus:border-blue-500
+    focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500
   can_read_only?: read-only:cursor-not-allowed
   can_disable?: >-
     disabled:cursor-not-allowed
-    disabled:bg-neutral-100 dark:disabled:bg-neutral-700
-    disabled:text-neutral-900 dark:disabled:text-neutral-400
-    disabled:border-neutral-300 disabled:dark:border-neutral-600
-    disabled:dark:placeholder-neutral-400
+    disabled:bg-gray-100 dark:disabled:bg-gray-700
+    disabled:text-gray-900 dark:disabled:text-gray-400
+    disabled:border-gray-300 disabled:dark:border-gray-600
+    disabled:dark:placeholder-gray-400
   size:
     sm: p-2 text-sm
     base: p-2.5 text-sm
     lg: p-4 text-md
   state:
     valid: >-
-      bg-green-50 dark:bg-gray-700
-      border-green-500 dark:border-green-500
-      text-green-900 dark:text-green-400 
-      placeholder-green-700 dark:placeholder-green-600 
-      focus:ring-green-500 focus:border-green-500 dark:focus:ring-green-500 dark:focus:border-green-500
+      bg-success-50 dark:bg-gray-700
+      border-success-500 dark:border-success-500
+      text-success-900 dark:text-success-400 
+      placeholder-success-700 dark:placeholder-success-600 
+      focus:ring-success-500 focus:border-success-500 dark:focus:ring-success-500 dark:focus:border-success-500
     invalid: >-
-      bg-red-50 dark:bg-gray-700
-      border-red-500 dark:border-red-500
-      text-red-900 dark:text-red-500
-      placeholder-red-700 dark:placeholder-red-600 
-      focus:ring-red-500 focus:border-red-500 dark:focus:ring-red-500 dark:focus:border-red-500    
+      bg-danger-50 dark:bg-gray-700
+      border-danger-500 dark:border-danger-500
+      text-danger-900 dark:text-danger-500
+      placeholder-danger-700 dark:placeholder-danger-600 
+      focus:ring-danger-500 focus:border-danger-500 dark:focus:ring-danger-500 dark:focus:border-danger-500    

data/app/components/fox_tail/input_component.rb

@@ -28,6 +28,10 @@ class FoxTail::InputComponent < FoxTail::InputBaseComponent
       as: :right_svg,
       renders: lambda { |icon, attributes = {}| render_svg :right, icon, attributes }
     },
+    spinner: {
+      as: :right_spinner,
+      renders: lambda { |attributes = {}| render_spinner :right, attributes }
+    },
     image: {
       as: :right_image,
       renders: lambda { |icon, attributes = {}| render_image :right, icon, attributes }
@@ -85,16 +89,15 @@ class FoxTail::InputComponent < FoxTail::InputBaseComponent
   end
 
   def input_content
-    tag :input, sanitized_html_attributes
+    tag.input(sanitized_html_attributes)
   end
 
   def visual_classes(position, classes)
-    classnames theme.apply(:visual, self, { position: position }), classes
+    classnames theme.apply(:visual, self, {position: position}), classes
   end
 
   def render_icon(position, icon, attributes)
     attributes[:class] = visual_classes position, attributes[:class]
-    attributes[:variant] ||= :mini
     FoxTail::IconBaseComponent.new icon, attributes
   end
 
@@ -103,12 +106,17 @@ class FoxTail::InputComponent < FoxTail::InputBaseComponent
     FoxTail::InlineSvgComponent.new path, attributes
   end
 
+  def render_spinner(position, attributes)
+    attributes[:class] = visual_classes position, attributes[:class]
+    FoxTail::SpinnerComponent.new attributes
+  end
+
   def render_image(position, path, attributes)
     attributes[:class] = visual_classes position, attributes[:class]
     image_tag path, attributes
   end
 
   def render_visual(position, visual)
-    content_tag :div, visual, class: theme.apply(:"visual/container", self, { position: position })
+    content_tag :div, visual, class: theme.apply(:"visual/container", self, {position: position})
   end
 end

data/app/components/fox_tail/input_component.theme.yml

@@ -8,9 +8,9 @@ root:
   right_visual?:
     true:
       size:
-        sm:
+        sm: pr-9
         base: pr-10
-        lg:
+        lg: pr-11
 container:
   base: relative w-full
 visual/container:
@@ -35,5 +35,5 @@ visual:
     base: w-4 h-4
     lg: w-5 h-5
   state:
-    valid: text-green-900 dark:text-green-500
-    invalid: text-red-900 dark:text-red-500
+    valid: text-success-900 dark:text-success-500
+    invalid: text-danger-900 dark:text-danger-500

data/app/components/fox_tail/input_error_list_component.rb

@@ -3,8 +3,6 @@
 class FoxTail::InputErrorListComponent < FoxTail::BaseComponent
   include FoxTail::Concerns::Formable
 
-  has_option :aliases
-
   renders_many :messages, lambda { |text_or_attributes = {}, attributes = {}, &block|
     if block
       attributes = text_or_attributes
@@ -15,6 +13,19 @@ class FoxTail::InputErrorListComponent < FoxTail::BaseComponent
     content_tag :li, text_or_attributes, attributes
   }
 
+  def initialize(html_attributes = {})
+    if (aliases = html_attributes.delete(:aliases)).present?
+      html_attributes[:errors_for] = Array(html_attributes[:errors_for]) + Array(aliases)
+
+      FoxTail.deprecator.allow ["aliases"] do
+        callstack = Array(caller_locations[slot ? 7 : 4])
+        FoxTail.deprecator.warn "The `aliases` option has been deprecated. Use `errors_for` instead.", callstack
+      end
+    end
+
+    super
+  end
+
   def render?
     messages? || error_messages.present?
   end
@@ -35,13 +46,12 @@ class FoxTail::InputErrorListComponent < FoxTail::BaseComponent
   private
 
   def error_messages
-    @error_messages ||= object? && method_name? ? retrieve_errors : []
+    @error_messages ||= (object? && method_name?) ? retrieve_errors : []
   end
 
   def retrieve_errors
     object = convert_to_model self.object
-    attributes = (Array(method_name) + Array(aliases)).compact_blank.uniq
-    messages = attributes.each_with_object([]) do |attr, results|
+    messages = object_errors_for.each_with_object([]) do |attr, results|
       results.concat object.errors[attr] if object.errors[attr].present?
     end
 

data/app/components/fox_tail/input_error_list_component.theme.yml

@@ -1,2 +1,2 @@
 root:
-  base: list-none font-medium text-sm text-red-900 dark:text-red-500
+  base: list-none font-medium text-sm text-danger-900 dark:text-danger-500

data/app/components/fox_tail/input_group_component.rb

@@ -21,24 +21,24 @@ class FoxTail::InputGroupComponent < FoxTail::BaseComponent
     select: {
       as: :select,
       renders: lambda { |method_or_options = {}, options = {}|
-        if method_or_options.is_a? Hash
-          options = method_or_options
-        else
-          options[:method_name] = method_or_options
-        end
-
-        FoxTail::SelectComponent.new objectify_options(options) }
+                 if method_or_options.is_a? Hash
+                   options = method_or_options
+                 else
+                   options[:method_name] = method_or_options
+                 end
+                 FoxTail::SelectComponent.new objectify_options(options)
+               }
     },
     button: {
       as: :button,
       renders: lambda { |method_or_options = {}, options = {}|
-        if method_or_options.is_a? Hash
-          options = method_or_options
-        else
-          options[:method_name] = method_or_options
-        end
-
-        FoxTail::ButtonComponent.new objectify_options(options) }
+                 if method_or_options.is_a? Hash
+                   options = method_or_options
+                 else
+                   options[:method_name] = method_or_options
+                 end
+                 FoxTail::ButtonComponent.new objectify_options(options)
+               }
     },
     icon_button: {
       as: :icon_button,
@@ -66,8 +66,8 @@ class FoxTail::InputGroupComponent < FoxTail::BaseComponent
       as: :icon,
       renders: lambda { |icon, options = {}|
         options[:class] = classnames theme.apply("addon/visual", self),
-                                     theme.apply("addon/icon", self),
-                                     options[:class]
+          theme.apply("addon/icon", self),
+          options[:class]
 
         addon_component { render FoxTail::IconBaseComponent.new icon, options }
       }
@@ -76,8 +76,8 @@ class FoxTail::InputGroupComponent < FoxTail::BaseComponent
       as: :svg,
       renders: lambda { |path, options = {}|
         options[:class] = classnames theme.apply("addon/visual", self),
-                                     theme.apply("addon/svg", self),
-                                     options[:class]
+          theme.apply("addon/svg", self),
+          options[:class]
 
         addon_component { render FoxTail::InlineSvgComponent.new(path, options) }
       }
@@ -87,8 +87,8 @@ class FoxTail::InputGroupComponent < FoxTail::BaseComponent
       renders: lambda { |path, options = {}|
         image_options = options.extract! :fill
         options[:class] = classnames classnames theme.apply("addon/visual", self),
-                                                theme.apply("addon/image", self, image_options),
-                                                options[:class]
+          theme.apply("addon/image", self, image_options),
+          options[:class]
 
         addon_component(image_options) { image_tag path, options }
       }
@@ -133,7 +133,7 @@ class FoxTail::InputGroupComponent < FoxTail::BaseComponent
   end
 
   def addon_component(options = {}, &block)
-    FoxTail::WrapperComponent.new class: theme.apply(:addon, self, { fill: options[:fill] }) do |wrapper|
+    FoxTail::WrapperComponent.new class: theme.apply(:addon, self, {fill: options[:fill]}) do |wrapper|
       content_tag :div, wrapper.options do
         capture wrapper, &block
       end
@@ -141,7 +141,7 @@ class FoxTail::InputGroupComponent < FoxTail::BaseComponent
   end
 
   def render_item(item, index)
-    item.with_html_class theme.apply(:item, self, { position: item_position(index) })
+    item.with_html_class theme.apply(:item, self, {position: item_position(index)})
     item
   end
 end

data/app/components/fox_tail/label_component.rb

@@ -43,11 +43,11 @@ class FoxTail::LabelComponent < FoxTail::BaseComponent
     return unless object? && !options.key(:state)
 
     options[:state] = if object_errors?
-                        :invalid
-                      elsif html_attributes[:value].present?
-                        :valid
-                      else
-                        :none
-                      end
+      :invalid
+    elsif html_attributes[:value].present?
+      :valid
+    else
+      :none
+    end
   end
 end

data/app/components/fox_tail/label_component.theme.yml

@@ -4,7 +4,7 @@ root:
     relative
     before:absolute before:top-0 before:left-0 before:-translate-x-full
     before:content-["*"] before:pr-0.5
-    before:text-blue-700 dark:before:text-blue-500
+    before:text-primary-700 dark:before:text-primary-500
   state:
-    invalid: text-red-700 dark:text-red-500
-    valid: text-green-700 dark:text-green-500
+    invalid: text-danger-700 dark:text-danger-500
+    valid: text-success-700 dark:text-success-500

data/app/components/fox_tail/link_component.theme.yml

@@ -3,17 +3,11 @@ root:
     neutral: text-gray-600 dark:text-gray-500
     dark: text-gray-800 dark:text-gray-700
     light: text-gray-300 dark:text-gray-500
-    blue: &default text-blue-600 dark:text-blue-500
-    red: text-red-600 dark:text-red-500
-    green: text-green-600 dark:text-green-500
-    yellow: text-yellow-600 dark:text-yellow-500
-    indigo: text-indigo-600 dark:text-indigo-500
-    purple: text-purple-600 dark:text-purple-500
-    pink: text-pink-600 dark:text-pink-500
-    info: text-blue-800 dark:text-blue-700
-    error: text-red-800 dark:text-red-700
-    warning: text-yellow-800 dark:text-yellow-700
-    success: text-green-800 dark:text-green-700
+    primary: &default text-primary-600 dark:text-primary-500
+    info: text-info-800 dark:text-info-700
+    success: text-success-800 dark:text-success-700
+    warning: text-warning-800 dark:text-warning-700
+    danger: text-danger-800 dark:text-danger-700
     default: *default
 root/active:
   base: hover:underline

data/app/components/fox_tail/list_group_component.theme.yml

@@ -15,15 +15,15 @@ item:
   root/active:
     base:
     selected?:
-      true: text-white bg-blue-700 dark:bg-gray-800 focus:outline-none
+      true: text-white bg-primary-700 dark:bg-gray-800 focus:outline-none
       false:
         hoverable?: >-
           cursor-pointer
-          hover:text-blue-700 dark:hover:text-white
+          hover:text-primary-700 dark:hover:text-white
           hover:bg-gray-100 dark:hover:bg-gray-600
-          focus:outline-none focus:ring-2 focus:ring-blue-700 dark:focus:ring-gray-500
-          focus:text-blue-700 dark:focus:text-white
+          focus:outline-none focus:ring-2 focus:ring-primary-700 dark:focus:ring-gray-500
+          focus:text-primary-700 dark:focus:text-white
   visual:
-    base: w-3 h-3
+    base: w-3 h-3 shrink-0
   badge:
     base: ml-auto

data/app/components/fox_tail/listener_controller.ts

@@ -0,0 +1,34 @@
+import { Controller } from '@hotwired/stimulus';
+
+import useEventListeners from '../../../src/mixins/use_event_listeners';
+import proxyEvent from '../../../src/utilities/proxy_event';
+
+export default class extends Controller {
+    static values = {
+        query: String,
+        events: String,
+    };
+
+    declare readonly queryValue: string;
+    declare readonly eventsValue: string;
+
+    connect() {
+        super.connect();
+
+        const selector = document.querySelectorAll(this.queryValue);
+        const targets = Array.from(selector);
+        const events = this.eventsValue.split(' ');
+
+        useEventListeners(this, targets, events, this.listenTo.bind(this), {
+            attached: true,
+        });
+    }
+
+    private listenTo(event: CustomEvent) {
+        this.application.logDebugActivity(this.identifier, 'listenTo', {
+            event,
+        });
+
+        this.element.dispatchEvent(proxyEvent(event));
+    }
+}

data/app/components/fox_tail/modal_component.rb

@@ -1,10 +1,11 @@
 # frozen_string_literal: true
 
 class FoxTail::ModalComponent < FoxTail::BaseComponent
+  include FoxTail::Concerns::Identifiable
   include FoxTail::Concerns::HasStimulusController
 
   renders_one :trigger, lambda { |options = {}|
-    self.class.trigger_component.new options.delete(:id), "##{tag_id}", options
+    self.class.trigger_component.new "##{id}", options
   }
 
   has_option :placement, default: :center
@@ -15,7 +16,8 @@ class FoxTail::ModalComponent < FoxTail::BaseComponent
   has_option :open, type: :boolean, default: false
 
   def tag_id
-    html_attributes[:id] ||= :"modal_#{SecureRandom.hex(4)}"
+    FoxTail.deprecator.deprecation_warning :tag_id, "use `id` instead"
+    id
   end
 
   def close_action(event: :click)
@@ -33,6 +35,7 @@ class FoxTail::ModalComponent < FoxTail::BaseComponent
   def before_render
     super
 
+    generate_unique_id
     html_attributes[:class] = root_classes
     html_attributes[:tabindex] = -1
     html_attributes[:aria] ||= {}
@@ -95,8 +98,8 @@ class FoxTail::ModalComponent < FoxTail::BaseComponent
   private
 
   def content_attributes
-    attributes = { class: theme.apply(:content, self) }
-    attributes[:data] = { stimulus_controller.target_key => :content } if use_stimulus?
+    attributes = {class: theme.apply(:content, self)}
+    attributes[:data] = {stimulus_controller.target_key => :content} if use_stimulus?
     attributes
   end
 
@@ -123,7 +126,7 @@ class FoxTail::ModalComponent < FoxTail::BaseComponent
 
   class StimulusController < FoxTail::StimulusController
     def attributes(options = {})
-      attributes = super options
+      attributes = super
       attributes[:data][value_key(:static)] = options[:static]
       attributes[:data][value_key(:closeable)] = options[:closeable]
       attributes[:data][value_key(:open)] = options[:open]

data/app/components/fox_tail/modal_component.theme.yml

@@ -1,7 +1,7 @@
 root:
   base: >-
     fixed top-0 left-0 right-0 md:inset-0 z-[1300]
-    w-full h-full max-h-full p-4
+    w-full h-[calc(100%-1rem)] max-h-full p-4
     overflow-x-hidden overflow-y-auto
     justify-center items-center
   backdrop?:
@@ -21,7 +21,7 @@ root/hidden:
 root/visible:
   base: flex
 backdrop:
-  base: absolute inset-0 z-[-1] bg-gray-900 bg-opacity-50 dark:bg-opacity-80
+  base: fixed inset-0 z-[-1] bg-gray-900 bg-opacity-50 dark:bg-opacity-80
 content:
   base: relative w-full max-h-full
   backdrop?: