Changelog

Nowa aplikacja Angular 22 na komponentach WDS i Signal Forms: obsada i zlecenia dla firmy kolejowej (zamiast Excela). Menu: Mapa, Zlecenia, Użytkownicy. Start: pnpm dev:rail (port 4600).

• Mapa (na wzór bloku Fleet management): pracownicy przy adresie zamieszkania, kolor markera wg relacji (umowa / kontakt) albo dostępności; filtr uprawnień (wszystkie wybrane), wyszukiwanie stacji lub adresu z listą najbliższych pracowników, historia zleceń pracownika.
• Dane pracownika (imię, nazwisko, telefon, adres, gdzie pracuje, uprawnienia) zmienia tylko biuro kadrowe; dyspozytor dodaje wpisy dostępności (pracuje, urlop, choruje, wolne), także na przyszłe dni.
• Zlecenia: kolory statusów jak w Excelu, LP liczony w miesiącu, dyspozytor z grafiku dyżurów 7–19 / 19–7 (zmienia tylko dyrektor), godziny do faktury z minimum w umowie klienta (zawsze co najmniej 8 h), ostrzeżenie, gdy pracownik pracuje u klienta, nie ma uprawnienia albo jest niedostępny.
• Faktura dla zaznaczonych zrealizowanych zleceń: numer faktury, kolor niebieski i blokada edycji (odblokować może tylko dyrektor). Kolumny rozliczenia (R7 + KP, potwierdzający maszynista, koszty dodatkowe, faktura) wypełnia dział rozliczeń.
• Użytkownicy: konta z rolami (dyspozytor, biuro kadrowe, rozliczenia, dyrektor) i grafik dyspozytorów. Prototyp bez serwera: dane w localStorage, użytkownika wybiera się w stopce menu.
• Menu w wariancie z drugim panelem (jak w bloku Fleet): pasek ikon z sekcjami i panel z treścią sekcji – na mapie filtry i lista pracowników, w zleceniach widoki i statusy z licznikami (zarazem filtr), w użytkownikach widoki i dyspozytor na dyżurze. Widoki mają własne adresy (/contracts/orders, /users/schedule).
• Edycja zlecenia: ołówek i menu akcji na początku wiersza oraz klikalny nr zlecenia (wcześniej menu było w ostatniej kolumnie, poza ekranem).

• Poza /docs nagłówek to zaokrąglona pigułka o szerokości do 1280 px. Na górze strony jest przezroczysta, a po przewinięciu dostaje ramkę, tło i cień. Sekcje są na środku, przyciski są okrągłe.
• Menu mobilne: wybór frameworka tylko w dokumentacji (/docs); na stronie głównej, Blocks, Charts, Maps i Create go nie ma. Link Docs to teraz przycisk obok Create na górze, a nie samotna pozycja pod Resources. Do lg nagłówek nie ma przycisku Create obok hamburgera (jest w menu).
• W dokumentacji (/docs) nagłówek ma pełną szerokość i linię na dole, ale tę samą wysokość co pigułka (64 px, od lg 72 px), więc przy przejściu między stronami treść nie skacze.

Nowe strony Components i Icons oraz przebudowana Charts, w tym samym stylu co strona główna i Maps. Menu Products w nagłówku prowadzi teraz do /components i /icons.

• Components: kolaż działających komponentów w oknie przeglądarki (formularz, zespół, czat z asystentem, powiadomienia, budżet), katalog w grupach na całą szerokość, sześć kart z tym, co daje każdy komponent (ikony WDS w kafelkach), kod w trzech frameworkach, FAQ i CTA.
• Icons: galeria pod przyciskiem w hero (wyszukiwanie, kategorie w zakładkach-pigułkach), lista ikon na całą szerokość w gęstej siatce z liniami (do 16 kolumn, komórki 96 px, ikony 32 px), najwyżej 64 ikony z przyciskiem „Show all”; ikona otwiera drawer z prawej, duży podgląd, kolor (przycisk z paletą i próbką otwiera picker systemu, ✕ wraca do koloru tekstu), rozmiar (16–64 px, domyślnie 48; powyżej 32 px przez --wds-icon-size) i styl kafelka w wds-select (wszystkie zmieniają też kod), kopiowanie nazwy i SVG, kod w trzech frameworkach. Adres ma ?icon=…, więc link do ikony można udostępnić. Dalej kafelki i sześć rozmiarów wds-icon, kod w trzech frameworkach, FAQ i CTA.
• Charts: wykres interaktywny w oknie przeglądarki, rodzaje wykresów w zakładkach (przykłady ze strony Chart), cztery karty (kolory z tokenów, tabela danych dla czytników ekranu, interakcje, ECharts ładowany tylko z wykresem), kod w trzech frameworkach, FAQ i CTA.
• Linki do ikon prowadzą do /icons (strona Iconography w docs będzie wyłączona): „Browse all icons” na stronie głównej, karta Icons w przepływie; na /icons przycisk w hero przewija do galerii, a CTA prowadzi do komponentu Icon.
• Wspólne klocki w ui/landing/: siatka komponentów (strona główna i /components) i kod przycisku w trzech frameworkach.

