fox_tail 0.1.0 → 0.2.0

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

@@ -27,14 +27,14 @@ step:
           after:border-b after:border-4 after:border-gray-100 dark:after:border-gray-700
         state:
           pending:
-          completed: after:border-green-100 dark:after:border-green-800
+          completed: after:border-success-100 dark:after:border-success-800
           current:
       detailed:
         base: flex items-center text-gray-500 dark:text-gray-400 space-x-2.5
         state:
           pending:
-          completed: text-green-600 dark:text-green-500
-          current: text-blue-600 dark:text-blue-500
+          completed: text-success-600 dark:text-success-500
+          current: text-primary-600 dark:text-primary-500
       vertical:
         base: >-
           w-full p-4 flex items-center justify-between
@@ -44,19 +44,19 @@ step:
         state:
           pending:
           completed: >-
-            text-green-700 dark:text-green-400
-            border-green-300 dark:border-green-800
-            bg-green-50 dark:bg-gray-800
+            text-success-700 dark:text-success-400
+            border-success-300 dark:border-success-800
+            bg-success-50 dark:bg-gray-800
           current: >-
-            text-blue-700 dark:text-blue-400
-            bg-blue-100 dark:bg-gray-800
-            border-blue-300 dark:border-blue-800
+            text-primary-700 dark:text-primary-400
+            bg-primary-100 dark:bg-gray-800
+            border-primary-300 dark:border-primary-800
       breadcrumb: flex items-center group/step
       timeline: mb-10 ml-6
     state:
       pending:
-      completed: text-green-600 dark:text-green-500
-      current: text-blue-600 dark:text-blue-500
+      completed: text-success-600 dark:text-success-500
+      current: text-primary-600 dark:text-primary-500
   visual/container:
     base:
     variant:
@@ -69,8 +69,8 @@ step:
           text-gray-500 dark:text-gray-100
         state:
           pending:
-          completed: bg-green-100 dark:bg-green-800 text-green-600 dark:text-green-300
-          current: bg-blue-100 dark:bg-blue-800 text-blue-600 dark:text-blue-300
+          completed: bg-success-100 dark:bg-success-800 text-success-600 dark:text-success-300
+          current: bg-primary-100 dark:bg-primary-800 text-primary-600 dark:text-primary-300
       detailed:
         base: >-
           flex items-center justify-center shrink-0
@@ -78,8 +78,8 @@ step:
           rounded-full border border-gray-500 dark:border-gray-400
         state:
           pending:
-          completed: border-green-600 dark:border-green-500
-          current: border-blue-600 dark:border-blue-500
+          completed: border-success-600 dark:border-success-500
+          current: border-primary-600 dark:border-primary-500
       vertical:
       breadcrumb:
         base: >-
@@ -88,8 +88,8 @@ step:
           rounded-full border border-gray-500 dark:border-gray-400
         state:
           pending:
-          completed: border-green-600 dark:border-green-500
-          current: border-blue-600 dark:border-blue-500
+          completed: border-success-600 dark:border-success-500
+          current: border-primary-600 dark:border-primary-500
       timeline:
         base: >-
           absolute flex items-center justify-center 
@@ -98,8 +98,8 @@ step:
           ring-4 ring-white dark:ring-gray-900
         state:
           pending:
-          completed: bg-green-200 dark:bg-green-900
-          current: bg-blue-200 dark:bg-blue-900
+          completed: bg-success-200 dark:bg-success-900
+          current: bg-primary-200 dark:bg-primary-900
     state:
       pending:
       completed:

data/app/components/fox_tail/surface_component.rb

@@ -1,10 +1,14 @@
 # frozen_string_literal: true
 
-class FoxTail::SurfaceComponent < FoxTail::BaseComponent
+class FoxTail::SurfaceComponent < FoxTail::ClickableComponent
   has_option :border, type: :boolean, default: true
   has_option :tag_name, default: :div
   has_option :hover, type: :boolean, default: false
 
+  def root_tag_name
+    link? ? :a : tag_name
+  end
+
   def before_render
     super
 
@@ -12,6 +16,6 @@ class FoxTail::SurfaceComponent < FoxTail::BaseComponent
   end
 
   def call
