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. `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 - `<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. 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 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 `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 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. 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 `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. `material-3-design` skill, which state M3's rules and tables beside the library's utilities.