Strona główna i Maps wyglądają jak nowoczesny landing: duże tytuły, nagłówki sekcji z etykietą w ramce, szare, mocno zaokrąglone kafelki i więcej powietrza, bez siatki w tle.

• Hero: pigułka z nowością (znaczek „New”), większy tytuł (do 60 px) i przyciski 48 px ze strzałką; pod hero strony głównej przesuwający się pas technologii (zatrzymuje się po najechaniu, bez ruchu przy prefers-reduced-motion).
• Zakładki-pigułki (szary pasek, wybrana zakładka biała z cieniem; strzałki, Home i End): grupy komponentów i kod frameworków na stronie głównej, podkłady i wtyczki na Maps. Wtyczka ma teraz dużą ilustrację i opis obok. Nowe zakładki wtyczek: Controls, POI i Context menu (każda z własną ilustracją). Pod zakładkami podkładów nie ma już opisu stylu.
• Hero strony głównej: pod przyciskami krótki przepływ na Flow w stylu przykładu „Default”: Your brand (jeden plik motywu) → WDS (komponenty, wykresy, mapy) → Angular, React (też Next.js), HTML (też Spring Boot) → Your app, z animowanymi krawędziami i przyciskiem „Start building”; od WDS odnogi do rzędu kart-pigułek pod spodem: Icons, Charts, Maps, Blocks. Całość w ramce okna przeglądarki. Karty to linki do stron, kanwa jest tylko do odczytu, a kółko myszy przewija stronę (Ctrl/⌘ + kółko przybliża). Ładuje się w wolnej chwili; pas technologii pod nim.
• Komponenty na stronie głównej: lista na całą szerokość strony w siatce z liniami, strzałka po najechaniu; bez pigułek „Framework guides” w sekcji frameworków.
• Nowe sekcje na stronie głównej: dwa kafelki („Themes from design tokens”, „Accessible by default”) i porównanie „Building it yourself” / „With WDS”.
• FAQ na obu stronach: osobne pytania z numerem, jedno otwarte naraz (natywne <details>).
• Wezwanie do działania na dole w szarym zaokrąglonym bloku z poświatą, z dwoma przyciskami; w hero jeden przycisk „Get started”.
• Telefon: mniejsze zaokrąglenia dużych ramek (1,5rem zamiast 2,5rem, od 40rem jak dotąd), przyciski CTA pod sobą, wyśrodkowane, najwyżej 80% szerokości, przepływ w hero dopiero od md.
• Wspólne klocki w ui/landing/: nagłówek sekcji, zakładki-pigułki, FAQ, CTA i pigułka z nowością.

Nowa kolekcja bloków Shell (Advanced+): szkielety aplikacji na Sidebar. Pierwszy blok to panel zarządzania flotą.

• Sidebar z drugim panelem: pasek ikon z sekcjami (z podpowiedziami) i panel z listą pojazdów: wyszukiwanie, filtry (All, Driving, Stopped, Alerts) i sortowanie. Zwinięty zostawia sam pasek ikon.
• Wyszukiwanie adresu: wds-combobox nad mapą (filter="none") pyta GeocodeService 300 ms po ostatnim znaku. Dostawcę wybiera token GEOCODER: domyślnie Photon (OpenStreetMap, bez klucza), a z kluczem HERE Autosuggest albo Geoapify Autocomplete; najpierw miejsca blisko widocznej części mapy, ale szuka na całym świecie; nowe zapytanie anuluje poprzednie. Wybrany adres dostaje pinezkę, mapa do niego leci, a karta pokazuje najbliższą ciężarówkę z przyciskiem „Open”. Lista pojazdów w drugim panelu przewija się bez widocznego paska.
• Menu kontekstowe (wds-context-menu) na mapie: na pinezce adresu „Show location”, „Create vehicle here” i „Remove pin” (te same akcje w menu „⋯” karty adresu), na pustym miejscu „Show location” i „Create vehicle here” ze współrzędnymi punktu, a na ciężarówce „Open details” i „Edit vehicle”.
• Formularz pojazdu w wds-sheet: ID, status, model, tablica, VIN, kierowca, miejsce i współrzędne (wds-number-field), paliwo, zasięg, ładunek, waga, skąd, dokąd i ETA (wds-time-picker); błędy po pierwszej próbie zapisu. Nowa ciężarówka staje w podanym punkcie, a edycja z nowymi współrzędnymi ją przenosi.
• Na mapie (wds-map) ciężarówki jako markery ze strzałką kierunku. Klik w pojazd (na liście albo na mapie) otwiera szczegóły i dopasowuje widok do trasy obok nich: przejechana część linią ciągłą, reszta przerywaną.
• Szczegóły ciężarówki w wds-sheet nad mapą (niemodalny, zamknięty na starcie): zakładki Overview (pojazd, paliwo, kierowca, alerty), Shipping, Events (wds-timeline) i Playback, gdzie suwak lub przycisk odtwarza przejazd; w stopce „Center on map” i „Call driver”.

Strona Maps zamiast samego nagłówka, w układzie strony głównej (hero z pigułką, sekcje z nadtytułem, CTA): pokaz wds-map, komponent, podkłady, wtyczki i planowanie trasy z ETA.