-    content_tag tag_name, content, html_attributes
+    content_tag root_tag_name, content, html_attributes
   end
 end

data/app/components/fox_tail/table/row_component.rb

@@ -12,10 +12,6 @@ class FoxTail::Table::RowComponent < FoxTail::BaseComponent
   has_option :hover, type: :boolean, default: false
   has_option :border, type: :boolean, default: true
 
-  def even?
-    position.is_a?(Numeric) && position.even?
-  end
-
   def before_render
     super
 

data/app/components/fox_tail/table_component.rb

@@ -13,19 +13,19 @@ class FoxTail::TableComponent < FoxTail::BaseComponent
   }
 
   renders_one :header, lambda { |options = {}|
-    options = options.merge self.options
+    options = options.merge section_options
     options[:theme] = theme.theme :header
     FoxTail::Table::HeaderComponent.new options
   }
 
   renders_many :rows, lambda { |options = {}|
-    options = options.merge self.options
+    options = options.merge section_options
     options[:theme] = theme.theme :row
     FoxTail::Table::RowComponent.new options
   }
 
   renders_one :footer, lambda { |options = {}|
-    options = options.merge self.options
+    options = options.merge section_options
     options[:theme] = theme.theme :footer
     FoxTail::Table::RowComponent.new options
   }
@@ -39,4 +39,10 @@ class FoxTail::TableComponent < FoxTail::BaseComponent
 
     html_attributes[:class] = classnames theme.apply(:root, self), html_class
   end
+
+  private
+
+  def section_options
+    options.slice :highlight, :hover, :border
+  end
 end

data/app/components/fox_tail/tabs/panel_component.rb

@@ -1,7 +1,6 @@
 # frozen_string_literal: true
 
 class FoxTail::Tabs::PanelComponent < FoxTail::CollapsibleComponent
-
   class << self
     def stimulus_controller_name
       :collapsible

data/app/components/fox_tail/tabs/tab_component.rb

@@ -10,21 +10,21 @@ class FoxTail::Tabs::TabComponent < FoxTail::ClickableComponent
     icon: {
       as: :left_icon,
       renders: lambda { |icon, options = {}|
-        options[:class] = classnames theme.apply(:visual, self, { position: :left }), options[:class]
+        options[:class] = classnames theme.apply(:visual, self, {position: :left}), options[:class]
         FoxTail::IconBaseComponent.new icon, options
       }
     },
     svg: {
       as: :left_svg,
       renders: lambda { |path, options = {}|
-        options[:class] = classnames theme.apply(:visual, self, { position: :left }), options[:class]
+        options[:class] = classnames theme.apply(:visual, self, {position: :left}), options[:class]
         FoxTail::InlineSvgComponent.new path, options
       }
     },
     image: {
       as: :left_image,
       renders: lambda { |source, options = {}|
-        options[:class] = classnames theme.apply(:visual, self, { position: :left }), options[:class]
+        options[:class] = classnames theme.apply(:visual, self, {position: :left}), options[:class]
         image_tag source, options
       }
     }
@@ -34,21 +34,21 @@ class FoxTail::Tabs::TabComponent < FoxTail::ClickableComponent
     icon: {
       as: :right_icon,
       renders: lambda { |icon, options = {}|
-        options[:class] = classnames theme.apply(:visual, self, { position: :right }), options[:class]
+        options[:class] = classnames theme.apply(:visual, self, {position: :right}), options[:class]
         FoxTail::IconBaseComponent.new icon, options
       }
     },
     svg: {
       as: :right_svg,
       renders: lambda { |path, options = {}|
-        options[:class] = classnames theme.apply(:visual, self, { position: :right }), options[:class]
+        options[:class] = classnames theme.apply(:visual, self, {position: :right}), options[:class]
         FoxTail::InlineSvgComponent.new path, options
       }
     },
     image: {
       as: :right_image,
       renders: lambda { |source, options = {}|
-        options[:class] = classnames theme.apply(:visual, self, { position: :right }), options[:class]
+        options[:class] = classnames theme.apply(:visual, self, {position: :right}), options[:class]
         image_tag source, options
       }
     }
