{{-- The live breakpoint readout: this window's width, and the M3 breakpoint it falls in, read
     from the same numbers resources/js/breakpoints.js compares against. Shared by the Layout
     section's Overview and its three canonical layout pages (plan step 38). --}}

<x-livewire-material::surface
    level="surface-container-low"
    padding="space300"
    corner="lg"
    data-test="window-class"
    x-data="{ width: window.innerWidth }"
    x-on:resize.window="width = window.innerWidth"
>
    <x-livewire-material::row gap="space200" wrap align="baseline">
        <span class="md-type-label-lg md-ink-variant">This window</span>
        <span class="md-type-emphasized-headline-sm md-tabular" x-text="width + 'px'"></span>
        <span class="md-type-title-md" x-text="width < 600 ? 'compact' : width < 840 ? 'medium' : width < 1200 ? 'expanded' : width < 1600 ? 'large' : 'extra-large'"></span>
    </x-livewire-material::row>
</x-livewire-material::surface>