fox_tail 0.1.0 → 0.2.0

data/app/components/fox_tail/avatar_stack_component.rb

@@ -6,8 +6,8 @@ class FoxTail::AvatarStackComponent < FoxTail::BaseComponent
     options[:rounded] = rounded
     options[:border] = true unless options.key? :border
     options[:class] = classnames theme.apply(:content, self),
-                                 theme.apply(:avatar, self),
-                                 options[:class]
+      theme.apply(:avatar, self),
+      options[:class]
 
     FoxTail::AvatarComponent.new options
   }
@@ -20,8 +20,8 @@ class FoxTail::AvatarStackComponent < FoxTail::BaseComponent
     options[:rounded] = rounded
     options[:border] = true unless options.key? :border
     options[:class] = classnames theme.apply(:content, self),
-                                 theme.apply(:counter, self),
-                                 options[:class]
+      theme.apply(:counter, self),
+      options[:class]
 
     if url.present?
       link_to url, class: theme.apply("counter/link", self) do

data/app/components/fox_tail/badge_component.rb

@@ -2,12 +2,26 @@
 
 class FoxTail::BadgeComponent < FoxTail::BaseComponent
   renders_one :icon, lambda { |icon, options = {}|
-    options[:variant] ||= :mini
     options[:"aria-hidden"] = true
-    options[:class] = icon_classes options[:class]
+    options[:class] = classnames theme.apply(:icon, self), options[:class]
     FoxTail::IconBaseComponent.new icon, options
   }
 
+  renders_one :dismiss_icon, lambda { |options = {}|
+    icon_options = options.extract!(:icon, :variant).reverse_merge(icon: "x-mark", variant: :solid)
+    icon_options[:class] = classnames theme.apply(:icon, self), theme.apply(:dismiss_icon, self)
+    options[:class] = classnames theme.apply(:dismiss_button, self), options[:class]
+
+    FoxTail::WrapperComponent.new options do |wrapper|
+      content = wrapper.content? ? wrapper.content : I18n.t("components.fox_tail.close")
+
+      render FoxTail::ClickableComponent.new(wrapper.html_attributes) do
+        concat render(FoxTail::IconBaseComponent.new(icon_options[:icon], icon_options.except(:icon)))
+        concat content_tag(:div, content, class: theme.classname("accessibility.sr_only"))
+      end
+    end
+  }
+
   has_option :url
   has_option :size, default: :base
   has_option :color, default: :default
@@ -15,26 +29,22 @@ class FoxTail::BadgeComponent < FoxTail::BaseComponent
   has_option :icon_only, default: false, type: :boolean
   has_option :border, default: false, type: :boolean
 
-  def call
-    content_tag (url? ? :a : :span), html_attributes.merge(href: url, class: root_classes) do
-      concat icon if icon?
-      concat content_tag(:span, content, class: content_classes) if content?
-    end
+  def tag_name
+    url? ? :a : :span
   end
 
-  private
-
-  def root_classes
-    classnames theme.apply(:root, self), html_class
-  end
+  def before_render
+    super
 
-  def content_classes
-    classnames icon_only? && theme.classname("content.hidden")
+    html_attributes[:href] = url if url?
+    html_attributes[:class] = classnames theme.apply(:root, self), html_class
   end
 
-  def icon_classes(classes)
-    classnames theme.classname("icon.base"),
-               theme.classname(["icon", "size", size]),
-               classes
+  def call
+    content_tag tag_name, html_attributes do
+      concat icon if icon?
+      concat content_tag(:span, content, class: theme.apply(:content, self)) if content?
+      concat dismiss_icon if dismiss_icon?
+    end
   end
 end

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

@@ -1,7 +1,7 @@
 root:
   base: font-medium h-fit rounded
   icon_only?:
-    false: inline-flex items-center gap-1
+    false: inline-flex items-center gap-1.5
     true:
       base: rounded-full inline-flex items-center justify-center
       size:
