Add Phase E's changed defaults and new configurations to the upgrade note

Text fields bounded from medium, dialog scroll dividers and the new meaning of
separator, the two-line snackbar, bottom sheet stops, chip set scroll buttons,
and a list of the configurations 2.0.0 adds.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 11:13:10 +02:00
co-authored by Claude Opus 5
parent ff16b12b3b
commit 0d9ca4b506
+29 -2
View File
@@ -106,15 +106,42 @@ over a colour, use the role directly.
`rail-collapsed:` swap); new `divider` and `fill` props.
- `<x-icon optical="20">` selects the optical-size-20 cut; the components pass it for their own
small icons, applications pass it for icons drawn at 20px or less.
- A text field stops at 40rem wide from `medium:`, as M3 bounds fields on wider windows; a
`max-w-*` class on the field beats it, and `full` removes it.
- Every `<x-modal>` draws a rule under its header and over its actions while its body scrolls,
and neither when the body fits. `separator` now means "always draw both rules" and no longer
renders two `<x-divider>` elements; the spacing between header, body and actions moved to
M3's split gaps, so a dialog that fits is a few pixels shorter.
- A snackbar with a `description` is 68px tall, and below `medium:` a two-line snackbar with an
action puts the action under the text. Alt+G moves focus to an actioned snackbar.
- `<x-bottom-sheet>`'s drag now follows the pointer and settles on the nearest preset height when
`heights` or `snap` is set; without stops it behaves as before.
- A chip set with `scroll` shows a scroll button over each overflowing edge on fine pointers.
### 6. Tests and guards
### 6. New in 2.0.0
Nothing to migrate, but worth knowing: submenus (`<x-menu-item submenu>`), a filtering menu
(`<x-menu filter>`), gap-grouped menu items (`<x-menu-group gap>`), square button groups
(`shape="square"`), managed selection on connected groups (`selection="single|multi" required`),
FAB collapse on scroll (`<x-fab collapse-on-scroll>`), the tall navigation bar and hide-on-scroll
(`tall`, `hide-on-scroll`; `tall-bar`, `hide-bar-on-scroll` on the shell), the narrow, centred and
hide-when-collapsed rail (`width="narrow"`, `align="center"`, `hide-when-collapsed`), a docked
toolbar with a FAB and a rounded large-screen form (`rounded`), app bar actions that overflow into
a menu (`:actions="[…]"`), the list item's `video` slot, the card's dragged state, the standard
side sheet (`<x-drawer standard>`), bottom sheet preset heights, the multi-aspect carousel
(`layout="multi-aspect"`), the divider with a subheader (`<x-divider text>`), the character counter
(`counter`), the vertical slider (`orientation="vertical"`), the full-screen range date picker on
compact windows, search's icon entry point and suggestions (`trigger="icon"`, `suggestions` slot),
the contrast toggle (`<x-theme-toggle mode="contrast">`) and the Standard motion scheme.
### 7. Tests and guards
Add `DesignGuard`'s new checks to the application's design test (`forbidOpacityInk()` and
`forbidAbsolutes()` are opt-in). Browser tests that assert widths switch at 640/1024/1280 now
switch at 600/840/1200; tests that read `role="alert"` on an alert, `aria-pressed` on the time
picker's period buttons or `data-theme-option` need the new hooks above.
### 7. For AI agents
### 8. For AI agents
`php artisan boost:update --discover` picks up the new `material-3` guideline and the
`material-3-design` skill, which state M3's rules and tables beside the library's utilities.