loco_motion-rails 0.4.0 → 0.5.0

data/lib/loco_motion/concerns/linkable_component.rb

@@ -0,0 +1,40 @@
+require "active_support/concern"
+
+module LocoMotion
+  module Concerns
+    #
+    # Include this module to enable link functionality in a component.
+    # When an href is provided, the component will render as an <a> tag.
+    #
+    module LinkableComponent
+      extend ActiveSupport::Concern
+
+      included do |base|
+        base.register_component_initializer(:_initialize_linkable_component)
+        base.register_component_setup(:_setup_linkable_component)
+      end
+
+      protected
+
+      #
+      # Initialize link-related options.
+      #
+      def _initialize_linkable_component
+        @href = config_option(:href)
+        @target = config_option(:target)
+        @title = config_option(:title)
+      end
+
+      #
+      # Sets the component's tag to <a> if an href is provided and configures the
+      # appropriate HTML attributes.
+      #
+      def _setup_linkable_component
+        if @href
+          set_tag_name(:component, :a)
+          add_html(:component, { href: @href, target: @target, title: @title })
+        end
+      end
+    end
+  end
+end

data/lib/loco_motion/concerns/tippable_component.rb

@@ -1,24 +1,39 @@
+require "active_support/concern"
+
 module LocoMotion
   module Concerns
     #
-    # Can be included in relevant components to allow a new `tip` attibute that
+    # Can be included in relevant components to allow a `tip` attribute that
     # automatically adds the `tooltip` CSS class and the `data-tip` attribute
     # to the component.
     #
     module TippableComponent
+      extend ActiveSupport::Concern
+
+      included do |base|
+        base.register_component_initializer(:_initialize_tippable_component)
+        base.register_component_setup(:_setup_tippable_component)
+      end
+
+      protected
+
       #
-      # Calls the parent `before_render`. Then adds the `tooltip` CSS class and
-      # the `data-tip` attribute to the component if the `tip` attribute is
-      # present.
+      # Initialize tooltip-related options.
       #
-      def before_render
-        super
-
-        tip = config_option(:tip)
+      # @option kws tip [String] The tooltip text to display when hovering
+      #
+      def _initialize_tippable_component
+        @tip = config_option(:tip)
+      end
 
-        if tip
+      #
+      # Configure tooltip functionality for the component.
+      # Adds the `tooltip` CSS class and the `data-tip` attribute if a tip is provided.
+      #
+      def _setup_tippable_component
+        if @tip
           add_css(:component, "tooltip")
-          add_html(:component, { data: { tip: tip } })
+          add_html(:component, { data: { tip: @tip } })
         end
       end
     end

data/lib/loco_motion/helpers.rb

@@ -14,36 +14,42 @@ module LocoMotion
     "Daisy::Actions::ThemeControllerComponent" => { names: "theme_controller", group: "Actions", title: "Theme Controllers", example: "theme_controllers" },
 
     # Data
