bulma-phlex 0.15.0 → 0.16.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8a1d3209d836363da07529fa00c9374618623280e70f3167c409e320b77dd4c4
-  data.tar.gz: e078ae57978d967610194b989078d484ad2297d4cdd71b0ae2d65b07d80dc105
+  metadata.gz: 358df6739ab960f7d8b3799001c40b0d80a6e1c1d599b31b115b67bdcae46645
+  data.tar.gz: 54a368dec6bf6dfa7c21f32779e63651bea141070367880f7b1b938da86c92f3
 SHA512:
-  metadata.gz: c7c0d1e8bbfb69e58e78af757f14b4dde6ab532f085e7ea970cb1addd511f2c5c33ba964df7b80dcfdac878f4475108858ceace18f3e5b52356d3b9b3d7df521
-  data.tar.gz: c41d7a84d0a5e5c2c03aafd7ff74764af2e94221c051aa67766815d46805cd153829deb87173b7d73285fcfaf9752433412070effb7755fced7d3e45df388912
+  metadata.gz: 81cea339f39b95a17bd43e18f294944327744c81601fb03d1d7e7975e397973ebfa488350540eeb008e587c74ae3805ce8ff3ec15aa193277bd68bae03cee201
+  data.tar.gz: 021f7fc3b32d02a16c1c08a695e915b8beca73219b86da9766c58077afa5b13e205d337fd2ccace80378905076ccb821d2c9c244313ace1c1c32c38752258045

data/README.md

