Changelog · Material Next

Last updated: October 29, 2026.

October 29, 2026

Version: 0.1.0

0.0.10 was never published; 0.1.0 carries everything it would have, and is the first release the App Toolkit, Smart Cleaner and Android Insider marketing sites all build on.

Added

Overlays for every app on the shell: presentation: 'dialog' (an AlertDialog centred over the scrim, sized by its content between 280 and 560 dp), a sheet's drag handle (handle), and flush for content that lays itself out, with its footer pinned.
A bottom slot for the destination's own bottom bar (an action row, a message field), above the navigation bar.
State-driven scrolling for captures: collapse drives a large app bar, scrollPosition starts the content scrolled, and onScroll (the preview-scroll event) reports the position to a screen that follows it.
titleLines for a large title that wraps (an article's), and hideNavigationBar for the bar that hides on scroll.
A child beside its tab's list on a wide window keeps its tab marked (besideList).
label on the identity: the name the app draws on itself when it differs from the store name.
Drawer entries take a badge, drawn as a Material 3 Badge; preview.statusBar: 'blank' leaves the status bar empty.

Changed

toolkitFooter() draws Settings and Share with rounded icons, as the library does.

Fixed

The shell's status bar, app bars, bottom bar, navigation bar, rail and permanent drawer stack above the content, so a scrolled card (one with contain: paint, which Chromium hit-tests outside its scroller's clip) no longer catches the taps meant for a tab.

October 28, 2026

Version: 0.0.9