• Animacje: hero wjeżdża po kolei, a sekcje pojawiają się przy przewijaniu (scroll-driven, bez JS); bez ruchu przy prefers-reduced-motion.
• Sekcja „Basemaps”: ta sama flota na pięciu darmowych stylach bez klucza API (CARTO Positron, Voyager, Dark Matter; OpenFreeMap Liberty, Bright), przełączanych wds-toggle-group przez map-style.
• Sekcja „Route planning”: skąd, przystanek (20 min rozładunku), dokąd, godzina wyjazdu i godziny szczytu (drogi miejskie wolniej o 35%). Najszybsza trasa (Dijkstra po czasie na uproszczonej sieci dróg Bay Area), ETA, dystans, czas jazdy, oś czasu z godziną w każdej miejscowości i ciężarówka przejeżdżająca trasę na mapie.
• Szeroka mapa bez ramki i sidebara: ciężarówki i ich trasy z bloku Fleet management, menu warstw (jadące, stojące, wszystkie trasy, tylko z alertami) i przyciski przybliżania.
• Klik w ciężarówkę otwiera panel (wds-sheet z contained) w obrębie mapy: trasa, ETA i opóźnienie, prędkość, paliwo, ładunek, kierowca, alerty i suwak odtwarzania przejazdu; mapa dopasowuje widok do trasy obok panelu.
• Sekcja „Component” zaraz po mapie: izometryczny stos trzech warstw (mapa, warstwy danych, kontrolki), który rozsuwa się przy przewijaniu, obok lista warstw z ich API.
• Sekcja „Plugins” przed planowaniem trasy: karty View, Route i ETA wchodzą po kolei, każda z małą animowaną ilustracją (dopasowanie kadru, rysowana trasa, zegar). Wtyczki to na razie kod pokazu na API wds-map, nie osobne API.

Podstawowy komponent wds-map na MapLibre GL JS (@wds/core/map, maplibre-gl jako opcjonalna zależność, jak echarts w Chart; osobny wds-map.bundle.js).

• center ([długość, szerokość]), zoom, markers (id, lngLat, label, color, heading), lines (coordinates, color, width, opacity, dashed) i selected (zaznaczony marker).
• Kolory markerów i linii to dowolne kolory CSS, także tokeny (var(--wds-primary)); styl mapy przełącza się sam między jasnym i ciemnym motywem (CARTO Positron i Dark Matter, bez klucza API; map-style i dark-style je zmieniają).
• Markery są przyciskami (Tab, Enter) z nazwą z label; controls dodaje przyciski przybliżania i powrotu na północ, a --wds-map-controls-offset przesuwa je razem z atrybucją obok panelu nad mapą.
• Zdarzenia wds-load, wds-marker-click, wds-marker-contextmenu i wds-map-contextmenu (prawy klik albo klawisz menu na markerze lub na pustej mapie, z punktem dla wds-context-menu.showAt() i współrzędnymi) oraz wds-move-end; metody flyTo(), fitBounds() (z marginesem z każdej strony, np. obok panelu), resize() i getInstance(). Bez animacji przy prefers-reduced-motion.

Nowy komponent Tree: hierarchia folderów i elementów, np. eksplorator plików albo zagnieżdżona nawigacja.

• Elementy przekazujesz w items jako { id, label, children }; element z children to folder. expanded to otwarte foldery, a value to zaznaczony element.
• Klik w folder go rozwija lub zwija (wds-toggle), klik w inny element go zaznacza (wds-change). disabled blokuje element.
• lines rysuje linie łączące elementy folderu, toggle-icon="plus-minus" zamienia strzałkę na plus i minus, a indent ustawia wcięcie poziomu.
• icons="folder" pokazuje ikony folderów i plików, a icons="file-type" także rodzaj pliku po rozszerzeniu (kod, style, dane, tekst, obrazy); icon elementu go nadpisuje.
• Klawiatura jak we wzorcu WAI-ARIA: strzałki, Home, End, Enter, Spacja, * (rozwija foldery na poziomie) i wpisywanie liter.

Nowy komponent Frame: wyciszony kontener, który grupuje panele z nagłówkiem i stopką. Składasz go z wds-frame, wds-frame-panel, wds-frame-header (z wds-frame-title i wds-frame-description) i wds-frame-footer.

• Panele to osobne karty z małym odstępem; stacked łączy sąsiednie panele w jeden blok (bez odstępu, bez wewnętrznych rogów, jedna linia między nimi), a dense przykleja je do krawędzi ramki.
• variant: default, ghost (bez zewnętrznej ramki) i inverse (ramka w kolorze tła strony, panele wyciszone).
• spacing (xs, sm, default, lg) ustawia odstępy paneli, nagłówka i stopki; nagłówek i stopka są wyrównane z treścią paneli.
• Promień zmieniasz przez --wds-frame-radius; promień paneli liczy się sam (koncentrycznie), a --wds-frame-panel-radius go nadpisuje. Kolory przez --wds-frame-background, --wds-frame-border, --wds-frame-panel-background i --wds-frame-panel-border.
• W ramce o ustalonej wysokości panele wypełniają wolne miejsce; fit dopasowuje panel do treści. Tytuł ma role="heading" z poziomem z level (domyślnie 3).