-    "Daisy::DataDisplay::AccordionComponent" => { names: "accordion", group: "Data", title: "Accordions", example: "accordions" },
-    "Daisy::DataDisplay::AvatarComponent" => { names: "avatar", group: "Data", title: "Avatars", example: "avatars" },
-    "Daisy::DataDisplay::BadgeComponent" => { names: "badge", group: "Data", title: "Badges", example: "badges" },
-    "Daisy::DataDisplay::CardComponent" => { names: "card", group: "Data", title: "Cards", example: "cards" },
-    "Daisy::DataDisplay::CarouselComponent" => { names: "carousel", group: "Data", title: "Carousels", example: "carousels" },
-    "Daisy::DataDisplay::ChatComponent" => { names: "chat", group: "Data", title: "Chat Bubbles", example: "chat_bubbles" },
-    "Daisy::DataDisplay::CollapseComponent" => { names: "collapse", group: "Data", title: "Collapses", example: "collapses" },
-    "Daisy::DataDisplay::CountdownComponent" => { names: "countdown", group: "Data", title: "Countdowns", example: "countdowns" },
-    "Daisy::DataDisplay::DiffComponent" => { names: "diff", group: "Data", title: "Diffs", example: "diffs" },
-    "Daisy::DataDisplay::FigureComponent" => { names: "figure", group: "Data", title: "Figures", example: "figures" },
-    "Daisy::DataDisplay::KbdComponent" => { names: "kbd", group: "Data", title: "Keyboard (KBD)", example: "kbds" },
-    "Daisy::DataDisplay::StatComponent" => { names: "stat", group: "Data", title: "Stats", example: "stats" },
-    "Daisy::DataDisplay::TableComponent" => { names: "table", group: "Data", title: "Tables", example: "tables" },
-    "Daisy::DataDisplay::TimelineComponent" => { names: "timeline", group: "Data", title: "Timelines", example: "timelines" },
+    "Daisy::DataDisplay::AccordionComponent" => { names: "accordion", group: "Data Display", title: "Accordions", example: "accordions" },
+    "Daisy::DataDisplay::AvatarComponent" => { names: "avatar", group: "Data Display", title: "Avatars", example: "avatars" },
+    "Daisy::DataDisplay::BadgeComponent" => { names: "badge", group: "Data Display", title: "Badges", example: "badges" },
+    "Daisy::DataDisplay::CardComponent" => { names: "card", group: "Data Display", title: "Cards", example: "cards" },
+    "Daisy::DataDisplay::CarouselComponent" => { names: "carousel", group: "Data Display", title: "Carousels", example: "carousels" },
+    "Daisy::DataDisplay::ChatComponent" => { names: "chat", group: "Data Display", title: "Chat Bubbles", example: "chat_bubbles" },
+    "Daisy::DataDisplay::CollapseComponent" => { names: "collapse", group: "Data Display", title: "Collapses", example: "collapses" },
+    "Daisy::DataDisplay::CountdownComponent" => { names: "countdown", group: "Data Display", title: "Countdowns", example: "countdowns" },
+    "Daisy::DataDisplay::DiffComponent" => { names: "diff", group: "Data Display", title: "Diffs", example: "diffs" },
+    "Daisy::DataDisplay::FigureComponent" => { names: "figure", group: "Data Display", title: "Figures", example: "figures" },
+    "Daisy::DataDisplay::KbdComponent" => { names: "kbd", group: "Data Display", title: "Keyboard (KBD)", example: "kbds" },
+    "Daisy::DataDisplay::ListComponent" => { names: "list", group: "Data Display", title: "Lists", example: "lists" },
+    "Daisy::DataDisplay::StatComponent" => { names: "stat", group: "Data Display", title: "Stats", example: "stats" },
+    "Daisy::DataDisplay::StatusComponent" => { names: "status", group: "Data Display", title: "Statuses", example: "statuses" },
+    "Daisy::DataDisplay::TableComponent" => { names: "table", group: "Data Display", title: "Tables", example: "tables" },
+    "Daisy::DataDisplay::TimelineComponent" => { names: "timeline", group: "Data Display", title: "Timelines", example: "timelines" },
 
     # Data Input
+    "Daisy::DataInput::CallyComponent" => { names: "cally", group: "Data Input", title: "Calendars", example: "calendars" },
+    "Daisy::DataInput::CallyInputComponent" => { names: "cally_input", group: "Data Input", title: "Cally Inputs", example: "cally_inputs" },
     "Daisy::DataInput::CheckboxComponent" => { names: "checkbox", group: "Data Input", title: "Checkboxes", example: "checkboxes" },
     "Daisy::DataInput::FileInputComponent" => { names: "file_input", group: "Data Input", title: "File Inputs", example: "file_inputs" },