The 0.0.8 release did not publish (its tag's package.json still said 0.0.7); 0.0.9 carries everything it would have.

Added

The Android preview: definePreviewApp() declares an app once (name, mark, tabs, drawer entries and footer, overflow menu), and previewScreen() draws each marketing screen's content inside the App Toolkit shell, <mnw-android-screen>. The shell picks the navigation from the window (navigation bar and modal drawer, rail, expandable rail, permanent drawer) and owns its controls: the app bar shows the menu only in the bottom bar layout, the rail owns its expand and collapse button, a child destination shows Back, and the overflow button appears only when there is something in it.
Sheets and full-screen dialogs drawn by the shell inside the screen, clipped by it: the content behind them is inert, focus moves in and back, and Escape, Back and the scrim close the topmost layer.
previewChrome(), the shell's decisions for a window, for tests and custom shells.
Destinations of three kinds, as in App Toolkit: a tab's root, a child that keeps the navigation bar, and a page that covers it on a phone.
Product identity: defineProductIdentity() declares an app once (name, launcher icon and in-app mark, fonts, palettes, destinations, links). The Android preview reads identity.app, the marketing hub identity.product, and loadProductFonts() registers the fonts and sets the typeface tokens. Assets stay in the app and resolve against a base the host can move.
App Toolkit presets: toolkitFooter() and supportUs(), the library's drawer footer and overflow entry, so every App Toolkit app declares only its own destinations.
A preview app's logo can be a function, resolved each time the drawer is drawn.

Fixed

Switching tabs with the fold rail expanded no longer replays its label entrance animation. Labels stay visible during navigation; opening the rail still reveals them after it widens.
The docs footer keeps its own light and dark surface colours: the page no longer paints another background and divider around it.

Changed

settle() also waits for elements inside open shadow roots, so a capture of the Android preview waits for its navigation bar and fields.

October 28, 2026

Version: 0.0.7

Fixed

The compact drawer header uses the same height as the top app bar, keeping outlined dividers aligned on phones.
Launcher drags keep a lifted preview under the pointer while neighboring tiles move into place. Interrupted reorders replace their previous animation, and drops settle into the final slot.
Lint, production tests and documentation asset copying run under the default Windows npm shell.
Rapid screen changes and Back/Forward navigation no longer leave a rejected view-transition promise unhandled. Interrupting an animation still renders the latest screen.

Changed

Entering and leaving the launcher's Edit mode animates the panel height, favorites and controls. Reduced motion skips these transitions; closing or removing the launcher clears pending motion.

October 27, 2026

Version: 0.0.6

0.0.5 was tagged, but its publish run failed and it never reached npm. 0.0.6 ships its changes with the fix below.

Added

mountMarketingHub(): the gallery and the prototype in one page. A card opens its screen at ?id=<screen> without a page load, and All screens or Back return to the gallery where it was scrolled; view transitions cross-fade the two where browsers have them. mountScreenPrototype() returns a handle with destroy().
navigation-mode="none" on <mnw-app-shell> and <mnw-marketing-shell> (navigationMode: 'none' for the gallery): no drawer and no menu button.

Changed

A marketing page has no footer: the gallery no longer renders the copyright bar.
<mnw-site-footer> follows the design Profile started with: at most 900px wide (--mnw-site-footer-max-width) and centered, 24px corners, and stacked and centered below 600px. --mnw-site-footer-container-color sets its color.
The documentation footer shows the author's social profiles instead of text links.
The prototype scales a device to the stage's full height.
The changelog dates each release and gives its version on the line below.

Fixed

The marketing hub's page switch waited for a view transition even when the page was hidden, so a background or headless tab could stay on the old view. Hidden pages switch at once. The hub test that failed the 0.0.5 publish now waits for the switch instead of a fixed 50ms.
appearance="outlined" squared off the modal drawer and drew a line along its edge. The modal drawer keeps its rounded corners; only a permanent drawer has the edge line.
A palette select in the preview settings panel made the panel scroll when its menu opened. Selects open their menus in the top layer, and the panel no longer keeps a transform after its entrance.

October 27, 2026

Version: 0.0.4

Added

Added expandable drawer categories with mnw-navigation-group. Active destinations reveal their group and remain mounted when it closes.
Added mnw-site-footer, a rounded copyright bar with optional social links, and a page footer slot on the app shell.
App shell destinations support explicit hash routes such as active-path="#projects".
appearance="outlined" on <mnw-app-shell>: outline-variant lines under the top app bar, under the drawer header and along the drawer, on flat surfaces.
drawer-heading on <mnw-app-shell>: a plain drawer title such as Menu, with a close button in the modal layout, for sites without a product brand.
navigation-size="large" on <mnw-app-shell>: 56px destinations and categories with 16px labels, as in Material Components.
trailing-icon and a trailing slot on <mnw-navigation-item>, for example open_in_new on a link that leaves the site.
The launcher's default favorites include the Apps Metadata Admin Console, after Android Insider's, with its own icon.

Changed

The marketing gallery shows its screens directly, without a count or category filter chips. The old product name, version and links footer is replaced by the copyright bar.
Gallery device frames stay off by default. Opening a screen shows its device frame, while explicit frame=none links and bare captures remain available.

Fixed

The whole drawer scrolled, taking the theme picker and policy links with it. Only the destinations scroll now; the header, brand and navigation-footer stay in place.
Destinations wrapped in an app's own element (<div slot="navigation">) lost the space between them. Destinations and categories now pad themselves.

Removed

Removed App Toolkit from the launcher's default catalog.
Removed the marketing shell's category filter API and product footer metadata fields.

Security

App showcase metadata accepts only HTTP(S) icon and store URLs; invalid store links fall back to Google Play.

October 27, 2026

Version: 0.0.3

Fixed

A framed device on the prototype page could be taller than the stage and scroll: its fit was measured before the frame had its size, against a stage that grew with it, and CSS zoom left the frame artwork at full size.
System color mode now opts plain host pages into light and dark browser colors. Launcher edit and close icons follow the panel colors, including when the host palette is disabled.

Changed

The marketing shell's preview settings open from a Preview settings button in the top app bar, so the screen catalog starts right under the bar. <mnw-preview-controls> takes layout="stacked" for a panel; settings-open reflects the panel's state.
The prototype stage has no outlined card and never scrolls: a framed device or a large window is scaled to fit, and refits when the window, the frame or the screen changes size.
The screen inspector no longer shows the screen's category, description and Compose source; the screen picker names the screen. MarketingScreen.source is removed.
The product launcher demo's Follow color palette is a Material checkbox.
Redesigned the product launcher with Google light and dark surfaces, single-line app labels and an uncluttered edit grid. Select apps or drag them between Favorites and More apps; Alt+arrow and Delete remain available on the keyboard.
Launcher edits stay temporary until Done. Cancel, Escape and closing the panel discard the draft, and launcher-change reports only saved changes.

October 27, 2026

Version: 0.0.2

Added

Added material-next-web-components/theme.js: Material 3 color roles generated from one source color with Material Color Utilities, saved per origin. <mnw-theme-button> is a top app bar palette button that opens <mnw-theme-controls> (source color, dark, system or light, and a reset). <mnw-color-picker> is the reusable HCT color picker inside them, built from <mnw-hct-slider>. colorScheme(), colorThemeCss() and applyColorTheme() work without the elements.
Added the palette button to the documentation site's top app bar; the chosen theme is remembered.
Added an actions slot to <mnw-marketing-shell> for trailing top app bar actions: icon buttons, buttons, links or any custom element, such as <mnw-product-launcher>. mountMarketingGallery() takes them as actions: () => unknown. The standalone <mnw-marketing-top-app-bar> stays identity-only.
Added launcher icon guidelines: SVG first, then PNG or WebP, transparent, with no border or tile of its own, cropped close to the artwork.

Changed

Changed launcher icons to fit one 40px square, so a wide logo such as Cloudflare's is no larger than a square one.
Changed mocks to draw no scrollbars, as Compose draws none: screen hosts, screen cards and the prototype stage still scroll by wheel, touch and keys.
Changed the docs top app bar to leave less room after its trailing actions.
Changed the documentation footer: GitHub and Changelog are in the top app bar, so the footer no longer repeats them.
Changed the package to depend on @material/material-color-utilities (Apache-2.0), for theme.js.
Changed the documentation's dark tokens to follow data-color-mode on the root element, which the theme controls set.

Fixed

Fixed the sample app's floating action button overlapping the navigation bar with 3-button navigation. It now sits 16dp from the bottom-end corner of the content, above the navigation bar or beside the rail.
Fixed CSS backslashes being read as JavaScript escapes when stylesheets are compiled into modules.
Fixed incomplete tag stripping in the docs generator's text and anchor helpers.
Fixed a slow regular expression when comparing launcher URLs.

Security

Code scanning now skips references/, the read-only upstream snapshots, and build output. Their alerts were in code Material Next does not ship or run.

October 27, 2026

Version: 0.0.1

The first release of Material Next: Material 3 Expressive web components built on Lit and Material Web.

Documentation elements: product home, app showcase (from the public apps metadata API), code blocks, expressive section tabs, docs shell, page, navigation and table of contents. Each element has its own import and TypeScript declarations.
App shell: a permanent or closed modal navigation drawer, one navigation tree, routing events for host-owned navigation and unsaved-change guards, and a drawer footer with Light, Dark and System themes and Privacy Policy and Code of Conduct links.
Marketing hub: galleries, a prototype page with inspection and comparison, live screen hosts, device frames, captures and video embed controls, composed with the app shell.
Product launcher: favorite products, consoles and shortcuts, with editing, pointer and keyboard reordering, local persistence shared across tabs, separate admin redirects, the Google launcher palette and an opt-in follow-color-palette.
Scrollbars that follow the color palette across the page and component scroll areas, with system colors in high contrast.
Packaging: JavaScript, declarations and the custom elements manifest build when installed from Git or packed. Project icons ship in assets/marketing/ with the mnw-marketing-assets copy command.
Docs site with a reference page and live demo for every element, a marketing hub guide, and a changelog page generated from this file.