@@ -15,7 +15,7 @@ root:
   color:
     neutral: &default
       base: bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300
-      border?: bg-gray-50 text-gray-500 border-gray-500 dark:bg-gray-400 dark:text-gray-600 dark:border-gray-600
+      border?: bg-gray-50 text-gray-500 border-gray-500 dark:border-gray-600
       url?: hover:bg-gray-200 dark:hover:bg-gray-600
     dark:
       base: bg-gray-600 text-gray-100 dark:bg-gray-900 dark:text-gray-200
@@ -25,42 +25,47 @@ root:
       base: bg-gray-100 text-gray-600 dark:bg-gray-300 dark:text-gray-600
       border?: bg-gray-50 text-gray-300 border-gray-300 dark:bg-gray-500 dark:text-gray-700 dark:border-gray-700
       url?: hover:bg-gray-300 dark:hover:bg-gray-500
-    red: &red
-      base: bg-red-100 text-red-800 dark:bg-red-200 dark:text-red-800
-      border?: bg-red-100 text-red-800 border-red-800 dark:bg-gray-700 dark:text-red-400 dark:border-red-400
-      url?: hover:bg-red-200 dark:hover:bg-red-300
-    blue: &blue
-      base: bg-blue-100 text-blue-800 dark:bg-blue-200 dark:text-blue-800
-      border?: bg-blue-100 text-blue-800 border-blue-800 dark:bg-gray-700 dark:text-blue-400 dark:border-blue-400
-      url?: hover:bg-blue-200 dark:hover:bg-blue-300
-    yellow: &yellow
-      base: bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-800
-      border?: bg-yellow-100 text-yellow-800 border-yellow-800 dark:bg-gray-700 dark:text-yellow-400 dark:border-yellow-400
-      url?: hover:bg-yellow-200 dark:hover:bg-yellow-300
-    green: &green
-      base: bg-green-100 text-green-800 dark:bg-green-200 dark:text-green-800
-      border?: bg-green-100 text-green-800 border-green-800 dark:bg-gray-700 dark:text-green-400 dark:border-green-400
-      url?: hover:bg-green-200 dark:hover:bg-green-300
-    indigo:
-      base: bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-800
-      border?: bg-indigo-100 text-indigo-800 border-indigo-800 dark:bg-gray-700 dark:text-indigo-400 dark:border-indigo-400
-      url?: hover:bg-indigo-200 dark:hover:bg-indigo-300
-    purple:
-      base: bg-purple-100 text-purple-800 dark:bg-purple-200 dark:text-purple-800
-      border?: bg-indigo-100 text-purple-800 border-purple-800 dark:bg-gray-700 dark:text-purple-400 dark:border-purple-400
-      url?: hover:bg-purple-200 dark:hover:bg-purple-300
-    pink:
-      base: bg-pink-100 text-pink-800 dark:bg-pink-200 dark:text-pink-800
-      border?: bg-pink-100 text-pink-800 border-pink-800 dark:bg-gray-700 dark:text-pink-400 dark:border-pink-400
-      url?: hover:bg-pink-200 dark:hover:bg-pink-300
-    info: *blue
-    success: *green
-    warning: *yellow
-    error: *red
+    primary:
+      base: bg-primary-100 text-primary-800 dark:bg-primary-200 dark:text-primary-800
+      border?: bg-primary-100 text-primary-800 border-primary-800 dark:bg-gray-700 dark:text-primary-400 dark:border-primary-400
+      url?: hover:bg-primary-200 dark:hover:bg-primary-300
+    info:
+      base: bg-info-100 text-info-800 dark:bg-info-200 dark:text-info-800
+      border?: bg-info-100 text-info-800 border-info-800 dark:bg-gray-700 dark:text-info-400 dark:border-info-400
+      url?: hover:bg-info-200 dark:hover:bg-info-300
+    success:
+      base: bg-success-100 text-success-800 dark:bg-success-200 dark:text-success-800
+      border?: bg-success-100 text-success-800 border-success-800 dark:bg-gray-700 dark:text-success-400 dark:border-success-400
+      url?: hover:bg-success-200 dark:hover:bg-success-300
+    warning:
+      base: bg-warning-100 text-warning-800 dark:bg-warning-200 dark:text-warning-800
+      border?: bg-warning-100 text-warning-800 border-warning-800 dark:bg-gray-700 dark:text-warning-400 dark:border-warning-400
+      url?: hover:bg-warning-200 dark:hover:bg-warning-300
+    danger:
+      base: bg-danger-100 text-danger-800 dark:bg-danger-200 dark:text-danger-800
+      border?: bg-danger-100 text-danger-800 border-danger-800 dark:bg-gray-700 dark:text-danger-400 dark:border-danger-400
+      url?: hover:bg-danger-200 dark:hover:bg-danger-300
     default: *default
 icon:
   size:
