Wrap a fixed tab's long label to a second line

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>

tests/Browser/BarsTest.php

@@ -54,7 +54,7 @@ class BarsProbe extends Component
                     <x-theme-toggle mode="cycle" id="cycle" />
                     <x-theme-toggle mode="picker" />
 
-                    <x-section-nav :items="[['title' => 'Profile', 'url' => '#profile', 'active' => true], ['title' => 'Security', 'url' => '#security'], ['title' => 'Advanced notification settings', 'url' => '#notifications']]" no-wire-navigate />
+                    <x-section-nav :items="[['title' => 'Profile', 'url' => '#profile', 'active' => true], ['title' => 'Security', 'url' => '#security'], ['title' => 'Advanced notification settings', 'url' => '#notifications'], ['title' => 'Appearance', 'url' => '#appearance']]" no-wire-navigate />
 
                     <div style="height: 200vh"></div>
                 </div>
@@ -192,11 +192,51 @@ it('shares the row width equally between the section nav\'s items, whatever thei
     $widths = "[...document.querySelectorAll('[data-md-section-nav] [data-md-tabs-bar] > li')].map((li) => Math.round(li.getBoundingClientRect().width))";
 
     barsProbe()
-        ->assertScript("{$widths}.length === 3")
+        ->assertScript("{$widths}.length === 4")
         ->assertScript("new Set({$widths}).size === 1")
         ->assertNoJavaScriptErrors();
 });
 
+/**
+ * Plan step 46, M3 § Tabs: "Labels: single row by default; may wrap to a max second line if needed
+ * with truncation". Four sections are fixed tabs; at a 600px window a long title no longer fits its
+ * share, so it takes a second line (SealShare's "Two-Factor Auth" showed an ellipsis on one) inside
+ * its tab, the row's tabs keep one height, and the chosen tab's indicator stays on the divider.
+ */
+it('wraps a long section title to a second line in a fixed row, keeping the tabs one height and the indicator on the divider', function () {
+    $tabs = "[...document.querySelectorAll('[data-md-section-nav] [data-md-tab]')]";
+    $long = "document.querySelector('[data-md-section-nav] [data-md-tab][href=\"#notifications\"]')";
+
+    barsProbe()
+        ->resize(600, 800)
+        ->assertScript("getComputedStyle(document.querySelector('[data-md-section-nav] nav')).display !== 'none'")
+        ->assertScript("{$tabs}.length === 4 && ! document.querySelector('[data-md-section-nav] [data-md-tabs-bar]').hasAttribute('data-md-scrollable')")
+        // Two lines of the label's own line height, not one truncated row.
+        ->assertScript("(() => { const text = {$long}.querySelector('[data-md-tab-text]'); return Math.round(text.getBoundingClientRect().height / parseFloat(getComputedStyle(text).lineHeight)) === 2; })()")
+        // Inside its tab, both ways.
+        ->assertScript("(() => { const tab = {$long}.getBoundingClientRect(); const text = {$long}.querySelector('[data-md-tab-text]').getBoundingClientRect(); return text.left >= tab.left - 0.5 && text.right <= tab.right + 0.5 && text.top >= tab.top - 0.5 && text.bottom <= tab.bottom + 0.5; })()")
+        // One height for the row, at least M3's 48px.
+        ->assertScript("new Set({$tabs}.map((tab) => Math.round(tab.getBoundingClientRect().height))).size === 1 && {$tabs}[0].getBoundingClientRect().height >= 48")
+        // The chosen tab's indicator: shown, under its content, on the divider, within its tab.
+        ->assertScript(<<<'JS'
+            (() => {
+                const tab = document.querySelector('[data-md-section-nav] [data-md-tab][aria-current="page"]');
+                const bar = tab.closest('[data-md-tabs-bar]');
+                const indicator = tab.querySelector('[data-md-tab-indicator]');
+                const box = tab.getBoundingClientRect();
+                const content = tab.querySelector('[data-md-tab-content]').getBoundingClientRect();
+                const line = indicator.getBoundingClientRect();
+                const divider = bar.getBoundingClientRect().bottom - parseFloat(getComputedStyle(bar).borderBottomWidth);
+
+                return getComputedStyle(indicator).opacity === '1'
+                    && line.top >= content.bottom - 0.5
+                    && Math.abs(line.bottom - divider) <= 1
+                    && line.left >= box.left - 0.5 && line.right <= box.right + 0.5;
+            })()
+            JS)
+        ->assertNoJavaScriptErrors();
+});
+
 class AppBarOverflowProbe extends Component
 {
     public int $stars = 0;

tests/Feature/Components/TabsTest.php

@@ -123,6 +123,56 @@ it('keeps the tab bar on M3\'s offsets, indicator inset and focus ring', functio
         ->toBe(['color' => 'var(--md-sys-color-primary)']);
 });
 