Nowe kolumny Time Picker wariant list bez zmian.

• Kolumny z nagłówkami w języku strony („Hour”, „Stunde”, „小时”), rozdzielone liniami, 5 wierszy (--wds-time-picker-rows) z wyborem na środku, bez paska przewijania i z wygaszonymi krawędziami. Pod kolumnami Now, Clear i OK (actions).
• trigger="button": przycisk outline z godziną zamiast pola do wpisywania; inline: kolumny w miejscu, zawsze otwarte.
• granularity (hour, minute, second), hour-step i second-step; okno przez północ (min="22:00" max="06:00"); niedostępne godziny przez disabled-times="12:00-13:00 15:30" albo funkcję isTimeDisabled.
• require-confirm: wybór (też Now i Clear) jest szkicem do OK albo Enter; Escape i zamknięcie go porzucają.
• Wybór albo wpisany czas spoza kroków, okna lub na niedostępnej godzinie przechodzi na najbliższy dozwolony. „Now” zaokrągla do kroku.
• Klawiatura: ↑/↓ w polu to następny/poprzedni dozwolony czas, Alt+↓ otwiera kolumny (wcześniej ↓); w kolumnie cyfry skaczą do wartości (1, 4 → 14), Alt+↑ zatwierdza, Tab krąży w okienku.
• Pole przyjmuje 14h30, porę dnia przed godziną (下午 2:30) i cyfry arabsko-indyjskie; AM/PM stoi przed godziną po chińsku, japońsku i koreańsku, a kolumny zostają od lewej do prawej w tekście RTL.
• Nowe przykłady: Button trigger, Inline, Full format, Hour only, Unavailable times, Confirm with OK, Actions i Localization. Kolumny czasu w Date Picker z time mają ten sam wygląd.

Pierwsza kolekcja bloków: Event Calendar, 6 gotowych ekranów aplikacji w Angularze, oznaczonych jako Advanced+. Każdy blok to komponent i osobny plik z przykładowymi danymi.

• Kalendarz wydarzeń: miesiąc, tydzień, tydzień roboczy, dzień, N dni, agenda i zasoby; tworzenie i edycja w panelu bocznym (Sheet) z datą z Date Picker, godziną z Time Picker, powtarzaniem i osobą; menu kontekstowe z edycją, duplikowaniem i usuwaniem.
• Przestrzeń robocza: mini-miesiąc zsynchronizowany z kalendarzem, kalendarze do pokazania, dodania i usunięcia (Alert Dialog), najbliższe wydarzenia i edycja wydarzeń w panelu bocznym.
• Recepcja hotelu: tygodniowa siatka godzin z rezerwacjami w kolorach strumieni usług (pokaż, dodaj, usuń), mini-miesiąc, przyjazdy dnia i rezerwacja w panelu bocznym.
• Grafik zmian: oś czasu (dzień, tydzień, tydzień roboczy, miesiąc) z działami w wierszach; zmiana pokazuje awatary obsady, wymaganą liczbę osób i ostrzeżenie o wolnych miejscach. Wyszukiwanie, filtr wolnych miejsc, dodawanie i usuwanie działów, panel zmiany z wyborem osób, ochrona przed podwójnym przypisaniem i publikacja (readonly).
• Klinika (Clinic chair board): karta z zakładkami Calendar i Log History, licznik rezerwacji w widoku, kolumna na fotel z lekarzem i liczbą pacjentów, wybór foteli, filtry statusów, rezerwacje jako karty w kolorze statusu i blokady (lunch, zabiegi, sterylizacja) jako kreskowane wydarzenia tła.
• We wszystkich blokach klik w wydarzenie otwiera panel podglądu (Sheet inset), a „Edit” otwiera nad nim zagnieżdżony panel edycji; usuwanie potwierdza Alert Dialog. Godziny wybiera się z listy (Time Picker variant="list").
• Kalendarz kredytowy: kafelki transakcji w trzech wierszach (lane-height), karta kowenantów po najechaniu (Hover Card) i panel transakcji (etap, termin, wyniki kowenantów, notatki, usuwanie).
• Każdy blok jest w ramce Frame: w nagłówku przełącznik Preview / Code, znaczek Advanced+ i przycisk z nazwą bloku, który kopiuje link do niego. Panele boczne bloku otwierają się w podglądzie, w ramce, a nie na całym ekranie. Kod bloku ładuje się dopiero po otwarciu zakładki Code, a pliki wybiera się w drzewie (Tree) obok kodu.
• W blokach z boczną kolumną (Calendar workspace, Hotel front desk) kalendarz sięga do dołu kolumny.

