Andreas Reinhold / reiniandClaude Opus 5
24eb811f34
2.0.0 took Tailwind out of the stack, but the texts Boost copies into every application still taught its utilities: the core guideline said "built on Tailwind CSS", the always-on material-3 guideline wrote every rule as `bg-primary`, `type-*`, `rounded-corner-*`, `state-layer` and `medium:`, and both skills' tables and examples did the same. None of those classes exists in 2.0's stylesheets, so an agent following the guideline wrote markup that compiled to nothing. Found moving ReStride onto 2.0: its CLAUDE.md, and SealShare's, carry these texts. The guidelines and skills now teach what 2.0 has: component and layout component props (`gap="space200"`, `hide-from="medium"`), the `md-type-*`, `md-ink-*` and interaction classes, and `--md-sys-*` tokens in the application's own CSS, with breakpoints as range media queries. UPGRADE.md §1, §2 and §4 describe the finished move instead of the in-between state, and header comments that pointed at the removed tokens/utilities.css and tailwind.css, or called a component "still Tailwind", say what is true now. BoostVocabularyTest runs DesignGuard over the code in every shipped guideline and skill (fenced Blade and CSS, and each inline class list), so a text that teaches a class the stylesheets do not define fails the suite; it finds 268 violations in the texts as 2.0.0 shipped them. The guard's own table of what it reports is exempt. BoostResourcesTest now asks the design skill for each breakpoint's prop value and media query instead of the removed `medium:` variants. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
67 lines
3.3 KiB
PHP
67 lines
3.3 KiB
PHP
{{-- M3 Expressive's flexible navigation bar: three to five destinations at the bottom of a
|
||
compact window.
|
||
|
||
<div data-md-scaffold-bar>
|
||
<x-navigation-bar>
|
||
<x-navigation-bar-item label="Inbox" icon="inbox" link="/inbox" active badge="12" />
|
||
<x-navigation-bar-item label="Starred" icon="star" link="/starred" />
|
||
<x-navigation-bar-item label="Sent" icon="send" link="/sent" />
|
||
</x-navigation-bar>
|
||
</div>
|
||
|
||
The short bar, 64px tall in surface-container, with the bottom safe area added under it. On a
|
||
bar narrower than 600px (M3's compact window) each item is the icon in a 56×32 indicator over a
|
||
label-medium label, and the items share the width equally. From 600px (medium) icon and label
|
||
sit side by side in a 40px pill and the items gather in the middle, with the padding Compose's
|
||
Centered arrangement gives three to six items. Both follow the bar's own width (a container
|
||
query), so a bar in a narrow column keeps the compact items.
|
||
|
||
`tall` is M3's other container: 80px (NavigationBarTokens.TallContainerHeight) with the
|
||
vertical item layout at every width — icon over label, never side by side — for a bar whose
|
||
labels need the room. The short bar stays the default.
|
||
|
||
`hide-on-scroll` is M3's scrolling behaviour: the bar slides out of the window on a scroll
|
||
down and springs back on a scroll up, never before the first screenful has gone by, and never
|
||
while a snackbar, a bottom sheet or a drawer is on screen — those are anchored to the bar's
|
||
edge and would slide with it. Focus reaching the bar brings it back, which is as close as the
|
||
web gets to M3's "never hide it while a screen reader is active". Inside `<x-scaffold>`
|
||
`--material-bottom-bar` follows the bar down and up, so a `fab` button, the snackbar and the
|
||
page's bottom padding keep their distance from it rather than from where it was.
|
||
|
||
It does not position itself: wrap it in the element that pins it (`position: fixed` to the
|
||
bottom edge, in the application's own CSS) and hides it where a rail takes over. `<x-scaffold>` does both, and lifts the snackbar and a
|
||
`fab` button above it through `--material-bottom-bar`.
|
||
|
||
`label` names the landmark ("Main" by default); `tall` picks the 80px container;
|
||
`hide-on-scroll` lets it leave the window while the page scrolls down.
|
||
|
||
Values from androidx Compose Material 3 (Apache-2.0), androidx-main
|
||
27cf9a7d5788aa0f5f2d8b6699ce279560daf326: NavigationBarTokens.kt,
|
||
NavigationBarVerticalItemTokens.kt, NavigationBarHorizontalItemTokens.kt and
|
||
ShortNavigationBar.kt, all under
|
||
https://github.com/androidx/androidx/tree/androidx-main/compose/material3/material3/src/commonMain/kotlin/androidx/compose/material3
|
||
— the styles are resources/css/components/navigation-bar.css. --}}
|
||
|
||
@props([
|
||
'label' => null,
|
||
'tall' => false,
|
||
'hideOnScroll' => false,
|
||
])
|
||
|
||
<nav
|
||
aria-label="{{ $label ?? __('Main') }}"
|
||
data-md-navigation-bar
|
||
@if ($tall) data-md-tall @endif
|
||
@if ($hideOnScroll)
|
||
data-md-hide-on-scroll
|
||
x-data="materialNavigationBar"
|
||
x-bind:data-md-hidden="away ? '' : null"
|
||
x-on:focusin="show()"
|
||
@endif
|
||
{{ $attributes }}
|
||
>
|
||
<div data-md-navigation-bar-items>
|
||
{{ $slot }}
|
||
</div>
|
||
</nav>
|