bulma-phlex 0.10.0 → 0.11.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 86dcdd7f2c7329c32ae420a8fc095975b4e4a1495802054c85789ee598230335
-  data.tar.gz: bb42b533fe7b41b347d2e83f89faba27ed519a9d88ca06faf3d73a321e397e27
+  metadata.gz: 1ee83e739b84c897bbb801d7be66a49ce909b940399e35b19d2ce0ce310febc6
+  data.tar.gz: c3c1c066c77c916a51eb9d604f58a1e88291436e67e0014a821b40f3a2d32e66
 SHA512:
-  metadata.gz: d5ad488129b08c46c985c25852da8cbe20486a7059e0429acc64cb2e6eee00889e0a8bb921db8de0175a0d7645762209da9e7e260f1cc139089cbbe9b6b3dc51
-  data.tar.gz: ea95d770b73c2adfdc60a0eb4bb92541730c35008fafc44e638956bbb00413ba104c2cc8f1c0534671766a559e17d6d11c718e5a9ac8d2bce47215119d7f2702
+  metadata.gz: 5afc7194917ea792bf09f7a83ca58d8271b765a2d2a7eabbb6479b631c5935ebca1d3988a19a8d8e79d6ffe5d4a84fc2a4e507d4e455abaac98da0514d542e4d
+  data.tar.gz: dc8cee0e55182192282e766c734de97e252f2c5c34019a82061ff26c23dab7b8cddbc7c5888c2b32b728d4801a9441aad953cfeedcc7d613597006150a9cfdd9

data/README.md

