bulma-phlex 0.11.0 → 0.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1ee83e739b84c897bbb801d7be66a49ce909b940399e35b19d2ce0ce310febc6
-  data.tar.gz: c3c1c066c77c916a51eb9d604f58a1e88291436e67e0014a821b40f3a2d32e66
+  metadata.gz: '08c8b05063a914b32d039a238e6e37ee2be9c5cc2a5dab9b0d60010a6fde1c51'
+  data.tar.gz: b31a0424a69cbaec9abba85feb9931dc677b86f22ec8565bedd3a1655bd3b9a0
 SHA512:
-  metadata.gz: 5afc7194917ea792bf09f7a83ca58d8271b765a2d2a7eabbb6479b631c5935ebca1d3988a19a8d8e79d6ffe5d4a84fc2a4e507d4e455abaac98da0514d542e4d
-  data.tar.gz: dc8cee0e55182192282e766c734de97e252f2c5c34019a82061ff26c23dab7b8cddbc7c5888c2b32b728d4801a9441aad953cfeedcc7d613597006150a9cfdd9
+  metadata.gz: 6934c59c858952b9cdb400411490ac3e752b0da5f759026375065c559eb5092287529a61f95de588c7bf670d2c9b9a9087898e0221757968d0abaec0f7719217
+  data.tar.gz: e1def51be46b4c2efc9baa295d50878b0b59df55a8c16003745055eb3814c3e69c03b2753b1e3cfc643c1f01902788a2e09b6122b6e6f3981ccb75e50e2e6e99

data/README.md

