and the component
* slots them into its panel. Until now nothing styled them, so a menu rendered
* as a stack of user-agent buttons - Arial, ButtonFace grey, square corners -
* inside a correctly themed panel. In dark mode that reads as a white block on
* a dark page.
*
* The rules live here rather than in each component's shadow CSS because
* ::slotted() matches only direct children: an item inside
* is a grandchild of the slot and gets nothing. That is why two of the four
* command entries were styled and two were not. A document rule reaches any
* depth, and for slotted content it also wins over ::slotted on a tie, so a
* component may still carry its own rules for what is specific to it.
*
* Scoped by host element name so a host using these ARIA roles elsewhere on
* the page is untouched.
*/
/*
* :where(:not([slot="trigger"])) because a hui-menubar gives each menu's trigger
* role="menuitem" as the menubar pattern has it; the trigger is a button in
* the bar, not a row in the menu, and must not be drawn as one. :where()
* adds no specificity, so the checkbox and radio gutter rules below still win.
*/
hui-dropdown-menu [role="menuitem"]:where(:not([slot="trigger"])),
hui-dropdown-menu [role="menuitemcheckbox"]:where(:not([slot="trigger"])),
hui-dropdown-menu [role="menuitemradio"]:where(:not([slot="trigger"])),
hui-select [role="option"],
hui-combobox [role="option"],
hui-command [role="option"] {
align-items: center;
/* The host writes a