@@ -10,6 +10,7 @@ This gem provides a set of ready-to-use [Phlex](https://github.com/phlex-ruby/ph
 
 - [Installation](#installation)
 - [Usage](#usage)
+  - [Breadcrumb](#breadcrumb)
   - [Button](#button)
   - [Card](#card)
   - [Columns](#columns)
@@ -78,6 +79,21 @@ require "bulma-phlex"
 
 Use the Phlex components in your Rails views or any Ruby application that supports Phlex components.
 
+### Breadcrumb
+
+Renders a [Bulma breadcrumb](https://bulma.io/documentation/components/breadcrumb/) navigation element. Each breadcrumb item is added via the `item` method on the yielded component.
+
+```ruby
+render BulmaPhlex::Breadcrumb.new do |bc|
+  bc.item("Bulma", href: "/")
+  bc.item("Components", href: "/components")
+  bc.item("Breadcrumb")
+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.

data/lib/bulma_phlex/breadcrumb.rb

@@ -0,0 +1,82 @@
+# frozen_string_literal: true
+
+module BulmaPhlex
+  # Renders a [Bulma breadcrumb](https://bulma.io/documentation/components/breadcrumb/) component.
+  # It supports options for **alignment** (centered, right-aligned), **separator** style (arrow,
+  # bullet, dot, or succeeds (greater than)), and **size** (small, medium, large).
+  class Breadcrumb < Base
+    # **Parameters**
+    #
+    # - `align` — Breadcrumb alignment: `"centered"` or `"right"`
+    # - `separator` — Breadcrumb separator style: `"arrow"`, `"bullet"`, `"dot"`, or `"succeeds"`
+    # - `size` — Alternate size: `"small"`, `"medium"`, or `"large"`
+    # - `**html_attributes` — Additional HTML attributes for the `<nav>` element
+    def self.new(align: nil, separator: nil, size: nil, **html_attributes)
+      super
+    end
+
+    def initialize(align: nil, separator: nil, size: nil, **html_attributes)
+      @align = align
+      @separator = separator
+      @size = size
+      @html_attributes = html_attributes
+
+      @items = []
+    end
+
+    def view_template(&)
+      vanish(&)
+      return if @items.empty?
+
+      nav(**mix(@html_attributes, class: nav_classes, aria: { label: "breadcrumbs" })) do
+        ul do
+          @items[0...-1].each do |item|
+            render_item(item)
+          end
+
+          render_last_item
+        end
+      end
+    end
+
+    # Adds a breadcrumb item to the component. The last item added will be rendered as the active item.
+    #
+    # **Parameters**
+    # - `label` (positional) — The text label for the breadcrumb item
+    # - `href` — URL for the breadcrumb item; not required on last item / current page
+    # - `icon` — Optional icon class for the breadcrumb item (e.g. `"fa-solid fa-home"`)
+    def item(label, href: nil, icon: nil)
+      @items << { label:, icon:, html_attributes: { href: href } }
+    end
+
+    private
+
+    def nav_classes
+      classes = ["breadcrumb"]
+      classes << "is-#{@align}" if @align
+      classes << "has-#{@separator}-separator" if @separator
+      classes << "is-#{@size}" if @size
+      classes
+    end
+
+    def render_item(item, list_item_attributes: {})
+      li(**list_item_attributes) do
+        a(**item[:html_attributes]) do
+          if item[:icon]
+            render BulmaPhlex::Icon.new(item[:icon], size: "small", icon_attributes: { aria: { hidden: "true" } })
+            span { item[:label] }
+          else
+            plain item[:label]
+          end
+        end
+      end
+    end
+
+    def render_last_item
+      item = @items.last
+
+      item[:html_attributes] = mix(item[:html_attributes], aria: { current: "page" })
+      render_item(item, list_item_attributes: { class: "is-active" })
+    end
+  end
+end

data/lib/bulma_phlex/icon.rb

@@ -5,7 +5,12 @@ module BulmaPhlex
   # form control positioning.
   #
   # Supports **color** and **size** options, optional **text** to the left or right of the icon,
-  # and **positioning** helpers (`left`/`right`) for use inside form controls.
+  # and **positioning** helpers (`left`/`right`) for use inside form controls. When text is provide,
+  # the icon and text are wrapped in a container with the `icon-text` class for proper spacing, and
+  # the icon includes `aria-hidden="true"` for accessibility.
+  #
+  # Additional HTML attributes can be passed to the icon's `<span>` element via `**html_attributes`,
+  # and to the inner `<i>` by nested them under `icon_attributes`.
   #
   # ## Example
   #
@@ -21,7 +26,8 @@ module BulmaPhlex
     # - `text_left` — Text to display to the left of the icon
     # - `left` — If `true`, adds the `is-left` class for use in form controls
     # - `right` — If `true`, adds the `is-right` class for use in form controls
-    # - `**html_attributes` — Additional HTML attributes for the icon span element
+    # - `**html_attributes` — Additional HTML attributes for the icon span element. Nest attributes under
+    #     `icon_attributes` to apply them to the inner `<i>` element instead.
     def self.new(icon,
                  text_right: nil,
                  text_left: nil,
@@ -48,14 +54,15 @@ module BulmaPhlex
       @color = color
       @left = left
       @right = right
-      @html_attributes = html_attributes
+      @html_attributes = html_attributes.clone
+      @icon_attributes = @html_attributes.delete(:icon_attributes) || {}
     end
 
     def view_template
       optional_text_wrapper do
         span { @text_left } if @text_left
         span(**mix({ class: icon_classes }, @html_attributes)) do
-          i(class: @icon)
+          i(class: @icon, **@icon_attributes)
         end
         span { @text_right } if @text_right
       end
@@ -65,12 +72,17 @@ module BulmaPhlex
 
     def optional_text_wrapper(&)
       if @text_right || @text_left
+        add_aria_hidden_to_icon_attributes
         span(class: "icon-text", &)
       else
         yield
       end
     end
 
+    def add_aria_hidden_to_icon_attributes
+      @icon_attributes = mix({ aria: { hidden: "true" } }, @icon_attributes)
+    end
+
     def icon_classes
       classes = ["icon"]
       classes << "is-#{@size}" if @size

data/lib/bulma_phlex/navigation_bar_dropdown.rb

@@ -26,8 +26,11 @@ module BulmaPhlex
       div(class: "navbar-dropdown is-right", &)
     end
 
-    def header(label)
-      div(class: "navbar-item header has-text-weight-medium") { label }
+    # 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: "navbar-item has-text-weight-semibold") { label }
     end
 
     def item(label, path)

data/lib/bulma_phlex/version.rb

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

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: bulma-phlex
 version: !ruby/object:Gem::Version
-  version: 0.15.0
+  version: 0.16.0
 platform: ruby
 authors:
 - Todd Kummer
 bindir: bin
 cert_chain: []
-date: 2026-04-16 00:00:00.000000000 Z
+date: 2026-05-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: phlex
@@ -65,6 +65,7 @@ files:
 - lib/bulma-phlex.rb
 - lib/bulma_phlex.rb
 - lib/bulma_phlex/base.rb
+- lib/bulma_phlex/breadcrumb.rb
 - lib/bulma_phlex/button.rb
 - lib/bulma_phlex/card.rb
 - lib/bulma_phlex/columns.rb