Fill a selected row written by hand in secondary-container again

1.x drew `data-selected` on any `data-list-row` that was not a card in
secondary-container with on-secondary-container ink, whatever element
the row was. 2.0.0 kept that only for `<x-list-item selected>` and a
table row's `aria-selected="true"`, so an application's own `<li>`,
`<div>` or `<tr>` with `data-md-list-row` and `data-md-selected` - the
contract list-rows.js still describes - lost its selected state without
a word. list-item.css now fills such a row, cards and list items
excluded, and names the fill `--md-list-row-fill`, so hover, focus and
press tint it as they tint a selected list item rather than replacing
it (1.x's selected fill hid them). In `<x-table>`, `data-md-selected`
selects a plain row too, beside `aria-selected="true"`, which ARIA
allows on a row only in a grid. A browser test compares a hand-made
selected `<li>` and a plain selected `<tr>` with the role pair in the
light and dark themes, checks that a selected card keeps its own fill
and that hover tints the row's fill; it fails without the change.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

resources/css/components/list-item.css

@@ -15,7 +15,9 @@
  * or focused row keeps its fill under the tint instead of trading it for a translucent one (C-08's
  * second fix). `data-md-selected` is M3's selected item, secondary-container filled, which also
  * lifts the description/overline/trailing/icon colour rules below since they exclude it — the
- * container's own colour takes over by inheritance. A selected option draws a second cue, a
+ * container's own colour takes over by inheritance. The same attribute on any other row that is
+ * not a card — an application's own `<li>`, `<div>` or `<tr>` — draws the same fill and ink, as
+ * 1.x's `data-selected` did; a card keeps its own container. A selected option draws a second cue, a
  * trailing check, so selection is never colour alone (C-03). `aria-disabled` inks the whole item
  * on-surface at the disabled-content opacity (38%) and blocks the pointer; the view drops the
  * item's link entirely rather than leaving a focusable, activatable control behind it (C-02).
@@ -93,6 +95,15 @@
         color: var(--md-sys-color-on-secondary-container);
     }
 
+    /* A row written by hand — list-rows.js's contract, not an `<x-list-item>` — selected the same
+       way. The state layers below are mixed over this fill, as they are over an item's. */
+    [data-md-list-row][data-md-selected]:not([data-md-card], [data-md-list-item]) {
+        --md-list-row-fill: var(--md-sys-color-secondary-container);
+
+        background-color: var(--md-list-row-fill);
+        color: var(--md-sys-color-on-secondary-container);
+    }
+
     [data-md-list-item][aria-disabled='true'] {
         pointer-events: none;
         color: color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent);

resources/css/components/table.css

@@ -7,7 +7,8 @@
  * always wins, whatever layer it comes from. Header cells in title-small on-surface-variant over an
  * outline-variant rule, body cells in body-medium between outline-variant rules — the role itself,
  * never a fraction of it, since M3 reserves opacity for state layers and disabled. A selected row
- * (`aria-selected="true"`) is secondary-container. A row that opens something is `data-md-list-row`
+ * (`data-md-selected`, or `aria-selected="true"` where the table is a grid, the only place ARIA
+ * allows it on a row) is secondary-container. A row that opens something is `data-md-list-row`
  * and answers a pointer as a list row does (components/list-item.css, shared with `<x-card>` and
  * `<x-list-item>`); a selected one names its fill `--md-list-row-fill`, so that state layer is laid
  * over the secondary-container rather than in place of it.
@@ -84,7 +85,7 @@
         border-bottom: 0;
     }
 
-    [data-md-table] :where(tbody tr[aria-selected='true']) {
+    [data-md-table] :where(tbody tr:is([aria-selected='true'], [data-md-selected])) {
         --md-list-row-fill: var(--md-sys-color-secondary-container);
 
         background-color: var(--md-list-row-fill);