Add buttons, menus and the rest of M3 Expressive's actions

<x-button> (label buttons, icon buttons and toggles in five sizes, with
filled, tonal, outlined, elevated and text variants in any colour role),
<x-tooltip>, <x-menu> with items, groups and separators, <x-button-group>,
<x-group> as a connected button group, <x-split-button>, <x-fab>,
<x-fab-menu> and <x-loading>. Sizes, colours and shapes come from
androidx Compose Material 3's tokens; the loading indicator ports its
Morph into SVG + SMIL.

Menus follow WAI-ARIA's menu button pattern on popovers placed by CSS
anchor positioning. Browser tests run in Chromium, Firefox and WebKit.
The showcase fetches the icon names on demand: inlined, they tripped
Pest's test server into HTTP 431s under Firefox.

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

resources/css/components/groups.css

@@ -0,0 +1,84 @@
+/*
+ * Button groups and split buttons: shapes that depend on a button's place among its siblings.
+ *
+ * Unlayered on purpose. Each <x-button> draws its own corners and padding as utilities, and a
+ * rule in any @layer loses to a utility whatever its specificity; the group has to win.
+ *
+ * Standard group (`<x-button-group>`): pressing a label button widens it and narrows its
+ * neighbours by the same amount, so the row keeps its length — Expressive's press expansion
+ * (ButtonGroupDefaults.ExpandedRatio is 15%; this uses a fixed step per size). Icon buttons keep
+ * their width.
+ *
+ * Connected group (`<x-button-group connected>`, `<x-group>`): 2px apart, the outer corners
+ * full, the inner corners small, smaller still while pressed, and a selected segment fully round
+ * (ConnectedButtonGroupSmallTokens and the M3 Expressive connected button group spec).
+ *
+ * Split button (`<x-split-button>`): the same idea for two halves; the trailing half turns
+ * round and its chevron turns over while its menu is open (SplitButton*Tokens).
+ */
+
+[data-button-group] {
+    --group-inner: var(--md-sys-shape-corner-sm);
+    --group-inner-pressed: var(--md-sys-shape-corner-xs);
+}
+
+[data-button-group][data-size='xs'] { --group-pad: 0.75rem; --group-grow: 4px; --group-inner: var(--md-sys-shape-corner-xs); --group-inner-pressed: 2px; }
+[data-button-group][data-size='sm'] { --group-pad: 1rem; --group-grow: 6px; }
+[data-button-group][data-size='md'] { --group-pad: 1.5rem; --group-grow: 8px; }
+[data-button-group][data-size='lg'] { --group-pad: 3rem; --group-grow: 16px; --group-inner: var(--md-sys-shape-corner-lg); --group-inner-pressed: var(--md-sys-shape-corner-md); }
+[data-button-group][data-size='xl'] { --group-pad: 4rem; --group-grow: 20px; --group-inner: var(--md-sys-shape-corner-lg-increased); --group-inner-pressed: var(--md-sys-shape-corner-lg); }
+
+[data-button-group='standard'] > :not([data-icon-button]):active:not(:disabled, [aria-disabled='true']) {
+    padding-inline: calc(var(--group-pad) + var(--group-grow));
+}
+
+[data-button-group='standard'] > :not([data-icon-button]):has(+ :not([data-icon-button]):active:not(:disabled, [aria-disabled='true'])) {
+    padding-inline-end: calc(var(--group-pad) - var(--group-grow));
+}
+
+[data-button-group='standard'] > :not([data-icon-button]):active:not(:disabled, [aria-disabled='true']) + :not([data-icon-button]) {
+    padding-inline-start: calc(var(--group-pad) - var(--group-grow));
+}
+
+/*
+ * Connected segments and split halves take their inner corner from `--group-corner`, so pressing
+ * or selecting changes one variable and the rounded outer corners stay put.
+ */
+[data-button-group='connected'] > *,
+[data-split] {
+    --group-corner: var(--group-inner);
+    border-start-start-radius: var(--group-corner);
+    border-end-start-radius: var(--group-corner);
+    border-start-end-radius: var(--group-corner);
+    border-end-end-radius: var(--group-corner);
+}
+
+[data-button-group='connected'] > :active,
+[data-split]:active {
+    --group-corner: var(--group-inner-pressed);
+}
+
+[data-button-group='connected'] > :is([aria-pressed='true'], :has(:checked)),
+[data-split='trailing'][aria-expanded='true'] {
+    --group-corner: var(--md-sys-shape-corner-full);
+}
+
+[data-button-group='connected'] > :first-child,
+[data-split='leading'] {
+    border-start-start-radius: var(--md-sys-shape-corner-full);
+    border-end-start-radius: var(--md-sys-shape-corner-full);
+}
+
+[data-button-group='connected'] > :last-child,
+[data-split='trailing'] {
+    border-start-end-radius: var(--md-sys-shape-corner-full);
+    border-end-end-radius: var(--md-sys-shape-corner-full);
+}
+
+[data-split='trailing'] svg {
+    transition: rotate var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast);
+}
+
+[data-split='trailing'][aria-expanded='true'] svg {
+    rotate: 180deg;
+}