Andreas Reinhold / reiniandClaude Opus 5
ed92e916b9
Plan step 36, navigation review. The rewrite kept `min-w-0` from the
view's `<li class="flex min-w-0">` but dropped `flex`, so tabs.css's
`li > [data-md-tab] { flex: 1 1 0% }` no longer applied inside the
section nav. The header also called body-large "the tab bar's own"
type, which is title-small.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
73 lines
2.9 KiB
CSS
73 lines
2.9 KiB
CSS
/*
|
|
* <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
|
|
* this bar's own list items — flex rows, so tabs.css's `li > [data-md-tab]` share of the width
|
|
* applies, and `min-inline-size: 0`, so a long title still truncates — which `<x-tabs>`'s buttons,
|
|
* direct children of the bar, never 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, in 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 {
|
|
display: flex;
|
|
min-inline-size: 0;
|
|
}
|
|
}
|