element_component 0.7.0 → 0.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 27a79b6578d299e674340e4c1e3c7a0061ff6ac3b9c233f102bb3d4d3fd89011
-  data.tar.gz: 501d6617270b0e5bc9cef324d270126d5cd531677cdd8ee43bb3a8e18bf1cd4c
+  metadata.gz: 8919d998e1eed755c1b0d52a1a755b913c00befed273951da5fab55bc2a6def4
+  data.tar.gz: cdb3938426b25800c14566531c14758d7202ede0e6faa76b765f7ace39530219
 SHA512:
-  metadata.gz: d7317e82f7fc54008e4f4152372fc1f3575edf3f0956790a87298025707bbcd507422c3a3e32800dd6aa6a3954f1006ac470fde4e44ffb35ba7aba1bfe9ed5e8
-  data.tar.gz: c358120b8d90a4ef0ea864094cae08d245286a20266c4c645814f7f60ec5795f5a62756a740e91be566b08159914674b91b0ba9af76013de02c0f3e20927d731
+  metadata.gz: 37fa2859a76cc025dae9c07765e0ab492a8a79970da462f01225d20fa7c146fe850d1915882e5891fd42cbf2046de8828e25c052d3d518a8f699996b0fe2002a
+  data.tar.gz: c53fb1bf1fec326bd4ae2daafc2b704923e9a7a6fae40006d28fea7d656b4d3c0419e1250121a5989630e2e8f53a46c45e1e6d63a04d299582e0515ddde3f06e

data/AGENTS.md

@@ -52,13 +52,13 @@ Components live under `ElementComponent::Components`. Each component folder cont
 **Alert constructor**: `Alert.new(variant: :primary, dismissible: false, **attributes, &block)`
 - `variant`: one of `:primary`, `:secondary`, `:success`, `:danger`, `:warning`, `:info`, `:light`, `:dark`
 - `dismissible`: adds `.alert-dismissible` class and appends a `CloseButton`
-- `&block`: instance_eval DSL for adding content inside the element
+- `&block`: block with element parameter for adding content inside the element
 
 **Component guidelines**:
 - Always use `add_attribute()` instead of manipulating the `attributes` hash directly
 - Each class in its own file under a component-named folder
 - Call `super("tag_name", closing_tag: ..., &block)` first, then chain `add_attribute` calls
-- `instance_eval(&block)` lives in `Element#initialize` — do NOT repeat it in components
+- `block.call(self)` lives in `Element#initialize` — passes element to block via block parameter
 - Pass user attributes last via `add_attribute(attributes)`
 
 ### Sub-component example pattern:

data/README.md

@@ -5,7 +5,7 @@ A lightweight and flexible HTML builder for Ruby. `ElementComponent` provides a
 ## Key Features
 
 - **Object-Oriented HTML Construction** — Build HTML trees using Ruby objects with dynamic attribute management
-- **Block DSL** — Nest content inline with `instance_eval`-based blocks and the `new_element` helper
+- **Block DSL** — Nest content inline with block parameters and the `new_element` helper
 - **Rendering Hooks** — `before_render`, `after_render`, and `around_render` callbacks for dynamic content
 - **17 Bootstrap 5 Components** — Ready-to-use Alert, Badge, Breadcrumb, Button, ButtonGroup, Card, Carousel, CloseButton, Dropdown, ListGroup, Modal, Nav, Navbar, Pagination, Progress, Spinner, and Table
 - **Chained API** — All `add_*` methods return `self` for method chaining
@@ -41,9 +41,9 @@ puts p.render
 Use a block to add content inline:
 
 ```ruby
-div = ElementComponent::Element.new("div", class: "container") do
-  add_content("Welcome")
-  add_content(ElementComponent::Element.new("h1") { add_content("Title") })
+div = ElementComponent::Element.new("div", class: "container") do |e|
+  e.add_content("Welcome")
+  e.add_content(ElementComponent::Element.new("h1") { |h| h.add_content("Title") })
 end
 puts div.render
 # => <div class="container">Welcome<h1>Title</h1></div>
@@ -54,9 +54,9 @@ puts div.render
 Inside a block, use `new_element` as a shorthand:
 
 ```ruby
-div = ElementComponent::Element.new("div") do
-  add_content(new_element("h1") { add_content("Hello") })
-  add_content(new_element("p", class: "lead") { add_content("World") })
+div = ElementComponent::Element.new("div") do |e|
+  e.add_content(e.new_element("h1") { |h| h.add_content("Hello") })
+  e.add_content(e.new_element("p", class: "lead") { |p| p.add_content("World") })
 end
 puts div.render
 # => <div><h1>Hello</h1><p class="lead">World</p></div>