@@ -24,6 +24,7 @@ Finally, the optional Rails extensions for the Card and Table components have be
 
 - [Installation](#installation)
 - [Usage](#usage)
+  - [Button](#button)
   - [Card](#card)
   - [Columns](#columns)
   - [Dropdown](#dropdown)
@@ -34,6 +35,7 @@ Finally, the optional Rails extensions for the Card and Table components have be
   - [NavigationBar](#navigationbar)
   - [Notification](#notification)
   - [Pagination](#pagination)
+  - [Progress Bar](#progress-bar)
   - [Table](#table)
   - [Tabs](#tabs)
   - [Tag](#tag)
@@ -86,6 +88,34 @@ require "bulma-phlex"
 
 Use the Phlex components in your Rails views or any Ruby application that supports Phlex components.
 
+### Button
+
+The [Button](https://bulma.io/documentation/elements/button/) component provides a way to create styled buttons with various options for colors, sizes, and icons.
+
+```ruby
+BulmaPhlex::Button(color: "primary", size: "large", icon: "fas fa-thumbs-up") { "Like" }
+```
+
+**Constructor Keyword Arguments:**
+
+- `color`: Sets the button color (e.g., "primary", "link", "info", "success", "warning", "danger").
+- `mode`: Sets the mode of the notification: "light" or "dark".
+- `size`: Sets the button size: "small", "normal" (the default), "medium", or "large".
+- `responsive`: If `true`, makes the button responsive.
+- `fullwidth`: If `true`, makes the button full width.
+- `outlined`: If `true`, makes the button outlined.
+- `inverted`: If `true`, makes the button inverted.
+- `rounded`: If `true`, makes the button rounded.
+- `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
+  representing the icon class (e.g., "fa-solid fa-check").
+- `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").
+
+Any additional HTML attributes passed to the constructor will be applied to the button element.
+
+
 ### Card
 
 [Cards](https://bulma.io/documentation/components/card/) are flexible containers that can display various types of content including headers and content sections.
@@ -101,6 +131,10 @@ BulmaPhlex::Card() do |card|
 end
 ```
 
+**Constructor Arguments:**
+
+- `html_attributes`: Any additional HTML attributes to be passed to the card container div.
+
 **Arguments for `footer_link`:**
 
 - text: the link text
@@ -156,9 +190,10 @@ end
 **Options:**
 
 - `label` (required): The dropdown button label.
-- `click`: Stimulus controller name for click-to-toggle (default: `"bulma-phlex--dropdown"`). Set to `false` for hoverable.
-- `alignment`: `:left` (default), `:right`, or `:up`.
-- `icon`: Icon class for the dropdown arrow (default: `"fas fa-angle-down"`).
+- `click` (keyword): Stimulus controller name for click-to-toggle (default: `"bulma-phlex--dropdown"`). Set to `false` for hoverable.
+- `alignment` (keyword): `:left` (default), `:right`, or `:up`.
+- `icon` (keyword): Icon class for the dropdown arrow (default: `"fas fa-angle-down"`).
+- `html_attributes`: Any additional HTML attributes to be passed to the dropdown container div.
 
 **Dropdown methods:**
 
@@ -261,6 +296,8 @@ BulmaPhlex::Level() do |level|
 end
 ```
 
+Pass in any HTML attributes to the constructor to have them applied to the level container div.
+
 ### NavigationBar
 
 The [NavigationBar](https://bulma.io/documentation/components/navbar/) component provides a responsive navigation header with support for branding, navigation links, and dropdown menus.
@@ -289,8 +326,13 @@ end
 
 **Constructor Keyword Arguments:**
 
-- `classes`: Additional classes to be added to the `nav` element, such as "is-primary" or "has-shadow".
 - `container`: When true, wraps the content in a Bulma container. To set a constraint, such as "is-max-desktop", pass that string instead of true. (defaults to false)
+- `color`: Sets the navbar color (e.g., "primary", "light", "dark").
+- `transparent`: If `true`, makes the navbar transparent.
+- `spaced`: If `true`, adds spacing to the navbar.
+- `shadow`: If `true`, adds a shadow to the navbar.
+
+Any additional HTML attributes passed to the component will be applied to the `<nav>` element.
 
 > [!NOTE]  
 > Adding a container will limit the width of the Navigation Bar content according to Bulma's container rules. However, the background color of the navbar will still span the full width of the viewport.
@@ -337,7 +379,14 @@ The [Pagination](https://bulma.io/documentation/components/pagination/) componen
 BulmaPhlex::Pagination(@products, ->(page) { products_path(page: page) })
 ```
 
-In order to support pagination, the argument passed into the constructor must repond with integers to the following:
+**Constructor Arguments:**
+
+- `pager`: An object that responds to pagination methods (see below).
+- `path_builder`: A lambda that takes a page number and returns the URL for that page. This is used to generate the links for the pagination controls.
+
+Any additional HTML attributes passed to the constructor will be applied to the pagination container element.
+
+In order to support pagination, the first argument in the constructor must repond with integers to the following:
 
 - current_page
 - total_pages
@@ -347,6 +396,24 @@ In order to support pagination, the argument passed into the constructor must re
 - next_page (can be nil)
 
 
+### Progress Bar
+
+The [Progress Bar](https://bulma.io/documentation/components/progress/) component provides a visual representation of progress or completion status, with support for different colors and sizes.
+
+```ruby
+BulmaPhlex::ProgressBar(color: "success", size: "large", value: 75, max: 100) { "75%" }
+```
+
+**Constructor Keyword Arguments:**
+
+- `color`: (optional) The [Bulma color class](https://bulma.io/documentation/elements/progress/#colors) to apply.
+- `size`: (optional) The [Bulma size class](https://bulma.io/documentation/elements/progress/#sizes) to apply: small, medium, or large.
+- `html_attributes`: Any additional HTML attributes to be passed to the `progress` element. Include the `value` and `max` attributes here to set the progress level.
+
+Leaving out the `value` and `max` attributes will render an indeterminate progress bar, which can be used to indicate that a process is ongoing without specifying the exact progress.
+
+
+
 ### Table
 
 The [Table](https://bulma.io/documentation/elements/table/) component provides a way to display data in rows and columns with customizable headers and formatting options.
@@ -371,13 +438,14 @@ end
 **Constructor Keyword Arguments:**
 
 - `rows`: the data for the table as an enumerable (anything that responds to `each`)
-- `id`: the Id for the table element (defaults to "table")
 - `bordered`: adds the `is-bordered` class (boolean, defaults to false)
 - `striped`: adds the `is-striped` class (boolean, defaults to false)
 - `narrow`: adds the `is-narrow` class (boolean, defaults to false)
 - `hoverable`: adds the `is-hoverable` class (boolean, defaults to false)
 - `fullwidth`: adds the `is-fullwidth` class (boolean, defaults to false)
 
+Any additional HTML attributes passed to the constructor will be applied to the table element.
+
 **Arguments for `column` Method:**
 
 The `column` method takes the column name and any html attributes to be assigned to the table cell element. The block will be called with the row as the parameter.
@@ -424,10 +492,10 @@ This generates the [Bulma pagination](https://bulma.io/documentation/components/
 
 The [Tabs](https://bulma.io/documentation/components/tabs/) component provides a way to toggle between different content sections using tabbed navigation, with support for icons and active state management.
 
-Behavior of the tabs can be driven by the data attributes, which are assigned by the object passed in as the `data_attributes_builder`. By default, this will use the `StimulusDataAttributes` class with the controller name `bulma-phlex--tabs`. The controller is not provided by this library, but you can create your own Stimulus controller to handle the tab switching logic. Here is [an implementation of a Stimulus controller for Bulma tabs](https://github.com/RockSolt/bulma-rails-helpers/blob/main/app/javascript/controllers/bulma/tabs_controller.js).
+Behavior of the tabs can be driven by the data attributes, which are assigned by the object passed in as the `data_attributes_builder`. By default, this will use the `StimulusDataAttributes` class with the controller name `bulma-phlex--tabs`. The controller is not provided by this library, but you can create your own Stimulus controller to handle the tab switching logic. Here is [an implementation of a Stimulus controller for Bulma tabs](https://github.com/RockSolt/bulma-phlex-rails/blob/main/app/javascript/controllers/bulma_phlex/tabs_controller.js).
 
 ```ruby
-BulmaPhlex::Tabs(tabs_class: "is-boxed", contents_class: "ml-4") do |tabs|
+BulmaPhlex::Tabs(boxed: true) do |tabs|
   tabs.tab(id: "profile", title: "Profile", active: true) do
     "Profile content goes here"
   end
@@ -444,10 +512,16 @@ end
 
 **Constructor Keyword Arguments:**
 
-- `tabs_class`: Classes to be added to the tabs div, such as `is-boxed`, `is-medium`, `is-centered`, or `is-toggle`.
-- `contents_class`: Classes added to the div that wraps the content (no Bulma related tabs functionality here, just a hook).
+- `align`: Can be `centered` or `right` to align the tabs accordingly.
+- `size`: Can be `small`, `medium`, or `large` to set the size of the tabs.
+- `boxed`: If `true`, uses classic style tabs.
+- `toggle`: If `true`, makes the tabs look like buttons.
+- `rounded`: If `true`, makes the tabs look like buttons with the first and last rounded.
+- `fullwidth`: If `true`, makes the tabs take up the full width of the container.
 - `data_attributes_builder`: Builder object that responds to `for_container`, `for_tab`, and `for_content` (with the latter two receiving the tab `id`). See the default `StimulusDataAttributes` for an example.
 
+Any additional HTML attributes passed to the component will be applied to the outer `<div>` element.
+
 **Keyword Arguments for `tab` Method:**
 
 - `id`: The id to be assigned to the content. The tab will be assigned the same id with the suffix `-tab`.

data/lib/bulma_phlex/button.rb

@@ -0,0 +1,74 @@
+# frozen_string_literal: true
+
+module BulmaPhlex
+  # # Button
+  #
+  # 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.
+  #
+  # ## Options
+  #
+  # - `color`: Sets the button color (e.g., "primary", "link", "info", "success", "warning", "danger").
+  # - `mode`: Sets the mode of the notification: "light" or "dark".
+  # - `size`: Sets the button size: "small", "normal" (the default), "medium", or "large".
+  # - `responsive`: If `true`, makes the button responsive.
+  # - `fullwidth`: If `true`, makes the button full width.
+  # - `outlined`: If `true`, makes the button outlined.
+  # - `inverted`: If `true`, makes the button inverted.
+  # - `rounded`: If `true`, makes the button rounded.
+  # - `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
+  #   representing the icon class (e.g., "fa-solid fa-check").
+  # - `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
+                   mode: nil,
+                   size: nil,
+                   responsive: false,
+                   fullwidth: false,
+                   outlined: false,
+                   inverted: false,
+                   rounded: false,
+                   icon: nil,
+                   icon_left: nil,
+                   icon_right: nil,
+                   **html_attributes)
+      @color = color
+      @mode = mode
+      @size = size
+      @responsive = responsive
+      @fullwidth = fullwidth
+      @outlined = outlined
+      @inverted = inverted
+      @rounded = rounded
+      @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
+
+    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
+    end
+  end
+end

data/lib/bulma_phlex/card.rb

@@ -20,10 +20,14 @@ module BulmaPhlex
   # end
   # ```
   class Card < BulmaPhlex::Base
+    def initialize(**html_attributes)
+      @html_attributes = html_attributes
+    end
+
     def view_template(&)
       vanish(&)
 
-      div(class: "card") do
+      div(**mix(class: "card", **@html_attributes)) do
         card_header
         card_content
         card_footer

data/lib/bulma_phlex/dropdown.rb

@@ -36,15 +36,17 @@ module BulmaPhlex
   # ```
   #
   class Dropdown < BulmaPhlex::Base
-    def initialize(label, click: "bulma-phlex--dropdown", alignment: "left", icon: "fas fa-angle-down")
+    def initialize(label, click: "bulma-phlex--dropdown", alignment: "left", icon: "fas fa-angle-down",
+                   **html_attributes)
       @label = label
       @click = click
       @alignment = alignment
       @icon = icon
+      @html_attributes = html_attributes
     end
 
     def view_template(&)
-      div(class: "dropdown #{"is-hoverable" unless @click} #{alignment_class}".strip, **stimulus_controller) do
+      div(**mix({ class: dropdown_classes, **stimulus_controller }, @html_attributes)) do
         div(class: "dropdown-trigger") do
           button(
             class: "button",
@@ -83,6 +85,13 @@ module BulmaPhlex
 
     private
 
+    def dropdown_classes
+      classes = ["dropdown"]
+      classes << "is-hoverable" unless @click
+      classes << "is-#{@alignment}" unless @alignment == "left"
+      classes.join(" ")
+    end
+
     def alignment_class
       case @alignment.to_sym
       when :right

data/lib/bulma_phlex/level.rb

@@ -24,7 +24,8 @@ module BulmaPhlex
   # ```
   #
   class Level < BulmaPhlex::Base
-    def initialize
+    def initialize(**html_attributes)
+      @html_attributes = html_attributes
       @items = []
       @left = []
       @right = []
@@ -33,15 +34,15 @@ module BulmaPhlex
     def view_template(&)
       vanish(&)
 
-      div(class: "level") do
+      div(**mix({ class: "level" }, @html_attributes)) do
         div(class: "level-left") do
-          @left.each { level_item(it) }
+          @left.each { |item| level_item(item) }
         end
 
-        @items.each { level_item(it) }
+        @items.each { |item| level_item(item) }
 
         div(class: "level-right") do
-          @right.each { level_item(it) }
+          @right.each { |item| level_item(item) }
         end
       end
     end

data/lib/bulma_phlex/navigation_bar.rb

@@ -7,6 +7,10 @@ module BulmaPhlex
   # interface. It provides a responsive navigation header with support for branding, navigation
   # links, and dropdown menus, automatically collapsing on mobile devices.
   #
+  # The component is rendered with data attributes to enable JavaScript behavior for toggling the mobile
+  # menu. It is hardcoded to the Stimulus controller `bulma-phlex--navigation-bar` (available via the
+  # `bulma-phlex-rails` gem).
+  #
   # ## Example
   #
   # ```ruby
@@ -34,10 +38,30 @@ module BulmaPhlex
   # end
   # ```
   #
+  # ## Options
+  #
+  # - `container`: If `true`, wraps the navbar content in a `.container` for fixed-width layout. Can also
+  #   be a string or symbol to specify a custom container class.
+  # - `color`: Sets the navbar color (e.g., "primary", "light", "dark").
+  # - `transparent`: If `true`, makes the navbar transparent.
+  # - `spaced`: If `true`, adds spacing to the navbar.
+  # - `shadow`: If `true`, adds a shadow to the navbar.
+  #
+  # Any additional HTML attributes passed to the component will be applied to the `<nav>` element.
   class NavigationBar < BulmaPhlex::Base
-    def initialize(container: false, classes: "")
+    def initialize(container: false, # rubocop:disable Metrics/ParameterLists
+                   color: nil,
+                   transparent: false,
+                   spaced: false,
+                   shadow: false,
+                   **html_attributes)
       @container = container
-      @classes = classes
+      @color = color
+      @transparent = transparent
+      @spaced = spaced
+      @shadow = shadow
+      @html_attributes = html_attributes
+
       @brand = []
       @left = []
       @right = []
@@ -46,10 +70,7 @@ module BulmaPhlex
     def view_template(&)
       vanish(&)
 
-      nav(class: "navbar #{@classes}".rstrip,
-          role: "navigation",
-          aria_label: "main navigation",
-          data: { controller: "bulma-phlex--navigation-bar" }) do
+      nav(**mix(nav_attributes, @html_attributes)) do
         optional_container do
           div(class: "navbar-brand") do
             @brand.each(&:call)
@@ -94,6 +115,22 @@ module BulmaPhlex
 
     private
 
+    def nav_attributes
+      { class: nav_classes,
+        role: "navigation",
+        aria_label: "main navigation",
+        data: { controller: "bulma-phlex--navigation-bar" } }
+    end
+
+    def nav_classes
+      classes = ["navbar"]
+      classes << "is-#{@color}" if @color
+      classes << "is-transparent" if @transparent
+      classes << "is-spaced" if @spaced
+      classes << "has-shadow" if @shadow
+      classes
+    end
+
     def optional_container(&)
       if @container
         constraint = @container if @container.is_a?(String) || @container.is_a?(Symbol)

data/lib/bulma_phlex/pagination.rb

@@ -34,15 +34,16 @@ module BulmaPhlex
     #   - `previous_page` - Integer or nil representing the previous page number
     #   - `next_page` - Integer or nil representing the next page number
     # @param path_builder [Proc] A callable that takes a page number and returns a URL string
-    def initialize(pager, path_builder)
+    def initialize(pager, path_builder, **html_attributes)
       @pager = pager
       @path_builder = path_builder
+      @html_attributes = html_attributes
     end
 
     def view_template
       return unless pager.total_pages > 1
 
-      div(class: "pagination-container mt-5") do
+      div(**mix({ class: "pagination-container" }, @html_attributes)) do
         nav(class: "pagination", role: "navigation", aria_label: "pagination") do
           # Previous page link
           if pager.previous_page

data/lib/bulma_phlex/progress_bar.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module BulmaPhlex
+  # Progress Bar
+  #
+  # This component implements the [Bulma progress bar element](https://bulma.io/documentation/elements/progress/).
+  #
+  # ## Options
+  #
+  # - `color`: Sets the [color of the progress bar](https://bulma.io/documentation/elements/progress/#colors)
+  # - `size`: Sets the [size of the progress bar](https://bulma.io/documentation/elements/progress/#sizes): small,
+  #    normal, medium, or large.
+  # - `html_attributes`: Additional HTML attributes to add to the progress element. It is expected that the
+  #    `value` and `max` attributes will be included here to set the progress bar's value and maximum value.
+  #
+  # Leaving out the `value` and `max` attributes will result in an indeterminate progress bar, which is useful for
+  # indicating that a process is ongoing without specifying how much of it is complete.
+  class ProgressBar < Base
+    def initialize(color: nil, size: nil, **html_attributes)
+      @color = color
+      @size = size
+      @html_attributes = html_attributes
+    end
+
+    def view_template(&)
+      progress(**mix({ class: classes }, @html_attributes), &)
+    end
+
+    private
+
+    def classes
+      classes = ["progress"]
+      classes << "is-#{@color}" if @color
+      classes << "is-#{@size}" if @size
+      classes
+    end
+  end
+end

data/lib/bulma_phlex/table.rb

@@ -27,17 +27,43 @@ module BulmaPhlex
   # end
   # ```
   #
+  # ## Options
+  #
+  # - `bordered`: Adds borders to the table.
+  # - `striped`: Adds zebra-striping to the table rows.
+  # - `narrow`: Makes the table more compact.
+  # - `hoverable`: Adds a hover effect to the table rows.
+  # - `fullwidth`: Makes the table take up the full width of its container.
+  #
+  # Any additional HTML attributes passed to the component will be applied to the `<table>` element.
+  #
+  # ## Pagination
+  #
+  # If the `paginate` method is called with a block that builds pagination paths, a pagination control
+  # 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, id_or_options = nil, **options)
+    def initialize(rows, # rubocop:disable Metrics/ParameterLists
+                   bordered: false,
+                   striped: false,
+                   narrow: false,
+                   hoverable: false,
+                   fullwidth: false,
+                   **html_attributes)
       @rows = rows
-      @id, @table_class = parse_id_and_options(id_or_options, options, rows)
+      @bordered = bordered
+      @striped = striped
+      @narrow = narrow
+      @hoverable = hoverable
+      @fullwidth = fullwidth
+      @html_attributes = html_attributes
       @columns = []
     end
 
     def view_template(&)
       vanish(&)
 
-      table(id: @id, class: @table_class) do
+      table(**mix({ class: table_classes }, @html_attributes)) do
         thead do
           @columns.each do |column|
             table_header(column)
@@ -82,36 +108,14 @@ module BulmaPhlex
 
     private
 
-    def parse_id_and_options(id_or_options, options, rows)
-      if id_or_options.is_a?(String)
-        id = id_or_options
-        opts = options
-      else
-        opts = (id_or_options || {}).merge(options)
-        id = opts.delete(:id) || id_from_array_or_arel(rows)
-      end
-      table_class = "table #{parse_table_classes(opts)}"
-      [id, table_class]
-    end
-
-    def id_from_array_or_arel(rows)
-      if rows.respond_to? :model
-        rows.model.model_name.plural
-      elsif rows.empty?
-        "table"
-      else
-        rows.first.model_name.plural
-      end
-    rescue StandardError
-      "table"
-    end
-
-    def parse_table_classes(options)
-      options.slice(*%i[bordered striped narrow hoverable fullwidth])
-             .transform_keys { |key| "is-#{key}" }
-             .select { |_, value| value }
-             .keys
-             .join(" ")
+    def table_classes
+      classes = ["table"]
+      classes << "is-bordered" if @bordered
+      classes << "is-striped" if @striped
+      classes << "is-narrow" if @narrow
+      classes << "is-hoverable" if @hoverable
+      classes << "is-fullwidth" if @fullwidth
+      classes
     end
 
     # this derives a th class from the column html attributes
@@ -139,7 +143,7 @@ module BulmaPhlex
       tfoot do
         tr do
           td(class: "py-0", colspan: @columns.size) do
-            Pagination(@rows, @path_builder)
+            Pagination(@rows, @path_builder, class: "mt-5")
           end
         end
       end

data/lib/bulma_phlex/tabs.rb

@@ -7,15 +7,12 @@ module BulmaPhlex
   # interface, providing a way to toggle between different content sections using
   # tabbed navigation. Includes support for icons and active state management.
   #
-  # Classes can be assigned to either the tabs or contents wrappers. The tabs div is where Bulma
-  # options such as `is-boxed`, `is-centered`, or `is-small` can be added.
-  #
   # Use method `right_content` to add content to the right of the tabs, such as a button.
   #
   # The tabs behavior can be managed by the data attributes provided by the `data_attributes_builder` argument. By
   # default, this will use the `StimulusDataAttributes` class with the controller name `bulma-phlex--tabs`. That
   # controlleris not provided by this library, but you can create your own Stimulus controller to handle the tab
-  #  switching logic. Here is [an implementation of a Stimulus controller for Bulma tabs](https://github.com/RockSolt/bulma-rails-helpers/blob/main/app/javascript/controllers/bulma/tabs_controller.js).
+  # switching logic. Here is an implementation of a [Stimulus controller for Bulma tabs](https://github.com/RockSolt/bulma-phlex-rails/blob/main/app/javascript/controllers/bulma_phlex/tabs_controller.js).
   #
   # ## Example
   #
@@ -35,6 +32,18 @@ module BulmaPhlex
   # end
   # ```
   #
+  # ## Options
+  #
+  # - `align`: Can be `centered` or `right` to align the tabs accordingly.
+  # - `size`: Can be `small`, `medium`, or `large` to set the size of the tabs.
+  # - `boxed`: If `true`, uses classic style tabs.
+  # - `toggle`: If `true`, makes the tabs look like buttons.
+  # - `rounded`: If `true`, makes the tabs look like buttons with the first and last rounded.
+  # - `fullwidth`: If `true`, makes the tabs take up the full width of the container.
+  # - `data_attributes_builder`: An object that provides methods to generate data attributes for the
+  #   tabs. By default, this is an instance of `StimulusDataAttributes` with "bulma-phlex--tabs".
+  #
+  # Any additional HTML attributes passed to the component will be applied to the outer `<div>` element.
   class Tabs < BulmaPhlex::Base
     StimulusDataAttributes = Data.define(:stimulus_controller) do
       def for_container
@@ -60,12 +69,22 @@ module BulmaPhlex
       end
     end
 
-    def initialize(id: nil, tabs_class: nil, contents_class: nil,
-                   data_attributes_builder: StimulusDataAttributes.new("bulma-phlex--tabs"))
-      @id = id || "tabs"
-      @tabs_class = tabs_class
-      @contents_class = contents_class
+    def initialize(align: nil, # rubocop:disable Metrics/ParameterLists
+                   size: nil,
+                   boxed: false,
+                   toggle: false,
+                   rounded: false,
+                   fullwidth: false,
+                   data_attributes_builder: StimulusDataAttributes.new("bulma-phlex--tabs"),
+                   **html_attributes)
+      @align = align
+      @size = size
+      @boxed = boxed
+      @toggle = toggle || rounded
+      @rounded = rounded
+      @fullwidth = fullwidth
       @data_attributes_builder = data_attributes_builder
+      @html_attributes = html_attributes
       @tabs = []
       @contents = []
     end
@@ -85,9 +104,9 @@ module BulmaPhlex
     def view_template(&)
       vanish(&)
 
-      div(id: @id, data: @data_attributes_builder.for_container) do
+      div(**mix({ data: @data_attributes_builder.for_container }, @html_attributes)) do
         build_tabs_with_optional_right_content
-        div(id: "#{@id}-content", class: @contents_class) { build_content }
+        build_content
       end
     end
 
@@ -103,15 +122,34 @@ module BulmaPhlex
     end
 
     def build_tabs
-      div(class: "tabs #{@tabs_class}".strip) do
-        ul(id: "#{@id}-tabs") do
+      attributes = {}
+      attributes[:id] = "#{@html_attributes[:id]}-tabs" if @html_attributes[:id]
+
+      div(class: tabs_classes) do
+        ul(**attributes) do
           @tabs.each { render it }
         end
       end
     end
 
+    def tabs_classes
+      classes = ["tabs"]
+      classes << "is-boxed" if @boxed
+      classes << "is-#{@align}" if @align
+      classes << "is-#{@size}" if @size
+      classes << "is-toggle" if @toggle
+      classes << "is-toggle-rounded" if @rounded
+      classes << "is-fullwidth" if @fullwidth
+      classes
+    end
+
     def build_content
-      @contents.each { render it }
+      attributes = {}
+      attributes[:id] = "#{@html_attributes[:id]}-content" if @html_attributes[:id]
+
+      div(**attributes) do
+        @contents.each { render it }
+      end
     end
   end
 end

data/lib/bulma_phlex/version.rb

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

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: bulma-phlex
 version: !ruby/object:Gem::Version
-  version: 0.10.0
+  version: 0.11.0
 platform: ruby
 authors:
 - Todd Kummer
 bindir: bin
 cert_chain: []
-date: 2026-02-01 00:00:00.000000000 Z
+date: 2026-02-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: phlex
@@ -15,14 +15,14 @@ dependencies:
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 2.0.2
+        version: 2.4.1
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: 2.0.2
+        version: 2.4.1
 - !ruby/object:Gem::Dependency
   name: actionpack
   requirement: !ruby/object:Gem::Requirement
@@ -65,6 +65,7 @@ files:
 - lib/bulma-phlex.rb
 - lib/bulma_phlex.rb
 - lib/bulma_phlex/base.rb
+- lib/bulma_phlex/button.rb
 - lib/bulma_phlex/card.rb
 - lib/bulma_phlex/columns.rb
 - lib/bulma_phlex/dropdown.rb
@@ -77,6 +78,7 @@ files:
 - lib/bulma_phlex/navigation_bar_dropdown.rb
 - lib/bulma_phlex/notification.rb
 - lib/bulma_phlex/pagination.rb
+- lib/bulma_phlex/progress_bar.rb
 - lib/bulma_phlex/tab_components/content.rb
 - lib/bulma_phlex/tab_components/tab.rb
 - lib/bulma_phlex/table.rb