Material Design Web Components
no-navigation-wrap to fix select accessibility (c6ffd70)@material/web/typography/md-typescale classes (36dd77e)::part in all components (b74e3dd).css files for [@import](https://github.com/import)-ing (cde649c)<styles>.css.js to <styles>.css (c35bad0)selected state in input event (8d201e0)scroll-behavior: smooth not working (274ce3e), closes #5497
text-align from parents (668f0ee), closes #5509
CSSResult[] types for static styles (ce41b7b)--md-sys-shape-* tokens for all components (41bac9e):host-context rtl selectors (f2ff867)no-spinner to remove number spin buttons (3c6e550)click.preventDefault() not working when also updating selected (5dc870b)--md-menu-item-container-color not working (86bd6f8)internal/controller/events (eca1357)--md-elevation-level no longer leaks into tabs (ddf1fb0), closes #5137
tabs.scrollToTab() not working (eb7c17e)reportValidity() during change (6efc904)selected-icon slot to customize checkmark (89b4c2e)@material/web@nightly publishes (91c1221)cursor using CSS (798f5ae)min-width and user-select (1852238)padding and gap (5bb4a42)text-wrap: wrap (5d964ad)checked and indeterminate not updated during input event (e78a52f)isTab check so it is possible to create your own tab (db3c865)isTab check so it is possible to create your own tab (e10186e)md-tab attribute to brand individual tab children (8ec0813)multiple field to the native input (03e5a7e), closes #5064
md-tab attribute to brand individual tab children<md-list-item> now uses slots instead of properties and has removed many prescriptive items (such as avatar, image, and video items). The default slot can be used for any custom content. html <md-list-item> <div slot="overline">OVERLINE</div> <div slot="headline">First line</div> <div slot="supporting-text">Second+ lines</div> <div slot="trailing-supporting-text">Trailing</div> <md-icon slot="start">star</md-icon> <md-icon slot="end">star</md-icon> </md-list-item> Add type="button" or type="link" for interactive list items.fixed property to positioning="fixed" in Menu and menuFixed to menuPositioning="fixed"
start-* and end-* slots are now just start and end, many tokens are now gone in favor of slotting. headline property is now a slot="headline" slot. Typeahead search text can now be set via typeaheadText which defaults to the slotted headline textContent. select-option now has the displayText which is used to display text in the md-select when the option is selected; defaults to the slotted headline textContent.md-sub-menu-item. Instead it is recommended to use md-sub-menu which can have md-menu-item[slot=item] and md-menu[slot=menu] slotted into it. This makes sub-menu-item accessible for screen readers using linear navigationlist-tabindex and type should now be on the host of md-menu. The new attributes should be tabindex and role respectively.container-size tokens with container-width and container-height.noninteractive property has been replaced by the interactive property, and by default, a list-item will no longer show a ripple or focus ring. What to change:
interactive attribute explicitly.noninteractive attribute or property can be removed as it's the new default behavior.type attribute from <md-chip-set> (you can mix and match chip types!)single-select from <md-chip-set>. Use JS to control filter chips if single selection is required. Radio filter chips will come in a future update.always-focusable is set."selected" event. Listen to "click" and use event.target.selected instead.md-icon[slot=end][data-variant=icon] should now be md-icon[slot=end-icon].active from list-item, menu-item, and select-option. Instead, List uses tabindex to track whether something is focusable.option.selected no longer reflects. Set the attribute instead if relying on the attribute for styles/queries.<h3> or <p>), remove the top/bottom margin as needed (since margin swapped to padding, there's no more margin collapsing).selected index property on md-tabs to activeTabIndex (active-tab-index attribute). Rename select-on-focus to auto-activate
-type tokens are no longer supported. Use discrete -font, -size, -line-height, and -weight tokens instead.label-text-type tokens with -font, -size, -line-height, and -weight
selected to active for primary and secondary tabs.leadingicon and trailingicon with leading-icon and trailing-icon
leadingicon and trailingicon slot names with leading-icon and trailing-icon
<md-item> layout component (ffe4f79)<md-item> to @material/web/labs (b35212a)tabs property to retrieve tab elements (bf48fc3)selected attribute (573caae)selected to active (23b291b)active on tab selects them (1442f9b)fixed to positioning (63b0142)label-text-type tokens with -font, -size, -line-height, and -weight. Additionally, rename label-label-* tokens to a single label-*
*-type font tokens with -font, -size, -line-height, and -weight
label-text-type tokens with label-text-font, -size, -line-height, and -weight
*-type font tokens with -font, -size, -line-height, and -weight
label-text-type tokens with -font, -size, -line-height, and -weight
headline-text-type and supporting-text-type tokens with -font, -size, -line-height, and -weight
label-text-type tokens with label-text-font, -size, -line-height, and -weight
resizable attribute rather than using CSS. CSS resize can still customize the direction (defaults to both).slot="selectedIcon" to slot="selected" for toggle icon buttons.variant attributes and change md-tab to md-primary-tab, or md-secondary-tab if using `variant="secondary"--md-*tab-divider tokens and use md-tabs::part(divider) and --md-divider-* tokenspointer-events: none and CSS to style them.willUpdate to protectedelement.control = elementRef (1e7aff5)willUpdate to protected (dffff2d)selectedIcon slot to selected (9647f5e)href and target default value is now an empty string (d665864)