bulma-phlex 0.16.0 → 0.18.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 358df6739ab960f7d8b3799001c40b0d80a6e1c1d599b31b115b67bdcae46645
-  data.tar.gz: 54a368dec6bf6dfa7c21f32779e63651bea141070367880f7b1b938da86c92f3
+  metadata.gz: d62a43330834f293718993ab3227796dbb76d3ae57b4c0efca10df5dc1e35a6b
+  data.tar.gz: 1b310813d75fe054a993a02d258a05fa52ba4f15db249d2e269c1871fdf2a025
 SHA512:
-  metadata.gz: 81cea339f39b95a17bd43e18f294944327744c81601fb03d1d7e7975e397973ebfa488350540eeb008e587c74ae3805ce8ff3ec15aa193277bd68bae03cee201
-  data.tar.gz: 021f7fc3b32d02a16c1c08a695e915b8beca73219b86da9766c58077afa5b13e205d337fd2ccace80378905076ccb821d2c9c244313ace1c1c32c38752258045
+  metadata.gz: a0b4c95ba751e8a2f5718b08bcd389ebe055f087271a1ee77f06c2e9292088bc4a770aeeacdb31c304349ac372373cd40ae5fd90f498eef15a1c6502732028cc
+  data.tar.gz: 2579cf14a6d59153dc4e44781eba67b451513e50d551e59141be6f61be9d130862c6553643b150393941a40f7ea99f10f40ff10dd824489ea12d18afdaeff875

data/README.md