+    "Daisy::DataInput::FieldsetComponent" => { names: "fieldset", group: "Data Input", title: "Fieldsets", example: "fieldsets" },
+    "Daisy::DataInput::FilterComponent" => { names: "filter", group: "Data Input", title: "Filters", example: "filters" },
     "Daisy::DataInput::LabelComponent" => { names: "label", group: "Data Input", title: "Labels", example: "labels" },
     "Daisy::DataInput::RadioButtonComponent" => { names: "radio", group: "Data Input", title: "Radio Buttons", example: "radio_buttons" },
     "Daisy::DataInput::RangeComponent" => { names: "range", group: "Data Input", title: "Ranges", example: "ranges" },
     "Daisy::DataInput::RatingComponent" => { names: "rating", group: "Data Input", title: "Ratings", example: "ratings" },
     "Daisy::DataInput::SelectComponent" => { names: "select", group: "Data Input", title: "Selects", example: "selects" },
-    "Daisy::DataInput::TextInputComponent" => { names: "text_input", group: "Data Input", title: "Text Inputs", example: "text_inputs" },
+    "Daisy::DataInput::TextInputComponent" => { names: ["input", "text_input"], group: "Data Input", title: "Text Inputs", example: "text_inputs" },
     "Daisy::DataInput::TextAreaComponent" => { names: "text_area", group: "Data Input", title: "Text Areas", example: "text_areas" },
     "Daisy::DataInput::ToggleComponent" => { names: "toggle", group: "Data Input", title: "Toggles", example: "toggles" },
 
     # Navigation
     "Daisy::Navigation::BreadcrumbsComponent" => { names: "breadcrumbs", group: "Navigation", title: "Breadcrumbs", example: "breadcrumbs" },
-    "Daisy::Navigation::BottomNavComponent" => { names: "bottom_nav", group: "Navigation", title: "Bottom Navs", example: "bottom_navs" },
+    "Daisy::Navigation::DockComponent" => { names: "dock", group: "Navigation", title: "Dock", example: "docks" },
     "Daisy::Navigation::LinkComponent" => { names: "link", group: "Navigation", title: "Links", example: "links" },
     "Daisy::Navigation::MenuComponent" => { names: "menu", group: "Navigation", title: "Menus", example: "menus" },
     "Daisy::Navigation::NavbarComponent" => { names: "navbar", group: "Navigation", title: "Navbars", example: "navbars" },
@@ -61,7 +67,6 @@ module LocoMotion
     "Daisy::Feedback::TooltipComponent" => { names: ["tooltip", "tip"], group: "Feedback", title: "Tooltips", example: "tooltips" },
 
     # Layout
-    "Daisy::Layout::ArtboardComponent" => { names: "artboard", group: "Layout", title: "Artboards", example: "artboards" },
     "Daisy::Layout::DividerComponent" => { names: "divider", group: "Layout", title: "Dividers", example: "dividers" },
     "Daisy::Layout::DrawerComponent" => { names: "drawer", group: "Layout", title: "Drawers", example: "drawers" },
     "Daisy::Layout::FooterComponent" => { names: "footer", group: "Layout", title: "Footers", example: "footers" },
@@ -92,6 +97,10 @@ module LocoMotion
     end
 
     def component_example_path(component_name)
+      "/examples/#{component_name}"
+    end
+
+    def component_partial_path(component_name)
       comp = COMPONENTS[component_name]
 
       comp_split = component_name.split("::")
@@ -103,6 +112,6 @@ module LocoMotion
       "/examples/#{framework}/#{section_path}#{example}"
     end
 
-    module_function :component_example_path
+    module_function :component_example_path, :component_partial_path
   end
 end

data/lib/loco_motion/patches/view_component/slot_loco_parent_patch.rb