@@ -85,7 +85,7 @@ class FoxTail::Tabs::TabComponent < FoxTail::ClickableComponent
       active_classes: active_classes,
       selected_classes: selected_classes,
       siblings: tabs_id? ? "##{tabs_id} [data-controller~='fox_tail--tab']" : nil,
-      panel: panel_id? ? "##{panel_id}" : nil,
+      panel: panel_id? ? "##{panel_id}" : nil
     }
   end
 

data/app/components/fox_tail/tabs_component.rb

@@ -18,7 +18,7 @@ class FoxTail::TabsComponent < FoxTail::BaseComponent
   }
 
   def initialize(html_attributes = {})
-    super(html_attributes)
+    super
 
     self.html_attributes[:id] ||= "tabs-#{SecureRandom.hex(4)}" if controlled?
   end

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

@@ -33,9 +33,9 @@ tab:
   root/selected:
     base: pointer-events-none
     variant:
-      default: rounded-t-lg text-blue-600 dark:text-blue-500 bg-gray-100 dark:bg-gray-800
-      underline: text-blue-600 dark:text-blue-500 border-blue-600 dark:border-blue-500
-      pills: text-white bg-blue-600 dark:text-white dark:bg-blue-600
+      default: rounded-t-lg text-primary-600 dark:text-primary-500 bg-gray-100 dark:bg-gray-800
+      underline: text-primary-600 dark:text-primary-500 border-primary-600 dark:border-primary-500
+      pills: text-white bg-primary-600 dark:text-white dark:bg-primary-600
       full_width: text-gray-900 dark:text-white bg-gray-100 dark:bg-gray-700
   visual:
     base: w-4 h-4

data/app/components/fox_tail/textarea_component.rb

@@ -7,11 +7,11 @@ class FoxTail::TextareaComponent < FoxTail::InputBaseComponent
     super
 
     html_attributes[:class] = classnames theme.apply(:root, self), html_class
-    AutoResizeStimulusController.new.merge! html_attributes if use_stimulus? && autoresize?
+    AutoResizeStimulusController.new.merge! html_attributes if self.class.use_stimulus? && autoresize?
   end
 
   def call
-    content_tag :textarea, content, html_attributes
+    content_tag :textarea, object_name? ? value_from_object : content, html_attributes
   end
 
   class AutoResizeStimulusController < FoxTail::StimulusController

data/app/components/fox_tail/timeline/entry_component.rb

@@ -7,8 +7,8 @@ class FoxTail::Timeline::EntryComponent < FoxTail::BaseComponent
       renders: lambda { |options = {}|
         options[:color] ||= :neutral
         options[:class] = classnames theme.apply(:visual, self),
-                                     theme.apply("visual/dot", self),
-                                     options[:class]
+          theme.apply("visual/dot", self),
+          options[:class]
 
         FoxTail::DotIndicatorComponent.new options
       }
