Reflect row and cell states as part names

[rolfsmeds]

Describe your motivation

The following states, currently only modelled as attributes, are not targetable using the ::part() selector:

• row:selected
• row:odd
• row:expanded
• row:first
• row:last
• cell:first-column
• cell:last-column
• cell:selected
• cell:frozen
• cell:froze-to-end

Describe the solution you'd like

Reflect these states as dynamically applied part names on the elements.

E.g. the selected attribute is currently <tr selected part="row">
After the changes it would be <tr selected part="row selected"> or <tr selected part="row row-selected">, depending on how we want to name state-parts.

Describe alternatives you've considered

No response

Additional context

No response

[web-padawan]

Here is an overview of existing part names / state attributes, as well as the list of the new part names to add:

Existing parts

Part name	Existing CSS (ThemableMixin)
row	[part~='row']
cell	[part~='cell']
body-cell	[part~='body-cell']
header-cell	[part~='header-cell']
footer-cell	[part~='footer-cell']
details-cell	[part~='details-cell']
focused-cell	[part~='focused-cell']

New parts

Row order

Row part	State attribute	Cell part	Existing CSS (ThemableMixin)
-	-	first-header-row-cell	[part~='row']:first-child [part~='header-cell']
-	-	last-header-row-cell	[part~='row']:last-child [part~='header-cell']
-	-	only-header-row-cell **	[part~='row']:only-child [part~='header-cell']
-	-	first-footer-row-cell	[part~='row']:first-child [part~='footer-cell']
first-row	first	first-row-cell	[part~='row'][first] [part~='cell']
last-row	last	last-row-cell	[part~='row'][last] [part~='cell']
odd-row	odd	odd-row-cell	[part~='row'][odd] [part~='cell']
even-row	even	even-row-cell	[part~='row'][even] [part~='cell']

** Not really needed, could use ::part(first-header-row-cell last-header-row-cell) instead.

Row states

Row part	State attribute	Cell part	Existing CSS (ThemableMixin)
-	loading	loading-row-cell	[part~='row'][loading] [part~='body-cell']
expanded-row	expanded	expanded-row-cell	[part~='row'][expanded] [part~='body-cell']
selected-row	selected	selected-row-cell	[part~='row'][selected] [part~='body-cell']
selected-row	selected	selected-row-cell	[part~='row'][selected] [part~='body-cell']
details-opened-row	details-opened	details-opened-row-cell	[part~='row'][details-opened] [part~='body-cell']

Row drag and drop

Row part	State attribute	Cell part	Existing CSS (ThemableMixin)
dragstart-row	dragstart	dragstart-row-cell	[part~='row'][dragstart] [part~='cell']
dragover-above-row	dragover="above"	dragover-above-row-cell	[part~='row'][dragover='above'] [part~='cell']
dragover-below-row	dragover="below"	dragover-below-row-cell	[part~='row'][dragover='below'] [part~='cell']
dragover-on-top-row	dragover="on-top"	dragover-on-top-row-cell	[part~='row'][dragover][dragover='on-top'] [part~='cell']
drag-disabled-row	drag-disabled"	drag-disable-row-cell	[part~='row'][drag-disabled] [part~='cell']
drop-disabled-row	drop-disabled"	drop-disable-row-cell	[part~='row'][drop-disabled] [part~='cell']

Cell states

Cell part	Cell state attribute	Existing CSS (ThemableMixin)
frozen-cell	frozen	[part~='cell'][frozen]
frozen-to-end-cell	frozen-to-end	[part~='cell'][frozen-to-end]
last-frozen-cell	last-frozen	[part~='cell'][last-frozen]
first-frozen-to-end-cell	first-frozen-to-end	[part~='cell'][first-frozen-to-end]
first-column-cell	first-column	[part~='cell'][first-column]
last-column-cell	last-column	[part~='cell'][last-column]
reorder-allowed-cell	reorder-status="allowed"	[part~='cell'][reorder-status='allowed']
reorder-dragging-cell	reorder-status="dragging"	[part~='cell'][reorder-status='dragging']

[jouni]

Looks good. Didn't go through the source to see if something is missing. Don't remember if we have a state attribute for the "active row"?