v25.0.0-alpha12

API Documentation →

Changes Since v25.0.0-alpha10

💥　Breaking Changes

• All components
  • ⧉ Remove JS based Lumo theme from all components (#9900)
  • ⧉ Update components root level entryponts to not use Lumo (#9898)
  • ⧉ Use new base styles by default, remove old core styles (#9910)

🚀　New Features

• aura
  • ⧉ Initialize aura package, modify web-dev-server config (#9883)

🐛　Bug Fixes

• avatar,tooltip
  • ⧉ Ensure tooltip overlay has correct line-height in avatar (#9918)
• dashboard
  • ⧉ Import dashboard base styles from the correct files (#9888)
• date-picker
  • ⧉ Close date-picker overlay correctly on backdrop click (#9905)
• field-base
  • ⧉ Remove field-base styles from npm files exclusion (#9922)
• form-layout
  • ⧉ Use baseline alignment on auto responsive form layout (#9865)
• grid
  • ⧉ Adjust aria-rowcount and aria-colcount based on grid state (#9872)
• grid-pro
  • ⧉ Prevent cells shrinking when not using focus button mode (#9913)
• master-detail-layout
  • ⧉ Defer detect layout mode until updates are done (#9889)
• notification
  • ⧉ Keep stretch regions always on top of other regions (#9895)
  • ⧉ Avoid shifting notification center regions on hover (#9893)

💅　Polish

• app-layout
  • ⧉ Only set drawer background fallback in overlay mode (#9890)
• avatar-group,avatar,message-list
  • ⧉ Add user colors to avatar base styles, update screenshots (#9915)
• avatar-group,vaadin-lumo-styles
  • ⧉ Remove tabindex from avatar-group overlay part (#9917)
• component-base
  • ⧉ Move base styles in component-base to styles folder (#9894)
• dialog,vaadin-lumo-styles
  • ⧉ Set overflow attribute on dialog overlay content change (#9903)

🚧　Experiments

• charts,component-base,field-highlighter
  • ⧉ Add field-highlighter base styles and visual tests (#9882)
• notification
  • ⧉ Add notification base styles and visual tests (#9540)

📝　Documentation

• avatar-group,context-menu,date-picker,date-time-picker,popover,select,time-picker,tooltip
  • ⧉ Remove mentions of overlays and theme attribute propagation (#9877)
• dialog,popover
  • ⧉ Deprecate overlayRole property in dialog and popover (#9880)
• popover
  • ⧉ Deprecate accessibleName and accessibleNameRef in popover (#9878)

🔬　Tests

• charts
  • ⧉ Add not animated styles to disable animations in charts tests (#9916)
  • ⧉ Refactor exporting tests to use better selectors (#9909)
• crud
  • ⧉ Remove CRUD test that covers Lumo specific CSS (#9838)
• dialog
  • ⧉ Update dialog test styles to work with native popover (#9902)
• field-highlighter,select,tabs
  • ⧉ Remove styles no longer needed with new base styles (#9914)
• notification
  • ⧉ Remove notification container tests failing with base styles (#9885)
• tabsheet
  • ⧉ Update tabsheet loading tests to pass with base styles (#9837)

🏠　Internal

• avatar,charts,dashboard,dialog,form-layout,grid,progress-bar
  • ⧉ Update unit and integration tests to run with base styles (#9906)
• vaadin-lumo-styles
  • ⧉ Fix Prettier formatting in card dev page and button CSS (#9881)
• Other
  • ⧉ Update web-test-runner config for base styles packages (#9896)
  • ⧉ Update visual tests workflow to only test Lumo CSS (#9899)
• Other
  • ⧉ Remove no longer needed script for theme folder typings (#9921)

v25.0.0-alpha11

This release is broken, please use 25.0.0-alpha12 instead.

v25.0.0-alpha10

API Documentation →

Changes Since v25.0.0-alpha9

🚀　New Features

• context-menu
  • ⧉ Fire closed event after closing animation has finished (#9874)
• login
  • ⧉ Fire closed event after closing animation has finished (#9873)

🐛　Bug Fixes

• field-base
  • ⧉ Bump TypeScript to 5.9, remove autocorrect property override (#9870)

💅　Polish

• popover
  • ⧉ Allow setting popover role directly (#9869)

v25.0.0-alpha9

API Documentation →

Changes Since v25.0.0-alpha8

💥　Breaking Changes

• avatar-group,combo-box,confirm-dialog,context-menu,crud,date-picker,dialog,field-highlighter,login,multi-select-combo-box,overlay,popover,rich-text-editor,select,time-picker,tooltip
  • ⧉ Update vaadin-overlay to use native popover by default (#9848)
• combo-box,multi-select-combo-box,time-picker
  • ⧉ Update combo-box overlay to use native popover (#9815)
• combo-box,multi-select-combo-box,vaadin-lumo-styles
  • ⧉ Update MSCB to not use combo-box extension internally (#9804)
• context-menu,menu-bar
  • ⧉ Update context-menu overlay to use native popover (#9839)
• crud
  • ⧉ Do not set primary theme on the CRUD new item button (#9817)
• crud,dialog
  • ⧉ Update dialog to use native popover (#9807)
  • ⧉ Update crud editor dialog to use native popover (#9790)
• field-highlighter,vaadin-lumo-styles
  • ⧉ Update user-tags overlay to use native popover (#9820)
• login,vaadin-lumo-styles
  • ⧉ Update login overlay to use native popover (#9794)
  • ⧉ Update login-form to use shadow DOM and slotted form (#9792)
• multi-select-combo-box
  • ⧉ Update multi-select-combo-box to use native popover (#9814)
• notification,overlay,vaadin-lumo-styles
  • ⧉ Update notification container to use native popover (#9819)
• overlay
  • ⧉ Remove z-index update logic from bringToFront method (#9847)

🐛　Bug Fixes

• confirm-dialog,crud,dialog,rich-text-editor
  • ⧉ Hide dialog when hidden is applied (#9866)
• crud
  • ⧉ Add missing editor outline focused state to base styles (#9840)
• grid
  • ⧉ Recalculate column widths on initial item load with same data provider (#9859)
• popover
  • ⧉ Save focus if target is set while popover is open (#9826)
• popover,vaadin-lumo-styles
  • ⧉ Enforce zero padding on popover no-padding theme variant (#9845)
• tabsheet,vaadin-lumo-styles
  • ⧉ Enforce zero padding on tabsheet no-padding theme variant (#9846)
• upload
  • ⧉ Remove incorrect CSS from upload base styles (#9834)

💅　Polish

• combo-box
  • ⧉ Extract combo-box items logic into separate mixin (#9805)
  • ⧉ Move dataProvider value warning logic to combo-box (#9811)
• confirm-dialog
  • ⧉ Remove no longer used private getter from confirm-dialog (#9861)
• context-menu,menu-bar
  • ⧉ Move context-menu and menu-bar overlay to the template (#9854)
• context-menu,multi-select-combo-box,notification,overlay,rich-text-editor
  • ⧉ Do not propagate overlay events through shadow roots (#9855)
• crud
  • ⧉ Move dialog role to CRUD dialog (#9806)
• dialog
  • ⧉ Add missing no-padding variant to dialog base styles (#9843)
• multi-select-combo-box
  • ⧉ Replace individual MSCB observers with updated callback (#9802)
• overlay
  • ⧉ Simplify OverlayStackMixin attached instances logic (#9852)
  • ⧉ Remove no longer used setNestedOverlay logic and tests (#9813)

🚧　Experiments

• charts,vaadin-lumo-styles
  • ⧉ Add charts base styles and visual tests (#9830)
• component-base,crud
  • ⧉ Add CRUD base styles and visual tests (#9740)
• component-base,dashboard
  • ⧉ Add dashboard base styles and visual tests (#9679)
• component-base,upload,vaadin-lumo-styles
  • ⧉ Add upload base styles and visual tests (#9691)
• form-layout,vaadin-lumo-styles
  • ⧉ Add form-layout base styles and visual tests (#9743)
• grid-pro,grid
  • ⧉ Add grid-pro base styles and visual tests (#9720)
• horizontal-layout,vaadin-lumo-styles,vertical-layout
  • ⧉ Add horizontal and vertical layout base styles and visual tests (#9842)
• master-detail-layout,vaadin-lumo-styles
  • ⧉ Add master-detail-layout base styles and visual tests (#9849)
• virtual-list
  • ⧉ Add virtual-list base styles and visual tests (#9668)

📝　Documentation

• charts
  • ⧉ Cleanup no longer relevant information from charts JSDoc (#9801)
• dialog
  • ⧉ Remove dialog ariaLabel property override from typings (#9860)

🔬　Tests

• board
  • ⧉ Add missing visual tests for board base styles (#9857)
• confirm-dialog
  • ⧉ Update confirm-dialog Esc tests to use sendKeys (#9796)
• cookie-consent
  • ⧉ Add missing visual tests for cookie-consent base styles (#9853)
• dialog
  • ⧉ Update custom dialog CSS in Lumo no-padding visual test (#9844)
• multi-select-combo-box
  • ⧉ Update MSCB tests to use shared helpers for items (#9809)
• overlay
  • [⧉](https://github.com/vaadin/web-...

v25.0.0-alpha8

API Documentation →

Changes Since v25.0.0-alpha7

💥　Breaking Changes

• avatar-group,combo-box,field-highlighter,multi-select-combo-box,rich-text-editor,time-picker,tooltip
  • ⧉ Remove backdrop part from overlays that do not use it (#9782)
• avatar-group,menu-bar,tooltip
  • ⧉ Update tooltip overlay to use native popover (#9760)
• avatar-group,vaadin-lumo-styles
  • ⧉ Update avatar-group overlay to use native popover (#9754)
• combo-box,date-time-picker,time-picker
  • ⧉ Update time-picker overlay to use native popover (#9755)
• confirm-dialog,crud,rich-text-editor
  • ⧉ Update confirm dialog overlay to use native popover (#9776)
  • ⧉ Update confirm-dialog to not use dialog extension (#9736)
• crud,rich-text-editor
  • ⧉ Move crud confirm dialogs to light DOM (#9783)
• date-picker,date-time-picker,field-highlighter
  • ⧉ Update date-picker overlay to use native popover (#9762)
• field-highlighter,select,vaadin-lumo-styles
  • ⧉ Update select overlay to use native popover (#9751)
• grid
  • ⧉ Rename updateRow to initRow, mark it as private (#9690)
• grid-pro,grid
  • ⧉ Split getItem into smaller methods, set loading state in updateRow (#9698)
  • ⧉ Rename updateItem to updateRow, mark it as private (#9695)
• menu-bar
  • ⧉ Update menu-bar to render root submenu in light DOM (#9745)
• message-input
  • ⧉ Do not set primary theme on message-input button (#9680)
• popover,tooltip,vaadin-lumo-styles
  • ⧉ Update popover overlay to use native popover (#9785)
• rich-text-editor
  • ⧉ Update rich text editor color popup to use native popover (#9777)
  • ⧉ Update rich-text-editor to render link dialog in light DOM (#9772)
  • ⧉ Update rich-text-editor to render tooltip in light DOM (#9757)
• split-layout,vaadin-lumo-styles
  • ⧉ Remove transform: translateZ(0) from split-layout (#9664)
• vaadin-lumo-styles
  • ⧉ Delete collection of default component property values (#9667)

🐛　Bug Fixes

• All components
  • ⧉ Prevent unwanted CSS transitions on Lumo injection (#9709)
• app-layout
  • ⧉ Remove focus trap when overlay mode is reset to false (#9514)
• app-layout,avatar-group,avatar,date-picker,grid,map,popover,progress-bar,split-layout,tabsheet,tooltip
  • ⧉ Don't use rem values for most sizing and spacing (#9674)
• component-base
  • ⧉ Use color-mix instead of relative color syntax (#9658)
• grid-pro
  • ⧉ Listen to opened-changed events in custom editors (#9671)
• icon,vaadin-lumo-styles
  • ⧉ Add explicit element to enforce icon baseline alignment (#9661)
• overlay
  • ⧉ Allow vaadin-overlay-open event to bubble to the document (#9774)
  • ⧉ Prevent overlay opening when setting opened while disconnected (#9758)
• tooltip,vaadin-lumo-styles
  • ⧉ Allow overriding tooltip offset custom CSS properties (#9788)

💅　Polish

• All components
  • ⧉ Remove usage of CSS layers from base styles (#9659)
• avatar,vaadin-lumo-styles
  • ⧉ Update avatar Lumo CSS to extend base styles (#9676)
• avatar-group
  • ⧉ Simplify avatar-group observers to reduce update count (#9753)
  • ⧉ Set owner property on the avatar-group overlay element (#9752)
  • ⧉ Update avatar-group to use has-overflow host attribute (#9657)
• avatar-group,combo-box,context-menu,crud,menu-bar,overlay,select,time-picker,tooltip
  • ⧉ Reflect overlay state attributes to owner (#9750)
• component-base
  • ⧉ Restore vaadin prefix to style-props base layer (#9687)
  • ⧉ Restore usage of CSS layer for base style properties (#9675)
• confirm-dialog,crud
  • ⧉ Use aria-description for confirm dialog message (#9775)
• confirm-dialog,dialog
  • ⧉ Extract dialog size properties into separate mixin (#9735)
• date-picker,field-highlighter
  • ⧉ Open date picker overlay on element focus in fullscreen (#9670)
• login,vaadin-lumo-styles
  • ⧉ Update login-form to use column flex on slotted form (#9689)
• map,vaadin-lumo-styles
  • ⧉ Update map Lumo CSS to extend base styles (#9656)
• master-detail-layout,vaadin-lumo-styles
  • ⧉ MDL layout and view transitions styles (#9665)
• notification,overlay
  • ⧉ Update overlay stack logic to not rely on body children (#9738)
• overlay
  • ⧉ Check if backdrop exists before adding listener on it (#9780)
  • ⧉ Do not call showPopover if only nested overlays are open (#9773)
  • ⧉ Make it possible to customize overlay modality root ([#9749](https://github.co...

v24.8.4

API Documentation →

Changes Since v24.8.3

🐛　Bug Fixes

• app-layout
  • ⧉ Remove focus trap when overlay mode is reset to false (#9514) (#9692)
• grid-pro
  • ⧉ Listen to opened-changed events in custom editors (#9671) (#9724)

💅　Polish

• date-picker,field-highlighter
  • ⧉ Open date picker overlay on element focus in fullscreen (#9670) (#9716)
• master-detail-layout
  • ⧉ MDL layout and view transitions styles (#9665) (#9669)

v24.7.11

API Documentation →

Changes Since v24.7.10

🐛　Bug Fixes

• app-layout
  • ⧉ Remove focus trap when overlay mode is reset to false (#9514) (#9693)
• grid-pro
  • ⧉ Listen to opened-changed events in custom editors (#9671) (#9726)

💅　Polish

• date-picker,field-highlighter
  • ⧉ Open date picker overlay on element focus in fullscreen (#9670) (#9717)

v25.0.0-alpha7

API Documentation →

Changes Since v25.0.0-alpha6

💥　Breaking Changes

• map,vaadin-lumo-styles
  • ⧉ Rename borderless map variant to no-border (#9652)

🚀　New Features

• vaadin-lumo-styles
  • ⧉ Port Lumo class utilities to CSS files (#9651)

🐛　Bug Fixes

• confirm-dialog,dialog,popover
  • ⧉ Allow setting null in TypeScript to width and height (#9653)

💅　Polish

• accordion,combo-box,multi-select-combo-box,notification,popover,time-picker,tooltip,vaadin-lumo-styles
  • ⧉ Remove unnecessary LumoInjectionMixin usage (#9655)
• card,charts,details,form-layout,horizontal-layout,master-detail-layout,scroller,upload,vaadin-lumo-styles,vaadin-themable-mixin,vertical-layout
  • ⧉ Allow base theme to be toggled per component in JS (#9594)
• menu-bar
  • ⧉ Simplify menu-bar observers to reduce update count (#9649)

🏠　Internal

• vaadin-lumo-styles
  • ⧉ Include Lumo CSS files in package.json for npm publishing (#9654)

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 adoptedStyl...

v24.8.3

API Documentation →

Changes Since v24.8.2

💥　Behavior Altering Fixes

• menu-bar
  • ⧉ Debounce updating overflow to improve performance (#9618) (#9639)

🐛　Bug Fixes

• master-detail-layout
  • ⧉ Add missing Lumo style.js import (#9605) (#9606)