Note: `./internal/*.css` files are still private and may unexpectedly change between versions. This change allows for importing public stylesheets like typography:
```css
@import '~@material/web/typography/md-typescale-styles.css';
```
PiperOrigin-RevId: 617659298
We are changing the names of these files to reduce similarity with CSS modules and avoid clashing with tooling built around that. If you're importing `*/internal/styles.css.js`, swap to `*/internal/styles.js`.
PiperOrigin-RevId: 611265000
🤖 I have created a release *beep* *boop*
---
## [1.0.0](https://github.com/material-components/material-web/compare/v1.0.0-pre.17...v1.0.0) (2023-09-25)
### ⚠ 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](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/examples/toolbar/). 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](16bfac1343))
* **iconbutton:** update tokens to v0.192 ([e8b5b29](e8b5b29d1e))
* **item:** add `<md-item>` layout component ([ffe4f79](ffe4f79b5d))
* **items:** add `<md-item>` to `@material/web/labs` ([b35212a](b35212a9ac))
* **list,menu,select:** add slots for specific slotted variants ([ed68995](ed689952dd))
* **menu:** create a Menu interface for easier md-menu wrapping ([5fad4f0](5fad4f088f))
* **menu:** do not close menu if anchor is clicked ([c7c276f](c7c276fdfa))
* **menu:** implement md-sub-menu ([54fbb2e](54fbb2ed5e))
* **menu:** menus will resize and flip corners to stay in viewport ([235a203](235a2033d7))
* **menu:** update tokens to v0.192 ([94b5c81](94b5c8125e))
* **select:** add required and form association ([4ad2336](4ad2336b87)), closes [#4903](https://github.com/material-components/material-web/issues/4903)
* **tabs:** add `tabs` property to retrieve tab elements ([bf48fc3](bf48fc307e))
* **typography:** add typography Sass APIs ([8e480de](8e480deae3))
### Bug Fixes
* aria polyfill overrides user values and user values override internals values ([8aa4faf](8aa4faf14a))
* **catalog:** remove TODO from home page ([af27ff8](af27ff8374))
* **dialog:** change content margin to padding ([8613fe6](8613fe6a58))
* **dialog:** not delegating focus in closure ([375b766](375b7664ef))
* **iconbutton:** allow prevent default click for toggles ([ed539c6](ed539c6853)), closes [#4857](https://github.com/material-components/material-web/issues/4857)
* **iconbutton:** fix HCM disabled opacity and outlined ([1163315](1163315948))
* **linearprogress:** linear progress buffer dots now visible in HCM ([70bfea8](70bfea8738))
* **list,menu:** clicking items in a list followed by keyboard nav functions as expected ([af171df](af171df086))
* **list,menu:** list items left right keyboard navigation ([fad6104](fad6104391))
* **list:** list items are now noninteractive by default ([3b5cbc4](3b5cbc4ede))
* **list:** update tokens to 0.192 ([58539b1](58539b1569))
* **menu:** allow submenus to close when focus is lost ([7a19c7e](7a19c7e97a))
* **menu:** apply padding to dividers per spec ([df52d92](df52d92724))
* **menu:** fix submenus on mobile ([368991c](368991ce30))
* **menu:** menu's default focus behavior follows google accessibility practices ([2927245](2927245114))
* **menu:** update default min width to spec and allow max-width to inherit ([2e25bf8](2e25bf8ce2))
* **navigationtab:** change slot names activeIcon and inactiveIcon to active-icon and inactive-icon ([f019ac3](f019ac37fe))
* **radio:** dispatches input event on select ([e444de3](e444de3c02))
* **select:** change slot names to kebab-case ([059dad5](059dad5d44))
* **select:** don't reflect `selected` attribute ([573caae](573caaee1b))
* **select:** select can reopen when animation interrupted ([78e7c17](78e7c1742f))
* **select:** update select docs and fix initial selection ([5e4434b](5e4434bfed))
* **slider:** border should only appear when handle nubs are overlapping ([6e72a8e](6e72a8e5f4))
* **slider:** label should not changed size when stacked ([b50d5c8](b50d5c87b3))
* **slider:** make tickmarks visible when slider is disabled ([e9d1e7d](e9d1e7d3c4))
* **tabs:** a11y and tabs sometimes not activating ([58f2446](58f2446246))
* **tabs:** remove font shorthand tokens ([88eb175](88eb1759c5))
* **tabs:** remove previously selected tab property ([70ce0d2](70ce0d2779))
* **tabs:** remove public indicator property ([d296316](d296316a2b))
* **tabs:** rename tab `selected` to `active` ([23b291b](23b291b2dd))
* **tabs:** scrollable divider not taking up full width ([a0fca90](a0fca90bdf))
* **tabs:** setting `active` on tab selects them ([1442f9b](1442f9b223))
* **textfield,focus,ripple:** fix textfield SSR ([f576b60](f576b60aec))
* **textfield:** add demo a11y and fix outlined label navigation ([7866a93](7866a939b9))
* **textfield:** broken required validity on Safari ([c26a578](c26a578448)), closes [#4796](https://github.com/material-components/material-web/issues/4796)
* **textfield:** change slot names to kebab-case ([82e9e92](82e9e92a19))
* **textfield:** don't show focus indicator when focused on icon ([61c8f6d](61c8f6db46))
* **textfield:** remove icon that appears in search input in chrome and safari ([86aaacd](86aaacd32c))
* **tokens:** generate tokens v0.192 ([116b448](116b448639))
* **tokens:** update components to v0.192 ([cfd053c](cfd053c397))
### Miscellaneous Chores
* prep release version ([df508ef](df508ef5fd))
### Code Refactoring
* **list,menu,select:** remove active concept and now parent controls tabIndex and focus ([d446315](d4463154cc))
* **list,menu,select:** remove data-variant slotted variant selectors ([1f31df8](1f31df818b))
* **list:** move list aria to host ([9447ec7](9447ec7d72))
* **list:** refactor list to reuse ListController ([6d0c7e8](6d0c7e8538))
* **list:** refactor list using md-item ([7536774](753677489b))
* **menu,select:** rename `fixed` to `positioning` ([63b0142](63b01425e7))
* **menu:** pull logic out of menuitem into a controller & change enum vals ([1217b62](1217b62ef2))
* **menu:** refactor menu-item to use md-item and not rely on md-list-item ([2a1d877](2a1d8776a7))
* **menu:** remove sub-menu-item in favor of sub-menu ([d6cbf74](d6cbf74137))
* **menu:** rename corner and focus state values lowercase with dashes ([6e54048](6e54048f1e))
* **menu:** update menu to use host-aria ([0384507](0384507447))
---
This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please).
COPYBARA_INTEGRATE_REVIEW=https://github.com/material-components/material-web/pull/4861 from material-components:release-please--branches--main--components--web 326c90e54feed2fbf1487d6154fdb1394963eec5
PiperOrigin-RevId: 568652033
Updates API docs in our markdown files with Lit Analyzer by manually running `npm run update-docs`
COPYBARA_INTEGRATE_REVIEW=https://github.com/material-components/material-web/pull/4946 from material-components:api-docs 1322ca962041a4b1f30ef7ad3ef2c7eb9087f42b
PiperOrigin-RevId: 566834596
