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.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ě.
• 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.

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.