-    base: w-3.5 h-3.5
-    sm: w-4 h-4
+    base: w-3 h-3
+    sm: w-3.5 h-3.5
 content:
-  hidden: sr-only
+  icon_only?: sr-only
+dismiss_button:
+  base: inline-flex items-center p-0.5 text-sm bg-transparent rounded-sm
+  pill?: rounded-full
+  color:
+    neutral: &neutral hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-gray-300
+    dark: hover:bg-gray-500 hover:text-gray-100 dark:hover:bg-gray-600 dark:hover:text-gray-300
+    light: hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-gray-300
+    primary: hover:bg-primary-200 hover:text-primary-900 dark:hover:bg-primary-800 dark:hover:text-primary-300
+    info: hover:bg-info-200 hover:text-info-900 dark:hover:bg-info-800 dark:hover:text-info-300
+    success: hover:bg-success-200 hover:text-success-900 dark:hover:bg-success-800 dark:hover:text-success-300
+    warning: hover:bg-warning-200 hover:text-warning-900 dark:hover:bg-warning-800 dark:hover:text-warning-300
+    danger: hover:bg-danger-200 hover:text-danger-900 dark:hover:bg-danger-800 dark:hover:text-danger-300
+    default: *neutral
+dismiss_icon:
+  size:
+    base: w-2.5 h-2.5
+    sm: w-3 h-3

data/app/components/fox_tail/breadcrumb_component.rb

@@ -0,0 +1,119 @@
+# frozen_string_literal: true
+
+class FoxTail::BreadcrumbComponent < FoxTail::BaseComponent
+  renders_one :separator, types: {
+    icon: lambda { |icon, options = {}|
+      options[:class] = classnames(
+        theme.apply(:separator, self),
+        theme.apply("separator/icon", self),
+        options[:class]
+      )
+
+      FoxTail::IconBaseComponent.new icon, options
+    },
+    text: lambda { |text, options = {}|
+      options[:class] = classnames(
+        theme.apply(:separator, self),
+        theme.apply("separator/text", self),
+        options[:class]
+      )
+
+      content_tag :span, text, options
+    }
+  }
+
+  renders_many :items, types: {
+    link: lambda { |url, options = {}, &block|
+      options[:class] = classnames(
+        theme.apply(:item, self),
+        theme.apply("item/button", self),
+        options[:class]
+      )
+
+      FoxTail::WrapperComponent.new options do |wrapper|
+        render FoxTail::LinkComponent.new url, wrapper.html_attributes do |link|
+          capture link, &block
+        end
+      end
+    },
+    text: lambda { |text_or_options = {}, options = {}, &block|
+      if text_or_options.is_a?(Hash)
+        options = text_or_options
+        text_or_options = nil
+      end
+
+      options[:class] = classnames(
+        theme.apply(:item, self),
+        theme.apply("item/text", self),
+        options[:class]
+      )
+
+      FoxTail::WrapperComponent.new options do |wrapper|
+        content_tag :div, wrapper.html_attributes do
+          text_or_options || capture(&block)
+        end
+      end
+    },
+    button: lambda { |options = {}, &block|
+      options[:size] ||= :sm
+      options[:variant] ||= :outline
+      options[:color] ||= :neutral
+
+      options[:class] = classnames(
+        theme.apply(:item, self),
+        theme.apply("item/button", self),
+        options[:class]
+      )
+
+      FoxTail::WrapperComponent.new options do |wrapper|
+        render FoxTail::ButtonComponent.new wrapper.html_attributes do |button|
+          capture button, &block
+        end
+      end
+    }
+  }
+
+  has_option :variant, default: :default
+
+  def render?
+    items?
+  end
+
+  def before_render
+    super
+
+    with_separator_icon :chevron_right unless separator?
+
+    html_attributes[:aria] ||= {}
+    html_attributes[:aria][:label] = t("components.fox_tail.breadcrumb.label", default: "Breadcrumbs")
+  end
+
+  def call
+    content_tag :nav, html_attributes do
+      concat render_list
+      concat content if content?
+    end
+  end
+
+  private
+
+  def render_list
+    content_tag :ol, class: theme.apply("container", self) do
+      items.each_with_index do |item, index|
+        concat separator if index.positive?
+        concat render_item(item, index)
+      end
+    end
+  end
+
+  def render_item(item, index)
+    attributes = {}
+
+    if index == items.length - 1
+      attributes[:aria] = {current: :page}
+      item.with_html_class theme.apply("item/current", self)
+    end
+
+    content_tag :li, item, attributes
+  end
+end

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

