24 Commits

Include renames

Author	SHA1	Message	Date
surtic86andClaude Opus 5	ad230e0f48	Keep the full-screen range picker's months where they were as it grows ... When the full-screen range picker adds months above the ones on screen, extendMonths() puts the scroll back by however much the list grew. An engine with scroll anchoring moved it back as well, so a reader paging up landed half a year on, and a press meant for one day chose another. The calendar now opts out of scroll anchoring (`overflow-anchor: none`) and the picker's own correction is the only one, in every engine alike. A test holds what sits under a fixed point of the list while it grows. The browser plugin retries an action the way it retries an assertion: when the page takes longer than a second to handle a press, it presses again. On a loaded runner the full-screen picker, which re-renders every day of every month it holds, took that long — so its toggle was pressed a second time under the picker it had just opened, and never landed, and a day pressed twice became the range's end as well as its start. `pressOnce()` sends a press that must not be repeated exactly once, with Playwright's own wait for the element; the picker's toggle, its paging keys, its days and its Save go through it, and so do the menu triggers that toggle. Browser 300 passed on Chrome, Firefox and WebKit on macOS, and the date picker and menu tests 61 passed on Linux Firefox and WebKitGTK held to two busy cores. Feature 1159 passed. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>	2026-09-18 13:45:51 +02:00
Andreas Reinhold / reiniandClaude Opus 5	e7885ce1eb	Keep the search view closed when its focus comes back late ... On a slow machine Escape could close the full-screen search and have it open again for good. A close hands focus back to the input — Escape does, and so does the view's focus trap as it lets go — and `focused()` told that return from someone coming to search by a 250ms wall-clock window. Both returns run on frames, and a runner painting a few frames a second took longer than that, so the returning focus opened the view again. A `returning` flag now covers the close until the hand-back has actually run, on the same frame, and the constant is gone. `hold()` times the full-screen layout from the exit's own duration token, the one Alpine's x-transition holds `display` for, instead of waiting a frame or two for the exit's transitions to appear: `getAnimations()` is empty both before an engine creates them and after they end, and a loaded engine can leave a second between frames. The browser tests were racing the same slow machine, reproduced in a Linux container like the runner, with its Playwright Firefox and WebKitGTK and two cores kept busy: - The browser plugin retries every script and action with a one-second attempt until the budget runs out. An in-page sleep longer than that only ever passed on the last attempt, which is where the 47-50s tests came from, and a script that clicks was run again against a page that had moved on. `onceInPage()` runs such a script once however often it is retried; the long sleeps are plain retried conditions now. - Under load WebKitGTK paints no frame while a tight setTimeout loop runs, so a sample loop saw the start value and then nothing. `caughtMidExit()` samples on animation frames, for 2.5s. - "No animations running" is also true before an opening transition exists, so a close could be sampled from a scrim at 4% opacity. `settled()` waits two frames before it asks. The workflow no longer uploads failure screenshots: Gitea's artifact service timed out on every attempt, two minutes per red run, and the job logs are readable without it. Feature 1159 passed. Browser 299 passed on Chrome, Firefox and WebKit on macOS, and on Firefox and WebKitGTK in the Linux container under load, twice each. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>	2026-09-18 09:49:17 +02:00
surtic86andClaude Opus 5	1b38b39a47	Stop every test page asking for a favicon nothing serves ... `ready()` waits for the network to go idle, and each probe page asked for /favicon.ico, which its route does not answer: the server threw NotFoundHttpException on the way, and on the runner the two full-screen date picker tests spent their whole budget inside that wait rather than in the click Pest named. Every probe page now carries `<link rel="icon" href="data:,">`, so the browser asks for nothing. The showcase's own head carries it too. It ships no icon, and the 404 was the application's to answer. The runner takes two and a half to three times as long as a workstation, so BROWSER_TIMEOUT there goes from 15 to 45 seconds: a page that loads the application's Vite entries, Alpine and Livewire had no headroom left. Feature 1159 passed; Browser 299 passed on Chrome, Firefox and WebKit. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>	2026-09-18 05:30:29 +02:00
Andreas Reinhold / reiniandClaude Opus 5	94d6e31432	Catch an exit half-way on a slow machine, not only on a fast one ... The browser suite passes on every engine here and fails on the runner, which takes three times as long: each failing test triggers a close and then samples for an in-between state — a rail part-way out, a scrim part-way faded, a menu's exit copy part-way sunk — and a starved runner takes its one sample after the 150-650ms exit has already finished. So the tests that assert *that* something animates now stretch every motion duration token to three seconds first (`slowMotion()`, beside `ready()` in tests/Pest.php; ActionsTest's own copy of it goes). The two polling helpers grew their budget to match: the rail panel and the sheet slide on emphasized-accelerate, which is under 1% of its travel at a quarter of the way through, so a 300ms window no longer reached the threshold once the exit itself was three seconds long. The two full-screen date picker tests waited for a resize through click()'s own retry, which ate the whole 15s budget on Firefox; they now wait for the new width and a settled document first. The bottom sheet's preset test waits for its entry to finish before pressing the grip. `hold()` in search.js reads the view's animations a frame after the closed state, as the rail's settle() does, but one frame is not always enough: an engine that starts them on its next tick shows none, and the full-screen layout would end at once, mid-exit. An empty list is now asked again on the following frame. Feature 1159 passed. Browser 299 passed on Chrome, Firefox and WebKit, and again on WebKit under ten spinning cores. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>	2026-09-17 23:57:43 +02:00
Andreas Reinhold / reiniandClaude Opus 5	fb7007c976	Take Tailwind out of the package, and its detection out of the guard ... Tailwind left the stack in 2.0.0, but the package still carried about 330 mentions of it. What the guard's Tailwind detection protected — a class that compiles to nothing — is now protected by a check that does not care where a dead class came from. DesignGuard: about 500 lines of Tailwind tables, scales, palettes and "2.0.0 replacement" hints give way to one check — a class a view or PHP file writes that neither the application's stylesheets nor the package's own declare. It catches a utility of any framework, a typo and a class whose rules were deleted alike, so it also found two classes ReStride draws nothing with. A stylesheet has to be in reach for it: the `.css` files among the scanned paths, or what the `missingStylesheets()` entry imports. The class reader no longer mistakes an array index for a class list (`$block['base']`), and it reads the array a class helper is given, where it read nothing before. The package's own three Tailwind self-guards go with it. Only their one unique check stays, as a test of its own: every `matchMedia` width in resources/js is an M3 breakpoint. The pagination views are `material.blade.php` and `simple-material.blade.php`; only Laravel's and Livewire's default theme names ever made them `tailwind`. The provider sets `Paginator`'s default views and switches `livewire.pagination_theme` to `material` when it is still Livewire's own default, so no application can forget the config; a theme an application chose, and a component's own `$paginationTheme` or `paginationView()`, still win. The rest is prose: the layer-order guidance for an application that still builds Tailwind, the Tailwind wording in the README, the Boost guidelines and the development skill, and about 25 "this used to be a Tailwind utility" comments, along with every "plan step NN" pointer into a gitignored folder. The reset keeps its credit, and NOTICE now carries it too. Feature suite 1159 passed, Chrome browser suite 299 passed. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>	2026-09-17 21:07:39 +02:00
Andreas Reinhold / reiniandClaude Opus 5	247c596c3a	Cut duplicated and speculative code across the package ... An over-engineering audit of the whole tree, applied in five reviewed batches. Behaviour stays the same except where UPGRADE.md says otherwise. PHP: the showcase and error-page stylesheets are prebuilt into resources/dist by bin/stylesheets.mjs, through Vite's own postcss-import (first occurrence kept, the order an application's build gives), instead of Stylesheets::bundle() inlining imports on every request; only the import walk DesignGuard needs stays. SchemeStylesheet::withProfiles() replaces three copies of the scheme-plus-profiles loop, material:scheme leaves spec and contrast checks to the node script that already made them, and the error page's scheme cache, the hashed view namespace, the translations path with no lang/ folder and DesignGuard's 1.x-name hints are gone. JS: the androidx shape port progress.js and both bin scripts each carried lives once in resources/js/shapes.js (the generated SVGs are unchanged); util.js holds ringIndex(), ms(), reopenGuard() and remember(), which were written out several times; listeners are released through AbortController; tooltip.js's hoverPopover() serves the rich tooltip too. CSS: every rule for an element inside the navigation rail queries `--md-navigation-rail-value` instead of repeating the seven collapsed conditions under five media branches; badge, alert, progress, slider and button read one non-inheriting colour-role table (components/color.css); the dialog chrome, the submenu's popover chrome, the chip's state layer and touch target, and the visually-hidden inputs use the shared rules they copied; foundation/tokens.css is folded into foundation.css. Views: Support\Field and Support\Link replace the error-key, bound-value and link-attribute blocks copied into the fields and link components; the timepicker period group, the menu filter and the showcase head are partials; the datepicker's steppers and entry fields are loops; component docblocks no longer restate SKILL.md. Tests and tooling: one dataset-driven ComponentStylesheetsTest replaces four per-group files, DesignGuardTest and the layout-component tests use datasets, browser tests share one ready() helper, CSS parsing lives in ComponentStylesheet alone. docs/audits and the finding IDs citing it are removed, as are pestphp/pest-plugin-laravel, the unused composer scripts and check:font; the lint job runs in the feature job, which now installs node packages so the prebuilt-stylesheet staleness test runs in CI. Feature suite 1177 passed, Chrome browser suite 299 passed. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>	2026-09-17 19:29:21 +02:00
Andreas Reinhold / reiniandClaude Opus 5	6d4487feb3	Hide a disabled fab button on a compact window, as M3 removes a FAB ... `<x-button fab>` is an extended FAB below `medium` and a filled button from there, but a disabled one was still drawn as the FAB below `medium`: the compact FAB's rule set no state of its own, so the button stood greyed out and fixed over the content. M3 never disables a FAB: "if its action is unavailable, remove the FAB entirely". A `fab` given `disabled` (a `<button disabled>`, or a link's `aria-disabled="true"`) now renders `data-md-unavailable`, and button.css draws it `display: none` below `medium`, which also takes it out of the accessibility tree and the Tab order; from `medium` it is the disabled filled button it was. The mark comes from the prop, not from `:disabled`, because a `spinner` puts `disabled` on its button while the action runs, and that FAB is busy rather than unavailable: hidden, it would vanish instead of showing its loading indicator. The docblocks and the skill's button table say so. A browser test renders an enabled fab with a slow spinner action, a disabled one and a disabled link on a 393px window: the disabled two are not rendered, the busy one stays on screen with its indicator, and at 600px both disabled ones are the disabled button again; it fails without the change in Chrome, Firefox and Safari (and in Chrome with `:disabled` alone as the condition, on the busy FAB). A feature test reads the mark and the rule. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>	2026-09-17 07:00:40 +02:00
Andreas Reinhold / reiniandClaude Opus 5	7db522826b	Fade and shrink popovers out in every engine, Firefox included ... Menus, submenus, tooltips, rich tooltips and the FAB menu held their exit with `transition-behavior: allow-discrete` on `display` and `overlay`. Firefox transitions neither (MDN browser-compat-data, `display.is_transitionable`: Chrome 117, Safari 18, Firefox none), so every one of them vanished on its first frame there. A script cannot hold a popover open instead: `beforetoggle` is not cancellable on the way out, and the browser's own light dismiss (Escape, a press outside) never asks. resources/js/popover-exit.js: a popover marked `data-md-popover-exit` closes for real at once — focus, aria-expanded and toggle stay the browser's — and a copy taken in `beforetoggle`, while it is still drawn, stands in for the exit. The copy is decoration: a manual popover in the top layer (closing no other popover), inert, aria-hidden, without ids or nested popovers, `x-ignore`d so Alpine starts nothing in it, pinned to the popover's box with its resolved colours. It is shown with its transitions off, so `@starting-style` does not replay the entry, then marked `data-md-popover-closing`, which each stylesheet turns into its closed values (`:popover-open:not([data-md-popover-closing])`, and the FAB menu's items' sink), so it moves on the component's own tokens. It is removed once the longest of them has run, and opening the popover again takes it away. Under reduced motion every duration is zero and no copy is made. `display`, `overlay` and `allow-discrete` leave the transitions, so Chrome and Safari take the same path. Browser tests in Chrome, Firefox and Safari slow the motion tokens so a round trip still finds the exit on screen: a menu after Escape and after a press outside (the real menu closed and focus back on its button, the copy inert, fading, with no Alpine state, and gone after), a reopen part-way through, reduced motion, a submenu while its menu stays open, a tooltip, the FAB menu's items part-way down their sink, and a persistent rich tooltip. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>	2026-09-16 20:24:23 +02:00
Andreas Reinhold / reiniandClaude Opus 5	f2a3c4d056	Size the loading indicator and publish the rail's value ... Two gaps found rewriting the Boost skill for 2.0's plain CSS, each closed the way M3 describes it. `<x-loading size="96">`: M3 gives the loading indicator a responsive size, 48dp by default and flexible from 24 to 240dp ("never exceed that range"), with the container and the active shape in a fixed ratio. The size had no prop, so an application wrote a width and height of its own; `size` now takes a whole number of px in that range, written as `--md-loading-size`, and the SVG keeps the 48:38 ratio as it scales. A value outside the range is ignored, as `<x-icon>` and `<x-shape>` ignore theirs, and an application's own width and height still win. `--md-navigation-rail-value`: M3 Expressive's rail has two values, collapsed and expanded (Compose's WideNavigationRailValue), and content in a rail follows it. Without a hook an application copied the rail's seven conditions — mode, `data-rail`, `data-rail-auto`, open, and the window band — out of navigation-rail.css. The rail now publishes the answer from the same branches that narrow it: `expanded` by default, `collapsed` wherever it is drawn collapsed, so a style query in the application's CSS switches at the first paint and at the same moment as the rail's own items. A rail open over a scrim reads `expanded`, and outside a rail the property is unset. A JS attribute would have missed the first paint; a width container query would have lagged the collapse animation. Style queries on a custom property need Firefox 151, so the browser floor moves from Firefox 147 to 151 (README, the CI note, UPGRADE's new 2.1.0 section); Chrome 125 and Safari 18.4 are unchanged. Browser tests pin both in Chrome, Firefox and Safari: the indicator's drawn box at 96 and 32px, and the rail's value — with a style query acting on it — at the first paint for fixed modes, across the window classes and the menu button for an adaptive rail, and open and closed for a modal one. NavigationRailTest pins the value in each of the five collapsed branches. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>	2026-09-16 12:06:16 +02:00
Andreas Reinhold / reiniandClaude Sonnet 5	d15312023b	Move browser-test probes off Tailwind utility classes ... Plan step 38 (last batch), plan step 42's target for tests/: every Tailwind utility class in a tests/Browser/*.php probe's Blade string or Livewire component render() (~60 class attributes across 14 files) becomes an inline style built from --md-sys-color-*/--md-sys-shape-*/ --md-sys-measurement-* tokens or a literal px value for an arbitrary demo size — PickingTest's clip box, every probe's <body class="bg-surface">, the grid/stack/row wrapper divs, the carousel item's coloured filler. No test's assertions, selectors or expected text change; these are layout containers around the components under test, not anything a test reads. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9	2026-09-15 05:34:20 +02:00
Andreas Reinhold / reiniandClaude Sonnet 5	04271bf227	Fix ActionsTest's colour-class probe to use a real class ... hint-class="text-error" and icon-class="text-error" named a Tailwind utility Tailwind never generates: its content scanner does not read tests/Browser/*.php, so a class used only in a route fixture there never makes it into the built CSS, and the assertion compared two unstyled defaults that happen to differ rather than two error-coloured elements. md-ink-error is a real, always-present class (text.css) for exactly this "an application's own colour" case group.blade.php's own comment already recommends (plan step 36, closing the full run). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9	2026-09-15 02:01:24 +02:00
Andreas Reinhold / reiniandClaude Sonnet 5	287340b066	Rewrite the bottom sheet without Tailwind ... Plan step 36 (containment group): <x-bottom-sheet>'s class lists move into resources/css/components/bottom-sheet.css, keyed on data-md-bottom-sheet (data-md-open, data-md-standard) and data-md-bottom-sheet-scrim/-probe/-panel (data-md-preset while heights/snap gives it stops)/-handle/-grip/-announce/-body/-title/ -actions. x-transition's enter/leave classes are replaced the same way as drawer.css: @starting-style + transition-behavior: allow-discrete on the x-show-driven panel, the asymmetric open (spatial-default, emphasized-decelerate) vs close (effects-default, emphasized- accelerate) timing coming from the more specific open-state selector's own transition-duration/-timing-function, which a CSS transition always takes from the after-change style. data-md-preset adds the height-between-stops transition (the spatial spring) alongside it, independent of the open/close slide. The drag handle (C-01, already fixed in the Tailwind-era markup this replaces) renders the shared md-focus-ring and md-touch-target classes instead of a hand-rolled ring: unlike the datepicker's day, its own visible bar is not a smaller indicator drawn inside a bigger box those classes cannot reach, so nothing here refines them further. Its 22px vertical padding (SheetDefaults.kt's DragHandleVerticalPadding) is a literal, matching alert.css's 12px for the same reason: 22 is not on the measurement scale. Hooks renamed data-drag-handle -> data-md-bottom-sheet-handle, updated in resources/js/bottom-sheet.js and tests/Browser/ContainmentTest.php; data-sheet -> data-md-drawer in that test's comment. <x-menu sheet-at-compact> renders this component unchanged; menu.css now imports bottom-sheet.css, and tests/Feature/Components/MenuTest.php's stale Tailwind-class assertion for the embedded sheet is replaced with a hook check. The two sheet-at-compact browser tests in ActionsTest.php stay on assertVisible(): the sheet is still x-show-driven (a deliberate choice for this batch, keeping the existing modal/side-sheet/bottom-sheet architecture and converting only their styling), so open still shows as visibility rather than :popover-open; their comments no longer say "not rewritten in this batch". Imported from the Containment block of components.css. Browser tests owed by docs/plans/material-3-browser-tests.md, added to ContainmentTest.php but not run: dialog divider marks on scroll (including that a nested dialog keeps its own marks), the full-screen phone bar, separator always, no fade under reduced motion, the scrolling body's inset focus ring; bottom sheet preset-height cycling with its announcement and a drag settling on the nearest stop; the standard side sheet from 840px without a scrim or a focus trap, modal below it. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9	2026-09-14 21:16:22 +02:00
Andreas Reinhold / reiniandClaude Sonnet 5	a29a147f1a	Cover six actions/communication behaviours the browser suite missed ... Plan step 36's handoff listed six behaviours no browser test exercised yet: - FieldsTest: <x-select>'s open list uses the customizable picker (appearance: base-select) where the browser supports it, drawn as M3's 48px-row menu. - CommunicationTest: a two-line snackbar's action stays on the title's row from 600px, only wrapping under it below that (toast.css's [data-md-toast-wrap]). - ActionsTest: a disabled menu item reached by the keyboard withholds its state layer (interaction.css's [aria-disabled="true"] rule). - DataTest: a paginator's page step shows md-focus-ring's outline on keyboard focus, alongside its already-tested 48px target. - CommunicationTest: a transient rich tooltip stays open 1.5s after focus leaves rather than closing at once (rich-tooltip.js's LEAVE_GRACE_MS). - ActionsTest: an xs or sm group segment takes a press at its 48px edge, past its drawn size, now that the target comes from the shared md-touch-target class rather than a rule of its own. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9	2026-09-14 18:40:43 +02:00
Andreas Reinhold / reiniandClaude Sonnet 5	636a0fe71d	Fix five never-run ActionsTest selectors and a script-chaining bug ... The new menu browser tests never ran before this batch, and five had selector bugs of their own once they did: - "Delete" and a bare menuitem query matched every menu's copy on the showcase page, not just the open one's — scoped to the visible item or the filtered menu's own labelled list. - the filter test's id lookups ran :has-text(), a Playwright locator extension, inside a real document.querySelector, which throws — rewritten as a textContent search. - the sheet-at-compact assertions expected the bottom sheet to be a popover (:popover-open); <x-bottom-sheet> is still the x-show-based component from before this batch (containment, not yet rewritten), so openness is checked with assertVisible()/assertMissing() instead. - the FAB menu scroll test chained assertScript() off script()'s return value (the evaluated script's result, not the page). Plan step 36, actions group. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9	2026-09-14 18:26:59 +02:00
Andreas Reinhold / reiniandClaude Opus 5	3680808ae8	Write the actions group's owed browser tests ... From docs/plans/material-3-browser-tests.md § Actions: submenu keyboard (Right/Enter/Space open, Left/Escape close and return focus) and hover-open on a fine pointer; a filtering menu's typing, arrows, Enter and the clear on reopen; a sheet-at-compact menu's focus on its first item below 600px, its trigger switching between menu and dialog across 600px, a submenu opening in place inside it, its own filter, and a Livewire render keeping it open with the field's focus; a long menu scrolling while the keyboard keeps the reached item inside view; the FAB menu's list scrolling on a short window behind its close button, which stays put (plan step 36, actions). Written on the data-md-* hooks the group's five commits render; not run — the group's Chromium pass happens once every stream in the group has landed. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9	2026-09-14 16:25:31 +02:00
Andreas Reinhold / reiniandClaude Opus 5	1cf4f16c95	Draw the FAB without Tailwind ... Plan step 36. <x-fab> renders data-md-fab with data-md-size, data-md-color, data-md-variant, data-md-extended and, collapsing on scroll, data-md-collapse-on-scroll with a bound data-md-collapsed; it passes its glyph's size to <x-icon>. fab.css draws FabBaseline/Medium/ LargeTokens and ExtendedFab*Tokens per size, the container and filled colours, elevation 3 and 4 on hover, the state layer and focus ring, and the collapse morph that leaves actions.css. data-fab becomes data-md-fab, also in navigation.css (the rail flattens a nested FAB) and toolbar.css (a docked toolbar's FAB), with their tests. The actions browser test gains the owed collapse-on-scroll test. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9	2026-09-14 15:06:45 +02:00
Andreas Reinhold / reiniandClaude Opus 5	2a4dcead3d	Draw the split button without Tailwind ... Plan step 36. <x-split-button> renders data-md-split-button and data-md-size on the pair and data-md-split on its halves. split-button.css draws SplitButton*Tokens' shape — full outer corners, inner corners that grow under the finger, the trailing half round while its menu is open — the narrower leading padding and 48px trailing half at xs and sm, and the chevron's own size, nudge and turn on the standard scheme. groups.css is empty and leaves tailwind.css. The actions browser test follows data-md-split and data-md-button-group, and gains the owed tests for a connected segment's 48px edge and a button group's single-required and multi selection. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9	2026-09-14 15:03:02 +02:00
Andreas Reinhold / reiniandClaude Opus 5	b1fc0c9cfa	Keep a connected group's inner corners round ... Connected segments and split halves wrote their full corners as --md-sys-shape-corner-full, 9999px, beside 8px inner corners on the same element. A box whose radii add up to more than its side has every radius scaled by one factor, so the inner corners shrank to a hundredth of a pixel and drew square. Full is now half the size's height (--group-full), which no side can overflow. A browser test fails on any radius in a group or split button larger than half its height. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RHoXZSHc8gGpZjFmA5fPc2	2026-09-13 22:46:10 +02:00
Andreas Reinhold / reiniandClaude Opus 5	8640d815c8	Keep open menus and rich tooltips open through a Livewire render ... <x-menu>, <x-fab-menu> and <x-rich-tooltip> gave their popover an id that is new with every render, and Livewire's morph matches an element without a wire:key by its id. So every render of the component around them swapped the popover for a closed copy: an open menu closed, its listeners stayed behind on the old element (Escape or a press outside then left aria-expanded="true" on the trigger and focus unreturned), a keep-open item's wire:click closed its menu when the response came, and a rich tooltip went on showing the detached bubble, so it never opened again. <x-carousel>'s row had the same kind of id: after a render it scrolled without its listeners, and its items stopped re-masking. The popover, the bubble and the row now carry a wire:key, so the morph patches them in place and changes the id and anchor name together with the trigger's, as it already did for everything else. The key goes through an attribute bag: Livewire compiles a wire:key written in a template into the key of the loop iteration around it, which would have given every child component after the menu in a row the same key. A morph also removes the menu button's ARIA attributes, which only script writes. menu.js now writes them again after every morph, so the button of a menu that stays open, and a FAB menu's close look, still say it is open, and aria-controls names the popover's new id. A second press on an open menu's button opened it again, render or not: the popover closes on the press, and the guard against the click that follows was timed from the toggle event, which is queued and arrives after that click. It is timed from beforetoggle now. Browser tests with Livewire probes in Chromium, Firefox and WebKit, and a render test for the keys and the keys of the child components after. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RHoXZSHc8gGpZjFmA5fPc2	2026-09-13 18:50:14 +02:00
Andreas Reinhold / reiniandClaude Opus 5	ab7317faae	Add hint-class to the group and icon-class to menu items ... <x-group hint-class> adds classes to the hint, as the text fields' hint-class does, and a validation message still replaces the hint. <x-menu-item icon-class> adds classes to the leading icon, for an icon whose colour means something of its own, such as a sport's glyph. A colour class there has to win over the component's own colour, and which of two colour utilities wins depends on the order Tailwind emits them (text-error comes before text-on-surface-variant). So when either prop is given, the component's own colour is written with a :where() variant that carries no specificity, as the fields' hint colour sits in the components layer. A disabled item's icon stays disabled. Without the props the markup is unchanged. The skill now also lists the fields' hint-class, which it had left out. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RHoXZSHc8gGpZjFmA5fPc2	2026-09-13 18:18:39 +02:00
Andreas Reinhold / reiniandClaude Opus 5	a83d7f62ea	Hang a menu on its menu button rather than the trigger's wrapper ... <x-menu> named its CSS anchor on the <span> around the trigger slot. A trigger taken out of the flow, such as <x-button fab> fixed to the bottom corner of a phone's window, left that span behind as an empty box where the page put it, and the menu opened there. menu.js now moves the name onto the menu button, beside any name the button already carries for its tooltip, and moves it again whenever a Livewire morph puts the server's attributes and a fresh name back. The wrapper keeps the name until Alpine starts, or when there is no menu button. A menu that fits neither below nor above its start edge now also tries the opposite side and end together, so a default-position menu on a FAB in the bottom-right corner opens above it, end-aligned. Before, it fell back to its base position and overflowed the window. This also applies to <x-fab-menu>, <x-account-menu>, <x-split-button> and the <x-section-nav> picker, which share menu.js. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RHoXZSHc8gGpZjFmA5fPc2	2026-09-13 18:18:39 +02:00
Andreas Reinhold / reiniandClaude Opus 5	889f8a8aa1	Put the showcase in the app shell, with a page per section ... The showcase is now an overview and one page per section behind a grouped navigation rail, moved between with wire:navigate, instead of one long page under a scrolling top bar. The switch exposed a WebKit bug in the menu: inside a focusable region, WebKit moves focus out of the closing popover before its toggle event, so Escape no longer returned focus to the trigger. The menu now reads it on beforetoggle. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy	2026-09-13 09:30:26 +02:00
Andreas Reinhold / reiniandClaude Opus 5	fef20a9178	Add cards, lists, dialogs, sheets and the rest of M3's containment ... <x-card> (filled, elevated, outlined), <x-list> and <x-list-item> (plain or M3 Expressive's segmented list), <x-divider>, <x-collapse> on <details>, <x-modal> on the native <dialog>, <x-drawer> as a side sheet or list-detail pane, and <x-bottom-sheet> with drag to dismiss. Dialogs and sheets bind to a Livewire flag or id and write back false or null on close, or use the surrounding Alpine scope. Rows open from anywhere on them through data-list-row and data-list-open. DesignGuard now also reports Blade directives written inside a component tag, where they do not compile. Browser test helpers wait for a complete document with Alpine and Livewire running: in Firefox, networkidle alone could return before a repeated visit had loaded. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy	2026-09-13 07:28:05 +02:00
Andreas Reinhold / reiniandClaude Opus 5	cd64f4f371	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	2026-09-13 06:09:28 +02:00