@@ -0,0 +1,37 @@
+# Monkey patch ViewComponent::Slot to save the parent component
+
+module LocoMotion
+  module Patches
+    module ViewComponent
+      module SlotPatch
+
+        # Set the loco parent any time the instance changes
+        def __vc_component_instance=(instance)
+          # Call the original implementation
+          super
+
+          # And set the Loco parent
+          set_loco_parent
+        end
+
+        def to_s
+          set_loco_parent
+
+          super
+        end
+
+        def set_loco_parent(parent = @parent)
+          return if parent.nil?
+          return if @__vc_component_instance.nil?
+          return if @__vc_component_instance.loco_parent.present?
+
+          @__vc_component_instance.set_loco_parent(parent)
+        end
+
+      end
+    end
+  end
+end
+
+# Apply the patch
+::ViewComponent::Slot.prepend(LocoMotion::Patches::ViewComponent::SlotPatch)

data/lib/loco_motion/patches/view_component/slotable_default_patch.rb

@@ -0,0 +1,21 @@
+# Monkey patch ViewComponent::SlotableDefault to modify get_slot behavior
+
+module LocoMotion
+  module Patches
+    module ViewComponent
+      module SlotableDefaultPatch
+        # Override get_slot method
+        def get_slot(slot_name)
+          # ensure content is loaded so slots will be defined
+          content unless content_evaluated?
+
+          # Call the original implementation
+          super
+        end
+      end
+    end
+  end
+end
+
+# Apply the patch
+::ViewComponent::SlotableDefault.prepend(LocoMotion::Patches::ViewComponent::SlotableDefaultPatch)

data/lib/loco_motion/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module LocoMotion
-  VERSION = "0.4.0"
+  VERSION = "0.5.0"
 end

data/lib/loco_motion.rb

@@ -1,8 +1,8 @@
 require "rails"
 require "haml-rails"
-require "heroicons-rails"
+require "rails_heroicon"
 
-require Gem::Specification.find_by_name("heroicons-rails").gem_dir + "/app/helpers/heroicons/icons_helper.rb"
+require Gem::Specification.find_by_name("rails_heroicon").gem_dir + "/lib/rails_heroicon/helper.rb"
 
 require "view_component"
 
@@ -14,5 +14,15 @@ require "loco_motion/basic_component"
 require "loco_motion/engine"
 require "loco_motion/helpers"
 
+# Load patches
+require "loco_motion/patches/view_component/slotable_default_patch"
+require "loco_motion/patches/view_component/slot_loco_parent_patch"
+
 require "hero"
 require "daisy"
+
+begin
+  require "pry" if Rails.env.development?
+rescue LoadError
+  # Don't throw an error, pry should really only be used while debugging locally
+end

metadata

@@ -1,15 +1,28 @@
 --- !ruby/object:Gem::Specification
 name: loco_motion-rails
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 0.5.0
 platform: ruby
 authors:
 - Topher Fangio
-autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-03-08 00:00:00.000000000 Z
+date: 1980-01-02 00:00:00.000000000 Z
 dependencies:
+- !ruby/object:Gem::Dependency
+  name: benchmark
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.4'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.4'
 - !ruby/object:Gem::Dependency
   name: haml-rails
   requirement: !ruby/object:Gem::Requirement
@@ -25,19 +38,19 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '2.1'
 - !ruby/object:Gem::Dependency
-  name: heroicons-rails
+  name: rails_heroicon
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '1.2'
+        version: 2.3.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '1.2'
+        version: 2.3.0
 - !ruby/object:Gem::Dependency
   name: rails
   requirement: !ruby/object:Gem::Requirement
@@ -47,7 +60,7 @@ dependencies:
         version: '6.1'
     - - "<"
       - !ruby/object:Gem::Version
-        version: '8.0'
+        version: '8.1'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
@@ -57,21 +70,21 @@ dependencies:
         version: '6.1'
     - - "<"
       - !ruby/object:Gem::Version
-        version: '8.0'
+        version: '8.1'
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.14'
+        version: '3.22'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '3.14'
+        version: '3.22'
 - !ruby/object:Gem::Dependency
   name: base64
   requirement: !ruby/object:Gem::Requirement
@@ -213,19 +226,19 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '1.3'
 - !ruby/object:Gem::Dependency