• Widoki timeline-day, timeline-week i timeline-month: zasób to wiersz, czas biegnie w poziomie (godziny albo dni). Wydarzenie przeciągasz w czasie i między wierszami, zmieniasz długość za krawędź; Shift+↑/↓ przenosi je do sąsiedniego zasobu. group w zasobie dodaje nagłówki grup.
• Przeciągnięcie wydarzenia z godziną na pasek całodniowy robi z niego wydarzenie całodniowe, a całodniowego do siatki godzin – godzinne (1 h od miejsca upuszczenia).
• Wydarzenia z okienka „+N more” można przeciągać na inne dni (okienko zamyka się przy pierwszym ruchu).
• Sloty event-<id> i resource-<id>: własna treść wydarzenia i nagłówka zasobu w light DOM, więc działają klasy Tailwinda i komponenty WDS.
• display: 'background' w wydarzeniu: zacieniony zakres (przerwa, zamknięta sala) za wydarzeniami, w kolumnie albo wierszu zasobu.
• lane-height ustawia wysokość wiersza wydarzenia w miesiącu, pasku całodniowym i na osi czasu.
• event-variant="soft": wydarzenia jako przyciemnione karty z obramowaniem w kolorze wydarzenia; slot actions za przełącznikiem widoków; ::part(body) i ::part(background-event); wydarzenia tła przyjmują własną treść ze slotu event-<id>.
• Widoki work-week i timeline-work-week (poniedziałek–piątek) oraz resource: jeden dzień podzielony na kolumny zasobów. resources dzieli teraz siatkę godzin tylko w widokach z resource-views (domyślnie sam resource), np. resource-views="day week".

• variant="list" w Time Picker: zamiast kolumn jedna lista godzin jak w selekcie (co minute-step, przy kroku 1 co 15 minut), z wpisywaniem w pole, ↑/↓ i Enter.
• relative-to (np. początek wydarzenia): lista zaczyna się po tej godzinie i przy każdej pokazuje czas trwania, np. „10:30 AM (1 h 30 min)”.

Nowy komponent Event Calendar: kalendarz wydarzeń w widoku miesiąca, tygodnia, dnia, kilku dni i agendy.

• fill: kalendarz wypełnia wysokość rodzica (np. wiersz siatki obok bocznej kolumny), a --wds-event-calendar-height staje się minimalną wysokością siatki.
• Wydarzenia przekazujesz we właściwości events: sama data to wydarzenie całodniowe, data z godziną to wydarzenie z godziną; recurrence powtarza je regułą RRULE (np. FREQ=WEEKLY;BYDAY=MO,WE).
• Wydarzenie można przeciągnąć albo zmienić jego długość za krawędź, także klawiaturą (Shift+strzałki przesuwają, Alt+strzałki zmieniają długość). Kalendarz sam aktualizuje events i wysyła wds-event-change; canDropEvent może zmianę odrzucić.
• Z drag-create narysowanie zakresu na pustym czasie (albo klik) wysyła wds-slot-select, a klik w wydarzenie wds-event-click; okno tworzenia i edycji budujesz sam, np. z Dialog.
• resources dzieli dzień na kolumny (np. sale) i pozwala przeciągać wydarzenia między nimi; business-hours, day-start i day-end ustawiają godziny, a week-numbers i hide-weekends wygląd miesiąca.
• W miesiącu nadmiar wydarzeń chowa się pod „+N more” z listą dnia w Popover; menu kontekstowe wydarzenia daje eventActions.
• Siatka dni i godzin to grid z kursorem obsługiwanym strzałkami, a zmiany są ogłaszane czytnikowi ekranu.

Nowy komponent Filters: pasek filtrów, w którym każdy filtr to pole, operator i wartość.

• fields opisuje, co można filtrować; type (text, number, select, date, boolean) wybiera operatory i edytor wartości, a operators zawęża i ustawia kolejność menu.
• Przycisk „Filter” otwiera menu pól jeszcze nieużytych; nowy filtr od razu ustawia fokus na wartości (przy select otwiera listę opcji, w której można zaznaczyć kilka).
• Operatory to m.in. contains, is, starts_with, =/≥/≤, is between (zakres [od, do]), is any of, is before/after oraz is empty dla każdego typu.
• Zdarzenie wds-change podaje filters ({ field, operator, value }[]); matchesFilters(row, filters) sprawdza wiersz względem wszystkich filtrów (AND), a filtr bez wartości przepuszcza wszystko.
• Pasek sam niczego nie filtruje: przekaż filtry do matchesFilters(), na serwer albo wstaw go do Data Table.

Data Table dostała funkcje znane z data gridów. Każda działa osobno i razem z sortowaniem, filtrem, zaznaczaniem i paginacją.

• Pasek filtrów: wds-filters w slocie toolbar filtruje wiersze bez dodatkowego kodu, a kolumny z filter stają się jego polami (np. filter: { type: 'select', options }).
• Przesuwanie kolumn: reorderable dodaje uchwyt w nagłówku; kolumnę można przeciągnąć albo przesunąć strzałkami ←/→. Kolejność przychodzi w wds-column-order-change i wraca przez column-order.
• Grupowanie: group-by grupuje wiersze po kolumnie; wiersz grupy ma przycisk zwijania, liczbę wierszy i podsumowania kolumn z aggregate (sum, avg, min, max, count albo własna funkcja).
• Edycja: kolumna z editable otwiera edytor (text, number albo select z options) po kliknięciu lub Enter; Enter i wyjście z pola zapisują, Escape anuluje. Tabela nie zmienia data: nowa wartość przychodzi w wds-cell-edit.
• Rozwijane wiersze: renderDetail zwraca treść pokazywaną w wierszu pod spodem; trafia ona na stronę, więc działają w niej klasy Tailwinda. rowExpandable wybiera wiersze, a expanded i wds-expanded-change przechowują otwarte.
• Wirtualizacja: virtual renderuje tylko widoczne wiersze (przykład ma 10 000) pod przyklejonym nagłówkiem, w obszarze o wysokości --wds-data-table-height; wiersze są mierzone, więc działa też z grupami i rozwiniętymi wierszami.

