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:
co-authored by
Claude Opus 5
parent
ff16b12b3b
commit
0d9ca4b506
+29
-2
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user