Podrobný seznam změn

Tato stránka nese detailní popis změn — co se přesně změnilo, jak se komponenta chová po úpravě, proč k opravě došlo a co je potřeba udělat při aktualizaci. Stručný přehled na jeden pohled najdete na stránce Seznam změn.

v4.7.2 ​

Balíčky @gov-design-system-ce/components, styles, templates, utils, react, angular a vue jsou posunuty ze 4.7.1 na 4.7.2; icons a fonts jsou posunuty jen verzí, bez změny obsahu. Změny React balíčku jsou popsány v samostatné části na konci.

Breaking changes a migrace ​

• Breakpointy – nové hodnoty sm, lg a xl (viditelná změna): Hodnoty v sass/variables/_mq.scss byly historické: sm 480 px byl nejnižší ze všech porovnávaných systémů (Tailwind 640, Bootstrap 576, MUI 600) a pocházel z doby „velkého telefonu na šířku“, zatímco dnešní telefony mají na výšku 390–430 px, takže se sm choval jako breakpoint malého tabletu. Nově platí sm 37em (592 px), lg 62em (992 px) a xl 80em (1280 px). md zůstává 48em (768 px) – je společný s Tailwindem i Bootstrapem, odpovídá iPadu na výšku a visí na něm většina responzivních pravidel (hlavička, navigace, patička, stepper, záložky, tabulky, gov-hide--*). Všechny hodnoty zůstávají v celých em, takže breakpointy dál reagují na velikost písma prohlížeče (WCAG 1.4.4). Dopad: veřejné API se nemění – gov-spacer breakpoint="sm", col-span-lg, mq($from: md) a ostatní si ponechávají názvy, mění se šířka za nimi. Chování se liší jen ve třech pásmech: 480–591 px (největší dopad: osm tokenů --font-size-display-* / --font-size-headline-* se přepíná na sm, takže nadpisy jsou o stupeň menší, a v šablonách se tam přepíná celá škála --templates-margin-* a --templates-layout-page-limit-max), 992–1023 px (lg platí dřív, např. desktopové rozložení hlavičky) a 1200–1279 px (xl platí později, týká se jen .gov-hide--xl). Mimo tato pásma je vygenerované CSS beze změny. Markup upravovat nemusíte, rozvržení v uvedených pásmech si ale překontrolujte. Breakpointy mají nově jedinou definici v SCSS (kopie v přibalené knihovně sass-mq je odstraněna) a JavaScriptové zrcadlo v utils, jejichž shodu hlídá kontrola breakpoints:check.

Změny ​

• Timeline (gov-timeline, gov-timeline-category, gov-timeline-step, gov-timeline-card) – nová komponenta: Číslovaný, větvený seznam kroků rozdělený do kategorií, volitelně se dvěma pruhy („Musí“ / „Může“, popisky jsou volný text), sdílenými kroky „N/1“ / „N/2“, počátečním a koncovým uzávěrem a bočním obsahem, který se pod md mění na gov-accordion; podle varianty Timeline z Figmy. Autor zapisuje deklarativně kategorie, kroky a karty, čísla kroků, řádky mřížky, úseky osy, id sekcí, odkazy navigace i skrytou předponu kroku pro čtečky („Krok 3:“) dopočítá gov-timeline sama a přepočítá je při přidání, odebrání, přesunu potomků nebo změně jejich propů (funguje i s rekonciliací React / Vue / Angular). Propy columns (2 | 1), numbered, nav-title, accessible-nav-label, accessible-step-label, no-nav, headline-tag (h2–h6), action-align (left | right); kategorie headline, nav-label, label-left, label-right, spine-end, cap, marker (a slot marker); krok side; karta headline, href, target se sloty icon, výchozím a footer. Neplatné hodnoty zalogují varování a použije se výchozí hodnota. Neprobublávající událost gov-change ({component, ref, currentId, trigger: "scroll" | "click"}) při změně aktuální sekce a metoda refresh(). Komponenta nemá vlastní vnější odsazení (patří layoutu stránky, např. gov-container); na jiném pozadí než stránky nastavte --gov-timeline-surface. Bezpečná pro SSR. Styly jsou v components.css i samostatně v @gov-design-system-ce/styles/components/gov-timeline.css, proxy komponenty pro Angular a Vue a wrappery pro React jsou součástí balíčků. Dokumentace: Timeline.
• Breakpointy – nová stránka dokumentace: Breakpointy dosud nebyly na webu design systému nikde popsané. Stránka Breakpointy uvádí tabulku hodnot (název, em, px při 16 px, pásmo, typické zařízení), proč jsou v em, jak je použít v SCSS (mq()), v komponentách (gov-spacer, col-span-*, gov-hide--*) a v JavaScriptu (matchesFrom místo window.innerWidth), že gov-card, gov-tile, gov-empty a gov-error-code reagují na šířku kontejneru, ne okna, a doporučené šířky rámců ve Figmě. Tabulka hodnot je kontrolovaná proti kódu. Stránka Pravidla – Responzivní webdesign už neuvádí neexistující „Extra small“, ale vysvětluje 320 px jako minimum WCAG 1.4.10 Reflow.
• Utils – breakpoints.utils: Nový modul BREAKPOINTS_EM, breakpointPx(), mediaQueryFrom() / mediaQueryUntil(), matchesFrom() a onBreakpointChange(). matchesFrom vyhodnocuje přesně tu media query, kterou kompilují styly, takže skript a CSS se shodnou i při zvětšeném písmu prohlížeče; onBreakpointChange se volá jen při skutečném překročení breakpointu a vrací funkci pro odhlášení. Bez matchMedia (SSR) se moduly chovají jako nejužší pásmo a nevyhazují chybu.
• Storybook: Nástrojová lišta nabízí jednu předvolbu šířky pro každý breakpoint (none 390 px, sm 680 px, md 834 px, lg 1150 px, xl 1440 px); nová stránka Principy/Breakpointy přebírá text z dokumentace a hodnoty bere přímo z BREAKPOINTS_EM. Příběhy vykreslené v dokumentaci v iframe (dnes Komponenty/Timeline) přebírají světlý / tmavý režim stránky a reagují na ovládací prvky.

Opravy ​