@@ -34,8 +34,8 @@ class FoxTail::Timeline::EntryComponent < FoxTail::BaseComponent
       as: :image,
       renders: lambda { |source, options = {}|
         container_classes = classnames theme.apply(:visual, self),
-                                       theme.apply("visual/container", self),
-                                       options.delete(:class)
+          theme.apply("visual/container", self),
+          options.delete(:class)
 
         options[:class] = theme.apply("visual/image", self)
 
@@ -66,8 +66,8 @@ class FoxTail::Timeline::EntryComponent < FoxTail::BaseComponent
     display_options[:color] ||= :default
 
     container_classes = classnames theme.apply(:visual, self, display_options),
-                                   theme.apply("visual/container", self, display_options),
-                                   options.delete(:class)
+      theme.apply("visual/container", self, display_options),
+      options.delete(:class)
 
     options[:class] = theme.apply("visual/icon", self, display_options)
 

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

@@ -16,7 +16,11 @@ entry:
   visual/icon:
     base: w-2.5 h-2.5
     color:
-      blue: &default text-blue-800 dark:text-blue-300
+      primary: &default text-primary-800 dark:text-primary-300
+      info: text-info-800 dark:text-info-300
+      success: text-success-800 dark:text-success-300
+      warning: text-warning-800 dark:text-warning-300
+      danger: text-danger-800 dark:text-danger-300
       default: *default
   visual/image:
     base: absolute inset-0 object-cover rounded-full
@@ -26,7 +30,11 @@ entry:
       true: -left-3
       false: relative
     color:
-      blue: &default bg-blue-100 dark:bg-blue-900
+      primary: &default 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
   container/timeline:
     base: flex items-center

data/app/components/fox_tail/toast_component.rb

@@ -1,7 +1,6 @@
 # frozen_string_literal: true
 
 class FoxTail::ToastComponent < FoxTail::DismissibleComponent
-
   renders_one :header, lambda { |text, options = {}|
     options[:class] = classnames theme.apply(:header, self), options[:class]
     content_tag :span, text, options
@@ -28,8 +27,8 @@ class FoxTail::ToastComponent < FoxTail::DismissibleComponent
       as: :image,
       renders: lambda { |source, options = {}|
         options[:class] = classnames theme.apply("visual", self),
-                                     theme.apply("visual/image", self),
-                                     options[:class]
+          theme.apply("visual/image", self),
+          options[:class]
 
         image_tag source, options
       }
@@ -78,7 +77,7 @@ class FoxTail::ToastComponent < FoxTail::DismissibleComponent
 
     attributes[:data] ||= {}
     attributes[:data][:action] = stimulus_merger.merge_actions attributes[:data][:action],
-                                                               stimulus_controller.action("dismiss")
+      stimulus_controller.action("dismiss")
   end
 
   def render_visual(content, options, &block)
@@ -89,8 +88,8 @@ class FoxTail::ToastComponent < FoxTail::DismissibleComponent
 
     options[:"aria-hidden"] = true
     options[:class] = classnames theme.apply(:visual, self, visual_options),
-                                 theme.apply("visual/icon", self, visual_options),
-                                 options[:class]
+      theme.apply("visual/icon", self, visual_options),
+      options[:class]
 
     content_tag :div, class: container_classes do
       concat block.call(options)

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

@@ -12,47 +12,37 @@ container/content:
   base: text-sm font-normal
   dividers?: pl-3
 container/actions:
-  base: flex items-center ml-auto gap-2
+  base: flex items-center ml-auto gap-2 shrink-0 grow-0 ml-auto
 container/visual:
-  base: inline-flex items-center justify-center
+  base: inline-flex items-center justify-center shrink-0 grow-0
   fill:
     true:
       base: w-8 h-8 rounded-lg
       color:
-        blue: &default text-blue-500 bg-blue-100 dark:bg-blue-800 dark:text-blue-200
-        red: &red text-red-500 bg-red-100 dark:bg-red-800 dark:text-red-200
-        green: &green text-green-500 bg-green-100 dark:bg-green-800 dark:text-green-200
-        yellow: &yellow text-yellow-500 bg-yellow-100 dark:bg-yellow-800 dark:text-yellow-200
-        indigo: text-indigo-500 bg-indigo-100 dark:bg-indigo-800 dark:text-indigo-200
-        pink: text-pink-500 bg-pink-100 dark:bg-pink-800 dark:text-pink-200
-        purple: text-purple-500 bg-purple-100 dark:bg-purple-800 dark:text-purple-200
-        success: *green
-        error: *red
-        warning: *yellow
+        primary: &default text-primary-500 bg-primary-100 dark:bg-primary-800 dark:text-primary-200
+        info: text-info-500 bg-info-100 dark:bg-info-800 dark:text-info-200
+        success: text-success-500 bg-success-100 dark:bg-success-800 dark:text-success-200
+        warning: text-warning-500 bg-warning-100 dark:bg-warning-800 dark:text-warning-200
+        danger: text-danger-500 bg-danger-100 dark:bg-danger-800 dark:text-danger-200
         default: *default
 visual:
   base: w-5 h-5
   fill:
     false:
       color:
-        blue: &default text-blue-600 dark:text-blue-500
-        red: &red text-red-600 dark:text-red-500
-        green: &green text-green-600 dark:text-green-500
-        yellow: &yellow text-yellow-600 dark:text-yellow-500
-        indigo: text-indigo-600 dark:text-indigo-500
-        pink: text-pink-600 dark:text-pink-500
-        purple: text-purple-600 dark:text-purple-500
-        success: *green
-        error: *red
-        warning: *yellow
+        primary: &default text-primary-600 dark:text-primary-500
+        info: text-info-600 dark:text-info-500
+        success: text-success-600 dark:text-success-500
+        warning: text-warning-600 dark:text-warning-500
+        danger: text-danger-600 dark:text-danger-500
         default: *default
 visual/image:
   base: w-8 h-8 rounded-full shadow-lg
 action:
   base: >-
     rounded-lg p-1.5 font-medium text-sm 
-    text-blue-600 dark:text-blue-500
-    hover:bg-blue-100 dark:hover:bg-gray-700
+    text-primary-600 dark:text-primary-500
+    hover:bg-primary-100 dark:hover:bg-gray-700
 dismiss/button:
   base: >-
     -mx-1.5 -my-1.5 p-1.5 rounded-lg

data/app/components/fox_tail/toggle_component.rb

@@ -1,36 +1,30 @@
 # frozen_string_literal: true
 
-class FoxTail::ToggleComponent < FoxTail::BaseComponent
-  has_option :size, default: :base
-  has_option :color, default: :default
-
+class FoxTail::ToggleComponent < FoxTail::CheckboxComponent
   renders_one :label, lambda { |text| content_tag :span, text, class: theme.apply(:label, self) }
 
   def before_render
     super
 
-    html_attributes[:type]
+    html_attributes[:class] = theme.apply(:root, self)
   end
 
   def call
     content_tag :label, container_attributes do
-      concat content_tag(:input, nil, input_attributes)
+      concat super
       concat content_tag(:div, nil, toggle_attributes)
       concat label if label?
+      concat content if content?
     end
   end
 
   private
 
   def container_attributes
-    { class: classnames(theme.apply(:container, self), html_class) }
-  end
-
-  def input_attributes
-    html_attributes.merge type: :checkbox, class: theme.apply(:root, self)
+    {class: classnames(theme.apply(:container, self), html_class)}
   end
 
   def toggle_attributes
-    { class: theme.apply(:toggle, self) }
+    {class: theme.apply(:toggle, self)}
   end
 end

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

@@ -4,19 +4,18 @@ container:
   base: relative inline-flex items-center cursor-pointer
 toggle:
   base: >-
+    shrink-0 grow-0
     peer-focus:outline-none peer-focus:ring-4
     rounded-full bg-gray-200  dark:bg-gray-700
     peer-checked:after:translate-x-full peer-checked:after:border-white 
     after:content-[''] after:absolute after:border after:rounded-full after:transition-all
     after:bg-white after:border-gray-300 dark:after:border-gray-600
   color:
-    blue: &default peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 peer-checked:bg-blue-600
-    red: peer-focus:ring-red-300 dark:peer-focus:ring-red-800 peer-checked:bg-red-600
-    green: peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:bg-green-600
-    yellow: peer-focus:ring-yellow-300 dark:peer-focus:ring-yellow-800 peer-checked:bg-yellow-600
-    indigo: peer-focus:ring-indigo-300 dark:peer-focus:ring-indigo-800 peer-checked:bg-indigo-600
-    pink: peer-focus:ring-pink-300 dark:peer-focus:ring-pink-800 peer-checked:bg-pink-600
-    purple: peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 peer-checked:bg-purple-600
+    primary: &default peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 peer-checked:bg-primary-600
+    info: peer-focus:ring-info-300 dark:peer-focus:ring-info-800 peer-checked:bg-info-600
+    warning: peer-focus:ring-warning-300 dark:peer-focus:ring-warning-800 peer-checked:bg-warning-600
+    success: peer-focus:ring-success-300 dark:peer-focus:ring-success-800 peer-checked:bg-success-600
+    danger: peer-focus:ring-danger-300 dark:peer-focus:ring-danger-800 peer-checked:bg-danger-600
     default: *default
   size:
     sm: w-9 h-5 after:h-4 after:w-4 after:top-[2px] after:left-[2px]

data/app/components/fox_tail/tooltip_component.rb

@@ -1,12 +1,12 @@
 # frozen_string_literal: true
 
 class FoxTail::TooltipComponent < FoxTail::BaseComponent
+  include FoxTail::Concerns::Identifiable
   include FoxTail::Concerns::HasStimulusController
 
-  attr_reader :id
-
   renders_one :trigger, lambda { |attributes = {}|
-    FoxTail::TooltipTriggerComponent.new trigger_id, "##{id}", attributes
+    attributes[:id] = trigger_id
+    FoxTail::TooltipTriggerComponent.new "##{id}", attributes
   }
 
   has_option :variant, default: :default
@@ -17,9 +17,15 @@ class FoxTail::TooltipComponent < FoxTail::BaseComponent
   has_option :inline, default: false, type: :boolean
   has_option :trigger_id
 
-  def initialize(id, html_attributes = {})
+  def initialize(id_or_attributes = {}, html_attributes = {})
+    if id_or_attributes.is_a? Hash
+      html_attributes = id_or_attributes
+    else
+      __id_argument_deprecated_warning
+      html_attributes[:id] = id_or_attributes
+    end
+
     super(html_attributes)
-    @id = id
   end
 
   def trigger_id
@@ -29,7 +35,7 @@ class FoxTail::TooltipComponent < FoxTail::BaseComponent
   def before_render
     super
 
-    html_attributes[:id] = id
+    generate_unique_id
     html_attributes[:role] ||= :tooltip
     html_attributes[:class] = classnames theme.apply(:root, self), theme.apply("root/hidden", self), html_class
   end
@@ -72,7 +78,7 @@ class FoxTail::TooltipComponent < FoxTail::BaseComponent
     end
 
     def attributes(options = {})
-      attributes = super options
+      attributes = super
       attributes[:data][value_key(:placement)] = options[:placement]
       attributes[:data][value_key(:offset)] = options[:offset]
       attributes[:data][value_key(:shift)] = options[:shift]

data/app/components/fox_tail/tooltip_trigger_component.rb

@@ -23,7 +23,7 @@ class FoxTail::TooltipTriggerComponent < FoxTail::TriggerBaseComponent
 
     def attributes(options = nil)
       trigger_type = options[:trigger_type]&.to_sym
-      attributes = super options
+      attributes = super
       attributes[:data][outlet_key(tooltip_identifier)] = options[:selector]
       attributes[:data][:action] = build_actions TRIGGER_TYPES[trigger_type]
       attributes

data/app/components/fox_tail/trigger_base_component.rb

@@ -1,16 +1,24 @@
 # frozen_string_literal: true
 
 class FoxTail::TriggerBaseComponent < FoxTail::BaseComponent
+  include FoxTail::Concerns::Identifiable
   include FoxTail::Concerns::HasStimulusController
 
-  attr_reader :id, :selector, :block
+  attr_reader :selector, :block
 
   has_option :trigger_type
 
-  def initialize(id, selector, html_attributes = {}, &block)
+  def initialize(id_or_selector, selector_or_attributes = {}, html_attributes = {}, &block)
+    if selector_or_attributes.is_a? Hash
+      html_attributes = selector_or_attributes
+      selector_or_attributes = id_or_selector
+    else
+      __id_argument_deprecated_warning
+      html_attributes[:id] = id_or_selector
+    end
+
     super(html_attributes)
-    @id = id
-    @selector = selector
+    @selector = selector_or_attributes
     @block = block
   end
 
@@ -21,7 +29,7 @@ class FoxTail::TriggerBaseComponent < FoxTail::BaseComponent
   def before_render
     super
 
-    html_attributes[:id] = id
+    generate_unique_id
     html_attributes[:class] = html_class
   end
 

data/app/components/fox_tail/wrapper_component.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+class FoxTail::WrapperComponent < FoxTail::BaseComponent
+  attr_reader :block
+
+  def initialize(html_attributes = {}, &block)
+    super(html_attributes)
+    @block = block
+  end
+
+  def block?
+    !!@block
+  end
+
+  def before_render
+    super
+
+    html_attributes[:class] = html_class
+  end
+
+  def render?
+    block? || content?
+  end
+
+  def call
+    block ? capture(self, &block) : content
+  end
+end