material-components/material-web v1.0.0

on GitHub

1.0.0 (2023-09-26)

⚠ BREAKING CHANGES

• list: the new ListController behavior no longer waits for event.preventDefault asynchronously because it was causing keyboard navigations to scroll the page.
• list: <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.
• menu: Several enums in menu had their values changed from SCREAM_CASE to kebab-case to follow style guide. They are NAVIGABLE_KEYS -> NavigableKey, SELECTION_KEY -> SelectionKey, CLOSE_REASON -> CloseReason, KEYDOWN_CLOSE_KEY -> KeydownCloseKey
• menu,select: refactor fixed property to positioning="fixed" in Menu and menuFixed to menuPositioning="fixed"
• menu: This change refactors menu-item to no longer subclass or import from list-item. It also refactors it to use md-item directly which means that the API of menu item has moved from properties to slots. 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.
• menu: We have deleted 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 navigation
• menu: Menu no longer uses md-list internally which means the list-related properties such as list-tabindex and type should now be on the host of md-menu. The new attributes should be tabindex and role respectively.
• iconbutton: Replace container-size tokens with container-width and container-height.
• list: the 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:
  • To preserve prior default behavior, add the interactive attribute explicitly.
  • Any setting of a truthy noninteractive attribute or property can be removed as it's the new default behavior.
• menu: rename corner and focus state values lowercase with dashes
• chips: chips now follow the aria toolbar pattern. Chip sets are toolbars and chips are buttons or links. Filter chips are toggle buttons. What to change:
  • Remove type attribute from <md-chip-set> (you can mix and match chip types!)
  • Remove 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.
  • Disabled chips CAN be focused with the keyboard if always-focusable is set.
  • Filter chips no longer dispatch a "selected" event. Listen to "click" and use event.target.selected instead.
  • ArrowUp and ArrowDown no longer navigate between chips. These are reserved for chip actions, like dropdown menu chips.
