Material You Lit

Opinionated lit web components

Drop in replacement for @material/web

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

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.
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 container.
All components: Set and allow modifications for font-tracking / letter-spacing
All components: All builtin icons are now rounded and render at the correct size. In order 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.
Select: Use nicer icon and animation.
Checkbox: Make more rounded by default.