Bootstrap 6 support

.gitignore

@@ -41,8 +41,6 @@ demo/public/assets
 
 # Ignore master key for decrypting credentials and more.
 demo/config/master.key
-demo/public/packs
-demo/public/packs-test
 demo/app/assets/builds/*
 !demo/app/assets/builds/.keep
 demo/node_modules

CHANGELOG.md

@@ -50,6 +50,7 @@ The tooling to support our old way of doing the change log doesn't work anymore,
 
 ### Breaking changes
 
+* Target Bootstrap 6: generate the Bootstrap 6 form markup (`form-field` wrappers, `check`/`radio`/`switch` classes, `form-range` wrappers, floating labels and adornments) and add helpers for the new combobox, datepicker, chips, OTP and password strength components. Requires Bootstrap 6 CSS and JavaScript - [@pardeyke](https://github.com/pardeyke).
 * [#618](https://github.com/bootstrap-ruby/bootstrap_form/pull/618): Allow overriding the wrapper class - [@donv](https://github.com/donv).
 * Your contribution here!
 

UPGRADE-6.0.md

@@ -0,0 +1,131 @@
+# Upgrading to `bootstrap_form` 6.0
+
+`bootstrap_form` 6.0 generates mark-up for Bootstrap 6. Bootstrap 6 renames and restructures many of the form-related classes, so the mark-up generated by this gem changes accordingly. If your application styles or scripts against the generated mark-up, or if you pass Bootstrap utility classes to the helpers, you will need to make changes.
+
+## Bootstrap 6 Changes
+
+Upgrading `bootstrap_form` to version 6 means you must upgrade your whole application to Bootstrap 6. Read the [Bootstrap 6 migration guide](https://github.com/twbs/bootstrap/blob/v6-dev/skills/bootstrap-v5-v6-migration/SKILL.md) and the [Bootstrap 6 forms documentation](https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/forms/overview/) to see what changes you have to make to your views.
+
+## Changes to Generated Mark-up
+
+### Form Group Wrappers
+
+Bootstrap 6 introduces the [`form-field` wrapper](https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/forms/field/), a CSS-grid container that lays out a control together with its label, help text, and validation feedback. `bootstrap_form` now uses it as the default form group wrapper:
+
+- Vertical form groups are wrapped in `class="form-field mb-3"` (was `class="mb-3"`).
+- Collections rendered with `group_around_collections = true` are wrapped in `class="form-group mb-3"`, Bootstrap 6's wrapper for multiple `form-field`s under a shared label.
+- Horizontal groups (`mb-3 row`), inline groups, and floating label groups (`mb-3 form-floating`) are unchanged, because they use Bootstrap's grid or the `form-floating` component for layout instead.
+- A custom `wrapper_class`/`wrapper: { class: ... }` still *replaces* the default classes. Include `form-field` in your custom class if you want to keep Bootstrap 6's field layout.
+
+### Help Text
+
+Help text is now rendered as `<small class="form-text">` without the `text-muted` class. Bootstrap 6 removes `text-muted` (its replacement is `fg-secondary`), and `form-text` styles itself.
+
+### Selects
+
+Bootstrap 6 styles `<select>` elements with `.form-control` instead of `.form-select`. All select helpers (`select`, `collection_select`, `grouped_collection_select`, `time_zone_select`, and the date/time select helpers) now generate `class="form-control"`.
+
+### Checkboxes and Radio Buttons
+
+Bootstrap 6 replaces the `.form-check` component with the `.form-field` wrapper and dedicated control classes:
+
+- The wrapper `<div>` is now `class="form-field"` instead of `class="form-check"`.
+- Checkbox inputs get `class="check"` instead of `class="form-check-input"`.
+- Radio inputs get `class="radio"` instead of `class="form-check-input"`.
+- Labels no longer get the `form-check-label` class (a plain `<label>` is used).
+- Inline checks (`inline: true`) use the `d-inline-grid me-3` utilities on the wrapper instead of `form-check-inline`, since Bootstrap 6 has no dedicated inline class.
+
+### Switches
+
+Bootstrap 6 gives switches their own structure. `check_box ..., switch: true` now generates:
+
+```html
+<div class="form-field mb-3">
+  <div class="switch">
+    <input name="user[remember_me]" type="hidden" value="0">
+    <input id="user_remember_me" name="user[remember_me]" role="switch" switch="switch" type="checkbox" value="1">
+  </div>
+  <label for="user_remember_me">Remember me</label>
+</div>
+```
+
+instead of the v5 `form-check form-switch` wrapper with a `form-check-input` class.
+
+### Range Fields
+
+Bootstrap 6 wraps range inputs in a component element. `range_field` now generates:
+
+```html
+<div class="form-range">
+  <input class="form-range-input" ... type="range">
+</div>
+```
+
+instead of a bare `<input class="form-range">`.
+
+### Floating Labels
+
+Bootstrap 6 requires the `<label>` to come *before* the control inside `.form-floating` (the CSS relies on `:has()`). `bootstrap_form` now renders floating labels before the field instead of after it.
+
+### Buttons
+
+Bootstrap 6 removes the `.btn` base class and single-class color variants in favour of composed style + theme classes:
+
+- `submit` and `button` default to `class="btn-solid theme-secondary"` (was `btn btn-secondary`).
+- `primary` defaults to `class="btn-solid theme-primary"` (was `btn btn-primary`).
+
+If you pass your own `class:` to these helpers, update it to the new Bootstrap 6 button classes yourself.
+
+### Horizontal Forms and Grid Classes
+
+Bootstrap 6 changes responsive class syntax from suffix to prefix: `.col-sm-2` becomes `.sm:col-2`, `.offset-sm-2` becomes `.sm:offset-2`.
+
+- The default `label_col` is now `"sm:col-2"` (was `"col-sm-2"`).
+- The default `control_col` is now `"sm:col-10"` (was `"col-sm-10"`).
+- If you pass custom `label_col`/`control_col` values, use the new syntax; the automatic offset calculation for label-less groups understands only the new syntax (e.g. `sm:col-2` → `sm:offset-2`).
+- Inline layout labels get `class="form-label sm:me-2"` (was `form-label me-sm-2`).
+
+### Validation Feedback Placement
+
+Bootstrap 6 changes where validation feedback lives:
+
+- For checkboxes, radios, and switches, the label and the `invalid-feedback` element (and any help text) are now nested in a `form-field-content` wrapper next to the control, keeping them aligned in the `form-field` grid.
+- For fields with `prepend`/`append` add-ons, the `invalid-feedback` element is now rendered *outside* the `input-group`, as a sibling within the `form-field` wrapper (it was inside the input group in v5).
+
+### Input Group Buttons
+
+Bootstrap 6 requires the `input-group-btn` class on buttons inside input groups. `bootstrap_form` passes your `prepend`/`append` content through as-is, so add the class to buttons you pass in, e.g. `link_to("Go", "#", class: "btn-solid theme-secondary input-group-btn")`.
+
+### Alerts
+
+`alert_message` now defaults to `class="alert theme-danger"` instead of `class="alert alert-danger"`, following Bootstrap 6's composed theme classes. Pass `class: "alert alert-danger"` explicitly if you need the old mark-up.
+
+## New Features
+
+### Datepicker Helper
+
+Bootstrap 6 introduces a datepicker component. The new `datepicker_field` helper generates a text field with `data-bs-toggle="datepicker"` and renders the `:datepicker` option hash as `data-bs-*` configuration attributes. See the README for details.
+
+### Combobox Helper
+
+Bootstrap 6 introduces a combobox component — a select-like control with optional search and multiple selection that replaces third-party plugins such as `use-bootstrap-select`. The new `combobox` helper generates the full mark-up (toggle button, menu items, pre-selected state) from a choices collection. See the README for details.
+
+### Adorned Fields
+
+The new `adorn` option on text-style field helpers generates Bootstrap 6's `form-adorn` mark-up: an icon or text decoration inside the field's border, with the input rendered as a `form-ghost`. See the README for details.
+
+### OTP Input Helper
+
+The new `otp_field` helper generates Bootstrap 6's OTP input: a single text input inside a `.otp[data-bs-otp]` container, rendered as digit slots by Bootstrap's JavaScript. The `:otp` option hash is rendered as `data-bs-*` configuration attributes.
+
+### Password Strength Meters
+
+The new `strength` option on `password_field` renders Bootstrap 6's password strength meter (segmented or bar variant, with optional text feedback and minimum length) after the input.
+
+### Client-Side Validation
+
+Pass `validate: true` (or `validate: "valid"` for success styling) to the form helpers to emit Bootstrap 6's `data-bs-validate` attribute and `novalidate` on the `<form>`.
+
+## Unchanged
+
+The following classes are unchanged in Bootstrap 6 and continue to be generated as before: `form-label`, `form-text` (now without `text-muted`), `form-control` (and its `-sm`/`-lg`/`-color`/`-plaintext` variants), `form-floating`, `input-group`, `input-group-text`, `col-form-label`, `is-invalid`/`is-valid`, `invalid-feedback`/`valid-feedback`, and `visually-hidden`.

demo/.ruby-version

@@ -1 +1 @@
-ruby-3.2.7
+4.0.7

demo/Procfile.dev

@@ -1,3 +1,3 @@
 web: bin/rails server -b 0.0.0.0
 js: yarn build --watch
-css: yarn build:css --watch
+css: yarn watch:css

demo/README.md

@@ -1,4 +1,4 @@
-# DEMO APP (Rails 7.0)
+# DEMO APP (Rails 8.1)
 
 ### Usage