@@ -73,13 +73,18 @@ div = ElementComponent::Element.new("div")
 div.add_content("plain text")
 
 # Element instance
-div.add_content(ElementComponent::Element.new("span") { add_content("nested") })
+div.add_content(ElementComponent::Element.new("span") { |s| s.add_content("nested") })
 
 # Block (evaluated at render time, has access to new_element)
-div.add_content { new_element("em") { add_content("deferred") } }
+div.add_content { |e| e.new_element("em") { |em| em.add_content("deferred") } }
 
 puts div.render
 # => <div>plain text<span>nested</span><em>deferred</em></div>
+
+# Array of content
+div.add_content(["Hello ", ElementComponent::Element.new("strong") { |s| s.add_content("World") }, "!"])
+puts div.render
+# => <div>Hello <strong>World</strong>!</div>
 ```
 
 ### Attribute Management
@@ -150,8 +155,8 @@ All components live under `ElementComponent::Components` and support the block D
 
 
 ```ruby
-alert = ElementComponent::Components::Alert.new(variant: :success) do
-  add_content("Operation completed!")
+alert = ElementComponent::Components::Alert.new(variant: :success) do |e|
+  e.add_content("Operation completed!")
 end
 # => <div class="alert alert-success" role="alert">Operation completed!</div>
 ```
@@ -161,10 +166,10 @@ end
 Dismissible alerts, headings, and links use sub-components:
 
 ```ruby
-alert = ElementComponent::Components::Alert.new(variant: :warning, dismissible: true) do
-  add_content(ElementComponent::Components::AlertHeading.new { add_content("Warning") })
-  add_content("Please review. ")
-  add_content(ElementComponent::Components::AlertLink.new(href: "/details") { add_content("Details") })
+alert = ElementComponent::Components::Alert.new(variant: :warning, dismissible: true) do |e|
+  e.add_content(ElementComponent::Components::AlertHeading.new { |h| h.add_content("Warning") })
+  e.add_content("Please review. ")
+  e.add_content(ElementComponent::Components::AlertLink.new(href: "/details") { |l| l.add_content("Details") })
 end
 # => <div class="alert alert-warning alert-dismissible" role="alert">
 #      <h4 class="alert-heading">Warning</h4>
@@ -187,15 +192,15 @@ end
 
 ```ruby
 # Standard button
-btn = ElementComponent::Components::Button.new(variant: :primary) { add_content("Click") }
+btn = ElementComponent::Components::Button.new(variant: :primary) { |b| b.add_content("Click") }
 # => <button class="btn btn-primary" type="button">Click</button>
 
 # Outline variant
-btn = ElementComponent::Components::Button.new(variant: :danger, outline: true) { add_content("Delete") }
+btn = ElementComponent::Components::Button.new(variant: :danger, outline: true) { |b| b.add_content("Delete") }
 # => <button class="btn btn-outline-danger" type="button">Delete</button>
 
 # As a link
-btn = ElementComponent::Components::Button.new(variant: :primary, href: "/home") { add_content("Home") }
+btn = ElementComponent::Components::Button.new(variant: :primary, href: "/home") { |b| b.add_content("Home") }
 # => <a class="btn btn-primary" href="/home">Home</a>
 ```
 
@@ -205,10 +210,10 @@ btn = ElementComponent::Components::Button.new(variant: :primary, href: "/home")
 
 
 ```ruby
-badge = ElementComponent::Components::Badge.new(variant: :primary) { add_content("New") }
+badge = ElementComponent::Components::Badge.new(variant: :primary) { |b| b.add_content("New") }
 # => <span class="badge bg-primary">New</span>
 
-pill = ElementComponent::Components::Badge.new(variant: :danger, pill: true) { add_content("99+") }
+pill = ElementComponent::Components::Badge.new(variant: :danger, pill: true) { |b| b.add_content("99+") }
 # => <span class="badge bg-danger rounded-pill">99+</span>
 ```
 
