ed93222d2220f96b3cb624b8681b6cbdc200f478
6
Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
 Andreas Reinhold / reiniandClaude Sonnet 5
|
ed93222d22 |
Draw the scaffold without Tailwind
Plan step 36 (navigation group, third batch): <x-scaffold>'s own styling moves into resources/css/layout/scaffold.css (the content region, the bar and rail row, the banner, the actions row and its rail-collapsed column layout, --material-bottom-bar and --material-margin publishing, the skip link) alongside step 35's FAB and content-margin rules already there. Every data-app-shell* hook becomes data-md-scaffold-* (data-app-shell-bar, -actions, -banner); the skip link is data-md-skip-link; data-app-shell itself is dropped, data-md-scaffold already named the root. The actions row's rail-collapsed:flex-col is written out branch for branch as the navigation rail's own rewrite did for its internal parts: the three width-independent conditions in one :where() group, the four width-gated ones each in their own @media block. With that gone, resources/css/tailwind.css's rail-collapsed custom-variant shim (its last use) is removed; tailwind.css now carries only tokens/theme.css and tokens/utilities.css, which the showcase still needs until step 38. navigation-bar.css's hide-on-scroll rule reading --material-bottom-bar stayed unlayered only because <x-scaffold> published that variable through a Tailwind utility, which no layered rule could outrank; now scaffold.css sets it itself in material.layout, a layer navigation-bar.css's own material.components always beats, so the rule moves into the layer and the file fits one @layer material.components block like every other navigation stylesheet. navigation-bar rejoins NavigationStylesheetsTest.php's dataset and NavigationBarTest.php's own duplicate shape test is retired in favour of it. Browser tests added (docs/plans/material-3-browser-tests.md): the scaffold's FAB dropping the bar's own height once hide-bar-on-scroll slides it away, at the trailing edge in a right-to-left document, and clearing a safe area an application sets on its inline-end and bottom edges. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9 |
||
|
Andreas Reinhold / reiniandClaude Sonnet 5
|
25549374ec |
Draw the navigation rail without Tailwind
Plan step 36 (navigation group, second batch): <x-navigation-rail>'s, <x-navigation-rail-item>'s and <x-navigation-rail-section>'s class lists move into navigation-rail.css, navigation-rail-item.css and navigation-rail-section.css, keyed on data-md-navigation-rail (the mode, data-md-width, data-md-align, data-md-hide-when-collapsed, data-md-divider, data-md-fill, data-md-open), data-md-navigation-rail- item (data-md-active) and data-md-navigation-rail-section. Every Tailwind wrapper class in the view — the menu row's centring padding, the FAB row, the two swapped menu glyphs, the brand's visibility — becomes a hook the stylesheet draws instead; the menu button itself renders the shared md-state-layer/md-focus-ring/md-touch-target classes (N-01's pattern) since it draws its own layer on itself, not a child. `<x-icon>` and `<x-badge>` take size and floating props instead of size/position classes; a small data-md-navigation-icon hook (the shared navigation-item.css) replaces the ad hoc "relative inline-flex" wrapper a floating badge anchors to. `rail-collapsed` (a Tailwind @custom-variant, forbidden in Phase F) is reproduced as plain selectors, branch for branch: the three width- independent conditions (a fixed collapsed mode; a collapsible rail the visitor collapsed and not open; a modal rail not open) merge into one :where() group, provably the same match set as three separate rules since :where(A, B, C) on an element is true exactly when :where(A) or :where(B) or :where(C) is; the four width-gated conditions stay separate media blocks, since CSS cannot merge different `@media` queries. Every rem length becomes px, since these are dp-based M3 tokens, not a text measure (unlike <x-pane>'s rem widths). The FAB overrides for a rail's header — elevation 0 (N-03), morphing into an extended FAB instead of swapping two by display (N-23) — move from unlayered into this file's own material.components, like toolbar.css's FAB override: fab.css's `[data-md-fab]` is one attribute, so a doubled selector here always outranks it without needing to sit outside the layer. navigation.js: the arriving-indicator stylesheet and every code comment follow the new hooks; resources/css/components/navigation.css is deleted (nothing imports it any more) and its line in tailwind.css with it. Behaviour is unchanged except one thing Tailwind's `rail-collapsed:` variant could do that plain CSS in this shape cannot: it is gone for consuming applications too, since the definition lived only in the file this commit removes. The development skill's guidance for it is rewritten to point at navigation-rail.css's own selectors instead of teaching a Tailwind variant that no longer exists. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9 |
||
|
Andreas Reinhold / reiniandClaude Sonnet 5
|
63d421ccb6 |
Draw the navigation bar and bar item without Tailwind
Plan step 36 (navigation group, second batch): <x-navigation-bar>'s and <x-navigation-bar-item>'s class lists move into resources/css/components/navigation-bar.css and navigation-bar-item.css, keyed on data-md-navigation-bar (data-md-tall, data-md-hide-on-scroll/ -hidden) and data-md-navigation-bar-item (data-md-active), both in material.components. The indicator's growing fill and its state layer, shared with the rail's item, move into a new navigation-item.css both files import — the day's own layer in datepicker.css is the precedent for keeping it out of the shared foundation classes: the element focused and pressed is the whole item, the layer drawn only on the smaller indicator or pill inside it, which md-state-layer cannot do and :focus-visible never matches. The wash colour moves from a dead on-surface base overridden by both items to a shared on-secondary- container declaration, and its opacities from literal 0.08/0.1 to state.css's own tokens — no visible change, since the numbers matched. Every size is px (16dp Tailwind quirks aside, this file had none); the bar's own item-count and container-query layout, N-08's label-medium fix and N-19's on-secondary-container wash already matched the audit, so only hooks, units and layer needed to change. The scaffold's hide-on-scroll offset rule (`--material-bottom-bar`, navigation-bar.css) stays unlayered: <x-scaffold> still publishes that variable with a Tailwind utility until its own rewrite, and a rule in any layer loses to it regardless of specificity — unlike the FAB overrides the rail commit moves into material.components, which only have to beat another material.components rule. navigation.css is not deleted yet (still Tailwind's for the rail); its "Navigation" comment in tailwind.css narrows as each stream leaves. navigation-bar.css is not in NavigationStylesheetsTest.php's dataset: its one unlayered rule breaks that test's "every block is material.components" assumption, so the same checks are in NavigationBarTest.php instead, the same reason ErrorPagesTest.php carries error-page.css's. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9 |
||
|
Andreas Reinhold / reiniandClaude Sonnet 5
|
1f9384efdf |
Draw the tabs without Tailwind
Plan step 36 (navigation group, third and last stream): <x-tabs>'s and <x-tab>'s class lists move into resources/css/components/tabs.css, one commit for both since they share it. Root data-md-tabs; the bar data-md-tabs-bar with data-md-variant/-stacked/-scrollable, holding data-md-tab buttons (data-md-tab-content, the new data-md-tab-label wrapping the label and badge, data-md-tab-indicator); the panel data-md-tab-panel. The server-rendered hidden panel (N-05), the 52dp scrollable offset (N-10), the indicator's 2dp inset (N-18), the ring moved 2px out (N-20) and aria-current sharing the active colour (N-21) already matched the audit; only hooks, units and layer changed. Sizes (48/64px tab height, 90px minimum width) stay px; spacing goes through the measurement tokens where the value matches one (the icon-label and label-badge gaps, the panel's top padding). Imports icon.css and badge.css for what the view renders. Hooks renamed: data-tabs-bar, data-tab, data-tab-content, data-tab-indicator, data-scrollable, data-stacked and the bar's data-variant to data-md-*, updated in tabs.js (dataset.tab -> dataset.mdTab), section-nav.blade.php (which reuses the tab bar's hooks under its own, still-Tailwind, markup), tests/Feature/Components/TabsTest.php and tests/Browser/BarsTest.php. Added the owed browser test: a tab panel never flashes before Alpine boots, read from an inline script that runs while the page is still parsing, well before Alpine's own script (docs/plans/material-3-browser-tests.md). This closes plan step 36: every navigation-group component is now data-md-* and Tailwind-free; tailwind.css's Navigation block keeps only navigation.css (the bar and rail, out of this batch's scope). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9 |
||
|
Andreas Reinhold / reiniandClaude Sonnet 5
|
9c134b2dc7 |
Draw the toolbar without Tailwind
Plan step 36 (navigation group, second stream): <x-toolbar>'s class
lists move into resources/css/components/toolbar.css, keyed on
data-md-toolbar (data-md-variant/-vertical/-vibrant/-rounded/
-toolbar-place) and data-md-toolbar-group/-toolbar-fab. The docked
form with a FAB (N-02's --material-bottom-bar clearance), the vertical
24dp margin (N-12), the standard toolbar's primary icon buttons
(N-13), and the rounded large-screen form with dividers from 840px
were all already correct; only their hooks, units and layer needed to
change. The file no longer sits outside every layer: button.css and
fab.css now draw their own ink through data-md-* attributes rather
than a Tailwind utility, so a toolbar's more specific selector always
beats their single base color/background-color/box-shadow declaration
without needing to escape the cascade layers.
Sizes stay px (64px row, 40px divider); spacing goes through the
measurement tokens where one matches the value (4px leading/trailing
gap, 16/32px docked spread, 8px floating ends, 16/24px placed
margins).
Hooks renamed: every unprefixed data-toolbar* attribute to data-md-*,
updated in tests/Feature/Components/{AppBarTest,ToolbarTest}.php and
tests/Browser/BarsTest.php. toolbar.js needed no change: it reads the
bar through $root and role="toolbar", not by hook name.
Carry-over from the app-bar step: layout/pane.css now imports
app-bar.css and button.css for the pane's own top app bar and back
button, now that both are rewritten. That import crosses into
material.components for the first time from a layout file, so
tests/Feature/StylesheetsTest.php's two layout-shape checks now skip
non-`layout/` files reached through it — each already covered by its
own group's stylesheet test.
Added the owed browser tests (docs/plans/material-3-browser-tests.md):
a docked toolbar clear of the navigation bar below medium, and the
rounded form with its divider height from 840px, clear of the
window's edges.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
|
||
|
Andreas Reinhold / reiniandClaude Sonnet 5
|
b7641a35c2 |
Draw the app bar without Tailwind
Plan step 36 (navigation group, first stream): <x-app-bar>'s class
lists move into resources/css/components/app-bar.css, keyed on
data-md-app-bar (with data-md-variant/-sticky/-subtitled/-scrolled/
-collapsed) and its parts data-md-app-bar-row/-leading/-headline/
-title/-subtitle/-search/-trailing/-action/-overflow/-expanded. The
overflow menu (two icon buttons below 600px, four from it, N-09's
312px search cap and N-11's three-column centred row) already matched
the audit; only its hooks, units and layer needed to change. Every
length is px, spacing through the measurement tokens where one
matches (M3's own "4dp leading/trailing space" and "16dp" headline
inset had no exact token, so those stay literal). Imports button.css,
menu.css and menu-item.css for the overflow menu the view renders.
Hooks renamed: every unprefixed data-app-bar-* attribute and
data-scrolled/data-collapsed to data-md-*, updated in
tests/Feature/Components/{AppBarTest,PaneTest}.php and
tests/Browser/{BarsTest,NavigationTest}.php. app-bar.js needed no
change: it reads the bar through $root, not by hook name.
tests/Feature/Components/NavigationStylesheetsTest.php is the
navigation twin of ContainmentStylesheetsTest.php, on the same
tests/Support/ViewClasses.php rule; its dataset starts at 'app-bar'
and a 'tabs' entry (once that commit lands) will read both
tabs.blade.php and tab.blade.php, since they share one stylesheet.
Added the owed browser tests (docs/plans/material-3-browser-tests.md):
the overflow at 599/600px, keyboard in its menu, a menu closing once
its width no longer shows it, and a wire:click action from both the
icon button and the menu item form.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
|