• list,menu,select: the data-variant=".." selectors in list-item and all variants have been removed in favor of their respective slots. e.g. a slotted icon of the form md-icon[slot=end][data-variant=icon] should now be md-icon[slot=end-icon].
• menu: menu selected container color changed to secondary-container
• list:
• list: Aria and roles on List have been moved to the host element. list-tabindex attribute should be migrated to tabindex attribute. type attribute should be migrated to role attribute.
• list,menu,select: removed active from list-item, menu-item, and select-option. Instead, List uses tabindex to track whether something is focusable.
• select: option.selected no longer reflects. Set the attribute instead if relying on the attribute for styles/queries.
• dialog: if overriding margin on a dialog's content, swap it to padding. If a dialog's slotted first or last child has built-in margin (such as <h3> or <p>), remove the top/bottom margin as needed (since margin swapped to padding, there's no more margin collapsing).
• tabs: Rename the selected index property on md-tabs to activeTabIndex (active-tab-index attribute). Rename select-on-focus to auto-activate
• typography: composite -type tokens are no longer supported. Use discrete -font, -size, -line-height, and -weight tokens instead.
• tabs: replace label-text-type tokens with -font, -size, -line-height, and -weight
• tabs: rename selected to active for primary and secondary tabs.
• textfield: replace slot names leadingicon and trailingicon with leading-icon and trailing-icon
• select: replace leadingicon and trailingicon slot names with leading-icon and trailing-icon
• navigationtab: change slot names activeIcon and inactiveIcon to active-icon and inactive-icon

Features

• chips: swap to toolbar a11y pattern (16bfac1)
• iconbutton: update tokens to v0.192 (e8b5b29)
• item: add <md-item> layout component (ffe4f79)
• items: add <md-item> to @material/web/labs (b35212a)
• list,menu,select: add slots for specific slotted variants (ed68995)
• menu: create a Menu interface for easier md-menu wrapping (5fad4f0)
• menu: do not close menu if anchor is clicked (c7c276f)
• menu: implement md-sub-menu (54fbb2e)
• menu: menus will resize and flip corners to stay in viewport (235a203)
• menu: update tokens to v0.192 (94b5c81)
• select: add required and form association (4ad2336), closes #4903
• tabs: add tabs property to retrieve tab elements (bf48fc3)
• typography: add typography Sass APIs (8e480de)

Bug Fixes

• aria polyfill overrides user values and user values override internals values (8aa4faf)
• catalog: remove TODO from home page (af27ff8)
• dialog: change content margin to padding (8613fe6)
• dialog: not delegating focus in closure (375b766)
• iconbutton: allow prevent default click for toggles (ed539c6), closes #4857
• iconbutton: fix HCM disabled opacity and outlined (1163315)
• linearprogress: linear progress buffer dots now visible in HCM (70bfea8)
• list,menu: clicking items in a list followed by keyboard nav functions as expected (af171df)
• list,menu: list items left right keyboard navigation (fad6104)
• list: list items are now noninteractive by default (3b5cbc4)
• list: text items are no longer tabbable, links cannot be disabled (54c4ddb)
• list: update tokens to 0.192 (58539b1)
• menu,select: fix final aria issues (aeb5103)
• menu: allow submenus to close when focus is lost (7a19c7e)
• menu: apply padding to dividers per spec (df52d92)
• menu: expose item custom properties and fix selected color (d27ef2e)
• menu: fix submenus on mobile (368991c)
• menu: menu's default focus behavior follows google accessibility practices (2927245)
• menu: update default min width to spec and allow max-width to inherit (2e25bf8)
• navigationtab: change slot names activeIcon and inactiveIcon to active-icon and inactive-icon (f019ac3)
• radio: dispatches input event on select (e444de3)
• select: change slot names to kebab-case (059dad5)
• select: don't reflect selected attribute (573caae)
• select: select can reopen when animation interrupted (78e7c17)
• select: update select docs and fix initial selection (5e4434b)
• slider: border should only appear when handle nubs are overlapping (6e72a8e)
• slider: label should not changed size when stacked (b50d5c8)
• slider: make tickmarks visible when slider is disabled (e9d1e7d)
• tabs: a11y and tabs sometimes not activating (58f2446)
• tabs: remove font shorthand tokens (88eb175)
• tabs: remove previously selected tab property (70ce0d2)
• tabs: remove public indicator property (d296316)
• tabs: rename tab selected to active (23b291b)
• tabs: scrollable divider not taking up full width (a0fca90)
• tabs: setting active on tab selects them (1442f9b)
• textfield,focus,ripple: fix textfield SSR (f576b60)
• textfield: add demo a11y and fix outlined label navigation (7866a93)
• textfield: broken required validity on Safari (c26a578), closes #4796
• textfield: change slot names to kebab-case (82e9e92)
• textfield: don't show focus indicator when focused on icon (61c8f6d)
• textfield: remove icon that appears in search input in chrome and safari (86aaacd)
• tokens: generate tokens v0.192 (116b448)
• tokens: update components to v0.192 (cfd053c)

Miscellaneous Chores

• prep release version (df508ef)

Code Refactoring

• list,menu,select: remove active concept and now parent controls tabIndex and focus (d446315)
• list,menu,select: remove data-variant slotted variant selectors (1f31df8)
• list: move list aria to host (9447ec7)
• list: refactor list to reuse ListController (6d0c7e8)
• list: refactor list using md-item (7536774)
• menu,select: rename fixed to positioning (63b0142)
• menu: pull logic out of menuitem into a controller & change enum vals (1217b62)
• menu: refactor menu-item to use md-item and not rely on md-list-item (2a1d877)
• menu: remove sub-menu-item in favor of sub-menu (d6cbf74)
• menu: rename corner and focus state values lowercase with dashes (6e54048)
• menu: update menu to use host-aria (0384507)