Skip to content

Material Plus 1.11.0

Choose a tag to compare

@github-actions github-actions released this 07 Oct 05:44
· 152 commits to main since this release

Most of this release closes the distance between what a component was said to do and what it did. A required picker now tells a screen reader it is required, holds a form's submit back while nothing is chosen, and reaches MPForm's errors and onSubmit under its name. Props that were accepted and then lost, such as the variant an MPButtonGroup gives its icon buttons and aria-label on MPTextField, now take effect, and descriptions that promised what no component did now describe the components. MPSegmentedButton is the one breaking change: it is MD3's 40px at md, so a set at the default size is smaller than before. A new page, Design › Spec coverage, lists how far each component follows Material Design 3.

Breaking changes

  • MPSegmentedButton is MD3's 40px at md, on a ladder of its own. It took the control ladder a button walks, which put the specification's 40dp at sm and made the default a 56px pill. Its rungs are now 32, 36, 40, 48 and 56px. What sm drew is now md, and what md drew is xl: pass size="xl" to keep a 56px set. There is no 64px or 72px set any more.

Changed

  • color on MPTable and MPTreeSelect is deprecated, because it never did anything. A table's rows are neutral on purpose, since a table that tints its rows colours its data, and a tree select's chosen row is secondary-container, as an MPSelect's chosen option is. Both props still compile, and both are due to be removed in the next major version.

  • An indeterminate MPProgressLinear moves on the library's own motion tokens. Each bar's leading and trailing edge now travel separately, the head on standard and the tail on standard-accelerate, over a cycle of two extra-long4s, so a page that retunes its motion retunes the indicator with it. It is still a long sweep followed by a short one that catches up; the timing is new.

  • MPTreeSelect searches the way MPCombobox does. It folded case and nothing else, while the combobox matches through Base UI's collator, so "malaga" found "Málaga" in one and not in the other. Both now leave case, accents and punctuation out of the comparison, and both compare in the language of locale — the combobox fell back to the browser's before, which need not be the one the field is written in.

Documentation

  • A page on how far the library follows the specification. Design › Spec coverage lists, component by component, what Material Design 3 and M3 Expressive define, which of it is here, what the library adds, and what Material UI offers for the same need.

  • The colour page says twenty-nine roles, not five. It still described the five an outlined text field reads, from before the rest of the library arrived.

  • MPButton and MPFloatingActionButton no longer say MD3 dropped the ripple and the FAB menu. MD3 still draws a ripple on press, and M3 Expressive added a FAB menu of labelled actions in 2025. Neither is drawn here, for the reasons each page gives.

  • Descriptions that disagreed with their components now say what the components do.

    • An MPBadge with no content is hidden, as a count of zero is; the dot is dot. It never drew a dot on its own.
    • MPSnackbarProvider's six stacks share one live region, there is no 344dp minimum on the plate, and the × is 20px at md.
    • An uncontrolled MPStepper moves when a step is pressed, with or without onActiveChange.
    • MPHoverCard opens on keyboard focus too, after the same delay as a pointer.
    • color on MPList and MPCommandPalette does not tint the hover; the state layer is the row's own ink, as everywhere else.
    • MPSidebar is on the bar ladder MPHeader and MPFooter use, not the container one.
    • MPProgressLinear's groove is on-surface at 12%, not the family's container tone, and MPProgressCircular stops on a partial arc under prefers-reduced-motion.
    • MPAvatar's square corners are smaller on the two smallest rungs, and an MPButton's glyphs keep the size they were given.
    • MPTextField's id is not derived from name, and its password toggle is named "Show the password" and "Hide the password".
    • MPTable's 52dp row is the Material 2 data table's, since MD3 has no data table.
    • MPTooltip's props table gives its default size as sm, which is what it is and what the configuration guide already said.

Fixed

  • An unreachable MPStepper step stays in the tab order. It was drawn as a <span>, which no keyboard reaches, carrying an aria-disabled that assistive technology ignores on a plain element — so a reader walking the rail found a gap with nothing to say why. It is now a button marked aria-disabled that refuses the press, as the documentation always said. A step whose own disabled is set is drawn the same way.

  • An open MPCollapsible stops clipping its body. The panel clips while its height moves, and it went on clipping once it had arrived, which cut the top off a text field's floating label at the top of the body. MPAccordion had already been fixed for the same thing, and the two now share the fix.

  • MPAccordion's density takes room from under each body as well. It tightened the header and the sides of the body and left the space under the body where it was.

  • An indeterminate MPProgressBox pulses in the accent. Its segments carried the grey track class and the accent one together, and the grey came later in the stylesheet, so the wave was a 12% wash that was barely there.

  • MPIconButton takes the variant of the MPButtonGroup around it. Its own default of text reached the button as if the caller had chosen it, so the group's never arrived, and a group of outlined buttons drew its icon buttons bare. Outside a group, or in one that names no variant, an icon button is still text.

  • A selected MPChip leads with a tick. filled and tonal already rest on the tones a selected chip takes, so a selected one looked exactly like one that was off. The tick is MD3's selected filter chip's, and on those two variants it is the only change. A chip given a startIcon of its own keeps it.

  • MPFloatingBottomNavigation draws the variant it is given. Its default elevation of 3 applied whatever variant said, and a level brings its own tone, so every variant but outlined drew the same sheet. The default level now applies only while variant is unset; set elevation as well to lift a chosen surface.

  • A required picker says so to a screen reader. MPDatePicker, MPDateRangePicker, MPDateTimePicker, MPTimePicker, MPTreeSelect and MPColorPicker open from a <button>, which takes neither required nor aria-required, and the asterisk is hidden from assistive technology, so nothing said it. The label now carries the word in the reader's language. It is common.required in a table passed to registerMPMessages. An MPColorPicker drawn inline says it in its label as well.

  • MPForm's errors reach the pickers and MPColorPicker. Base UI matches an error to a field by the name its control registers, and a popover trigger registers none, so an error keyed by a picker's name found nothing to show on. The name is now given to the field itself.

  • A required picker holds a form's submit back while nothing is chosen. required only drew an asterisk, because the trigger is a button and a button has no value for a form to check. Each picker and MPColorPicker now carries an input that stands in for its value: MPForm refuses the submit, shows the browser's message under the field and moves focus to the trigger, and an ordinary <form> refuses it too. A read-only picker is not checked, as a read-only input is not.

  • MPForm's onSubmit receives the pickers' values. It only sees the fields Base UI registers, and a popover trigger registers none, so a picker's value reached an action but never onSubmit. Each now comes under its name as one string: a range as an ISO 8601 interval such as 2026-07-01/2026-07-04, and an MPTreeSelect with multiple as its values joined by commas.

  • MPDataTable's sort arrow is drawn in the family color names. It was primary whatever color said, while the ticks and the pagination beside it followed. The documentation also said a chosen row read the family; it is secondary-container, as a chosen option is everywhere in the library, and the documentation now says so.

  • MPTextField takes aria-label. A hyphenated attribute is never type-checked on a component, so it was accepted and dropped without a word. MPTransfer's filter fields were named only by their placeholder, which disappears once there is a query, and now carry a name of their own.


Every release of this package is in the changelog on the docs site and in CHANGELOG.md at this tag.