@@ -0,0 +1,19 @@
+root:
+  base: "flex flex-wrap flex-col sm:flex-row gap-3"
+  variant:
+    solid: "px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700"
+container:
+  base: "inline-flex items-center space-x-1 md:space-x-2"
+separator:
+  base: "text-gray-400 shrink-0 mx-2"
+separator/icon:
+  base: "w-3 h-3"
+item:
+  base: "text-gray-600 dark:text-gray-500"
+item/link:
+  base: "text-sm font-medium"
+item/button:
+  base: "border-0"
+item/current:
+  base: "text-gray-500 dark:text-gray-400"
+

data/app/components/fox_tail/button_base_component.rb

@@ -3,6 +3,28 @@
 class FoxTail::ButtonBaseComponent < FoxTail::ClickableComponent
   include FoxTail::Concerns::Formable
 
+  renders_one :indicator, types: {
+    dot: {
+      as: :dot_indicator,
+      renders: lambda { |options = {}|
+        styling_options = options.extract!(:position).reverse_merge(position: :top_right)
+        options[:size] ||= :sm
+        options[:class] = classnames theme.apply(:indicator, self, styling_options), options[:class]
+        FoxTail::DotIndicatorComponent.new options
+      }
+    },
+    badge: {
+      as: :badge_indicator,
+      renders: lambda { |options = {}|
+        styling_options = options.extract!(:position).reverse_merge(position: :top_right)
+        options[:size] ||= :sm
+        options[:pill] = true unless options.key?(:pill)
+        options[:class] = classnames theme.apply(:indicator, self, styling_options), options[:class]
+        FoxTail::BadgeComponent.new options
+      }
+    }
+  }
+
   has_option :variant, default: :solid
   has_option :size, default: :base
   has_option :color, default: :default
@@ -39,20 +61,24 @@ class FoxTail::ButtonBaseComponent < FoxTail::ClickableComponent
     return nil unless object_name? && html_attributes[:type]&.to_sym == :submit
 
     object = convert_to_model self.object
-    key    = object ? (object.persisted? ? :update : :create) : :submit
+    key = if object
+      object.persisted? ? :update : :create
+    else
+      :submit
+    end
 
     model = if object.respond_to?(:model_name)
-              object.model_name.human
-            else
-              object_name.to_s.humanize
-            end
+      object.model_name.human
+    else
+      object_name.to_s.humanize
+    end
 
     defaults = []
     defaults << if object.respond_to?(:model_name) && object_name.to_s == model.downcase