-  name: heroicons-rails
+  name: rails_heroicon
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '1.2'
+        version: 2.3.0
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '1.2'
+        version: 2.3.0
 - !ruby/object:Gem::Dependency
   name: pry
   requirement: !ruby/object:Gem::Requirement
@@ -350,6 +363,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: 0.9.34
+- !ruby/object:Gem::Dependency
+  name: algoliasearch-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.2'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.2'
 description: Advanced components and Rails management with LocoMotion.
 email: topher@profoundry.us
 executables: []
@@ -366,8 +393,10 @@ files:
 - app/components/daisy/actions/modal_component.rb
 - app/components/daisy/actions/swap_component.html.haml
 - app/components/daisy/actions/swap_component.rb
-- app/components/daisy/actions/theme_controller_component.html.haml
+- app/components/daisy/actions/theme_controller.js
 - app/components/daisy/actions/theme_controller_component.rb
+- app/components/daisy/actions/theme_preview_component.html.haml
+- app/components/daisy/actions/theme_preview_component.rb
 - app/components/daisy/data_display/accordion_component.html.haml
 - app/components/daisy/data_display/accordion_component.rb
 - app/components/daisy/data_display/avatar_component.html.haml
@@ -388,16 +417,30 @@ files:
 - app/components/daisy/data_display/diff_component.rb
 - app/components/daisy/data_display/figure_component.rb
 - app/components/daisy/data_display/kbd_component.rb
+- app/components/daisy/data_display/list_component.html.haml
+- app/components/daisy/data_display/list_component.rb
+- app/components/daisy/data_display/list_item_component.rb
 - app/components/daisy/data_display/stat_component.html.haml
 - app/components/daisy/data_display/stat_component.rb
+- app/components/daisy/data_display/status_component.rb
 - app/components/daisy/data_display/table_component.html.haml
 - app/components/daisy/data_display/table_component.rb
 - app/components/daisy/data_display/timeline_component.html.haml
 - app/components/daisy/data_display/timeline_component.rb
 - app/components/daisy/data_display/timeline_event_component.html.haml
 - app/components/daisy/data_display/timeline_event_component.rb
+- app/components/daisy/data_input/cally_component.html.haml
+- app/components/daisy/data_input/cally_component.rb
+- app/components/daisy/data_input/cally_input_component.html.haml
+- app/components/daisy/data_input/cally_input_component.rb
+- app/components/daisy/data_input/cally_input_controller.js
+- app/components/daisy/data_input/checkbox_component.html.haml
 - app/components/daisy/data_input/checkbox_component.rb
+- app/components/daisy/data_input/fieldset_component.html.haml
+- app/components/daisy/data_input/fieldset_component.rb
 - app/components/daisy/data_input/file_input_component.rb
+- app/components/daisy/data_input/filter_component.html.haml
+- app/components/daisy/data_input/filter_component.rb
 - app/components/daisy/data_input/label_component.rb
 - app/components/daisy/data_input/radio_button_component.rb
 - app/components/daisy/data_input/range_component.rb
@@ -417,7 +460,6 @@ files:
 - app/components/daisy/feedback/skeleton_component.rb
 - app/components/daisy/feedback/toast_component.rb
 - app/components/daisy/feedback/tooltip_component.rb
-- app/components/daisy/layout/artboard_component.rb
 - app/components/daisy/layout/divider_component.rb
 - app/components/daisy/layout/drawer_component.html.haml
 - app/components/daisy/layout/drawer_component.rb
@@ -431,9 +473,9 @@ files:
 - app/components/daisy/mockup/code_component.rb
 - app/components/daisy/mockup/device_component.rb
 - app/components/daisy/mockup/frame_component.rb
-- app/components/daisy/navigation/bottom_nav_component.rb
 - app/components/daisy/navigation/breadcrumbs_component.html.haml
 - app/components/daisy/navigation/breadcrumbs_component.rb
