Andreas Reinhold / reiniandClaude Opus 5
5b05e52e1c
Plan step 46, M3 § Tabs: "Labels: single row by default; may wrap to a max second line if needed with truncation, or use scrollable tabs to give longer titles more room." In fixed tabs (<x-tabs>, <x-section-nav> up to four sections) the label's text, now its own data-md-tab-text in both views, wraps and truncates at two lines. The tab's 48px (64px stacked) is a minimum, the bar stretches its tabs to one height, and the content stretches with them, so the indicator stays on the divider. Scrollable tabs keep one row. SealShare's "Two-Factor Auth" and "Appearance" showed an ellipsis at 600px. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
76 lines
3.2 KiB
CSS
76 lines
3.2 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 in a fixed row wraps to its second line and
|
|
* truncates there (tabs.css, M3's "may wrap to a max second line if needed with truncation")
|
|
* instead of widening its item — which `<x-tabs>`'s buttons, direct children of the bar, never
|
|
* need. Its tabs render `<x-tabs>`'s label anatomy (`data-md-tab-label` around
|
|
* `data-md-tab-text`), so that rule draws both. 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;
|
|
}
|
|
}
|