'); }); it('draws floating and docked toolbars', function () { $html = (string) $this->blade(<<<'BLADE' B + BLADE); expect($html) ->toContain('

') ->toContain('role="toolbar"') ->toContain('materialToolbar(true)') ->toContain('data-variant="floating"') ->toContain('aria-orientation="vertical"') ->toContain('data-vibrant') ->toContain('aria-label="Formatting"') ->toContain('+') ->and((string) $this->blade('B')) ->toContain('data-variant="docked"') ->not->toContain('data-vibrant') ->not->toContain('data-vertical') ->toContain('data-toolbar-place="bottom"') ->not->toContain('data-toolbar-group'); }); it('sets a FAB at the end of a docked toolbar, resting flat on it', function () { $html = (string) $this->blade(<<<'BLADE' Draw + BLADE); expect($html) // Inside the toolbar, after its controls, where the arrow keys reach it too. ->toMatch('/role="toolbar".*Draw<\/button>\s*

\+<\/button><\/div>\s*<\/div>/s') ->not->toContain('data-toolbar-group') ->and((string) $this->blade('Draw')) ->not->toContain('data-toolbar-fab'); expect(file_get_contents(__DIR__.'/../../../resources/css/components/toolbar.css')) ->toMatch('/\[data-toolbar-fab\] \{\s+display: flex;\s+margin-inline-start: auto;/') // A nested FAB rests at elevation 0. ->toMatch('/\[data-toolbar-fab\] \[data-fab\],\s+\[data-toolbar-fab\] \[data-fab\]:hover \{\s+box-shadow: none;/'); }); it('centres a headline on a three-column row and curves the search container', function () { $css = file_get_contents(__DIR__.'/../../../resources/css/components/app-bar.css'); expect($css) // Not a fixed 56px inset, which fits exactly one of M3's two trailing buttons (N-11). ->not->toContain('inset-inline: 3.5rem;') ->toMatch('/\[data-variant="center"\] \[data-app-bar-row\] \{\s+display: grid;\s+grid-template-columns: 1fr auto 1fr;/') // 312dp, then half of what is left (N-09). ->toContain('max-width: calc(19.5rem + (100% - 19.5rem) / 2);'); }); it('keeps a toolbar at the bottom clear of the navigation bar', function () { $css = file_get_contents(__DIR__.'/../../../resources/css/components/toolbar.css'); expect($css) // Never a sum: --material-bottom-bar already swallows the bottom safe area (N-02). ->toContain('bottom: calc(max(var(--material-bottom-bar, 0px), var(--material-safe-bottom, env(safe-area-inset-bottom))) + 1rem);') ->toContain('bottom: var(--material-bottom-bar, 0px);') // A vertical toolbar keeps 24dp from the edge where a horizontal one keeps 16 (N-12). ->toContain('inset-inline-end: calc(1.5rem + var(--material-safe-right, env(safe-area-inset-right)));') // A standard toolbar's standard buttons are primary (N-13). ->toContain('[data-toolbar]:not([data-vibrant]) [data-icon-button]:not([aria-pressed="true"]) {'); }); it('offers M3\'s three contrast levels, marking the one in force', function () { expect((string) $this->blade('')) ->toContain('data-theme-toggle="contrast"') ->toContain('aria-label="Contrast"') // A connected button group over native radios, not the deprecated segmented button (N-04). ->toContain('data-button-group="connected"') ->toContain('name="material-contrast"') ->toContain('value="standard"') ->toContain('value="medium"') ->toContain('value="high"') ->toContain('$store.theme.setContrast(value)') // The row follows the resolved level, so the operating system's shows under `system`. ->toContain('return this.$store.theme.resolvedContrast'); }); it('names a theme row for a screen reader and legends it on request', function () { expect((string) $this->blade('')) ->toContain('aria-label="Theme"') ->not->toContain('and((string) $this->blade('')) ->toContain('aria-label="Appearance"') ->toContain('

Appearance

'); }); it('switches the theme through the store in three shapes', function () { expect((string) $this->blade('')) ->toContain('data-theme-toggle="toggle"') ->toContain('aria-label="Dark theme"') // 40px drawn, 48px reached: M3's minimum target (N-01). ->toContain('touch-target') ->toContain('$store.theme.toggle()') ->and((string) $this->blade('')) ->toContain('data-theme-toggle="cycle"') ->toContain("{ light: 'dark', dark: 'system', system: 'light' }") ->and((string) $this->blade('')) ->toContain('data-theme-toggle="picker"') ->toContain('x-model="chosen"') ->toContain('name="material-theme"') ->toContain('value="system"') ->toContain('$store.theme.set(value)'); }); it('opens an account menu from the initials of a name', function () { $html = (string) $this->blade(<<<'BLADE' BLADE); expect($html) ->toContain('aria-label="Account"') ->toContain('data-account-menu') // The 40px avatar reaches 48px, and nothing clips the pseudo-target (N-01); the trigger // has a hover and a pressed state like every other trigger in the library (N-15). ->toContain('state-layer touch-target focus-ring') ->not->toContain('overflow-hidden') ->toMatch('/>\s*AM\s*<\/button>/') ->toContain('anna@example.com') ->toContain('Settings') ->toContain('data-account-theme') ->toContain('Sign out') ->and((string) $this->blade('')) ->toContain('') ->not->toContain('data-account-theme'); });