@@ -9,6 +9,7 @@ This gem provides a set of ready-to-use [Phlex](https://github.com/phlex-ruby/ph
 ## Table of Contents
 
 - [Installation](#installation)
+- [Configuration](#configuration)
 - [Usage](#usage)
   - [Breadcrumb](#breadcrumb)
   - [Button](#button)
@@ -20,7 +21,10 @@ This gem provides a set of ready-to-use [Phlex](https://github.com/phlex-ruby/ph
   - [Grid](#grid)
   - [Hero](#hero)
   - [Icon](#icon)
+  - [Image](#image)
   - [Level](#level)
+  - [Media Object](#media-object)
+  - [Menu](#menu)
   - [Message](#message)
   - [Modal](#modal)
   - [NavigationBar](#navigationbar)
@@ -74,6 +78,24 @@ This gem requires:
 require "bulma-phlex"
 ```
 
+## Configuration
+
+Icons chosen internally by components can be configured globally. The default icons are Font Awesome 7 solid icons, but you can change them to other icons by providing the appropriate class names.
+
+```ruby
+BulmaPhlex.configure do |config|
+  config.icons.sort = {
+    ascending: "fa-solid fa-arrow-up",
+    descending: "fa-solid fa-arrow-down",
+    inactive: "fa-solid fa-sort"
+  }
+  config.icons.dropdown = "fa-solid fa-chevron-down"
+  config.icons.file_upload = "fa-solid fa-upload"
+  config.icons.conditional = "fa-solid fa-check"
+end
+```
+
+Sortable columns also accept an `icons:` hash for a per-column override. Dropdowns accept `icon:` and conditional table columns accept `icon_class:`.
 
 ## Usage
 
@@ -93,7 +115,6 @@ end
 
 It supports options for **alignment** (centered, right-aligned), **separator** style (arrow, bullet, dot, or succeeds), and **size** (small, medium, large). Items also support an optional `icon` argument.
 
-
 ### Button
 
 Renders a [Bulma button](https://bulma.io/documentation/elements/button/) element with support for color, size, style modifiers, and left/right icons.
@@ -101,7 +122,7 @@ Renders a [Bulma button](https://bulma.io/documentation/elements/button/) elemen
 The component generates a `<button>` by default. Pass an `href:` attribute to generate an `<a>` element instead. Pass `input: "submit"` (or `"button"` or `"reset"`) to generate an `<input>` element.
 
 ```ruby
-BulmaPhlex::Button("Like", color: "primary", size: "large", icon: "fas fa-thumbs-up")
+BulmaPhlex::Button("Like", color: "primary", size: "large", icon: "fa-solid fa-thumbs-up")
 BulmaPhlex::Button(href: "/profile") { "View Profile" }
 BulmaPhlex::Button(input: "submit", color: "success")
 ```
@@ -110,22 +131,24 @@ The button label can be passed in as a string or in a block.
 
 ### Card
 
-Renders a [Bulma card](https://bulma.io/documentation/components/card/) with an optional header, content area, and footer links. Each section is populated via builder methods on the yielded component.
+Renders a [Bulma card](https://bulma.io/documentation/components/card/) with an optional header, image, content area, and footer links. Each section is populated via builder methods on the yielded component.
 
 ```ruby
 render BulmaPhlex::Card.new do |card|
-  card.head("Card Title")
+  card.header("Card Title")
+  card.image(src: "image.jpg", alt: "Card image")
   card.content do
     "This is some card content"
   end
   card.footer_link("View", "/view", target: "_blank")
-  card.footer_link("Edit", "/edit", icon: "fas fa-edit")
+  card.footer_link("Edit", "/edit", icon: "fa-solid fa-pen-to-square")
 end
 ```
 
-Use method `footer_item` for full control of the footer items. Class `footer-item` must be on the outer element 
-of the block.
+The `header` method accepts a string, for a simple title, or a block for custom content.
 
+Use method `footer_item` for full control of the footer items. Class `footer-item` must be on the outer element
+of the block.
 
 ### Columns
 
@@ -141,7 +164,6 @@ end
 
 The `gap:` option accepts either an integer (0–8) or a hash keyed by breakpoint for responsive gap sizes.
 
-
 ### Dropdown
 
 Renders a [Bulma dropdown](https://bulma.io/documentation/components/dropdown/) menu. Supports click-to-toggle (default, via a Stimulus controller) and hoverable (no JavaScript) modes.
@@ -158,6 +180,11 @@ end
 
 Set `click: false` to use hover mode instead of the Stimulus controller.
 
+Use method `header` to add a non-clickable header item. The method takes an optional `divider` argument. (This is not in the Bulma library.)
+
+```ruby
+  dropdown.header("Actions", divider: true)
+```
 
 ### File Upload
 
@@ -171,7 +198,6 @@ end
 
 Set `name: true` to include a file name display element. When enabled, Stimulus data attributes are wired up automatically. The controller is not included in this gem; an [example implementation](https://github.com/RockSolt/bulma-phlex-rails/blob/main/app/javascript/controllers/bulma_phlex/file_input_display_controller.js) is available in the `bulma-phlex-rails` gem.
 
-
 ### Form Field
 
 Renders a [Bulma form field](https://bulma.io/documentation/form/general/#form-field) grouping a label, control, and optional help text. Set the label via the `label` method (string or block) and the input via the `control` method.
@@ -185,7 +211,6 @@ end
 
 The `column:` and `grid:` options integrate the field into Bulma's column and grid layout systems. Both accept `true`, a size string, or a breakpoint hash.
 
-
 ### Grid
 
 Renders a [Bulma smart grid](https://bulma.io/documentation/grid/smart-grid/) layout. Supports fixed column counts, auto-count, minimum column width, and independent gap control.
@@ -198,7 +223,6 @@ render BulmaPhlex::Grid.new(minimum_column_width: 16) do
 end
 ```
 
-
 ### Hero
 
 Renders a [Bulma hero](https://bulma.io/documentation/layout/hero/) section with support for color and size options.
@@ -215,16 +239,33 @@ render BulmaPhlex::Hero.new(color: "info", size: "large") do |hero|
 end
 ```
 
-
 ### Icon
 
 Renders a [Bulma icon](https://bulma.io/documentation/elements/icon/) element. Supports color, size, optional text alongside the icon, and left/right positioning for use inside form controls.
 
+When text is rendered alongside the icon, Bulma allows the text and icon to wrap by default. Pass `nowrap: true` when they form a compact UI unit that should stay together, such as a sortable table heading, toolbar action, button label, or navigation item. Leave it unset when the text should be allowed to wrap in a constrained container.
+
 ```ruby
-render BulmaPhlex::Icon.new("fas fa-user")
-render BulmaPhlex::Icon.new("fas fa-home", size: :large, color: :primary, text_right: "Home")
+render BulmaPhlex::Icon.new("fa-solid fa-user")
+render BulmaPhlex::Icon.new("fa-solid fa-home", size: :large, color: :primary, text_right: "Home")
+render BulmaPhlex::Icon.new("fa-solid fa-sort", text_left: "Revenue", nowrap: true)
 ```
 
+### Image
+
+Renders a [Bulma image](https://bulma.io/documentation/elements/image/) element. Supports size, ratio, rounded, and additional HTML attributes (on either the wrapping `figure` element or the `img` element).
+
+```ruby
+render BulmaPhlex::Image.new(src: "image.jpg", size: 64)
+
+render BulmaPhlex::Image.new(
+  src: "image.jpg",
+  alt: "An image",
+  rounded: true,
+  ratio: "16by9",
+  img_attributes: { class: "custom-img-class", id: "image-id" },
+  class: "custom-class", id: "figure-image-id")
+```
 
 ### Level
 
@@ -237,6 +278,65 @@ render BulmaPhlex::Level.new do |level|
 end
 ```
 
+### Media Object
+
+Renders a [Bulma media object](https://bulma.io/documentation/layout/media-object/) with an optional left image/icon, right content, and main body content. Each section is populated via builder methods on the yielded component.
+
+```ruby
+render BulmaPhlex::MediaObject.new do |media|
+  media.left { img(src: "/avatar.png", alt: "Avatar") }
+  media.content { "This is the main content of the media object." }
+  media.right { button(class: "button is-small") { "Action" } }
+end
+```
+
+If the left content is an image, method `image` can be used instead of `left` to automatically build the supporting HTML structure.
+
+```ruby
+render BulmaPhlex::MediaObject.new do |media|
+  media.image(src: "/avatar.png", alt: "Avatar", size: 64, rounded: true)
+  media.content { "This is the main content of the media object." }
+end
+```
+
+### Menu
+
+Renders a [Bulma menu](https://bulma.io/documentation/components/menu/) with support for labels, lists, and nested lists.
+
+```ruby
+render BulmaPhlex::Menu.new do |menu|
+  menu.label("General")
+  menu.list do
+    menu.item("Dashboard", href: "/dashboard", active: true)
+    menu.item("Customers", href: "/customers")
+  end
+
+  menu.label("Administration")
+  menu.list do
+    menu.item("Team Settings", href: "/teams/settings")
+    menu.item("Manage Your Team", href: "/teams/dashboard") do
+      menu.item("Members", href: "/members")
+      menu.item("Plugins", href: "/plugins")
+      menu.item("Add a member", href: "/add-member")
+    end
+  end
+end
+```
+
+Nested lists can be created by passing a block to the `item` method. An expandable section (header opens and closes but is not a link) can be created with the `expandable_item` method.
+
+```ruby
+render BulmaPhlex::Menu.new do |menu|
+  menu.label("General")
+  menu.list do
+    menu.item("Dashboard", href: "/dashboard", active: true)
+    menu.expandable_item("Customers") do
+      menu.item("Active Customers", href: "/customers/active")
+      menu.item("Inactive Customers", href: "/customers/inactive")
+    end
+  end
+end
+```
 
 ### Message
 
@@ -248,7 +348,6 @@ render BulmaPhlex::Message.new("Hello World", color: "info", delete: true) do
 end
 ```
 
-
 ### Modal
 
 Renders a [Bulma modal](https://bulma.io/documentation/components/modal/) dialog overlay with a background, content area, and close button. Content is provided via a block.
@@ -264,7 +363,6 @@ end
 
 The modal is shown by adding the `is-active` class to the container — nothing in the component does this automatically. The default Stimulus controller (`bulma-phlex--modal`) handles open/close behavior. Pass a custom `data_attributes_builder:` to integrate with a different JavaScript setup.
 
-
 ### NavigationBar
 
 Renders a [Bulma navbar](https://bulma.io/documentation/components/navbar/) with support for branding, left/right nav links, and dropdown menus. Collapses automatically on mobile via the `bulma-phlex--navigation-bar` Stimulus controller (provided by the `bulma-phlex-rails` gem).
@@ -287,7 +385,6 @@ end
 > [!NOTE]
 > Setting `container: true` (or a constraint string like `"is-max-desktop"`) wraps the navbar content in a Bulma container for fixed-width layout. The navbar's background color still spans the full viewport width.
 
-
 ### Notification
 
 Renders a [Bulma notification](https://bulma.io/documentation/elements/notification/) alert box with support for color and mode options.
@@ -306,7 +403,6 @@ render BulmaPhlex::Notification.new(color: "warning", delete: { data: { action:
 end
 ```
 
-
 ### Pagination
 
 Renders the [Bulma pagination](https://bulma.io/documentation/components/pagination/) component with previous/next links, numbered page links, ellipses for skipped ranges, and an item count summary. Only renders when there is more than one page of results.
@@ -317,7 +413,6 @@ render BulmaPhlex::Pagination.new(@products, ->(page) { products_path(page: page
 
 The first argument must be a pager object responding to `current_page`, `total_pages`, `per_page`, `total_count`, `previous_page`, and `next_page`.
 
-
 ### Progress Bar
 
 Renders a [Bulma progress bar](https://bulma.io/documentation/elements/progress/) element. Supports color and size options.
@@ -328,7 +423,6 @@ render BulmaPhlex::ProgressBar.new(color: "success", size: "large", value: 75, m
 
 Omitting `value:` and `max:` produces an indeterminate (animated) progress bar.
 
-
 ### Table
 
 Renders a [Bulma table](https://bulma.io/documentation/elements/table/) for a collection of records. Columns are defined via builder methods on the yielded component.
@@ -346,7 +440,32 @@ end
 In addition to `column`, two specialized column methods are available:
 
 - `date_column(header, format: "%Y-%m-%d")` — formats the value with `strftime`
-- `conditional_icon(header, icon_class: "fas fa-check")` — shows an icon when the block returns truthy
+- `conditional_icon(header, icon_class:)` — shows the configured conditional icon, or the supplied icon, when the block returns truthy
+
+#### Sortable columns
+
+Pass a sort hash with the URL for the next sort state to add a sortable header. The component renders the sort link, icon, and accessible sort state; your application remains responsible for interpreting the sort parameters and ordering the records.
+
+```ruby
+render BulmaPhlex::Table.new(@users) do |table|
+  table.column(
+    "Name",
+    sort: { href: users_path(sort: "name") }
+  ) { |user| user.full_name }
+
+  table.date_column(
+    "Joined",
+    sort: {
+      href: users_path(sort: "created_at"),
+      current_direction: :descending
+    }
+  ) { |user| user.created_at }
+end
+```
+
+Set `current_direction:` to `:ascending` or `:descending` for the currently active column. Pass additional attributes for the generated link with `link_attributes:`. The component generates an accessible label from the column header and sort state.
+
+#### Pagination
 
 To add pagination to the table, call `paginate` with a block that returns a path given a page number:
 
@@ -354,20 +473,23 @@ To add pagination to the table, call `paginate` with a block that returns a path
 table.paginate { |page| products_path(page: page) }
 ```
 
-Pass HTML attributes to the `tr` elements via the `row` method, using either keyword arguments or a block 
+#### Custom row attributes
+
+Pass HTML attributes to the `tr` elements via the `row` method, using either keyword arguments or a block
 that receives the record for the row:
 
 ```ruby
 table.row(class: "custom-row-class") { |row| { id: "row-id-#{row.id}" } }
 ```
 
+#### Responsive columns
+
 Hide columns on smaller screens with the column `hidden` option:
 
 ```ruby
 table.column("Email", hidden: { mobile: true }) { |user| user.email }
 ```
 
-
 ### Tabs
 
 Renders a [Bulma tabs](https://bulma.io/documentation/components/tabs/) component with tabbed navigation and associated content panels. Supports alignment, size, and style options (boxed, toggle, rounded, fullwidth).
@@ -375,7 +497,7 @@ Renders a [Bulma tabs](https://bulma.io/documentation/components/tabs/) componen
 ```ruby
 render BulmaPhlex::Tabs.new(boxed: true) do |tabs|
   tabs.tab(id: "profile", title: "Profile", active: true) { "Profile content" }
-  tabs.tab(id: "settings", title: "Settings", icon: "fas fa-cog") { "Settings content" }
+  tabs.tab(id: "settings", title: "Settings", icon: "fa-solid fa-gear") { "Settings content" }
 end
 ```
 
@@ -383,7 +505,6 @@ Tab switching is handled by the `bulma-phlex--tabs` Stimulus controller. The con
 
 An optional right-side element (e.g. a button) can be placed alongside the tab bar via `right_content`.
 
-
 ### Tag
 
 Renders the [Bulma tag](https://bulma.io/documentation/elements/tag/) component. Supports color, size, rounded, and an optional inline delete button.
@@ -395,7 +516,6 @@ render BulmaPhlex::Tag.new("Sale", light: "danger")
 
 The element type is inferred from the attributes: an `href:` produces an `<a>`, a `data-action` or `delete: true` produces a `<button>`, and otherwise a `<span>` is used.
 
-
 ### Title and Subtitle
 
 Renders a [Bulma title](https://bulma.io/documentation/elements/title/) with an optional subtitle. Supports sizes 1–6 for both elements and a `spaced:` option to increase the gap between them.
@@ -407,13 +527,12 @@ render BulmaPhlex::Title.new("Dr. Strangelove", size: 2, subtitle: "Or: How I Le
 
 When `size:` is set but `subtitle_size:` is not, the subtitle size defaults to `size + 2`.
 
-
 ## 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*:
+This can generally be handled with a _Find-and-Replace_:
 
 **Find:** `Bulma::`
 **Replace:** `BulmaPhlex::`
@@ -422,7 +541,6 @@ Note that this change was also applied to the expected Stimulus controllers. Ref
 
 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.

data/lib/bulma_phlex/card.rb

@@ -3,7 +3,7 @@
 module BulmaPhlex
   # Renders a [Bulma card](https://bulma.io/documentation/components/card/) component.
   #
-  # Supports an optional **header** (with title and custom classes), a **content** area, and a
+  # Supports an optional **header** (with title and custom classes), an **image**, a **content** area, and a
   # **footer** with one or more link items (which can include icons). Each section is populated
   # via builder methods on the yielded component.
   #
@@ -32,8 +32,9 @@ module BulmaPhlex
     def view_template(&)
       vanish(&)
 
-      div(**mix(class: "card", **@html_attributes)) do
+      div(**mix({ class: "card" }, **@html_attributes)) do
         card_header
+        card_image
         card_content
         card_footer
       end
@@ -44,8 +45,28 @@ module BulmaPhlex
     # - `title` — The text to display in the card header
     # - `classes` — Optional additional CSS classes for the header element
     def head(title, classes: nil)
+      warn "[DEPRECATION] `BulmaPhlex::Card#head` is deprecated. Use `header` instead.", category: :deprecated
+
+      header(title, class: classes)
+    end
+
+    # in order to use the method name `header`, we need to grab a reference to the method on the base class
+    # so it is still available to us
+    alias html_header header
+
+    # Sets the card header. Pass in the title as a string and/or provide a block to render custom content
+    # in the header.
+    #
+    # - `title` — The text to display in the card header (optional)
+    # - `**html_attributes` — Additional HTML attributes for the header element (optional)
+    def header(title = nil, **html_attributes, &block)
       @header_title = title
-      @header_classes = classes
+      @header_attributes = html_attributes
+      @header_content = block
+    end
+
+    def image(src:, alt: nil, size: nil, rounded: false)
+      @image = BulmaPhlex::Image.new(src:, alt:, size:, rounded:)
     end
 
     # Sets the card body content.
@@ -59,7 +80,7 @@ module BulmaPhlex
     #
     # - `text` — The link label text
     # - `href` — The URL the link points to
-    # - `icon:` — Optional icon class string (e.g. `"fas fa-edit"`) to render an icon alongside the text
+    # - `icon:` — Optional icon class string (e.g. `"fa-solid fa-pen-to-square"`) to render an icon alongside the text
     # - `**html_attributes` — Additional HTML attributes for the `<a>` element (e.g. `target:`, `class:`)
     def footer_link(text, href, **html_attributes)
       (@footer_items ||= []) << [text, href, html_attributes]
@@ -74,10 +95,19 @@ module BulmaPhlex
     private
 
     def card_header
-      return if @header_title.nil?
+      return if @header_title.nil? && @header_content.nil?
+
+      html_header(**mix({ class: "card-header" }, @header_attributes)) do
+        p(class: "card-header-title") { plain @header_title } if @header_title
+        @header_content&.call
+      end
+    end
+
+    def card_image
+      return if @image.nil?
 
-      header(class: "card-header #{@header_classes}") do
-        p(class: "card-header-title") { plain @header_title }
+      div(class: "card-image") do
+        render @image
       end
     end
 
@@ -85,7 +115,7 @@ module BulmaPhlex
       return if @card_content.nil?
 
       div(class: "card-content") do
-        div(class: "content") { @card_content.call }
+        @card_content.call
       end
     end
 

data/lib/bulma_phlex/configuration.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module BulmaPhlex
+  # Stores application-wide defaults for component-owned icons.
+  class Configuration
+    # Stores the icon classes used by components when no local override is supplied.
+    class Icons
+      attr_accessor :sort, :dropdown, :file_upload, :conditional
+
+      def initialize
+        @sort = {
+          ascending: "fa-solid fa-sort-up",
+          descending: "fa-solid fa-sort-down",
+          inactive: "fa-solid fa-sort"
+        }
+        @dropdown = "fa-solid fa-angle-down"
+        @file_upload = "fa-solid fa-upload"
+        @conditional = "fa-solid fa-check"
+      end
+    end
+
+    attr_reader :icons
+
+    def initialize
+      @icons = Icons.new
+    end
+  end
+end

data/lib/bulma_phlex/dropdown.rb

@@ -23,19 +23,19 @@ module BulmaPhlex
     # - `label` — The text displayed in the dropdown trigger button
     # - `click` — Stimulus controller name for toggling; set to `false` for hover mode instead
     # - `alignment` — Alignment of the dropdown menu: `"left"` (default), `"right"`, or `"up"`
-    # - `icon` — Icon class for the trigger button (default: `"fas fa-angle-down"`)
+    # - `icon` — Icon class for the trigger button (default: configured dropdown icon)
     # - `**html_attributes` — Additional HTML attributes for the outermost dropdown element
-    def self.new(label, click: "bulma-phlex--dropdown", alignment: "left", icon: "fas fa-angle-down",
+    def self.new(label, click: "bulma-phlex--dropdown", alignment: "left", icon: nil,
                  **html_attributes)
       super
     end
 
-    def initialize(label, click: "bulma-phlex--dropdown", alignment: "left", icon: "fas fa-angle-down",
+    def initialize(label, click: "bulma-phlex--dropdown", alignment: "left", icon: nil,
                    **html_attributes)
       @label = label
       @click = click
       @alignment = alignment
-      @icon = icon
+      @icon = icon || BulmaPhlex.config.icons.dropdown
       @html_attributes = html_attributes
     end
 
@@ -61,20 +61,28 @@ module BulmaPhlex
       end
     end
 
-    def item(content = nil, &)
+    # Adds a non-clickable header item to the dropdown menu. Optionally add a divider before the header with
+    # the `divder: true` parameter.
+    def header(label, divider: false)
+      self.divider if divider
+      div(class: "dropdown-item has-text-weight-semibold is-unselectable") { label }
+    end
+
+    def item(content = nil, **html_attributes, &)
+      attributes = mix({ class: "dropdown-item" }, html_attributes)
       if block_given?
-        div(class: "dropdown-item", &)
+        div(**attributes, &)
       else
-        div(class: "dropdown-item") { content }
+        div(**attributes) { content }
       end
     end
 
-    def link(label, path)
-      a(class: "dropdown-item", href: path) { label }
+    def link(label, path, **html_attributes)
+      a(**mix({ class: "dropdown-item" }, html_attributes), href: path) { label }
     end
 
-    def divider
-      hr(class: "dropdown-divider")
+    def divider(**html_attributes)
+      hr(**mix({ class: "dropdown-divider" }, html_attributes))
     end
 
     private

data/lib/bulma_phlex/file_upload.rb

@@ -25,6 +25,7 @@ module BulmaPhlex
     # - `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
+    # - `icon` — Icon class for the upload control (default: configured file upload icon)
     # - `data_attributes_builder` — A custom builder for the data attributes used for Stimulus integration;
     #   defaults to a builder with the controller name `"bulma-phlex--file-input-display"`
     def self.new(color: nil,
@@ -33,6 +34,7 @@ module BulmaPhlex
                  align: nil,
                  fullwidth: false,
                  boxed: false,
+                 icon: nil,
                  data_attributes_builder: nil)
       super
     end
@@ -43,6 +45,7 @@ module BulmaPhlex
                    align: nil,
                    fullwidth: false,
                    boxed: false,
+                   icon: nil,
                    data_attributes_builder: nil)
       @color = color
       @size = size
@@ -50,6 +53,7 @@ module BulmaPhlex
       @align = align
       @fullwidth = fullwidth
       @boxed = boxed
+      @icon = icon || BulmaPhlex.config.icons.file_upload
 
       return unless @name
 
@@ -63,7 +67,7 @@ module BulmaPhlex
           yield(@data_attributes_builder&.for_file_input)
           span(class: "file-cta") do
             span(class: "file-icon") do
-              i(class: "fas fa-upload")
+              i(class: @icon)
             end
             span(class: "file-label") { plain " Choose a file… " }
           end

data/lib/bulma_phlex/form_control.rb

@@ -6,8 +6,8 @@ module BulmaPhlex
   class FormControl < Base
     # **Parameters**
     #
-    # - `icon_left` — Icon class for the left side of the control (e.g. `"fas fa-check"`)
-    # - `icon_right` — Icon class for the right side of the control (e.g. `"fas fa-check"`)
+    # - `icon_left` — Icon class for the left side of the control (e.g. `"fa-solid fa-check"`)
+    # - `icon_right` — Icon class for the right side of the control (e.g. `"fa-solid fa-check"`)
     # - `**html_attributes` — Additional HTML attributes for the control element
     def self.new(icon_left: nil, icon_right: nil, **html_attributes)
       super

data/lib/bulma_phlex/form_field.rb

@@ -21,8 +21,8 @@ module BulmaPhlex
     # **Parameters**
     #
     # - `help` — Optional help text displayed below the input
-    # - `icon_left` — Icon class for an icon to the left of the input (e.g. `"fas fa-user"`)
-    # - `icon_right` — Icon class for an icon to the right of the input (e.g. `"fas fa-check"`)
+    # - `icon_left` — Icon class for an icon to the left of the input (e.g. `"fa-solid fa-user"`)
+    # - `icon_right` — Icon class for an icon to the right of the input (e.g. `"fa-solid fa-check"`)
     # - `column` — If `true`, makes the field a column; a size string (e.g. `"half"`) sets the size for
     #   all breakpoints; a hash (e.g. `{ mobile: "full", desktop: "half" }`) sets responsive sizes
     # - `grid` — If `true`, makes the field a grid cell; a size string sets the cell size