Nowy komponent File Upload: strefa upuszczania i lista plików.

• Strefa upuszczania jest przyciskiem: klik albo Enter/Spacja otwiera wybór plików, działa też przeciąganie. Treść strefy można podmienić w slocie.
• accept, max-size i max-files filtrują pliki przy dodawaniu, a odrzucone trafiają do zdarzenia wds-reject z powodem (type, size albo count).
• Lista pokazuje miniaturę obrazu (przy obrazie, którego nie da się wyświetlić, ikonę pliku), nazwę, rozmiar i przycisk usuwania.
• Samo wysyłanie zostaje po stronie aplikacji: setFileStatus(file, { progress }) pokazuje pasek postępu, a { error } błąd pod plikiem.
• W formularzu pliki trafiają do FormData pod name; required i reset działają jak w natywnym polu plików.
• Angular Forms: WdsFileUploadValueAccessor (template-driven i reactive) oraz WdsFileUploadField (signal forms), z wartością File[].

Atrybut presets w Date Picker dodaje gotowe zakresy obok kalendarza.

• presets="today last-7-days this-month last-month": wbudowane klucze od today do year-to-date, liczone od dzisiaj; tydzień uwzględnia first-day.
• Jako właściwość presets przyjmuje też własne pozycje: { label, start, end } dla zakresu albo { label, value } dla dnia, wymieszane z kluczami (typy WdsDatePickerPreset i WdsDatePickerPresetKey).
• Na komputerze zakresy są kolumną przed kalendarzem, a na telefonie przewijanym wierszem nad nim.
• Bieżący zakres jest podświetlony (aria-pressed), a zakresy spoza min/max są wyłączone. Wybór ustawia wartość, wysyła wds-change i zamyka kalendarz.
• W trybie single widać tylko zakresy jednodniowe. Z kalendarza Shift+Tab dochodzi do zakresów, a ↑/↓ przechodzą między nimi.

Nowy komponent Navigation Menu: nawigacja po stronach z rozwijanymi panelami linków (wzorzec disclosure navigation, a nie menu poleceń).

• wds-navigation-menu-item z treścią to przycisk z panelem, a z href bez treści zwykły link; active oznacza bieżącą stronę (aria-current="page").
• wds-navigation-menu-link to link w panelu: tytuł, description i ikona w slocie icon.
• Mysz: panel otwiera się po 200 ms najechania (open-delay), przy otwartym panelu inna pozycja przełącza po 100 ms, po zjechaniu panel zamyka się po 300 ms (close-delay); klik otwiera i zamyka panel, klik w link zamyka menu.
• Klawiatura: Tab wchodzi z przycisku do otwartego panelu, ↓ otwiera panel z fokusem na pierwszym linku, ↑/↓ przechodzą między linkami, ←/→ oraz Home/End między pozycjami paska, Escape zamyka panel i wraca na przycisk.
• Szeroki panel, który nie mieści się w oknie, przesuwa się pod sąsiednią pozycję; kursor przechodzący nad nią w drodze do panelu go nie przełącza.

Nowy komponent Menubar: poziomy pasek menu jak w aplikacjach (File, Edit, View…), zgodny ze wzorcem WAI-ARIA menubar.

• Każde menu to zwykły Dropdown z nowym wds-menubar-trigger w slocie trigger, więc pozycje, podmenu, checkboxy, radio, skróty i wyszukiwanie po pierwszej literze działają od razu.
• Pasek to jedno miejsce w kolejności Tab; ←/→ przechodzą między menu, a przy otwartym menu otwierają sąsiednie z fokusem na pierwszej pozycji. Home/End i pierwsza litera nazwy też działają; RTL odwraca strzałki.
• Przy otwartym menu najechanie myszą na inny trigger przełącza menu.
• disabled na wds-dropdown wyszarza trigger i blokuje otwieranie, ale trigger zostaje osiągalny strzałkami.
• Import @wds/core/menubar rejestruje też elementy dropdowna.

Nowy komponent Table: zwykła tabela w stylu WDS, bez logiki Data Table.

• wds-table opakowuje natywny <table>, więc caption, colspan i th scope działają jak zwykle.
• Opcje: size="sm", striped, bordered i sticky-header (z maksymalną wysokością, np. max-h-72). Wiersz z aria-selected="true" ma tło zaznaczenia.
• Klasy Tailwinda na komórkach (np. text-end tabular-nums) wygrywają ze stylami tabeli.
• Przewijana tabela bez elementów z fokusem staje się regionem z fokusem, nazwanym tekstem caption, żeby dało się ją przewinąć klawiaturą.

Nowy komponent Number Field: pole liczbowe z przyciskami −/+.

