🧰 v0.22.0 — Passwords, Pickers & MCP Patterns

What's New

PasswordRequirementsComponent

A visual checklist for real-time password validation. Renders requirement rules with live pass/fail indicators as the user types. Includes a Stimulus controller that observes a linked input field, a strength meter powered by ProgressBarComponent, configurable policies (length, character classes, custom rules), and anchored or inline display modes. Integrates with the form builder via f.password_requirements.

<%= midwest_form_with(model: @user) do |f| %>
  <%= f.input(:password, type: :password) %>
  <%= f.password_requirements(:password, policy: :strong) %>
<% end %>

GroupComponent

A horizontal cluster layout with a +N more overflow indicator. Pass any collection of items and set a max: to cap visible elements — the rest collapse into a count badge. Supports overlapping mode for stacked visuals (avatars, icons). AvatarGroupComponent now delegates to GroupComponent internally.

<%= midwest_group(max: 3, overlap: true) do |g| %>
  <% avatars.each do |avatar| %>
    <%= g.with_item do %>
      <%= midwest_avatar(name: avatar.name) %>
    <% end %>
  <% end %>
<% end %>

CodeBlockComponent

Syntax-highlighted code blocks via Rouge with copy-to-clipboard, a theme system (Rouge default and Midwest themes), CardComponent composition, language badge, and optional line numbers. Supports all Rouge-supported languages.

<%= midwest_code_block(language: "ruby", filename: "app/models/user.rb", line_numbers: true) do %>
  class User < ApplicationRecord
    validates :email, presence: true
  end
<% end %>

Form::DatePickerComponent

A native date input with calendar popup, min/max constraints, and form builder integration. Connects to FormLiveSummaryComponent for real-time form previews.

<%= midwest_form_with(model: @event) do |f| %>
  <%= f.date_picker(:start_date, label: "Start", min: Date.today) %>
<% end %>

Form::TimePickerComponent

Time input with 12/24-hour format support, increment/decrement buttons via Stimulus, and configurable step intervals. Includes min/max time constraints and form builder shorthand (f.time_picker).

<%= midwest_form_with(model: @event) do |f| %>
  <%= f.time_picker(:start_time, label: "Start Time", format: 12, step: 15) %>
<% end %>

MCP Server — Four New Tools

The MCP server grows from 4 to 8 tools, adding deeper introspection into helpers, form builders, component relationships, and usage validation.

• get_helper_methods — View helper signatures and descriptions
• get_form_builder_info — Form builder integration details, available methods, and wrapper patterns
• get_component_relationships — Composition patterns and related components
• validate_component_usage — Validates option names, constant-constrained values, and slot names with fix suggestions

New parsers ship alongside: StimulusParser extracts controller values, actions, and targets; ViewHelperParser indexes helper signatures; FormBuilderParser maps form builder methods to components.

What Changed

BadgeComponent — Action slot

A new action slot enables dismissible badges. Render a close button or any interactive element inside the badge.

TooltipComponent — Full 9-position alignment

Tooltips now support all nine placement positions for precise positioning around the trigger element.

CalloutComponent — Dark variant

Pass dark: true for a dark-background callout, useful for high-contrast or inverted UI sections.

Form::FileComponent — Drag-and-drop zone

File inputs now support a drag-and-drop zone mode with visual drop feedback and file type validation.

Form::InputComponent — Inline validation

Inputs gain Shopify-style inline validation with match rules, real-time feedback, and error display tied to the Stimulus controller.

AvatarGroupComponent — Simplified internals

AvatarGroupComponent now delegates overflow and layout logic to the new GroupComponent, significantly reducing its own code.

What Was Removed

DialogComponent — Remote content loading (planned, then dropped)

The planned src: option for loading remote content into dialogs was removed from the roadmap. It clashed with the Dialogable concern's design and will not ship.

Dev Process

MCP server parsers and indexes

Three new parsers (StimulusParser, ViewHelperParser, FormBuilderParser) and an expanded ComponentIndex with helper name resolution and relationship detection. HelperIndex provides a dedicated lookup for view helper methods. All new code lives under Midwest::MCP.

Expanded test coverage

New and updated test files:

• PasswordRequirementsComponentTest — policies, requirement rules, strength meter, anchored mode.
• GroupComponentTest — overflow, max limit, overlap mode.
• CodeBlockComponentTest — syntax highlighting, themes, line numbers, copy button, language badge.
• Form::DatePickerComponentTest — date parsing, min/max, form builder integration.
• BadgeComponentTest — action slot rendering.
• CalloutComponentTest — dark variant.
• Form::FileComponentTest — drag-and-drop zone.
• Form::InputComponentTest — inline validation, match rules.
• TooltipComponentTest — 9-position alignment grid.
• Midwest::MCP::FormBuilderParserTest, HelperIndexTest, StimulusParserTest, ViewHelperParserTest — new parser coverage.
• Midwest::MCP::ToolsTest — expanded for all eight tools.

System tests

Browser-level system tests added for Form::DatePickerComponent, Form::TimePickerComponent, PasswordRequirementsComponent, DialogComponent, and Dialogable concern interactions.