Mobilny arkusz nawigacji pogodowej

<div data-nav-kind="mobile">
<main class="weather-app">
  <header><div><span>Stacja Północ</span><h1>12°</h1><p>Wiatr z zachodu, przelotny deszcz.</p></div><svg viewBox="0 0 120 120" aria-hidden="true"><circle cx="51" cy="47" r="24"/><path d="M18 81c8-18 24-24 39-18 10-18 43-15 46 11 13 1 18 8 17 17H18Z"/></svg></header>
  <section id="weather-now"><h2>Teraz</h2><p>Odczuwalna 9°. Opady ustąpią około 16:00.</p></section>
  <section id="weather-hours"><h2>Godzina po godzinie</h2><p>Najsilniejszy wiatr między 14:00 a 17:00.</p></section>
  <section id="weather-week"><h2>Najbliższe dni</h2><p>Chłodny wtorek, pogodniejsza środa i czwartek.</p></section>
  <button id="weather-open" type="button" aria-haspopup="dialog" aria-controls="weather-sheet" aria-expanded="false">Otwórz nawigację prognozy</button>
  <p id="weather-status" aria-live="polite" role="status">Widok: Teraz.</p>
</main>
<dialog id="weather-sheet" class="is-compact" aria-labelledby="weather-sheet-title" aria-describedby="weather-sheet-desc">
  <div class="sheet-handle" aria-hidden="true"></div>
  <header><div><small>Stacja Północ</small><h2 id="weather-sheet-title" tabindex="-1">Prognoza</h2><p id="weather-sheet-desc">Wybierz zakres albo rozwiń arkusz, aby zobaczyć opisy.</p></div><button class="weather-close" type="button" aria-label="Zamknij nawigację">×</button></header>
  <button id="weather-expand" type="button" aria-pressed="false">Pokaż pełny arkusz</button>
  <nav aria-label="Zakres prognozy"><ul>
    <li><a href="#weather-now" data-weather-name="Teraz" aria-current="page"><b>Teraz</b><span>12° · deszcz</span></a></li>
    <li><a href="#weather-hours" data-weather-name="Godzina po godzinie"><b>Godziny</b><span>12° → 9°</span></a></li>
    <li><a href="#weather-week" data-weather-name="Najbliższe dni"><b>7 dni</b><span>Wtorek – poniedziałek</span></a></li>
  </ul></nav>
  <button id="weather-back" type="button">← Wróć do prognozy</button>
</dialog>
</div>

*{box-sizing:border-box}[data-nav-kind="mobile"]{width:min(100%,430px);margin:auto}html{color-scheme:light}body{margin:0;min-width:0;background:#b6cbd3;color:#18354b;font:16px/1.5 Arial,sans-serif}.weather-app{width:min(100%,430px);min-height:100dvh;margin:auto;background:#dceaf0;border-inline:1px solid #7895a0;padding:20px}.weather-app>header{display:flex;justify-content:space-between;gap:20px;border-bottom:3px solid #18354b;padding-bottom:21px}.weather-app header span{font:12px "Courier New",monospace}.weather-app h1{margin:8px 0 0;font:700 82px/.8 Georgia,serif}.weather-app header p{max-width:230px;margin:18px 0 0}.weather-app svg{width:98px;flex:0 0 auto}.weather-app svg circle{fill:#f0bc4c;stroke:#18354b;stroke-width:4}.weather-app svg path{fill:#dceaf0;stroke:#18354b;stroke-width:4}.weather-app section{min-height:112px;padding:18px 0;border-bottom:1px solid #7895a0}.weather-app section h2{margin:0 0 6px;font-size:20px}.weather-app section p{margin:0;color:#39596d}.weather-app>button,dialog button,dialog a{min-height:44px}.weather-app>button{width:100%;margin-top:20px;border:2px solid #18354b;background:#f0bc4c;color:#18354b;padding:10px;font-weight:800;cursor:pointer}.weather-app>p{min-height:48px;margin:0;padding:13px 0}dialog{display:none;width:min(100%,430px);height:min(70dvh,360px);max-height:calc(100dvh - 8px);margin:auto auto 0;padding:0 16px 14px;border:2px solid #18354b;border-bottom:0;background:#f4f1e8;color:#18354b;overflow-y:auto}dialog[open]{display:block;animation:weather-in .2s ease-out}dialog.is-full{height:calc(100dvh - 8px)}dialog::backdrop{background:rgba(24,53,75,.68)}.sheet-handle{width:62px;height:5px;margin:9px auto 12px;background:#7895a0}dialog header{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #7895a0;padding-bottom:10px}dialog header small{font:11px "Courier New",monospace;color:#496878}dialog h2{margin:2px 0;font:700 34px/1 Georgia,serif}dialog header p{margin:5px 0 0;font-size:13px}.weather-close{width:46px;padding:0;border:1px solid #18354b;background:transparent;color:#18354b;font-size:25px;cursor:pointer}#weather-expand,#weather-back{width:100%;margin-top:10px;border:1px solid #18354b;background:transparent;color:#18354b;padding:8px 12px;text-align:left;font-weight:800;cursor:pointer}nav ul{list-style:none;margin:10px 0 0;padding:0}nav li{border-top:1px solid #7895a0}nav a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 5px;color:#18354b;text-decoration:none}nav a b{font-size:18px}nav a span{color:#496878;font-size:13px;text-align:right}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:4px solid #bd3f32;outline-offset:3px}@keyframes weather-in{from{transform:translateY(100%)}to{transform:none}}@media(max-width:470px){.weather-app{border:0}}@media(max-height:400px){dialog{height:calc(100dvh - 4px)}dialog header p{display:none}.sheet-handle{margin-block:5px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

$(()=>{const dialog=$('#weather-sheet')[0],$dialog=$(dialog),opener=$('#weather-open')[0];const focusable=()=>[...dialog.querySelectorAll('button:not([disabled]),a[href]:not([tabindex="-1"]),[tabindex]:not([tabindex="-1"])')].filter(el=>el.getClientRects().length);function close(){if(dialog.open)dialog.close('back')}$('#weather-open').on('click',()=>{$(opener).attr('aria-expanded','true');$dialog.removeClass('is-full').addClass('is-compact');$('#weather-expand').attr('aria-pressed','false').text('Pokaż pełny arkusz');dialog.showModal();$('#weather-sheet-title').trigger('focus')});$('#weather-expand').on('click',function(){const full=$dialog.toggleClass('is-full').hasClass('is-full');$(this).attr('aria-pressed',String(full)).text(full?'Pokaż krótszy arkusz':'Pokaż pełny arkusz')});$('[data-weather-name]').on('click',function(){$('#weather-status').text('Widok: '+$(this).data('weather-name')+'.')});$('#weather-back,.weather-close').on('click',close);$dialog.on('cancel',event=>{event.preventDefault();close()}).on('close',()=>{$(opener).attr('aria-expanded','false');opener.focus()}).on('keydown',event=>{if(event.key==='Escape'){event.preventDefault();close();return}if(event.key!=='Tab')return;const items=focusable(),first=items[0],last=items[items.length-1];if(!items.length){event.preventDefault();dialog.focus()}else if(event.shiftKey&&items.indexOf(document.activeElement)<=0){event.preventDefault();last.focus()}else if(!event.shiftKey&&(items.indexOf(document.activeElement)<0||document.activeElement===last)){event.preventDefault();first.focus()}});$('nav a[href^="#"]').on('click',function(event){event.preventDefault();const nav=$(this).closest('nav');nav.find('[aria-current]').removeAttr('aria-current');$(this).attr('aria-current','page')});});