• Wartość to liczba albo null, gdy pole jest puste. min/max/step; przyciski powtarzają krok przy przytrzymaniu.
• Klawiatura: strzałki, Page Up/Down (dziesięć kroków), Home/End (min/max), Enter wysyła formularz.
• format-options przyjmuje opcje Intl.NumberFormat (waluta, procent, jednostka), a pole pokazuje i czyta liczby w języku najbliższego lang (w niemieckim 1.234,5 € to 1234,5).
• Wartość spoza zakresu jest przycinana przy wyjściu z pola. Walidacja required/min/max/step z komunikatami przeglądarki.
• Działa z wds-field. Angular Forms: WdsNumberFieldValueAccessor i WdsNumberFieldField.

Nowy komponent Timeline: lista zdarzeń w czasie (historia, changelog, status zamówienia).

• value oznacza postęp: wcześniejsze elementy są ukończone, a element o numerze value jest bieżący (aria-current="step").
• Ikony w kole (slot icon), układ poziomy (orientation="horizontal") i kolor znacznika na element (--wds-timeline-indicator-color).
• Znacznik stoi na środku pierwszego wiersza treści, także gdy tytuł ma awatar.
• Przykład „Metric details” w Sheet używa teraz Timeline.

Nowy komponent Stepper: postęp w sekwencji kroków (kreator, zamówienie) i treść bieżącego kroku.

• wds-stepper z wds-stepper-item (kroki) i wds-stepper-panel (treść kroku). value to bieżący krok liczony od 1; wartość większa niż liczba kroków oznacza wszystkie jako ukończone.
• Układ poziomy i pionowy (orientation), wariant paska postępu (variant="bar"), linear (tylko ukończone kroki i następny), readonly; metody next(), previous(), goTo().
• Krok ma heading, description, completed, disabled, loading i ikonę w slocie icon; czytnik słyszy np. „Step 2 of 4, current: Shipping”.
• Przykład „Steps” w Progress używa teraz Steppera.

Nowy komponent Scroll Area: natywne przewijanie z własnymi paskami nałożonymi na treść.

• orientation (vertical, horizontal, both), type (hover, scroll, auto, always), scroll-hide-delay, fade na krawędziach i gutter.
• Suwak można przeciągać, a klik w tor przewija; działa RTL. Obszar dostaje fokus z klawiatury tylko wtedy, gdy się przewija i nie ma w nim innych elementów z fokusem.

• Tooltip: dymek na najechanie i fokus z klawiatury, z opóźnieniem 200 ms; zamyka się po zjechaniu (z chwilą na przejście na dymek), kliknięciu, utracie fokusu i Escape. Tekst dymka trafia do triggera jako opis dla czytników. Dymki w zwiniętym sidebarze używają teraz Tooltipa.
• Popover: niemodalny panel z treścią otwierany przyciskiem (heading, description, side/align/offset, --wds-popover-width); Escape wraca do triggera, klik poza i wyjście fokusem zamykają.
• Hover Card: podgląd treści za linkiem (open-delay 500 ms, close-delay 300 ms); fokus z klawiatury otwiera od razu, a Tab wchodzi do karty.

Nowy komponent Alert Dialog: modalne okno, które wymaga decyzji.

• Bez przycisku zamknięcia, kliknięcie w tło nie zamyka, Escape działa jak Anuluj, a fokus startuje na pierwszym przycisku.
• size="sm" i slot media na ikonę lub obraz. Angular: WdsAlertDialogService.

• Separator: linia pozioma albo pionowa, z tekstem lub ikoną w środku; decorative ukrywa ją przed czytnikami.
• Skeleton: zastępnik ładującej się treści; shape="circle", animacja pulse, wave albo bez animacji.
• Toggle: przycisk dwustanowy (pressed, warianty i rozmiary).
• Toggle Group: grupa przełączników z wyborem jednego albo wielu (type), także jako kontrolka segmentowa (required); strzałki, Home/End i RTL.

• Icon ma warianty kafelka: tile="outline|elevated|frame|soft|solid|stack" i shape="circle"; bez name kafelek pokazuje swoją treść (np. inicjały).
• Item w rozmiarze size="xs" to jednowierszowy znacznik z ikoną.

• Nowa strona Changelog (Guide → Changelog): wpisy od najnowszego w zwiniętym akordeonie; każda sekcja ma znacznik Nowy, Ulepszenie albo Poprawka, a sekcje wpisu (nagłówek ze znacznikiem) rozwijają się w zagnieżdżonym akordeonie.
• Klik w datę w spisie treści albo link z #data rozwija wpis i przewija do niego.
• Jeden styl tekstu na stronach komponentów, Frameworks, Changelog, Welcome i Roadmap: akapity, nagłówki sekcji, linki, kod w tekście i listy. Podglądy przykładów zostają bez zmian.
• Tabela pakietów na stronie Installation używa Table.