+/**
+ * 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." Both views render the
+ * text of a label in its own `data-md-tab-text`, so the one rule in tabs.css clamps it.
+ */
+it('renders a label\'s text in its own hook, in tabs and section tabs alike', function () {
+    expect((string) $this->blade('<x-tabs :tabs="[[\'name\' => \'people\', \'label\' => \'People with access\', \'badge\' => 3]]" />'))
+        ->toMatch('/<span data-md-tab-label>\s*<span data-md-tab-text>People with access<\/span>\s*<span[^>]*data-md-badge/')
+        ->and((string) $this->blade('<x-section-nav :items="[[\'title\' => \'Two-factor authentication\', \'url\' => \'/security\', \'badge\' => 1]]" no-wire-navigate />'))
+        ->toMatch('/<span data-md-tab-label>\s*<span data-md-tab-text>Two-factor authentication<\/span>\s*<span[^>]*data-md-badge/');
+});
+
+it('lets a fixed tab\'s label wrap to a second line and truncate there, and a scrollable one keep its row', function () {
+    $css = ComponentStylesheet::read('tabs');
+
+    expect($css->declarations('[data-md-tab]'))
+        // M3's 48px is the tab's minimum: it grows to hold a second line, and the bar stretches the rest.
+        ->toHaveKey('min-height', '48px')
+        ->not->toHaveKey('height')
+        ->toHaveKey('min-width', '90px')
+        // The single row a scrollable tab's label and every badge keep.
+        ->toHaveKey('white-space', 'nowrap')
+        ->and($css->declarations('[data-md-tabs-bar][data-md-stacked] [data-md-tab]'))
+        ->toBe(['min-height' => '64px'])
+        // The content fills a grown tab, so a primary indicator at its foot stays on the divider.
+        ->and($css->declarations('[data-md-tab-content]'))
+        ->toHaveKey('align-self', 'stretch')
+        ->not->toHaveKey('height')
+        ->and($css->declarations('[data-md-tab-label]'))
+        ->toHaveKey('min-width', '0')
+        ->and($css->declarations('[data-md-tabs-bar]:not([data-md-scrollable]) [data-md-tab-text]'))
+        ->toBe([
+            'display' => '-webkit-box',
+            'min-width' => '0',
+            'overflow' => 'hidden',
+            '-webkit-box-orient' => 'vertical',
+            '-webkit-line-clamp' => '2',
+            'text-align' => 'center',
+            'text-overflow' => 'ellipsis',
+            'white-space' => 'normal',
+        ])
+        // The ring's room and the state layer still reach past a grown tab to the divider.
+        ->and($css->declarations('[data-md-tab]::before'))
+        ->toHaveKey('inset-block', 'calc(-1 * var(--tabs-ring))')
+        ->and($css->declarations('[data-md-tab-indicator]'))
+        ->toHaveKey('bottom', 'calc(-1 * var(--tabs-ring))')
+        ->and(collect($css->rules())->filter(fn (array $rule): bool => str_contains($rule['selector'], 'data-md-tab-text'))->pluck('selector')->all())
+        ->toBe(['[data-md-tabs-bar]:not([data-md-scrollable]) [data-md-tab-text]']);
+});
+
 it('hides every panel until Alpine takes over, and stands the panel\'s content clear of the bar', function () {
     $css = ComponentStylesheet::read('tabs');
 
@@ -171,7 +221,9 @@ it('marks the section whose url is the request\'s, and scrolls many sections', f
         // Five or more sections are M3's scrollable tabs, not a grid of wrapped rows (N-16).
         ->toMatch('/<ul data-md-tabs-bar data-md-variant="secondary"\s+data-md-scrollable\s*>/')
         ->not->toContain('grid-cols-')
-        ->toMatch('/data-md-tab\s+aria-current="page"\s*>\s*<span data-md-tab-content>\s*<span class="md-truncate">S3/')
+        // Its label is `<x-tabs>`'s anatomy, drawn by tabs.css, not a one-line `md-truncate`.
+        ->toMatch('/data-md-tab\s+aria-current="page"\s*>\s*<span data-md-tab-content>\s*<span data-md-tab-label>\s*<span data-md-tab-text>S3<\/span>/')
+        ->not->toMatch('/data-md-tab-content>(?:(?!<\/a>).)*md-truncate/s')
         ->not->toContain('wire:navigate')
         // Four still share the row.
         ->and((string) $this->blade('<x-section-nav :items="$items" no-wire-navigate />', ['items' => array_slice($items, 0, 4)]))