noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Put the tab bar's offsets, indicator inset and ring on M3's numbers

Browse Source 
A scrollable set now starts 52dp in, so it reads as scrollable; a primary
indicator is inset 2dp at each side while a secondary one still spans the tab;
a link marked aria-current takes the active label colour the indicator already
followed; and the focus ring is 2px outside the tab, as everywhere else in the
package, paid for with 5px of room around the bar that the state layer and the
indicator reach back into.
Plan: docs/plans/material-3-alignment.md, step 21 (navigation N-10, N-18,
N-20, N-21).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 06:04:23 +02:00
co-authored by Claude Opus 5
parent 94e2a900d2
commit a9b5efb4b2
2 changed files with 48 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Feature/Components/TabsTest.php
+16
View File
@@ -72,6 +72,22 @@ it('entangles the chosen tab with Livewire and renders the one the property name
->toMatch('/id="[^"]+-people-panel"(?![^>]*style="display: none")/');
});
it('keeps the tab bar on M3\'s offsets, indicator inset and focus ring', function () {
$css = file_get_contents(__DIR__.'/../../../resources/css/components/tabs.css');
expect($css)
// 52dp before the first of a scrollable set (N-10).
->toContain("[data-tabs-bar][data-scrollable] {\n padding-inline-start: 3.25rem;")
// A primary indicator is inset 2dp each side; a secondary one spans the tab (N-18).
->toMatch('/\[data-tab-indicator\] \{\s+position: absolute;\s+inset-inline: 2px;/')
->toMatch('/\[data-variant="secondary"\] \[data-tab-indicator\] \{\s+inset-inline: 0;/')
// The ring is 2px outside, as everywhere else in the package (N-20).
->toContain('outline-offset: 2px;')
->not->toContain('outline-offset: -3px;')
// A link marked as the page is the chosen tab too (N-21).
->toContain('[data-tab]:is([aria-selected="true"], [aria-current="page"]) {');
});
it('draws section navigation as secondary tabs and a picker', function () {
$html = (string) $this->blade(<<<'BLADE'
<x-section-nav label="Settings" :items="[