Overview

Work In Progress

Partial Page Replacement

Current Rating	B . Requires using a third party library like htmx
Status	Multiple Proposals Open. Triptych is a set of 3 that address the same idea.

Read More ->

Immediate Navigation Feedback

Icons

Plain Text Tooltips

HTML Tooltips

Accordions

Tabs

Modals

Single Selects

Multiple Selects

File Upload Fields

Aspect	Note	Workarounds
Snappy Page Transitions	Chrome Paint Holding & Multi Document View Transitions make some headway, but for an SPA level experience, more is needed. The Triptych Proposals is a set of 3 proposals which if accepted, would reach parity.	HTMX, Turbo
Loading states for forms and buttons	There's no html first way to show a user a loading state when they submit a form. The best solution to this would be to add a submitted attribute to a form when submitted. Until then, this pattern can also be trivially achieved with the Dynamic Attributes pattern.	HTMX Indicators
HTML Only SVG Icons	It's not currently possible to reuse svg icons in a useful way. Using <svg> requires including the entire contents (rather than referencing them), and using <img /> omits important properties like fill color.	Inline SVG Gem
Tooltips	Still relying on the CSS ::after hack and limited to only plain text tooltips with no smart repositioning. Waiting on updates to dialog and interesttarget.	Base Styles & Mini JS
Modals	Nearly at Parity with Dialogs, but currently needs js to do cleanly. WIP.	Modals.js (Base Styles & Preact Standalone)
Styleable Selects	Recently added to Chrome for testing. Part of CSS Form Control Styling. To research the UX.	Base Styles & Preact Standalone
Datalists
Toasts	WIP.	Toasts.js (Base Styles & Preact Standalone).
Style-able Date Time Pickers	Also covered in CSS Form Control Styling	Preact Standalone & Base Styles
Pattern: Live Properties	See A Missing Pattern: Dynamic Attributes	Mini Js
Pattern: Templating & bundling complex interactive UI components	See JSX vs Web Components