The hover rule's `:not(:has([data-md-field-control]:disabled))` weighs
as much as its argument, so hover weighed (0,5,0) against focus's
(0,2,0), and the error's hover (0,6,0) against the error's focus
(0,4,0): a focused field with the pointer on it drew a 2px on-surface
edge instead of primary, a field in error on-error-container instead of
error, in both variants. A customizable select with its menu open lost
the same way, since focus is then on an option in the top layer and
only select.css's `:open` rule (0,3,1) draws the focus edge. M3 layers
focus over hover. The disabled condition is now weightless inside
`:where()`, still keeping hover off a disabled field, and the focus
rule gains the field ancestor: focus (0,3,0) outweighs hover (0,2,0),
the error's focus (0,4,0) the error's hover (0,3,0), and the open
select both. An open select in error drew primary, not error, and now
draws error. A browser test hovers and clicks an outlined, a filled and
an invalid field and opens a select and a select in error, comparing
each edge with its role; it fails without the change (the error select
without select.css's rule).
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Plan step 36. menu.css left Tailwind's unlayered half for
material.components, where its `appearance: base-select` on the select
ties select.css's `appearance: none` in layer and specificity and loses
on order: select.css's block always follows the menu.css it imports. The
customizable select would have fallen back to the native list. The
select's own opt-in now sits in select.css's @supports block; menu.css
keeps the picker's. A test pins where each is written.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
<x-menu> renders data-md-menu with data-md-sheet-at-compact, and its
popover data-md-menu-popover with data-md-position and data-md-vibrant;
menu.css caps a long menu at 288px so it scrolls instead of running
off the top layer (ACT-04) and ties the open/close transition to the
trigger's corner (ACT-26), restyles a submenu to open in place inside
a sheet-at-compact sheet, and still carries the dropdown a select's
picker and a searchable choices field draw, so select.css and
choices.css finish their step-36 TODO import. actions.css sheds the
state-transition-fast and popover-transition utilities menu-item and
menu no longer use; state-transition-default and [data-fab-menu]
stay for fab-menu's own rewrite.
data-menu, data-menu-filter, data-menu-sheet, data-menu-empty,
data-sheet-at-compact, data-vibrant and data-active are renamed to
data-md-*, also in menu.js, split-button.css (which renders a
<x-menu> and now imports its stylesheet) and AppBarTest's overflow
menu (plan step 36, actions).
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
<x-select> marks its field root data-md-select, and what a <select>
changes in the field — covering the whole box, the customizable
select's closed button, the focused look and turned arrow while open —
moves from field.css to components/select.css (plan step 36). The open
list stays in menu.css until the menu leaves Tailwind.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
