Material You Lit

Opinionated lit web components

Drop in replacement for @material/web

  "devDependencies": {
    "@material/web": "npm:material-web-evo@^20000.50000.0",

Additional features

• Touch input fix for Chromium-based browsers: Allow clicking on buttons outside while disallowing clicks on the list during scrolling to improve UX greatly. Work around rogue chrome click after scrolling twice.
• Field, text-field and select: Allow constant floating label: <md-outlined-text-field label="Sticky Label" constant-floating-label> </md-outlined-text-field>
• Dialog: Use :backdrop instead of scrim to fix z-index and multi dialog issues and properly clip dialog content during animation. Also uses backdrop-filter blur.
• Dialog: Allow flex-based DIY scroll implementation in the dialog content using <md-dialog custom-scroll="true"></md-dialog>
• iOS/iPadOS: Disable double tab zoom for all components
• iOS/iPadOS: Fix stuck ripple effects on scroll container lists. Make sure you use touch-action: pan-y on scroll containers.
• All components: Set and allow modifications for font-tracking / letter-spacing.
• All components: All builtin icons are now rounded and rendered at the correct size. To use the correct icons for non-icon-buttons, that render at 18px, zoom the 20px material icons so that they render at the native 20px by setting viewBox="48 -912 864 864" instead of "0 -960 960 960". Setting icon size messes with the layout.
• All components: Fix ripple getting stuck on hover after component is reconnected when they were clicked before the disconnect
• Select: Use nicer icon and animation.
• Checkbox: Make more rounded by default.
• Chips: Use correct outline color.
• General: Use overscroll-behavior: contain