Base styles fixes and enhancements

[jouni]

Blockers [total 16.25 days]

Things that should be fixed before v25.0:

• Baseline alignment (refactor!: baseline alignment #10320) [5 days]
• Grid border refactor (refactor: re-implement grid base styles to use CSS borders #10331) [3 days]
• checkbox and radio-button: use --vaadin-clickable-cursor [0.5 day] refactor: use --vaadin-clickable-cursor in checkbox and radio-button #10426
• password-field: override reveal-button color in readonly state (Readonly Password Field: Insufficient color contrast of password reveal button #8754) [0.5 day] fix: use correct color for readonly password-field reveal button #10429
• scroller and virtual-list: overflow-indicator variants: make them work with padding on the scroll container (proto: https://jsbin.com/bahubacusu/edit?html,css,output). This would also make it possible to use box-shadows instead of just a divider line. Requires the use of a custom property to set the padding. [1 day] (refactor: scroller and virtual-list overflow-indicators #10433)
• rich-text-editor: remove these props [0.25 day]
  - --vaadin-rich-text-editor-toolbar-button-font-family
  - --vaadin-rich-text-editor-toolbar-button-font-size
  - --vaadin-rich-text-editor-toolbar-button-line-height
  - --vaadin-rich-text-editor-toolbar-button-font-weight
  - --vaadin-rich-text-editor-toolbar-button-height
  - --vaadin-rich-text-editor-overlay-color-option-line-height
  - --vaadin-rich-text-editor-overlay-color-option-padding
  - --vaadin-rich-text-editor-overlay-color-option-font-size
• upload [0.25 day]
  • remove properties --vaadin-upload-file-button-font-family/font-size/font-weight/line-height/height
• vertical/horizontal-layout [0.25 day]
  • add property for padding (now uses the same as margin)
• notification: rename --vaadin-notification-gap → --vaadin-notification-container-gap [0.5 day] refactor: rename notification gap custom CSS property #10430
• hide toggle buttons in readonly fields (except MSCB when not in "wrap mode") [0.5 day] refactor: hide toggle button for readonly fields in base styles #10432
• app-layout iOS safe area insets [2 day] fix: app-layout and master-detail-layout safe area insets #10483
• vaadin-grid-tree-toggle: slot needs flex: 1 so that column text-align works as expected [0.5 day] refactor: set flex to 1 on the grid tree toggle slot element #10436
• grid: simplify border radius math (just inherit the radius on scroller element) [0.5 day] refactor: make grid scroller inherit border radius in base styles #10442
• multi-select-combo-box: check if both multi-select-combo-box-chip-min-width and chip-min-width properties are used/needed (remove chip-min-width, to just have a single property) [0.5 day] refactor: remove base styles CSS properties for chip min-width #10431
• tooltip: don’t use box-shadow for border, use a regular border like all other overlays [0.5 day] refactor: use border instead of box-shadow in tooltip base styles #10434
• overlay: should inherit font-family [0.5 day] - refactor: update overlay base styles reset to inherit font-family #10435

Potential blockers

Things I would like to change, but are not mandatory, and should be done before v25.0:

• Override vaadin-text-color and vaadin-border-color (including secondary variants) in Lumo refactor: override base styles properties with Lumo colors #10450
• Consider breaking “padding-container” apart to padding-inline and padding-block values refactor: split padding-container custom CSS property in base styles #10447
• rich-text-editor: refactor: improve order and appearance of RTE color reset options #10457
  • the text color “black” is actually “clear color”, change the “icon”. Similarly for bg color, where "white" actually means clear/transparent.
• input field buttons: increase click target area (only on touch devices) refactor: add pseudo-element to increase field button clickable area #10454
• same for checkbox/radio: fix: ensure minimum click target for checkbox and radio-button #10458

Major enhancements

Things that are not blocking, but would be great to have before v25.0:

• Animation support for overlay elements (CSS keyframes are problematic with shadow parts, so we should offer something built-in)
• input fields: add [slot=input] { text-align: inherit; }
  • text-align on host of input fields should inherit down to the field
• Use Lucide icons instead of Hero icons (replace svgs in style-props.js) (refactor: base style lucide icons #10526)
• property for progress-bar-height feat: add custom CSS property for progress-bar height #10492
• MDL iOS safe area insets fix: app-layout and master-detail-layout safe area insets #10483
  • Probably needs a variant for MDL to opt-in to the insets, when you know it’s covering the entire viewport
    • Or apply only when containment=viewport?

Minor enhancements (minor suitable)

• Nicer spinner/loader styles, using radial-gradient mask-image instead of border colors
• rich-text-editor: add “white-content-area” variant
• grid:
  • internal padding, easier indented rows? Or rather, add a custom property that makes it easy to add bigger padding to the first and last cells in each row.
  • row border-radius, make it easy with a custom prop (set on first and last column cell)

Bug fixes

• details/accordion: allow content to scroll with explicit height/max-height
• charts: adding [theme] attribute changes font sizes in base styles (seems like a bug)
• fix forced color mode (test on Win11)
  • focus outline color is not the same in all components
  • button colors
  • text input border colors
  • primary button
  • menu bar submenu indicators
  • checked items checkmark color
  • hovered/focused item in item overlays
  • ... and probably other issues
• menu-bar:
  • if no item has children, remove the space after items (the placeholder for submenu indicator) [0.5 day] refactor: only show submenu indicator if there are child items #10472
  • submenu: don’t wrap item labels, don’t allow overlay to go outside browser viewport
  • remove theme=icon from this selector: https://github.com/vaadin/web-components/blob/main/packages/menu-bar/src/styles/vaadin-menu-bar-button-base-styles.js#L31
• checkbox: clicking the label part doesn't toggle the checked state, even though it triggers the active state
• finding from refactor: use --vaadin-clickable-cursor in checkbox and radio-button #10426