Дизайн-система gov.cz.

import '@gov-design-system-ce/styles/tokens.css';
import '@gov-design-system-ce/styles/styles.css';
import '@gov-design-system-ce/styles/layout.css';
import '@gov-design-system-ce/styles/components.css';
import '@gov-design-system-ce/styles/animations.css';
import '@gov-design-system-ce/fonts/lib/roboto.css';
import './gov-cz.css';
window.GOV_DS_CONFIG={iconsPath:'/assets/gov-cz-icons'};
const resources=[
 {title:'Map the service journey',kind:'Workshop',time:'25 minutes',summary:'Connect the first question to a useful outcome.',body:'Start with the person’s goal. Record how they discover the service, what they need before starting and how they know the task has finished. Mark every hand-off where the person must repeat information.'},
 {title:'Write a clear action label',kind:'Writing guide',time:'10 minutes',summary:'Name what will happen after a button is activated.',body:'Use a verb and the object of the action. Compare Save draft with Send application and make the distinction explicit. Keep destructive and reversible actions visually and verbally distinguishable.'},
 {title:'Review keyboard access',kind:'Checklist',time:'20 minutes',summary:'Inspect focus order, visible focus and recovery.',body:'Work through the page using only the keyboard. Check the first useful control, the order through repeated items, the next-page action and return from a detail view. A selected page and keyboard focus are separate states.'},
 {title:'Prepare an error message',kind:'Writing guide',time:'15 minutes',summary:'Explain the issue next to a recoverable action.',body:'State what needs changing and how to change it. Preserve the person’s input. Avoid a generic failure message when the application knows which field or prerequisite is causing the problem.'},
 {title:'Test a narrow layout',kind:'Checklist',time:'20 minutes',summary:'Keep reading and actions available on a small screen.',body:'Inspect a long title, two lines of metadata and the pagination controls at a narrow width. Avoid hiding essential actions behind hover. Check that only a genuinely two-dimensional region scrolls sideways.'},
 {title:'Record the decision',kind:'Template',time:'10 minutes',summary:'Give the next team enough context to continue.',body:'Record the decision, the evidence used, the person responsible and the condition that would make the team revisit it. A useful record explains the reasoning without presenting an experiment as a settled rule.'}
];
document.querySelector('#root').innerHTML=`<main><p class="eyebrow">OPENDESIGN · ORIGINAL SERVICE TOOLKIT</p><h1>Small steps toward a clearer service</h1><p class="lead">Six practical resources for a team review. Explore two pages and open a resource without leaving the collection.</p><div id="cards" class="cards"></div><div class="pagination-row"><p id="range" role="status"></p><gov-pagination total="6" page-size="3" current="1" color="primary" size="s" accessible-page-label="Page" accessible-select-label="Choose a page" label-prev="Previous page" label-next="Next page" label-start="First page" label-end="Last page" aria-label="Toolkit pages"></gov-pagination></div><section id="detail" hidden aria-labelledby="detail-title"><p class="eyebrow" id="detail-meta"></p><h2 id="detail-title" tabindex="-1"></h2><p id="detail-body"></p><gov-button id="close" type="outlined" color="primary" size="m">Back to resources</gov-button></section><aside><strong>About this example</strong><p>These are original OpenDesign practice notes, not Czech government guidance. Cards, buttons and pagination use Gov Design System CE 4.7.1. Reading a resource is local and does not submit information.</p></aside></main>`;
await import('@gov-design-system-ce/components/dist/components/gov-card.js');
await import('@gov-design-system-ce/components/dist/components/gov-pagination.js');
let page=1,opened=-1;
const cards=document.querySelector('#cards'), detail=document.querySelector('#detail');
function render(){cards.replaceChildren();resources.slice((page-1)*3,page*3).forEach((r,i)=>{let id=(page-1)*3+i;let card=document.createElement('gov-card');card.innerHTML=`<h2 slot="headline">${r.title}</h2><p class="meta">${r.kind} · ${r.time}</p><p>${r.summary}</p><gov-button type="solid" color="primary" size="m" data-resource="${id}" aria-label="Read ${r.title}">Read resource</gov-button>`;cards.append(card)});document.querySelector('#range').textContent=`Resources ${(page-1)*3+1}–${page*3} of ${resources.length}`;detail.hidden=true;opened=-1;}
cards.addEventListener('gov-click',e=>{let b=e.target.closest('[data-resource]');if(!b)return;opened=Number(b.dataset.resource);let r=resources[opened];document.querySelector('#detail-meta').textContent=r.kind+' · '+r.time;document.querySelector('#detail-title').textContent=r.title;document.querySelector('#detail-body').textContent=r.body;detail.hidden=false;document.querySelector('#detail-title').focus();});
document.querySelector('gov-pagination').addEventListener('gov-page',e=>{page=e.detail.pagination.currentPage;render();});
document.querySelector('#close').addEventListener('gov-click',()=>{detail.hidden=true;const button=cards.querySelector(`[data-resource="${opened}"] button`);button?.focus();opened=-1;});render();

body{margin:0;color:var(--text-primary);font-family:Roboto,Arial,sans-serif}main{max-width:1160px;margin:auto;padding:32px}.eyebrow{font-size:12px;letter-spacing:.08em;font-weight:700;color:var(--color-primary-600)}h1{max-width:22ch;font-size:40px;line-height:1.15;margin:16px 0}.lead{max-width:66ch;font-size:18px;line-height:1.6}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:32px 0}.cards gov-card{height:100%}.cards h2{font-size:22px;line-height:1.3}.cards p{margin-bottom:20px;line-height:1.6}.meta{font-size:14px;color:#555}.pagination-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}#range{font-size:14px}#detail{padding:24px;border-left:4px solid var(--color-primary-600);background:var(--color-primary-50);margin-top:32px}#detail-body{max-width:66ch;line-height:1.7}aside{margin-top:32px;padding-top:24px;border-top:1px solid #ddd;font-size:14px;line-height:1.6}aside p{max-width:80ch}[hidden]{display:none!important}@media(max-width:760px){main{padding:20px}.cards{grid-template-columns:1fr}h1{font-size:32px}.pagination-row{display:block}gov-pagination{max-width:100%;overflow:auto}}

html,body{min-width:0}.eyebrow{overflow-wrap:anywhere}