v25.0.0-alpha6

API Documentation →

Changes Since v25.0.0-alpha5

💥　Breaking Changes

• confirm-dialog,vaadin-lumo-styles
  • ⧉ Override confirm dialog header slotted element font styles (#9570)
• login
  • ⧉ Replace paragraph in login form footer with div (#9593)
• login,vaadin-lumo-styles
  • ⧉ Replace remaining login paragraph elements with div (#9595)
• menu-bar
  • ⧉ Debounce updating overflow to improve performance (#9618)
• popover
  • ⧉ Rename contentWidth and contentHeight to width and height (#9631)
• rich-text-editor,vaadin-lumo-styles
  • ⧉ Move all rich-text-editor icons to Lumo (#9640)
• select
  • ⧉ Prevent focusout when closing select overlay on outside click (#9572)
• select,vaadin-lumo-styles
  • ⧉ Make default overlay width custom CSS property private (#9576)

🚀　New Features

• crud,vaadin-lumo-styles
  • ⧉ Port crud Lumo styles to CSS files (#9522)
• grid,vaadin-lumo-styles
  • ⧉ Port grid Lumo styles to CSS files (#9520)
• grid-pro,vaadin-lumo-styles
  • ⧉ Port grid-pro Lumo styles to CSS files (#9521)
• master-detail-layout,vaadin-lumo-styles
  • ⧉ Port master-detail-layout Lumo styles to CSS files (#9602)
• overlay,vaadin-lumo-styles
  • ⧉ Port overlay component Lumo styles to CSS files (#9613)
• tabsheet,vaadin-lumo-styles
  • ⧉ Port tabsheet Lumo styles to CSS files (#9599)

🐛　Bug Fixes

• app-layout,dialog
  • ⧉ Replace hsl(0 0 0) syntax not supported in Safari 17 (#9624)
• avatar-group,avatar
  • ⧉ Avatar text/icon color (base styles) (#9560)
• combo-box,date-picker,email-field,input-container,number-field,select,text-area,text-field,time-picker
  • ⧉ Add minimal visual indication of an invalid input field (#9496)
• field-base
  • ⧉ Use base custom property for disabled cursor (#9583)
• field-highlighter,vaadin-lumo-styles
  • ⧉ Reset user-tags overlay part background and box-shadow (#9574)
• master-detail-layout
  • ⧉ Add missing Lumo style.js import (#9605)
• select
  • ⧉ Focus select when opening on toggle button mousedown (#9573)
• side-nav
  • ⧉ Update side-nav item padding and background color (#9584)
• vaadin-lumo-styles
  • ⧉ Add missing core styles to rich-text-editor.css (#9645)
  • ⧉ Add missing core styles to time-picker.css (#9635)
  • ⧉ Avoid row-gap following gap with CSS variable (#9634)
• vaadin-themable-mixin
  • ⧉ Do not throw when cssRules property is inaccessible (#9596)

💅　Polish

• All components
  • ⧉ Rename CSSInjector to LumoInjector (#9600)
• accordion,app-layout,avatar-group,avatar,button,checkbox-group,checkbox,combo-box,component-base,date-picker,details,email-field,grid,input-container,integer-field,list-box,number-field,password-field,radio-group,select,side-nav,text-area,text-field,time-picker,tooltip
  • ⧉ Derive colors from base background and text color (#9552)
• app-layout,avatar,button,checkbox,combo-box,component-base,confirm-dialog,date-picker,details,dialog,field-base,grid,input-container,item,list-box,overlay,side-nav,text-area,tooltip
  • ⧉ Rename base style properties to make them public (#9553)
• avatar,card,vaadin-lumo-styles
  • ⧉ Lower rule specificity to avoid breaking change (#9623)
• avatar-group,date-picker,field-highlighter,input-container,multi-select-combo-box,tabs,vaadin-lumo-styles
  • ⧉ Drop legacy -webkit-mask fallback (#9558)
• combo-box,date-picker,multi-select-combo-box,time-picker
  • ⧉ Update field components to set owner on the overlay (#9585)
• combo-box,list-box,login,multi-select-combo-box,overlay,split-layout,tabs,text-area,time-picker,vaadin-lumo-styles
  • ⧉ Drop legacy-webkit-scrolling-overflow property (#9564)
• confirm-dialog,dialog,overlay
  • ⧉ Move dialog setBounds logic to overlay mixin (#9643)
• dashboard
  • ⧉ Update dashboard styles, fix unit tests to use src version (#9563)
• date-picker
  • ⧉ Drop momentum scrolling prevention workaround (#9562)
• field-base,input-container,map,number-field,side-nav,text-area,vaadin-lumo-styles
  • ⧉ Remove vendor prefixes from appearance CSS property (#9559)
• field-highlighter
  • ⧉ Simplify select field-highlighter logic and tests (#9581)
• side-nav,vaadin-lumo-styles
  • ⧉ Remove obsolete CSS @supports wrappers (#9561)
• vaadin-lumo-styles
  • ⧉ Ensure Lumo global props and styles apply in Shadow DOM (#9626)
  • ⧉ Define Lumo injection properties on both :root and :host (#9621)
• vaadin-lumo-styles,vaadin-themable-mixin
  • ⧉ Modularize styles in CSS files to optimize Lumo bundle size (#9524)
• vaadin-themable-mixin
  • ⧉ Add !important to ::before styles in CSS property observer (#9622)
  • ⧉ Remove unnecessary adoptedStyleSheets fallback (#9586)

🚧　Experiments

• card,vaadin-lumo-styles
  • ⧉ Add card base styles and visual tests (#9603)
• combo-box,component-base,tabsheet
  • ⧉ Add tabsheet base styles and visual tests (#9632)
• confirm-dialog
  • ⧉ Add confirm-dialog base styles and visual tests (#9474)
• custom-field
  • ⧉ Add custom-field base styles and visual tests (#9628)
• date-time-picker
  • ⧉ Add date-time-picker base styles and visual tests (#9601)
• multi-select-combo-box,vaadin-lumo-styles
  • ⧉ Add multi-select-combo-box base styles and visual tests (#9608)
• progress-bar
  • ⧉ Add progress-bar base styles and visual tests (#9615)
• scroller
  • ⧉ Add scroller base styles and visual tests (#9630)
• tabs
  • ⧉ Add tabs base styles and visual tests (#9481)

🔬　Tests

• board,cookie-consent
  • ⧉ Import components without Lumo styles from src (#9614)
• combo-box,multi-select-combo-box,time-picker
  • ⧉ Disable combo box overlay animation (#9633)
• context-menu
  • ⧉ Fix context-menu overlay tests to pass with base styles (#9557)
• grid-pro
  • ⧉ Update grid-pro test to fix post-finalize style warning (#9610)
  • ⧉ Update grid-pro test to query item from the list-box (#9609)
• icons
  • ⧉ Add missing Lumo props.css import (#9607)
  • ⧉ Run vaadin-icons visual test with both Lumo and base styles (#9597)
• master-detail-layout
  • ⧉ Import all global Lumo styles in MDL visual tests (#9604)
• overlay
  • ⧉ Fix overlay position tests to pass with base styles (#9554)
• select
  • ⧉ Extract and extend select focus related tests (#9575)
• tabsheet
  • ⧉ Add visual test for tabsheet scroller focus-ring state (#9611)
• vaadin-lumo-styles
  • ⧉ Verify that global Lumo props are overrideable via html selector (#9629)
  • ⧉ Add missing Lumo CSS imports, import all global styles (#9619)
• Other
  • ⧉ Include all packages when running visual tests with --ported (#9612)

🏠　Internal

• vaadin-lumo-styles
  • ⧉ Add missing xmlns attribute to new svg icons (#9646)
• Other
  • ⧉ Decrease body selector specificity in dev pages (#9644)
  • ⧉ Update custom-field dev page, fix console error (#9625)
  • ⧉ Remove color-scheme property from body (#9598)
  • ⧉ Improve multi-select-combo-box dev page (#9579)
  • ⧉ Improve login-form dev page (#9565)
  • ⧉ Minor updates to dev pages base styles (#9582)
  • ⧉ Improve progress-bar dev page (#9580)
  • ⧉ Fix incorrect condition in select dev page (#9569)
  • ⧉ Improve select dev page, add custom renderer example (#9567)
  • ⧉ Improve menu-bar dev page (#9549)
  • ⧉ Prevent FOUC in dev pages with ported Lumo styles (#9556)
  • ⧉ Restructure dev pages common styles (#9547)