• Dialog (gov-dialog) – stránka už neposkočí do strany a dialogy si nepřebírají zámek posunu: Otevření dialogu dávalo na <body> overflow: hidden; s klasickým posuvníkem zabírajícím místo (Windows, macOS se „vždy zobrazit posuvníky“) posuvník zmizel a obsah se roztáhl do jeho šířky – při otevření skok o 16 px doprava a při zavření zpět (hlášeno z NKOD). Zámek posunu nově změří šířku posuvníku a o stejnou hodnotu zvětší pravé odsazení <body>; krátké stránky a překryvné posuvníky dostanou 0. Během zámku nese <html> proměnnou --gov-scroll-lock-gap, kterou mohou použít prvky s position: fixed. Zámek se počítá po dialozích: dosud každý zavřený dialog při překreslení zámek zrušil, takže s více dialogy na stránce zavřený dialog odemkl stránku pod otevřeným. Dialog navíc při každém otevření přidával nový posluchač keydown a nikdy ho neodebral, takže po N otevřeních jeden Escape vyvolal gov-close N-krát a zavřel všechny dialogy; posluchač je nově jediný, odebírá se při zavření a na Escape / Tab reaguje jen horní otevřený dialog. Past fokusu, návrat fokusu, veřejné API i třída body-fixed zůstávají.
• Dialog (gov-dialog) – fokusový rámeček kolem viditelného okna: Fokus dostává nativní <dialog>, což je průhledný obal přes celou výšku kolem menšího panelu .gov-dialog__inner, takže rámeček obtahoval prázdné místo nad a pod oknem. Rámeček se nově kreslí uvnitř panelu se stejnou barvou, šířkou a zaoblením jako okno a zůstane vidět i na mobilu, kde panel zabírá celou obrazovku. Jen styly.
• Formulářové popisky – klik aktivuje pole a pole má přístupný název: Styly dávaly každému popisku kurzor ruky, ale gov-form-input (včetně textarea, hesla, našeptávače a multiselectu), gov-form-select, gov-form-range a gov-form-file popisku nepředávaly své id, takže gov-form-label vykreslil <label> bez for (pokud autor nezadal identifier ručně). Klik na popisek nic nedělal a nativní pole nemělo přístupný název (WCAG 1.3.1 / 4.1.2). Pole nově popisku předají identifier nebo vygenerované id, stejně jako už dříve checkbox, radio a switch. Popisek sdílený více poli v jednom gov-form-control (např. rozsah dat) a legend zůstávají nepropojené, ručně zadaný identifier má vždy přednost. Kurzor ruky má jen propojený popisek (.gov-form-label__label[for]); zakázaná pole na klik nereagují.
• Hlavička (šablona) – přepnutí navigace na lg: Skript hlavní navigace porovnával window.innerWidth s napevno zapsanými 1024 px, zatímco styly přepínají na breakpointu v em; při zvětšeném písmu prohlížeče (a po posunu lg na 992 px v pásmu 992–1023 px) skript a styly nesouhlasily a hlavička mohla zůstat úplně bez navigace. Skript nově rozhoduje přes matchesFrom("lg") z @gov-design-system-ce/utils. Obsluha změny velikosti okna dosud reagovala jen na první událost a další zahodila, takže při tažení okna přes hranici zůstal stav z jeho začátku; nově proběhne jednou s konečnou šířkou. Týká se balíčku templates i šablony ve Storybooku.
• npm balíčky – obsah tarballů: Nová kontrola publikace (npm publish --dry-run nad všemi balíčky) odhalila chyby, které byly vidět až v publikovaném balíčku. @gov-design-system-ce/components a @gov-design-system-ce/angular nově obsahují README (na npm u 4.7.1 chybělo). components už neobsahuje zkompilovaný stencil.config s absolutní cestou build stroje ani zbytky lokálního buildu (dist/dist/**). templates při buildu nepřibalí zastaralé styly z dřívějších lokálních běhů. Sourcemapy react, vue a templates mají vložené zdrojové kódy, takže je bundler i devtools dokážou načíst (webpack source-map-loader dosud u každé hlásil varování). Bez změny komponent, API i stylů.
• Dokumentační web – formulář Podpora a zpětná vazba: Při výběru více příloh najednou mohla část nahrávání zůstat na 0 % a odeslání trvale hlásilo, ať uživatel počká na přílohy; pomohlo jen znovunačtení stránky, které vyplněné hlášení zahodilo. Nahrávání nově běží ve frontě (nejvýš 3 současně), nahrávání bez jakéhokoli postupu 60 s skončí chybou, rozpracovanou přílohu lze odebrat a dokončená příloha ukazuje 100 %. Opětovně vybraný stejný soubor se nenahraje dvakrát, neúspěšný se nahraje znovu. Výsledky nahrávání ohlašuje skrytá oblast role="status". Formulář se odešle s přílohami, které se nahrály. Komponenty gov-form-file a gov-attachments beze změny.

Přístupnost ​

• Stepper (gov-stepper-item) – obsah kroku pojmenovaný nadpisem: Obsah kroku měl role="tabpanel", ačkoli statický seznam kroků nemá žádný tab, a jeho aria-labelledby mířilo na celou položku, takže podle algoritmu přístupného názvu se panel jmenoval celým textem kroku včetně vlastního obsahu a čtečky ho četly dvakrát. Nadpis kroku dostal stabilní id (<identifier>-headline), panel má role="group" a aria-labelledby míří na nadpis; bez slotu headline nemá panel roli ani název. Id kroku a identifier zůstávají, bez změny propů, událostí i stylů.
• Formulářové popisky – vstupní pole, select, range a nahrávání souborů mají přístupný název podle svého popisku i bez ručně zadaného identifier (viz Opravy).
• Timeline – jeden pojmenovaný landmark <nav> pro každou variantu navigace, aria-current="location", role="list" / listitem, dekorativní body a značky s aria-hidden, po kliknutí v navigaci se fokus přesune na sekci, respektuje prefers-reduced-motion; v režimu vysokého kontrastu (forced-colors: active) má osa, čísla kroků i aktuální odkaz systémové barvy, takže nezmizí.

React wrapper ​

Balíček @gov-design-system-ce/react je posunut ze 4.7.1 na 4.7.2 souběžně s ostatními balíčky.

Změny ​

• GovTimeline, GovTimelineCategory, GovTimelineStep, GovTimelineCard – nové wrappery: Na rozdíl od bezstavových wrapperů vykreslují samotné web-komponenty (timeline rozvrhuje potomky za běhu), proto je nutná registrace přes defineCustomElements(); při SSR ji proveďte po hydrataci. GovTimeline ve vývojovém režimu varuje, pokud komponenta registrovaná není. ref je element gov-timeline (metoda refresh()), onGovChange dostává událost gov-change, id, style, aria-* a data-* se předávají.

Opravy ​

• GovPagination – onPage dostává zvolenou stránku a komponenta sleduje current / total: Obsluha kliknutí volala onPage se stavem z předchozího vykreslení, takže klik na „2“ na první stránce ohlásil stránku 1 – řízená aplikace zůstala na stránce 1, zatímco komponenta zvýraznila „2“, a při každém kliknutí byla o krok pozadu. Stav se navíc počítal jen jednou, takže změna current z aplikace (např. reset filtru na první stránku, historie prohlížeče) nebo změna total se neprojevila. onPage nově dostává nový stav a komponenta se přepočítá při změně total, current, pageSize nebo maxPages. Web-komponenta ani varianta link chybou netrpěly; obcházení (např. přes pnpm patch) už není potřeba.
• GovFormControl a GovFormCheckbox: Popisek bez identifier vykreslil <label> bez htmlFor, takže pole neaktivoval a nedal mu přístupný název; GovFormControl ho nově propojí s jediným textovým polem (input mimo checkbox / radio / hidden, select, textarea), ručně zadaný identifier má přednost a popisek více polí či legend zůstávají nepropojené. GovFormCheckbox předával jen aria-disabled, takže „zakázaný“ checkbox šlo zaškrtnout; nově nastaví disabled na nativní input a data-disabled na hostitele jako GovFormSwitch a GovFormRadio.
• GovStepper a GovWizard – size se předává položkám: Položky se hledaly podle child.type.name, které minifikátor přejmenuje (u forwardRef neexistuje vůbec), takže se size v produkci ztrácel; nově se položky porovnávají přímo. GovWizard má role="list", kterou jeho položky listitem vyžadují.
• Stepper, wizard, toast, tooltip, drobečková navigace, dropdown, uživatelská navigace, nahrávání souborů, našeptávač a multiselect – soulad s web-komponentami: Wrappery zapisovaly atributy data-color, data-position, data-hydrated apod., které styly nečtou, takže stepper neměl barvy, toast pozici ani barvu a záložní styly před hydratací platily trvale; nově zapisují stejné atributy jako web-komponenty. ID prvků se generují přes useElementId() místo Math.random(), takže vazby aria-controls / aria-labelledby přežijí SSR a hydrataci. GovAttachmentsItem vykresloval slot="[object Object]", takže se velikost souboru v GovFormFile nezobrazila. GovFormFile při chybějícím seznamu souborů volal new FileList(), což v každém prohlížeči vyhodí chybu; bez multiple nově výběr nahradí předchozí soubor a přijímá znovu .docx, image/svg+xml a soubory bez MIME typu. GovFormAutocomplete a GovFormMultiSelect předávají required a invalid (dosud chybělo aria-invalid i aria-required) a našeptávač už nezahodí vyhledávání zadané během běžícího požadavku ani nezobrazí výsledky zastaralého dotazu. GovUserNavigation se zavře i po klepnutí mimo na dotykovém zařízení a výchozí popisek tlačítka je „Otevřít menu“. Šest modulů (stav našeptávače, hooky tooltipu, GovUserNavigation, useClickOutside) doplnilo direktivu 'use client' pro Next.js App Router.

Přístupnost ​

• GovStepperItem – obsah kroku má role="group" pojmenovanou nadpisem kroku, stejně jako web-komponenta.
• GovFormAutocomplete – aria-hidden a aria-expanded seznamu návrhů odpovídají skutečnosti (dosud byl seznam ohlašovaný zavřený a skrytý otevřený); GovFormMultiSelect – seznam vybraných položek je obyčejný seznam štítků, ne listbox; GovDropdown – spouštěcí tlačítko má aria-haspopup a aria-expanded.

v4.7.1 ​

Balíčky @gov-design-system-ce/components, styles, icons, templates, react, angular a vue jsou posunuty ze 4.7.0 na 4.7.1; fonts a utils jsou posunuty jen verzí, bez změny obsahu. Změny React balíčku jsou popsány v samostatné části na konci.

Breaking changes a migrace ​

• Wizard (gov-wizard-item) – odstraněn prop disabled: Prop byl od začátku implementovaný jen napůl. Ve stylech (gov-wizard-item.scss) pro něj neexistovalo jediné pravidlo, takže zakázaná položka vypadala úplně stejně jako aktivní, a v šabloně se předával jen uvnitř větve pro sbalitelnou položku – u nesbalitelné položky (<div>) neměl žádný efekt. Jediné, co skutečně dělal, bylo nativní disabled na spouštěcím <button>, které položku vyřadilo z pořadí tabulátoru a znemožnilo její rozbalení; klávesnicí se na krok nedalo dostat a čtečka ho v režimu čtení ohlásila jen jako „nedostupný“ bez jakéhokoli vysvětlení. Stav navíc nemá podobu v designu (v návrhu komponenty žádný zakázaný stav není) a ani sourozenecká komponenta gov-stepper ho nezná. Místo dodělávání vizuálu, který nikdo nenavrhl, je prop odstraněn: průvodce je seznam kroků (role="list" / role="listitem"), ne sada ovládacích prvků, a „krok, který ještě není na řadě“ už vyjadřuje pořadové číslo ve slotu prefix spolu s barvou (color). Dopad: <gov-wizard-item collapsible disabled> se nově vykreslí bez atributů disabled a aria-disabled – krok, který dosud rozbalit nešel, se rozbalit dá. Pokud obsah kroku zobrazovat nechcete, položku neoznačujte jako collapsible; tím zůstane statická a její obsah zůstane skrytý (pokud nenastavíte is-expanded). Žádná jiná změna chování ani vzhledu wizardu. Wrappery: proxy komponenty pro Angular a Vue se generují ze Stencilu, takže vstup disabled ztrácejí. V Angularu vazbu [disabled] na gov-wizard-item odstraňte (bez CUSTOM_ELEMENTS_SCHEMA může šablona s neznámou vlastností skončit chybou kompilace), ve Vue se hodnota nově ignoruje. React GovWizardItem prop disabled také ztrácí (z typu GovWizardItemProps i z vykresleného <button>), takže zápis <GovWizardItem disabled> v TypeScriptu nově hlásí chybu.
• Informační lišta (gov-infobar) – odstraněna hodnota secondary propu color: Výčet InfobarColors (gov-infobar/constants.ts) obsahoval i secondary, takže ji kontrakt propu color, validace i generovaná tabulka propů uváděly jako platnou, ačkoli pro ni neexistovalo žádné pravidlo ve stylech: gov-infobar.scss generuje barevné varianty jen z barev toastu, mezi kterými secondary není, a lišta se vykreslila jako bílý pruh. Hodnota je z výčtu odstraněna a typ propu se zužuje na primary | neutral | error | success | warning. Dopad: vykreslení se nemění, stylovaná varianta secondary nikdy neexistovala. Zápis color="secondary" nově zaloguje varování o neplatné hodnotě. Pro TypeScript jde o zúžení typu, takže color="secondary" v React GovInfobar (typ propu se přebírá z JSX.GovInfobar), ve Stencil JSX nebo v typově kontrolované šabloně Angularu skončí chybou kompilace. Hodnotu nahraďte jednou z podporovaných. Wrappery vlastní změnu nemají, typ se zužuje přes závislost na @gov-design-system-ce/components.
• Skeleton (gov-skeleton, React GovSkeleton) – bez přístupného názvu je nově dekorativní: Komponenta dosud napevno nastavovala každé instanci role="progressbar", tabindex="0" a aria-busy / aria-valuemin / aria-valuemax, ale přístupný název nedodávala, takže každý skeleton byl nepojmenovaný progressbar a samostatná zastávka v pořadí tabulátoru. Nově dostane role="progressbar", aria-busy="true", aria-valuemin="0", aria-valuemax="100" a tabindex="0" jen skeleton s neprázdným aria-label nebo aria-labelledby; bez názvu se vykreslí s aria-hidden="true" a bez těchto atributů. Stejně se nově chová i React GovSkeleton, který je samostatnou implementací. Samotná změna přístupnosti nemění propy ani vzhled (opravy stylů skeletonu jsou v části Opravy, předávání onClick v Reactu v části React wrapper). Dopad: pojmenujte jeden skeleton v každé načítané oblasti (např. aria-label="Načítání výsledků vyhledávání") a ostatní nechte bez názvu. Testy, které hledají skeleton podle role (getByRole('progressbar')), a pořadí fokusu, které skeletony zahrnovalo, je potřeba upravit. Vnitřní načítací řádek gov-form-autocomplete (a tím i gov-form-multi-select) je nově skrytý před asistivními technologiemi. Angular a Vue změnu přebírají za běhu přes závislost na @gov-design-system-ce/components.
• Barvy – modrá paleta primary sladěna s brandbookem JVS (viditelná změna): Primitiva primary odpovídají webové paletě JVS. Oproti publikované 4.7.0 se mění hodnoty kroků 700 až 1050, kroky 50 až 600 zůstávají (primary-600 = JVS Modrá #00469B). Část sémantických tokenů a tokenů šablon se zároveň posunula o krok níž. Názvy tokenů se nemění, žádný token nepřibyl ani neubyl. Dopad: ve světlém režimu mají odkazy a texty v primární barvě (--text-primary-color) JVS Modrou #00469B a hover/active primárních tlačítek jsou tmavší; v tmavém režimu se mění pozadí primárních ploch, obrysová primární tlačítka a pozadí stránky; v šablonách patička a navigace. Kdo používá --color-primary-700 až --color-primary-1050 přímo, dostane nové hodnoty. Stránka Barvy v dokumentaci nově uvádí JVS Tmavě modrou u kroku Primary 900 (dříve 1000). Po aktualizaci si překontrolujte dotčené obrazovky. Přehled změn oproti 4.7.0:
  • --color-primary-700: #003E8A → #0E3578
  • --color-primary-800: #06397E → #102657
  • --color-primary-900: #0C3372 → #0C1838 (JVS Tmavě modrá)
  • --color-primary-950: #0A2450 → #091129
  • --color-primary-1000: #0C1838 → #060B1B
  • --color-primary-1050: #03070F → #04060E
  • světlý režim: --text-primary-color primary-700 → primary-600 (#003E8A → #00469B); --interactive-timer-primary-solid primary-800 → primary-700 (#06397E → #0E3578); se stejným krokem, ale novou hodnotou --button-solid-primary-hover (primary-700, #003E8A → #0E3578) a --button-solid-primary-active (primary-800, #06397E → #102657)
  • tmavý režim: --background-primary-subtle primary-950 → primary-900 (#0A2450 → #0C1838); --background-primary-subtlest primary-900 → primary-800 (#0C3372 → #102657); --button-outlined-primary primary-800 → primary-700 (#06397E → #0E3578); --button-outlined-primary-active primary-900 → primary-800 (#0C3372 → #102657); --button-outlined-primary-hover primary-950 → primary-900 (#0A2450 → #0C1838); --interactive-timer-primary-solid a --interactive-timer-primary-subtle primary-800 → primary-700 (#06397E → #0E3578); se stejným krokem, ale novou hodnotou --background-page (primary-1050, #03070F → #04060E) a --button-solid-primary-active (primary-700, #003E8A → #0E3578)
  • šablony (templates.css v balíčku styles a tokeny v balíčku templates): světlý --component-nav-text-link primary-900 → primary-800 (#0C3372 → #102657), --component-nav-text-primary primary-800 → primary-700 (#06397E → #0E3578), --component-footer-background primary-900 → primary-800 (#0C3372 → #102657) a --component-footer-separator primary-600 → primary-500 (#00469B → #3771B8); tmavý --component-footer-background primary-950 → primary-900 (#0A2450 → #0C1838) a --component-footer-separator primary-600 → primary-500
  • Banner (gov-banner mimo velikost xl): koncová barva přechodu v pozadí (primary-900) #0C3372 → #0C1838
• Hlavička (šablona) – desktopové rozložení až od lg (1024 px), viditelná změna mezi 768 a 1023 px: Hlavička v templates.css si nově drží mobilní rozložení s hamburgerem až do šířky 1023 px; řádková navigace první úrovně, lišta akcí (__action), oddělovač a desktopové vyhledávání nastupují až od 1024 px. V 4.7.0 se přepínalo na breakpointu md (768 px). Při šířce tabletu se řádek navigace spolehlivě nevešel: položky první úrovně, vyhledávací pole a lišta akcí soupeřily o jeden řádek a přebytek padal do generované položky „Další“. Přepnutí mq($from/$until: md) → lg se týká gov-header.scss (včetně varianty --small), gov-header-navigation.scss, gov-header-search.scss a gov-header-suggestions.scss. Globální pomocné třídy .gov-mobile-only / .gov-desktop-only zůstávají na md; hlavička je pro pásmo md–lg přepisuje lokálně, aby ovládání jazyka a motivu mezi 768 a 1023 px nezmizelo. Logo má výšku 56 px a 64 px dosáhne až od 1024 px (v 4.7.0 od 768 px); pravidlo 56 / 64 px podle manuálu JVS se nemění, posouvá se jen breakpoint. Stejná změna platí pro vlastní styly balíčku @gov-design-system-ce/templates i pro jeho skript hlavní navigace (dist/scripts/main-navigation.js, TABLET_SIZE 768 → 1024), takže chování menu v JS odpovídá novému breakpointu v CSS. Dopad: kdo používá markup hlavičky se styly šablon, uvidí mezi 768 a 1023 px hamburger místo řádkové navigace a logo 56 px místo 64 px. Komponenty ani API se nemění.

Změny ​

• Banner (gov-banner) – volitelná dekorativní ikona přes nový prop icon: Dosud se u foreground="icon" vykreslovala jediná, napevno zapsaná grafika (base64 SVG v $shared-foregrounds v gov-banner-variables.scss) a nešla ničím nahradit. Nový prop icon přijímá ikonu jako řetězec typ/název (stejně jako prop icon u gov-chip nebo gov-tag, např. complex/portal) a vykreslí ji přes gov-icon v dekorativní vrstvě .gov-banner__icon (aria-hidden="true") místo původní grafiky; host přitom dostane třídu gov-banner--has-icon. Prop je volitelný a beze změny chování, pokud jej neuvedete – bannery bez icon se vykreslí přesně jako dosud. Neplatná hodnota (jiný tvar než typ/název) se ignoruje a použije se výchozí grafika; název smí obsahovat jen malá písmena a pomlčky, takže ikony s číslicí v názvu (např. globe2, folder2-open, link-45deg) se zatím použít nedají. Prop se uplatní jen pro foreground="icon" u velikostí s/m/l; u foreground="image" a u velikosti xl nemá vliv. Stejně jako dosavadní dekorace se ikona zobrazuje až od breakpointu lg. Velikost ikony vychází z velikosti banneru a je přepsatelná CSS proměnnou --icon-size. React implementace (GovBanner) přijímá prop icon jako ReactNode (např. <GovIcon/>); protože React GovBanner nemá výchozí foreground, je nutné uvést foreground="icon" explicitně.
• Ikony – 34 nových ikon v sadě components: award, buildings, calendar-event, car-front, card-checklist, cash-coin, cash-stack, chat-dots, chat-text, clock, envelope-plus, file-earmark-text-fill, flag, folder2-open, funnel, geo-alt, globe2, heart-pulse, house, houses, link-45deg, map, mortarboard, pencil, person, send, share, shield, sliders, sort-down, star, three-dots-vertical, trash a tree. Sada components roste z 57 na 91 ikon, sady colored a complex se nemění. Zdrojem je Bootstrap Icons (MIT); ikony jsou převedeny do konvence sady (fill="none" / path[fill="currentColor"]). Šablony ve Storybooku i ve Fractalu na tyto ikony dosud odkazovaly přes nikdy nepublikovanou sadu templates; nově používají type="components", takže se ikony vykreslují z publikované sady. Seznam componentsIcons pro galerii ikon ve Storybooku (gov-icon/list.js) je doplněn o stejné položky; komponenta gov-icon se nemění.
• Pravidla – Jak na tvorbu formuláře: povinná pole se označují hvězdičkou: Stránka dosud uváděla, že se povinná pole hvězdičkou neoznačují, což neodpovídalo chování komponent. Pravidlo je nahrazeno dvěma: povinná pole se označují hvězdičkou, kterou vykreslí komponenta sama, když poli nastavíte atribut required (do textu popisku ji nepište ručně), a formulář s povinnými poli má nad prvním polem vysvětlivku, například Pole označená hvězdičkou (*) jsou povinná. Ukázky kódu ve Storybooku zároveň vypisují boolean atributy bez hodnoty (required místo required="true").
• Dokumentace pro vývojáře – templates.css není pro markup šablon volitelný: Oddíl Styly na stránce Pro vývojáře je rozdělen na tři části. Základ pro web-komponenty uvádí pět souborů (tokens.css, styles.css, layout.css, components.css, animations.css), které web-komponentám stačí. Kdy potřebujete další soubory vysvětluje, že markup organismů a šablon a třídy .gov-block, .gov-text-content a .gov-mb--* vyžadují templates.css (bez něj se vykreslí zcela bez stylů), content.css slouží pro redakční HTML v .gov-content a print.css je volitelný. Import po jednotlivých komponentách popisuje granulární exporty ./components/gov-*.css a ./templates/gov-*.css. Dosud stránka označovala content.css, templates.css i print.css souhrnně jako volitelné. Návod Použití v čistém HTML v kroku 2 nově jmenuje pět základních souborů i požadavek na templates.css.
• Fractal označen jako deprecated: Fractal (web šablon) už není udržovaný a zdrojem pravdy pro šablony je Storybook. Odkazová tlačítka v dokumentaci se jmenují „Fractal (deprecated)“ (na stránce hlavičky a navigace „Fractal Navigation (deprecated)“ a „Fractal Header (deprecated)“) a nesou vysvětlující title; úvodní stránky Organismů a Šablon začínají varováním. Fractal sám zobrazuje nad obsahem banner s odkazy na Storybook a na dokumentaci, v titulku má „(deprecated)“ a jeho úvodní stránka začíná upozorněním. Publikovaný balíček @gov-design-system-ce/templates se tím nemění.

Opravy ​

• Našeptávač (gov-form-autocomplete) – seznam návrhů zobrazoval jen první položku: Při asynchronním vyhledávání přes setSearchCallback, kdy komponenta vykresluje načítací řádek, se v seznamu objevila pouze první nalezená položka. Položky seznamu neměly klíč (key), takže Stencil znovu použil načítací <li> jako první výsledek; položka výsledku zároveň nastavovala innerHTML a obsahovala sloty list-item-left / list-item-right, innerHTML přepsal sledované uzly slotů a vykreslování se po první položce přerušilo. Položky mají nově stabilní klíče (message-empty, loading, item-${index}) a oba sloty jsou odstraněny. Nikdy nic nezobrazily, protože jejich obsah přepsal právě innerHTML, takže jejich odebrání nemá funkční dopad; ze starších poznámek k migraci v Seznamu změn byla odstraněna zmínka o jejich přidání. Oprava se týká i gov-form-multi-select, který vnitřně používá gov-form-autocomplete se stejným asynchronním vyhledáváním.
• Control group (gov-control-group) – no-border, no-inner-border a fit-content nefungovaly přes JS property: Styly se řídí atributy hostitele, ale tyto tři propy se na atributy nepropisovaly, takže při nastavení jako property (Angular [noBorder], Vue :no-border, el.noBorder = true) se tiše ignorovaly. Propy se nově reflektují na atributy (reflect: true), stejně jako color, který fungoval už dříve přes explicitní propis v render() a nově se jen reflektuje. Opraveny jsou i popisy propů: no-border odstraní vnější rámeček celé skupiny, no-inner-border skryje dělicí čáry mezi prvky a vnější rámeček ponechá a fit-content zúží skupinu na šířku obsahu (dosud chybně popsáno jako plná šířka). Vedlejší efekt: hodnoty nastavené přes property jsou nově vidět jako atributy hostitele. React GovControlGroup je samostatná implementace a změna se ho netýká.
• Skeleton (gov-skeleton) – kruh jako elipsa a zamrzlý přechod: (1) shape není reflektovaný prop, takže při nastavení přes JS property (Vue :shape, Angular [shape], React, el.shape = "circle") na hostiteli nevznikl atribut shape="circle" a pravidlo velikosti [size=…]:not([shape="circle"]) přepsalo výšku; kruh se vykreslil jako elipsa. Pravidlo nově vylučuje i třídu .circle, kterou nastavuje komponenta i React implementace. (2) Při prefers-reduced-motion se u skeletonu s animací progress (výchozí) neodstranil přechodový gradient: pravidlo barev ([color=…].progress) mělo vyšší specifičnost a komponenta i React GovSkeleton atribut color vždy nastavují (výchozí neutral), takže se to týkalo prakticky všech skeletonů a na obrazovce zůstal zamrzlý pruh. Reset je nově až za barevnými pravidly a pokrývá i [color].pulse / [color].progress, takže se zobrazí plochá barva placeholderu. Změna je v globálním CSS komponent i v components.css balíčku styles a v jeho kopii v balíčku templates.
• Layout (gov-layout-column) – nezalomitelný obsah vytlačil boční sloupec: Sloupec měl výchozí flexovou min-width: auto, takže se nemohl zúžit pod šířku nejširšího nezalomitelného obsahu (buňka tabulky s nowrap, dlouhý identifikátor) a boční sloupec (aside) se posunul mimo kontejner. Sloupec má nově min-width: 0 a přetečení zůstává uvnitř sloupce s obsahem. Platí pro web-komponentu i třídu .gov-layout-column, kterou vykresluje React, v globálním CSS komponent i v components.css.
• Tlačítko (gov-button) – atributy aria-* zapsané během načítání nebo po přesunu v DOM: Komponenta přenáší atributy aria-* z hostitele na vnitřní <button> jednou v componentWillLoad a další změny sleduje AttributeObserver, který startoval až v componentDidLoad a po odpojení z DOM se znovu nespustil. Atribut zapsaný mezi těmito okamžiky nebo po přesunu tlačítka v DOM tak zůstal jen na hostiteli (v hlavičce se kvůli tomu rozcházelo aria-expanded u položek přesunutých do menu „Další“). Atributy se nově převezmou i po startu observeru v componentDidLoad a v connectedCallback, který observer po přesunu znovu spustí. Týká se web-komponenty, Angularu a Vue; React GovButton je samostatná implementace.
• Hlavička (šablona) – rozbalovací panely a vnořená menu: Tři rozbalovací panely navigace (.gov-subnavigation, .gov-mega-menu a menu „Další“ .gov-deferred-navigation) sdílejí nový mixin a mají od lg jednotný vzhled (absolutní pozice pod řádkem navigace, min. šířka 280 px, pozadí --background-block-primary). Megamenu se už neroztahuje na 100vw s pevným odsazením shora, ale drží se vodorovných okrajů hlavičky. Zarovnání poslední rozbalovací nabídky vpravo pokrývá i :last-child a třída .gov-navigation__last-visible-item platí pro podnabídku i pro menu „Další“, takže panely nepřetékají přes pravý okraj stránky. Podnabídky položek přesunutých do menu „Další“ se v něm vykreslují přímo místo display: none a skript hlavní navigace (main-navigation.js v balíčku templates) nově registruje spouštěče i na vnořených úrovních, takže vnořená menu jdou otevřít. Řádek navigace má vodorovný okraj --templates-margin-l jako zbytek hlavičky (ve variantě --small nulový).
• Patička (šablona) – ikony sociálních tlačítek v Reactu: Pravidlo .gov-footer a, .gov-footer a span { color: var(--component-footer-text-link) !important } v templates.css přebarvovalo i ikonu uvnitř tlačítka, kterou React wrapper vykresluje jako <span class="gov-icon">. Ikony sociálních sítí pak měly barvu odkazů patičky (#CEE3F4) na bílém tlačítku a byly téměř neviditelné. Selektor je zúžen na a span:not(.gov-icon); markup s <gov-icon> se vykresluje beze změny. Týká se templates.css v balíčku styles i jeho kopie v balíčku templates; vlastní styly Fractalu se nemění.
• Karty – carousel (šablona) – chybějící okrajové přechody: Styly .gov-carousel__left-shadow / .gov-carousel__right-shadow existovaly jen ve Fractalu a do templates.css se nepřenesly. Nově jsou jeho součástí: přechod z --background-page do průhledna přes okraj carouselu (šířka 5.625rem, od sm 11.875rem), který funguje ve světlém i tmavém režimu a neblokuje kliknutí (pointer-events: none). Třídy přepíná aplikace vlastním skriptem. Funkční šipky v nadpisu sekce (posun o celé karty, zakázaný stav, aria-controls) jsou zatím jen v ukázce ve Storybooku.
• Styly – templates.css: doplněny .gov-block, .gov-responsive-img a tokeny --templates-width-max-*: Při přenosu z Fractalu chyběly dvě pomocné třídy a sada tokenů šířky. .gov-block (pozadí --background-block-primary, vnitřní odsazení --spacing-l, zaoblení --corner-radius-l) je obal obsahu v šablonách stránek, .gov-responsive-img zaobluje obrázky (--corner-radius-s). Tokeny --templates-width-max-xs (6.25rem) až --templates-width-max-4xl (50rem) platí pro všechny breakpointy, 5xl až 8xl mají pod sm 50rem a od sm 56.25rem až 75rem. Uvnitř templates.css je nic nepoužívá; ve Storybooku ale chybějící token dělal z max-width: var(--templates-width-max-4xl) neplatnou deklaraci a text šablon běžel přes celou šířku. Týká se balíčku styles i kopie templates.css v balíčku templates.
• Hlavička stránky (.gov-page-heading, šablona) – sladění s Figmou: Hero obrázek (picture img) je oříznutý na poměr 128 : 75 (aspect-ratio: 128/75, object-fit: cover, plná šířka), anotace (.gov-text-content) má max. šířku 50rem, tlačítka sdílení (.gov-social) nemají mezeru a seznamy .gov-icon-list, .gov-tags a .gov-social nemají v hlavičce svislé vnější okraje. Dopad: kdo používá markup hlavičky stránky s templates.css, uvidí oříznutý obrázek a těsnější rozestupy.
• Styly – granulární soubory obsahují i data-* selektory: Selektory [data-size], [data-disabled] a [data-open], které React implementace používá místo rezervovaných atributů, se dosud doplňovaly jen do souhrnného components.css. Nově je build doplňuje do každého souboru @gov-design-system-ce/styles/components/gov-*.css, takže React komponenty mají správné styly i při importu stylů po jednotlivých komponentách. Souhrnný components.css se nemění.
• Dokumentační web – gov-dialog se otevíral prázdný: V produkčním (SSR) buildu dokumentace se gov-dialog otevřel prázdný a jeho slotovaný obsah se vysypal nad dialog. Web-komponenty se registrovaly už při načtení modulu, před hydratací Vue, a hydratace zahodila pomocný komentář, podle kterého Stencil přesouvá slotovaný obsah komponent bez shadow DOM. Registrace (defineCustomElements()) nově proběhne až po hydrataci (onMounted + nextTick). Knihovna se nemění; stejný problém ale může mít každá Vue nebo Nuxt SSR aplikace, která komponenty registruje před hydratací.
• Dokumentační web – levé menu ztrácelo pozici posunu: Na desktopu nemělo menu vlastní posuvnou oblast, takže se po každém přechodu mezi stránkami vrátilo na začátek. Menu je nově lepivé (sticky) s vlastní posuvnou oblastí, pozici posunu si ukládá do sessionStorage a po načtení ji obnoví, případně posune aktivní položku do viditelné části menu.
• Dokumentační web – zvýraznění syntaxe v tmavém režimu: Tmavá paleta ukázek kódu se ve skutečnosti neuplatňovala. Ukázky nově v tmavém režimu (a v režimu auto při tmavém nastavení systému) používají tmavou paletu; palety jsou github-light-high-contrast a github-dark-default a splňují kontrast WCAG AA (nejméně 4,5 : 1). Uložené téma se nastaví skriptem v hlavičce stránky ještě před prvním vykreslením, takže světlý režim neprobliká, a lang="cs" je nově přímo v HTML místo dodatečného nastavení skriptem.
• Fractal – písmo a obrázky na webu šablon: Na nasazeném webu Fractalu (designsystem.gov.cz/templates) minul přepis cest na prefix /templates tři zdroje: místo souboru s písmem Roboto se vracela záložní HTML stránka, ikony PWA ze site.webmanifest a obrázek v ukázce stepperu vracely 404. Cesty jsou nově relativní, případně zapsané tak, aby je přepis zachytil. Publikovaný balíček @gov-design-system-ce/templates se funkčně nemění.

Přístupnost ​

• Stránkování (gov-pagination, React GovPagination) – tlačítko aktuální stránky nese aria-current="page" místo aria-current="true", takže čtečka obrazovky ohlásí „aktuální stránka“, ne jen „aktuální“. Ostatní stránky aria-current nemají. Styly se nemění (aktuální stránku značí třída .is-active); vlastní CSS nebo testy cílící na [aria-current="true"] je potřeba upravit.
• Skeleton (gov-skeleton, React GovSkeleton) – skeleton bez přístupného názvu je dekorativní (aria-hidden="true") a není v pořadí tabulátoru, roli progressbar dostane jen pojmenovaný skeleton. Podrobnosti a migrace viz Breaking changes a migrace.
• Šablony stránek ve Storybooku – opravy nalezené novými a11y testy: Dvanáct šablon (Aktuality, Centrum podpory, Článek, Domovská stránka, Kariéra, Kontakty, Mapa webu, O nás, Organizační struktura, Povinně zveřejňované informace, Pro média a Výsledky vyhledávání) má nové testy přístupnosti: axe ve světlém i tmavém režimu a podle šablony i kontrolu landmarků, jedinečnosti id, platnosti ARIA odkazů, fokusu uvnitř aria-hidden a osnovy nadpisů. Odložené nálezy (např. nadpisy h5 ve sloupcích patičky) jsou zapsány v tests/a11y/known-violations.md. Týká se jen ukázek ve Storybooku, publikované balíčky se nemění. Opravy v markupu ukázek:
  • Hlavička stránky (jednoduchá i komplexní) – drobečková navigace už není skrytá atributem aria-hidden="true" (obsahovala fokusovatelné odkazy) a nese accessible-label="Drobečková navigace".
  • Komplexní hlavička stránky – ikony data a autora jsou dekorativní (aria-hidden) a popisky „Datum publikace:“ a „Autor článku:“ jsou ve skrytém textu gov-sr-only.
  • Duplicitní id nadpisu obsahu (Povinně zveřejňované informace, Organizační struktura, Článek, Centrum podpory) – mobilní obsah stránky má vlastní prefix id, takže se id neopakuje a <aside aria-labelledby> se pojmenuje viditelným desktopovým nadpisem.
  • Úrovně nadpisů – nadpis obsahu v šablonách Článek, Centrum podpory (FAQ bloky) a Kariéra (Detail pozice) je h2 místo h3; desktopový nadpis je holý <h2> bez třídy, takže přebírá větší typografii h2. Nadpisy karet v šabloně Kontakty a karet pozic v šabloně Kariéra jsou h2 místo h3 beze změny vzhledu (typografii nese gov-card__headline).
  • O nás – doplněno chybějící uzavření </main></gov-container>, takže patička už není vnořená v <main> ani v kontejneru a stránka má landmark contentinfo.
  • Kariéra – ikony s aria-label ve sdíleném seznamu ikon nesou role="img" (týká se všech šablon se seznamem ikon) a vyhledávací formulář má id kariera-search místo duplicitního search.
  • Pro média – karty tiskových zpráv generují platné <time datetime> i pro datum ve tvaru „10. prosince 2024“ (dosud vznikalo datetime="undefined- prosince 2024-10").
  • Výsledky vyhledávání – přístupný název nese jen první skeleton v každé oblasti, popisek prázdného stavu je opraven na „Nebyly nalezeny žádné výsledky“ a dokumentace šablony má sekci Přístupnost.
  • Hlavní navigace (skript ve Storybooku) – napojení aria-controls / aria-expanded čeká na skutečnou hydrataci tlačítka mobilního menu místo pevné prodlevy.

React wrapper ​

Balíček @gov-design-system-ce/react je posunut ze 4.7.0 na 4.7.1 souběžně s ostatními balíčky. Odstranění propu disabled u GovWizardItem, zúžení typu color u GovInfobar (bez secondary) a nové chování GovSkeleton bez přístupného názvu jsou popsány v části Breaking changes a migrace, prop icon u GovBanner v části Změny.

Opravy ​

• ID prvků přes useId() – nesoulad při SSR hydrataci: GovFormInput, GovFormTextarea, GovFormSelect, GovFormCheckbox, GovFormRadio, GovFormSwitch, GovFormRange, GovFormMessage, GovChip, GovDialog, GovCollapsible, GovTabs a GovPagination generovaly ID prvků přes Math.random() přímo při vykreslení. Při SSR (např. Next.js) se tak ID ze serveru a z klienta lišila, React hlásil nesoulad při hydrataci a vazby aria-labelledby, aria-describedby, aria-controls i label[for] mohly ukazovat na neexistující prvky. ID nově vzniká ze sdíleného hooku useElementId(prefix, identifier?) nad Reactovým useId(), explicitní identifier má přednost. GovFormCheckbox, GovFormRadio a GovFormSwitch nově předávají slotovanému popisku výsledné ID včetně explicitního identifier, takže label[for] odpovídá inputu. Dopad: tvar generovaných ID se mění z Prefix-<náhodné hex skupiny> na Prefix-<výstup useId()> (u GovTabs GovTabContent-<useId>-<index>); formát závisí na verzi Reactu (:r0: v React 18 a 19.0, «r0» v 19.1, _r_0_ od 19.2). Na generovaná ID nespoléhejte v CSS; pro querySelector v Reactu 18 a 19.0 použijte CSS.escape(). Ostatní komponenty (GovBreadcrumbs, GovDropdown, GovFormAutocomplete, GovFormFile, GovFormMultiSelect, GovStepperItem, GovToast, GovTooltip (spouštěč tooltipu), GovUserNavigation a GovWizardItem) zatím generují ID postaru a při SSR mohou nesoulad dál způsobit.
• GovButton – identifier se vykresluje jako id: Prop identifier byl deklarovaný, ale nevykresloval se: propadl do zbylých atributů jako doslovný atribut identifier, takže tlačítko nemělo žádné id. Tím se rozpadala i vazba aria-labelledby v GovCollapsible, který spouštěč vykresluje přes GovButton. Nově se na <button> i na odkazové variantě <a> vykreslí id z identifier, případně z id; pokud jsou zadány oba, má přednost identifier.
• 'use client' u GovDialog, GovTabs, GovCollapsible, GovPagination a GovUserNavigation: Moduly používaly React hooky a API prohlížeče bez direktivy 'use client', takže je Next.js App Router považoval za serverové komponenty a jejich vykreslení ze serverové komponenty skončilo chybou TypeError: useState is not a function. Direktivu mají nově GovDialog, GovTabs, GovCollapsible a GovPagination i hook useElementId; kompilace ji v dist zachovává. CI nově kontroluje direktivu ve zdrojích i v sestaveném balíčku. Stejnou direktivu dostala i exportovaná GovUserNavigation, jejíž vykreslení ze serverové komponenty padalo stejně. Pro jistotu ji mají i interní moduly s hooky, které kontrola odhalila (useTooltip, useTooltipState, stav našeptávače a oba useClickOutside); ty se z balíčku neexportují a importují je jen komponenty, které direktivu už mají, takže samy chybu nezpůsobovaly.
• GovLink – external nastavuje target a rel: Prop external dosud jen vykreslil ikonu externího odkazu; odkaz se otevřel ve stejné záložce a cizímu webu poslal hlavičku Referer. Nově, stejně jako webová komponenta gov-link, nastaví na vnitřním <a> target="_blank" a rel="noreferrer". Dopad: <GovLink external> se otevírá v nové záložce; target předaný spolu s external se ignoruje a vlastní rel se přepíše na noreferrer.
• GovSkeleton – role a tab stop jen s přístupným názvem, předává onClick: React implementace je samostatný div a nově se chová stejně jako webová komponenta: role="progressbar", aria-busy, aria-valuemin / aria-valuemax a tabIndex={0} dostane jen při neprázdném aria-label nebo aria-labelledby, jinak aria-hidden="true". Deklarovaný, ale dosud zahazovaný onClick se nově předává.

Přístupnost ​

• GovPagination – tlačítko aktuální stránky nese aria-current="page" místo aria-current="true", shodně s webovou komponentou.

v4.7.0 ​

Balíčky @gov-design-system-ce/core, styles, icons a templates; React balíček (@gov-design-system-ce/react) má vlastní řadu verzí a je popsán v samostatné části na konci.

Breaking changes a migrace ​

• Cookie lišta (gov-cookiebar) – zneplatněné propy: label-cookie-details, label-cookie-name, label-cookie-provider, label-cookie-purpose a label-cookie-expiration jsou ponechány pro zpětnou kompatibilitu, ale nic nedělají — všechny patřily k odstraněné tabulce jednotlivých cookies. Pokud je používáte, nahraďte je propy label-privacy + privacy-url; jinak není potřeba nic měnit.
• Chip (gov-chip) – geRef() → getRef(): imperativní metoda s překlepem v názvu je přejmenována, čímž se komponenta sjednocuje se všemi ostatními (ty getRef() vystavují už dnes). Konzumenti volající chipEl.geRef() — přímo nebo přes seznam proxy metod v Angularu — musí přejít na chipEl.getRef(). Signatura a návratová hodnota se nemění (Promise<HTMLLinkElement | HTMLSpanElement | HTMLButtonElement>), změnil se jen název.
• React – viditelná změna vzhledu a požadavek na verzi stylů: React implementace nyní vydává atributy, na které components.css skutečně cílí, takže se výstup React komponent vykreslí správně — ale viditelně jinak než dosud. Po aktualizaci si překontrolujte dotčené obrazovky. Balíček @gov-design-system-ce/react zároveň vyžaduje @gov-design-system-ce/styles ve verzi 4.6.4 nebo vyšší; se starší verzí stylů se komponenty vykreslí nesprávně.
• Banner (gov-banner) – odstraněna varianta foreground="logo", výchozí hodnota je icon: Dekorativní lev v pozadí banneru byl odebrán na základě rozhodnutí UX/UI (banner ho zobrazovat nemá). Hodnota logo je odstraněna z výčtu BannerForeground i z SCSS ($shared-foregrounds), takže ji @Watch validátor nově odmítne varováním o neplatné hodnotě, a výchozí hodnota propu foreground se mění z logo na icon — sourozenecká varianta se stejnou cestou vykreslení a stejným pozicováním u velikosti s. Dopad: bannery, které foreground neuvádějí, se vykreslí s dekorativní ikonou místo lva; bannery se foreground="logo" přijdou o dekoraci úplně a je třeba je přepsat na icon (dekorativní grafika bez obrázku) nebo image (vlastní obrázek ve slotu image). Varianta image a velikost xl, která foreground vůbec nepoužívá, zasaženy nejsou.
• Styly – odebrány varianty html/* z balíčku @gov-design-system-ce/styles: Soubory @gov-design-system-ce/styles/html/… už balíček neobsahuje a zmizely i z mapy exports (z 204 položek na 97). Vybíraly varianty komponent výhradně přes atributy data-*, které ale žádný z wrapperů nerenderuje — komponenty s nimi měly správné rozměry a žádnou barvu. Dokumentace je přitom pro React doporučovala. Pokud je používáte, přepište importy na kořenové cesty (@gov-design-system-ce/styles/components.css atd.); do té doby build skončí chybou o nenalezeném modulu. Generátor packages/styles/attributes.mjs byl odstraněn z buildu.

Změny ​

• Cookie lišta (gov-cookiebar) – redesign: Podrobné nastavení kategorií se přesunulo z rozbalovacího panelu uvnitř lišty do modálního okna (gov-dialog), samotná lišta je nyní plovoucí karta ukotvená vlevo dole a tabulka jednotlivých cookies byla nahrazena jedním odkazem na zásady zpracování osobních údajů. Doplněna podpora tmavého režimu a responzivní chování. Veřejné API zůstává beze změny — metody getConsent() a show() i událost gov-consent mají stejné signatury.
  • Nové propy: label-settings-title (titulek modálu), accessible-close-label (popisek zavíracího tlačítka modálu), label-always-on (text chipu u zamčené kategorie), label-privacy a privacy-url (text a cíl odkazu na zásady zpracování).
  • Odkaz na zásady se vykreslí pouze tehdy, když aplikace dodá neprázdný privacy-url — komponenta už nevytváří „mrtvý" odkaz na #.
  • Fokus po otevření: pokud jsou nastavené kategorie, přebírá fokus past fokusu v gov-dialog; bez kategorií se fokus nastaví na samotnou lištu.
  • Pozicování je nyní řízené jedním lokálním tokenem --gov-cookiebar-inset (inset shorthand + max-width: 45rem) místo opakovaných calc() řetězců pro každý breakpoint. Vzhled je identický a token lze přepsat z aplikace.
• Toast (gov-toast) – ukazatel odpočtu běží zleva doprava: tmavší překryv (.gov-toast__timer) se plní od levého okraje doprava a plné šířky dosáhne přesně ve chvíli, kdy se toast sám zavře. Dříve začínal na plné šířce a zprava se zkracoval. Ukazatel se navíc vykresluje jen tehdy, když odpočet skutečně běží (time > 0) — trvalé toasty (time = 0) ho neobsahují vůbec. Barvy, tokeny ani levý akcent subtle se nemění.
• Toast (gov-toast) – odpočet respektuje prefers-reduced-motion: při zapnutém omezení pohybu se animace plnění vypne a překryv se skryje (místo aby nad toastem zamrzl v mezistavu). Toast se přitom stále zavře v naplánovaném čase — časovač v JS je na CSS animaci nezávislý.
• Styly – nový opt-in balík templates.css: styly šablon (header, footer, karty, tabulky, filtry, galerie, obsah stránky, mapa a další, včetně pomocných tříd a tokenů --component-footer-*) jsou nově kompilované do samostatného balíku @gov-design-system-ce/styles/templates.css. Do hlavního components.css se nedostanou — kdo šablony nepoužívá, nic navíc nestahuje. Jde o postupný přenos stylů z původního balíčku šablon (Fractal) do design systému.
• Tabulka (šablona) – modifikátor --no-border: gov-table-complex umí vypnout vnější rám obalu tabulky. Součást opt-in balíku templates.css, nikoli hlavního components.css; komponenta se nemění.
• Ikony – 15 nových ikon v sadě components: eye-slash (skryté heslo v gov-form-input), cookie (odznak pro znovuotevření cookie lišty), link, clock-history, arrow-up, envelope, facebook, instagram, linkedin, youtube a pět ikon typů souborů (file-earmark, filetype-pdf, filetype-xls, filetype-png, filetype-jpg). Zdrojem je Bootstrap Icons (MIT), převedeno do konvence sady (fill="none" / path[fill="currentColor"]). Šablony na ně dříve odkazovaly přes neexistující sadu templates, takže se vykreslovaly prázdné.
• Šablony – nová šablona cookie lišty: organismus cookiebar demonstrující komponentu gov-cookiebar, aktualizovaný pro redesign.
• Záložky (gov-tabs) – vyhledávání potomků: gov-tabs-item se dohledávají filtrem přímých potomků místo kombinátoru :scope >. Chování je identické (stále jen přímí potomci, vnořené záložky vyloučené), odpadá jen závislost na selektoru :scope.
• Ukázkové projekty (skeletony): Pro každé prostředí (čisté HTML, React, Angular, Vue) vznikl minimální skeleton — jedna stránka, několik komponent, nic k mazání. Instalují design systém z registru jako běžná aplikace, takže jako první věc v projektu ověřují i obsah publikovaných balíčků. Odkazy najdete na stránce Pro vývojáře.
• provideGovDesignSystem() pro Angular: Nová funkce pro standalone aplikace. Dosud bylo jedinou zdokumentovanou cestou naimportovat GovDesignSystemModule, což ve standalone komponentě přinese direktivy, ale zahodí providery — komponenty se nikdy nezaregistrovaly a vykreslily se jako neaktivní elementy s holým textem, bez jakékoli chyby v konzoli. GovDesignSystemModule funguje beze změny, aplikace založené na NgModulech nemusí nic upravovat.
• @gov-design-system-ce/vue — mapa exports: Plugin ComponentLibrary je nově dostupný jako @gov-design-system-ce/vue/plugin. Dosud šel naimportovat jen hlubokou cestou @gov-design-system-ce/vue/dist/plugin, protože balíček neměl exports a index plugin nereexportoval. Původní zápis zůstává funkční.
• Dokumentace pro vývojáře přepsána do češtiny a doplněna o rozdíly mezi jednotlivými wrappery — mapování slotů na props v Reactu, povinné isCustomElement ve Vue, nastavení assets a styles v Angularu.
• Odebrány stránky pro Next.js a Nuxt.js: Pro tato prostředí neexistuje skeleton ani ověřený postup, takže návody byly odstraněny místo toho, aby popisovaly nevyzkoušené nastavení. Pro Next.js platí návod pro React, pro Nuxt návod pro Vue.

Opravy ​

• Rozbalovací seznam (gov-form-select) – ve Firefoxu byly skryté možnosti: komponenta obsahovala pravidlo gov-form-select option:not([selected]) { display: none }, kterým se předstíralo zobrazení vybrané hodnoty. Firefox ale display na <option> uvnitř nativního <select> respektuje, takže se v rozbaleném seznamu skryly všechny nevybrané položky a nabídka vypadala jako jednoprvková. CSS hack je odstraněn a vybraná hodnota se nyní synchronizuje imperativně na nativním elementu (syncSelectValue() z connectedCallback a z @Watch nad value), takže nativní nabídka vykreslí celý seznam ve všech prohlížečích. Veřejné API (propy / události / sloty) se nemění.
• Cookie lišta (gov-cookiebar) – rozpad karty při přepsání pozicování: Kořenové pravidlo komponenty nedeklarovalo display, takže blokové zobrazení bylo jen vedlejším efektem position: fixed. Jakmile aplikace pozicování přepsala (např. position: static, aby se lišta zobrazila v běžném toku stránky), vlastní element se vrátil k výchozímu display: inline a pozadí, zaoblení i stín se vykreslily zvlášť pro každý řádek — karta se opticky rozpadla na barevné fragmenty. Doplněno explicitní display: block; výchozí vykreslení v position: fixed je beze změny.
• Dialog (gov-dialog) – past fokusu u dialogu otevřeného při načtení: dialog vykreslený hned jako otevřený (open="true" při prvním renderu) nyní nastaví past fokusu — přesune do sebe fokus a nainstaluje obsluhu klávesnice (cyklení Tab + zavření Escape). Dříve tato logika žila jen v @Watch('open'), který Stencil spustí při změně propu, ne pro jeho počáteční hodnotu, takže čerstvě otevřený dialog nechal fokus na <body> a neměl klávesovou past. Zároveň byla opravena podmínka ve focusTrap(), která se odkazovala na globální open (window.open, vždy truthy) místo this.open. Právě díky tomu funguje u cookie lišty cesta „znovu otevřít z odznaku s kategoriemi" — ta vytváří gov-dialog znovu s open=true.
• Textové pole (gov-form-input) – tlačítko odhalení hesla ukazuje stav: ikona se přepíná mezi eye-slash (skryto) a eye (odhaleno) a tlačítko nese aria-pressed odpovídající stavu. Podle vzoru WAI-ARIA pro přepínací tlačítko je aria-label nově statický neutrální „Zobrazit heslo" (accessible-show-password-label) místo přepínání mezi dvěma popisky, takže čtečka stav oznámí jednou (přes aria-pressed), ne dvakrát. Prop accessible-hide-password-label je zachován pro kompatibilitu API.
• Našeptávač (gov-form-autocomplete) – throttle-time se ignoroval: debounce vestavěný do komponenty nefungoval, protože se obsluha vstupu vytvářela znovu v render() při každé změně stavu a časovač se tím pokaždé resetoval. searchCallback se nyní volá jednou za nastavené okno, jak dokumentace uvádí, místo při každém stisku klávesy.
• Grid item (gov-grid-item) – col-span / row-span ve frameworcích: propy col-span a row-span (i responzivní varianty col-span-{sm,md,lg,xl} / row-span-{sm,md,lg,xl}) se nově propisují do atributů hostitele. SCSS na těchto atributech staví grid-column / grid-row, ale propy se nepropisovaly — takže integrace, které hodnotu nastavují jako property (Vue proxy defineContainer, Angular vazba [column]), atribut nikdy nezapsaly a buňka spadla na grid-column: auto bez rozpětí. Konzumenti pracující s atributy (čisté HTML, ručně psaná React implementace) zasaženi nebyli. Veřejný kontrakt se nemění.
• Empty (gov-empty) – validace propu size: @Watch validátor porovnával hodnotu proti AccordionSizes (xs–xl) místo vlastního EmptySizes (s/m/l) a varování logoval pod názvem komponenty gov-accordion — zbytek po kopírování. Nyní validuje správný výčet a loguje jako gov-empty.
• Stránkování (gov-pagination) – výchozí type se dočasně změnil a je vráceno zpět: mezi verzemi se výchozí hodnota propu type změnila z button na select a přidala se hodnota classic; obojí je vráceno — type má opět výchozí button a classic je z výčtu (i z React wrapperu, Storybooku, šablon a ukázkových aplikací) odstraněno. Pro konzumenty je čistý dopad nulový; záznam je zde jen kvůli dohledatelnosti a proto, aby bylo zdokumentováno, že hodnota classic nikdy nevyšla.
• @gov-design-system-ce/react nedeklaroval tslib: Sestavený balíček obsahuje import { __rest } from "tslib" v deseti souborech (důsledek importHelpers: true), ale tslib nebyl uvedený mezi závislostmi. Instalace z registru tak mohla skončit chybou Rolldown failed to resolve import "tslib". Ukázkové aplikace v monorepu problém nezachytily, protože wrapper aliasují na zdrojové soubory.
• @gov-design-system-ce/vue nedeklaroval @stencil/vue-output-target: Sestavený dist/index.js z něj importuje defineContainer za běhu, ale balíček ho neuváděl mezi závislostmi. Stejná příčina zamaskování jako výše — packages/sample-vue si závislost deklaruje sám.
• @gov-design-system-ce/vue nedeklaroval vue jako peer dependency: Doplněno vue ^3.4.0. Správci balíčků tak mohou Vue správně deduplikovat a upozornit na nekompatibilní verzi.
• @gov-design-system-ce/vue se publikoval bez kódu: Balíček deklaruje files: ["dist"], ale dist se nesestavoval, takže archiv obsahoval pouze package.json a README.md. Doplněno sestavení core-react a core-vue do build skriptu.
• @gov-design-system-ce/styles — chybný klíč publishConfig: Klíč byl zapsán jako publishonfig, takže se nastavení access: public neuplatnilo.
• Dokumentace nesprávně doporučovala pro React styly html/*: Varianta html/* vybírá varianty komponent výhradně přes atributy data-*, zatímco React wrapper renderuje atributy bez prefixu. Komponenty proto měly správné rozměry a žádnou barvu. Správné jsou kořenové soubory stylů, které používá i packages/sample-react.
• Dokumentace nesprávně popisovala kopírování ikon: Uváděný příklad kopíroval všechny ikony do jediného adresáře (--flat), ale gov-icon je stahuje z cesty ${iconsPath}/${type}/${name}.svg. Při zploštění struktury skončí každá ikona chybou 404, aniž by se cokoli objevilo v konzoli. Podadresáře components, complex a colored musí zůstat zachované.
• Dokumentace nesprávně odůvodňovala rozdělení stylů Shadow DOM: Žádná komponenta design systému Shadow DOM nepoužívá.
• Dokumentace neuváděla výchozí hodnotu iconsPath: Skutečná výchozí hodnota je /assets/icons, nikoli ./assets/icons. Doplněny také dosud nezdokumentované volby warningLog, errorLog a log.
• Dokumentace – nefunkční odkazy na stránce Přístupnost webových stránek: Odkazy „Vzorové prohlášení o přístupnosti" a „Jak vyplnit prohlášení o přístupnosti" mířily na PDF v dia.gov.cz/wp-content/uploads/…, které DIA stáhla (obojí 404). Nahrazeny jedním odkazem na průběžně udržovanou stránku Prohlášení o přístupnosti | DIA.
• Dokumentace – odkaz na zákon č. 99/2019 Sb. vedl na stažené PDF: Odkaz v kapitole WCAG mířil na PDF se zněním zákona na dia.gov.cz (404). Nyní vede do e-Sbírky, tedy na oficiální a aktualizované znění.
• Dokumentace – ukázková URL v SEO manuálu se vykreslovala jako odkazy: VitePress má ve výchozím nastavení zapnutý linkify, takže z placeholderů psaných jako běžný text (https://domena.cz/sitemap.xml, domena.cz/stranka/?utmparametr=1, http://www.example.com/robots.txt) dělal klikatelné odkazy — domena.cz přitom vrací 403. Placeholdery jsou nově zapsané jako inline kód, takže se nelinkují.
• Dokumentace – odstraněn odstavec odkazující na ukončený projekt PMA3: Stránka Pravidla pro umisťování loga doporučovala jako vzor web pma3.gov.cz, který byl po ukončení projektu stažen (502). Odstavec je odstraněn bez náhrady.
• Dokumentace – mrtvý odkaz na sadu ikon Material: Stránka Ikony odkazovala v seznamu dalších zdrojů na material.io/tools/icons/?style=baseline. Adresa přesměrovává na fonts.google.com/icons?selected=Material+Icons, která vrací 404. Nahrazeno odkazem na Material Symbols — sada je dnes distribuovaná právě tam, takže je upraven i název položky.
• Dokumentace – zastaralá a zaměněná sekce Google Analytics v SEO manuálu: Text psal v budoucím čase, že „Google však tuto verzi bude vypínat k 1. 7. 2023", ačkoli Universal Analytics je vypnutý; přeformulováno do minulého času s GA4 jako aktuální verzí. Navazující věta „Více o postupu nasazení Google Search Console…" byla navíc v sekci Google Analytics a odkazovala na nápovědu Search Console — zbytek po kopírování, protože identická věta stojí správně i o dvě sekce níž. Nyní odkazuje na nastavení Google Analytics. Odkazy na nápovědu Google samotné funkční byly; support.google.com jen odpovídá 404 na HTTP metodu HEAD, takže je automatické kontroly odkazů hlásí falešně.

Přístupnost ​

• Záložky (gov-tabs) – kontejner role="tablist" držel spouštěče role="tab" uvnitř vloženého <ul> / <li>, čímž se rozpadala povinná vazba tablist → tab (kritické nálezy axe aria-required-children / aria-required-parent). Strukturální <ul> / <li> nyní nesou role="presentation", takže semantika seznamu kontrakt tablistu nepřerušuje; vizuálně beze změny. Stejná oprava provedena i v React implementaci.
• Informační lišta (gov-infobar) – aria-hidden u rozbalovacího obsahu byl invertovaný: ve složeném stavu se obsah asistivním technologiím hlásil jako viditelný a v rozbaleném jako skrytý. Nyní odpovídá skutečnému stavu a atributu hidden.
• Zaškrtávací pole (gov-form-checkbox) – nerozhodnutý (indeterminate) stav nyní hlásí aria-checked="mixed" místo "false", podle vzoru WAI-ARIA pro třístavový checkbox.
• Multi-select (gov-form-multi-select) – seznam vybraných položek je prezentační výčet odebíratelných chipů, ne widget pro výběr. Odstraněny nesprávné role listbox / option (každý chip obsahuje tlačítko pro odebrání, což axe hlásil jako nested-interactive, a seznam neměl přístupný název).
• Našeptávač (gov-form-autocomplete) – vnitřní input nyní používá role="combobox" (dříve searchbox, který nepovoluje aria-expanded / aria-owns) a komponenta předává svůj identifier do id vnitřního inputu, takže spárovaný gov-form-label poskytne přístupný název. Týká se i gov-form-multi-select, který našeptávač obsahuje.
• Range (gov-form-range) – číselné pole vedle posuvníku (vykreslené při nastaveném input) nemělo přístupný název, nyní nese aria-label.
• Dialog (gov-dialog) – přístupný popisek zavření se vykresloval jako aria-label / aria-labelled-by přímo na hostiteli <gov-backdrop> bez role, místo aby se předal propy komponenty. axe hlásil dva vážné nálezy WCAG 2.1 AA (aria-prohibited-attr a překryv s role="button" bez přístupného názvu). Popisek se nyní dostane na vnitřní tlačítko správnou cestou.
• Loading (gov-loading) – překryv gov-backdrop (vykreslující vnitřní role="button") neměl přístupný název a porušoval pravidlo axe aria-command-name na každé stránce s loaderem. Nyní dostává accessibleLabel="Loading".
• Chip (gov-chip) a Backdrop (gov-backdrop) – aria-disabled se serializuje na "true" / "false" místo prázdného atributu. Surová boolean hodnota se vázala přímo, což Stencil vykreslil jako aria-disabled=""; nyní prochází pomocnou funkcí stejně jako u referenčního gov-button.

React wrapper ​

Balíček @gov-design-system-ce/react má vlastní řadu verzí – v4.7.0 vyšla souběžně s core / styles v4.6.4.

Upgrade z 3.4.0 na 4.7.0: Balíček je posunut z 3.4.0 (poslední publikovaná verze) na 4.7.0, čímž je zarovnán s verzí zbytku monorepa. Jde o první publish ve 4.x linii — stejný krok, jaký proběhl u @gov-design-system-ce/vue ve verzi 4.6.3. Veřejné API se nemění; verze 3.4.0 už měla stejnou podobu komponent a závisela na @gov-design-system-ce/components@^4.2.9.

Změny ​

• Odstraněn systematický rozpor mezi React implementací a components.css: React komponenty nejsou proxy nad Web Componentou, ale samostatná implementace vykreslující light-DOM markup. Ta ale vydávala atributy s prefixem data- (data-size, data-color, data-invalid …), zatímco components.css cílí na prosté atributy ([size], [color], [invalid] …). Audit všech 48 komponent našel 38 dotčených. Oprava vydává atributy deklarativně přímo na kořenovém elementu: atributy, které React 19 na <div>/<span> zachová, se předávají prostě; tři atributy, které React zahazuje (size, disabled, open), se vydávají jako data-size / data-disabled / data-open a components.css je od v4.6.4 umí obsloužit také (viz níže). Řešení je SSR-korektní a nezpůsobuje probliknutí při prvním vykreslení. Signatury propů se nemění.
• components.css rozšířeno o data-* varianty selektorů (součást styles v4.6.4): ke každému selektoru cílícímu na rezervovaný atribut ([size], [disabled], [open]) přibyl dvojník s data- prefixem, takže jedna sada stylů obsluhuje jak Web Componentu / Vue / Angular / čisté HTML (prosté atributy), tak React implementaci. Pouze přidává – stávající selektory jsou beze změny.
• gov-form-control – nové propy invalid a disabled: validační a zakázaný stav nešel z Reactu vůbec vyjádřit. Nyní se propisuje do atributů [invalid] / [disabled], které přebarvují popisek a ztlumují ovládací prvek.
• Cookie lišta – vlastní React implementace: gov-cookiebar má nově React reimplementaci odpovídající redesignu — vestavěné akce, ukládání souhlasu do cookie a nastavení kategorií v modálním okně (gov-dialog).

Opravy ​

Následující komponenty se v Reactu vykreslovaly nesprávně nebo vůbec:

• gov-button ignorovalo size – každé tlačítko se vykreslilo ve výchozí velikosti m. disabled nyní prvek jak ztlumí, tak zablokuje interakci (nativní disabled na vnitřním <button>, aria-disabled a zamezená navigace u odkazové varianty). Fungují i expanded / expanded-mobile (plná šířka) a loading (rotující indikátor).
• gov-dialog bylo trvale neviditelné – nenastavovalo třídu hydrated ani atribut open, na který components.css váže zobrazení.
• gov-form-input / gov-form-checkbox neaplikovaly size (výchozí m) ani invalid – odtud ~17px vysoký input se zdvojeným rámečkem a zaškrtávací pole o rozměru 0 × 0.
• gov-theme-switch neaplikoval theme ani size a smrskl se na ~2 px.
• gov-form-switch byl vizuálně nefunkční – nepropisoval size / checked / invalid / disabled ani modifikátor __no-label; size navíc nyní defaultuje na m jako ve Stencil zdroji (bez velikosti se indikátor nevykreslil vůbec).
• gov-chip byl zcela bez stylu (neaplikoval size / type / color / disabled).
• gov-tabs neaplikovalo size / type / color a neoznačovalo panely jako hydrated, takže obsah záložek byl skrytý.
• gov-loading / gov-skeleton nespouštěly animaci (chybné třídy animací).
• gov-badge nevydával data-size ani prosté content, takže se neuplatnila ani velikost, ani varianty content=empty|icon|number.
• Slotované ikony a nadpisy se nevykreslovaly se stylem u gov-empty, gov-error-code, gov-infobar, gov-link, gov-banner, gov-blockquote – chyběl jim atribut slot, který CSS selektory vyžadují.
• Propis prostých atributů (dříve data-*) opraven u dalších 31 komponent: gov-accordion, gov-accordion-item, gov-avatar, gov-backdrop, gov-badge, gov-banner, gov-card, gov-collapsible, gov-control-group, gov-empty, gov-flex, gov-form-control, gov-form-group, gov-form-label, gov-form-message, gov-form-password-power, gov-form-radio, gov-form-range, gov-form-search, gov-form-select, gov-form-textarea, gov-grid, gov-grid-item, gov-icon, gov-link, gov-loading, gov-message, gov-pagination, gov-spacer, gov-tag, gov-tile.
• gov-tile – velikost šipky (chevronu) opravena souběžnou úpravou v core (gov-tile.scss nyní cílí i na třídní selektor .gov-icon), protože React vykresluje <span class="gov-icon">, na který se elementový selektor nechytil.
• GovButton v odkazové variantě nevykresloval atribut href – odkazy neměly cíl.

Přístupnost ​

• gov-collapsible – neplatný atribut aria-control přejmenován na aria-controls.
• gov-dialog – překryv pozadí (gov-backdrop, který vykresluje vnitřní role="button") neměl přístupný název, protože se předával přes chybné názvy propů. Nyní se název odvozuje z accessibleCloseLabel.
• gov-loading – vnořenému překryvu se předává accessibleLabel="Loading", takže jeho role="button" není bezejmenné.
• GovSkeleton – přijímá a předává aria-label / aria-labelledby na prvek s role="progressbar"; bez přístupného názvu takový prvek neprojde kontrolou přístupnosti.
• gov-form-range – číselné pole vedle posuvníku dostalo aria-label.
• gov-tabs – strukturální <ul> / <li> uvnitř role="tablist" nyní nesou role="presentation", čímž se opravuje porušení vazby tablist → tab (kritické nálezy aria-required-children / aria-required-parent). Stejná oprava provedena i ve Stencil zdroji.