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/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)]))