@@ -216,13 +221,13 @@ pill = ElementComponent::Components::Badge.new(variant: :danger, pill: true) { a
 
 
 ```ruby
-card = ElementComponent::Components::Card.new do
-  add_content(ElementComponent::Components::CardImage.new(src: "photo.jpg", top: true))
-  add_content(ElementComponent::Components::CardBody.new do
-    add_content(ElementComponent::Components::CardTitle.new { add_content("Title") })
-    add_content(ElementComponent::Components::CardText.new { add_content("Some text.") })
+card = ElementComponent::Components::Card.new do |c|
+  c.add_content(ElementComponent::Components::CardImage.new(src: "photo.jpg", top: true))
+  c.add_content(ElementComponent::Components::CardBody.new do |body|
+    body.add_content(ElementComponent::Components::CardTitle.new { |t| t.add_content("Title") })
+    body.add_content(ElementComponent::Components::CardText.new { |t| t.add_content("Some text.") })
   end)
-  add_content(ElementComponent::Components::CardFooter.new { add_content("Footer") })
+  c.add_content(ElementComponent::Components::CardFooter.new { |f| f.add_content("Footer") })
 end
 ```
 
@@ -241,12 +246,12 @@ end
 
 
 ```ruby
-nav = ElementComponent::Components::Nav.new(type: :tabs) do
-  add_content(ElementComponent::Components::NavItem.new do
-    add_content(ElementComponent::Components::NavLink.new(href: "/", active: true) { add_content("Home") })
+nav = ElementComponent::Components::Nav.new(type: :tabs) do |n|
+  n.add_content(ElementComponent::Components::NavItem.new do |item|
+    item.add_content(ElementComponent::Components::NavLink.new(href: "/", active: true) { |l| l.add_content("Home") })
   end)
-  add_content(ElementComponent::Components::NavItem.new do
-    add_content(ElementComponent::Components::NavLink.new(href: "/profile") { add_content("Profile") })
+  n.add_content(ElementComponent::Components::NavItem.new do |item|
+    item.add_content(ElementComponent::Components::NavLink.new(href: "/profile") { |l| l.add_content("Profile") })
   end)
 end
 # => <ul class="nav nav-tabs">...</ul>
@@ -258,10 +263,10 @@ end
 
 
 ```ruby
-crumb = ElementComponent::Components::Breadcrumb.new do
-  add_content(ElementComponent::Components::BreadcrumbItem.new(href: "/") { add_content("Home") })
-  add_content(ElementComponent::Components::BreadcrumbItem.new(href: "/section") { add_content("Section") })
-  add_content(ElementComponent::Components::BreadcrumbItem.new(active: true) { add_content("Current") })
+crumb = ElementComponent::Components::Breadcrumb.new do |b|
+  b.add_content(ElementComponent::Components::BreadcrumbItem.new(href: "/") { |i| i.add_content("Home") })
+  b.add_content(ElementComponent::Components::BreadcrumbItem.new(href: "/section") { |i| i.add_content("Section") })
+  b.add_content(ElementComponent::Components::BreadcrumbItem.new(active: true) { |i| i.add_content("Current") })
 end
 # => <nav aria-label="breadcrumb"><ol class="breadcrumb">...</ol></nav>
 ```
@@ -270,10 +275,10 @@ end
 
 
 ```ruby
-list = ElementComponent::Components::ListGroup.new(flush: true) do
-  add_content(ElementComponent::Components::ListGroupItem.new { add_content("Item 1") })
-  add_content(ElementComponent::Components::ListGroupItem.new(active: true) { add_content("Item 2") })
-  add_content(ElementComponent::Components::ListGroupItem.new(href: "/link") { add_content("Link") })
+list = ElementComponent::Components::ListGroup.new(flush: true) do |l|
+  l.add_content(ElementComponent::Components::ListGroupItem.new { |i| i.add_content("Item 1") })
+  l.add_content(ElementComponent::Components::ListGroupItem.new(active: true) { |i| i.add_content("Item 2") })
+  l.add_content(ElementComponent::Components::ListGroupItem.new(href: "/link") { |i| i.add_content("Link") })
 end
 # => <ul class="list-group list-group-flush">...</ul>
 ```
@@ -284,9 +289,9 @@ end
 
 
 ```ruby
-progress = ElementComponent::Components::Progress.new do
-  add_content(ElementComponent::Components::ProgressBar.new(value: 75, variant: :success, striped: true) do
-    add_content("75%")
+progress = ElementComponent::Components::Progress.new do |p|
+  p.add_content(ElementComponent::Components::ProgressBar.new(value: 75, variant: :success, striped: true) do |bar|
+    bar.add_content("75%")
   end)
 end
 # => <div class="progress" role="progressbar"><div class="progress-bar bg-success progress-bar-striped" ...>75%</div></div>
@@ -307,9 +312,9 @@ grow = ElementComponent::Components::Spinner.new(type: :grow, variant: :success)
 
 
 ```ruby
-table = ElementComponent::Components::Table.new(striped: true, bordered: true, hover: true) do
-  add_content("<thead><tr><th>Name</th><th>Age</th></tr></thead>")
-  add_content("<tbody><tr><td>John</td><td>30</td></tr></tbody>")
+table = ElementComponent::Components::Table.new(striped: true, bordered: true, hover: true) do |t|
+  t.add_content("<thead><tr><th>Name</th><th>Age</th></tr></thead>")
+  t.add_content("<tbody><tr><td>John</td><td>30</td></tr></tbody>")
 end
 # => <table class="table table-striped table-bordered table-hover">...</table>
 ```
@@ -320,9 +325,9 @@ end
 
 
 ```ruby
-nav = ElementComponent::Components::Pagination.new(size: :lg) do
-  add_content(ElementComponent::Components::PageItem.new(active: true) { add_content("1") })
-  add_content(ElementComponent::Components::PageItem.new { add_content("2") })
+nav = ElementComponent::Components::Pagination.new(size: :lg) do |p|
+  p.add_content(ElementComponent::Components::PageItem.new(active: true) { |i| i.add_content("1") })
+  p.add_content(ElementComponent::Components::PageItem.new { |i| i.add_content("2") })
 end
 # => <nav aria-label="Pagination"><ul class="pagination pagination-lg">...</ul></nav>
 ```
@@ -331,10 +336,10 @@ end
 
 
 ```ruby
-group = ElementComponent::Components::ButtonGroup.new do
-  add_content(ElementComponent::Components::Button.new(variant: :primary) { add_content("Left") })
-  add_content(ElementComponent::Components::Button.new(variant: :primary) { add_content("Middle") })
-  add_content(ElementComponent::Components::Button.new(variant: :primary) { add_content("Right") })
+group = ElementComponent::Components::ButtonGroup.new do |g|
+  g.add_content(ElementComponent::Components::Button.new(variant: :primary) { |b| b.add_content("Left") })
+  g.add_content(ElementComponent::Components::Button.new(variant: :primary) { |b| b.add_content("Middle") })
+  g.add_content(ElementComponent::Components::Button.new(variant: :primary) { |b| b.add_content("Right") })
 end
 # => <div class="btn-group" role="group">...</div>
 ```
@@ -356,15 +361,15 @@ disabled = ElementComponent::Components::CloseButton.new(disabled: true)
 
 
 ```ruby
-modal = ElementComponent::Components::Modal.new(id: "exampleModal") do
-  add_content(ElementComponent::Components::ModalContent.new do
-    add_content(ElementComponent::Components::ModalHeader.new do
-      add_content(ElementComponent::Components::ModalTitle.new { add_content("Modal title") })
+modal = ElementComponent::Components::Modal.new(id: "exampleModal") do |m|
+  m.add_content(ElementComponent::Components::ModalContent.new do |content|
+    content.add_content(ElementComponent::Components::ModalHeader.new do |header|
+      header.add_content(ElementComponent::Components::ModalTitle.new { |t| t.add_content("Modal title") })
     end)
-    add_content(ElementComponent::Components::ModalBody.new { add_content("Modal body text.") })
-    add_content(ElementComponent::Components::ModalFooter.new do
-      add_content(ElementComponent::Components::Button.new(variant: :secondary) { add_content("Close") })
-      add_content(ElementComponent::Components::Button.new(variant: :primary) { add_content("Save") })
+    content.add_content(ElementComponent::Components::ModalBody.new { |body| body.add_content("Modal body text.") })
+    content.add_content(ElementComponent::Components::ModalFooter.new do |footer|
+      footer.add_content(ElementComponent::Components::Button.new(variant: :secondary) { |b| b.add_content("Close") })
+      footer.add_content(ElementComponent::Components::Button.new(variant: :primary) { |b| b.add_content("Save") })
     end)
   end)
 end
@@ -387,12 +392,12 @@ end
 
 
 ```ruby
-carousel = ElementComponent::Components::Carousel.new(id: "slides") do
-  add_content(ElementComponent::Components::CarouselItem.new(active: true) do
-    add_content(%(<img src="slide1.jpg" class="d-block w-100" alt="...">))
+carousel = ElementComponent::Components::Carousel.new(id: "slides") do |c|
+  c.add_content(ElementComponent::Components::CarouselItem.new(active: true) do |item|
+    item.add_content(%(<img src="slide1.jpg" class="d-block w-100" alt="...">))
   end)
-  add_content(ElementComponent::Components::CarouselItem.new do
-    add_content(%(<img src="slide2.jpg" class="d-block w-100" alt="...">))
+  c.add_content(ElementComponent::Components::CarouselItem.new do |item|
+    item.add_content(%(<img src="slide2.jpg" class="d-block w-100" alt="...">))
   end)
 end
 ```
@@ -410,20 +415,20 @@ end
 
 
 ```ruby
-dropdown = ElementComponent::Components::Dropdown.new do
-  add_content(
+dropdown = ElementComponent::Components::Dropdown.new do |d|
+  d.add_content(
     ElementComponent::Element.new("button",
       class: "btn btn-secondary dropdown-toggle",
       type: "button",
       "data-bs-toggle": "dropdown",
-      "aria-expanded": "false") { add_content("Dropdown") }
+      "aria-expanded": "false") { |b| b.add_content("Dropdown") }
   )
-  add_content(
-    ElementComponent::Components::DropdownMenu.new do
-      add_content(ElementComponent::Components::DropdownItem.new { add_content("Action") })
-      add_content(ElementComponent::Components::DropdownItem.new(active: true) { add_content("Active") })
-      add_content(ElementComponent::Components::DropdownDivider.new)
-      add_content(ElementComponent::Components::DropdownItem.new(disabled: true) { add_content("Disabled") })
+  d.add_content(
+    ElementComponent::Components::DropdownMenu.new do |menu|
+      menu.add_content(ElementComponent::Components::DropdownItem.new { |i| i.add_content("Action") })
+      menu.add_content(ElementComponent::Components::DropdownItem.new(active: true) { |i| i.add_content("Active") })
+      menu.add_content(ElementComponent::Components::DropdownDivider.new)
+      menu.add_content(ElementComponent::Components::DropdownItem.new(disabled: true) { |i| i.add_content("Disabled") })
     end
   )
 end
@@ -444,16 +449,16 @@ end
 
 
 ```ruby
-navbar = ElementComponent::Components::Navbar.new(theme: :dark, background: :dark) do
-  add_content(ElementComponent::Components::NavbarBrand.new(href: "/") { add_content("Brand") })
-  add_content(ElementComponent::Components::NavbarToggler.new(target: "nav"))
-  add_content(ElementComponent::Components::NavbarCollapse.new(id: "nav") do
-    add_content(ElementComponent::Components::NavbarNav.new do
-      add_content(ElementComponent::Components::NavItem.new do
-        add_content(ElementComponent::Components::NavLink.new(href: "/", active: true) { add_content("Home") })
+navbar = ElementComponent::Components::Navbar.new(theme: :dark, background: :dark) do |n|
+  n.add_content(ElementComponent::Components::NavbarBrand.new(href: "/") { |b| b.add_content("Brand") })
+  n.add_content(ElementComponent::Components::NavbarToggler.new(target: "nav"))
+  n.add_content(ElementComponent::Components::NavbarCollapse.new(id: "nav") do |collapse|
+    collapse.add_content(ElementComponent::Components::NavbarNav.new do |nav|
+      nav.add_content(ElementComponent::Components::NavItem.new do |item|
+        item.add_content(ElementComponent::Components::NavLink.new(href: "/", active: true) { |l| l.add_content("Home") })
       end)
-      add_content(ElementComponent::Components::NavItem.new do
-        add_content(ElementComponent::Components::NavLink.new(href: "/about") { add_content("About") })
+      nav.add_content(ElementComponent::Components::NavItem.new do |item|
+        item.add_content(ElementComponent::Components::NavLink.new(href: "/about") { |l| l.add_content("About") })
       end)
     end)
   end)

data/examples/alert_example.rb

@@ -25,8 +25,8 @@ puts
 # =============================================================================
 # Dismissible Alert (use block DSL so close button is always last)
 # =============================================================================
-alert = ElementComponent::Components::Alert.new(variant: :warning, dismissible: true) do
-  add_content("This alert can be dismissed.")
+alert = ElementComponent::Components::Alert.new(variant: :warning, dismissible: true) do |e|
+  e.add_content("This alert can be dismissed.")
 end
 puts "=== Dismissible Alert ==="
 puts alert.render
@@ -48,10 +48,10 @@ puts
 # =============================================================================
 # Alert with Heading and Link (block DSL)
 # =============================================================================
-alert = ElementComponent::Components::Alert.new(variant: :info) do
-  add_content(ElementComponent::Components::AlertHeading.new.tap { |h| h.add_content("Information") })
-  add_content("This is an important notice. ")
-  add_content(ElementComponent::Components::AlertLink.new(href: "/details").tap { |l| l.add_content("View details") })
+alert = ElementComponent::Components::Alert.new(variant: :info) do |e|
+  e.add_content(ElementComponent::Components::AlertHeading.new.tap { |h| h.add_content("Information") })
+  e.add_content("This is an important notice. ")
+  e.add_content(ElementComponent::Components::AlertLink.new(href: "/details").tap { |l| l.add_content("View details") })
 end
 puts "=== Alert with Heading and Link ==="
 puts alert.render
@@ -60,10 +60,10 @@ puts
 # =============================================================================
 # Dismissible Alert with Heading and Link
 # =============================================================================
-alert = ElementComponent::Components::Alert.new(variant: :danger, dismissible: true) do
-  add_content(ElementComponent::Components::AlertHeading.new.tap { |h| h.add_content("Error!") })
-  add_content("Something went wrong. ")
-  add_content(ElementComponent::Components::AlertLink.new(href: "/support").tap do |l|
+alert = ElementComponent::Components::Alert.new(variant: :danger, dismissible: true) do |e|
+  e.add_content(ElementComponent::Components::AlertHeading.new.tap { |h| h.add_content("Error!") })
+  e.add_content("Something went wrong. ")
+  e.add_content(ElementComponent::Components::AlertLink.new(href: "/support").tap do |l|
     l.add_content("Contact support")
   end)
 end

data/examples/badge_example.rb

@@ -34,8 +34,8 @@ puts
 # =============================================================================
 # Badge with Block
 # =============================================================================
-badge = ElementComponent::Components::Badge.new(variant: :success) do
-  add_content("Completed")
+badge = ElementComponent::Components::Badge.new(variant: :success) do |b|
+  b.add_content("Completed")
 end
 puts "=== Badge with Block ==="
 puts badge.render

data/examples/breadcrumb_example.rb

@@ -5,10 +5,12 @@ require_relative "../lib/element_component"
 # =============================================================================
 # Basic Breadcrumb
 # =============================================================================
-breadcrumb = ElementComponent::Components::Breadcrumb.new do
-  add_content(ElementComponent::Components::BreadcrumbItem.new(href: "/") { add_content("Home") })
-  add_content(ElementComponent::Components::BreadcrumbItem.new(href: "/library") { add_content("Library") })
-  add_content(ElementComponent::Components::BreadcrumbItem.new(active: true) { add_content("Data") })
+breadcrumb = ElementComponent::Components::Breadcrumb.new do |b|
+  b.add_content(ElementComponent::Components::BreadcrumbItem.new(href: "/") { |item| item.add_content("Home") })
+  b.add_content(ElementComponent::Components::BreadcrumbItem.new(href: "/library") do |item|
+    item.add_content("Library")
+  end)
+  b.add_content(ElementComponent::Components::BreadcrumbItem.new(active: true) { |item| item.add_content("Data") })
 end
 puts "=== Basic Breadcrumb ==="
 puts breadcrumb.render
@@ -17,9 +19,11 @@ puts
 # =============================================================================
 # Breadcrumb with Two Items
 # =============================================================================
-breadcrumb = ElementComponent::Components::Breadcrumb.new do
-  add_content(ElementComponent::Components::BreadcrumbItem.new(href: "/") { add_content("Home") })
-  add_content(ElementComponent::Components::BreadcrumbItem.new(active: true) { add_content("Current Page") })
+breadcrumb = ElementComponent::Components::Breadcrumb.new do |b|
+  b.add_content(ElementComponent::Components::BreadcrumbItem.new(href: "/") { |item| item.add_content("Home") })
+  b.add_content(ElementComponent::Components::BreadcrumbItem.new(active: true) do |item|
+    item.add_content("Current Page")
+  end)
 end
 puts "=== Two-Item Breadcrumb ==="
 puts breadcrumb.render
@@ -28,9 +32,9 @@ puts
 # =============================================================================
 # Breadcrumb with Custom Class
 # =============================================================================
-breadcrumb = ElementComponent::Components::Breadcrumb.new(class: "custom-breadcrumb") do
-  add_content(ElementComponent::Components::BreadcrumbItem.new(href: "/") { add_content("Home") })
-  add_content(ElementComponent::Components::BreadcrumbItem.new(active: true) { add_content("Active") })
+breadcrumb = ElementComponent::Components::Breadcrumb.new(class: "custom-breadcrumb") do |b|
+  b.add_content(ElementComponent::Components::BreadcrumbItem.new(href: "/") { |item| item.add_content("Home") })
+  b.add_content(ElementComponent::Components::BreadcrumbItem.new(active: true) { |item| item.add_content("Active") })
 end
 puts "=== Breadcrumb with Custom Class ==="
 puts breadcrumb.render

data/examples/button_example.rb

@@ -57,8 +57,8 @@ puts
 # =============================================================================
 # Button with Block
 # =============================================================================
-btn = ElementComponent::Components::Button.new(variant: :info) do
-  add_content("Info Button")
+btn = ElementComponent::Components::Button.new(variant: :info) do |b|
+  b.add_content("Info Button")
 end
 puts "=== Button with Block ==="
 puts btn.render

data/examples/button_group_example.rb

@@ -36,9 +36,9 @@ puts
 # =============================================================================
 # Button Group with Size
 # =============================================================================
-group = ElementComponent::Components::ButtonGroup.new(size: :sm) do
-  add_content(ElementComponent::Components::Button.new(variant: :success) { add_content("Save") })
-  add_content(ElementComponent::Components::Button.new(variant: :danger) { add_content("Delete") })
+group = ElementComponent::Components::ButtonGroup.new(size: :sm) do |g|
+  g.add_content(ElementComponent::Components::Button.new(variant: :success) { |b| b.add_content("Save") })
+  g.add_content(ElementComponent::Components::Button.new(variant: :danger) { |b| b.add_content("Delete") })
 end
 puts "=== Small Button Group ==="
 puts group.render

data/examples/card_example.rb

@@ -14,10 +14,10 @@ puts
 # =============================================================================
 # Card with Header, Body, and Footer
 # =============================================================================
-card = ElementComponent::Components::Card.new do
-  add_content(ElementComponent::Components::CardHeader.new { add_content("Header") })
-  add_content(ElementComponent::Components::CardBody.new { add_content("Body content here") })
-  add_content(ElementComponent::Components::CardFooter.new { add_content("Footer") })
+card = ElementComponent::Components::Card.new do |c|
+  c.add_content(ElementComponent::Components::CardHeader.new { |ch| ch.add_content("Header") })
+  c.add_content(ElementComponent::Components::CardBody.new { |cb| cb.add_content("Body content here") })
+  c.add_content(ElementComponent::Components::CardFooter.new { |cf| cf.add_content("Footer") })
 end
 puts "=== Card with Header, Body, Footer ==="
 puts card.render
@@ -26,10 +26,10 @@ puts
 # =============================================================================
 # Card with Title and Text
 # =============================================================================
-card = ElementComponent::Components::Card.new do
-  add_content(ElementComponent::Components::CardBody.new do
-    add_content(ElementComponent::Components::CardTitle.new { add_content("Card Title") })
-    add_content(ElementComponent::Components::CardText.new { add_content("Some quick example text.") })
+card = ElementComponent::Components::Card.new do |c|
+  c.add_content(ElementComponent::Components::CardBody.new do |cb|
+    cb.add_content(ElementComponent::Components::CardTitle.new { |ct| ct.add_content("Card Title") })
+    cb.add_content(ElementComponent::Components::CardText.new { |ct| ct.add_content("Some quick example text.") })
   end)
 end
 puts "=== Card with Title and Text ==="
@@ -39,11 +39,11 @@ puts
 # =============================================================================
 # Card with Image
 # =============================================================================
-card = ElementComponent::Components::Card.new do
-  add_content(ElementComponent::Components::CardImage.new(src: "image.jpg", top: true))
-  add_content(ElementComponent::Components::CardBody.new do
-    add_content(ElementComponent::Components::CardTitle.new { add_content("Image Card") })
-    add_content(ElementComponent::Components::CardText.new { add_content("Card with an image on top.") })
+card = ElementComponent::Components::Card.new do |c|
+  c.add_content(ElementComponent::Components::CardImage.new(src: "image.jpg", top: true))
+  c.add_content(ElementComponent::Components::CardBody.new do |cb|
+    cb.add_content(ElementComponent::Components::CardTitle.new { |ct| ct.add_content("Image Card") })
+    cb.add_content(ElementComponent::Components::CardText.new { |ct| ct.add_content("Card with an image on top.") })
   end)
 end
 puts "=== Card with Image ==="

data/examples/carousel_example.rb

@@ -5,12 +5,12 @@ require_relative "../lib/element_component"
 # =============================================================================
 # Basic Carousel
 # =============================================================================
-carousel = ElementComponent::Components::Carousel.new(id: "basicCarousel") do
-  add_content(ElementComponent::Components::CarouselItem.new(active: true) do
-    add_content(%(<img src="slide1.jpg" class="d-block w-100" alt="Slide 1">))
+carousel = ElementComponent::Components::Carousel.new(id: "basicCarousel") do |c|
+  c.add_content(ElementComponent::Components::CarouselItem.new(active: true) do |item|
+    item.add_content(%(<img src="slide1.jpg" class="d-block w-100" alt="Slide 1">))
   end)
-  add_content(ElementComponent::Components::CarouselItem.new do
-    add_content(%(<img src="slide2.jpg" class="d-block w-100" alt="Slide 2">))
+  c.add_content(ElementComponent::Components::CarouselItem.new do |item|
+    item.add_content(%(<img src="slide2.jpg" class="d-block w-100" alt="Slide 2">))
   end)
 end
 puts "=== Basic Carousel ==="
@@ -20,17 +20,17 @@ puts
 # =============================================================================
 # Carousel with Captions
 # =============================================================================
-carousel = ElementComponent::Components::Carousel.new(id: "captionCarousel") do
-  add_content(ElementComponent::Components::CarouselItem.new(active: true) do
-    add_content(%(<img src="hero.jpg" class="d-block w-100" alt="Hero">))
-    add_content(ElementComponent::Components::CarouselCaption.new do
-      add_content(%(<h5>First slide</h5><p>Some description here.</p>))
+carousel = ElementComponent::Components::Carousel.new(id: "captionCarousel") do |c|
+  c.add_content(ElementComponent::Components::CarouselItem.new(active: true) do |item|
+    item.add_content(%(<img src="hero.jpg" class="d-block w-100" alt="Hero">))
+    item.add_content(ElementComponent::Components::CarouselCaption.new do |cap|
+      cap.add_content(%(<h5>First slide</h5><p>Some description here.</p>))
     end)
   end)
-  add_content(ElementComponent::Components::CarouselItem.new do
-    add_content(%(<img src="hero2.jpg" class="d-block w-100" alt="Hero 2">))
-    add_content(ElementComponent::Components::CarouselCaption.new do
-      add_content(%(<h5>Second slide</h5><p>Another description.</p>))
+  c.add_content(ElementComponent::Components::CarouselItem.new do |item|
+    item.add_content(%(<img src="hero2.jpg" class="d-block w-100" alt="Hero 2">))
+    item.add_content(ElementComponent::Components::CarouselCaption.new do |cap|
+      cap.add_content(%(<h5>Second slide</h5><p>Another description.</p>))
     end)
   end)
 end
@@ -41,9 +41,9 @@ puts
 # =============================================================================
 # Fade Carousel
 # =============================================================================
-carousel = ElementComponent::Components::Carousel.new(id: "fadeCarousel", fade: true) do
-  add_content(ElementComponent::Components::CarouselItem.new(active: true) { add_content("Slide 1") })
-  add_content(ElementComponent::Components::CarouselItem.new { add_content("Slide 2") })
+carousel = ElementComponent::Components::Carousel.new(id: "fadeCarousel", fade: true) do |c|
+  c.add_content(ElementComponent::Components::CarouselItem.new(active: true) { |item| item.add_content("Slide 1") })
+  c.add_content(ElementComponent::Components::CarouselItem.new { |item| item.add_content("Slide 2") })
 end
 puts "=== Fade Carousel ==="
 puts carousel.render
@@ -52,8 +52,8 @@ puts
 # =============================================================================
 # Carousel Without Indicators
 # =============================================================================
-carousel = ElementComponent::Components::Carousel.new(id: "noIndicators", indicators: false) do
-  add_content(ElementComponent::Components::CarouselItem.new(active: true) { add_content("Slide 1") })
+carousel = ElementComponent::Components::Carousel.new(id: "noIndicators", indicators: false) do |c|
+  c.add_content(ElementComponent::Components::CarouselItem.new(active: true) { |item| item.add_content("Slide 1") })
 end
 puts "=== Carousel Without Indicators ==="
 puts carousel.render
@@ -62,8 +62,8 @@ puts
 # =============================================================================
 # Carousel Without Controls
 # =============================================================================
-carousel = ElementComponent::Components::Carousel.new(id: "noControls", controls: false) do
-  add_content(ElementComponent::Components::CarouselItem.new(active: true) { add_content("Slide 1") })
+carousel = ElementComponent::Components::Carousel.new(id: "noControls", controls: false) do |c|
+  c.add_content(ElementComponent::Components::CarouselItem.new(active: true) { |item| item.add_content("Slide 1") })
 end
 puts "=== Carousel Without Controls ==="
 puts carousel.render
@@ -72,9 +72,11 @@ puts
 # =============================================================================
 # Custom Interval
 # =============================================================================
-carousel = ElementComponent::Components::Carousel.new(id: "intervalCarousel") do
-  add_content(ElementComponent::Components::CarouselItem.new(active: true, interval: 5000) { add_content("Slide 1") })
-  add_content(ElementComponent::Components::CarouselItem.new(interval: 2000) { add_content("Slide 2") })
+carousel = ElementComponent::Components::Carousel.new(id: "intervalCarousel") do |c|
+  c.add_content(ElementComponent::Components::CarouselItem.new(active: true, interval: 5000) do |item|
+    item.add_content("Slide 1")
+  end)
+  c.add_content(ElementComponent::Components::CarouselItem.new(interval: 2000) { |item| item.add_content("Slide 2") })
 end
 puts "=== Carousel with Custom Interval ==="
 puts carousel.render