@@ -6,20 +6,6 @@
 
 This gem provides a set of ready-to-use [Phlex](https://github.com/phlex-ruby/phlex) components for common [Bulma](https://bulma.io/) components and elements, making it easy to build beautiful, responsive interfaces with a clean, Ruby-focused API.
 
-## Upgrading to 0.8
-
-> [!IMPORTANT]
-> The 0.8.0 release includes breaking changes. The namespace for the components has been changed from `Components::Bulma` to `Components::BulmaPhlex`.
-
-This can generally be handled with a *Find-and-Replace*:
-
-**Find:** `Bulma::`  
-**Replace:** `BulmaPhlex::`
-
-Note that this change was also applied to the expected Stimulus controllers. References such as the Navigation bar have been updated from `bulma--navigation-bar` to `bulma-phlex--navigation-bar`.
-
-Finally, the optional Rails extensions for the Card and Table components have been moved to the `bulma-phlex-rails` gem. If you are using this with Rails, you should use [the `bulma-phlex-rails` gem](https://github.com/RockSolt/bulma-phlex-rails). It provides both the component extensions as well as JavaScript for the Dropdown, Navigation Bar, and Tabs components.
-
 ## Table of Contents
 
 - [Installation](#installation)
@@ -28,10 +14,13 @@ Finally, the optional Rails extensions for the Card and Table components have be
   - [Card](#card)
   - [Columns](#columns)
   - [Dropdown](#dropdown)
+  - [File Upload](#file-upload)
   - [Form Field](#form-field)
   - [Grid](#grid)
+  - [Hero](#hero)
   - [Icon](#icon)
   - [Level](#level)
+  - [Modal](#modal)
   - [NavigationBar](#navigationbar)
   - [Notification](#notification)
   - [Pagination](#pagination)
@@ -69,8 +58,8 @@ gem install bulma-phlex
 
 This gem requires:
 
-- Ruby 3.4 or higher
-- Phlex 2.0.2 or higher
+- Ruby 3.2.10 or higher
+- Phlex 2.4.1 or higher
 - Bulma CSS (which you'll need to include in your application)
 
 ### Required Setup
@@ -96,6 +85,11 @@ The [Button](https://bulma.io/documentation/elements/button/) component provides
 BulmaPhlex::Button(color: "primary", size: "large", icon: "fas fa-thumbs-up") { "Like" }
 ```
 
+The component can generate a button, anchor, or input element. By default it generates a `<button>`
+element. If the `href` attribute is provided, it generates an `<a>` element. To generate an `<input>`
+element, use the keyword argument `input` with a value of the type of input (button, reset, or submit).
+
+
 **Constructor Keyword Arguments:**
 
 - `color`: Sets the button color (e.g., "primary", "link", "info", "success", "warning", "danger").
@@ -106,6 +100,7 @@ BulmaPhlex::Button(color: "primary", size: "large", icon: "fas fa-thumbs-up") {
 - `outlined`: If `true`, makes the button outlined.
 - `inverted`: If `true`, makes the button inverted.
 - `rounded`: If `true`, makes the button rounded.
+- `input`: If provided, generates an `input` element instead of a `button`. The value should be the type of input: "button", "reset", or "submit".
 - `icon`: If provided, adds an icon to the button. Should be a string representing the 
   icon class (e.g., "fa-solid fa-check").
 - `icon_left`: If provided, adds an icon to the left of the button text. Should be a string
@@ -202,6 +197,30 @@ end
 - `divider`: Adds a divider line.
 
 
+### File Upload
+
+The [File Upload](https://bulma.io/documentation/form/file/) component provides the structure for a file input. The component generates the container and additional elements, then yields for the file input.
+
+If the name keyword argument is set to true, the component will also generate the file name display element and add the necessary data attributes for it to work with the default Stimulus controller. The controller is not provided by this library, but you can create your own Stimulus controller to handle the logic. Here is [an implementation of a Stimulus controller for Bulma file upload](https://github.com/RockSolt/bulma-phlex-rails/blob/main/app/javascript/controllers/bulma_phlex/file_input_display_controller.js). If you want to use a custom builder for the data attributes, you can pass that in as well. 
+
+```ruby
+BulmaPhlex::FileUpload.new(color: "primary") do |data_attributes|
+  input(type: "file", class: "file-input", data: data_attributes)
+end
+```
+
+**Constructor Keyword Arguments:**
+
+- `color`: Sets the color of the file input
+- `size`: Sets the size of the file input
+- `name`: If `true`, includes the file name display element
+- `align`: Aligns the file input: right or centered
+- `fullwidth`: If `true`, makes the file input full width
+- `boxed`: If `true`, makes the file input boxed
+- `data_attributes_builder`: A custom builder for the data attributes used for Stimulus integration. If not provided, a default builder is used with the controller name "bulma-phlex--file-input-display".
+
+Any additional HTML attributes passed to the constructor will be applied to the outer container div. 
+
 ### Form Field
 
 The [Form Field](https://bulma.io/documentation/form/general/) component provides a way to create form fields with labels, inputs, and help text, following Bulma's form styling conventions. It also supports adding icons to the input, as well as tagging the field as a column or grid cell.
@@ -256,6 +275,25 @@ end
 - `row_gap`: (optional) Sets the row gap size between grid items, from 1-8 with 0.5 increments.
 
 
+
+### Hero
+
+The [Hero](https://bulma.io/documentation/layout/hero/) component provides a large, full-width section for showcasing important content or calls to action, with support for different sizes and colors.
+
+There are three ways to invoke the component:
+
+- with a title and subtitle argument
+- with a block for the hero body content
+- invoke methods head, body, and footer on the yielded component and pass blocks to define each section
+
+Additionally, both the size and color of the Hero can be specified through keyword arguments in the
+constructor. Any additional HTML attributes given to the constructor will be added to the containing `div`.
+
+```ruby
+BulmaPhlex::Hero(title: "Welcome to My Site", subtitle: "We're glad you're here!", color: "primary")
+```
+
+
 ### Icon
 
 The [Icon](https://bulma.io/documentation/elements/icon/) component provides a way to display icons using Font Awesome or other icon libraries, with support for different sizes and colors.
@@ -298,6 +336,27 @@ end
 
 Pass in any HTML attributes to the constructor to have them applied to the level container div.
 
+
+### Modal
+
+The [Modal](https://bulma.io/documentation/components/modal/) component provides a way to create modal dialogs with customizable content and styling options.
+
+```ruby
+BulmaPhlex::Modal.new do
+  div(class: "box") do
+    h1(class: "title") { "Modal Title" }
+    p { "This is the modal content." }
+  end
+end
+```
+
+**Constructor Keyword Arguments:**
+
+- `data_attributes_builder`: A builder object that responds to `for_container`, `for_background`, and `for_close_button`, which should return a hash of data attributes for the container, background, and close button, respectively. By default, this uses the nested `StimulusDataAttributes` class with the controller name `bulma-phlex--modal`. You can create your own builder to integrate with a different JavaScript framework or custom logic.
+
+Any additional HTML attributes passed to the constructor will be applied to the modal container div. The modal can be toggled by adding or removing the `is-active` class on the container. (Nothing in the component adds the `is-active` class, so you will need to handle that with your own JavaScript or Stimulus controller.)
+
+
 ### NavigationBar
 
 The [NavigationBar](https://bulma.io/documentation/components/navbar/) component provides a responsive navigation header with support for branding, navigation links, and dropdown menus.
@@ -567,6 +626,22 @@ BulmaPhlex::Title("Dr. Strangelove", size: 2, subtitle: "Or: How I Learned to St
 - `subtitle_size`: (optional) An integer from 1 to 6 indicating the size of the subtitle. If not provided and a title size is given, it defaults to `size + 2`.
 - `spaced`: (optional) A boolean indicating whether to add the `is-spaced` class to the title.
 
+
+## Upgrading to 0.8
+
+> [!IMPORTANT]
+> The 0.8.0 release includes breaking changes. The namespace for the components has been changed from `Components::Bulma` to `Components::BulmaPhlex`.
+
+This can generally be handled with a *Find-and-Replace*:
+
+**Find:** `Bulma::`
+**Replace:** `BulmaPhlex::`
+
+Note that this change was also applied to the expected Stimulus controllers. References such as the Navigation bar have been updated from `bulma--navigation-bar` to `bulma-phlex--navigation-bar`.
+
+Finally, the optional Rails extensions for the Card and Table components have been moved to the `bulma-phlex-rails` gem. If you are using this with Rails, you should use [the `bulma-phlex-rails` gem](https://github.com/RockSolt/bulma-phlex-rails). It provides both the component extensions as well as JavaScript for the Dropdown, Navigation Bar, and Tabs components.
+
+
 ## Development
 
 After checking out the repo, run `bundle install` to install dependencies. Then, run `rake test` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
@@ -583,4 +658,4 @@ The gem is available as open source under the terms of the [MIT License](https:/
 
 ## Credits
 
-This leverages the [Bulma CSS library](https://bulma.io/documentation/) and [Phlex](https://www.phlex.fun/) but is not endorsed or certified by either. We are fans of the both and this makes using them together easier.
+This leverages the [Bulma CSS library](https://bulma.io/documentation/) and [Phlex](https://www.phlex.fun/) but is not endorsed or certified by either. We are fans of both and this makes using them together easier.

data/lib/bulma_phlex/button.rb

@@ -6,6 +6,10 @@ module BulmaPhlex
   # This component implements the [Bulma button](https://bulma.io/documentation/elements/button/)
   # interface. It provides a simple way to create buttons with the appropriate Bulma classes.
   #
+  # The component can generate a button, anchor, or input element. By default it generates a `<button>`
+  # element. If the `href` attribute is provided, it generates an `<a>` element. To generate an `<input>`
+  # element, use the keyword argument `input` with a value of the type of input (button, reset, or submit).
+  #
   # ## Options
   #
   # - `color`: Sets the button color (e.g., "primary", "link", "info", "success", "warning", "danger").
@@ -23,7 +27,28 @@ module BulmaPhlex
   # - `icon_right`: If provided, adds an icon to the right of the button text. Should be a string
   #   representing the icon class (e.g., "fa-solid fa-check").
   class Button < Base
-    def initialize(color: nil, # rubocop:disable Metrics/ParameterLists
+    # Returns an array of CSS classes for the button based on the provided options.
+    def self.classes_for(color: nil, # rubocop:disable Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity
+                         mode: nil,
+                         size: nil,
+                         responsive: false,
+                         fullwidth: false,
+                         outlined: false,
+                         inverted: false,
+                         rounded: false)
+      classes = ["button"]
+      classes << "is-#{color}" if color
+      classes << "is-#{mode}" if mode
+      classes << "is-#{size}" if size
+      classes << "is-responsive" if responsive
+      classes << "is-fullwidth" if fullwidth
+      classes << "is-outlined" if outlined
+      classes << "is-inverted" if inverted
+      classes << "is-rounded" if rounded
+      classes
+    end
+
+    def initialize(color: nil,
                    mode: nil,
                    size: nil,
                    responsive: false,
@@ -34,41 +59,28 @@ module BulmaPhlex
                    icon: nil,
                    icon_left: nil,
                    icon_right: nil,
+                   input: nil,
                    **html_attributes)
-      @color = color
-      @mode = mode
-      @size = size
-      @responsive = responsive
-      @fullwidth = fullwidth
-      @outlined = outlined
-      @inverted = inverted
-      @rounded = rounded
+      @classes = self.class.classes_for(color:, mode:, size:, responsive:, fullwidth:, outlined:, inverted:, rounded:)
+      @input = input
       @icon_left = icon || icon_left
       @icon_right = icon_right
       @html_attributes = html_attributes
     end
 
     def view_template(&)
-      button(**mix({ class: button_classes }, @html_attributes)) do
-        Icon(@icon_left) if @icon_left
-        yield if block_given?
-        Icon(@icon_right) if @icon_right
-      end
-    end
-
-    private
+      options = mix({ class: @classes }, @html_attributes)
 
-    def button_classes # rubocop:disable Metrics/CyclomaticComplexity, Metrics/PerceivedComplexity
-      classes = ["button"]
-      classes << "is-#{@color}" if @color
-      classes << "is-#{@mode}" if @mode
-      classes << "is-#{@size}" if @size
-      classes << "is-responsive" if @responsive
-      classes << "is-fullwidth" if @fullwidth
-      classes << "is-outlined" if @outlined
-      classes << "is-inverted" if @inverted
-      classes << "is-rounded" if @rounded
-      classes
+      if @input
+        input(**options, type: @input)
+      else
+        element_type = @html_attributes.key?(:href) ? :a : :button
+        tag(element_type, **options) do
+          Icon(@icon_left) if @icon_left
+          yield if block_given?
+          Icon(@icon_right) if @icon_right
+        end
+      end
     end
   end
 end

data/lib/bulma_phlex/columns.rb

@@ -14,7 +14,7 @@ module BulmaPhlex
   # - `centered`: (Boolean, optional) If true, centers the columns.
   # - `vcentered`: (Boolean, optional) If true, vertically centers the columns.
   class Columns < BulmaPhlex::Base
-    def initialize(minimum_breakpoint: nil, # rubocop:disable Metrics/ParameterLists
+    def initialize(minimum_breakpoint: nil,
                    multiline: false,
                    gap: nil,
                    centered: false,

data/lib/bulma_phlex/file_upload.rb

@@ -0,0 +1,83 @@
+# frozen_string_literal: true
+
+module BulmaPhlex
+  # # File Upload
+  #
+  # The file upload component allows you to create a styled file input using Bulma's classes.
+  #
+  # ## Options
+  #
+  # - `color`: Sets the color of the file input
+  # - `size`: Sets the size of the file input
+  # - `name`: If `true`, includes the file name display element
+  # - `align`: Aligns the file input: right or centered
+  # - `fullwidth`: If `true`, makes the file input full width
+  # - `boxed`: If `true`, makes the file input boxed
+  # - `data_attributes_builder`: A custom builder for the data attributes used for Stimulus integration. If
+  #   not provided, a default builder is used with the controller name "bulma-phlex--file-input-display".
+  class FileUpload < Base
+    DataAttributesBuilder = Data.define(:for_file, :for_file_input, :for_file_list)
+
+    def self.stimulus_data_attributes(controller)
+      DataAttributesBuilder.new(
+        for_file: { controller: controller },
+        for_file_input: { "#{controller}-target": "fileInput", action: "#{controller}#show" },
+        for_file_list: { "#{controller}-target": "fileList" }
+      )
+    end
+
+    def initialize(color: nil,
+                   size: nil,
+                   name: false,
+                   align: nil,
+                   fullwidth: false,
+                   boxed: false,
+                   data_attributes_builder: nil)
+      @color = color
+      @size = size
+      @name = name
+      @align = align
+      @fullwidth = fullwidth
+      @boxed = boxed
+
+      return unless @name
+
+      @data_attributes_builder = data_attributes_builder ||
+                                 self.class.stimulus_data_attributes("bulma-phlex--file-input-display")
+    end
+
+    def view_template
+      div(class: file_classes, data: @data_attributes_builder&.for_file) do
+        label(class: "file-label") do
+          yield(@data_attributes_builder&.for_file_input)
+          span(class: "file-cta") do
+            span(class: "file-icon") do
+              i(class: "fas fa-upload")
+            end
+            span(class: "file-label") { plain " Choose a file… " }
+          end
+          file_name_span if @name
+        end
+      end
+    end
+
+    private
+
+    def file_classes
+      classes = ["file"]
+      classes << "is-#{@color}" if @color
+      classes << "is-#{@size}" if @size
+      classes << "has-name" if @name
+      classes << "is-#{@align}" if @align
+      classes << "is-fullwidth" if @fullwidth
+      classes << "is-boxed" if @boxed
+      classes
+    end
+
+    def file_name_span
+      span(class: "file-name is-flex", data: @data_attributes_builder&.for_file_list) do
+        plain "No file uploaded"
+      end
+    end
+  end
+end

data/lib/bulma_phlex/form_control.rb

@@ -3,18 +3,40 @@
 module BulmaPhlex
   # # Form Control
   #
-  # The Bulma Form Control is used to wrap form elements like inputs, selects, and textareas. Additional classes can
-  # be added via the `classes` argument.
+  # The Bulma Form Control is used to wrap form elements like inputs, selects, and buttons. It can optionally
+  # include icons on the left and/or right side of the control.
+  #
+  # ## Options
+  #
+  # - `icon_left`: If provided, adds an icon to the left of the control. Should be a string representing
+  #   the icon class (e.g., "fas fa-check").
+  # - `icon_right`: If provided, adds an icon to the right of the control. Should be a string representing
+  #   the icon class (e.g., "fas fa-check").
   #
   # ## References
   # - [Bulma Form Control](https://bulma.io/documentation/form/general/#form-control)
   class FormControl < Phlex::HTML
-    def initialize(**attributes)
-      @attributes = attributes.compact
+    def initialize(icon_left: nil, icon_right: nil, **html_attributes)
+      @icon_left = icon_left
+      @icon_right = icon_right
+      @html_attributes = html_attributes
     end
 
     def view_template(&)
-      div(**mix({ class: "control" }, @attributes), &)
+      div(**mix({ class: classes }, @html_attributes)) do
+        raw yield
+        Icon(@icon_left, size: :small, left: true) if @icon_left
+        Icon(@icon_right, size: :small, right: true) if @icon_right
+      end
+    end
+
+    private
+
+    def classes
+      ["control"].tap do |classes|
+        classes << "has-icons-left" if @icon_left
+        classes << "has-icons-right" if @icon_right
+      end
     end
   end
 end

data/lib/bulma_phlex/form_field.rb

@@ -101,10 +101,8 @@ module BulmaPhlex
 
       div(class: field_classes) do
         render_label
-        render FormControl.new(class: control_classes) do
+        render FormControl.new(icon_left: @icon_left, icon_right: @icon_right) do
           raw @control_builder.call
-          Icon(@icon_left, size: :small, left: true) if @icon_left
-          Icon(@icon_right, size: :small, right: true) if @icon_right
         end
         p(class: "help") { @help } if @help
       end
@@ -146,12 +144,5 @@ module BulmaPhlex
         raw @label_builder&.call
       end
     end
-
-    def control_classes
-      [].tap do |classes|
-        classes << "has-icons-left" if @icon_left
-        classes << "has-icons-right" if @icon_right
-      end
-    end
   end
 end

data/lib/bulma_phlex/grid.rb

@@ -15,7 +15,7 @@ module BulmaPhlex
   # - `column_gap`: (optional) Sets the column gap size between grid items from 1-8 with 0.5 increments.
   # - `row_gap`: (optional) Sets the row gap size between grid items from 1-8 with 0.5 increments.
   class Grid < BulmaPhlex::Base
-    def initialize(fixed_columns: nil, # rubocop:disable Metrics/ParameterLists
+    def initialize(fixed_columns: nil,
                    auto_count: false,
                    minimum_column_width: nil,
                    gap: nil,

data/lib/bulma_phlex/hero.rb

@@ -0,0 +1,74 @@
+# frozen_string_literal: true
+
+module BulmaPhlex
+  # ## Hero
+  #
+  # This component implements the [Bulma Hero](https://bulma.io/documentation/layout/hero/) layout. There are
+  # three ways to invoke the component:
+  #
+  # - with a title and subtitle argument
+  # - with a block for the hero body content
+  # - invoke methods head, body, and footer on the yielded component and pass blocks to define each section
+  #
+  # Additionally, both the size and color of the Hero can be specified through keyword arguments in the
+  # constructor. Any additional HTML attributes given to the constructor will be added to the containing `div`.
+  class Hero < BulmaPhlex::Base
+    def initialize(title: nil, subtitle: nil, color: nil, size: nil, **html_attributes)
+      @title = title
+      @subtitle = subtitle
+      @color = color
+      @size = size
+      @html_attributes = html_attributes
+    end
+
+    def head(&block)
+      @head = block
+    end
+
+    def body(&block)
+      @body = block
+    end
+
+    def foot(&block)
+      @foot = block
+    end
+
+    def view_template(&)
+      output = capture(&)
+
+      section(**mix({ class: hero_classes }, @html_attributes)) do
+        if @body.present?
+          building_blocks(&)
+        else
+          div(class: "hero-body") do
+            if output.present?
+              output
+            else
+              title_and_subtitle
+            end
+          end
+        end
+      end
+    end
+
+    private
+
+    def hero_classes
+      classes = ["hero"]
+      classes << "is-#{@color}" if @color
+      classes << "is-#{@size}" if @size
+      classes
+    end
+
+    def building_blocks(&)
+      div(class: "hero-head") { @head.call } if @head
+      div(class: "hero-body") { @body.call } if @body
+      div(class: "hero-foot") { @foot.call } if @foot
+    end
+
+    def title_and_subtitle
+      p(class: "title") { @title } if @title
+      p(class: "subtitle") { @subtitle } if @subtitle
+    end
+  end
+end

data/lib/bulma_phlex/icon.rb

@@ -22,7 +22,7 @@ module BulmaPhlex
   # BulmaPhlex::Icon.new("fas fa-home", color: :primary, size: :large, text_right: "Home")
   # ```
   class Icon < BulmaPhlex::Base
-    def initialize(icon, # rubocop:disable Metrics/ParameterLists
+    def initialize(icon,
                    text_right: nil,
                    text_left: nil,
                    size: nil,

data/lib/bulma_phlex/modal.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module BulmaPhlex
+  # ## Modal
+  #
+  # The Bulma Modal component is used to create modal dialogs. It consists of a background,
+  # content area, and a close button. The content of the modal can be defined using the block
+  # passed to the `call` method.
+  #
+  # The constructor accepts an optional `data_attributes_builder` argument, which allows you to
+  # provide data attributes for the container, background, and close button. By default, it uses a
+  # `StimulusDataAttributes` instance with the controller name "bulma-phlex--modal". You can provide your
+  # own builder if you want to use a different controller or customize the data attributes further.
+  #
+  # Any additional HTML attributes passed to the constructor will be applied to the outer `<div>`
+  # element of the modal.
+  class Modal < BulmaPhlex::Base
+    StimulusDataAttributes = Data.define(:stimulus_controller) do
+      def for_container = { controller: stimulus_controller }
+      def for_background = { action: "click->bulma-phlex--modal#close" }
+      def for_close_button = { action: "bulma-phlex--modal#close" }
+    end
+
+    def initialize(data_attributes_builder: StimulusDataAttributes.new("bulma-phlex--modal"), **html_attributes)
+      @data_attributes_builder = data_attributes_builder
+      @html_attributes = html_attributes
+    end
+
+    def view_template(&)
+      container = { class: "modal", data: @data_attributes_builder.for_container }
+      div(**mix(container, @html_attributes)) do
+        div(class: "modal-background", data: @data_attributes_builder.for_background)
+        div(class: "modal-content", &)
+        button(class: "modal-close is-large", aria: { label: "close" }, data: @data_attributes_builder.for_close_button)
+      end
+    end
+  end
+end

data/lib/bulma_phlex/navigation_bar.rb

@@ -49,7 +49,7 @@ module BulmaPhlex
   #
   # Any additional HTML attributes passed to the component will be applied to the `<nav>` element.
   class NavigationBar < BulmaPhlex::Base
-    def initialize(container: false, # rubocop:disable Metrics/ParameterLists
+    def initialize(container: false,
                    color: nil,
                    transparent: false,
                    spaced: false,

data/lib/bulma_phlex/table.rb

@@ -43,7 +43,7 @@ module BulmaPhlex
   # will be rendered in the table footer. The block should accept a page number and return the
   # corresponding URL for that page.
   class Table < BulmaPhlex::Base
-    def initialize(rows, # rubocop:disable Metrics/ParameterLists
+    def initialize(rows,
                    bordered: false,
                    striped: false,
                    narrow: false,

data/lib/bulma_phlex/tabs.rb

@@ -69,7 +69,7 @@ module BulmaPhlex
       end
     end
 
-    def initialize(align: nil, # rubocop:disable Metrics/ParameterLists
+    def initialize(align: nil,
                    size: nil,
                    boxed: false,
                    toggle: false,
@@ -127,7 +127,7 @@ module BulmaPhlex
 
       div(class: tabs_classes) do
         ul(**attributes) do
-          @tabs.each { render it }
+          @tabs.each { |tab| render tab }
         end
       end
     end
@@ -148,7 +148,7 @@ module BulmaPhlex
       attributes[:id] = "#{@html_attributes[:id]}-content" if @html_attributes[:id]
 
       div(**attributes) do
-        @contents.each { render it }
+        @contents.each { |content| render content }
       end
     end
   end

data/lib/bulma_phlex/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module BulmaPhlex
-  VERSION = "0.11.0"
+  VERSION = "0.12.0"
 end

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: bulma-phlex
 version: !ruby/object:Gem::Version
-  version: 0.11.0
+  version: 0.12.0
 platform: ruby
 authors:
 - Todd Kummer
 bindir: bin
 cert_chain: []
-date: 2026-02-13 00:00:00.000000000 Z
+date: 2026-02-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: phlex
@@ -69,11 +69,14 @@ files:
 - lib/bulma_phlex/card.rb
 - lib/bulma_phlex/columns.rb
 - lib/bulma_phlex/dropdown.rb
+- lib/bulma_phlex/file_upload.rb
 - lib/bulma_phlex/form_control.rb
 - lib/bulma_phlex/form_field.rb
 - lib/bulma_phlex/grid.rb
+- lib/bulma_phlex/hero.rb
 - lib/bulma_phlex/icon.rb
 - lib/bulma_phlex/level.rb
+- lib/bulma_phlex/modal.rb
 - lib/bulma_phlex/navigation_bar.rb
 - lib/bulma_phlex/navigation_bar_dropdown.rb
 - lib/bulma_phlex/notification.rb
@@ -99,7 +102,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: 3.4.0
+      version: 3.2.10
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="