Overflow an app bar's trailing actions below medium

Plan step 25, item 7 (navigation Missing: "App bar, trailing-action
overflow at small widths"). `<x-app-bar :actions="[...]">` takes the
trailing actions as a list whose entries take <x-menu-item>'s props plus
any action attribute. M3 allows up to two trailing icon buttons, and up
to four on larger screens, and lets trailing actions collapse into an
overflow menu at smaller breakpoints: below medium the bar keeps at most
two icon buttons, from medium four, the "More options" button counted
among them, the rest in its menu. Both forms render and media queries
pick one, so there is no script and no flash; each width has its own
menu so the arrow keys never reach a hidden row. The actions slot still
takes markup and never overflows.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/css/components/app-bar.css

@@ -15,6 +15,10 @@
  * negative top, so it scrolls up until only 64px of it remain, while its row of icons is sticky at
  * 0 inside it and stays put — the big title scrolls away under the row. Script only says when that
  * has happened (resources/js/app-bar.js), so the small title can fade in and the colour change.
+ *
+ * Trailing actions given as a list collapse into an overflow menu below `medium` and come back
+ * from it, by media query alone: both forms of every action are in the page, and each width hides
+ * the one it does not use, so nothing flashes and no script counts.
  */
 
 @layer components {
@@ -89,6 +93,29 @@
         margin-inline-start: auto;
     }
 
+    /* `actions` as a list: every action is both an icon button and a menu item, and the width of
+       the window says which one is drawn — up to two trailing icon buttons below `medium` and four
+       from it, an overflow button counted among them
+       (docs/reference/m3/components-navigation-selection-inputs.md § Top app bar → Behaviour and
+       guidelines). The wrappers stay out of the row's layout until a width hides them. */
+    [data-app-bar-action],
+    [data-app-bar-overflow] {
+        display: contents;
+    }
+
+    @media (width < 37.5rem) {
+        [data-app-bar-action][data-overflows-compact],
+        [data-app-bar-overflow="medium"] {
+            display: none;
+        }
+    }
+
+    @media (width >= 37.5rem) {
+        [data-app-bar-overflow="compact"] {
+            display: none;
+        }
+    }
+
     [data-app-bar-headline] {
         display: flex;
         min-width: 0;