+- app/components/daisy/navigation/dock_component.rb
 - app/components/daisy/navigation/link_component.rb
 - app/components/daisy/navigation/menu_component.html.haml
 - app/components/daisy/navigation/menu_component.rb
@@ -444,23 +486,28 @@ files:
 - app/components/daisy/navigation/tabs_component.rb
 - app/components/hero/icon_component.rb
 - app/helpers/daisy/form_builder_helper.rb
+- app/views/examples/daisy/data_input/filters.html.haml
 - lib/daisy.rb
 - lib/hero.rb
 - lib/loco_motion.rb
 - lib/loco_motion/base_component.rb
 - lib/loco_motion/basic_component.rb
 - lib/loco_motion/component_config.rb
+- lib/loco_motion/concerns/iconable_component.rb
+- lib/loco_motion/concerns/labelable_component.rb
+- lib/loco_motion/concerns/linkable_component.rb
 - lib/loco_motion/concerns/tippable_component.rb
 - lib/loco_motion/configuration.rb
 - lib/loco_motion/engine.rb
 - lib/loco_motion/errors.rb
 - lib/loco_motion/helpers.rb
+- lib/loco_motion/patches/view_component/slot_loco_parent_patch.rb
+- lib/loco_motion/patches/view_component/slotable_default_patch.rb
 - lib/loco_motion/version.rb
 homepage: https://rubygems.org/gems/loco_motion-rails
 licenses:
 - MIT
 metadata: {}
-post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -476,8 +523,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.5.16
-signing_key:
+rubygems_version: 3.6.7
 specification_version: 4
 summary: Ruby on Rails, loco fast!
 test_files: []

data/app/components/daisy/actions/theme_controller_component.html.haml

@@ -1,5 +0,0 @@
-= part(:component) do
-  - @themes.map do |theme|
-    %label.label.cursor-pointer.gap-4
-      %span.label-text= theme.titleize
-      %input.radio.theme-controller{ name: "theme", type: "radio", value: theme, checked: theme == "light"}

data/app/components/daisy/layout/artboard_component.rb

@@ -1,59 +0,0 @@
-#
-# The ArtboardComponent provides a fixed-size container that mimics mobile
-# device screens. It's particularly useful for:
-# - Prototyping mobile interfaces.
-# - Displaying responsive design examples.
-# - Creating device-specific mockups.
-#
-# The component includes preset sizes for common mobile devices and supports
-# both portrait and landscape orientations.
-#
-# @loco_example Portrait Mode
-#   = daisy_artboard(css: "phone-4") do
-#     = daisy_hero do
-#       iPhone 13 (375×812)
-#
-# @loco_example Landscape Mode
-#   = daisy_artboard(css: "phone-4 artboard-horizontal") do
-#     = daisy_hero do
-#       iPhone 13 (812×375)
-#
-# @loco_example Custom Demo Style
-#   = daisy_artboard(css: "phone-1 artboard-demo") do
-#     iPhone SE (320×568)
-#
-class Daisy::Layout::ArtboardComponent < LocoMotion::BaseComponent
-
-  #
-  # Creates a new Artboard component.
-  #
-  # @param args [Array] Positional arguments passed to the parent class.
-  # @param kws  [Hash]  Keyword arguments for customizing the artboard.
-  #
-  # @option kws css [String] Additional CSS classes for styling. Common
-  #   options include:
-  #   - Device sizes: `phone-1` (320×568), `phone-2` (375×667),
-  #     `phone-3` (414×736), `phone-4` (375×812), `phone-5` (414×896),
-  #     `phone-6` (320×1024)
-  #   - Orientation: `artboard-horizontal` for landscape mode
-  #   - Demo style: `artboard-demo` for visible borders and background
-  #
-  def initialize(*args, **kws, &block)
-    super
-  end
-
-  #
-  # Sets up the component's CSS classes.
-  #
-  def before_render
-    add_css(:component, "artboard")
-  end
-
-  #
-  # Renders the component and its content.
-  #
-  def call
-    part(:component) { content }
-  end
-
-end