-                  :"helpers.submit.#{object.model_name.i18n_key}.#{key}"
-                else
-                  :"helpers.submit.#{object_name}.#{key}"
-                end
+      :"helpers.submit.#{object.model_name.i18n_key}.#{key}"
+    else
+      :"helpers.submit.#{object_name}.#{key}"
+    end
 
     defaults << :"helpers.submit.#{key}"
     defaults << "#{key.to_s.humanize} #{model}"

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

@@ -3,6 +3,7 @@ root:
     text-center font-medium rounded-lg 
     focus:ring-4 focus:outline-none
   pill?: rounded-full
+  indicator?: relative
   size:
     xs: px-3 py-2 text-xs
     sm: px-3 py-2 text-sm
@@ -15,7 +16,7 @@ root:
         neutral: >-
           text-gray-900 bg-white dark:bg-gray-800 dark:text-gray-400 
           border border-gray-200 dark:border-gray-600 
-          hover:bg-gray-100 hover:text-blue-700 dark:hover:text-white dark:hover:bg-gray-700
+          hover:bg-gray-100 hover:text-primary-700 dark:hover:text-white dark:hover:bg-gray-700
           focus:ring-gray-200 dark:focus:ring-gray-700
         dark: >-
           text-white bg-gray-800 dark:bg-gray-800
@@ -26,36 +27,28 @@ root:
           border border-gray-300 dark:border-gray-600 
           hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:border-gray-600
           focus:ring-gray-200 dark:focus:ring-gray-700
-        blue: &default >-
-          text-white bg-blue-700 dark:bg-blue-600
-          hover:bg-blue-800 dark:hover:bg-blue-700
-          focus:ring-blue-300 dark:focus:ring-blue-800
-        red: &red >-
-          text-white bg-red-700 dark:bg-red-600
-          hover:bg-red-800 dark:hover:bg-red-700
-          focus:ring-red-300 dark:focus:ring-red-800
-        green: &green >-
-          text-white bg-green-700 dark:bg-green-600
-          hover:bg-green-800 dark:hover:bg-green-700
-          focus:ring-green-300 dark:focus:ring-green-800
-        yellow: &yellow text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-yellow-300 dark:focus:ring-yellow-900
-        indigo: >-
-          text-white bg-indigo-700 dark:bg-indigo-600
-          hover:bg-indigo-800 dark:hover:bg-indigo-700
-          focus:ring-indigo-300 dark:focus:ring-indigo-800
-        purple: >-
-          text-white bg-purple-700 dark:bg-purple-600
-          hover:bg-purple-800 dark:hover:bg-purple-700
-          focus:ring-purple-300 dark:focus:ring-purple-800
-        pink: >-
-          text-white bg-pink-700 dark:bg-pink-600
-          hover:bg-pink-800 dark:hover:bg-pink-700
-          focus:ring-pink-300 dark:focus:ring-pink-800
-        info: *default
-        success: *green
-        warning: *yellow
-        error: *red
-        default: *default
+        primary: &primary >-
+          text-white bg-primary-700 dark:bg-primary-600
+          hover:bg-primary-800 dark:hover:bg-primary-700
+          focus:ring-primary-300 dark:focus:ring-primary-800
+        info: >-
+          text-white bg-info-700 dark:bg-info-600
+          hover:bg-info-800 dark:hover:bg-info-700
+          focus:ring-info-300 dark:focus:ring-info-800
+        success: >-
+          text-white bg-success-700 dark:bg-success-600
+          hover:bg-success-800 dark:hover:bg-success-700
+          focus:ring-success-300 dark:focus:ring-success-800
+        warning: >-
+          text-white bg-warning-700 dark:bg-warning-600
+          hover:bg-warning-800 dark:hover:bg-warning-700
+          focus:ring-warning-300 dark:focus:ring-warning-800
+        danger: &danger >-
+          text-white bg-danger-700 dark:bg-danger-600
+          hover:bg-danger-800 dark:hover:bg-danger-700
+          focus:ring-danger-300 dark:focus:ring-danger-800
+        error: *danger
+        default: *primary
     outline:
       base: border
       color:
