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

Draw the section navigation without Tailwind

Browse Source 
Plan step 36 (navigation group, third batch): <x-section-nav>'s class
lists move into resources/css/components/section-nav.css, keyed on
data-md-section-nav (data-md-section-nav-picker, its own trigger and
label) and <x-tabs>'s own hooks, reused whole rather than copied
(N-16's fix keeps the real scrollable tab bar it landed): the bar's
outline-variant divider, active indicator and aria-current colouring
are tabs.css's rules, not this file's. The picker's trigger takes the
shared md-focus-ring class and the fixed md-type-body-lg/md-ink/
md-text-start text classes for its own body-large type, since it is
prose on a plain button rather than a component's own type; icons
take a size prop instead of a size class.

Hooks renamed: data-section-nav to data-md-section-nav,
data-section-picker to data-md-section-nav-picker, updated in
TabsTest.php (which carries section-nav's render tests) and
tests/Browser/BarsTest.php.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-15 00:40:39 +02:00
co-authored by Claude Sonnet 5
parent ed93222d22
commit f1cd6e4eb4
6 changed files with 100 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/components.css
+1
View File
@@ -78,3 +78,4 @@
@import './components/navigation-rail.css';
@import './components/navigation-rail-item.css';
@import './components/navigation-rail-section.css';
@import './components/section-nav.css';
resources/css/components/section-nav.css
+70
View File
@@ -0,0 +1,70 @@
/*
* <x-section-nav>: the navigation inside one area of an application — M3's secondary tabs from
* `medium` (600px), five or more of them the scrollable tab bar M3's own accessibility page
* blesses rather than a grid that would break the tab bar's divider and strand the upper rows'
* indicators against nothing (docs/audits/m3-alignment/navigation.md N-16); below `medium`, where a
* row of them never fits, a button naming the current section opens the same list as a menu.
*
* [data-md-section-nav] min-inline-size: 0
* [data-md-section-nav-picker] hidden from medium
* [data-md-section-nav-trigger] 48px, an outlined field-like button
* [data-md-section-nav-trigger-label] the current section's title, truncated
* nav hidden below medium
* [data-md-tabs-bar] tabs.css, reused whole
*
* Reuses `<x-tabs>`'s own hooks and stylesheet rather than a tab bar of its own: a link marked
* `aria-current="page"` takes the same active indicator and colour tabs.css already draws for
* `aria-selected="true"` (N-21), so nothing here repeats a rule tabs.css owns; the only addition is
* `min-inline-size: 0` on this bar's own items, so a long title still truncates inside the row
* `<x-tabs>`'s own layout does not otherwise need. The picker's trigger is not one of M3's controls
* — an outlined field-like button naming the current section, 48px tall to meet the target M3 asks
* for everywhere, at the tab bar's own body-large type (a text class on the view, `md-type-body-lg
* md-ink md-text-start`, since it is prose on a plain button rather than a component's own type).
*/
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@import './tabs.css';
@import './icon.css';
@import './menu.css';
@import './menu-item.css';
@import './badge.css';
@layer material.components {
[data-md-section-nav] {
min-inline-size: 0;
}
[data-md-section-nav-picker] {
@media (width >= 600px) {
display: none;
}
}
[data-md-section-nav] > nav {
@media (width < 600px) {
display: none;
}
}
[data-md-section-nav-trigger] {
display: flex;
align-items: center;
gap: 12px;
block-size: var(--md-sys-measurement-space600);
inline-size: min(320px, calc(100vw - 32px));
cursor: pointer;
border: 1px solid var(--md-sys-color-outline);
border-radius: var(--md-sys-shape-corner-xs);
padding-inline: var(--md-sys-measurement-space200);
}
[data-md-section-nav-trigger-label] {
min-inline-size: 0;
flex: 1 1 0%;
}
[data-md-section-nav] [data-md-tabs-bar] > li {
min-inline-size: 0;
}
}