FastStrap v0.3.0 - Phase 3 Complete: 8 New Components 🎉

[Evayoung]

🎉 Major Release: Phase 3 Complete!

FastStrap now includes 20 components (12 from Phase 1+2, 8 new in Phase 3)

---

⭐ What's New

🧭 Navigation Components (4)

Tabs

• Navigation tabs and pills with content panes
• Vertical layout option
• HTMX mode for dynamic content
• Full keyboard navigation

Tabs(
    ("home", "Home", True),
    ("profile", "Profile"),
    ("contact", "Contact")
)

Dropdown

• Contextual menus with split button support
• Directional dropdowns (up, down, start, end)
• String-based dividers

Dropdown(
    "Action",
    "Another action",
    "---",  # Divider
    "Separated link",
    label="Actions"
)

Breadcrumb

• Navigation trail with auto-active last item
• Icon support
• Full accessibility

Breadcrumb(
    (Icon("house"), "/"),
    ("Products", "/products"),
    ("Laptops", None)
)

Pagination

• Page navigation with customization
• First/last page buttons
• Size variants and alignment

Pagination(
    current_page=5,
    total_pages=20,
    size="lg",
    align="center"
)

---

📝 Form Components (2)

Input

• All HTML5 input types
• Label and help text support
• Size variants (sm, lg)
• Full validation support

Input(
    "email",
    input_type="email",
    label="Email Address",
    help_text="We'll never share your email",
    required=True
)

Select

• Single and multiple selection
• Default selection support
• Size variants

Select(
    "country",
    ("us", "United States"),
    ("uk", "United Kingdom", True),
    ("ca", "Canada"),
    label="Country"
)

---

🔄 Feedback Components (2)

Spinner

• Border and grow animations
• Color variants
• Small size for buttons

Spinner(variant="primary")
Spinner(spinner_type="grow", variant="success")

Progress

• Percentage-based progress bars
• Striped and animated styles
• Stacked progress support

Progress(75, variant="success", striped=True, animated=True)

---

🚀 New Features

Centralized Attribute Conversion

All components now use consistent HTMX/data/ARIA attribute handling:

Button("Save", hx_post="/save", data_id="123")
# Converts to: hx-post="/save" data-id="123"

Default Favicon

FastStrap now includes a built-in favicon automatically:

# Uses default FastStrap favicon
add_bootstrap(app, theme="dark")

# Custom favicon
add_bootstrap(app, favicon_url="/static/logo.svg")

# Disable favicon
add_bootstrap(app, include_favicon=False)

Enhanced Accessibility

• Proper ARIA labels on all components
• ID linkage between labels and inputs
• Screen reader support for loading states
• Keyboard navigation for interactive components

---

📦 Installation

pip install --upgrade faststrap

---

📊 Statistics

• ✅ 20 components (12 existing + 8 new)
• ✅ 219 tests passing (80% coverage)
• ✅ Full type hints (Python 3.10+)
• ✅ Bootstrap 5.3.3 compliant
• ✅ HTMX ready - all components support HTMX attributes

---

🎯 What's Next?

Phase 4 (v0.4.0) - Advanced Components:

• Table (sortable, filterable)
• Accordion (collapsible panels)
• Carousel (image sliders)
• ListGroup (versatile lists)
• Tooltip & Popover
• Checkbox, Radio, Range
• FileInput

See ROADMAP.md for details.

---

📚 Documentation

• README
• Building Components Guide
• Component Specification
• Changelog

---

🙏 Thank You!

Thanks to everyone who contributed, tested, and provided feedback!

Built with ❤️ for the FastHTML community

---

Full Changelog: v0.2.2...v0.3.0

---

This discussion was created from the release FastStrap v0.3.0 - Phase 3 Complete: 8 New Components 🎉.