• Sheet z contained: pole z autofocus nie przewija już przodka z overflow: hidden, więc treść nie skacze przy otwieraniu. wds-frame-panel ma overflow: clip.
• Menubar: usunięty zbędny pasek przewijania po prawej stronie paska; pasek ma 36 px wysokości bez przepełnienia.
• Dialog, Drawer i Sheet: pole z autofocus w treści dostaje fokus po otwarciu (wcześniej trafiał on na przycisk zamknięcia).
• Spis treści „On this page” podświetla na starcie pierwszą sekcję także na stronach, których komponenty renderują się z opóźnieniem.
• Slider: wrapper Angulara nie ma już fałszywego outputu type.
• Slider: przykład „With input” używa Number Field z jednostką procent.
• File Upload: rozmiary poniżej 1 kB jako bajty (259 B).
• Signal forms: required() nie traktuje pustej tablicy jako pustej wartości; przykład File Upload sprawdza liczbę plików przez validate() i requiredError.

• Avatar: obraz z zastępczą treścią (np. inicjały) do czasu załadowania i po błędzie; rozmiary sm/default/lg, wds-avatar-badge, wds-avatar-group z nakładaniem i wds-avatar-group-count.
• Progress: pasek postępu z etykietą, show-value i value-text; bez value pokazuje stan nieokreślony. Procent w języku strony.

Nowy komponent Slider: wybór wartości albo zakresu przeciąganiem.

• Jeden kciuk (value) albo kilka (values, np. zakres); kciuki się nie mijają. min/max/step, układ pionowy.
• wds-input w trakcie przeciągania i wds-change po puszczeniu; formatValue ustawia tekst dla czytników (np. jednostki).
• Klawiatura: strzałki (z RTL), Page Up/Down, Home/End. Angular Forms: WdsSliderValueAccessor i WdsSliderField.

Nowy komponent Sheet: panel wysuwany od krawędzi ekranu.

• side (top, right, bottom, left), inset (pływający panel z zaokrągleniem), divided (kreski pod nagłówkiem i nad stopką).
• modal i contained (niemodalny panel wewnątrz wybranego kontenera). Angular: WdsSheetService.

• Time Picker: pole godziny, którą można wpisać (14:30, 1430, 2:30 pm) albo wybrać w kolumnach; min/max, minute-step, seconds, hour-cycle, walidacja.
• Date Picker: time dodaje kolumny godzin obok kalendarza (wartość jak w datetime-local); panel otwiera kalendarz na telefonie w panelu przy dolnej krawędzi ekranu.
• Calendar: dayInfo dodaje do dnia tekst, kropkę i opis (np. ceny noclegów).

• Flow: plansza z węzłami i krawędziami (diagramy, drzewa metryk), zbudowana na rdzeniu React Flow. Przesuwanie i zoom, przeciąganie, łączenie, etykiety krawędzi, zaznaczanie, menu kontekstowe.
• Przykład „Default” pokazuje proces z kartami kroków, rozgałęzieniami Yes/No i animowaną ścieżką.

Gantt w nowym wyglądzie i z wieloma nowymi funkcjami.

• Nawigacja po okresach, nagłówek z numerem tygodnia, dzisiejszy dzień jako pastylka i kolumna, kreskowane weekendy, paski z kreską postępu, plan jako obrys.
• Skala day z godzinami, strefa czasowa (time-zone), nieskończone przewijanie, zoom, min/max.
• Powtarzające się zadania (RRULE), zaznaczanie wielu pasków, Delete, menu pasków i wierszy, przenoszenie wierszy, własny wygląd pasków i etykiet, RTL.

• Nowy Icon (wds-icon) z zestawem ikon WDS; własne ikony przez registerIcons(). Z label ikona ma nazwę dla czytników, bez niej jest ukryta.
• Strona Foundations → Iconography: wyszukiwanie, filtr kategorii i kod każdej ikony dla każdego frameworka.
• Item: nowy układ kafelka (layout="tile").

• Pakiet @wds/react: wrappery wszystkich komponentów, jeden punkt wejścia na komponent (np. @wds/react/button); zdarzenia jako propsy (onWdsChange).
• Zakładka React w przykładach używa wrapperów. Nowa strona Frameworks → Next.js.

• Sidebar: 6 przykładów w trzech frameworkach (Default, Variants, Collapsible group, Menu skeleton, Second panel, Controlled).

• Nowa sekcja Frameworks: Installation oraz strony Angular, React, HTML i Spring Boot z instrukcją krok po kroku.

• Chart: 13 przykładów w trzech frameworkach (słupkowe, liniowe, warstwowe, kołowe, radarowe, własne kolory, interaktywny).
• Data Table: przykłady zaznaczania, filtrowania, własnych komórek, danych z serwera i dodawania wierszy.
• Dialog i Tabs: nowe przykłady (m.in. „Confirm”, „Service”, ręczna aktywacja zakładek).

• Strony komponentów w nowym formacie: przykłady z kodem dla Angulara, HTML i Reacta, sekcja dostępności i tabela API.
• Sekcja „Forms” (Signal forms, Template-driven, Reactive forms) dla kontrolek formularzy: m.in. Input, Textarea, Checkbox, Switch, Radio, Select, Combobox, Calendar i Date Picker.
• Toast i Drawer: wszystkie przykłady w trzech frameworkach.

• Signal forms: kontrolki pokazują błąd dopiero po dotknięciu pola albo wysłaniu formularza.
• Toast: toast() bez wskazanego toastera trafia do toastera bez id.
• Pagination: wyłączony albo ładujący się wds-button nie przepuszcza kliknięcia.