feat: Allow customizing Spreadsheet via part names and css properties

[TatuLund]

Add the following list of parts to the internal elements to enable customization without injecting CSS in the shadow root of the <vaadin-spreadsheet> component:

Description	CSS Part
Formula input field	vaadin-spreadsheet::part(formula-field)
Address input field	vaadin-spreadsheet::part(address-field)
Popup button	vaadin-spreadsheet::part(popup-button)
Selection corner handle	vaadin-spreadsheet::part(selection-corner)
Tab scroll buttons	vaadin-spreadsheet::part(scroll-tab)
Scroll tabs to start button	vaadin-spreadsheet::part(scroll-tab-start)
Scroll tabs to end button	vaadin-spreadsheet::part(scroll-tab-end)
Scroll tabs left button	vaadin-spreadsheet::part(scroll-tab-left)
Scroll tabs right button	vaadin-spreadsheet::part(scroll-tab-right)
Add new sheet tab button	vaadin-spreadsheet::part(add-new-tab)
Sheet tab	vaadin-spreadsheet::part(tabsheet-tab)
Selected sheet tab	vaadin-spreadsheet::part(selected-tab)
Cell input editor	vaadin-spreadsheet::part(cell-input)
Spreadsheet cell	vaadin-spreadsheet::part(cell)
Comment indicator	vaadin-spreadsheet::part(comment-triangle)

Also adds the following CSS properties:

• --vaadin-spreadsheet-border-color
• --vaadin-spreadsheet-cell-border-color
• --vaadin-spreadsheet-header-border-color
• --vaadin-spreadsheet-text-color

Fixes #8143

[TatuLund]

Regular Lumo:

Applying custom.css

vaadin-spreadsheet.custom::part(popup-button) {
    background: #faeada;
    color: brown;
    font-weight: 600;
}

vaadin-spreadsheet.custom::part(popup-button):hover {
    background: #f2d1c7;
}

vaadin-spreadsheet.custom::part(popup-button):after {
    content: '▼';
}

vaadin-spreadsheet.custom::part(row-header) {
    background-color: #f0f8ff;
    border-right: 2px solid #add8e6;
}

vaadin-spreadsheet.custom::part(column-header) {
    background-color: #f0f8ff;
    border-bottom: 2px solid #add8e6;
}

vaadin-spreadsheet.custom::part(column-header selected-header) {
    --lumo-primary-color-10pct: #4d88e6 !important;
    color: white;
    font-weight: bold;
    border-bottom: 2px solid blue !important;
}

vaadin-spreadsheet.custom::part(row-header selected-header) {
    --lumo-primary-color-10pct: #4d88e6 !important;
    color: white;
    font-weight: bold;
    border-right: 2px solid blue !important;
}

vaadin-spreadsheet.custom::part(cell-input) {
    background-color: #f0f8ff;
    color: black;
    box-shadow: unset;
}

vaadin-spreadsheet.custom::part(scroll-tab-disabled) {
    color: #add8e6;
}

vaadin-spreadsheet.custom::part(tabsheet-tab) {
    border-color: #add8e6;
}

vaadin-spreadsheet.custom::part(comment-triangle) {
    border-width: 0 15px 15px 0;
    border-color: transparent orange transparent transparent;
}

vaadin-spreadsheet.custom {
    --vaadin-spreadsheet-header-border-color: #add8e6;
    --vaadin-spreadsheet-border-color: unset;
    --vaadin-spreadsheet-cell-border-color: #add8e6;
}

[DiegoCardoso]

Added some tests and made a suggestion about one of the parts's name.

[tomivirkki]

The properties should also work if defined on an ancestor element:

html {
  /* Works */
  --vaadin-checkbox-label-color: red;

  /* Doesn't work */
  --vaadin-spreadsheet-header-border-color: red;
  --vaadin-spreadsheet-border-color: red;
  --vaadin-spreadsheet-cell-border-color: red;
}

[DiegoCardoso]

Good catch! I refactored it to use private CSS properties as we do in other components. PTAL

[tomivirkki]

Is it intentional that the class name is plural but the part name isn't?

[TatuLund]

Yes, I think plural is odd in the original class names.

[tomivirkki]

Hmm...why odd? You're scrolling the tabs with the buttons after all

Kapture.2025-11-13.at.09.59.20.mp4

Also the PR description part listing states it so:

[DiegoCardoso]

The listing was added later by me, BTW.

[sonarqubecloud]

Quality Gate passed

Issues
6 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
1.8% Duplication on New Code

See analysis details on SonarQube Cloud

[tomivirkki]

The "selected-header" part name seems to be set incorrectly to the column headers

Kapture.2025-11-13.at.11.28.11.mp4