@@ -71,38 +64,37 @@ root:
           text-gray-400 border-gray-200 dark:text-white dark:border-gray-200
           hover:text-gray-400 hover:bg-gray-200 dark:hover:text-gray-900 dark:hover:bg-white
           focus:ring-gray-200 dark:focus:ring-gray-200
-        blue: &default >-
-          text-blue-700 border-blue-700 dark:text-blue-500 dark:border-blue-500
-          hover:text-white hover:bg-blue-800 dark:hover:text-white dark:hover:bg-blue-500 
-          focus:ring-blue-300 dark:focus:ring-blue-800
-        red: &red >-
-          text-red-700 border-red-700 dark:text-red-500 dark:border-red-500
-          hover:text-white hover:bg-red-800 dark:hover:text-white dark:hover:bg-red-500 
-          focus:ring-red-300 dark:focus:ring-red-800
-        green: &green >-
-          text-green-700 border-green-700 dark:text-green-500 dark:border-green-500
-          hover:text-white hover:bg-green-800 dark:hover:text-white dark:hover:bg-green-500 
-          focus:ring-green-300 dark:focus:ring-green-800
-        yellow: &yellow >-
-          text-yellow-700 border-yellow-700 dark:text-yellow-500 dark:border-yellow-500
-          hover:text-white hover:bg-yellow-800 dark:hover:text-white dark:hover:bg-yellow-500 
-          focus:ring-yellow-300 dark:focus:ring-yellow-800
-        indigo: >-
-          text-indigo-700 border-indigo-700 dark:text-indigo-500 dark:border-indigo-500
-          hover:text-white hover:bg-indigo-800 dark:hover:text-white dark:hover:bg-indigo-500 
-          focus:ring-indigo-300 dark:focus:ring-indigo-800
-        purple: >-
-          text-purple-700 border-purple-700 dark:text-purple-500 dark:border-purple-500
-          hover:text-white hover:bg-purple-800 dark:hover:text-white dark:hover:bg-purple-500 
-          focus:ring-purple-300 dark:focus:ring-purple-800
-        pink: >-
-          text-pink-700 border-pink-700 dark:text-pink-500 dark:border-pink-500
-          hover:text-white hover:bg-pink-800 dark:hover:text-white dark:hover:bg-pink-500 
-          focus:ring-pink-300 dark:focus:ring-pink-800
-        info: *default
-        success: *green
-        warning: *yellow
-        error: *red
-        default: *default
+        primary: &primary >-
+          text-primary-700 border-primary-700 dark:text-primary-500 dark:border-primary-500
+          hover:text-white hover:bg-primary-800 dark:hover:text-white dark:hover:bg-primary-500 
+          focus:ring-primary-300 dark:focus:ring-primary-800
+        info: >-
+          text-info-700 border-info-700 dark:text-info-500 dark:border-info-500
+          hover:text-white hover:bg-info-800 dark:hover:text-white dark:hover:bg-info-500 
+          focus:ring-info-300 dark:focus:ring-info-800
+        success: >-
+          text-success-700 border-success-700 dark:text-success-500 dark:border-success-500
+          hover:text-white hover:bg-success-800 dark:hover:text-white dark:hover:bg-success-500 
+          focus:ring-success-300 dark:focus:ring-success-800
+        warning: >-
+          text-warning-700 border-warning-700 dark:text-warning-500 dark:border-warning-500
+          hover:text-white hover:bg-warning-800 dark:hover:text-white dark:hover:bg-warning-500 
+          focus:ring-warning-300 dark:focus:ring-warning-800
+        danger: >-
+          text-danger-700 border-danger-700 dark:text-danger-500 dark:border-danger-500
+          hover:text-white hover:bg-danger-800 dark:hover:text-white dark:hover:bg-danger-500 
+          focus:ring-danger-300 dark:focus:ring-danger-800
+        default: *primary
 root/disabled:
   base: pointer-events-none cursor-not-allowed opacity-50
