Breakpoints
Responsive widths (--bp-*) and the mediaQueries helpers.
Breakpoints + mediaQueries
| Name | px | CSS var | JS query | Typical use |
|---|---|---|---|---|
| sm | 640 | --bp-sm | (max-width: 640px) | Dialogs (bottom sheet), page header stack |
| md | 768 | --bp-md | (max-width: 768px) | Phone chrome, BrowseShell, Tracking |
| lg | 900 | --bp-lg | (max-width: 900px) | Mid tables / calendars |
| xl | 1100 | --bp-xl | (max-width: 1100px) | Overview / multi-column collapse |