+indicator:
+  base: absolute
+  position:
+    top_left: top-0 left-0 -translate-x-1/2 -translate-y-1/2
+    top: top-0 left-1/2 -translate-x-1/2 -translate-y-1/2
+    top_right: top-0 right-0 translate-x-1/2 -translate-y-1/2
+    center_left: top-1/2 left-0 -translate-x-1/2 -translate-y-1/2
+    center_right: top-1/2 right-0 translate-x-1/2 -translate-y-1/2
+    bottom_left: bottom-0 left-0 -translate-x-1/2 translate-y-1/2
+    bottom: bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2
+    bottom_right: bottom-0 right-0 translate-x-1/2 translate-y-1/2

data/app/components/fox_tail/button_component.rb

@@ -55,6 +55,7 @@ class FoxTail::ButtonComponent < FoxTail::ButtonBaseComponent
 
   def call
     super do
+      concat indicator if indicator?
       concat loading_icon if loading_icon?
       concat left_visual if left_visual?
 
@@ -65,7 +66,7 @@ class FoxTail::ButtonComponent < FoxTail::ButtonBaseComponent
               :span,
               loading_label,
               class: !loading? && theme.classname("hidden"),
-              data: { stimulus_controller.target_key => "loading" }
+              data: {stimulus_controller.target_key => "loading"}
             )
           )
           concat(
@@ -73,7 +74,7 @@ class FoxTail::ButtonComponent < FoxTail::ButtonBaseComponent
               :span,
               content,
               class: loading? && theme.classname("hidden"),
-              data: { stimulus_controller.target_key => "active" }
+              data: {stimulus_controller.target_key => "active"}
             )
           )
         else
@@ -94,19 +95,18 @@ class FoxTail::ButtonComponent < FoxTail::ButtonBaseComponent
   end
 
   def loader_classes(additional_classes = nil)
-    classnames theme.apply(:visual, self, { position: :left, loader: true }),
-               controlled? && !loading? && theme.classname("hidden"),
-               additional_classes
+    classnames theme.apply(:visual, self, {position: :left, loader: true}),
+      controlled? && !loading? && theme.classname("hidden"),
+      additional_classes
   end
 
   def visual_classes(side, addition_classes = nil)
-    classnames theme.apply(:visual, self, { position: side }), addition_classes
+    classnames theme.apply(:visual, self, {position: side}), addition_classes
   end
 
   private
 
   def icon_component(side, icon, options)
-    options[:variant] ||= :mini
     options[:"aria-hidden"] = true
     options[:class] = visual_classes side, options[:class]
     options[stimulus_controller.target_key(raw: true)] = "active" if controlled?

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

@@ -2,6 +2,7 @@ root:
   visuals?: group inline-flex items-center justify-center gap-2
 hidden: "hidden"
 visual:
+  base: shrink-0
   loader: text-gray-400 dark:text-gray-500 fill-white
   size:
     xs: h-3 w-3

data/app/components/fox_tail/carousel_component.rb

@@ -5,8 +5,8 @@ class FoxTail::CarouselComponent < FoxTail::BaseComponent
 
   renders_many :slides, lambda { |options = {}, &block|
     options[:class] = classnames theme.apply(:slide, self),
-                                 hidden_slide_classes,
-                                 options[:class]
+      hidden_slide_classes,
+      options[:class]
 
     if use_stimulus?
       options[:data] ||= {}
@@ -74,7 +74,7 @@ class FoxTail::CarouselComponent < FoxTail::BaseComponent
 
   class StimulusController < FoxTail::StimulusController
     def attributes(options = {})
-      attributes = super(options)
+      attributes = super
       attributes[:data][value_key(:position)] = options[:position]
       attributes[:data][value_key(:interval)] = options[:interval]
       attributes[:data][classes_key(:previous_slide)] = options[:previous_slide_classes]