@gov-design-system-ce/components 4.1.0-rc1 → 4.1.0

package/dist/components/gov-app.js

@@ -1,2 +0,0 @@
-import{p as t,H as o,h as n,d as e}from"./p-ae3dada7.js";function i(t){t=t||[];return Array.isArray(t)?t:[t]}function l(t){return`[Vaadin.Router] ${t}`}function s(t){if(typeof t!=="object"){return String(t)}const o=Object.prototype.toString.call(t).match(/ (.*)\]$/)[1];if(o==="Object"||o==="Array"){return`${o} ${JSON.stringify(t)}`}else{return o}}const a="module";const r="nomodule";const c=[a,r];function u(t){if(!t.match(/.+\.[m]?js$/)){throw new Error(l(`Unsupported type for bundle "${t}": .js or .mjs expected.`))}}function v(t){if(!t||!h(t.path)){throw new Error(l(`Expected route config to be an object with a "path" string property, or an array of such objects`))}const o=t.bundle;const n=["component","redirect","bundle"];if(!f(t.action)&&!Array.isArray(t.children)&&!f(t.children)&&!b(o)&&!n.some((o=>h(t[o])))){throw new Error(l(`Expected route config "${t.path}" to include either "${n.join('", "')}" `+`or "action" function but none found.`))}if(o){if(h(o)){u(o)}else if(!c.some((t=>t in o))){throw new Error(l('Expected route bundle to include either "'+r+'" or "'+a+'" keys, or both'))}else{c.forEach((t=>t in o&&u(o[t])))}}if(t.redirect){["bundle","component"].forEach((o=>{if(o in t){console.warn(l(`Route config "${t.path}" has both "redirect" and "${o}" properties, `+`and "redirect" will always override the latter. Did you mean to only use "${o}"?`))}}))}}function p(t){i(t).forEach((t=>v(t)))}function m(t,o){let n=document.head.querySelector('script[src="'+t+'"][async]');if(!n){n=document.createElement("script");n.setAttribute("src",t);if(o===a){n.setAttribute("type",a)}else if(o===r){n.setAttribute(r,"")}n.async=true}return new Promise(((t,o)=>{n.onreadystatechange=n.onload=o=>{n.__dynamicImportLoaded=true;t(o)};n.onerror=t=>{if(n.parentNode){n.parentNode.removeChild(n)}o(t)};if(n.parentNode===null){document.head.appendChild(n)}else if(n.__dynamicImportLoaded){t()}}))}function g(t){if(h(t)){return m(t)}else{return Promise.race(c.filter((o=>o in t)).map((o=>m(t[o],o))))}}function d(t,o){return!window.dispatchEvent(new CustomEvent(`vaadin-router-${t}`,{cancelable:t==="go",detail:o}))}function b(t){return typeof t==="object"&&!!t}function f(t){return typeof t==="function"}function h(t){return typeof t==="string"}function y(t){const o=new Error(l(`Page not found (${t.pathname})`));o.context=t;o.code=404;return o}const z=new class t{};function k(t){const o=t.port;const n=t.protocol;const e=n==="http:"&&o==="80";const i=n==="https:"&&o==="443";const l=e||i?t.hostname:t.host;return`${n}//${l}`}function x(t){if(t.defaultPrevented){return}if(t.button!==0){return}if(t.shiftKey||t.ctrlKey||t.altKey||t.metaKey){return}let o=t.target;const n=t.composedPath?t.composedPath():t.path||[];for(let t=0;t<n.length;t++){const e=n[t];if(e.nodeName&&e.nodeName.toLowerCase()==="a"){o=e;break}}while(o&&o.nodeName.toLowerCase()!=="a"){o=o.parentNode}if(!o||o.nodeName.toLowerCase()!=="a"){return}if(o.target&&o.target.toLowerCase()!=="_self"){return}if(o.hasAttribute("download")){return}if(o.hasAttribute("router-ignore")){return}if(o.pathname===window.location.pathname&&o.hash!==""){return}const e=o.origin||k(o);if(e!==window.location.origin){return}const{pathname:i,search:l,hash:s}=o;if(d("go",{pathname:i,search:l,hash:s})){t.preventDefault();if(t&&t.type==="click"){window.scrollTo(0,0)}}}const w={activate(){window.document.addEventListener("click",x)},inactivate(){window.document.removeEventListener("click",x)}};const P=/Trident/.test(navigator.userAgent);if(P&&!f(window.PopStateEvent)){window.PopStateEvent=function(t,o){o=o||{};var n=document.createEvent("Event");n.initEvent(t,Boolean(o.bubbles),Boolean(o.cancelable));n.state=o.state||null;return n};window.PopStateEvent.prototype=window.Event.prototype}function V(t){if(t.state==="vaadin-router-ignore"){return}const{pathname:o,search:n,hash:e}=window.location;d("go",{pathname:o,search:n,hash:e})}const j={activate(){window.addEventListener("popstate",V)},inactivate(){window.removeEventListener("popstate",V)}};var L=X;var S=N;var D=M;var q=B;var O=F;var T="/";var E="./";var C=new RegExp(["(\\\\.)","(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?"].join("|"),"g");function N(t,o){var n=[];var e=0;var i=0;var l="";var s=o&&o.delimiter||T;var a=o&&o.delimiters||E;var r=false;var c;while((c=C.exec(t))!==null){var u=c[0];var v=c[1];var p=c.index;l+=t.slice(i,p);i=p+u.length;if(v){l+=v[1];r=true;continue}var m="";var g=t[i];var d=c[2];var b=c[3];var f=c[4];var h=c[5];if(!r&&l.length){var y=l.length-1;if(a.indexOf(l[y])>-1){m=l[y];l=l.slice(0,y)}}if(l){n.push(l);l="";r=false}var z=m!==""&&g!==undefined&&g!==m;var k=h==="+"||h==="*";var x=h==="?"||h==="*";var w=m||s;var P=b||f;n.push({name:d||e++,prefix:m,delimiter:w,optional:x,repeat:k,partial:z,pattern:P?H(P):"[^"+A(w)+"]+?"})}if(l||i<t.length){n.push(l+t.substr(i))}return n}function M(t,o){return B(N(t,o))}function B(t){var o=new Array(t.length);for(var n=0;n<t.length;n++){if(typeof t[n]==="object"){o[n]=new RegExp("^(?:"+t[n].pattern+")$")}}return function(n,e){var i="";var l=e&&e.encode||encodeURIComponent;for(var s=0;s<t.length;s++){var a=t[s];if(typeof a==="string"){i+=a;continue}var r=n?n[a.name]:undefined;var c;if(Array.isArray(r)){if(!a.repeat){throw new TypeError('Expected "'+a.name+'" to not repeat, but got array')}if(r.length===0){if(a.optional)continue;throw new TypeError('Expected "'+a.name+'" to not be empty')}for(var u=0;u<r.length;u++){c=l(r[u],a);if(!o[s].test(c)){throw new TypeError('Expected all "'+a.name+'" to match "'+a.pattern+'"')}i+=(u===0?a.prefix:a.delimiter)+c}continue}if(typeof r==="string"||typeof r==="number"||typeof r==="boolean"){c=l(String(r),a);if(!o[s].test(c)){throw new TypeError('Expected "'+a.name+'" to match "'+a.pattern+'", but got "'+c+'"')}i+=a.prefix+c;continue}if(a.optional){if(a.partial)i+=a.prefix;continue}throw new TypeError('Expected "'+a.name+'" to be '+(a.repeat?"an array":"a string"))}return i}}function A(t){return t.replace(/([.+*?=^!:${}()[\]|/\\])/g,"\\$1")}function H(t){return t.replace(/([=!:$/()])/g,"\\$1")}function _(t){return t&&t.sensitive?"":"i"}function Z(t,o){if(!o)return t;var n=t.source.match(/\((?!\?)/g);if(n){for(var e=0;e<n.length;e++){o.push({name:e,prefix:null,delimiter:null,optional:false,repeat:false,partial:false,pattern:null})}}return t}function I(t,o,n){var e=[];for(var i=0;i<t.length;i++){e.push(X(t[i],o,n).source)}return new RegExp("(?:"+e.join("|")+")",_(n))}function R(t,o,n){return F(N(t,n),o,n)}function F(t,o,n){n=n||{};var e=n.strict;var i=n.start!==false;var l=n.end!==false;var s=A(n.delimiter||T);var a=n.delimiters||E;var r=[].concat(n.endsWith||[]).map(A).concat("$").join("|");var c=i?"^":"";var u=t.length===0;for(var v=0;v<t.length;v++){var p=t[v];if(typeof p==="string"){c+=A(p);u=v===t.length-1&&a.indexOf(p[p.length-1])>-1}else{var m=p.repeat?"(?:"+p.pattern+")(?:"+A(p.delimiter)+"(?:"+p.pattern+"))*":p.pattern;if(o)o.push(p);if(p.optional){if(p.partial){c+=A(p.prefix)+"("+m+")?"}else{c+="(?:"+A(p.prefix)+"("+m+"))?"}}else{c+=A(p.prefix)+"("+m+")"}}}if(l){if(!e)c+="(?:"+s+")?";c+=r==="$"?"$":"(?="+r+")"}else{if(!e)c+="(?:"+s+"(?="+r+"))?";if(!u)c+="(?="+s+"|"+r+")"}return new RegExp(c,_(n))}function X(t,o,n){if(t instanceof RegExp){return Z(t,o)}if(Array.isArray(t)){return I(t,o,n)}return R(t,o,n)}L.parse=S;L.compile=D;L.tokensToFunction=q;L.tokensToRegExp=O;const{hasOwnProperty:U}=Object.prototype;const $=new Map;$.set("|false",{keys:[],pattern:/(?:)/});function K(t){try{return decodeURIComponent(t)}catch(o){return t}}function W(t,o,n,e,i){n=!!n;const l=`${t}|${n}`;let s=$.get(l);if(!s){const o=[];s={keys:o,pattern:L(t,o,{end:n,strict:t===""})};$.set(l,s)}const a=s.pattern.exec(o);if(!a){return null}const r=Object.assign({},i);for(let t=1;t<a.length;t++){const o=s.keys[t-1];const n=o.name;const e=a[t];if(e!==undefined||!U.call(r,n)){if(o.repeat){r[n]=e?e.split(o.delimiter).map(K):[]}else{r[n]=e?K(e):e}}}return{path:a[0],keys:(e||[]).concat(s.keys),params:r}}function G(t,o,n,e,i){let l;let s;let a=0;let r=t.path||"";if(r.charAt(0)==="/"){if(n){r=r.substr(1)}n=true}return{next(c){if(t===c){return{done:true}}const u=t.__children=t.__children||t.children;if(!l){l=W(r,o,!u,e,i);if(l){return{done:false,value:{route:t,keys:l.keys,params:l.params,path:l.path}}}}if(l&&u){while(a<u.length){if(!s){const e=u[a];e.parent=t;let i=l.path.length;if(i>0&&o.charAt(i)==="/"){i+=1}s=G(e,o.substr(i),n,l.keys,l.params)}const e=s.next(c);if(!e.done){return{done:false,value:e.value}}s=null;a++}}return{done:true}}}}function J(t){if(f(t.route.action)){return t.route.action(t)}return undefined}function Y(t,o){let n=o;while(n){n=n.parent;if(n===t){return true}}return false}function Q(t){let o=`Path '${t.pathname}' is not properly resolved due to an error.`;const n=(t.route||{}).path;if(n){o+=` Resolution had failed on route: '${n}'`}return o}function tt(t,o){const{route:n,path:e}=o;if(n&&!n.__synthetic){const o={path:e,route:n};if(!t.chain){t.chain=[]}else{if(n.parent){let o=t.chain.length;while(o--&&t.chain[o].route&&t.chain[o].route!==n.parent){t.chain.pop()}}}t.chain.push(o)}}class ot{constructor(t,o={}){if(Object(t)!==t){throw new TypeError("Invalid routes")}this.baseUrl=o.baseUrl||"";this.errorHandler=o.errorHandler;this.resolveRoute=o.resolveRoute||J;this.context=Object.assign({resolver:this},o.context);this.root=Array.isArray(t)?{path:"",__children:t,parent:null,__synthetic:true}:t;this.root.parent=null}getRoutes(){return[...this.root.__children]}setRoutes(t){p(t);const o=[...i(t)];this.root.__children=o}addRoutes(t){p(t);this.root.__children.push(...i(t));return this.getRoutes()}removeRoutes(){this.setRoutes([])}resolve(t){const o=Object.assign({},this.context,h(t)?{pathname:t}:t);const n=G(this.root,this.__normalizePathname(o.pathname),this.baseUrl);const e=this.resolveRoute;let i=null;let l=null;let s=o;function a(t,r=i.value.route,c){const u=c===null&&i.value.route;i=l||n.next(u);l=null;if(!t){if(i.done||!Y(r,i.value.route)){l=i;return Promise.resolve(z)}}if(i.done){return Promise.reject(y(o))}s=Object.assign(s?{chain:s.chain?s.chain.slice(0):[]}:{},o,i.value);tt(s,i.value);return Promise.resolve(e(s)).then((o=>{if(o!==null&&o!==undefined&&o!==z){s.result=o.result||o;return s}return a(t,r,o)}))}o.next=a;return Promise.resolve().then((()=>a(true,this.root))).catch((t=>{const o=Q(s);if(!t){t=new Error(o)}else{console.warn(o)}t.context=t.context||s;if(!(t instanceof DOMException)){t.code=t.code||500}if(this.errorHandler){s.result=this.errorHandler(t);return s}throw t}))}static __createUrl(t,o){return new URL(t,o)}get __effectiveBaseUrl(){return this.baseUrl?this.constructor.__createUrl(this.baseUrl,document.baseURI||document.URL).href.replace(/[^\/]*$/,""):""}__normalizePathname(t){if(!this.baseUrl){return t}const o=this.__effectiveBaseUrl;const n=this.constructor.__createUrl(t,o).href;if(n.slice(0,o.length)===o){return n.slice(o.length)}}}ot.pathToRegexp=L;const{pathToRegexp:nt}=ot;const et=new Map;function it(t,o,n){const e=o.name||o.component;if(e){if(t.has(e)){t.get(e).push(o)}else{t.set(e,[o])}}if(Array.isArray(n)){for(let e=0;e<n.length;e++){const i=n[e];i.parent=o;it(t,i,i.__children||i.children)}}}function lt(t,o){const n=t.get(o);if(n&&n.length>1){throw new Error(`Duplicate route with name "${o}".`+` Try seting unique 'name' route properties.`)}return n&&n[0]}function st(t){let o=t.path;o=Array.isArray(o)?o[0]:o;return o!==undefined?o:""}function at(t,o={}){if(!(t instanceof ot)){throw new TypeError("An instance of Resolver is expected")}const n=new Map;return(e,i)=>{let l=lt(n,e);if(!l){n.clear();it(n,t.root,t.root.__children);l=lt(n,e);if(!l){throw new Error(`Route "${e}" not found`)}}let s=et.get(l.fullPath);if(!s){let t=st(l);let o=l.parent;while(o){const n=st(o);if(n){t=n.replace(/\/$/,"")+"/"+t.replace(/^\//,"")}o=o.parent}const n=nt.parse(t);const e=nt.tokensToFunction(n);const i=Object.create(null);for(let t=0;t<n.length;t++){if(!h(n[t])){i[n[t].name]=true}}s={toPath:e,keys:i};et.set(t,s);l.fullPath=t}let a=s.toPath(i,o)||"/";if(o.stringifyQueryParams&&i){const t={};const n=Object.keys(i);for(let o=0;o<n.length;o++){const e=n[o];if(!s.keys[e]){t[e]=i[e]}}const e=o.stringifyQueryParams(t);if(e){a+=e.charAt(0)==="?"?e:`?${e}`}}return a}}let rt=[];function ct(t){rt.forEach((t=>t.inactivate()));t.forEach((t=>t.activate()));rt=t}const ut=t=>{const o=getComputedStyle(t).getPropertyValue("animation-name");return o&&o!=="none"};const vt=(t,o)=>{const n=()=>{t.removeEventListener("animationend",n);o()};t.addEventListener("animationend",n)};function pt(t,o){t.classList.add(o);return new Promise((n=>{if(ut(t)){const e=t.getBoundingClientRect();const i=`height: ${e.bottom-e.top}px; width: ${e.right-e.left}px`;t.setAttribute("style",`position: absolute; ${i}`);vt(t,(()=>{t.classList.remove(o);t.removeAttribute("style");n()}))}else{t.classList.remove(o);n()}}))}const mt=256;function gt(t){return t!==null&&t!==undefined}function dt(t){const o=Object.assign({},t);delete o.next;return o}function bt({pathname:t="",search:o="",hash:n="",chain:e=[],params:i={},redirectFrom:l,resolver:s},a){const r=e.map((t=>t.route));return{baseUrl:s&&s.baseUrl||"",pathname:t,search:o,hash:n,routes:r,route:a||r.length&&r[r.length-1]||null,params:i,redirectFrom:l,getUrl:(t={})=>wt(Vt.pathToRegexp.compile(Pt(r))(Object.assign({},i,t)),s)}}function ft(t,o){const n=Object.assign({},t.params);return{redirect:{pathname:o,from:t.pathname,params:n}}}function ht(t,o){o.location=bt(t);const n=t.chain.map((t=>t.route)).indexOf(t.route);t.chain[n].element=o;return o}function yt(t,o,n){if(f(t)){return t.apply(n,o)}}function zt(t,o,n){return e=>{if(e&&(e.cancel||e.redirect)){return e}if(n){return yt(n[t],o,n)}}}function kt(t,o){if(!Array.isArray(t)&&!b(t)){throw new Error(l(`Incorrect "children" value for the route ${o.path}: expected array or object, but got ${t}`))}o.__children=[];const n=i(t);for(let t=0;t<n.length;t++){v(n[t]);o.__children.push(n[t])}}function xt(t){if(t&&t.length){const o=t[0].parentNode;for(let n=0;n<t.length;n++){o.removeChild(t[n])}}}function wt(t,o){const n=o.__effectiveBaseUrl;return n?o.constructor.__createUrl(t.replace(/^\//,""),n).pathname:t}function Pt(t){return t.map((t=>t.path)).reduce(((t,o)=>{if(o.length){return t.replace(/\/$/,"")+"/"+o.replace(/^\//,"")}return t}),"")}class Vt extends ot{constructor(t,o){const n=document.head.querySelector("base");const e=n&&n.getAttribute("href");super([],Object.assign({baseUrl:e&&ot.__createUrl(e,document.URL).pathname.replace(/[^\/]*$/,"")},o));this.resolveRoute=t=>this.__resolveRoute(t);const i=Vt.NavigationTrigger;Vt.setTriggers.apply(Vt,Object.keys(i).map((t=>i[t])));this.ready=Promise.resolve(t);this.location=bt({resolver:this});this.__lastStartedRenderId=0;this.__navigationEventHandler=this.__onNavigationEvent.bind(this);this.setOutlet(t);this.subscribe();this.__createdByRouter=new WeakMap;this.__addedByRouter=new WeakMap}__resolveRoute(t){const o=t.route;let n=Promise.resolve();if(f(o.children)){n=n.then((()=>o.children(dt(t)))).then((t=>{if(!gt(t)&&!f(o.children)){t=o.children}kt(t,o)}))}const e={redirect:o=>ft(t,o),component:t=>{const o=document.createElement(t);this.__createdByRouter.set(o,true);return o}};return n.then((()=>{if(this.__isLatestRender(t)){return yt(o.action,[t,e],o)}})).then((t=>{if(gt(t)){if(t instanceof HTMLElement||t.redirect||t===z){return t}}if(h(o.redirect)){return e.redirect(o.redirect)}if(o.bundle){return g(o.bundle).then((()=>{}),(()=>{throw new Error(l(`Bundle not found: ${o.bundle}. Check if the file name is correct`))}))}})).then((t=>{if(gt(t)){return t}if(h(o.component)){return e.component(o.component)}}))}setOutlet(t){if(t){this.__ensureOutlet(t)}this.__outlet=t}getOutlet(){return this.__outlet}setRoutes(t,o=false){this.__previousContext=undefined;this.__urlForName=undefined;super.setRoutes(t);if(!o){this.__onNavigationEvent()}return this.ready}render(t,o){const n=++this.__lastStartedRenderId;const e=Object.assign({search:"",hash:""},h(t)?{pathname:t}:t,{__renderId:n});this.ready=this.resolve(e).then((t=>this.__fullyResolveChain(t))).then((t=>{if(this.__isLatestRender(t)){const e=this.__previousContext;if(t===e){this.__updateBrowserHistory(e,true);return this.location}this.location=bt(t);if(o){this.__updateBrowserHistory(t,n===1)}d("location-changed",{router:this,location:this.location});if(t.__skipAttach){this.__copyUnchangedElements(t,e);this.__previousContext=t;return this.location}this.__addAppearingContent(t,e);const i=this.__animateIfNeeded(t);this.__runOnAfterEnterCallbacks(t);this.__runOnAfterLeaveCallbacks(t,e);return i.then((()=>{if(this.__isLatestRender(t)){this.__removeDisappearingContent();this.__previousContext=t;return this.location}}))}})).catch((t=>{if(n===this.__lastStartedRenderId){if(o){this.__updateBrowserHistory(e)}xt(this.__outlet&&this.__outlet.children);this.location=bt(Object.assign(e,{resolver:this}));d("error",Object.assign({router:this,error:t},e));throw t}}));return this.ready}__fullyResolveChain(t,o=t){return this.__findComponentContextAfterAllRedirects(o).then((n=>{const e=n!==o;const i=e?n:t;const l=wt(Pt(n.chain),n.resolver);const s=l===n.pathname;const a=(t,o=t.route,n)=>t.next(undefined,o,n).then((n=>{if(n===null||n===z){if(s){return t}else if(o.parent!==null){return a(t,o.parent,n)}else{return n}}return n}));return a(n).then((t=>{if(t===null||t===z){throw y(i)}return t&&t!==z&&t!==n?this.__fullyResolveChain(i,t):this.__amendWithOnBeforeCallbacks(n)}))}))}__findComponentContextAfterAllRedirects(t){const o=t.result;if(o instanceof HTMLElement){ht(t,o);return Promise.resolve(t)}else if(o.redirect){return this.__redirect(o.redirect,t.__redirectCount,t.__renderId).then((t=>this.__findComponentContextAfterAllRedirects(t)))}else if(o instanceof Error){return Promise.reject(o)}else{return Promise.reject(new Error(l(`Invalid route resolution result for path "${t.pathname}". `+`Expected redirect object or HTML element, but got: "${s(o)}". `+`Double check the action return value for the route.`)))}}__amendWithOnBeforeCallbacks(t){return this.__runOnBeforeCallbacks(t).then((o=>{if(o===this.__previousContext||o===t){return o}return this.__fullyResolveChain(o)}))}__runOnBeforeCallbacks(t){const o=this.__previousContext||{};const n=o.chain||[];const e=t.chain;let i=Promise.resolve();const l=()=>({cancel:true});const s=o=>ft(t,o);t.__divergedChainIndex=0;t.__skipAttach=false;if(n.length){for(let o=0;o<Math.min(n.length,e.length);o=++t.__divergedChainIndex){if(n[o].route!==e[o].route||n[o].path!==e[o].path&&n[o].element!==e[o].element||!this.__isReusableElement(n[o].element,e[o].element)){break}}t.__skipAttach=e.length===n.length&&t.__divergedChainIndex==e.length&&this.__isReusableElement(t.result,o.result);if(t.__skipAttach){for(let o=e.length-1;o>=0;o--){i=this.__runOnBeforeLeaveCallbacks(i,t,{prevent:l},n[o])}for(let o=0;o<e.length;o++){i=this.__runOnBeforeEnterCallbacks(i,t,{prevent:l,redirect:s},e[o]);n[o].element.location=bt(t,n[o].route)}}else{for(let o=n.length-1;o>=t.__divergedChainIndex;o--){i=this.__runOnBeforeLeaveCallbacks(i,t,{prevent:l},n[o])}}}if(!t.__skipAttach){for(let o=0;o<e.length;o++){if(o<t.__divergedChainIndex){if(o<n.length&&n[o].element){n[o].element.location=bt(t,n[o].route)}}else{i=this.__runOnBeforeEnterCallbacks(i,t,{prevent:l,redirect:s},e[o]);if(e[o].element){e[o].element.location=bt(t,e[o].route)}}}}return i.then((o=>{if(o){if(o.cancel){this.__previousContext.__renderId=t.__renderId;return this.__previousContext}if(o.redirect){return this.__redirect(o.redirect,t.__redirectCount,t.__renderId)}}return t}))}__runOnBeforeLeaveCallbacks(t,o,n,e){const i=bt(o);return t.then((t=>{if(this.__isLatestRender(o)){const o=zt("onBeforeLeave",[i,n,this],e.element);return o(t)}})).then((t=>{if(!(t||{}).redirect){return t}}))}__runOnBeforeEnterCallbacks(t,o,n,e){const i=bt(o,e.route);return t.then((t=>{if(this.__isLatestRender(o)){const o=zt("onBeforeEnter",[i,n,this],e.element);return o(t)}}))}__isReusableElement(t,o){if(t&&o){return this.__createdByRouter.get(t)&&this.__createdByRouter.get(o)?t.localName===o.localName:t===o}return false}__isLatestRender(t){return t.__renderId===this.__lastStartedRenderId}__redirect(t,o,n){if(o>mt){throw new Error(l(`Too many redirects when rendering ${t.from}`))}return this.resolve({pathname:this.urlForPath(t.pathname,t.params),redirectFrom:t.from,__redirectCount:(o||0)+1,__renderId:n})}__ensureOutlet(t=this.__outlet){if(!(t instanceof Node)){throw new TypeError(l(`Expected router outlet to be a valid DOM Node (but got ${t})`))}}__updateBrowserHistory({pathname:t,search:o="",hash:n=""},e){if(window.location.pathname!==t||window.location.search!==o||window.location.hash!==n){const i=e?"replaceState":"pushState";window.history[i](null,document.title,t+o+n);window.dispatchEvent(new PopStateEvent("popstate",{state:"vaadin-router-ignore"}))}}__copyUnchangedElements(t,o){let n=this.__outlet;for(let e=0;e<t.__divergedChainIndex;e++){const i=o&&o.chain[e].element;if(i){if(i.parentNode===n){t.chain[e].element=i;n=i}else{break}}}return n}__addAppearingContent(t,o){this.__ensureOutlet();this.__removeAppearingContent();const n=this.__copyUnchangedElements(t,o);this.__appearingContent=[];this.__disappearingContent=Array.from(n.children).filter((o=>this.__addedByRouter.get(o)&&o!==t.result));let e=n;for(let o=t.__divergedChainIndex;o<t.chain.length;o++){const i=t.chain[o].element;if(i){e.appendChild(i);this.__addedByRouter.set(i,true);if(e===n){this.__appearingContent.push(i)}e=i}}}__removeDisappearingContent(){if(this.__disappearingContent){xt(this.__disappearingContent)}this.__disappearingContent=null;this.__appearingContent=null}__removeAppearingContent(){if(this.__disappearingContent&&this.__appearingContent){xt(this.__appearingContent);this.__disappearingContent=null;this.__appearingContent=null}}__runOnAfterLeaveCallbacks(t,o){if(!o){return}for(let n=o.chain.length-1;n>=t.__divergedChainIndex;n--){if(!this.__isLatestRender(t)){break}const e=o.chain[n].element;if(!e){continue}try{const n=bt(t);yt(e.onAfterLeave,[n,{},o.resolver],e)}finally{if(this.__disappearingContent.indexOf(e)>-1){xt(e.children)}}}}__runOnAfterEnterCallbacks(t){for(let o=t.__divergedChainIndex;o<t.chain.length;o++){if(!this.__isLatestRender(t)){break}const n=t.chain[o].element||{};const e=bt(t,t.chain[o].route);yt(n.onAfterEnter,[e,{},t.resolver],n)}}__animateIfNeeded(t){const o=(this.__disappearingContent||[])[0];const n=(this.__appearingContent||[])[0];const e=[];const i=t.chain;let l;for(let t=i.length;t>0;t--){if(i[t-1].route.animate){l=i[t-1].route.animate;break}}if(o&&n&&l){const t=b(l)&&l.leave||"leaving";const i=b(l)&&l.enter||"entering";e.push(pt(o,t));e.push(pt(n,i))}return Promise.all(e).then((()=>t))}subscribe(){window.addEventListener("vaadin-router-go",this.__navigationEventHandler)}unsubscribe(){window.removeEventListener("vaadin-router-go",this.__navigationEventHandler)}__onNavigationEvent(t){const{pathname:o,search:n,hash:e}=t?t.detail:window.location;if(h(this.__normalizePathname(o))){if(t&&t.preventDefault){t.preventDefault()}this.render({pathname:o,search:n,hash:e},true)}}static setTriggers(...t){ct(t)}urlForName(t,o){if(!this.__urlForName){this.__urlForName=at(this)}return wt(this.__urlForName(t,o),this)}urlForPath(t,o){return wt(Vt.pathToRegexp.compile(t)(o),this)}static go(t){const{pathname:o,search:n,hash:e}=h(t)?this.__createUrl(t,"http://a"):t;return d("go",{pathname:o,search:n,hash:e})}}const jt=/\/\*[\*!]\s+vaadin-dev-mode:start([\s\S]*)vaadin-dev-mode:end\s+\*\*\//i;const Lt=window.Vaadin&&window.Vaadin.Flow&&window.Vaadin.Flow.clients;function St(){function t(){return true}return Et(t)}function Dt(){try{if(qt()){return true}if(!Ot()){return false}if(Lt){return!Tt()}return!St()}catch(t){return false}}function qt(){return localStorage.getItem("vaadin.developmentmode.force")}function Ot(){return["localhost","127.0.0.1"].indexOf(window.location.hostname)>=0}function Tt(){if(Lt){const t=Object.keys(Lt).map((t=>Lt[t])).filter((t=>t.productionMode));if(t.length>0){return true}}return false}function Et(t,o){if(typeof t!=="function"){return}const n=jt.exec(t.toString());if(n){try{t=new Function(n[1])}catch(t){console.log("vaadin-development-mode-detector: uncommentAndRun() failed",t)}}return t(o)}window["Vaadin"]=window["Vaadin"]||{};const Ct=function(t,o){if(window.Vaadin.developmentMode){return Et(t,o)}};if(window.Vaadin.developmentMode===undefined){window.Vaadin.developmentMode=Dt()}function Nt(){}const Mt=function(){if(typeof Ct==="function"){return Ct(Nt)}};window.Vaadin=window.Vaadin||{};window.Vaadin.registrations=window.Vaadin.registrations||[];window.Vaadin.registrations.push({is:"@vaadin/router",version:"1.7.4"});Mt();Vt.NavigationTrigger={POPSTATE:j,CLICK:w};class Bt extends HTMLElement{connectedCallback(){this.innerHTML=`\n\t\t<h3>Accordion</h3>\n\t\t<div class="container-view">\n\t\t\t<h4>Size XS</h4>\n\t\t\t<gov-accordion size="xs" accessible-label="Tot je základní list">\n\t\t\t\t<gov-accordion-item open aria-label="Toto je label?">\n\t\t\t\t\t<h3 slot="label">Font Awesome Icon</h3>\n\t\t\t\t\t<p slot="annotation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus</p>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t<gov-icon slot="toggle-icon" name="info"></gov-icon>\n\t\t\t\t</gov-accordion-item>\n\t\t\t\t<gov-accordion-item disabled>\n\t\t\t\t\t<h3 slot="label">Kontaktní osoby</h3>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t</gov-accordion-item>\n\t\t\t\t<gov-accordion-item>\n\t\t\t\t\t<h3 slot="label">Působnost v agendách</h3>\n\t\t\t\t\t<gov-icon slot="icon" name="info"></gov-icon>\n\t\t\t\t\t<p slot="annotation">Anotace Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>\n\t\t\t\t\t<gov-tag color="primary" type="bold" size="xs" slot="suffix">\n\t\t\t\t\t\tTag\n\t\t\t\t\t</gov-tag>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t</gov-accordion-item>\n\t\t\t\t<gov-accordion-item>\n\t\t\t\t\t<h3 slot="label">Zřizované organizace</h3>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t</gov-accordion-item>\n\t\t\t</gov-accordion>\n\t\t\t<br>\n\t\t\t<h4>Size XS no-border</h4>\n\t\t\t<gov-accordion size="xs" no-border>\n\t\t\t\t<gov-accordion-item>\n\t\t\t\t\t<h3 slot="label">Font Awesome Icon</h3>\n\t\t\t\t\t<p slot="annotation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus</p>\n\t\t\t\t\t<gov-icon slot="icon" name="info"></gov-icon>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t</gov-accordion-item>\n\t\t\t\t<gov-accordion-item label="Kontaktní osoby">\n\t\t\t\t\t<h3 slot="label">Kontaktní osoby</h3>\n\t\t\t\t\t<gov-icon slot="icon" name="info"></gov-icon>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t</gov-accordion-item>\n\t\t\t\t<gov-accordion-item label="Působnost v agendách">\n\t\t\t\t\t<p slot="label">Působnost v agendách</p>\n\t\t\t\t\t<gov-icon slot="icon" name="info"></gov-icon>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t</gov-accordion-item>\n\t\t\t\t<gov-accordion-item label="Zřizované organizace">\n\t\t\t\t\t<span slot="label">Zřizované organizace</span>\n\t\t\t\t\t<gov-icon slot="icon" name="info"></gov-icon>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t</gov-accordion-item>\n\t\t\t</gov-accordion>\n\t\t\t<br />\n\t\t\t<h4>Size S</h4>\n\t\t\t<gov-accordion size="s" color="secondary">\n\t\t\t\t<gov-accordion-item>\n\t\t\t\t\t<h3 slot="label">Font Awesome Icon</h3>\n\t\t\t\t\t<p slot="annotation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus</p>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t<gov-icon slot="toggle-icon" name="info"></gov-icon>\n\t\t\t\t</gov-accordion-item>\n\t\t\t\t<gov-accordion-item disabled>\n\t\t\t\t\t<h3 slot="label">Kontaktní osoby</h3>\n\t\t\t\t\t<gov-icon slot="icon" name="info"></gov-icon>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t</gov-accordion-item>\n\t\t\t\t<gov-accordion-item open>\n\t\t\t\t\t<h3 slot="label">Působnost v agendách</h3>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t</gov-accordion-item>\n\t\t\t\t<gov-accordion-item>\n\t\t\t\t\t<h3 slot="label">Zřizované organizace</h3>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t</gov-accordion-item>\n\t\t\t</gov-accordion>\n\t\t\t<br>\n\t\t\t<h4>Size S + icon + tag</h4>\n\t\t\t<gov-accordion size="s">\n\t\t\t\t<gov-accordion-item>\n\t\t\t\t\t<h3 slot="label">Font Awesome Icon</h3>\n\t\t\t\t\t<p slot="annotation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus</p>\n\t\t\t\t\t<gov-icon slot="icon" name="info"></gov-icon>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t</gov-accordion-item>\n\t\t\t\t<gov-accordion-item label="Kontaktní osoby">\n\t\t\t\t\t<h3 slot="label">Kontaktní osoby</h3>\n\t\t\t\t\t<gov-icon slot="icon" name="info"></gov-icon>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t</gov-accordion-item>\n\t\t\t\t<gov-accordion-item label="Působnost v agendách">\n\t\t\t\t\t<h3 slot="label">Působnost v agendách</h3>\n\t\t\t\t\t<gov-icon slot="icon" name="info"></gov-icon>\n\t\t\t\t\t<gov-tag color="primary" type="bold" size="s" slot="suffix">\n\t\t\t\t\t\tTag\n\t\t\t\t\t</gov-tag>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t</gov-accordion-item>\n\t\t\t\t<gov-accordion-item label="Zřizované organizace">\n\t\t\t\t\t<h3 slot="label">Zřizované organizace</h3>\n\t\t\t\t\t<gov-icon slot="icon" name="info"></gov-icon>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t</gov-accordion-item>\n\t\t\t</gov-accordion>\n\t\t\t<br />\n\t\t\t<h4>Size M</h4>\n\t\t\t<gov-accordion size="m">\n\t\t\t\t<gov-accordion-item open>\n\t\t\t\t\t<h3 slot="label">Font Awesome Icon</h3>\n\t\t\t\t\t<p slot="annotation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus</p>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t<gov-icon slot="toggle-icon" name="info"></gov-icon>\n\t\t\t\t</gov-accordion-item>\n\t\t\t\t<gov-accordion-item disabled>\n\t\t\t\t\t<h3 slot="label">Kontaktní osoby</h3>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t</gov-accordion-item>\n\t\t\t\t<gov-accordion-item>\n\t\t\t\t\t<h3 slot="label">Působnost v agendách</h3>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t</gov-accordion-item>\n\t\t\t\t<gov-accordion-item>\n\t\t\t\t\t<h3 slot="label">Zřizované organizace</h3>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t</gov-accordion-item>\n\t\t\t</gov-accordion>\n\t\t\t<br>\n\t\t\t<h4>Size M + icon + tag + accordion in accordion</h4>\n\t\t\t<gov-accordion size="m">\n\t\t\t\t<gov-accordion-item>\n\t\t\t\t\t<h3 slot="label">Font Awesome Icon</h3>\n\t\t\t\t\t<p slot="annotation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus</p>\n\t\t\t\t\t<gov-icon slot="icon" name="info"></gov-icon>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t</gov-accordion-item>\n\t\t\t\t<gov-accordion-item open label="Kontaktní osoby">\n\t\t\t\t\t<h3 slot="label">Kontaktní osoby</h3>\n\t\t\t\t\t<gov-icon slot="icon" name="info"></gov-icon>\n\t\t\t\t\t<gov-tag color="primary" type="subtle" size="m" slot="suffix">\n\t\t\t\t\t\tTag\n\t\t\t\t\t</gov-tag>\n\t\t\t\t\t\t\t<gov-accordion size="xs">\n\t\t\t\t\t\t\t\t<gov-accordion-item>\n\t\t\t\t\t\t\t\t\t<h3 slot="label">Font Awesome Icon</h3>\n\t\t\t\t\t\t\t\t\t<gov-icon slot="icon" name="info"></gov-icon>\n\t\t\t\t\t\t\t\t\t<p slot="annotation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus</p>\n\t\t\t\t\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t\t\t\t\t<gov-icon slot="toggle-icon" name="info"></gov-icon>\n\t\t\t\t\t\t\t\t</gov-accordion-item>\n\t\t\t\t\t\t\t\t<gov-accordion-item disabled>\n\t\t\t\t\t\t\t\t\t<h3 slot="label">Kontaktní osoby</h3>\n\t\t\t\t\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t\t\t\t</gov-accordion-item>\n\t\t\t\t\t\t\t\t<gov-accordion-item>\n\t\t\t\t\t\t\t\t\t<h3 slot="label">Působnost v agendách</h3>\n\t\t\t\t\t\t\t\t\t<gov-icon slot="icon" name="info"></gov-icon>\n\t\t\t\t\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t\t\t\t</gov-accordion-item>\n\t\t\t\t\t\t\t\t<gov-accordion-item open>\n\t\t\t\t\t\t\t\t\t<h3 slot="label">Zřizované organizace</h3>\n\t\t\t\t\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t\t\t\t</gov-accordion-item>\n\t\t\t\t\t\t\t</gov-accordion>\n\t\t\t\t</gov-accordion-item>\n\t\t\t\t<gov-accordion-item label="Působnost v agendách">\n\t\t\t\t\t<h3 slot="label">Působnost v agendách</h3>\n\t\t\t\t\t<gov-icon slot="icon" name="info"></gov-icon>\n\t\t\t\t\t<gov-tag color="primary" type="bold" size="xs" slot="suffix">\n\t\t\t\t\t\tTag\n\t\t\t\t\t</gov-tag>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t</gov-accordion-item>\n\t\t\t\t<gov-accordion-item label="Zřizované organizace">\n\t\t\t\t\t<h3 slot="label">Zřizované organizace</h3>\n\t\t\t\t\t<gov-icon slot="icon" name="info"></gov-icon>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t</gov-accordion-item>\n\t\t\t</gov-accordion>\n\t\t\t<br />\n\t\t\t<h4>Size L</h4>\n\t\t\t<gov-accordion size="l">\n\t\t\t\t<gov-accordion-item>\n\t\t\t\t\t<h3 slot="label">Font Awesome Icon</h3>\n\t\t\t\t\t<p slot="annotation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus</p>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t<gov-icon slot="toggle-icon" name="info"></gov-icon>\n\t\t\t\t</gov-accordion-item>\n\t\t\t\t<gov-accordion-item disabled>\n\t\t\t\t\t<h3 slot="label">Kontaktní osoby</h3>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t</gov-accordion-item>\n\t\t\t\t<gov-accordion-item open>\n\t\t\t\t\t<h3 slot="label">Působnost v agendách</h3>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t</gov-accordion-item>\n\t\t\t\t<gov-accordion-item>\n\t\t\t\t\t<h3 slot="label">Zřizované organizace</h3>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t</gov-accordion-item>\n\t\t\t</gov-accordion>\n\t\t\t<br>\n\t\t\t<h4>Size L + icon + tag</h4>\n\t\t\t<gov-accordion size="l">\n\t\t\t\t<gov-accordion-item>\n\t\t\t\t\t<h3 slot="label">Font Awesome Icon</h3>\n\t\t\t\t\t<p slot="annotation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus</p>\n\t\t\t\t\t<gov-icon slot="icon" name="info"></gov-icon>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t</gov-accordion-item>\n\t\t\t\t<gov-accordion-item label="Kontaktní osoby">\n\t\t\t\t\t<h3 slot="label">Kontaktní osoby</h3>\n\t\t\t\t\t<gov-icon slot="icon" name="info"></gov-icon>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t</gov-accordion-item>\n\t\t\t\t<gov-accordion-item label="Působnost v agendách">\n\t\t\t\t\t<h3 slot="label">Působnost v agendách</h3>\n\t\t\t\t\t<gov-icon slot="icon" name="info"></gov-icon>\n\t\t\t\t\t<gov-tag color="primary" type="bold" size="m" slot="suffix">\n\t\t\t\t\t\tTag\n\t\t\t\t\t</gov-tag>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t</gov-accordion-item>\n\t\t\t\t<gov-accordion-item label="Zřizované organizace">\n\t\t\t\t\t<h3 slot="label">Zřizované organizace</h3>\n\t\t\t\t\t<gov-icon slot="icon" name="info"></gov-icon>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t</gov-accordion-item>\n\t\t\t</gov-accordion>\n\t\t\t<br />\n\t\t\t<h4>Size XL</h4>\n\t\t\t<gov-accordion size="xl">\n\t\t\t\t<gov-accordion-item>\n\t\t\t\t\t<h3 slot="label">Font Awesome Icon</h3>\n\t\t\t\t\t<p slot="annotation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus</p>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t<gov-icon slot="toggle-icon" name="info"></gov-icon>\n\t\t\t\t</gov-accordion-item>\n\t\t\t\t<gov-accordion-item disabled open>\n\t\t\t\t\t<h3 slot="label">Kontaktní osoby</h3>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t</gov-accordion-item>\n\t\t\t\t<gov-accordion-item>\n\t\t\t\t\t<h3 slot="label">Působnost v agendách</h3>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t</gov-accordion-item>\n\t\t\t\t<gov-accordion-item>\n\t\t\t\t\t<h3 slot="label">Zřizované organizace</h3>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t</gov-accordion-item>\n\t\t\t</gov-accordion>\n\t\t\t<br>\n\t\t\t<h4>Size XL + icon + tag</h4>\n\t\t\t<gov-accordion size="xl">\n\t\t\t\t<gov-accordion-item>\n\t\t\t\t\t<h3 slot="label">Font Awesome Icon</h3>\n\t\t\t\t\t<p slot="annotation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus</p>\n\t\t\t\t\t<gov-icon slot="icon" name="info"></gov-icon>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t</gov-accordion-item>\n\t\t\t\t<gov-accordion-item label="Kontaktní osoby">\n\t\t\t\t\t<h3 slot="label">Kontaktní osoby</h3>\n\t\t\t\t\t<gov-icon slot="icon" name="info"></gov-icon>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t</gov-accordion-item>\n\t\t\t\t<gov-accordion-item label="Působnost v agendách">\n\t\t\t\t\t<h3 slot="label">Působnost v agendách</h3>\n\t\t\t\t\t<gov-icon slot="icon" name="info"></gov-icon>\n\t\t\t\t\t<gov-tag color="primary" type="subtle" size="m" slot="suffix">\n\t\t\t\t\t\tTag\n\t\t\t\t\t</gov-tag>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t</gov-accordion-item>\n\t\t\t\t<gov-accordion-item label="Zřizované organizace">\n\t\t\t\t\t<h3 slot="label">Zřizované organizace</h3>\n\t\t\t\t\t<gov-icon slot="icon" name="info"></gov-icon>\n\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t</gov-accordion-item>\n\t\t\t</gov-accordion>\n\t\t</div>\n\t\t`}}if(customElements.get("accordion-page")===undefined){customElements.define("accordion-page",Bt)}class At extends HTMLElement{connectedCallback(){this.innerHTML=`\n\t\t<h2>Breadcrumbs</h2>\n\n\t\t<gov-breadcrumbs accessible-label="Drobečková navigace pro stránku Czech POINT">\n\t\t\t<ul>\n\t\t\t\t<li>\n\t\t\t\t\t<gov-icon  name="house-door-fill"></gov-icon>\n\t\t\t\t\t<button>\n\t\t\t\t\t\tDomů\n\t\t\t\t\t</button>\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<gov-icon  name="chevron-right"></gov-icon>\n\t\t\t\t\t<a href="#">Kam dál</a>\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<gov-icon  name="chevron-right"></gov-icon>\n\t\t\t\t\t<a href="#">\n\t\t\t\t\tČeský eGovernment\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<gov-icon name="chevron-right"></gov-icon>\n\t\t\t\t\t<strong>Czech POINT Czech POINT Czech POINT Czech POINT</strong>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</gov-breadcrumbs>\n\t\t<br>\n\n\t\t<gov-breadcrumbs accessible-label="Drobečková navigace pro stránku Czech POINT">\n\t\t\t<ul>\n\t\t\t\t<li>\n\t\t\t\t\t<button>\n\t\t\t\t\t\tDomů\n\t\t\t\t\t</button>\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<gov-icon  name="chevron-right"></gov-icon>\n\t\t\t\t\t<a href="#">Kam dál</a>\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<gov-icon  name="chevron-right"></gov-icon>\n\t\t\t\t\t<a href="#">\n\t\t\t\t\tČeský eGovernment Český eGovernment Český eGovernment\n\t\t\t\t\t</a>\n\t\t\t\t</li>\n\t\t\t\t<li>\n\t\t\t\t\t<gov-icon name="chevron-right"></gov-icon>\n\t\t\t\t\t<strong>Czech POINT</strong>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t</gov-breadcrumbs>\n\n\t\t`}}if(customElements.get("breadcrumbs-page")===undefined){customElements.define("breadcrumbs-page",At)}class Ht extends HTMLElement{connectedCallback(){this.innerHTML=`\n\t\t\t<h3>Buttons</h3>\n\n\t\t\t\t<gov-button color="primary" size="s" type="solid" >\n\t\t\t\tTest Více\n\t\t\t</gov-button>\n\n\t\t\t<h4>Dropdown</h4>\n\n\t\t\t<gov-layout>\n\t\t\t\t<gov-layout-column>\n\t\t\t\t\t<div class="container-view">\n\t\t\t\t\t\t<gov-dropdown>\n\t\t\t\t\t\t\t<gov-button color="primary" size="l" type="solid">\n\t\t\t\t\t\t\t\tVíce\n\t\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t\t\t<ul slot="list" role="menu">\n\t\t\t\t\t\t\t\t<li role="presentation">\n\t\t\t\t\t\t\t\t\t<gov-button color="primary" type="base" size="l" expanded role="menuitem">\n\t\t\t\t\t\t\t\t\t\tA další nabídka\n\t\t\t\t\t\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t<li role="presentation">\n\t\t\t\t\t\t\t\t\t<gov-button color="primary" type="base" size="l" expanded role="menuitem">\n\t\t\t\t\t\t\t\t\t\tA další dlouhá nabídka\n\t\t\t\t\t\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t<li role="presentation">\n\t\t\t\t\t\t\t\t\t<gov-button color="primary" type="base" size="l" expanded role="menuitem">\n\t\t\t\t\t\t\t\t\t\tA další\n\t\t\t\t\t\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t</gov-dropdown>\n\t\t\t\t\t</div>\n\t\t\t\t</gov-layout-column>\n\t\t\t\t<gov-layout-column>\n\t\t\t\t\t<div class="container-view">\n\t\t\t\t\t\t<gov-dropdown position="right">\n\t\t\t\t\t\t\t<gov-button color="primary" size="s" type="solid">\n\t\t\t\t\t\t\t\tVíce\n\t\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t\t\t<ul slot="list" role="menu">\n\t\t\t\t\t\t\t\t<li role="presentation">\n\t\t\t\t\t\t\t\t\t<gov-button color="neutral" type="base" size="s" expanded role="menuitem">\n\t\t\t\t\t\t\t\t\t\tA další nabídka\n\t\t\t\t\t\t\t\t\t\t<gov-icon slot="right-icon" name="chevron-right"></gov-icon>\n\t\t\t\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t<li role="presentation">\n\t\t\t\t\t\t\t\t\t<gov-button color="neutral" type="base" size="s" expanded role="menuitem">\n\t\t\t\t\t\t\t\t\t\tA další dlouhá nabídka\n\t\t\t\t\t\t\t\t\t\t<gov-icon slot="right-icon" name="chevron-right"></gov-icon>\n\t\t\t\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t<li role="presentation">\n\t\t\t\t\t\t\t\t\t<gov-button color="neutral" type="base" size="s" expanded role="menuitem">\n\t\t\t\t\t\t\t\t\t\tA další\n\t\t\t\t\t\t\t\t\t\t<gov-icon slot="right-icon" name="chevron-right"></gov-icon>\n\t\t\t\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t</gov-dropdown>\n\t\t\t\t\t</div>\n\t\t\t\t</gov-layout-column>\n\t\t\t</gov-layout>\n\n\t\t\t<h4>Primary - solid</h4>\n\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="primary" size="xs" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Small Primary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" size="s" type="solid" href="http://localhost:3333/button">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tSmall Primary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" size="m" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tNormal Primary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" size="l" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tLarge Primary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" size="xl" type="solid" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Large Primary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="primary" size="xs" type="solid" loading="0">\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" size="s" type="solid" loading="0">\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" size="s" type="solid" loading="1" disabled>\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" type="solid" href="http://localhost:3333/button" loading="0">\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" type="solid" href="http://localhost:3333/button" loading="1" disabled focusable="false">\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" size="l" type="solid" loading="true">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" size="l" type="solid" loading="true" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" size="xl" type="solid" loading="false">\n\t\t\t\t\tOdeslat\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" size="xl" type="solid" loading="true" disabled>\n\t\t\t\t\tOdeslat\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="primary" size="xs" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" size="s" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" size="m" type="solid" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" size="l" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" size="xl" type="solid" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" size="m" type="solid" loading="false">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" size="m" type="solid" loading="true" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\n\t\t\t<h4>Primary - solid - expanded</h4>\n\t\t\t<div class="container-view" style="display: flex; gap: 8px;">\n\t\t\t\t<gov-button color="primary" type="solid" expanded="true">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tExpanded\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" type="solid" expanded="true">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tExpanded\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" type="solid" expanded="true" loading="1">\n\t\t\t\t\tExpanded\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" type="solid" expanded="true" loading="true">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tExpanded\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" type="solid" expanded="true" loading="false">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tExpanded\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\n\t\t\t<h4>Primary - outlined</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="primary" type="outlined" size="xs">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Small Primary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" type="outlined" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tSmall Primary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" type="outlined" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tNormal Primary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" type="outlined" size="l">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tLarge Primary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" type="outlined" disabled size="xl">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Large Primary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<br>\n\t\t\t\t<gov-button color="primary" type="outlined" href="http://localhost:3333/button" loading="true">\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" type="outlined" href="http://localhost:3333/button" loading="false" disabled focusable="false">\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="primary" type="outlined" size="xs">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" type="outlined" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" type="outlined" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" type="outlined" size="l">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" type="outlined" size="xl" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" type="outlined" loading="false">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" type="outlined" loading="true" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\n\t\t\t<h4>Primary - base</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="primary" type="base" size="xs">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Small Primary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" type="base" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tSmall Primary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" type="base" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tNormal Primary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" type="base" size="l">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tLarge Primary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" type="base" disabled size="xl">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Large Primary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<br>\n\t\t\t\t<gov-button color="primary" type="base" href="http://localhost:3333/button" loading="false">\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" type="base" href="http://localhost:3333/button" loading="true" disabled focusable="false">\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="primary" type="base" size="xs">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" type="base" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" type="base" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" type="base" size="l">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" type="base" size="xl" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" type="base" loading="false">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" type="base" loading="true" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\n\t\t\t<h4>Primary - link</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="primary" type="link" size="xs">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Small Primary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" type="link" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tSmall Primary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" type="link" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tNormal Primary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" type="link" size="l">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tLarge Primary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" type="link" disabled size="xl">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Large Primary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<br>\n\t\t\t\t<gov-button color="primary" type="link" size="l" href="http://localhost:3333/button" loading="false">\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" type="link" size="l" href="http://localhost:3333/button" loading="1">\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" type="link" size="m" href="http://localhost:3333/button" loading="0" disabled focusable="false">\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" type="link" size="m" href="http://localhost:3333/button" loading="true" disabled focusable="false">\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\t\t\t<br><br>\n\n\t\t\t<h4>Neutral - solid</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="neutral" size="xs" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Small neutral\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" size="s" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tSmall neutral\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" type="solid" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tNormal neutral\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" size="l" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tLarge neutral\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" size="xl" type="solid" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Large neutral\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<br>\n\t\t\t\t<gov-button color="neutral" type="solid" href="http://localhost:3333/button" loading="false">\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" type="solid" href="http://localhost:3333/button" loading="true" disabled>\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="neutral" size="xs" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" size="s" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" type="solid" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" size="l" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" size="xl" type="solid" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" type="solid" loading="false">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" type="solid" loading="true" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\n\t\t\t<h4>Neutral - outlined</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="neutral" type="outlined" size="xs">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Small neutral\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" type="outlined" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tSmall neutral\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" type="outlined" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tNormal neutral\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" type="outlined" size="l">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tLarge neutral\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" type="outlined" disabled size="xl">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Large neutral\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<br>\n\t\t\t\t<gov-button color="neutral" type="outlined" href="http://localhost:3333/button" loading="false">\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" type="outlined" href="http://localhost:3333/button" loading="true" disabled>\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="neutral" type="outlined" size="xs">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" type="outlined" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" type="outlined" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" type="outlined" size="l">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" type="outlined" size="xl" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" type="outlined" loading="false">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" type="outlined" loading="true" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\n\t\t\t<h4>Neutral - base</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="neutral" type="base" size="xs">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Small neutral\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" type="base" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tSmall neutral\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" type="base" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tNormal neutral\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" type="base" size="l">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tLarge neutral\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" type="base" disabled size="xl">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Large neutral\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<br>\n\t\t\t\t<gov-button color="neutral" type="base" href="http://localhost:3333/button" loading="false">\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" type="base" href="http://localhost:3333/button" loading="true" disabled>\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="neutral" type="base" size="xs">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" type="base" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" type="base" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" type="base" size="l">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" type="base" size="xl" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" type="base" loading="false">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" type="base" loading="true" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\n\t\t\t<h4>Neutral - link</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="neutral" type="link" size="xs">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Small Neutral\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" type="link" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tSmall Neutral\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" type="link" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tNormal Neutral\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" type="link" size="l">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tLarge Neutral\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" type="link" disabled size="xl">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Large Neutral\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<br>\n\t\t\t\t<gov-button color="neutral" type="link" href="http://localhost:3333/button" loading="false">\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="neutral" type="link" href="http://localhost:3333/button" loading="true" disabled>\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\t\t\t<br><br>\n\n\t\t\t<h4>Secondary - solid</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="secondary" size="xs" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Small secondary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" size="s" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tSmall secondary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" type="solid" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tNormal secondary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" size="l" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tLarge secondary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" size="xl" type="solid" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Large secondary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<br>\n\t\t\t\t<gov-button color="secondary" type="solid" href="http://localhost:3333/button" loading="false">\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" type="solid" href="http://localhost:3333/button" loading="true" disabled>\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="secondary" size="xs" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" size="s" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" type="solid" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" size="l" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" size="xl" type="solid" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" type="solid" loading="false">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" type="solid" loading="true" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\n\t\t\t<h4>Secondary - outlined</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="secondary" type="outlined" size="xs">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Small secondary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" type="outlined" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tSmall secondary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" type="outlined" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tNormal secondary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" type="outlined" size="l">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tLarge secondary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" type="outlined" disabled size="xl">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Large secondary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<br>\n\t\t\t\t<gov-button color="secondary" type="outlined" href="http://localhost:3333/button" loading="false">\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" type="outlined" href="http://localhost:3333/button" loading="true" disabled>\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="secondary" type="outlined" size="xs">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" type="outlined" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" type="outlined" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" type="outlined" size="l">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" type="outlined" size="xl" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" type="outlined" loading="false">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" type="outlined" loading="true" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\n\t\t\t<h4>Secondary - base</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="secondary" type="base" size="xs">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Small secondary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" type="base" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tSmall secondary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" type="base" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tNormal secondary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" type="base" size="l">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tLarge secondary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" type="base" disabled size="xl">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Large secondary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<br>\n\t\t\t\t<gov-button color="secondary" type="base" href="http://localhost:3333/button" loading="false">\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" type="base" href="http://localhost:3333/button" loading="true" disabled>\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="secondary" type="base" size="xs">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" type="base" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" type="base" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" type="base" size="l">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" type="base" size="xl" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" type="base" loading="false">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" type="base" loading="true" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\n\t\t\t<h4>Secondary - link</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="secondary" type="link" size="xs">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Small Secondary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" type="link" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tSmall Secondary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" type="link" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tNormal Secondary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" type="link" size="l">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tLarge Secondary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" type="link" disabled size="xl">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Large Secondary\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<br>\n\t\t\t\t<gov-button color="secondary" type="link" href="http://localhost:3333/button" loading="false">\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="secondary" type="link" href="http://localhost:3333/button" loading="true" disabled>\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\t\t\t<br><br>\n\n\t\t\t<h4>Warning - solid</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="warning" size="xs" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Small warning\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" size="s" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tSmall warning\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" type="solid" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tNormal warning\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" size="l" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tLarge warning\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" size="xl" type="solid" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Large warning\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<br>\n\t\t\t\t<gov-button color="warning" type="solid" href="http://localhost:3333/button" loading="false">\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" type="solid" href="http://localhost:3333/button" loading="true" disabled>\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="warning" size="xs" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" size="s" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" type="solid" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" size="l" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" size="xl" type="solid" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" type="solid" loading="false">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" type="solid" loading="true" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\n\t\t\t<h4>Warning - outlined</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="warning" type="outlined" size="xs">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Small warning\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" type="outlined" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tSmall warning\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" type="outlined" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tNormal warning\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" type="outlined" size="l">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tLarge warning\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" type="outlined" disabled size="xl">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Large warning\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<br>\n\t\t\t\t<gov-button color="warning" type="outlined" href="http://localhost:3333/button" loading="false">\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" type="outlined" href="http://localhost:3333/button" loading="true" disabled>\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="warning" type="outlined" size="xs">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" type="outlined" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" type="outlined" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" type="outlined" size="l">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" type="outlined" size="xl" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" type="outlined" loading="false">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" type="outlined" loading="true" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\n\t\t\t<h4>Warning - base</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="warning" type="base" size="xs">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Small warning\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" type="base" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tSmall warning\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" type="base" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tNormal warning\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" type="base" size="l">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tLarge warning\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" type="base" disabled size="xl">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Large warning\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<br>\n\t\t\t\t<gov-button color="warning" type="base" href="http://localhost:3333/button" loading="false">\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" type="base" href="http://localhost:3333/button" loading="true" disabled>\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="warning" type="base" size="xs">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" type="base" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" type="base" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" type="base" size="l">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" type="base" size="xl" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" type="base" loading="false">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" type="base" loading="true" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\n\t\t\t<h4>Warning - link</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="warning" type="link" size="xs">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Small warning\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" type="link" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tSmall warning\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" type="link" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tNormal warning\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" type="link" size="l">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tLarge warning\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" type="link" disabled size="xl">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Large warning\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<br>\n\t\t\t\t<gov-button color="warning" type="link" href="http://localhost:3333/button" loading="false">\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="warning" type="link" href="http://localhost:3333/button" loading="true" disabled>\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\t\t\t<br><br>\n\n\t\t\t<h4>Success - solid</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="success" size="xs" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Small success\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" size="s" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tSmall success\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" type="solid" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tNormal success\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" size="l" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tLarge success\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" size="xl" type="solid" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Large success\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<br>\n\t\t\t\t<gov-button color="success" type="solid" href="http://localhost:3333/button" loading="false">\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" type="solid" href="http://localhost:3333/button" loading="true" disabled>\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="success" size="xs" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" size="s" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" type="solid" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" size="l" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" size="xl" type="solid" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" type="solid" loading="false">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" type="solid" loading="true" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\n\t\t\t<h4>Success - outlined</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="success" type="outlined" size="xs">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Small success\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" type="outlined" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tSmall success\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" type="outlined" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tNormal success\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" type="outlined" size="l">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tLarge success\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" type="outlined" disabled size="xl">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Large success\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<br>\n\t\t\t\t<gov-button color="success" type="outlined" href="http://localhost:3333/button" loading="false">\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" type="outlined" href="http://localhost:3333/button" loading="true" disabled>\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="success" type="outlined" size="xs">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" type="outlined" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" type="outlined" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" type="outlined" size="l">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" type="outlined" size="xl" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" type="outlined" loading="false">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" type="outlined" loading="true" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\n\t\t\t<h4>Success - base</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="success" type="base" size="xs">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Small success\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" type="base" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tSmall success\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" type="base" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tNormal success\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" type="base" size="l">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tLarge success\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" type="base" disabled size="xl">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Large success\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<br>\n\t\t\t\t<gov-button color="success" type="base" href="http://localhost:3333/button" loading="false">\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" type="base" href="http://localhost:3333/button" loading="true" disabled>\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="success" type="base" size="xs">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" type="base" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" type="base" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" type="base" size="l">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" type="base" size="xl" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" type="base" loading="false">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" type="base" loading="true" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\n\t\t\t<h4>Success - link</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="success" type="link" size="xs">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Small success\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" type="link" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tSmall success\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" type="link" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tNormal success\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" type="link" size="l">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tLarge success\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" type="link" disabled size="xl">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Large success\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<br>\n\t\t\t\t<gov-button color="success" type="link" href="http://localhost:3333/button" loading="false">\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="success" type="link" href="http://localhost:3333/button" loading="true" disabled>\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\t\t\t<br><br>\n\n\t\t\t<h4>Error - solid</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="error" size="xs" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Small error\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" size="s" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tSmall error\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" type="solid" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tNormal error\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" size="l" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tLarge error\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" size="xl" type="solid" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Large error\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<br>\n\t\t\t\t<gov-button color="error" type="solid" href="http://localhost:3333/button" loading="false">\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" type="solid" href="http://localhost:3333/button" loading="true" disabled>\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="error" size="xs" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" size="s" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" type="solid" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" size="l" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" size="xl" type="solid" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" type="solid" loading="false">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" type="solid" loading="true" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\n\t\t\t<h4>Error - outlined</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="error" type="outlined" size="xs">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Small error\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" type="outlined" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tSmall error\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" type="outlined" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tNormal error\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" type="outlined" size="l">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tLarge error\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" type="outlined" disabled size="xl">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Large error\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<br>\n\t\t\t\t<gov-button color="error" type="outlined" href="http://localhost:3333/button" loading="false">\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" type="outlined" href="http://localhost:3333/button" loading="true" disabled>\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="error" type="outlined" size="xs">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" type="outlined" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" type="outlined" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" type="outlined" size="l">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" type="outlined" size="xl" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" type="outlined" loading="false">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" type="outlined" loading="true" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\n\t\t\t<h4>Error - base</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="error" type="base" size="xs">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Small error\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" type="base" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tSmall error\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" type="base" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tNormal error\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" type="base" size="l">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tLarge error\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" type="base" disabled size="xl">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Large error\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<br>\n\t\t\t\t<gov-button color="error" type="base" href="http://localhost:3333/button" loading="false">\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" type="base" href="http://localhost:3333/button" loading="true" disabled>\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="error" type="base" size="xs">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" type="base" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" type="base" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" type="base" size="l">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" type="base" size="xl" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" type="base" loading="false">\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" type="base" loading="true" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\n\t\t\t<h4>Error - link</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-button color="error" type="link" size="xs">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Small error\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" type="link" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tSmall error\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" type="link" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tNormal error\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" type="link" size="l">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tLarge error\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" type="link" disabled size="xl">\n\t\t\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t\t\tX-Large error\n\t\t\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\t<br>\n\t\t\t\t<gov-button color="error" type="link" href="http://localhost:3333/button" loading="false">\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="error" type="link" href="http://localhost:3333/button" loading="true" disabled>\n\t\t\t\t\tOdeslat\n\t\t\t\t</gov-button>\n\t\t\t</div>\n\t\t`}}if(customElements.get("button-page")===undefined){customElements.define("button-page",Ht)}class _t extends HTMLElement{connectedCallback(){this.innerHTML=`\n\n\t\t<gov-container style="width: 800px;">\n\t\t\t<h2>Card</h2>\n\n\t\t\t<gov-card collapsible open="true">\n\t\t\t\t<h3 slot="headline">Fusce tellus odio, dapibus id fermentum quis</h3>\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>\n\t\t\t</gov-card>\n\t\t\t<br>\n\t\t\t<gov-card collapsible>\n\t\t\t\t<h3 slot="headline">Fusce tellus odio, dapibus id fermentum quis</h3>\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>\n\t\t\t\t<gov-button color="primary" size="s" type="solid" href="http://localhost:3333/button">\n\t\t\t\t\tButton\n\t\t\t\t</gov-button>\n\t\t\t\t<p slot="footer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>\n\t\t\t</gov-card>\n\t\t\t<br>\n\t\t\t<gov-card>\n\t\t\t\t<h3 slot="headline">Fusce tellus odio, dapibus id fermentum quis</h3>\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>\n\t\t\t\t<gov-button color="primary" size="s" type="solid" href="http://localhost:3333/button">\n\t\t\t\t\tButton\n\t\t\t\t</gov-button>\n\t\t\t\t<p slot="footer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>\n\t\t\t</gov-card>\n\t\t\t<br>\n\t\t\t<gov-card expanded>\n\t\t\t\t<img slot="img" src="https://picsum.photos/536/354" src="" alt="Obárzek" width="536" height="354">\n\t\t\t\t<p><b>Commodo consequat.</b></p>\n\t\t\t\t<p>Commodo consequat. Nullam rhoncus aliquam metus.</p>\n\t\t\t\t<gov-button color="primary" size="s" type="solid" href="http://localhost:3333/button">\n\t\t\t\t\tJak založit\n\t\t\t\t</gov-button>\n\t\t\t\t<gov-button color="primary" size="s" type="outlined" href="http://localhost:3333/button">\n\t\t\t\t\tZjistit více\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t\t<br>\n\t\t\t<gov-card>\n\t\t\t\t<h3 slot="headline">Fusce tellus odio, dapibus id fermentum quis</h3>\n\t\t\t\t<gov-icon name="car" type="complex"></gov-icon>\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.</p>\n\t\t\t\t<gov-button color="primary" size="s" type="outlined" href="http://localhost:3333/button">\n\t\t\t\t\tLearn more\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t\t<br>\n\t\t\t<h3>Promotion</h3>\n\t\t\t<gov-card promotion>\n\t\t\t\t<gov-icon slot="icon" name="car" type="complex"></gov-icon>\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.</p>\n\t\t\t\t<gov-button slot="btn" color="primary" size="s" type="outlined" href="http://localhost:3333/button">\n\t\t\t\t\tLearn more\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t\t<gov-container style="width: 350px; margin-top: 16px;">\n\t\t\t<gov-card promotion>\n\t\t\t\t<gov-icon slot="icon" name="car" type="complex"></gov-icon>\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras elementum. Fusce tellus odio, dapibus id fermentum quis, suscipit id erat. Fusce tellus.</p>\n\t\t\t\t<gov-button slot="btn" color="primary" size="s" type="outlined" href="http://localhost:3333/button">\n\t\t\t\t\tLearn more\n\t\t\t\t</gov-button>\n\t\t\t</gov-card>\n\t\t\t</div>\n\t\t</div>\n\n\t\t`}}if(customElements.get("card-page")===undefined){customElements.define("card-page",_t)}class Zt extends HTMLElement{connectedCallback(){this.innerHTML=`\n\t\t\t<h1>Chips</h1>\n\t\t\t<h4>Chips close</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-chip color="primary" size="xs" type="solid" icon-left="basic/star">\n\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\tNot clickable XS\n\t\t\t\t<gov-button slot="right" color="primary" type="solid" accessible-label="Zavřít vše" size="xs">\n\t\t\t\t\t<gov-icon slot="right-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t</gov-chip>\n\t\t\t<gov-chip color="primary" size="s" type="solid">\n\t\t\t\tNot clickable S\n\t\t\t\t<gov-button slot="right" color="primary" type="solid" accessible-label="Zavřít vše" size="s">\n\t\t\t\t\t<gov-icon slot="right-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t</gov-chip>\n\t\t\t<gov-chip color="primary" size="m" type="solid">\n\t\t\t\t<gov-button slot="left" color="primary" type="solid" accessible-label="Zavřít vše" size="m">\n\t\t\t\t\t<gov-icon slot="right-icon" name="x-lg"></gov-icon>\n\t\t\t\t</gov-button>\n\t\t\t\tNot clickable M\n\t\t\t</gov-chip>\n\t\t\t</div>\n\t\t\t<h4>Primary</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-chip color="primary" size="xs" type="solid"  icon-right="basic/star">\n\t\t\t\t\tChip\n\t\t\t\t</gov-chip>\n\t\t\t\t<gov-chip color="primary" size="s" type="solid" tag="button">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\t\tNot clickable\n\t\t\t\t\t<gov-icon slot="right-icon" name="star-fill"></gov-icon>\n\t\t\t\t</gov-chip>\n\t\t\t\t<gov-chip color="primary" size="s" type="solid">\n\t\t\t\t\tNot clickable\n\t\t\t\t</gov-chip>\n\t\t\t\t<gov-chip color="primary" type="solid" size="m" href="http://www.example.com/">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\t\tNormal href\n\t\t\t\t\t<gov-icon slot="right-icon" name="star-fill"></gov-icon>\n\t\t\t\t</gov-chip>\n\t\t\t\t<gov-chip color="primary" type="solid" size="m" disabled href="http://www.example.com/" target="_blank">\n\t\t\t\t\tDisabled with href\n\t\t\t\t</gov-chip>\n\t\t\t</div>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-chip color="primary" type="outlined" size="xs">\n\t\t\t\t\tChip\n\t\t\t\t</gov-chip>\n\t\t\t\t<gov-chip color="primary" tag="a" type="outlined" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\tSmall Primary\n\t\t\t\t</gov-chip>\n\t\t\t\t<gov-chip color="primary" tag="button" type="outlined" size="m" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\tNormal Primary\n\t\t\t\t</gov-chip>\n\t\t\t</div>\n\t\t\t<br>\n\n\t\t\t<h4>Secondary</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-chip color="secondary" size="xs" type="solid">\n\t\t\t\t\tChip\n\t\t\t\t</gov-chip>\n\t\t\t\t<gov-chip color="secondary" size="xs" type="solid">\n\t\t\t\t\tChip\n\t\t\t\t</gov-chip>\n\t\t\t\t<gov-chip color="secondary" size="s" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\t\tNot clickable\n\t\t\t\t\t<gov-icon slot="right-icon" name="star-fill"></gov-icon>\n\t\t\t\t</gov-chip>\n\t\t\t\t<gov-chip tag="button" color="secondary" type="solid" size="m" href="http://www.example.com/">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\t\tNormal href\n\t\t\t\t\t<gov-icon slot="right-icon" name="star-fill"></gov-icon>\n\t\t\t\t</gov-chip>\n\t\t\t\t<gov-chip color="secondary" type="solid" size="m" disabled href="http://www.example.com/">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\t\tDisabled with href\n\t\t\t\t\t<gov-icon slot="right-icon" name="star-fill"></gov-icon>\n\t\t\t\t</gov-chip>\n\t\t\t</div>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-chip color="secondary" tag="a" type="outlined" size="xs">\n\t\t\t\t\tChip\n\t\t\t\t</gov-chip>\n\t\t\t\t<gov-chip color="secondary" tag="a" type="outlined" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\tSmall secondary\n\t\t\t\t</gov-chip>\n\t\t\t\t<gov-chip color="secondary" tag="button" type="outlined" size="m" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\tNormal secondary\n\t\t\t\t</gov-chip>\n\t\t\t</div>\n\t\t\t<br>\n\n\t\t\t<h4>Neutral</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-chip color="neutral" size="xs" type="solid">\n\t\t\t\t\tChip\n\t\t\t\t</gov-chip>\n\t\t\t\t<gov-chip color="neutral" size="xs" type="solid">\n\t\t\t\t\tChip\n\t\t\t\t</gov-chip>\n\t\t\t\t<gov-chip color="neutral" size="s" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\t\tNot clickable\n\t\t\t\t\t<gov-icon slot="right-icon" name="star-fill"></gov-icon>\n\t\t\t\t</gov-chip>\n\t\t\t\t<gov-chip tag="button" color="neutral" type="solid" size="m" href="http://www.example.com/">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\t\tNormal href\n\t\t\t\t\t<gov-icon slot="right-icon" name="star-fill"></gov-icon>\n\t\t\t\t</gov-chip>\n\t\t\t\t<gov-chip color="neutral" type="solid" size="m" disabled href="http://www.example.com/">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\t\tDisabled with href\n\t\t\t\t\t<gov-icon slot="right-icon" name="star-fill"></gov-icon>\n\t\t\t\t</gov-chip>\n\t\t\t</div>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-chip color="neutral" tag="a" type="outlined" size="xs">\n\t\t\t\t\tChip\n\t\t\t\t</gov-chip>\n\t\t\t\t<gov-chip color="neutral" tag="a" type="outlined" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\tSmall neutral\n\t\t\t\t</gov-chip>\n\t\t\t\t<gov-chip color="neutral" tag="button" type="outlined" size="m" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\tNormal neutral\n\t\t\t\t</gov-chip>\n\t\t\t</div>\n\t\t\t<br>\n\n\t\t\t<h4>Error</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-chip color="error" size="xs" type="solid">\n\t\t\t\t\tChip\n\t\t\t\t</gov-chip>\n\t\t\t\t<gov-chip color="error" size="xs" type="solid">\n\t\t\t\t\tChip\n\t\t\t\t</gov-chip>\n\t\t\t\t<gov-chip color="error" size="s" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\t\tNot clickable\n\t\t\t\t\t<gov-icon slot="right-icon" name="star-fill"></gov-icon>\n\t\t\t\t</gov-chip>\n\t\t\t\t<gov-chip tag="button" color="error" type="solid" size="m" href="http://www.example.com/">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\t\tNormal href\n\t\t\t\t\t<gov-icon slot="right-icon" name="star-fill"></gov-icon>\n\t\t\t\t</gov-chip>\n\t\t\t\t<gov-chip color="error" type="solid" size="m" disabled href="http://www.example.com/">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\t\tDisabled with href\n\t\t\t\t\t<gov-icon slot="right-icon" name="star-fill"></gov-icon>\n\t\t\t\t</gov-chip>\n\t\t\t</div>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-chip color="error" tag="a" type="outlined" size="xs">\n\t\t\t\t\tChip\n\t\t\t\t</gov-chip>\n\t\t\t\t<gov-chip color="error" tag="a" type="outlined" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\tSmall error\n\t\t\t\t</gov-chip>\n\t\t\t\t<gov-chip color="error" tag="button" type="outlined" size="m" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\tNormal error\n\t\t\t\t</gov-chip>\n\t\t\t</div>\n\n\t\t\t<h4>Success</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-chip color="success" size="xs" type="solid">\n\t\t\t\t\tChip\n\t\t\t\t</gov-chip>\n\t\t\t\t<gov-chip color="success" size="xs" type="solid">\n\t\t\t\t\tChip\n\t\t\t\t</gov-chip>\n\t\t\t\t<gov-chip color="success" size="s" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\t\tNot clickable\n\t\t\t\t\t<gov-icon slot="right-icon" name="star-fill"></gov-icon>\n\t\t\t\t</gov-chip>\n\t\t\t\t<gov-chip tag="button" color="success" type="solid" size="m" href="http://www.example.com/">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\t\tNormal href\n\t\t\t\t\t<gov-icon slot="right-icon" name="star-fill"></gov-icon>\n\t\t\t\t</gov-chip>\n\t\t\t\t<gov-chip color="success" type="solid" size="m" disabled href="http://www.example.com/">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\t\tDisabled with href\n\t\t\t\t\t<gov-icon slot="right-icon" name="star-fill"></gov-icon>\n\t\t\t\t</gov-chip>\n\t\t\t</div>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-chip color="success" tag="a" type="outlined" size="xs">\n\t\t\t\t\tChip\n\t\t\t\t</gov-chip>\n\t\t\t\t<gov-chip color="success" tag="a" type="outlined" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\tSmall success\n\t\t\t\t</gov-chip>\n\t\t\t\t<gov-chip color="success" tag="button" type="outlined" size="m" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\tNormal success\n\t\t\t\t</gov-chip>\n\t\t\t</div>\n\t\t\t<br>\n\n\t\t\t<h4>Warning</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-chip color="warning" size="xs" type="solid">\n\t\t\t\t\tChip\n\t\t\t\t</gov-chip>\n\t\t\t\t<gov-chip color="warning" size="xs" type="solid">\n\t\t\t\t\tChip\n\t\t\t\t</gov-chip>\n\t\t\t\t<gov-chip color="warning" size="s" type="solid">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\t\tNot clickable\n\t\t\t\t\t<gov-icon slot="right-icon" name="star-fill"></gov-icon>\n\t\t\t\t</gov-chip>\n\t\t\t\t<gov-chip tag="button" color="warning" type="solid" size="m" href="http://www.example.com/">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\t\tNormal href\n\t\t\t\t\t<gov-icon slot="right-icon" name="star-fill"></gov-icon>\n\t\t\t\t</gov-chip>\n\t\t\t\t<gov-chip color="warning" type="solid" size="m" disabled href="http://www.example.com/">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\t\tDisabled with href\n\t\t\t\t\t<gov-icon slot="right-icon" name="star-fill"></gov-icon>\n\t\t\t\t</gov-chip>\n\t\t\t</div>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-chip color="warning" tag="a" type="outlined" size="xs">\n\t\t\t\t\tChip\n\t\t\t\t</gov-chip>\n\t\t\t\t<gov-chip color="warning" tag="a" type="outlined" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\tSmall warning\n\t\t\t\t</gov-chip>\n\t\t\t\t<gov-chip color="warning" tag="button" type="outlined" size="m" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\tNormal warning\n\t\t\t\t</gov-chip>\n\t\t\t</div>\n\t\t`}}if(customElements.get("chip-page")===undefined){customElements.define("chip-page",Zt)}class It extends HTMLElement{connectedCallback(){this.innerHTML=`\n\t\t<h2>Container</h2>\n\n\t\t<gov-container>\n\t\t\t<p>Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>\n\t\t</gov-container>\n\n\t\t<div style="max-width: 500px; margin-top: 30px;">\n\t\t\t<gov-container>\n\t\t\t\t<p>Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>\n\t\t\t</gov-container>\n\t\t</div>\n\t\t`}}if(customElements.get("container-page")===undefined){customElements.define("container-page",It)}class Rt extends HTMLElement{connectedCallback(){this.innerHTML=`\n\t\t<h2>Control Group</h2>\n\n\t\t<gov-control-group>\n\t\t\t<gov-button color="primary" type="outlined" size="m">\n\t\t\t\t<gov-icon slot="left-icon" name="chevron-up"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-button color="primary" type="outlined" size="m">\n\t\t\t\t<gov-icon slot="left-icon" name="chevron-down"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-form-select name="test-me" color="primary" size="m">\n\t\t\t\t<option value="" selected>Placeholder</option>\n\t\t\t\t<option value="b">Value B</option>\n\t\t\t\t<option value="c">Value C</option>\n\t\t\t\t<option value="d">Value D</option>\n\t\t\t</gov-form-select>\n\t\t\t<gov-button color="primary" type="solid" size="m">\n\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\n\t\t<br />\n\t\t<gov-control-group disabled fit-content>\n\t\t\t<gov-form-select name="test-me" color="neutral" size="m" disabled>\n\t\t\t\t<option value="" selected>Placeholder</option>\n\t\t\t\t<option value="b">Value B</option>\n\t\t\t\t<option value="c">Value C</option>\n\t\t\t\t<option value="d">Value D</option>\n\t\t\t</gov-form-select>\n\t\t\t<gov-button color="neutral" type="solid" size="m" disabled>\n\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\n\t\t<br><br>\n\t\t<gov-control-group invalid>\n\t\t\t<gov-form-select name="test-me" color="error" size="m" invalid>\n\t\t\t\t<option value="" selected>Placeholder</option>\n\t\t\t\t<option value="b">Value B</option>\n\t\t\t\t<option value="c">Value C</option>\n\t\t\t\t<option value="d">Value D</option>\n\t\t\t</gov-form-select>\n\t\t\t<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" size="m"></gov-form-input>\n\t\t\t<gov-button color="error" type="solid" size="m">\n\t\t\t\tOdeslat\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\t\t<br><br>\n\n\t\t<gov-control-group>\n\t\t\t<gov-form-input type="number" id="kapr" name="test-me" placeholder="Placeholder" size="s"></gov-form-input>\n\t\t\t<gov-button color="primary" type="outlined" size="s">\n\t\t\t\t<gov-icon slot="left-icon" name="chevron-up"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-button color="primary" type="outlined" size="s">\n\t\t\t\t<gov-icon slot="left-icon" name="chevron-down"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-button color="primary" type="outlined" size="s">\n\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-dropdown position="right">\n\t\t\t\t<gov-button color="primary" size="s">\n\t\t\t\t\tVíce\n\t\t\t\t</gov-button>\n\t\t\t\t<ul slot="list">\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<gov-button color="primary" type="subtle" size="s">\n\t\t\t\t\t\t\tA další nabídka\n\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<gov-button color="primary" type="subtle" size="s">\n\t\t\t\t\t\t\tA další nabídka\n\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li>\n\t\t\t\t\t\t<gov-button color="primary" type="subtle" size="s">\n\t\t\t\t\t\t\tA další nabídka\n\t\t\t\t\t\t</gov-button>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</gov-dropdown>\n\t\t</gov-control-group>\n\t\t<br />\n\t\t<gov-control-group color="primary" no-border>\n\t\t\t<gov-form-select name="test-me" size="m">\n\t\t\t\t<option value="" selected>Placeholder</option>\n\t\t\t\t<option value="b">Value B</option>\n\t\t\t\t<option value="c">Value C</option>\n\t\t\t\t<option value="d">Value D</option>\n\t\t\t</gov-form-select>\n\t\t\t<gov-button color="primary" type="solid" size="m">\n\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\t\t<br />\n\t\t<gov-control-group fit-content no-border>\n\t\t\t<gov-button color="primary" type="outlined" size="l">\n\t\t\t\t<gov-icon slot="left-icon" name="gear"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-form-file name="test-me-c" accept="image/*" max-file-size="1024">\n\t\t\t\t<gov-button color="primary" type="outlined" size="l" tabindex="-1">\n\t\t\t\t\tNahrát soubor ze zařízení\n\t\t\t\t</gov-button>\n\t\t\t</gov-form-file>\n\t\t\t<gov-button color="primary" type="outlined" size="l">\n\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\t\t<br><br>\n\t\t<gov-control-group color="primary" no-border>\n\t\t\t<gov-button color="primary" type="outlined" size="xl">\n\t\t\t\t<gov-icon slot="left-icon" name="chevron-up"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-button color="primary" type="outlined" size="xl">\n\t\t\t\t<gov-icon slot="left-icon" name="chevron-down"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-form-select name="test-me" size="xl">\n\t\t\t\t<option value="" selected>Placeholder</option>\n\t\t\t\t<option value="b">Value B</option>\n\t\t\t\t<option value="c">Value C</option>\n\t\t\t\t<option value="d">Value D</option>\n\t\t\t</gov-form-select>\n\t\t\t<gov-button color="primary" type="outlined" size="xl">\n\t\t\t\t<gov-icon slot="left-icon" name="x-lg"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-control-group>\n\t\t`}}if(customElements.get("control-group-page")===undefined){customElements.define("control-group-page",Rt)}class Ft extends HTMLElement{connectedCallback(){this.innerHTML=`\n\t\t\t<gov-cookiebar>\n\t\t\t\t<h2 slot="headline">Můžeme si u vás uložit cookies?</h2>\n\n\t\t\t\t<p>\n\t\t\t\t\tCo že to znamená? Cookies jsou malé datové soubory, které slouží např. k tomu, aby si web pamatoval vaše nastavení a to, co vás zajímá, nebo abychom jej zlepšovali . Pro ukládání různých typů cookies od vás potřebujeme souhlas. Web bude fungovat i bez souhlasu, s ním ale o něco lépe.\n\t\t\t\t</p>\n\n\t\t\t\t<gov-button color="primary" size="m" type="solid" slot="actions-primary">\n\t\t\t\t\tSouhlasím se všemi\n\t\t\t\t</gov-button>\n\n\t\t\t\t<gov-button color="primary" size="m" type="outlined" slot="actions-primary">\n\t\t\t\t\tOdmítnout všechny\n\t\t\t\t</gov-button>\n\n\t\t\t\t<gov-button color="primary" size="m" type="base" slot="actions-secondary">\n\t\t\t\t\tPodrobné nastavení\n\t\t\t\t</gov-button>\n\t\t\t</gov-cookiebar>\n\t\t`}}if(customElements.get("cookiebar-page")===undefined){customElements.define("cookiebar-page",Ft)}class Xt extends HTMLElement{connectedCallback(){this.innerHTML=`\n\t\t<h2>Empty</h2>\n\n\t\t<gov-container>\n\t\t\t<gov-empty size="s">\n\t\t\t\t<gov-icon slot="icon" name="id-card" type="complex"></gov-icon>\n\t\t\t\t<p slot="headline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>\n\t\t\t\t<p>Informace o tom, že je potřeba upřesnit vyhledávání</p>\n\t\t\t\t<gov-button size="s" color="primary" type="solid">\n\t\t\t\t\tPřejít na jinou stránku\n\t\t\t\t</gov-button>\n\t\t\t</gov-empty>\n\t\t\t<gov-empty align="right" size="m">\n\t\t\t\t<gov-icon slot="icon" name="envelope" type="complex"></gov-icon>\n\t\t\t\t<p slot="headline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>\n\t\t\t\t<p>Informace o tom, že je potřeba upřesnit vyhledávání</p>\n\t\t\t\t<gov-button size="m" color="primary" type="solid">\n\t\t\t\t\tVíce\n\t\t\t\t</gov-button>\n\t\t\t</gov-empty>\n\t\t\t<gov-empty align="center" size="l">\n\t\t\t\t<gov-icon slot="icon" name="car" type="complex"></gov-icon>\n\t\t\t\t<p slot="headline">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ipsum vitae etiam dui eget lectus vulputate ornare.</p>\n\t\t\t\t<p>Informace o tom, že je potřeba upřesnit vyhledávání</p>\n\t\t\t\t<gov-button size="l" color="primary" type="solid">\n\t\t\t\t\tVíce informací\n\t\t\t\t</gov-button>\n\t\t\t</gov-empty>\n\t\t</gov-container>\n\t\t`}}if(customElements.get("empty-page")===undefined){customElements.define("empty-page",Xt)}class Ut extends HTMLElement{connectedCallback(){this.innerHTML=`\n\t\t<h2>Error</h2>\n\t\t<gov-container>\n\t\t\t<gov-error-code>\n\t\t\t\t<gov-icon slot="icon" name="card-400" type="complex"></gov-icon>\n\t\t\t\t<h2 slot="headline">Page Not Found</h2>\n\t\t\t\t<p>Sorry, the page you are looking for does not exist.</p>\n\t\t\t</gov-error-code>\n\t\t</gov-container>\n\t\t`}}if(customElements.get("error-page")===undefined){customElements.define("error-page",Ut)}class $t extends HTMLElement{connectedCallback(){this.innerHTML=`\n\t\t\t<gov-form-label>\n\t\t\t\tForm Label\n\t\t\t</gov-form-label>\n\t`}}if(customElements.get("form-label-page")===undefined){customElements.define("form-label-page",$t)}class Kt extends HTMLElement{connectedCallback(){this.innerHTML=`\n\t\t\t<gov-form-message>\n\t\t\t\t<gov-icon slot="icon" name="info"></gov-icon>\n\t\t\t\t<p>\n\t\t\t\t\tDefault\n\t\t\t\t</p>\n\t\t\t</gov-form-message>\n\t\t\t<gov-form-message>\n\t\t\t\t<p>\n\t\t\t\t\tDefault\n\t\t\t\t</p>\n\t\t\t</gov-form-message>\n\t\t\t<gov-form-message color="secondary">\n\t\t\t\t<gov-icon name="info" slot="icon"></gov-icon>\n\t\t\t\t<p>\n\t\t\t\t\tSecondary\n\t\t\t\t</p>\n\t\t\t</gov-form-message>\n\t\t\t<gov-form-message color="secondary">\n\t\t\t\t<p>\n\t\t\t\t\tSecondary\n\t\t\t\t</p>\n\t\t\t</gov-form-message>\n\t\t\t<gov-form-message color="error">\n\t\t\t\t<gov-icon slot="icon" name="info"></gov-icon>\n\t\t\t\t<p>\n\t\t\t\t\tError\n\t\t\t\t</p>\n\t\t\t</gov-form-message>\n\t\t\t<gov-form-message color="error">\n\t\t\t\t<p>\n\t\t\t\t\tError\n\t\t\t\t</p>\n\t\t\t</gov-form-message>\n\t\t\t<gov-form-message color="warning">\n\t\t\t\t<gov-icon slot="icon" name="info"></gov-icon>\n\t\t\t\t<p>\n\t\t\t\t\tWarning\n\t\t\t\t</p>\n\t\t\t</gov-form-message>\n\t\t\t<gov-form-message color="warning">\n\t\t\t\t<p>\n\t\t\t\t\tWarning\n\t\t\t\t</p>\n\t\t\t</gov-form-message>\n\t\t\t<gov-form-message color="success">\n\t\t\t\t<gov-icon slot="icon" name="info"></gov-icon>\n\t\t\t\t<p>\n\t\t\t\t\tSuccess\n\t\t\t\t</p>\n\t\t\t</gov-form-message>\n\t\t\t<gov-form-message color="success">\n\t\t\t\t<p>\n\t\t\t\t\tSuccess\n\t\t\t\t</p>\n\t\t\t</gov-form-message>\n\t\t\t<gov-form-message>\n\t\t\t\t<gov-icon slot="icon" name="info"></gov-icon>\n\t\t\t\t<p>\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae dapibus eros, a dapibus metus. Ut a leo lorem. Sed ut fermentum diam. Sed porttitor ligula est, eget lobortis lacus rutrum et. Nunc sapien arcu, faucibus sit amet justo vel, aliquam gravida magna. Pellentesque et tempor risus.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tAliquam suscipit justo dolor, et pellentesque dui venenatis quis. Vestibulum dignissim libero urna, non ultricies neque consequat ut.\n\t\t\t\t</p>\n\t\t\t</gov-form-message>\n\t\t\t<gov-form-message>\n\t\t\t\t<p>\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vitae dapibus eros, a dapibus metus. Ut a leo lorem. Sed ut fermentum diam. Sed porttitor ligula est, eget lobortis lacus rutrum et. Nunc sapien arcu, faucibus sit amet justo vel, aliquam gravida magna. Pellentesque et tempor risus.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tAliquam suscipit justo dolor, et pellentesque dui venenatis quis. Vestibulum dignissim libero urna, non ultricies neque consequat ut.\n\t\t\t\t</p>\n\t\t\t</gov-form-message>\n\t`}}if(customElements.get("form-message-page")===undefined){customElements.define("form-message-page",Kt)}const Wt=t=>{if(!t)return t;return t.normalize("NFD").replace(/[\u0300-\u036f]/g,"")};const Gt=(t,o)=>Math.floor(Math.random()*(o-t+1)+t);const Jt=()=>[{name:"Pepa"},{name:"Katak"},{name:"Tomáš"},{name:"Ludvík"},{name:"Anežda"},{name:"Xaviér"},{name:"Ondřej"},{name:"Mirek"},{name:"Zdeněk"},{name:"Monika"},{name:"Jirka"},{name:"Abrahám"},{name:"Lucie"},{name:"Emily"},{name:"Pavel"},{name:"Gustav"},{name:"Amálie"}];class Yt extends HTMLElement{connectedCallback(){(()=>{setTimeout((()=>{const t=document.getElementById("selected");const o=document.getElementById("moja");const n=document.getElementById("test-me-ujo");const e=document.getElementById("bagr");const i=document.getElementById("ba");const l=document.getElementById("kaprWWWWWW");const s=document.getElementById("poleno");if(i){i.addEventListener("gov-change",(function(t){console.log(t)}))}if(l){l.addEventListener("gov-blur",(function(t){console.log(t)}))}if(n){n.addEventListener("gov-files",(function(t){console.log(t.detail)}))}if(e){e.addEventListener("gov-select",(function(t){console.log(t)}));e.setSearchCallback((t=>new Promise((o=>{setTimeout((()=>{o(Jt().filter((({name:o})=>{if(!o)return false;return Wt(o).toLowerCase().indexOf(Wt(t).toLowerCase())>-1})))}),Gt(100,1e3))}))))}if(s&&t){s.addEventListener("gov-change",(o=>{o.detail.value.map((o=>{const n=document.createElement("button");n.innerHTML=o;n.addEventListener("click",(()=>{s.options=[{value:"a",label:"Aneta"}]}));t.appendChild(n)}))}));s.options=[{value:"a",label:"Aneta"},{value:"b",label:"Beata"},{value:"t",label:"Tomáš"}];setTimeout((()=>{}),5e3)}if(o){o.options=[{value:"d",label:"Value D"},{value:"e",label:"Value E"},{value:"f",label:"Value F",disabled:true}];setTimeout((()=>{o.value="h";o.options=[{value:"g",label:"Value G"},{value:"h",label:"Value H"},{value:"i",label:"Value I"}]}),2e3)}const a=document.getElementById("moje-id");const r=document.createElement("gov-form-input");r.setAttribute("size","l");r.setAttribute("placeholder","Co hledáte HYDRATED?");r.addEventListener("gov-hydrated",(()=>{console.log("hydrated")}));a.prepend(r)}),1e3)})();this.innerHTML=`\n<div id="selected"></div>\n<div id="moje-id"></div>\n<br><br>\n\n<ul class="gov-list--plain nav-top">\n\t<li><a href="#input">Input</a></li>\n\t<li><a href="#containing-input">Containing Input</a></li>\n\t<li><a href="#select">Select</a></li>\n\t<li><a href="#checkbox">Checkbox</a></li>\n\t<li><a href="#radio">Radio</a></li>\n\t<li><a href="#switch">Switch</a></li>\n</ul>\n\n<br><br>\n\x3c!-- ----------------------------------------------------------------------------------------------------------------------------- --\x3e\n\n\n<gov-form-control>\n\t<gov-form-label size="m" slot="top">Multiselect</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-multi-select name="test-me" size="xl" id="poleno">\n\t\t</gov-form-multi-select>\n\t</gov-form-group>\n</gov-form-control>\n\n<gov-form-control>\n\t<gov-form-label size="m" slot="top">Souhlasím</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-select  value="e" name="test-me" size="xl" id="moja">\n\t\t</gov-form-select>\n\t</gov-form-group>\n</gov-form-control>\n\n<h2>Samostatné použití</h2>\n<gov-form-input placeholder="Co hledáte" size="m">\n\t<gov-icon slot="right-icon" name="info"></gov-icon>\n</gov-form-input>\n<br>\n<gov-form-select size="l" name="test-me" invalid="true">\n\t<option value="" selected>Placeholder</option>\n\t<option value="b">Value B</option>\n\t<option value="c">Value C</option>\n\t<option value="d">Value D</option>\n</gov-form-select>\n<br>\n<gov-form-select size="l" name="test-me" success="true">\n\t<option value="" selected>Placeholder</option>\n\t<option value="b">Value B</option>\n\t<option value="c">Value C</option>\n\t<option value="d">Value D</option>\n</gov-form-select>\n<br>\n<div>\n\t<gov-form-checkbox size="m" name="test-me-c" value="me" checked no-label></gov-form-checkbox>\n</div>\n<div>\n\t<gov-form-radio size="m" name="superRadio2" value="me1" no-label></gov-form-radio>\n\t<br>\n\t<gov-form-radio size="m" name="superRadio2" value="me2" checked no-label></gov-form-radio>\n</div>\n<div>\n\t<gov-form-switch size="m" name="test-me" value="me2" checked no-label></gov-form-switch>\n</div>\n<br><br>\n<gov-form-checkbox size="m" name="test-me-c" value="me" checked>\n\t<gov-form-label size="m" slot="label">Souhlasím</gov-form-label>\n</gov-form-checkbox>\n<gov-form-radio size="m" name="superRadio" value="me1">\n\t<gov-form-label size="m" slot="label">Souhlasím</gov-form-label>\n</gov-form-radio>\n<gov-form-radio size="m" name="superRadio" value="me2" checked>\n\t<gov-form-label size="m" slot="label">Souhlasím</gov-form-label>\n</gov-form-radio>\n<gov-form-switch size="m" name="test-me" value="me2" checked>\n\t<gov-form-label size="m" slot="label">Souhlasím</gov-form-label>\n</gov-form-switch>\n\n<br><br>\n\x3c!-- ----------------------------------------------------------------------------------------------------------------------------- --\x3e\n\n\n<h2 id="input">Input</h2>\n<gov-form-control type="input">\n\t<gov-form-label size="xs" slot="top">Label of input XS</gov-form-label>\n\t<gov-form-group gap="xs">\n\t\t<gov-form-input type="number" name="test-me" placeholder="Placeholder" size="xs"></gov-form-input>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control type="input">\n\t<gov-form-label size="s" slot="top">Label of input S</gov-form-label>\n\t<gov-form-group gap="s">\n\t\t<gov-form-input type="number" name="test-me" placeholder="Placeholder" size="s"></gov-form-input>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control type="input">\n\t<gov-form-label size="s" slot="top">Label of input M</gov-form-label>\n\t<gov-form-group gap="m">\n\t\t<gov-form-input type="number" name="test-me" placeholder="Placeholder" size="m"></gov-form-input>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control type="input">\n\t<gov-form-label size="s" slot="top">Label of input 3333 L</gov-form-label>\n\t<gov-form-group gap="l">\n\t\t<gov-form-input name="test-me" value="Value of input" size="l"></gov-form-input>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control type="input">\n\t<gov-form-label size="m" slot="top">Label of input XL</gov-form-label>\n\t<gov-form-group gap="xl">\n\t\t<gov-form-input name="test-me" value="Value of input" size="xl"></gov-form-input>\n\t</gov-form-group>\n</gov-form-control>\n\n<h3>Prefix / sufix</h3>\n<gov-form-control type="input">\n\t<gov-form-label size="xs" slot="top">Label of input</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input type="number" name="test-me" placeholder="Placeholder" size="xs">\n\t\t\t<p slot="prefix">$</p>\n\t\t\t<p slot="sufix">Kč</p>\n\t\t</gov-form-input>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control type="input">\n\t<gov-form-label size="s" slot="top">Label of input</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input type="number" name="test-me" placeholder="Placeholder" size="s">\n\t\t\t<p slot="prefix">$</p>\n\t\t\t<p slot="sufix">Kč</p>\n\t\t</gov-form-input>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control type="input">\n\t<gov-form-label size="s" slot="top">Label of input</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input type="number" name="test-me" placeholder="Placeholder" size="m">\n\t\t\t<span slot="prefix">$</span>\n\t\t\t<span slot="sufix">Kč</span>\n\t\t</gov-form-input>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control type="input">\n\t<gov-form-label size="s" slot="top">Label of input</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input name="test-me" value="Value of input" size="l">\n\t\t\t<span slot="prefix">$</span>\n\t\t\t<span slot="sufix">Kč</span>\n\t\t</gov-form-input>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control type="input">\n\t<gov-form-label size="m" slot="top">Label of input</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input name="test-me" value="Value of input" size="xl">\n\t\t\t<span slot="prefix">$</span>\n\t\t\t<span slot="sufix">Kč</span>\n\t\t</gov-form-input>\n\t</gov-form-group>\n</gov-form-control>\n\n<h3>Left icon</h3>\n<gov-form-control type="input">\n\t<gov-form-label size="xs" slot="top">Label of input</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input name="test-me" placeholder="Placeholder" size="xs">\n\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t</gov-form-input>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control type="input">\n\t<gov-form-label size="s" slot="top">Label of input</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input name="test-me" placeholder="Placeholder" size="s">\n\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t</gov-form-input>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control type="input">\n\t<gov-form-label size="s" slot="top">Label of input</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input name="test-me" placeholder="Placeholder" size="m">\n\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t</gov-form-input>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control type="input">\n\t<gov-form-label size="s" slot="top">Label of input</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input name="test-me" value="Value of input" size="l">\n\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t</gov-form-input>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control type="input">\n\t<gov-form-label size="m" slot="top">Label of input</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input name="test-me" value="Value of input" size="xl">\n\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t</gov-form-input>\n\t</gov-form-group>\n</gov-form-control>\n\n<h3>Right icon</h3>\n<gov-form-control type="input">\n\t<gov-form-label size="xs" slot="top">Label of input</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input name="test-me" placeholder="Placeholder" size="xs">\n\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t</gov-form-input>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control type="input">\n\t<gov-form-label size="s" slot="top">Label of input</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input name="test-me" placeholder="Placeholder" size="s">\n\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t</gov-form-input>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control type="input">\n\t<gov-form-label size="m" slot="top">Label of input</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input name="test-me" placeholder="Placeholder" size="m">\n\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t</gov-form-input>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control type="input">\n\t<gov-form-label size="l" slot="top">Label of input</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input name="test-me" value="Value of input" size="l">\n\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t</gov-form-input>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control type="input">\n\t<gov-form-label size="xl" slot="top">Label of input</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input name="test-me" value="Value of input" size="xl">\n\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t</gov-form-input>\n\t</gov-form-group>\n</gov-form-control>\n\n<h3>Success</h3>\n<gov-form-control type="input">\n\t<gov-form-label size="xs" slot="top">Label of input</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input name="test-me" placeholder="Placeholder" size="xs" success="true"></gov-form-input>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control type="input">\n\t<gov-form-label size="s" slot="top">Label of input</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input name="test-me" placeholder="Placeholder" size="s" success="true"></gov-form-input>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control type="input">\n\t<gov-form-label size="s" slot="top">Label of input</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input name="test-me" placeholder="Placeholder" size="m" success="true"></gov-form-input>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control type="input">\n\t<gov-form-label size="s" slot="top">Label of input</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input name="test-me" value="Value of input" size="l" success="True">\n\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t</gov-form-input>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control type="input">\n\t<gov-form-label size="m" slot="top">Label of input</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input name="test-me" value="Value of input" size="xl" success="1">\n\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t</gov-form-input>\n\t</gov-form-group>\n</gov-form-control>\n\n<h3>Error</h3>\n<gov-form-control type="input">\n\t<gov-form-label size="xs" slot="top">Label of input</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input name="test-me" placeholder="Placeholder" size="xs" invalid="true" invalid="true"></gov-form-input>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" color="error" size="xs">\n\t\t<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>\n\t\tRequired\n\t</gov-form-message>\n</gov-form-control>\n<gov-form-control type="input">\n\t<gov-form-label size="s" slot="top">Label of input</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input name="test-me" placeholder="Placeholder" size="s" invalid="true"></gov-form-input>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" color="error" size="s">\n\t\t<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>\n\t\tRequired\n\t</gov-form-message>\n</gov-form-control>\n<gov-form-control type="input">\n\t<gov-form-label size="s" slot="top">Label of input</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input name="test-me" placeholder="Placeholder" size="m" invalid="true"></gov-form-input>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" color="error" size="m">\n\t\t<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>\n\t\tRequired\n\t</gov-form-message>\n</gov-form-control>\n<gov-form-control type="input">\n\t<gov-form-label size="s" slot="top">Label of input</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input name="test-me" value="Value of input" size="l" invalid="true">\n\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t</gov-form-input>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" color="error" size="l">\n\t\t<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>\n\t\tRequired\n\t</gov-form-message>\n</gov-form-control>\n<gov-form-control type="input">\n\t<gov-form-label size="m" slot="top">Label of input</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input name="test-me" value="Value of input" size="xl" invalid="true">\n\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t</gov-form-input>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" color="error" size="xl">\n\t\t<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>\n\t\tRequired\n\t</gov-form-message>\n</gov-form-control>\n\n<h3>Disabled</h3>\n<gov-form-control size="xs" type="input">\n\t<gov-form-label size="xs" slot="top">Label of input</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input name="test-me" placeholder="Placeholder" size="xs" disabled>\n\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t</gov-form-input>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control size="m" type="input">\n\t<gov-form-label size="s" slot="top">Label of input</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input name="test-me" placeholder="Placeholder" size="s" disabled>\n\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t</gov-form-input>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control size="m" type="input">\n\t<gov-form-label size="s" slot="top">Label of input</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input name="test-me" placeholder="Placeholder" size="m" disabled>\n\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t</gov-form-input>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control type="input">\n\t<gov-form-label size="s" slot="top">Label of input</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input name="test-me" value="Value of input" size="l" disabled="True">\n\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t</gov-form-input>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control type="input">\n\t<gov-form-label size="m" slot="top">Label of input</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input name="test-me" value="Value of input" size="xl" disabled="1">\n\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t</gov-form-input>\n\t</gov-form-group>\n</gov-form-control>\n\n<br><br>\n\x3c!-- ----------------------------------------------------------------------------------------------------------------------------- --\x3e\n\n\n<h3 id="containing-input">Password power</h3>\n<gov-form-password-power power="0"></gov-form-password-power>\n<gov-form-password-power power="1">slabé</gov-form-password-power>\n<gov-form-password-power power="2">střední</gov-form-password-power>\n<gov-form-password-power power="3">silné</gov-form-password-power>\n\n<br><br>\n\x3c!-- ----------------------------------------------------------------------------------------------------------------------------- --\x3e\n\n\n<h3>Password input</h3>\n<div style="width: 400px">\n<gov-form-control type="input">\n\t<gov-form-label size="m" slot="top">Heslo</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input name="test-me" size="m" input-type="password" invalid="true">\n\t\t\t<gov-icon slot="left-icon" name="gear"></gov-icon>\n\t\t</gov-form-input>\n\t</gov-form-group>\n\t<gov-form-password-power power="2">střední</gov-form-password-power>\n</gov-form-control>\n</div>\n<gov-form-control type="input">\n\t<gov-form-label size="m" slot="top">Heslo</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input name="test-me" size="m" input-type="password">\n\t\t</gov-form-input>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" color="error" size="m">\n\t\t<gov-icon slot="icon" name="x-lg"></gov-icon>\n\t\tPodmínka\n\t</gov-form-message>\n\t<gov-form-message slot="bottom" color="success" size="m">\n\t\t<gov-icon slot="icon" name="check-lg"></gov-icon>\n\t\tPodmínka\n\t</gov-form-message>\n\t<gov-form-message slot="bottom" color="error" size="m">\n\t\t<gov-icon slot="icon" name="x-lg"></gov-icon>\n\t\tPodmínka\n\t</gov-form-message>\n\t<gov-form-message slot="bottom" color="success" size="m">\n\t\t<gov-icon slot="icon" name="check-lg"></gov-icon>\n\t\tPodmínka\n\t</gov-form-message>\n</gov-form-control>\n\n<br><br>\n\x3c!-- ----------------------------------------------------------------------------------------------------------------------------- --\x3e\n\n\n<h2>Textarea</h2>\n<h3>Default</h3>\n<gov-form-control type="input">\n\t<gov-form-label size="xs" slot="top">Label of textarea</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input size="xs" multiline rows="3" name="test-me" placeholder="Placeholder">\n\t\t</gov-form-input>\n\t</gov-form-group>\n</gov-form-control>\n\n<gov-form-control type="input">\n\t<gov-form-label size="s" slot="top">Label of textarea</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input size="s" multiline rows="3" name="test-me" placeholder="Placeholder">\n\t\t\t<gov-icon slot="left-icon" name="info"></gov-icon>\n\t\t\t<gov-icon slot="right-icon" name="info"></gov-icon>\n\t\t</gov-form-input>\n\t</gov-form-group>\n</gov-form-control>\n\n<gov-form-control type="input">\n\t<gov-form-label size="m" slot="top">Label of textarea</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input size="m" multiline rows="3" name="test-me" placeholder="Placeholder">\n\t\t</gov-form-input>\n\t</gov-form-group>\n</gov-form-control>\n\n<gov-form-control type="input">\n\t<gov-form-label size="l" slot="top">Label of textarea</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input size="l" multiline rows="3" name="test-me" placeholder="Placeholder">\n\t\t</gov-form-input>\n\t</gov-form-group>\n</gov-form-control>\n\n<gov-form-control type="input">\n\t<gov-form-label size="xl" slot="top">Label of textarea</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input size="xl" multiline rows="3" name="test-me" placeholder="Placeholder">\n\t\t</gov-form-input>\n\t</gov-form-group>\n</gov-form-control>\n\n<h3>Invalid</h3>\n<gov-form-control type="input">\n\t<gov-form-label size="s" slot="top">Label of textarea</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input required multiline rows="3" name="test-me" value="Value of textarea" invalid="TRUE"></gov-form-input>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" color="error">\n\t\t<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>\n\t\tRequired\n\t</gov-form-message>\n</gov-form-control>\n\n<h3>Disabled</h3>\n<gov-form-control>\n\t<gov-form-label size="s" slot="top">Label of textarea</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-input multiline rows="3" name="test-me" disabled value="Value of textarea"></gov-form-input>\n\t</gov-form-group>\n</gov-form-control>\n\n<br><br>\n\x3c!-- ----------------------------------------------------------------------------------------------------------------------------- --\x3e\n\n\n<h2>Date & Time input (nativní)</h2>\n<gov-form-input size="xs" placeholder="Co hledáte" input-type="datetime-local"></gov-form-input>\n<br>\n<gov-form-input size="s" placeholder="Co hledáte" input-type="date"></gov-form-input>\n<br>\n<gov-form-input size="m" placeholder="Co hledáte" input-type="datetime-local"></gov-form-input>\n<br>\n<gov-form-input size="l" placeholder="Co hledáte" input-type="date"></gov-form-input>\n<br>\n<gov-form-input size="xl" placeholder="Co hledáte" input-type="time"></gov-form-input>\n\n<br><br>\n\x3c!-- ----------------------------------------------------------------------------------------------------------------------------- --\x3e\n\n\n<h2>Search</h2>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-search name="test-me-c" value="me" size="s" color="primary">\n\t\t\t<gov-form-input slot="input" name="test-me" size="s" placeholder="Co hledáte"></gov-form-input>\n\t\t\t<gov-button slot="button" size="s" color="primary" type="solid">\n\t\t\t\tHledat\n\t\t\t</gov-button>\n\t\t</gov-form-search>\n\t</gov-form-group>\n</gov-form-control>\n<br>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-search name="test-me-c" value="me"checked size="m" color="primary">\n\t\t\t<gov-form-input slot="input" size="m" name="test-me" placeholder="Co hledáte"></gov-form-input>\n\t\t\t<gov-button slot="button" color="primary" size="m" type="solid">\n\t\t\t\tHledat\n\t\t\t</gov-button>\n\t\t</gov-form-search>\n\t</gov-form-group>\n</gov-form-control>\n<br>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-search name="test-me-c" value="me" size="l">\n\t\t\t<gov-form-input slot="input" name="test-me" size="l" placeholder="Co hledáte"></gov-form-input>\n\t\t\t<gov-button slot="button-erase" size="l" color="neutral" type="base">\n\t\t\t\t<gov-icon slot="left-icon" name="x"></gov-icon>\n\t\t\t</gov-button>\n\t\t\t<gov-button slot="button" size="l" color="neutral" type="solid">\n\t\t\t\t<gov-icon slot="left-icon" name="search"></gov-icon>\n\t\t\t</gov-button>\n\t\t</gov-form-search>\n\t</gov-form-group>\n</gov-form-control>\n\n<br><br>\n\x3c!-- ----------------------------------------------------------------------------------------------------------------------------- --\x3e\n\n\n<h2>Autocomplete</h2>\n<gov-form-control>\n\t<gov-form-label slot="top" size="xs">Label of autocomplete</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-autocomplete placeholder="Placeholder autcomplete" size="xs">\n\t\t\t<gov-icon name="search" slot="right-icon" />\n\t\t</gov-form-autocomplete>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-label slot="top" size="s">Label of autocomplete</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-autocomplete placeholder="Placeholder autcomplete" size="s" invalid="true">\n\t\t\t<gov-icon name="search" slot="right-icon" />\n\t\t</gov-form-autocomplete>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" color="error" size="s">\n\t\t<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>\n\t\tRequired\n\t</gov-form-message>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-label slot="top" size="m">Label of autocomplete</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-autocomplete placeholder="Placeholder autcomplete" size="m" success="true">\n\t\t\t<gov-icon name="search" slot="right-icon" />\n\t\t</gov-form-autocomplete>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-label slot="top" size="l" disabled="1">Label of autocomplete</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-autocomplete placeholder="Placeholder autcomplete" size="l" disabled="true">\n\t\t\t<gov-icon name="search" slot="right-icon" />\n\t\t</gov-form-autocomplete>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-label slot="top" size="xl">Label of autocomplete</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-autocomplete placeholder="Placeholder autcomplete" size="xl" invalid="true">\n\t\t\t<gov-icon name="search" slot="right-icon" />\n\t\t</gov-form-autocomplete>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" color="error" size="xl">\n\t\t<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>\n\t\tRequired\n\t</gov-form-message>\n</gov-form-control>\n\n<br><br>\n\x3c!-- ----------------------------------------------------------------------------------------------------------------------------- --\x3e\n\n\n<h2>File</h2>\n<h3>Default</h3>\n<gov-form-control>\n\t<gov-form-label size="s" slot="top">Přidat přílohu *</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-file size="m" id="test-me-ujo" display-attachments="false" multiple accept=".pdf,.jpg,.png,.jpeg" max-file-size="616448">\n\t\t\t<p>\n\t\t\t\t<gov-button color="primary" type="outlined" size="m" tabindex="-1">\n\t\t\t\t\t<gov-icon type="basic" name="search"></gov-icon>\n\t\t\t\t\tNahrát soubor ze zařízení\n\t\t\t\t</gov-button>\n\t\t\t</p>\n\t\t\t<p class="gov-form-file__note">\n\t\t\t\tPodporované formáty XML, PDF, DOC\n\t\t\t</p>\n\t\t</gov-form-file>\n\t</gov-form-group>\n</gov-form-control>\n<br>\n<gov-form-control>\n\t<gov-form-label size="s" slot="top">Přidat přílohu *</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-file name="test-me-c" disabled>\n\t\t\t<p aria-hidden="true">\n\t\t\t\t<gov-button color="primary" type="outlined" size="s" disabled>\n\t\t\t\t\t<gov-icon slot="left-icon" name="upload"></gov-icon>\n\t\t\t\t\tNahrát soubor ze zařízení\n\t\t\t\t</gov-button>\n\t\t\t</p>\n\t\t\t<p class="gov-form-file__note">\n\t\t\t\tPodporované formáty XML, PDF, DOC\n\t\t\t</p>\n\t\t</gov-form-file>\n\t</gov-form-group>\n</gov-form-control>\n<br>\n<gov-form-control>\n\t<gov-form-label size="s" slot="top">Přidat přílohu *</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-file name="test-me-c" invalid>\n\t\t\t<p>\n\t\t\t\t<gov-button color="error" type="outlined" size="m">\n\t\t\t\t\t<gov-icon slot="left-icon" name="upload"></gov-icon>\n\t\t\t\t\tNahrát soubor ze zařízení\n\t\t\t\t</gov-button>\n\t\t\t</p>\n\t\t\t<p class="gov-form-file__note">\n\t\t\t\tPodporované formáty XML, PDF, DOC\n\t\t\t</p>\n\t\t</gov-form-file>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" color="error" size="m">\n\t\t<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>\n\t\tRequired\n\t</gov-form-message>\n</gov-form-control>\n<br>\n\n<h3>Expanded</h3>\n<gov-form-control>\n\t<gov-form-label size="s" slot="top">Přidat přílohu *</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-file expanded name="test-me-c">\n\t\t\t<p>\n\t\t\t\tPřetáhněte soubor nebo\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\t<gov-button color="primary" type="outlined" size="m">\n\t\t\t\t\tNahrát ze zařízení\n\t\t\t\t</gov-button>\n\t\t\t</p>\n\t\t\t<p class="gov-form-file__note">\n\t\t\t\tPodporované formáty XML, PDF, DOC\n\t\t\t</p>\n\t\t</gov-form-file>\n\t</gov-form-group>\n</gov-form-control>\n<br>\n<gov-form-control>\n\t<gov-form-label size="s" slot="top">Přidat přílohu *</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-file expanded name="test-me-c" disabled aria-label="Tohle je husty">\n\t\t\t<p>\n\t\t\t\tPřetáhněte soubor nebo\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\t<gov-button disabled color="primary" type="outlined" size="m">\n\t\t\t\t\tNahrát ze zařízení\n\t\t\t\t</gov-button>\n\t\t\t</p>\n\t\t\t<p class="gov-form-file__note">\n\t\t\t\tPodporované formáty XML, PDF, DOC\n\t\t\t</p>\n\t\t</gov-form-file>\n\t</gov-form-group>\n</gov-form-control>\n<br>\n<gov-form-control>\n\t<gov-form-label size="s" slot="top">Přidat přílohu *</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-file expanded name="test-me-c" invalid>\n\t\t\t<p>\n\t\t\t\tPřetáhněte soubor nebo\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\t<gov-button color="error" type="outlined" size="m">\n\t\t\t\t\tNahrát ze zařízení\n\t\t\t\t</gov-button>\n\t\t\t</p>\n\t\t\t<p class="gov-form-file__note">\n\t\t\t\tPodporované formáty XML, PDF, DOC\n\t\t\t</p>\n\t\t</gov-form-file>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" color="error" size="m">\n\t\t<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>\n\t\tRequired\n\t</gov-form-message>\n</gov-form-control>\n\n<br><br>\n\x3c!-- ----------------------------------------------------------------------------------------------------------------------------- --\x3e\n\n\n<h2 id="select">Select</h2>\n<gov-form-control>\n\t<gov-form-label size="xs" slot="top">Souhlasím</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-select name="test-me" size="xs">\n\t\t\t<option value="" selected>Placeholder</option>\n\t\t\t<option value="b">Value B</option>\n\t\t\t<option value="c">Value C</option>\n\t\t\t<option value="d">Value D</option>\n\t\t</gov-form-select>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-select name="test-me" size="s">\n\t\t\t<option value="" selected>Placeholder</option>\n\t\t\t<option value="b">Value B</option>\n\t\t\t<option value="c">Value C</option>\n\t\t\t<option value="d">Value D</option>\n\t\t</gov-form-select>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-label size="m" slot="top">Souhlasím</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-select name="test-me" size="m">\n\t\t\t<option value="" selected>Placeholder</option>\n\t\t\t<option value="b">Value B</option>\n\t\t\t<option value="c">Value C</option>\n\t\t\t<option value="d">Value D</option>\n\t\t</gov-form-select>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-label size="l" slot="top">Souhlasím</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-select name="test-me" size="l">\n\t\t\t<option value="a" selected>Value A</option>\n\t\t\t<option value="b">Value B</option>\n\t\t\t<option value="c">Value C</option>\n\t\t\t<option value="d">Value D</option>\n\t\t</gov-form-select>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-label size="xl" slot="top">Souhlasím</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-select name="test-me" size="xl">\n\t\t\t<option value="a" selected>Value A</option>\n\t\t\t<option value="b">Value B</option>\n\t\t\t<option value="c">Value C</option>\n\t\t\t<option value="d">Value D</option>\n\t\t</gov-form-select>\n\t</gov-form-group>\n</gov-form-control>\n\n<h3>Prefix / sufix</h3>\n<gov-form-control>\n\t<gov-form-label size="xs" slot="top">Souhlasím</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-select name="test-me" size="xs">\n\t\t<span slot="prefix">$</span>\n\t\t<span slot="sufix">Kč</span>\n\t\t\t<option value="" selected>Placeholder</option>\n\t\t\t<option value="b">Value B</option>\n\t\t\t<option value="c">Value C</option>\n\t\t\t<option value="d">Value D</option>\n\t\t</gov-form-select>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-select name="test-me" size="s">\n\t\t<span slot="prefix">$</span>\n\t\t<span slot="sufix">Kč</span>\n\t\t\t<option value="" selected>Placeholder</option>\n\t\t\t<option value="b">Value B</option>\n\t\t\t<option value="c">Value C</option>\n\t\t\t<option value="d">Value D</option>\n\t\t</gov-form-select>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-label size="m" slot="top">Souhlasím</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-select name="test-me" size="m">\n\t\t<span slot="prefix">$</span>\n\t\t<span slot="sufix">Kč</span>\n\t\t\t<option value="" selected>Placeholder</option>\n\t\t\t<option value="b">Value B</option>\n\t\t\t<option value="c">Value C</option>\n\t\t\t<option value="d">Value D</option>\n\t\t</gov-form-select>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-label size="l" slot="top">Souhlasím</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-select name="test-me" size="l">\n\t\t<span slot="prefix">$</span>\n\t\t<span slot="sufix">Kč</span>\n\t\t\t<option value="a" selected>Value A</option>\n\t\t\t<option value="b">Value B</option>\n\t\t\t<option value="c">Value C</option>\n\t\t\t<option value="d">Value D</option>\n\t\t</gov-form-select>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-label size="xl" slot="top">Souhlasím</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-select name="test-me" size="xl">\n\t\t<span slot="prefix">$</span>\n\t\t<span slot="sufix">Kč</span>\n\t\t\t<option value="a" selected>Value A</option>\n\t\t\t<option value="b">Value B</option>\n\t\t\t<option value="c">Value C</option>\n\t\t\t<option value="d">Value D</option>\n\t\t</gov-form-select>\n\t</gov-form-group>\n</gov-form-control>\n\n<h3>Success</h3>\n<gov-form-control>\n\t<gov-form-label size="xs" slot="top">Souhlasím</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-select name="test-me" size="xs"  success="true">\n\t\t\t<option value="" selected>Placeholder</option>\n\t\t\t<option value="b">Value B</option>\n\t\t\t<option value="c">Value C</option>\n\t\t\t<option value="d">Value D</option>\n\t\t</gov-form-select>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-select name="test-me" size="s" success="true">\n\t\t\t<option value="" selected>Placeholder</option>\n\t\t\t<option value="b">Value B</option>\n\t\t\t<option value="c">Value C</option>\n\t\t\t<option value="d">Value D</option>\n\t\t</gov-form-select>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-label size="m" slot="top">Souhlasím</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-select name="test-me" size="m" success="true">\n\t\t\t<option value="" selected>Placeholder</option>\n\t\t\t<option value="b">Value B</option>\n\t\t\t<option value="c">Value C</option>\n\t\t\t<option value="d">Value D</option>\n\t\t</gov-form-select>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-label size="l" slot="top">Souhlasím</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-select name="test-me" size="l" success="true">\n\t\t\t<option value="" selected>Placeholder</option>\n\t\t\t<option value="b">Value B</option>\n\t\t\t<option value="c">Value C</option>\n\t\t\t<option value="d">Value D</option>\n\t\t</gov-form-select>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-label size="xl" slot="top">Souhlasím</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-select name="test-me" size="xl" success="true">\n\t\t\t<option value="" selected>Placeholder</option>\n\t\t\t<option value="b">Value B</option>\n\t\t\t<option value="c">Value C</option>\n\t\t\t<option value="d">Value D</option>\n\t\t</gov-form-select>\n\t</gov-form-group>\n</gov-form-control>\n\n<h3>Invalid</h3>\n<gov-form-control>\n\t<gov-form-label size="xs" slot="top">Souhlasím</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-select name="test-me" size="xs" invalid="true">\n\t\t\t<option value="" selected>Placeholder</option>\n\t\t\t<option value="b">Value B</option>\n\t\t\t<option value="c">Value C</option>\n\t\t\t<option value="d">Value D</option>\n\t\t</gov-form-select>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" color="error" size="xs">\n\t\t<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>\n\t\tRequired\n\t</gov-form-message>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-select name="test-me" size="s" invalid="true">\n\t\t\t<option value="" selected>Placeholder</option>\n\t\t\t<option value="b">Value B</option>\n\t\t\t<option value="c">Value C</option>\n\t\t\t<option value="d">Value D</option>\n\t\t</gov-form-select>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" color="error" size="s">\n\t\t<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>\n\t\tRequired\n\t</gov-form-message>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-label size="m" slot="top">Souhlasím</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-select name="test-me" size="m" invalid="true">\n\t\t\t<option value="" selected>Placeholder</option>\n\t\t\t<option value="b">Value B</option>\n\t\t\t<option value="c">Value C</option>\n\t\t\t<option value="d">Value D</option>\n\t\t</gov-form-select>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" color="error" size="m">\n\t\t<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>\n\t\tRequired\n\t</gov-form-message>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-label size="l" slot="top">Souhlasím</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-select name="test-me" size="l" invalid="true">\n\t\t\t<option value="" selected>Placeholder</option>\n\t\t\t<option value="b">Value B</option>\n\t\t\t<option value="c">Value C</option>\n\t\t\t<option value="d">Value D</option>\n\t\t</gov-form-select>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" color="error" size="l">\n\t\t<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>\n\t\tRequired\n\t</gov-form-message>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-label size="xl" slot="top">Souhlasím</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-select name="test-me" size="xl" invalid="true">\n\t\t\t<option value="" selected>Placeholder</option>\n\t\t\t<option value="b">Value B</option>\n\t\t\t<option value="c">Value C</option>\n\t\t\t<option value="d">Value D</option>\n\t\t</gov-form-select>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" color="error" size="xl">\n\t\t<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>\n\t\tRequired\n\t</gov-form-message>\n</gov-form-control>\n\n<h3>Disabled</h3>\n<gov-form-control>\n\t<gov-form-label size="xs" slot="top">Souhlasím</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-select name="test-me" size="xs" disabled>\n\t\t\t<option value="" selected>Placeholder</option>\n\t\t\t<option value="b">Value B</option>\n\t\t\t<option value="c">Value C</option>\n\t\t\t<option value="d">Value D</option>\n\t\t</gov-form-select>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-label size="s" slot="top">Souhlasím</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-select name="test-me" size="s" disabled>\n\t\t\t<option value="" selected>Placeholder</option>\n\t\t\t<option value="b">Value B</option>\n\t\t\t<option value="c">Value C</option>\n\t\t\t<option value="d">Value D</option>\n\t\t</gov-form-select>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-label size="m" slot="top">Souhlasím</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-select name="test-me" size="m" disabled>\n\t\t\t<option value="" selected>Placeholder</option>\n\t\t\t<option value="b">Value B</option>\n\t\t\t<option value="c">Value C</option>\n\t\t\t<option value="d">Value D</option>\n\t\t</gov-form-select>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-label size="l" slot="top">Souhlasím</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-select name="test-me" size="l" disabled="true">\n\t\t\t<option value="" selected>Placeholder</option>\n\t\t\t<option value="b">Value B</option>\n\t\t\t<option value="c">Value C</option>\n\t\t\t<option value="d">Value D</option>\n\t\t</gov-form-select>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-label size="xl" slot="top">Souhlasím</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-select name="test-me" size="xl" disabled="true">\n\t\t\t<option value="" selected>Placeholder</option>\n\t\t\t<option value="b">Value B</option>\n\t\t\t<option value="c">Value C</option>\n\t\t\t<option value="d">Value D</option>\n\t\t</gov-form-select>\n\t</gov-form-group>\n</gov-form-control>\n\n<br><br>\n\x3c!-- ----------------------------------------------------------------------------------------------------------------------------- --\x3e\n\n\n<h2>Multiselect</h2>\n<gov-form-control>\n\t<gov-form-label slot="top" size="xs">Multiselect</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-multi-select size="xs" placeholder="Placeholder" wcag-described-by="me-and-you">\n\t\t\t<option value>Placeholder</option>\n\t\t\t<option value="b">Value B</option>\n\t\t\t<option value="c">Value C</option>\n\t\t\t<option value="d" selected>Value D</option>\n\t\t\t<option value="e">Value E</option>\n\t\t\t<option value="f">Value F</option>\n\t\t\t<option value="g">Value G</option>\n\t\t\t<option value="h">Value H</option>\n\t\t\t<option value="i" selected>Value I</option>\n\t\t</gov-form-multi-select>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" color="neutral" size="xs">\n\t\tMessage\n\t</gov-form-message>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-label slot="top" size="s">Multiselect</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-multi-select size="s" placeholder="Placeholder" wcag-described-by="me-and-you">\n\t\t\t<option value>Placeholder</option>\n\t\t\t<option value="b">Value B</option>\n\t\t\t<option value="c">Value C</option>\n\t\t\t<option value="d" selected>Value D</option>\n\t\t\t<option value="e">Value E</option>\n\t\t\t<option value="f">Value F</option>\n\t\t\t<option value="g">Value G</option>\n\t\t\t<option value="h">Value H</option>\n\t\t\t<option value="i" selected>Value I</option>\n\t\t</gov-form-multi-select>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" color="neutral" size="xs">\n\t\tMessage\n\t</gov-form-message>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-label slot="top" size="m">Multiselect</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-multi-select size="m" placeholder="Placeholder" wcag-described-by="me-and-you" invalid="true">\n\t\t\t<option value>Placeholder</option>\n\t\t\t<option value="b">Value B</option>\n\t\t\t<option value="c">Value C</option>\n\t\t\t<option value="d" selected>Value D</option>\n\t\t\t<option value="e">Value E</option>\n\t\t\t<option value="f">Value F</option>\n\t\t\t<option value="g">Value G</option>\n\t\t\t<option value="h">Value H</option>\n\t\t\t<option value="i" selected>Value I</option>\n\t\t</gov-form-multi-select>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" color="error" size="m">\n\t\t<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>\n\t\tRequired\n\t</gov-form-message>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-label slot="top" size="l">Multiselect</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-multi-select size="l" placeholder="Placeholder" wcag-described-by="me-and-you" success="true">\n\t\t\t<option value>Placeholder</option>\n\t\t\t<option value="b">Value B</option>\n\t\t\t<option value="c">Value C</option>\n\t\t\t<option value="d" selected>Value D</option>\n\t\t\t<option value="e">Value E</option>\n\t\t\t<option value="f">Value F</option>\n\t\t\t<option value="g">Value G</option>\n\t\t\t<option value="h">Value H</option>\n\t\t\t<option value="i" selected>Value I</option>\n\t\t</gov-form-multi-select>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-label slot="top" size="xl">Multiselect</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-multi-select size="xl" placeholder="Placeholder" wcag-described-by="me-and-you" disabled>\n\t\t\t<option value>Placeholder</option>\n\t\t\t<option value="b">Value B</option>\n\t\t\t<option value="c">Value C</option>\n\t\t\t<option value="d" selected>Value D</option>\n\t\t\t<option value="e">Value E</option>\n\t\t\t<option value="f">Value F</option>\n\t\t\t<option value="g">Value G</option>\n\t\t\t<option value="h">Value H</option>\n\t\t\t<option value="i" selected>Value I</option>\n\t\t</gov-form-multi-select>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" color="neutral" size="xl">\n\t\tMessage\n\t</gov-form-message>\n</gov-form-control>\n<h3>Prefix/sufix</h3>\n<gov-form-multi-select size="s" placeholder="Placeholder" wcag-described-by="me-and-you">\n\t<span slot="prefix">$</span>\n\t<span slot="sufix">Kč</span>\n\t<option value>Placeholder</option>\n\t<option value="b">Value B</option>\n\t<option value="c">Value C</option>\n\t<option value="d" selected>Value D</option>\n\t<option value="e">Value E</option>\n\t<option value="f">Value F</option>\n\t<option value="g">Value G</option>\n\t<option value="h">Value H</option>\n\t<option value="i" selected>Value I</option>\n</gov-form-multi-select>\n<br>\n<gov-form-multi-select size="m" placeholder="Placeholder" wcag-described-by="me-and-you" invalid="true">\n\t<span slot="prefix">$</span>\n\t<span slot="sufix">Kč</span>\n\t<option value>Placeholder</option>\n\t<option value="b">Value B</option>\n\t<option value="c">Value C</option>\n\t<option value="d" selected>Value D</option>\n\t<option value="e">Value E</option>\n\t<option value="f">Value F</option>\n\t<option value="g">Value G</option>\n\t<option value="h">Value H</option>\n\t<option value="i" selected>Value I</option>\n</gov-form-multi-select>\n<br>\n<gov-form-multi-select size="l" placeholder="Placeholder" wcag-described-by="me-and-you" success="true">\n\t<span slot="prefix">$</span>\n\t<span slot="sufix">Kč</span>\n\t<option value>Placeholder</option>\n\t<option value="b">Value B</option>\n\t<option value="c">Value C</option>\n\t<option value="d" selected>Value D</option>\n\t<option value="e">Value E</option>\n\t<option value="f">Value F</option>\n\t<option value="g">Value G</option>\n\t<option value="h">Value H</option>\n\t<option value="i" selected>Value I</option>\n</gov-form-multi-select>\n<br>\n<gov-form-multi-select size="xl" placeholder="Placeholder" wcag-described-by="me-and-you" disabled>\n\t<span slot="prefix">$</span>\n\t<span slot="sufix">Kč</span>\n\t<option value>Placeholder</option>\n\t<option value="b">Value B</option>\n\t<option value="c">Value C</option>\n\t<option value="d" selected>Value D</option>\n\t<option value="e">Value E</option>\n\t<option value="f">Value F</option>\n\t<option value="g">Value G</option>\n\t<option value="h">Value H</option>\n\t<option value="i" selected>Value I</option>\n</gov-form-multi-select>\n\n<br><br>\n\x3c!-- ----------------------------------------------------------------------------------------------------------------------------- --\x3e\n\n\n<h2 id="checkbox">Checkbox</h2>\n<h3>Gaps</h3>\n<gov-form-control>\n\t<gov-form-label size="xs" slot="top">Label of word</gov-form-label>\n\t<gov-form-group gap="xs">\n\t\t<gov-form-checkbox indeterminate name="test-me-c" value="me" size="m" no-label checked>\n\t\t\t<gov-form-label slot="label" class="sr-only">Option 1</gov-form-label>\n\t\t</gov-form-checkbox>\n\t\t<gov-form-checkbox name="test-me-c" value="me" size="m" no-label>\n\t\t\t<gov-form-label slot="label" class="sr-only">Option 2</gov-form-label>\n\t\t</gov-form-checkbox>\n\t</gov-form-group>\n</gov-form-control>\n<br>\n<gov-form-control>\n\t<gov-form-group gap="xs">\n\t\t<gov-form-checkbox name="test-me-c" value="me" size="xs" required checked>\n\t\t\t<gov-form-label slot="label">Option 1</gov-form-label>\n\t\t</gov-form-checkbox>\n\t\t<gov-form-checkbox name="test-me-c" value="me" size="xs" checked>\n\t\t\t<gov-form-label slot="label" size="xs">Option 2</gov-form-label>\n\t\t</gov-form-checkbox>\n\t</gov-form-group>\n</gov-form-control>\n<br>\n<gov-form-control>\n\t<gov-form-group gap="xs">\n\t\t<gov-form-checkbox name="test-me-c" value="me" size="s" required checked>\n\t\t\t<gov-form-label slot="label">Option 1</gov-form-label>\n\t\t</gov-form-checkbox>\n\t\t<gov-form-checkbox name="test-me-c" value="me" size="s" checked>\n\t\t\t<gov-form-label slot="label" size="s">Option 2</gov-form-label>\n\t\t</gov-form-checkbox>\n\t</gov-form-group>\n</gov-form-control>\n<br>\n<gov-form-control>\n\t<gov-form-group gap="xs">\n\t\t<gov-form-checkbox name="test-me-c" value="me" size="m" checked>\n\t\t\t<gov-form-label slot="label">Option 1</gov-form-label>\n\t\t</gov-form-checkbox>\n\t\t<gov-form-checkbox name="test-me-c" value="me" size="m" checked>\n\t\t\t<gov-form-label slot="label" size="m">Option 2</gov-form-label>\n\t\t</gov-form-checkbox>\n\t</gov-form-group>\n</gov-form-control>\n<br>\n<gov-form-control>\n\t<gov-form-group gap="s">\n\t\t<gov-form-checkbox name="test-me-c" value="me" size="l" checked>\n\t\t\t<gov-form-label slot="label">Option 1</gov-form-label>\n\t\t</gov-form-checkbox>\n\t\t<gov-form-checkbox name="test-me-c" value="me" size="l" checked>\n\t\t\t<gov-form-label slot="label" size="l">Option 2</gov-form-label>\n\t\t</gov-form-checkbox>\n\t</gov-form-group>\n</gov-form-control>\n<br>\n<gov-form-control>\n\t<gov-form-group gap="m">\n\t\t<gov-form-checkbox name="test-me-c" value="me" size="xl" checked>\n\t\t\t<gov-form-label slot="label">Option 1</gov-form-label>\n\t\t</gov-form-checkbox>\n\t\t<gov-form-checkbox name="test-me-c" value="me" size="xl" checked>\n\t\t\t<gov-form-label slot="label" size="xl">Option 2</gov-form-label>\n\t\t</gov-form-checkbox>\n\t</gov-form-group>\n</gov-form-control>\n\n<h3>Default</h3>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-checkbox name="test-me-c" value="me" size="xs" checked>\n\t\t\t<gov-form-label slot="label" size="xs">Souhlasím</gov-form-label>\n\t\t</gov-form-checkbox>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-checkbox name="test-me-c" value="me" size="s" checked>\n\t\t\t<gov-form-label slot="label" size="s">Souhlasím</gov-form-label>\n\t\t</gov-form-checkbox>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-checkbox name="test-me-c" value="me" size="m" checked>\n\t\t\t<gov-form-label slot="label" size="m">Souhlasím</gov-form-label>\n\t\t</gov-form-checkbox>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-checkbox name="test-me-c" value="me" size="l" checked>\n\t\t\t<gov-form-label slot="label" size="l">Souhlasím</gov-form-label>\n\t\t</gov-form-checkbox>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-checkbox name="test-me-c" value="me" size="xl" checked>\n\t\t\t<gov-form-label slot="label" size="xl">Souhlasím</gov-form-label>\n\t\t</gov-form-checkbox>\n\t</gov-form-group>\n</gov-form-control>\n\n<h3>With message</h3>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-checkbox name="test-me-c" value="me" size="xs" checked>\n\t\t\t<gov-form-label slot="label" size="xs">Souhlasím</gov-form-label>\n\t\t</gov-form-checkbox>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" size="xs">\n\t\tMessage\n\t</gov-form-message>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-checkbox name="test-me-c" value="me" size="s" checked>\n\t\t\t<gov-form-label slot="label" size="s">Souhlasím</gov-form-label>\n\t\t</gov-form-checkbox>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" size="s">\n\t\tMessage\n\t</gov-form-message>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-checkbox name="test-me-c" value="me" size="m" checked>\n\t\t\t<gov-form-label slot="label" size="m">Souhlasím</gov-form-label>\n\t\t</gov-form-checkbox>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" size="m">\n\t\tMessage\n\t</gov-form-message>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-checkbox name="test-me-c" value="me" size="l" checked>\n\t\t\t<gov-form-label slot="label" size="l">Souhlasím</gov-form-label>\n\t\t</gov-form-checkbox>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" size="l">\n\t\tMessage\n\t</gov-form-message>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-checkbox name="test-me-c" value="me" size="xl" checked>\n\t\t\t<gov-form-label slot="label" size="xl">Souhlasím</gov-form-label>\n\t\t</gov-form-checkbox>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" size="xl">\n\t\tMessage\n\t</gov-form-message>\n</gov-form-control>\n\n<h3>Invalid</h3>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-checkbox name="test-me-c" value="me" size="xs" checked invalid="true">\n\t\t\t<gov-form-label slot="label" size="xs" invalid="true">Souhlasím</gov-form-label>\n\t\t</gov-form-checkbox>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" color="error" size="xs">\n\t\t<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>\n\t\tRequired\n\t</gov-form-message>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-checkbox name="test-me-c" value="me" size="s" checked invalid="true">\n\t\t\t<gov-form-label slot="label" size="s">Souhlasím</gov-form-label>\n\t\t</gov-form-checkbox>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" color="error" size="s">\n\t\t<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>\n\t\tRequired\n\t</gov-form-message>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-checkbox name="test-me-c" value="me" size="m" checked invalid="true">\n\t\t\t<gov-form-label slot="label" size="m">Souhlasím</gov-form-label>\n\t\t</gov-form-checkbox>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" color="error" size="m">\n\t\t<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>\n\t\tRequired\n\t</gov-form-message>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-checkbox name="test-me-c" value="me" size="l" checked invalid="true">\n\t\t\t<gov-form-label slot="label" size="l">Souhlasím</gov-form-label>\n\t\t</gov-form-checkbox>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" color="error" size="l">\n\t\t<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>\n\t\tRequired\n\t</gov-form-message>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-checkbox name="test-me-c" value="me" size="xl" checked invalid="true">\n\t\t\t<gov-form-label slot="label" size="xl">Souhlasím</gov-form-label>\n\t\t</gov-form-checkbox>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" color="error" size="xl">\n\t\t<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>\n\t\tRequired\n\t</gov-form-message>\n</gov-form-control>\n\n<h3>Disabled</h3>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-checkbox name="test-me-c" value="me" size="xs" disabled>\n\t\t\t<gov-form-label slot="label" size="xs">Souhlasím</gov-form-label>\n\t\t</gov-form-checkbox>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-checkbox name="test-me-c" value="me" size="s" disabled="True">\n\t\t\t<gov-form-label slot="label" size="s">Souhlasím</gov-form-label>\n\t\t</gov-form-checkbox>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-checkbox name="test-me-c" value="me" size="m" checked disabled="TRUE">\n\t\t\t<gov-form-label slot="label" size="m">Souhlasím</gov-form-label>\n\t\t</gov-form-checkbox>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-checkbox name="test-me-c" value="me" size="l" checked disabled="1">\n\t\t\t<gov-form-label slot="label" size="l">Souhlasím</gov-form-label>\n\t\t</gov-form-checkbox>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-checkbox name="test-me-c" value="me" size="xl" checked disabled="1">\n\t\t\t<gov-form-label slot="label" size="xl">Souhlasím</gov-form-label>\n\t\t</gov-form-checkbox>\n\t</gov-form-group>\n</gov-form-control>\n\n\x3c!-- ----------------------------------------------------------------------------------------------------------------------------- --\x3e\n\n\n<h2 id="radio">Radio</h2>\n<h3>Default group</h3>\n<gov-form-control fieldset>\n\t<gov-form-label legend size="xs" slot="top">Seznam skupiny</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-radio name="test1" value="me" size="xs">\n\t\t\t<gov-form-label slot="label" size="xs">Value 1</gov-form-label>\n\t\t</gov-form-radio>\n\t\t<gov-form-radio name="test2" value="me2" size="xs" checked>\n\t\t\t<gov-form-label slot="label" size="xs">Value 2</gov-form-label>\n\t\t</gov-form-radio>\n\t</gov-form-group>\n</gov-form-control>\n<br>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-radio name="test3" value="me" size="s">\n\t\t\t<gov-form-label slot="label" size="s">Value 1</gov-form-label>\n\t\t</gov-form-radio>\n\t\t<gov-form-radio name="test4" value="me2" size="s" checked>\n\t\t\t<gov-form-label slot="label" size="s">Value 2</gov-form-label>\n\t\t</gov-form-radio>\n\t</gov-form-group>\n</gov-form-control>\n<br>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-radio name="test5" value="me" size="m">\n\t\t\t<gov-form-label slot="label" size="m">Value 1</gov-form-label>\n\t\t</gov-form-radio>\n\t\t<gov-form-radio name="test6" value="me2" size="m" checked>\n\t\t\t<gov-form-label slot="label" size="m">Value 2</gov-form-label>\n\t\t</gov-form-radio>\n\t</gov-form-group>\n</gov-form-control>\n<br>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-radio name="test7" value="me" size="l">\n\t\t\t<gov-form-label slot="label" size="l">Value 1</gov-form-label>\n\t\t</gov-form-radio>\n\t\t<gov-form-radio name="test8" value="me2" size="l" checked>\n\t\t\t<gov-form-label slot="label" size="l">Value 2</gov-form-label>\n\t\t</gov-form-radio>\n\t</gov-form-group>\n</gov-form-control>\n<br>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-radio name="test9" value="me" size="xl">\n\t\t\t<gov-form-label slot="label" size="xl">Value 1</gov-form-label>\n\t\t</gov-form-radio>\n\t\t<gov-form-radio name="test10" value="me2" size="xl" checked>\n\t\t\t<gov-form-label slot="label" size="xl">Value 2</gov-form-label>\n\t\t</gov-form-radio>\n\t</gov-form-group>\n</gov-form-control>\n\n<h3>With message</h3>\n<gov-form-control fieldset>\n\t<gov-form-group>\n\t\t<gov-form-radio name="test1" value="me" size="xs">\n\t\t\t<gov-form-label slot="label" size="xs">Value 1</gov-form-label>\n\t\t</gov-form-radio>\n\t\t<gov-form-radio name="test2" value="me2" size="xs" checked>\n\t\t\t<gov-form-label slot="label" size="xs">Value 2</gov-form-label>\n\t\t</gov-form-radio>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" size="xs">\n\t\tMessage\n\t</gov-form-message>\n</gov-form-control>\n<br>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-radio name="test3" value="me" size="s">\n\t\t\t<gov-form-label slot="label" size="s">Value 1</gov-form-label>\n\t\t</gov-form-radio>\n\t\t<gov-form-radio name="test4" value="me2" size="s" checked>\n\t\t\t<gov-form-label slot="label" size="s">Value 2</gov-form-label>\n\t\t</gov-form-radio>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" size="s">\n\t\tMessage\n\t</gov-form-message>\n</gov-form-control>\n<br>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-radio name="test5" value="me" size="m">\n\t\t\t<gov-form-label slot="label" size="m">Value 1</gov-form-label>\n\t\t</gov-form-radio>\n\t\t<gov-form-radio name="test6" value="me2" size="m" checked>\n\t\t\t<gov-form-label slot="label" size="m">Value 2</gov-form-label>\n\t\t</gov-form-radio>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" size="m">\n\t\tMessage\n\t</gov-form-message>\n</gov-form-control>\n<br>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-radio name="test7" value="me" size="l">\n\t\t\t<gov-form-label slot="label" size="l">Value 1</gov-form-label>\n\t\t</gov-form-radio>\n\t\t<gov-form-radio name="test8" value="me2" size="l" checked>\n\t\t\t<gov-form-label slot="label" size="l">Value 2</gov-form-label>\n\t\t</gov-form-radio>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" size="l">\n\t\tMessage\n\t</gov-form-message>\n</gov-form-control>\n<br>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-radio name="test9" value="me" size="xl">\n\t\t\t<gov-form-label slot="label" size="xl">Value 1</gov-form-label>\n\t\t</gov-form-radio>\n\t\t<gov-form-radio name="test10" value="me2" size="xl" checked>\n\t\t\t<gov-form-label slot="label" size="xl">Value 2</gov-form-label>\n\t\t</gov-form-radio>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" size="xl">\n\t\tMessage\n\t</gov-form-message>\n</gov-form-control>\n\n<h3>Invalid</h3>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-radio name="test5" value="me" size="xs" invalid="true">\n\t\t\t<gov-form-label slot="label" size="xs">Value 1</gov-form-label>\n\t\t</gov-form-radio>\n\t\t<gov-form-radio name="test5" value="me2" size="xs" checked invalid="true">\n\t\t\t<gov-form-label slot="label" size="xs">Value 2</gov-form-label>\n\t\t</gov-form-radio>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" color="error" size="xs">\n\t\t<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>\n\t\tRequired\n\t</gov-form-message>\n</gov-form-control>\n<br>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-radio name="test6" value="me" size="s" invalid="true">\n\t\t\t<gov-form-label slot="label" size="s">Value 1</gov-form-label>\n\t\t</gov-form-radio>\n\t\t<gov-form-radio name="test6" value="me2" size="s" checked invalid="true">\n\t\t\t<gov-form-label slot="label" size="s">Value 2</gov-form-label>\n\t\t</gov-form-radio>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" color="error" size="s">\n\t\t<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>\n\t\tRequired\n\t</gov-form-message>\n</gov-form-control>\n<br>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-radio name="test7" value="me" size="m" invalid="true">\n\t\t\t<gov-form-label slot="label" size="m">Value 1</gov-form-label>\n\t\t</gov-form-radio>\n\t\t<gov-form-radio name="test7" value="me2" size="m" checked invalid="true">\n\t\t\t<gov-form-label slot="label" size="m">Value 2</gov-form-label>\n\t\t</gov-form-radio>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" color="error" size="m">\n\t\t<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>\n\t\tRequired\n\t</gov-form-message>\n</gov-form-control>\n<br>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-radio name="test8" value="me" size="l" invalid="true">\n\t\t\t<gov-form-label slot="label" size="l">Value 1</gov-form-label>\n\t\t</gov-form-radio>\n\t\t<gov-form-radio name="test8" value="me2" size="l" checked invalid="true">\n\t\t\t<gov-form-label slot="label" size="l">Value 2</gov-form-label>\n\t\t</gov-form-radio>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" color="error" size="l">\n\t\t<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>\n\t\tRequired\n\t</gov-form-message>\n</gov-form-control>\n<br>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-radio name="test8" value="me" size="xl" invalid="true">\n\t\t\t<gov-form-label slot="label" size="xl">Value 1</gov-form-label>\n\t\t</gov-form-radio>\n\t\t<gov-form-radio name="test8" value="me2" size="xl" checked invalid="true">\n\t\t\t<gov-form-label slot="label" size="xl">Value 2</gov-form-label>\n\t\t</gov-form-radio>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" color="error" size="xl">\n\t\t<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>\n\t\tRequired\n\t</gov-form-message>\n</gov-form-control>\n\n<h3>Disabled</h3>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-radio name="test9" value="me" size="xs" disabled>\n\t\t\t<gov-form-label slot="label" size="xs">Value 1</gov-form-label>\n\t\t</gov-form-radio>\n\t\t<gov-form-radio name="test9" value="me2" size="xs" checked disabled>\n\t\t\t<gov-form-label slot="label" size="xs">Value 2</gov-form-label>\n\t\t</gov-form-radio>\n\t</gov-form-group>\n</gov-form-control>\n<br>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-radio name="test10" value="me" size="s" disabled="true">\n\t\t\t<gov-form-label slot="label" size="s">Value 1</gov-form-label>\n\t\t</gov-form-radio>\n\t\t<gov-form-radio name="test10" value="me2" size="s" checked disabled="true">\n\t\t\t<gov-form-label slot="label" size="s">Value 2</gov-form-label>\n\t\t</gov-form-radio>\n\t</gov-form-group>\n</gov-form-control>\n<br>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-radio name="test11" value="me" size="m" disabled="true">\n\t\t\t<gov-form-label slot="label" size="m">Value 1</gov-form-label>\n\t\t</gov-form-radio>\n\t\t<gov-form-radio name="test11" value="me2" size="m" checked disabled="true">\n\t\t\t<gov-form-label slot="label" size="m">Value 2</gov-form-label>\n\t\t</gov-form-radio>\n\t</gov-form-group>\n</gov-form-control>\n<br>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-radio name="test12" value="me" size="l" disabled="true">\n\t\t\t<gov-form-label slot="label" size="l">Value 1</gov-form-label>\n\t\t</gov-form-radio>\n\t\t<gov-form-radio name="test12" value="me2" size="l" checked disabled="true">\n\t\t\t<gov-form-label slot="label" size="l">Value 2</gov-form-label>\n\t\t</gov-form-radio>\n\t</gov-form-group>\n</gov-form-control>\n<br>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-radio name="test12" value="me" size="xl" disabled="true">\n\t\t\t<gov-form-label slot="label" size="xl">Value 1</gov-form-label>\n\t\t</gov-form-radio>\n\t\t<gov-form-radio name="test12" value="me2" size="xl" checked disabled="true">\n\t\t\t<gov-form-label slot="label" size="xl">Value 2</gov-form-label>\n\t\t</gov-form-radio>\n\t</gov-form-group>\n</gov-form-control>\n\n\n\x3c!-- ----------------------------------------------------------------------------------------------------------------------------- --\x3e\n\n\n<h2 id="switch">Switch</h2>\n<h3>Default</h3>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-switch name="test-me" value="me" size="xs" checked>\n\t\t\t<gov-form-label slot="label" size="xs">Souhlasím</gov-form-label>\n\t\t</gov-form-switch>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-switch name="test-me" value="me" size="s" checked>\n\t\t\t<gov-form-label slot="label" size="s">Souhlasím</gov-form-label>\n\t\t</gov-form-switch>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-switch name="test-me" value="me" size="m" checked>\n\t\t\t<gov-form-label slot="label" size="m">Souhlasím</gov-form-label>\n\t\t</gov-form-switch>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-switch name="test-me" value="me" size="l" checked>\n\t\t\t<gov-form-label slot="label" size="l">Souhlasím</gov-form-label>\n\t\t</gov-form-switch>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-group>\n\t\t<gov-form-switch name="test-me" value="me" size="xl" checked>\n\t\t\t<gov-form-label slot="label" size="xl">Souhlasím</gov-form-label>\n\t\t</gov-form-switch>\n\t</gov-form-group>\n</gov-form-control>\n\n<h3>With message</h3>\n<gov-form-control size="xs" type="switch">\n\t<gov-form-group>\n\t\t<gov-form-switch name="test-me" value="me" size="xs" checked>\n\t\t\t<gov-form-label slot="label" size="xs">Souhlasím</gov-form-label>\n\t\t</gov-form-switch>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" size="xs">\n\t\tMessage\n\t</gov-form-message>\n</gov-form-control>\n<gov-form-control size="s" type="switch">\n\t<gov-form-group>\n\t\t<gov-form-switch name="test-me" value="me" size="s" checked>\n\t\t\t<gov-form-label slot="label" size="s">Souhlasím</gov-form-label>\n\t\t</gov-form-switch>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" size="s">\n\t\tMessage\n\t</gov-form-message>\n</gov-form-control>\n<gov-form-control size="m" type="switch">\n\t<gov-form-group>\n\t\t<gov-form-switch name="test-me" value="me" size="m" checked>\n\t\t\t<gov-form-label slot="label" size="m">Souhlasím</gov-form-label>\n\t\t</gov-form-switch>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" size="m">\n\t\tMessage\n\t</gov-form-message>\n</gov-form-control>\n<gov-form-control size="l" type="switch">\n\t<gov-form-group>\n\t\t<gov-form-switch name="test-me" value="me" size="l" checked>\n\t\t\t<gov-form-label slot="label" size="l">Souhlasím</gov-form-label>\n\t\t</gov-form-switch>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" size="l">\n\t\tMessage\n\t</gov-form-message>\n</gov-form-control>\n<gov-form-control size="xl" type="switch">\n\t<gov-form-group>\n\t\t<gov-form-switch name="test-me" value="me" size="xl" checked>\n\t\t\t<gov-form-label slot="label" size="xl">Souhlasím</gov-form-label>\n\t\t</gov-form-switch>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" size="xl">\n\t\tMessage\n\t</gov-form-message>\n</gov-form-control>\n\n<h3>With label</h3>\n<gov-form-control>\n\t<gov-form-label size="xs" slot="top">Label of toggle</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-switch name="test-me" value="me" size="xs" checked>\n\t\t\t<gov-form-label slot="label" size="xs">Souhlasím</gov-form-label>\n\t\t</gov-form-switch>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-label size="s" slot="top">Label of toggle</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-switch name="test-me" value="me" size="s" checked>\n\t\t\t<gov-form-label slot="label" size="s">Souhlasím</gov-form-label>\n\t\t</gov-form-switch>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-label size="m" slot="top">Label of toggle</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-switch name="test-me" value="me" size="m" checked>\n\t\t\t<gov-form-label slot="label" size="m">Souhlasím</gov-form-label>\n\t\t</gov-form-switch>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-label size="l" slot="top">Label of toggle</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-switch name="test-me" value="me" size="l" checked>\n\t\t\t<gov-form-label slot="label" size="l">Souhlasím</gov-form-label>\n\t\t</gov-form-switch>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control>\n\t<gov-form-label size="xl" slot="top">Label of toggle</gov-form-label>\n\t<gov-form-group>\n\t\t<gov-form-switch name="test-me" value="me" size="xl" checked>\n\t\t\t<gov-form-label slot="label" size="xl">Souhlasím</gov-form-label>\n\t\t</gov-form-switch>\n\t</gov-form-group>\n</gov-form-control>\n\n<h3>Disabled</h3>\n<gov-form-control type="switch">\n\t<gov-form-group>\n\t\t<gov-form-switch name="test-me" value="me" size="xs" disabled>\n\t\t\t<gov-form-label slot="label" size="xs">Souhlasím</gov-form-label>\n\t\t</gov-form-switch>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control type="switch">\n\t<gov-form-group>\n\t\t<gov-form-switch name="test-me" value="me" size="s" disabled="true">\n\t\t\t<gov-form-label slot="label" size="s">Souhlasím</gov-form-label>\n\t\t</gov-form-switch>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control type="switch">\n\t<gov-form-group>\n\t\t<gov-form-switch name="test-me" value="me" size="m" checked disabled="true">\n\t\t\t<gov-form-label slot="label" size="m">Souhlasím</gov-form-label>\n\t\t</gov-form-switch>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control type="switch">\n\t<gov-form-group>\n\t\t<gov-form-switch name="test-me" value="me" size="l" checked disabled="true">\n\t\t\t<gov-form-label slot="label" size="l">Souhlasím</gov-form-label>\n\t\t</gov-form-switch>\n\t</gov-form-group>\n</gov-form-control>\n<gov-form-control type="switch">\n\t<gov-form-group>\n\t\t<gov-form-switch name="test-me" value="me" size="xl" checked disabled="true">\n\t\t\t<gov-form-label slot="label" size="xl">Souhlasím</gov-form-label>\n\t\t</gov-form-switch>\n\t</gov-form-group>\n</gov-form-control>\n\n<h3>Invalid</h3>\n<gov-form-control size="xs" type="switch">\n\t<gov-form-group>\n\t\t<gov-form-switch invalid name="test-me" value="me" size="xs" invalid="True">\n\t\t\t<gov-form-label slot="label" size="xs">Souhlasím</gov-form-label>\n\t\t</gov-form-switch>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" color="error" size="xs">\n\t\t<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>\n\t\tRequired\n\t</gov-form-message>\n</gov-form-control>\n<gov-form-control size="s" type="switch">\n\t<gov-form-group>\n\t\t<gov-form-switch invalid name="test-me" value="me" size="s" invalid="TRUE">\n\t\t\t<gov-form-label slot="label" size="s">Souhlasím</gov-form-label>\n\t\t</gov-form-switch>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" color="error" size="s">\n\t\t<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>\n\t\tRequired\n\t</gov-form-message>\n</gov-form-control>\n<gov-form-control size="m" type="switch">\n\t<gov-form-group>\n\t\t<gov-form-switch invalid name="test-me" value="me" size="m" invalid="true" checked>\n\t\t\t<gov-form-label slot="label" size="m">Souhlasím</gov-form-label>\n\t\t</gov-form-switch>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" color="error" size="m">\n\t\t<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>\n\t\tRequired\n\t</gov-form-message>\n</gov-form-control>\n<gov-form-control size="l" type="switch">\n\t<gov-form-group>\n\t\t<gov-form-switch invalid name="test-me" value="me" size="l" invalid="1" checked>\n\t\t\t<gov-form-label slot="label" size="l">Souhlasím</gov-form-label>\n\t\t</gov-form-switch>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" color="error" size="l">\n\t\t<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>\n\t\tRequired\n\t</gov-form-message>\n</gov-form-control>\n<gov-form-control size="xl" type="switch">\n\t<gov-form-group>\n\t\t<gov-form-switch invalid name="test-me" value="me" size="xl" invalid="1" checked>\n\t\t\t<gov-form-label slot="label" size="xl">Souhlasím</gov-form-label>\n\t\t</gov-form-switch>\n\t</gov-form-group>\n\t<gov-form-message slot="bottom" color="error" size="xl">\n\t\t<gov-icon slot="icon" name="exclamation-triangle-fill"></gov-icon>\n\t\tRequired\n\t</gov-form-message>\n</gov-form-control>\n\t\t`}}if(customElements.get("forms-page")===undefined){customElements.define("forms-page",Yt)}class Qt extends HTMLElement{connectedCallback(){this.innerHTML=`\n\t\t\t<h4>Forms</h4>\n\t\t\t<div class="container-view container-view--inline">\n\t\t\t</div>\n\t\t`}}if(customElements.get("forms-restructue-page")===undefined){customElements.define("forms-restructue-page",Qt)}class to extends HTMLElement{connectedCallback(){this.innerHTML=`\n\t\t<h2>\n\t\t\tGrid\n\t\t</h2>\n\t\t<style>\n\t\t\t.gov-grid-item span {\n\t\t\t\tdisplay: block;\n\t\t\t\tbackground: lightgray;\n\t\t\t\tpadding: 10px;\n\t\t\t}\n\t\t</style>\n\t\t<gov-grid>\n\t\t\t<gov-grid-item size="1/12"><span>1/12</span></gov-grid-item>\n\t\t\t<gov-grid-item size="11/12"><span>11/12</span></gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<gov-grid>\n\t\t\t<gov-grid-item size="2/12"><span>2/12</span></gov-grid-item>\n\t\t\t<gov-grid-item size="10/12"><span>10/12</span></gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<gov-grid>\n\t\t\t<gov-grid-item size="3/12"><span>3/12</span></gov-grid-item>\n\t\t\t<gov-grid-item size="9/12"><span>9/12</span></gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<gov-grid>\n\t\t\t<gov-grid-item size="4/12"><span>4/12</span></gov-grid-item>\n\t\t\t<gov-grid-item size="8/12"><span>8/12</span></gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<gov-grid>\n\t\t\t<gov-grid-item size="5/12"><span>5/12</span></gov-grid-item>\n\t\t\t<gov-grid-item size="7/12"><span>7/12</span></gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<gov-grid>\n\t\t\t<gov-grid-item size="6/12"><span>6/12</span></gov-grid-item>\n\t\t\t<gov-grid-item size="6/12"><span>6/12</span></gov-grid-item>\n\t\t</gov-grid>\n\n\t\t<h2>Responsive grid</h2>\n\t\t<gov-grid>\n\t\t\t<gov-grid-item size-sm="6/12" size-md="4/12" size-lg="3/12" size-xl="2/12"><span>Cell 1</span></gov-grid-item>\n\t\t\t<gov-grid-item size-sm="6/12" size-md="4/12" size-lg="3/12" size-xl="2/12"><span>Cell 2</span></gov-grid-item>\n\t\t\t<gov-grid-item size-sm="6/12" size-md="4/12" size-lg="3/12" size-xl="2/12"><span>Cell 3</span></gov-grid-item>\n\t\t\t<gov-grid-item size-sm="6/12" size-md="4/12" size-lg="3/12" size-xl="2/12"><span>Cell 4</span></gov-grid-item>\n\t\t\t<gov-grid-item size-sm="6/12" size-md="4/12" size-lg="3/12" size-xl="2/12"><span>Cell 5</span></gov-grid-item>\n\t\t\t<gov-grid-item size-sm="6/12" size-md="4/12" size-lg="3/12" size-xl="2/12"><span>Cell 6</span></gov-grid-item>\n\t\t</gov-grid>\n\n\t\t<h2>Horizontal (X) align</h2>\n\t\t<gov-grid>\n\t\t\t<gov-grid-item size="4/12"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. Ut et tempor risus. In volutpat nec diam semper iaculis. Nam tempus varius nunc, eu congue mauris ornare nec. Sed sodales et nisl vitae volutpat. Duis luctus metus ut justo vestibulum, id suscipit lacus suscipit. Vestibulum at nisi at turpis volutpat fermentum non id erat. Morbi mauris eros, porttitor non tellus sed, iaculis ultrices tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</span></gov-grid-item>\n\t\t\t<gov-grid-item size="4/12"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. </span></gov-grid-item>\n\t\t\t<gov-grid-item size="4/12"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. Ut et tempor risus. In volutpat nec diam semper iaculis. Nam tempus varius nunc, eu congue mauris ornare nec. Sed sodales et nisl vitae volutpat. Duis luctus metus ut justo vestibulum, id suscipit lacus suscipit. Vestibulum at nisi at turpis volutpat fermentum non id erat.</span></gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<gov-grid align-x="middle">\n\t\t\t<gov-grid-item size="4/12"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. Ut et tempor risus. In volutpat nec diam semper iaculis. Nam tempus varius nunc, eu congue mauris ornare nec. Sed sodales et nisl vitae volutpat. Duis luctus metus ut justo vestibulum, id suscipit lacus suscipit. Vestibulum at nisi at turpis volutpat fermentum non id erat. Morbi mauris eros, porttitor non tellus sed, iaculis ultrices tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</span></gov-grid-item>\n\t\t\t<gov-grid-item size="4/12"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. </span></gov-grid-item>\n\t\t\t<gov-grid-item size="4/12"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. Ut et tempor risus. In volutpat nec diam semper iaculis. Nam tempus varius nunc, eu congue mauris ornare nec. Sed sodales et nisl vitae volutpat. Duis luctus metus ut justo vestibulum, id suscipit lacus suscipit. Vestibulum at nisi at turpis volutpat fermentum non id erat.</span></gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<gov-grid align-x="bottom">\n\t\t\t<gov-grid-item size="4/12"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. Ut et tempor risus. In volutpat nec diam semper iaculis. Nam tempus varius nunc, eu congue mauris ornare nec. Sed sodales et nisl vitae volutpat. Duis luctus metus ut justo vestibulum, id suscipit lacus suscipit. Vestibulum at nisi at turpis volutpat fermentum non id erat. Morbi mauris eros, porttitor non tellus sed, iaculis ultrices tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.</span></gov-grid-item>\n\t\t\t<gov-grid-item size="4/12"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. </span></gov-grid-item>\n\t\t\t<gov-grid-item size="4/12"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. Ut et tempor risus. In volutpat nec diam semper iaculis. Nam tempus varius nunc, eu congue mauris ornare nec. Sed sodales et nisl vitae volutpat. Duis luctus metus ut justo vestibulum, id suscipit lacus suscipit. Vestibulum at nisi at turpis volutpat fermentum non id erat.</span></gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\n\t\t<h2>Vertical (Y) align</h2>\n\t\t<gov-grid>\n\t\t\t<gov-grid-item size="4/12"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. </span></gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<gov-grid align-y="center">\n\t\t\t<gov-grid-item size="4/12"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. </span></gov-grid-item>\n\t\t</gov-grid>\n\t\t<br>\n\t\t<gov-grid align-y="right">\n\t\t\t<gov-grid-item size="4/12"><span>Curabitur tincidunt leo elit, et accumsan leo vestibulum sit amet. Nulla quis nibh a diam ultricies volutpat. Pellentesque fringilla id diam in placerat. Pellentesque consectetur, nisl tincidunt scelerisque vulputate, diam velit cursus neque, eu posuere urna metus id justo. </span></gov-grid-item>\n\t\t</gov-grid>\n\t\t\t`}}if(customElements.get("grid-page")===undefined){customElements.define("grid-page",to)}class oo extends HTMLElement{connectedCallback(){this.innerHTML=`\n\t\t<form style="padding: 20px;">\n\t\t\t<gov-form-label legend>\n\t\t\t\tForm Label legend\n\t\t\t</gov-form-label>\n\t\t\t<gov-form-control type="input">\n\t\t\t\t<gov-form-label size="s" slot="top">Label of input</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-input type="number" name="test-me" placeholder="Placeholder" color="primary" size="s"></gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<br><br>\n\t\t\t<legend>Legend</legend>\n\t\t\t<gov-form-control type="input">\n\t\t\t\t<gov-form-label size="s" slot="top">Label of input</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-input type="number" name="test-me" placeholder="Placeholder" color="primary" size="s"></gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<br><br>\n\t\t\t<gov-form-control type="input" fieldset>\n\t\t\t\t<gov-form-label size="s" slot="top">Form control fieldset</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-input type="number" name="test-me" placeholder="Placeholder" color="primary" size="s"></gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t</gov-form-control>\n\t\t\t<br><br>\n\t\t\t<fieldset>\n\t\t\t\t<gov-form-label size="s" slot="top">Fieldset</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-input type="number" name="test-me" placeholder="Placeholder" color="primary" size="s"></gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t</fieldset>\n\t\t\t<br><br>\n\t\t\t<fieldset>\n\t\t\t\t<legend>Fieldset & Legend</legend>\n\t\t\t\t<gov-form-label size="s" slot="top">Label of input</gov-form-label>\n\t\t\t\t<gov-form-group>\n\t\t\t\t\t<gov-form-input type="number" name="test-me" placeholder="Placeholder" color="primary" size="s"></gov-form-input>\n\t\t\t\t</gov-form-group>\n\t\t\t</fieldset>\n\t\t</form>\n\t\t`}}if(customElements.get("home-page")===undefined){customElements.define("home-page",oo)}class no extends HTMLElement{connectedCallback(){this.innerHTML=`\n\t\t<h2>Infobar</h2>\n\n\t\t<h3>Bold</h3>\n\t\t<gov-infobar color="primary" type="bold" closable>\n\t\t\t<gov-icon name="info" slot="icon"></gov-icon>\n\t\t\t<p>\n\t\t\t\tPrimary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t</p>\n\t\t</gov-infobar>\n\t\t<br>\n\t\t<gov-infobar color="neutral" type="bold" closable>\n\t\t\t<gov-icon name="info" slot="icon"></gov-icon>\n\t\t\t<p>\n\t\t\t\tNeutral - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t</p>\n\t\t</gov-infobar>\n\t\t<br>\n\t\t<gov-infobar color="error" type="bold" closable>\n\t\t\t<gov-icon name="info" slot="icon"></gov-icon>\n\t\t\t<p>\n\t\t\t\tError - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t</p>\n\t\t</gov-infobar>\n\t\t<br>\n\t\t<gov-infobar color="success" type="bold" closable>\n\t\t\t<gov-icon name="info" slot="icon"></gov-icon>\n\t\t\t<p>\n\t\t\t\tSuccess - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t</p>\n\t\t</gov-infobar>\n\t\t<br>\n\t\t<gov-infobar color="warning" type="bold" closable>\n\t\t\t<gov-icon name="info" slot="icon"></gov-icon>\n\t\t\t<p>\n\t\t\t\tWarning - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t</p>\n\t\t</gov-infobar>\n\t\t<br>\n\t\t<h3>Subtle</h3>\n\t\t<gov-infobar color="primary" type="subtle" closable>\n\t\t\t<gov-icon name="info" slot="icon"></gov-icon>\n\t\t\t<p>\n\t\t\t\tPrimary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t</p>\n\t\t</gov-infobar>\n\t\t<br>\n\t\t<gov-infobar color="neutral" type="subtle" closable>\n\t\t\t<gov-icon name="info" slot="icon"></gov-icon>\n\t\t\t<p>\n\t\t\t\tNeutral - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t</p>\n\t\t</gov-infobar>\n\t\t<br>\n\t\t<gov-infobar color="error" type="subtle" closable>\n\t\t\t<gov-icon name="info" slot="icon"></gov-icon>\n\t\t\t<p>\n\t\t\t\tError - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t</p>\n\t\t</gov-infobar>\n\t\t<br>\n\t\t<gov-infobar color="success" type="subtle" closable>\n\t\t\t<gov-icon name="info" slot="icon"></gov-icon>\n\t\t\t<p>\n\t\t\t\tSuccess - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t</p>\n\t\t</gov-infobar>\n\t\t<br>\n\t\t<gov-infobar color="warning" type="subtle" closable>\n\t\t\t<gov-icon name="info" slot="icon"></gov-icon>\n\t\t\t<p>\n\t\t\t\tWarning - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t</p>\n\t\t</gov-infobar>\n\t\t<br>\n\t\t<h2>Expandable</h2>\n\t\t<div class="gov-bg--primary-600">\n\t\t\t<gov-container>\n\t\t\t\t<gov-infobar color="primary" type="bold" closable>\n\t\t\t\t\t<gov-icon name="info" slot="icon"></gov-icon>\n\t\t\t\t\t<p slot="headline">Tohle bude super nadpis pro všechno</p>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tPrimary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t\t\t</p>\n\t\t\t\t</gov-infobar>\n\t\t\t</gov-container>\n\t\t</div>\n\t\t<div class="gov-bg--neutral-1000">\n\t\t\t<gov-container>\n\t\t\t\t<gov-infobar color="neutral" type="bold" closable>\n\t\t\t\t\t<gov-icon name="info" slot="icon"></gov-icon>\n\t\t\t\t\t<p slot="headline">Tohle bude super nadpis pro všechno</p>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tSecondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t\t\t</p>\n\t\t\t\t</gov-infobar>\n\t\t\t</gov-container>\n\t\t</div>\n\t\t<div class="gov-bg--success-600">\n\t\t\t<gov-container>\n\t\t\t\t<gov-infobar color="success" type="bold" closable>\n\t\t\t\t\t<gov-icon name="info" slot="icon"></gov-icon>\n\t\t\t\t\t<p slot="headline">Tohle bude super nadpis pro všechno</p>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tSuccess - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t\t\t</p>\n\t\t\t\t</gov-infobar>\n\t\t\t</gov-container>\n\t\t</div>\n\t\t<div class="gov-bg--error-600">\n\t\t\t<gov-container>\n\t\t\t\t<gov-infobar color="error" type="bold" closable>\n\t\t\t\t\t<gov-icon name="info" slot="icon"></gov-icon>\n\t\t\t\t\t<h3 slot="headline">Tohle bude super nadpis pro všechno</h3>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tError - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t\t\t</p>\n\t\t\t\t</gov-infobar>\n\t\t\t</gov-container>\n\t\t</div>\n\t\t<div class="gov-bg--warning-400">\n\t\t\t<gov-container>\n\t\t\t\t<gov-infobar color="warning" type="bold" closable>\n\t\t\t\t\t<gov-icon name="info" slot="icon"></gov-icon>\n\t\t\t\t\t<h3 slot="headline">Tohle bude super nadpis pro všechno</h3>\n\t\t\t\t\t<p>\n\t\t\t\t\t\tWarning - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t\t\t</p>\n\t\t\t\t</gov-infobar>\n\t\t\t</gov-container>\n\t\t</div>\n\t\t<br/>\n\t\t<gov-infobar color="neutral" type="bold" closable>\n\t\t\t<gov-icon name="info" slot="icon"></gov-icon>\n\t\t\t<h1 slot="headline">Tohle bude super nadpis pro všechno</h1>\n\t\t\t<p>\n\t\t\t\tSecondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t</p>\n\t\t</gov-infobar>\n\t\t<br>\n\t\t`}}if(customElements.get("infobar-page")===undefined){customElements.define("infobar-page",no)}class eo extends HTMLElement{connectedCallback(){this.innerHTML=`\n\t\t<h2>Layout</h2>\n\n\t\t<gov-container>\n\t\t\t<gov-layout type="stretch">\n\t\t\t\t<gov-layout-column>\n\t\t\t\t\t<p><b>Stretch</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>\n\t\t\t\t</gov-layout-column>\n\t\t\t</gov-layout>\n\n\t\t\t<gov-layout>\n\t\t\t\t<gov-layout-column>\n\t\t\t\t\t<p><b>Stretch</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>\n\t\t\t\t</gov-layout-column>\n\t\t\t\t<gov-layout-column>\n\t\t\t\t\t<p><b>Stretch</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>\n\t\t\t\t</gov-layout-column>\n\t\t\t</gov-layout>\n\n\t\t\t<gov-layout>\n\t\t\t\t<gov-layout-column>\n\t\t\t\t\t<p><b>Stretch</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>\n\t\t\t\t</gov-layout-column>\n\t\t\t\t<gov-layout-column>\n\t\t\t\t\t<p><b>Stretch</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>\n\t\t\t\t</gov-layout-column>\n\t\t\t\t<gov-layout-column>\n\t\t\t\t\t<p><b>Stretch</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>\n\t\t\t\t</gov-layout-column>\n\t\t\t</gov-layout>\n\n\t\t\t<gov-layout type="aside" color="right">\n\t\t\t\t<gov-layout-column>\n\t\t\t\t\t<p><b>Aside right</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>\n\t\t\t\t</gov-layout-column>\n\t\t\t\t<gov-layout-column>\n\t\t\t\t\t<p><b>Aside right</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus.</p>\n\t\t\t\t</gov-layout-column>\n\t\t\t</gov-layout>\n\n\t\t\t<gov-layout type="aside" color="left">\n\t\t\t\t<gov-layout-column>\n\t\t\t\t\t<p><b>Aside left</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus.</p>\n\t\t\t\t</gov-layout-column>\n\t\t\t\t<gov-layout-column>\n\t\t\t\t\t<p><b>Aside left</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>\n\t\t\t\t</gov-layout-column>\n\t\t\t</gov-layout>\n\n\t\t\t<gov-layout type="aside" color="right" inverse>\n\t\t\t\t<gov-layout-column>\n\t\t\t\t\t<p><b>Aside right inverse</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>\n\t\t\t\t</gov-layout-column>\n\t\t\t\t<gov-layout-column>\n\t\t\t\t\t<p><b>Aside right inverse</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus.</p>\n\t\t\t\t</gov-layout-column>\n\t\t\t</gov-layout>\n\n\t\t\t<gov-layout type="aside" color="left" inverse>\n\t\t\t\t<gov-layout-column>\n\t\t\t\t\t<p><b>Aside left inverse</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus.</p>\n\t\t\t\t</gov-layout-column>\n\t\t\t\t<gov-layout-column>\n\t\t\t\t\t<p><b>Aside left inverse</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>\n\t\t\t\t</gov-layout-column>\n\t\t\t</gov-layout>\n\n\t\t\t<gov-layout type="text" color="left">\n\t\t\t\t<gov-layout-column>\n\t\t\t\t\t<p><b>Text left</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>\n\t\t\t\t</gov-layout-column>\n\t\t\t</gov-layout>\n\n\t\t\t<gov-layout type="text">\n\t\t\t\t<gov-layout-column>\n\t\t\t\t\t<p><b>Text</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>\n\t\t\t\t</gov-layout-column>\n\t\t\t</gov-layout>\n\n\t\t\t<gov-layout type="text" color="right">\n\t\t\t\t<gov-layout-column>\n\t\t\t\t\t<p><b>Text right</b> Ut sollicitudin risus sit amet placerat fermentum. Sed libero mauris, maximus cursus magna tincidunt, efficitur congue enim. Suspendisse potenti. Sed ac eleifend leo. Nullam a sapien in diam semper faucibus sit amet vel nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu faucibus mi. Morbi leo ipsum, tempus vel vulputate non, varius et lectus. Donec justo lacus, congue hendrerit felis sit amet, commodo lobortis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla vulputate urna sapien. Proin imperdiet rhoncus dictum. Pellentesque tempor ultrices tortor, ac mollis lorem mollis non. Phasellus sit amet maximus ex, id scelerisque nulla. Etiam eu orci a nulla semper maximus et at quam.</p>\n\t\t\t\t</gov-layout-column>\n\t\t\t</gov-layout>\n\n\t\t</gov-container>\n\t\t<br>\n\n\t\t`}}if(customElements.get("layout-page")===undefined){customElements.define("layout-page",eo)}class io extends HTMLElement{connectedCallback(){setTimeout((function(){var t;(t=document.getElementById("btn"))===null||t===void 0?void 0:t.addEventListener("gov-click",(()=>{const t=document.createElement("gov-loading");t.setAttribute("size","l");t.setAttribute("id","loading");t.innerHTML="Načítání";document.body.appendChild(t)}))}),500);this.innerHTML=`\n\t\t\t<h2>Loading</h2>\n\t\t\t<div class="preview-container">\n\t\t\t\t<div class="skeletons-defaults">\n\t\t\t\t\t<h4>Default</h4>\n\t\t\t\t\t<gov-skeleton></gov-skeleton>\n\t\t\t\t\t<h4>XS</h4>\n\t\t\t\t\t<gov-skeleton size="xs"></gov-skeleton>\n\t\t\t\t\t<h4>S</h4>\n\t\t\t\t\t<gov-skeleton size="s"></gov-skeleton>\n\t\t\t\t\t<h4>M</h4>\n\t\t\t\t\t<gov-skeleton size="m"></gov-skeleton>\n\t\t\t\t\t<h4>L</h4>\n\t\t\t\t\t<gov-skeleton size="l"></gov-skeleton>\n\t\t\t\t\t<h4>XL</h4>\n\t\t\t\t\t<gov-skeleton size="xl"></gov-skeleton>\n\t\t\t\t\t<br><br>\n\t\t\t\t\t<h4>Neutral</h4>\n\t\t\t\t\t<gov-skeleton color="neutral"></gov-skeleton>\n\t\t\t\t\t<h4>Primary</h4>\n\t\t\t\t\t<gov-skeleton color="primary"></gov-skeleton>\n\t\t\t\t</div>\n\t\t\t\t<br><br>\n\t\t\t\t<div class="skeletons-appearance-circle">\n\t\t\t\t\t<h2>Circle</h2>\n\t\t\t\t\t<gov-skeleton shape="circle"> </gov-skeleton>\n\t\t\t\t</div>\n\t\t\t\t<br><br>\n\t\t\t\t<div class="skeletons-animation-no-animation">\n\t\t\t\t\t<h2>Without animation</h2>\n\t\t\t\t\t<gov-skeleton animation="false"></gov-skeleton>\n\t\t\t\t</div>\n\t\t\t\t<div class="skeletons-animation-pulse">\n\t\t\t\t\t<h2>Pulse animation</h2>\n\t\t\t\t\t<gov-skeleton animation="pulse"></gov-skeleton>\n\t\t\t\t</div>\n\t\t\t\t<div class="skeletons-animation-progress">\n\t\t\t\t\t<h2>Progress animation</h2>\n\t\t\t\t\t<gov-skeleton animation="progress"></gov-skeleton>\n\t\t\t\t</div>\n\t\t\t\t<br><br>\n\t\t\t\t<div class="skeletons-with-theming">\n\t\t\t\t\t<h2>Custom styles</h2>\n\t\t\t\t\t<style>\n\t\t\t\t\t.custom-skeleton {\n\t\t\t\t\t\t--width: 100px;\n\t\t\t\t\t\t--m-height: 100px;\n\t\t\t\t\t\t--neutral-background: #2d9120;\n\t\t\t\t\t\t--neutral-foreground: #7ae06d;\n\t\t\t\t\t\t--border-radius: 20px;\n\t\t\t\t\t}\n\t\t\t\t\t</style>\n\t\t\t\t\t<gov-skeleton class="custom-skeleton"></gov-skeleton>\n\t\t\t\t</div>\n\t\t\t\t<br><br>\n\t\t\t\t<div>\n\t\t\t\t\t<h2>Custom width</h2>\n\t\t\t\t\t<gov-skeleton width="500px"></gov-skeleton>\n\t\t\t\t</div>\n\t\t\t\t<div>\n\t\t\t\t\t<h2>Custom height</h2>\n\t\t\t\t\t<gov-skeleton height="80px"></gov-skeleton>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<br><br>\n\t\t\t<gov-button color="primary" size="m" type="bold" id="btn">Zobrazit načítání</gov-button>\n\t\t`}}if(customElements.get("loading-page")===undefined){customElements.define("loading-page",io)}class lo extends HTMLElement{connectedCallback(){this.innerHTML=`\n\t\t<h2>Content Message</h2>\n\t\t<h3>Bold</h3>\n\t\t<gov-message color="primary" type="bold">\n\t\t\t<gov-icon name="info" size="l" slot="icon"></gov-icon>\n\t\t\t<p>\n\t\t\t\tFont awesome. Default - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t</p>\n\t\t</gov-message>\n\t\t<br>\n\t\t<gov-message color="neutral" type="bold">\n\t\t\t<gov-icon name="info" size="l" slot="icon"></gov-icon>\n\t\t\t<p>\n\t\t\t\tFont awesome. Default - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t</p>\n\t\t</gov-message>\n\t\t<br>\n\t\t<gov-message color="error" type="bold">\n\t\t\t<gov-icon name="info" size="l" slot="icon"></gov-icon>\n\t\t\t<p>\n\t\t\t\tFont awesome. Default - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t</p>\n\t\t</gov-message>\n\t\t<br>\n\t\t<gov-message color="success" type="bold">\n\t\t\t<gov-icon name="info" size="l" slot="icon"></gov-icon>\n\t\t\t<p>\n\t\t\t\tFont awesome. Default - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t</p>\n\t\t</gov-message>\n\t\t<br>\n\t\t<gov-message color="warning" type="bold">\n\t\t\t<gov-icon name="info" size="l" slot="icon"></gov-icon>\n\t\t\t<p>\n\t\t\t\tFont awesome. Default - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t</p>\n\t\t</gov-message>\n\t\t<br><br>\n\t\t<h3>Subtle</h3>\n\t\t<gov-message color="primary" type="subtle">\n\t\t\t<gov-icon name="info" size="l" slot="icon"></gov-icon>\n\t\t\t<p>\n\t\t\t\tFont awesome. Default - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t</p>\n\t\t</gov-message>\n\t\t<br>\n\t\t<gov-message color="neutral" type="subtle">\n\t\t\t<gov-icon name="info" size="l" slot="icon"></gov-icon>\n\t\t\t<p>\n\t\t\t\tFont awesome. Default - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t</p>\n\t\t</gov-message>\n\t\t<br>\n\t\t<gov-message color="error" type="subtle">\n\t\t\t<gov-icon name="info" size="l" slot="icon"></gov-icon>\n\t\t\t<p>\n\t\t\t\tFont awesome. Default - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t</p>\n\t\t</gov-message>\n\t\t<br>\n\t\t<gov-message color="success" type="subtle">\n\t\t\t<gov-icon name="info" size="l" slot="icon"></gov-icon>\n\t\t\t<p>\n\t\t\t\tFont awesome. Default - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t</p>\n\t\t</gov-message>\n\t\t<br>\n\t\t<gov-message color="warning" type="subtle">\n\t\t\t<gov-icon name="info" size="l" slot="icon"></gov-icon>\n\t\t\t<p>\n\t\t\t\tFont awesome. Default - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t</p>\n\t\t</gov-message>\n\t\t\t`}}if(customElements.get("message-page")===undefined){customElements.define("message-page",lo)}class so extends HTMLElement{connectedCallback(){setTimeout((function(){document.getElementById("btn").addEventListener("gov-click",(function(){document.getElementById("dialog").setAttribute("open","true")}))}),500);this.innerHTML=`\n\t\t\t<h2>Dialog</h2>\n\t\t\t<gov-button color="primary" size="m" type="solid" id="btn" wcag-label="Zobrazit formulář o výši dávky">Vyplnit formulář</gov-button>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\t\t\t<p>aspo idapo diopad siaspo dasipo dsaiopds iaposa ipodsai dpsoa isapdsoai pdso posadd</p>\n\n\t\t\t<gov-dialog id="dialog" accessible-close-label="Zavřít modal žádosti o dávku">\n\t\t\t\t<gov-icon slot="icon" name="info" class="gov-color--primary-600"></gov-icon>\n\t\t\t\t<h3 slot="title">Podání daňového přiznání</h3>\n\t\t\t\t<h3>Obsah dialogového okna</h3>\n\t\t\t\t<p>Bude tvořen libovolnými komponentami</p>\n\t\t\t\t<br>\n\t\t\t\t<p>\n\t\t\t\t\tLorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eros libero, pulvinar vitae tempor at, laoreet quis mi. Vivamus vitae orci mi. Sed eget nisi convallis, condimentum diam a, fermentum risus. Proin vulputate pretium nisi sit amet commodo. Fusce ac magna velit. Maecenas sit amet sem quis arcu lobortis varius a non urna. Morbi ex neque, tempor bibendum sagittis vitae, vulputate ut nibh. Vestibulum sit amet pretium metus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut molestie varius nisi, sed mattis quam mollis vulputate. Morbi semper, purus sed ornare sodales, risus tellus porta massa, et eleifend erat diam vitae ex.\n\t\t\t\t</p>\n\t\t\t\t<p>\n\t\t\t\t\tSuspendisse quis justo nibh. Aenean id purus mattis, posuere urna a, blandit magna. Aenean a ante eleifend, ornare ipsum quis, bibendum mauris. Integer eget posuere sem, in tincidunt quam. Phasellus massa erat, sodales vel hendrerit vitae, ultrices quis dolor. Fusce id vestibulum sem, eu pretium sem. Praesent lacinia, odio non aliquam cursus, arcu ipsum ornare diam, vitae pharetra erat dui non velit. Quisque eu tempus mi. Nam a diam mauris.\n\t\t\t\t</p>\n\t\t\t\t<gov-button slot="footer" size="l" color="primary" type="base">Zrušit</gov-button>\n                <gov-button slot="footer" size="l" color="primary" type="solid">Pokračovat</gov-button>\n\t\t\t</gov-dialog>\n\t\t`}}if(customElements.get("dialog-page")===undefined){customElements.define("dialog-page",so)}class ao extends HTMLElement{connectedCallback(){setTimeout((()=>{const t=document.getElementById("bagr");if(t){t.addEventListener("gov-page",(()=>{}))}}),500);this.innerHTML=`\n\t\t<h2>Pagination</h2>\n\n\t\t<gov-pagination size="m" total="212" wcag-label="Stránkování pro sekci dokumenty" wcag-select-label="Vybrat stránku"></gov-pagination>\n\t\t<br>\n\t\t<gov-pagination size="s" total="212" wcag-label="Stránkování pro sekci dokumenty" wcag-select-label="Vybrat stránku"></gov-pagination>\n\t\t<br>\n\t\t<gov-pagination size="m" id="bagr"  type="select" total="212"  wcag-label="Stránkování pro sekci dokumenty" wcag-select-label="Vybrat stránku"></gov-pagination>\n\t\t<br>\n\t\t<gov-pagination type="select" size="s" total="212"  wcag-label="Stránkování pro sekci dokumenty" wcag-select-label="Vybrat stránku"></gov-pagination>\n\t\t<br>\n\t\t<br>\n\t\t<gov-pagination size="m" color="neutral" total="212" current="2" wcag-label="Stránkování pro sekci dokumenty" wcag-select-label="Vybrat stránku"></gov-pagination>\n\t\t<br>\n\t\t<gov-pagination size="s" color="neutral" wcag-label="Stránkování pro sekci dokumenty" wcag-select-label="Vybrat stránku"></gov-pagination>\n\t\t<br>\n\t\t<gov-pagination size="m" type="select" color="neutral" total="212"  wcag-label="Stránkování pro sekci dokumenty" wcag-select-label="Vybrat stránku"></gov-pagination>\n\t\t<br>\n\t\t<gov-pagination size="s" type="select" color="neutral" size="s" total="212"  wcag-label="Stránkování pro sekci dokumenty" wcag-select-label="Vybrat stránku"></gov-pagination>\n\n\t\t`}}if(customElements.get("pagination-page")===undefined){customElements.define("pagination-page",ao)}class ro extends HTMLElement{connectedCallback(){this.innerHTML=`\n\t\t\t<style>\n\t\t\t gov-spacer {\n\t\t\t\tbackground: lightgray;\n\t\t\t\tmargin-bottom: 10px;\n\t\t\t }\n\t\t\t</style>\n\t\t\t<gov-spacer size="2xs" breakpoint="sm"></gov-spacer>\n\t\t\t<gov-spacer size="xs" breakpoint="sm"></gov-spacer>\n\t\t\t<gov-spacer size="s" breakpoint="sm"></gov-spacer>\n\t\t\t<gov-spacer size="m" breakpoint="sm"></gov-spacer>\n\t\t\t<gov-spacer size="l" breakpoint="sm"></gov-spacer>\n\t\t\t<gov-spacer size="xl" breakpoint="sm"></gov-spacer>\n\t\t\t<gov-spacer size="2xl" breakpoint="sm"></gov-spacer>\n\t\t\t<gov-spacer size="3xl" breakpoint="sm"></gov-spacer>\n\t\t\t<gov-spacer size="4xl" breakpoint="sm"></gov-spacer>\n\t\t`}}if(customElements.get("spacer-page")===undefined){customElements.define("spacer-page",ro)}class co extends HTMLElement{connectedCallback(){this.innerHTML=`\n\t\t\t<h2>Stepper</h2>\n\t\t\t<h3>Velikost S</h3>\n\n\t\t\t<gov-stepper size="s">\n\t\t\t\t<gov-stepper-item color="success" size="s">\n\t\t\t\t\t<gov-icon slot="prefix" name="check-lg"></gov-icon>\n\t\t\t\t\t<h1 slot="headline">Hotový krok</h1>\n\t\t\t\t\t<p slot="annotation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus</p>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item color="error" size="s">\n\t\t\t\t\t<gov-icon slot="prefix" name="x-lg"></gov-icon>\n\t\t\t\t\t<h2 slot="headline">Chybový krok</h2>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item color="primary" size="s">\n\t\t\t\t\t<span slot="prefix">2</span>\n\t\t\t\t\t<h2 slot="headline">Krok s textem, obrázkem</h2>\n\t\t\t\t\t<div slot="content">\n\t\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t</div>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item color="neutral" size="s">\n\t\t\t\t\t<span slot="prefix">3</span>\n\t\t\t\t\t<h2 slot="headline">Budoucí krok</h2>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item color="warning" size="s">\n\t\t\t\t\t<span slot="prefix">4</span>\n\t\t\t\t\t<h2 slot="headline">Budoucí krok</h2>\n\t\t\t\t</gov-stepper-item>\n\t\t\t</gov-stepper>\n\n\t\t\t<br><br>\n\t\t\t<h3>Velikost M</h3>\n\n\t\t\t<gov-stepper size="m">\n\t\t\t\t<gov-stepper-item color="success" size="m">\n\t\t\t\t\t<gov-icon slot="prefix" name="check-lg"></gov-icon>\n\t\t\t\t\t<h3 slot="headline">Hotový krok</h3>\n\t\t\t\t\t<p slot="annotation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>\n\t\t\t\t\t<div slot="content">\n\t\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus. Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t</div>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item color="error" size="m">\n\t\t\t\t\t<gov-icon slot="prefix" name="x-lg"></gov-icon>\n\t\t\t\t\t<h3 slot="headline">Chybový krok</h3>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item color="primary" size="m">\n\t\t\t\t\t<span slot="prefix">2</span>\n\t\t\t\t\t<h2 slot="headline">Krok s textem</h2>\n\t\t\t\t\t<span slot="annotation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus</span>\n\t\t\t\t\t<div slot="content">\n\t\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus. Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus. Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t</div>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item color="neutral" size="m">\n\t\t\t\t\t<span slot="prefix">3</span>\n\t\t\t\t\t<h3 slot="headline">Budoucí krok</h3>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item color="warning" size="m">\n\t\t\t\t\t<span slot="prefix">4</span>\n\t\t\t\t\t<h3 slot="headline">Budoucí krok</h3>\n\t\t\t\t</gov-stepper-item>\n\t\t\t</gov-stepper>\n\n\t\t\t<br><br>\n\t\t\t<h3>Velikost L</h3>\n\n\t\t\t<gov-stepper size="l">\n\t\t\t\t<gov-stepper-item color="success" size="l">\n\t\t\t\t\t<gov-icon slot="prefix" name="check-lg"></gov-icon>\n\t\t\t\t\t<h2 slot="headline">Hotový krok</h2>\n\t\t\t\t\t<span class="annotation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus</span>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item color="error" size="l">\n\t\t\t\t\t<gov-icon slot="prefix" name="x-lg"></gov-icon>\n\t\t\t\t\t<h3 slot="headline">Chybový krok</h3>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item color="primary" size="l">\n\t\t\t\t\t<span slot="prefix">2</span>\n\t\t\t\t\t<h3 slot="headline">Krok s textem, obrázkem</h3>\n\t\t\t\t\t<div slot="content">\n\t\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t</div>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item color="neutral" size="l">\n\t\t\t\t\t<span slot="prefix">3</span>\n\t\t\t\t\t<h3 slot="headline">Budoucí krok</h3>\n\t\t\t\t</gov-stepper-item>\n\t\t\t\t<gov-stepper-item color="warning" size="l">\n\t\t\t\t\t<span slot="prefix">4</span>\n\t\t\t\t\t<h3 slot="headline">Budoucí krok</h3>\n\t\t\t\t</gov-stepper-item>\n\t\t\t</gov-stepper>\n\t\t`}}if(customElements.get("stepper-page")===undefined){customElements.define("stepper-page",co)}class uo extends HTMLElement{connectedCallback(){this.innerHTML=`\n\t\t\t<h2>Tabs</h2>\n\t\t\t<gov-container>\n\t\t\t<h3>Primary</h3>\n\t\t\t<br>\n\t\t\t<gov-tabs color="primary" size="xs" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">\n\t\t\t\t<gov-tabs-item label="TAB #1" icon-start="basic/star">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #2" icon-end="basic/star" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #3">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<br>\n\t\t\t<gov-tabs color="primary" size="s" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti" direction="column">\n\t\t\t\t<gov-tabs-item label="TAB #1" icon-start="basic/star">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #2" icon-start="basic/star"default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #3" icon-start="basic/star">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<br>\n\t\t\t<gov-tabs color="primary" size="m" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">\n\t\t\t\t<gov-tabs-item label="TAB #1">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #2" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #3">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<br>\n\t\t\t<gov-tabs color="primary" size="l" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">\n\t\t\t\t<gov-tabs-item label="TAB #1">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #2" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #3">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<br>\n\t\t\t<gov-tabs color="primary" size="xl" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">\n\t\t\t\t<gov-tabs-item label="Praesent vehicula sollicitudin">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="Duis in blandit lacus" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="Lorem ipsum dolor sit amet">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<br>\n\t\t\t<h3>Neutral</h3>\n\t\t\t<br>\n\t\t\t<gov-tabs color="neutral" size="xs" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">\n\t\t\t\t<gov-tabs-item label="TAB #1">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #2" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #3">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<br>\n\t\t\t<gov-tabs color="neutral" size="s" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">\n\t\t\t\t<gov-tabs-item label="TAB #1">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #2" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #3">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<br>\n\t\t\t<gov-tabs color="neutral" size="m" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">\n\t\t\t\t<gov-tabs-item label="TAB #1">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #2" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #3">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<br>\n\t\t\t<gov-tabs color="neutral" size="l" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">\n\t\t\t\t<gov-tabs-item label="TAB #1">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #2" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #3">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<br>\n\t\t\t<gov-tabs color="neutral" size="xl" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">\n\t\t\t\t<gov-tabs-item label="TAB #1">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #2" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #3">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<br>\n\t\t\t<br><br>\n\n\t\t\t<h3>Chip primary</h3>\n\t\t\t<br>\n\t\t\t<gov-tabs color="primary" size="xs" type="chip" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">\n\t\t\t\t<gov-tabs-item label="TAB #1" icon-start="basic/star">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #2" icon-end="basic/star" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #3">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<br>\n\t\t\t<gov-tabs color="primary" size="s" type="chip" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">\n\t\t\t\t<gov-tabs-item label="TAB #1">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #2" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #3">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<br>\n\t\t\t<gov-tabs color="primary" size="m" type="chip" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">\n\t\t\t\t<gov-tabs-item label="TAB #1">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #2" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #3">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<br>\n\t\t\t<gov-tabs color="primary" size="l" type="chip" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">\n\t\t\t\t<gov-tabs-item label="TAB #1">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #2" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #3">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<br>\n\t\t\t<gov-tabs color="primary" size="xl" type="chip" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">\n\t\t\t\t<gov-tabs-item label="TAB #1">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #2" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #3">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<br>\n\t\t\t<h3>Chip neutral</h3>\n\t\t\t<br>\n\t\t\t<gov-tabs color="neutral" size="xs" type="chip" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">\n\t\t\t\t<gov-tabs-item label="TAB #1">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #2" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #3">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<br>\n\t\t\t<gov-tabs color="neutral" size="s" type="chip" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">\n\t\t\t\t<gov-tabs-item label="TAB #1">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #2" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #3">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<br>\n\t\t\t<gov-tabs color="neutral" size="m" type="chip" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">\n\t\t\t\t<gov-tabs-item label="TAB #1">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #2" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #3">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<br>\n\t\t\t<gov-tabs color="neutral" size="l" type="chip" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">\n\t\t\t\t<gov-tabs-item label="TAB #1">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #2" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #3">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<br>\n\t\t\t<gov-tabs color="neutral" size="xl" type="chip" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti">\n\t\t\t\t<gov-tabs-item label="TAB #1">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #2" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #3">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<br>\n\t\t\t<br><br>\n\n\t\t\t<h2>Vertical tabs</h2>\n\t\t\t<gov-tabs id="po" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti" orientation="vertical">\n\t\t\t\t<gov-tabs-item label="TAB #1">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #2" default>\n\t\t\t\t\t<p>Dalsi super tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #3">\n\t\t\t\t\t<p>Dalsi super tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<gov-tabs id="po" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti" orientation="vertical">\n\t\t\t\t<gov-tabs-item label="Muj super tab">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="Dalsi super tab s dlouhým popisem" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="Další super tab s naprosto nesmyslně dlouhým popisem, který se doufám nevyužije">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<gov-tabs id="po" type="chip" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti" orientation="vertical">\n\t\t\t\t<gov-tabs-item label="TAB #1">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #2" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="TAB #3">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t<gov-tabs id="po" type="chip" wcag-label="Důležitý tabs" wcag-select-label="Výběr možnosti" orientation="vertical">\n\t\t\t\t<gov-tabs-item label="Muj super tab">\n\t\t\t\t\t<p>Muj super tab - Lorem ipsum (zkráceně lipsum) je označení pro standardní pseudolatinský text užívaný v grafickém\n\t\t\t\t\t\tdesignu a navrhování jako demonstrativní výplňový text při vytváření pracovních ukázek grafických\n\t\t\t\t\t\tnávrhů (např. internetových stránek, rozvržení časopisů či všech druhů reklamních materiálů). Lipsum\n\t\t\t\t\t\ttak pracovně znázorňuje text v ukázkových maketách (tzv. mock-up) předtím, než bude do hotového\n\t\t\t\t\t\tnávrhu vložen smysluplný obsah.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="Dalsi super tab s dlouhým popisem" default>\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“), oko by při posuzování vzhledu bylo vyrušováno pravidelnou\n\t\t\t\t\t\tstrukturou textu, která se od běžného textu liší. Text lorem ipsum na první pohled připomíná běžný\n\t\t\t\t\t\ttext, slova jsou různě dlouhá, frekvence písmen je podobná běžné řeči, interpunkce vypadá přirozeně\n\t\t\t\t\t\tatd.</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t\t<gov-tabs-item label="Další super tab s naprosto nesmyslně dlouhým popisem, který se doufám nevyužije">\n\t\t\t\t\t<p>Dalsi suepr tab - Pokud by se pro stejný účel použil smysluplný text, bylo by těžké hodnotit pouze vzhled, aniž by se\n\t\t\t\t\t\tpozorovatel nechal svést ke čtení obsahu. Pokud by byl naopak použit nesmyslný, ale pravidelný text\n\t\t\t\t\t\t(např. opakování „asdf asdf asdf…“).</p>\n\t\t\t\t</gov-tabs-item>\n\t\t\t</gov-tabs>\n\t\t\t</gov-container>\n\t\t`}}if(customElements.get("tabs-page")===undefined){customElements.define("tabs-page",uo)}class vo extends HTMLElement{connectedCallback(){this.innerHTML=`\n\t\t\t<h1>Tags</h1>\n\t\t\t<h4>Primary - bold</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-tag color="primary" size="xs" type="bold">\n\t\t\t\t\tTag\n\t\t\t\t</gov-tag>\n\t\t\t\t<gov-tag color="primary" size="xs" type="bold">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\tTag\n\t\t\t\t</gov-tag>\n\t\t\t\t<gov-tag color="primary" size="xs" type="bold">\n\t\t\t\t\tTag\n\t\t\t\t\t<gov-icon slot="right-icon" name="star-fill"></gov-icon>\n\t\t\t\t</gov-tag>\n\t\t\t\t<gov-tag color="primary" size="xs" type="bold">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\tTag\n\t\t\t\t\t<gov-icon slot="right-icon" name="star-fill"></gov-icon>\n\t\t\t\t</gov-tag>\n\t\t\t\t<gov-tag color="primary" size="s" type="bold">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\tSmall Primary\n\t\t\t\t</gov-tag>\n\t\t\t\t<gov-tag color="primary" size="m" type="bold">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\tNormal Primary\n\t\t\t\t\t<gov-icon slot="right-icon" name="star-fill"></gov-icon>\n\t\t\t\t</gov-tag>\n\t\t\t</div>\n\t\t\t<h4>Primary - subtle</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-tag color="primary" size="xs" type="subtle">\n\t\t\t\t\tTag\n\t\t\t\t</gov-tag>\n\t\t\t\t<gov-tag color="primary" size="s" type="subtle">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\tSmall Primary\n\t\t\t\t</gov-tag>\n\t\t\t\t<gov-tag color="primary" size="m" type="subtle">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\tNormal Primary\n\t\t\t\t</gov-tag>\n\t\t\t</div>\n\t\t\t<br>\n\n\t\t\t<h4>Secondary - bold</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-tag color="secondary" type="bold" size="xs">\n\t\t\t\t\tTag\n\t\t\t\t</gov-tag>\n\t\t\t\t<gov-tag color="secondary" type="bold" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\tSmall secondary\n\t\t\t\t</gov-tag>\n\t\t\t\t<gov-tag color="secondary" type="bold" size="m">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\tNormal secondary\n\t\t\t\t</gov-tag>\n\t\t\t</div>\n\t\t\t<h4>Secondary - subtle</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-tag color="secondary" type="subtle" size="xs">\n\t\t\t\t\tTag\n\t\t\t\t</gov-tag>\n\t\t\t\t<gov-tag color="secondary" type="subtle" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\tSmall Primary\n\t\t\t\t</gov-tag>\n\t\t\t\t<gov-tag color="secondary" type="subtle" size="m">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\tNormal Primary\n\t\t\t\t</gov-tag>\n\t\t\t</div>\n\t\t\t<br>\n\n\t\t\t<h4>Success - bold</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-tag color="success" type="bold" size="xs">\n\t\t\t\t\tTag\n\t\t\t\t</gov-tag>\n\t\t\t\t<gov-tag color="success" type="bold" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\tSmall success\n\t\t\t\t</gov-tag>\n\t\t\t\t<gov-tag color="success" type="bold" size="m">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\tNormal success\n\t\t\t\t</gov-tag>\n\t\t\t</div>\n\t\t\t<h4>Success - subtle</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-tag color="success" type="subtle" size="xs">\n\t\t\t\t\tTag\n\t\t\t\t</gov-tag>\n\t\t\t\t<gov-tag color="success" type="subtle" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\tSmall Primary\n\t\t\t\t</gov-tag>\n\t\t\t\t<gov-tag color="success" type="subtle" size="m">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\tNormal Primary\n\t\t\t\t</gov-tag>\n\t\t\t</div>\n\t\t\t<br>\n\n\t\t\t<h4>Warning - bold</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-tag color="warning" type="bold" size="xs">\n\t\t\t\t\tTag\n\t\t\t\t</gov-tag>\n\t\t\t\t<gov-tag color="warning" type="bold" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\tSmall warning\n\t\t\t\t</gov-tag>\n\t\t\t\t<gov-tag color="warning" type="bold" size="m">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\tNormal warning\n\t\t\t\t</gov-tag>\n\t\t\t</div>\n\t\t\t<h4>Warning - subtle</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-tag color="warning" type="subtle" size="xs">\n\t\t\t\t\tTag\n\t\t\t\t</gov-tag>\n\t\t\t\t<gov-tag color="warning" type="subtle" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\tSmall Primary\n\t\t\t\t</gov-tag>\n\t\t\t\t<gov-tag color="warning" type="subtle" size="m">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\tNormal Primary\n\t\t\t\t</gov-tag>\n\t\t\t</div>\n\t\t\t<br>\n\n\t\t\t<h4>Error - bold</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-tag color="error" type="bold" size="xs">\n\t\t\t\t\tTag\n\t\t\t\t</gov-tag>\n\t\t\t\t<gov-tag color="error" type="bold" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\tSmall error\n\t\t\t\t</gov-tag>\n\t\t\t\t<gov-tag color="error" type="bold" size="m">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\tNormal error\n\t\t\t\t</gov-tag>\n\t\t\t</div>\n\t\t\t<h4>Error - subtle</h4>\n\t\t\t<div class="container-view">\n\t\t\t\t<gov-tag color="error" type="subtle" size="xs">\n\t\t\t\t\tTag\n\t\t\t\t</gov-tag>\n\t\t\t\t<gov-tag color="error" type="subtle" size="s">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\tSmall Primary\n\t\t\t\t</gov-tag>\n\t\t\t\t<gov-tag color="error" type="subtle" size="m">\n\t\t\t\t\t<gov-icon slot="left-icon" name="star-fill"></gov-icon>\n\t\t\t\t\tNormal Primary\n\t\t\t\t</gov-tag>\n\t\t\t</div>\n\t\t`}}if(customElements.get("tag-page")===undefined){customElements.define("tag-page",vo)}class po extends HTMLElement{connectedCallback(){this.innerHTML=`\n\t\t<h2>Tiles</h2>\n\n\t\t<h3>Vertical</h3>\n\t\t<gov-tiles style="max-width: 230px;" columns="1">\n\t\t\t<gov-tile orientation="vertical" size="m" href="#">\n\t\t\t\t<gov-icon name="info" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Gov Nav Tile Label</h3>\n\t\t\t\t<span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer...</span>\n\t\t\t</gov-tile>\n\t\t</gov-tiles>\n\t\t<gov-tiles style="max-width: 230px;" columns="1">\n\t\t\t<gov-tile orientation="vertical" size="m">\n\t\t\t\t<gov-icon name="info" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Gov Nav Tile Label</h3>\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer...</p>\n\t\t\t\t<gov-button color="primary" size="m" type="outlined" href="#" slot="button">Přejít na web</gov-button>\n\t\t\t</gov-tile>\n\t\t</gov-tiles>\n\t\t<div style="max-width: 600px;">\n\t\t\t<gov-tile orientation="vertical" size="m" href="#">\n\t\t\t\t<h3 slot="title">Gov Nav Tile Label</h3>\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer...</p>\n\t\t\t</gov-tile>\n\t\t\t<br>\n\t\t\t<h4>S</h4>\n\t\t\t<gov-tile href="#" orientation="vertical" size="s">\n\t\t\t\t<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>\n\t\t\t\t<p>\n\t\t\t\t\tOd 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky.\n\t\t\t\t</p>\n\t\t\t</gov-tile>\n\t\t\t<h4>M</h4>\n\t\t\t<gov-tile href="#" orientation="vertical" size="m">\n\t\t\t\t<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>\n\t\t\t\t<p>\n\t\t\t\t\tOd 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky.\n\t\t\t\t</p>\n\t\t\t</gov-tile>\n\t\t\t<h4>L</h4>\n\t\t\t<gov-tile href="#" orientation="vertical" size="l">\n\t\t\t\t<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>\n\t\t\t\t<p>\n\t\t\t\t\tOd 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky.\n\t\t\t\t</p>\n\t\t\t</gov-tile>\n\t\t</div>\n\t\t<br>\n\t\t<h3>Horizontal</h3>\n\t\t<gov-tiles style="max-width: 800px;" columns="1">\n\t\t\t<gov-tile orientation="horizontal" size="m" href="#">\n\t\t\t\t<gov-icon name="info" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Gov Nav Tile Label</h3>\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer...</p>\n\t\t\t</gov-tile>\n\t\t</gov-tiles>\n\t\t<gov-tiles style="max-width: 800px;" columns="1">\n\t\t\t<gov-tile orientation="horizontal" size="m">\n\t\t\t\t<gov-icon name="info" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Gov Nav Tile Label</h3>\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer...</p>\n\t\t\t\t<gov-button color="primary" size="m" type="outlined" href="#" slot="button">Přejít na web</gov-button>\n\t\t\t</gov-tile>\n\t\t</gov-tiles>\n\t\t<div style="max-width: 600px;">\n\t\t\t<gov-tile orientation="horizontal" size="m" href="#">\n\t\t\t\t<h3 slot="title">Gov Nav Tile Label</h3>\n\t\t\t\t<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer...</p>\n\t\t\t</gov-tile>\n\t\t\t<br>\n\t\t\t<h4>S</h4>\n\t\t\t<gov-tile href="#" orientation="horizontal" size="s">\n\t\t\t\t<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>\n\t\t\t\t<p>\n\t\t\t\t\tOd 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky.\n\t\t\t\t</p>\n\t\t\t</gov-tile>\n\t\t\t<h4>M</h4>\n\t\t\t<gov-tile href="#" orientation="horizontal" size="m">\n\t\t\t\t<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>\n\t\t\t\t<p>\n\t\t\t\t\tOd 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky.\n\t\t\t\t</p>\n\t\t\t</gov-tile>\n\t\t\t<h4>L</h4>\n\t\t\t<gov-tile href="#" orientation="horizontal" size="l">\n\t\t\t\t<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>\n\t\t\t\t<p>\n\t\t\t\t\tOd 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky.\n\t\t\t\t</p>\n\t\t\t</gov-tile>\n\t\t</div>\n\n\t\t<br><br>\n\n\t\t<gov-tiles columns="6">\n\t\t\t<gov-tile href="#" no-border>\n\t\t\t\t<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>\n\t\t\t\t<p>\n\t\t\t\t\tSecondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t\t</p>\n\t\t\t</gov-tile>\n\t\t\t<gov-tile href="#" no-border>\n\t\t\t\t<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>\n\t\t\t\t<p>\n\t\t\t\t\tSecondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t\t</p>\n\t\t\t</gov-tile>\n\t\t\t<gov-tile href="#" no-border>\n\t\t\t\t<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>\n\t\t\t\t<p>\n\t\t\t\t\tSecondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t\t</p>\n\t\t\t</gov-tile>\n\t\t\t<gov-tile href="#" no-border>\n\t\t\t\t<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>\n\t\t\t\t<p>\n\t\t\t\t\tSecondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t\t</p>\n\t\t\t</gov-tile>\n\t\t\t<gov-tile href="#" no-border>\n\t\t\t\t<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>\n\t\t\t\t<p>\n\t\t\t\t\tSecondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t\t</p>\n\t\t\t</gov-tile>\n\t\t\t<gov-tile href="#" no-border>\n\t\t\t\t<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>\n\t\t\t\t<p>\n\t\t\t\t\tSecondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t\t</p>\n\t\t\t</gov-tile>\n\t\t</gov-tiles>\n\t\t<br>\n\t\t<gov-tiles columns="5">\n\t\t\t<gov-tile href="#" no-border>\n\t\t\t\t<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>\n\t\t\t\t<p>\n\t\t\t\t\tSecondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t\t</p>\n\t\t\t</gov-tile>\n\t\t\t<gov-tile href="#" no-border>\n\t\t\t\t<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>\n\t\t\t\t<p>\n\t\t\t\t\tSecondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t\t</p>\n\t\t\t</gov-tile>\n\t\t\t<gov-tile href="#" no-border>\n\t\t\t\t<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>\n\t\t\t\t<p>\n\t\t\t\t\tSecondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t\t</p>\n\t\t\t</gov-tile>\n\t\t\t<gov-tile href="#" no-border>\n\t\t\t\t<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>\n\t\t\t\t<p>\n\t\t\t\t\tSecondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t\t</p>\n\t\t\t</gov-tile>\n\t\t\t<gov-tile href="#" no-border>\n\t\t\t\t<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>\n\t\t\t\t<p>\n\t\t\t\t\tSecondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t\t</p>\n\t\t\t</gov-tile>\n\t\t\t<gov-tile href="#" no-border>\n\t\t\t\t<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>\n\t\t\t\t<p>\n\t\t\t\t\tSecondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t\t</p>\n\t\t\t</gov-tile>\n\t\t</gov-tiles>\n\t\t<br>\n\t\t<gov-tiles columns="4">\n\t\t\t<gov-tile href="#">\n\t\t\t\t<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>\n\t\t\t\t<p>\n\t\t\t\t\tSecondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t\t</p>\n\t\t\t</gov-tile>\n\t\t\t<gov-tile href="#">\n\t\t\t\t<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>\n\t\t\t\t<p>\n\t\t\t\t\tSecondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t\t</p>\n\t\t\t</gov-tile>\n\t\t\t<gov-tile href="#">\n\t\t\t\t<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>\n\t\t\t\t<p>\n\t\t\t\t\tSecondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t\t</p>\n\t\t\t</gov-tile>\n\t\t\t<gov-tile href="#">\n\t\t\t\t<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>\n\t\t\t\t<p>\n\t\t\t\t\tSecondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t\t</p>\n\t\t\t</gov-tile>\n\t\t\t<gov-tile href="#">\n\t\t\t\t<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>\n\t\t\t\t<p>\n\t\t\t\t\tSecondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t\t</p>\n\t\t\t</gov-tile>\n\t\t\t<gov-tile href="#">\n\t\t\t\t<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>\n\t\t\t\t<p>\n\t\t\t\t\tSecondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t\t</p>\n\t\t\t</gov-tile>\n\t\t</gov-tiles>\n\t\t<br>\n\t\t<gov-tiles columns="3">\n\t\t\t<gov-tile href="#" no-border>\n\t\t\t\t<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>\n\t\t\t\t<p>\n\t\t\t\t\tSecondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t\t</p>\n\t\t\t</gov-tile>\n\t\t\t<gov-tile href="#" no-border>\n\t\t\t\t<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>\n\t\t\t\t<p>\n\t\t\t\t\tSecondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t\t</p>\n\t\t\t</gov-tile>\n\t\t\t<gov-tile href="#" no-border>\n\t\t\t\t<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>\n\t\t\t\t<p>\n\t\t\t\t\tSecondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t\t</p>\n\t\t\t</gov-tile>\n\t\t\t<gov-tile href="#" no-border>\n\t\t\t\t<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>\n\t\t\t\t<p>\n\t\t\t\t\tSecondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t\t</p>\n\t\t\t</gov-tile>\n\t\t\t<gov-tile href="#" no-border>\n\t\t\t\t<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>\n\t\t\t\t<p>\n\t\t\t\t\tSecondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t\t</p>\n\t\t\t</gov-tile>\n\t\t\t<gov-tile href="#" no-border>\n\t\t\t\t<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>\n\t\t\t\t<p>\n\t\t\t\t\tSecondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t\t</p>\n\t\t\t</gov-tile>\n\t\t</gov-tiles>\n\t\t<br>\n\t\t<gov-tiles columns="2">\n\t\t\t<gov-tile href="#">\n\t\t\t\t<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>\n\t\t\t\t<p>\n\t\t\t\t\tSecondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t\t</p>\n\t\t\t</gov-tile>\n\t\t\t<gov-tile href="#">\n\t\t\t\t<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>\n\t\t\t\t<p>\n\t\t\t\t\tSecondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t\t</p>\n\t\t\t</gov-tile>\n\t\t\t<gov-tile href="#">\n\t\t\t\t<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>\n\t\t\t\t<p>\n\t\t\t\t\tSecondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t\t</p>\n\t\t\t</gov-tile>\n\t\t\t<gov-tile href="#">\n\t\t\t\t<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>\n\t\t\t\t<p>\n\t\t\t\t\tSecondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t\t</p>\n\t\t\t</gov-tile>\n\t\t\t<gov-tile href="#">\n\t\t\t\t<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>\n\t\t\t\t<p>\n\t\t\t\t\tSecondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t\t</p>\n\t\t\t</gov-tile>\n\t\t\t<gov-tile href="#">\n\t\t\t\t<gov-icon name="id-card" type="complex" slot="icon"></gov-icon>\n\t\t\t\t<h3 slot="title">Zdroje energie, těžba, nerosty, drahé kovy</h3>\n\t\t\t\t<p>\n\t\t\t\t\tSecondary - Od 20. 12. 2020 do 14:00 h do 20.&nbsp;12. 2020 do 15:00 h bude provedena plánovaná odstávka serverů. V&nbsp;uvedeném termínu bude nedostupné přihlášení k&nbsp;Portálu občana prostřednictvím datové schránky. Více informací <a href="#">zde</a>.\n\t\t\t\t</p>\n\t\t\t</gov-tile>\n\t\t</gov-tiles>\n\t\t`}}if(customElements.get("tiles-page")===undefined){customElements.define("tiles-page",po)}class mo extends HTMLElement{connectedCallback(){this.innerHTML=`\n\t\t<h2>\n\t\t\tToast Message\n\t\t</h2>\n\t\t<gov-toast color="success" type="subtle">\n\t\t\t<gov-icon name="check-lg" slot="icon"></gov-icon>\n\t\t\t<p>\n\t\t\t\tVaše dokumenty byly úspěšně staženy.\n\t\t\t</p>\n\t\t</gov-toast>\n\t\t<br>\n\t\t<gov-toast color="error" type="subtle" gravity="bottom" position="left">\n\t\t\t<gov-icon name="info" slot="icon"></gov-icon>\n\t\t\t<p>\n\t\t\t\tNení možné požadavek zpracovat z důvodu chyby serveru.\n\t\t\t</p>\n\t\t</gov-toast>\n\t\t<br>\n\t\t<gov-toast color="warning" type="subtle" position="left">\n\t\t\t<gov-icon name="info" slot="icon"></gov-icon>\n\t\t\t<p>\n\t\t\t\tŽádost se nepodařilo odeslat, zkontrolujte nastavení.\n\t\t\t</p>\n\t\t</gov-toast>\n\t\t<br>\n\t\t<gov-toast color="primary" type="subtle" position="center">\n\t\t\t<gov-icon name="info" slot="icon"></gov-icon>\n\t\t\t<p>\n\t\t\t\tSoubory jsou připraveny ke stažení.\n\t\t\t</p>\n\t\t</gov-toast>\n\t\t<br>\n\t\t<gov-toast color="neutral" type="subtle" gravity="bottom" position="right">\n\t\t\t<gov-icon name="info" slot="icon"></gov-icon>\n\t\t\t<p>\n\t\t\t\tVaše aplikace byla aktualizovaná na novou verzi!\n\t\t\t</p>\n\t\t</gov-toast>\n\t\t\t`}}if(customElements.get("toast-message-page")===undefined){customElements.define("toast-message-page",mo)}class go extends HTMLElement{connectedCallback(){this.innerHTML=`\n\t\t<h2>\n\t\t\tToast Message Countdown\n\t\t</h2>\n\t\t<gov-toast color="success" type="bold" time="10000">\n\t\t\t<gov-icon name="check-lg" slot="icon"></gov-icon>\n\t\t\t<p>\n\t\t\t\tVaše dokumenty byly úspěšně staženy.\n\t\t\t</p>\n\t\t</gov-toast>\n\t\t<br>\n\t\t<gov-toast color="error" type="bold" gravity="bottom" position="left" time="10000">\n\t\t\t<gov-icon name="info" slot="icon"></gov-icon>\n\t\t\t<p>\n\t\t\t\tNení možné požadavek zpracovat z důvodu chyby serveru.\n\t\t\t</p>\n\t\t</gov-toast>\n\t\t<br>\n\t\t<gov-toast color="warning" type="bold" position="left" time="10000">\n\t\t\t<gov-icon name="info" slot="icon"></gov-icon>\n\t\t\t<p>\n\t\t\t\tŽádost se nepodařilo odeslat, zkontrolujte nastavení.\n\t\t\t</p>\n\t\t</gov-toast>\n\t\t<br>\n\t\t<gov-toast color="primary" type="bold" position="center" time="10000">\n\t\t\t<gov-icon name="info" slot="icon"></gov-icon>\n\t\t\t<p>\n\t\t\t\tSoubory jsou připraveny ke stažení.\n\t\t\t</p>\n\t\t</gov-toast>\n\t\t<br>\n\t\t<gov-toast color="neutral" type="bold" gravity="bottom" position="right" time="10000">\n\t\t\t<gov-icon name="info" slot="icon"></gov-icon>\n\t\t\t<p>\n\t\t\t\tVaše aplikace byla aktualizovaná na novou verzi!\n\t\t\t</p>\n\t\t</gov-toast>\n\t\t\t`}}if(customElements.get("toast-message-countdown-page")===undefined){customElements.define("toast-message-countdown-page",go)}class bo extends HTMLElement{connectedCallback(){this.innerHTML=`\n\t\t\t<div style="width: 500px; overflow: auto; height: 100px">\n\t\t\t\t<div style="width: 800px; display: flex; flex-direction: row; height: 100px; gap: 20px">\n\t\t\t\t\t<div style="width: 100px; border: 1px solid black; height: 100px"></div>\n\t\t\t\t\t<div style="width: 100px; border: 1px solid black; height: 100px"></div>\n\t\t\t\t\t<div style="width: 100px; border: 1px solid black; height: 100px"></div>\n\t\t\t\t\t<div style="width: 100px; border: 1px solid black; height: 100px"></div>\n\t\t\t\t\t<div style="width: 100px; border: 1px solid black; height: 100px"></div>\n\t\t\t\t\t<div style="width: 100px; border: 1px solid black; height: 100px"></div>\n\t\t\t\t\t<div style="width: 100px; border: 1px solid black; height: 100px"></div>\n\t\t\t\t\t<div style="width: 100px; border: 1px solid black; height: 100px"></div>\n\t\t\t\t\t<div style="width: 100px; border: 1px solid black; height: 100px"></div>\n\t\t\t\t\t<div style="width: 100px; border: 1px solid black; height: 100px">\n\t\t\t\t\t\t<gov-tooltip position="right" size="s" icon>\n\t\t\t\t\t\t\t<gov-icon name="info"></gov-icon>\n\t\t\t\t\t\t\t<gov-tooltip-content>\n\t\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t\t<li>Toggler div, h1, h2 rozbije celou komponentu. </li>\n\t\t\t\t\t\t\t\t\t<li>Můžu použít tagy jako span, anchor, gov-icon - inlinové. Zde je použita ikonka z knihovny font-awesome</li>\n\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t</gov-tooltip-content>\n\t\t\t\t\t</gov-tooltip>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<p>\n\t\t\t\tDefault scheme, size Small. Nelze umístit jako toggle element který je blokový - tj. div, h1, h2, atp.\n\t\t\t\t<gov-tooltip position="right" size="s" icon message="<ul>\n\t\t\t\t\t\t\t<li>Toggler div, h1, h2 rozbije celou komponentu. </li>\n\t\t\t\t\t\t\t<li>Můžu použít tagy jako span, anchor, gov-icon - inlinové. Zde je použita ikonka z knihovny font-awesome</li>\n\t\t\t\t\t\t</ul>">\n\t\t\t\t\t<span style="display: inline-block; width: 16px;"><gov-icon name="info"></gov-icon></span>\n\t\t\t\t</gov-tooltip>\n\t\t\t\tza prací do států EU byste měli být vždy pojištěni ve státě, ve kterém pracujete. Pokud pracujete pouze na území jednoho státu, je státem pojištění vždy tento stát.\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\tV rámci\n\t\t\t\t<gov-tooltip color="neutral" position="top" size="s" message="Znění petice podléhá § 1 odst. 3-4 zákonuč. 85/1990 Sb. Text.">\n\t\t\t\t\tpřípadě vycestování (top)případě vycestování (top)případě vycestování\n\t\t\t\t</gov-tooltip>\n\t\t\t\tstátů EU platí princip jednoho pojištění. V za prací do států EU byste měli být vždy\n\t\t\t\tpojištěni ve státě, ve kterém pracujete. Pokud pracujete pouze na území jednoho státu, je státem pojištění vždy\n\t\t\t\ttento stát.\n\t\t\t</p>\n\t\t\t<p>V rámci\n\t\t\t\t<gov-tooltip color="neutral" position="bottom" size="s">\n\t\t\t\t\tpřípadě vycestování (bottom)\n\t\t\t\t\t<gov-tooltip-content>\n\t\t\t\t\t\tZnění petice podléhá § 1 odst. 3-4 zákonuč. 85/1990 Sb. Text.\n\t\t\t\t\t</gov-tooltip-content>\n\t\t\t\t</gov-tooltip>\n\t\t\t\tstátů EU platí princip jednoho pojištění. V za prací do států EU byste měli být vždy\n\t\t\t\tpojištěni ve státě, ve kterém pracujete. Pokud pracujete pouze na území jednoho státu, je státem pojištění vždy\n\t\t\t\ttento stát.\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\tV rámci států EU platí princip jednoho pojištění. V za prací do států EU byste měli být vždy\n\t\t\t\t<gov-tooltip color="neutral" position="top" size="m">\n\t\t\t\t\tpřípadě vycestování (top)\n\t\t\t\t\t<gov-tooltip-content>\n\t\t\t\t\t\tZnění petice podléhá § 1 odst. 3-4 zákonuč. 85/1990 Sb. Text.\n\t\t\t\t\t</gov-tooltip-content>\n\t\t\t\t</gov-tooltip>\n\t\t\t\tpojištěni ve státě, ve kterém pracujete. Pokud pracujete pouze na území jednoho státu, je státem pojištění vždy tento stát.\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\tV rámci států EU platí princip jednoho pojištění. V\n\t\t\t\t<gov-tooltip position="right">\n\t\t\t\t\tpřípadě vycestování postion (right)\n\t\t\t\t\t<gov-tooltip-content>\n\t\t\t\t\t\tZnění petice podléhá § 1 odst. 3-4 zákonuč. 85/1990 Sb. Text.\n\t\t\t\t\t</gov-tooltip-content>\n\t\t\t\t</gov-tooltip>\n\t\t\t\tza prací do států EU byste měli být vždy pojištěni ve státě, ve kterém pracujete. Pokud pracujete pouze na území jednoho státu, je státem pojištění vždy tento stát.\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\tV rámci\n\t\t\t\t<gov-tooltip position="top">\n\t\t\t\t\tpřípadě vycestování (top)\n\t\t\t\t\t<gov-tooltip-content>\n\t\t\t\t\t\tZnění petice podléhá § 1 odst. 3-4 zákonuč. 85/1990 Sb. Text.\n\t\t\t\t\t</gov-tooltip-content>\n\t\t\t\t</gov-tooltip>\n\t\t\t\tstátů EU platí princip jednoho pojištění. V za prací do států EU byste měli být vždy\n\t\t\t\tpojištěni ve státě, ve kterém pracujete. Pokud pracujete pouze na území jednoho státu, je státem pojištění vždy\n\t\t\t\ttento stát.\n\t\t\t</p>\n\t\t\t<p>\n\t\t\tV rámci\n\t\t\t\t<gov-tooltip position="bottom">\n\t\t\t\t\tpřípadě vycestování (bottom)\n\t\t\t\t\t<gov-tooltip-content>\n\t\t\t\t\t\tZnění petice podléhá § 1 odst. 3-4 zákonuč. 85/1990 Sb. Text.\n\t\t\t\t\t</gov-tooltip-content>\n\t\t\t\t</gov-tooltip> států EU platí princip jednoho pojištění. V za prací do států EU byste měli být vždy\n\t\t\t\tpojištěni ve státě, ve kterém pracujete. Pokud pracujete pouze na území jednoho státu, je státem pojištění vždy\n\t\t\t\ttento stát.\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\tV rámci států EU platí princip jednoho pojištění. V za prací do států EU byste měli být vždy\n\t\t\t\t<gov-tooltip color="neutral" position="left">\n\t\t\t\t\tpřípadě vycestování (left)\n\t\t\t\t\t<gov-tooltip-content>\n\t\t\t\t\t\tZnění petice podléhá § 1 odst. 3-4 zákonuč. 85/1990 Sb. Text.\n\t\t\t\t\t</gov-tooltip-content>\n\t\t\t\t</gov-tooltip> pojištěni ve státě, ve kterém pracujete. Pokud pracujete pouze na území jednoho státu, je státem pojištění vždy\n\t\t\t\ttento stát. V rámci států EU platí princip jednoho pojištění. V\n\t\t\t\t<gov-tooltip color="neutral" position="right" size="l">\n\t\t\t\t\tpřípadě vycestování (right)\n\t\t\t\t\t<gov-tooltip-content>\n\t\t\t\t\t\tZnění petice podléhá § 1 odst. 3-4 zákonuč. 85/1990 Sb. Text.\n\t\t\t\t\t</gov-tooltip-content>\n\t\t\t\t</gov-tooltip>\n\t\t\t\tza prací do států EU byste měli být vždy\n\t\t\t\tpojištěni ve státě, ve kterém pracujete. Pokud pracujete pouze na území jednoho státu, je státem pojištění vždy\n\t\t\t\ttento stát.\n\t\t\t</p>\n\t\t\t<p>V rámci\n\t\t\t\t<gov-tooltip position="top" size="l">\n\t\t\t\t\tpřípadě vycestování (top)\n\t\t\t\t\t<gov-tooltip-content>\n\t\t\t\t\t\tZnění petice podléhá § 1 odst. 3-4 zákonuč. 85/1990 Sb. Text.\n\t\t\t\t\t</gov-tooltip-content>\n\t\t\t\t</gov-tooltip> států EU platí princip jednoho pojištění. V za prací do států EU byste měli být vždy\n\t\t\t\tpojištěni ve státě, ve kterém pracujete. Pokud pracujete pouze na území jednoho státu, je státem pojištění vždy\n\t\t\t\ttento stát.\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\tV rámci\n\t\t\t\t<gov-tooltip color="neutral" position="bottom" size="l">\n\t\t\t\t\tpřípadě vycestování (bottom)\n\t\t\t\t\t<gov-tooltip-content>\n\t\t\t\t\t\tZnění petice podléhá § 1 odst. 3-4 zákonuč. 85/1990 Sb. Text.\n\t\t\t\t\t</gov-tooltip-content>\n\t\t\t\t</gov-tooltip> států EU platí princip jednoho pojištění. V za prací do států EU byste měli být vždy\n\t\t\t\tpojištěni ve státě, ve kterém pracujete. Pokud pracujete pouze na území jednoho státu, je státem pojištění vždy\n\t\t\t\ttento stát.\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\tV rámci států EU platí princip jednoho pojištění. V za prací do států EU byste měli být vždy\n\t\t\t\t<gov-tooltip inverse color="neutral" position="left" size="l">\n\t\t\t\t\tpřípadě vycestování (left)\n\t\t\t\t\t<gov-tooltip-content>\n\t\t\t\t\t\tZnění petice podléhá § 1 odst. 3-4 zákonuč. 85/1990 Sb. Text.\n\t\t\t\t\t</gov-tooltip-content>\n\t\t\t\t</gov-tooltip> pojištěni ve státě, ve kterém pracujete. Pokud pracujete pouze na území jednoho státu, je státem pojištění vždy\n\t\t\t\ttento stát.\n\t\t\t\t<br /><br /><br /><br /><br />x\n\t\t\t</p>\n\t`}}if(customElements.get("tooltip-page")===undefined){customElements.define("tooltip-page",bo)}class fo extends HTMLElement{connectedCallback(){this.innerHTML=`\n\t\t\t<p>\n\t\t\t\t<a class="gov-text--xs" href="#copy" target="_blank">paragraph with no more than four lines</a><br>\n\t\t\t\t<a class="gov-text--s" href="#copy" target="_blank">paragraph with no more than four lines</a><br>\n\t\t\t\t<a class="gov-text--m" href="#copy" target="_blank">paragraph with no more than four lines</a><br>\n\t\t\t\t<a class="gov-text--l" href="#copy" target="_blank">paragraph with no more than four lines</a><br>\n\t\t\t\t<a class="gov-text--xl" href="#copy" target="_blank">paragraph with no more than four lines</a><br>\n\t\t\t\t<a class="gov-text--2xl" href="#copy" target="_blank">paragraph with no more than four lines</a><br>\n\t\t\t\t<a class="gov-text--3xl" href="#copy" target="_blank">paragraph with no more than four lines</a><br>\n\t\t\t\t<a class="gov-text--4xl" href="#copy" target="_blank">paragraph with no more than four lines</a><br>\n\t\t\t\t<a class="gov-text--5xl" href="#copy" target="_blank">paragraph with no more than four lines</a><br>\n\t\t\t\t<a class="gov-text--6xl" href="#copy" target="_blank">paragraph with no more than four lines</a><br>\n\t\t\t</p>\n\n\t\t\t<ul>\n\t\t\t\t<li>This is commonly used for long paragraphs with more than four lines. This is commonly used for long paragraphs with more than four lines. This is commonly used for long paragraphs with more than four lines</li>\n\t\t\t\t<li>This is commonly used for long paragraphs with more than four lines. This is commonly used for long paragraphs with more than four lines. This is commonly used for long paragraphs with more than four lines</li>\n\t\t\t\t<li>This is commonly used for long paragraphs with more than four lines. This is commonly used for long paragraphs with more than four lines. This is commonly used for long paragraphs with more than four lines</li>\n\t\t\t\t<li>This is commonly used for long paragraphs with more than four lines. This is commonly used for long paragraphs with more than four lines. This is commonly used for long paragraphs with more than four lines</li>\n\t\t\t</ul>\n\t\t\t<ol>\n\t\t\t\t<li>This is commonly used for long paragraphs with more than four lines. This is commonly used for long paragraphs with more than four lines. This is commonly used for long paragraphs with more than four lines</li>\n\t\t\t\t<li>This is commonly used for long paragraphs with more than four lines. This is commonly used for long paragraphs with more than four lines. This is commonly used for long paragraphs with more than four lines</li>\n\t\t\t\t<li>This is commonly used for long paragraphs with more than four lines. This is commonly used for long paragraphs with more than four lines. This is commonly used for long paragraphs with more than four lines</li>\n\t\t\t\t<li>This is commonly used for long paragraphs with more than four lines. This is commonly used for long paragraphs with more than four lines. This is commonly used for long paragraphs with more than four lines</li>\n\t\t\t</ol>\n\n\t\t\t<h6 class="gov-text--6xl">Heading 1 Heading 1 Heading 1</h6>\n\t\t\t<h2>Heading 2 Heading 2 Heading 2</h2>\n\t\t\t<p>\n\t\t\t\tBody 1/400<br />A lead <a href="#copy" target="_blank">paragraph with no more than four lines</a> . Body 1/400 A lead paragraph with no more than four lines. Body 1/400 A lead paragraph with no more than four lines\n\t\t\t</p>\n\t\t\t<h4 class="gov-text--l">Heading 2 Heading 2 Heading 2</h4>\n\t\t\t<h3>Heading 3 Heading 3 Heading 3</h3>\n\t\t\t<p>\n\t\t\t\tBody 2/400<br />This is commonly used for long paragraphs with more than four lines. This is commonly used for long paragraphs with more than four lines. This is commonly used for long paragraphs with more than four lines\n\t\t\t</p>\n\t\t\t<h2>Heading 2 Heading 2 Heading 2</h2>\n\t\t\t<h3>Heading 3 Heading 3 Heading 3</h3>\n\t\t\t<p>\n\t\t\t\tBody 3/400<br />This is for body copy in components such as accordion, structured list or tile. This is for body copy in components such as accordion, structured list or tile.\n\t\t\t</p>\n\t\t\t<h3>Heading 3 Heading 3 Heading 3</h3>\n\t\t\t<h4>Heading 4 Heading 4 Heading 4</h4>\n\t\t\t<p>\n\t\t\t\tBold - Body 1/700<br />A lead paragraph with no more than four lines. Body 1/400 A lead paragraph with no more than four lines. Body 1/400 A lead paragraph with no more than four lines\n\t\t\t</p>\n\t\t\t<h4>Heading 4 Heading 4 Heading 4</h4>\n\t\t\t<h5>Heading 5 Heading 5 Heading 5</h5>\n\t\t\t<p>\n\t\t\t\tBold - Body 2/700<br />This is commonly used for long paragraphs with more than four lines. This is commonly used for long paragraphs with more than four lines. This is commonly used for long paragraphs with more than four lines\n\t\t\t</p>\n\t\t\t<h5>Heading 5 Heading 5 Heading 5</h5>\n\t\t\t<h6>Heading 6 Heading 6 Heading 6</h6>\n\t\t\t<p>\n\t\t\t\tBold - Body 3/700<br />This is for body copy in components such as accordion, structured list or tile. This is for body copy in components such as accordion, structured list or tile.\n\t\t\t</p>\n\t\t\t<h6>Heading 6 Heading 6 Heading 6</h6>\n\t\t\t<p class="text-x-small">\n\t\t\t\tAssistive<br />This is for explanatory helper text that appears below a field\n\t\t\t</p>\n\t\t\t<ul>\n\t\t\t\t<li>seznam položka seznam položka seznam položka<br />seznam položka seznam položka seznam položka</li>\n\t\t\t\t<li>seznam položka seznam položka seznam položka</li>\n\t\t\t\t<li>seznam položka seznam položka seznam položka</li>\n\t\t\t</ul>\n\t\t`}}if(customElements.get("typography-page")===undefined){customElements.define("typography-page",fo)}class ho extends HTMLElement{connectedCallback(){this.innerHTML=`\n            <h2>Wizard</h2>\n\t\t\t<div class="gov-bg--neutral-50" style="padding: 48px">\n\t\t\t\t<gov-wizard size="s">\n\t\t\t\t\t<gov-wizard-item color="success" size="s" collapsible>\n\t\t\t\t\t\t<span slot="prefix"><gov-icon name="check-lg"></gov-icon></span>\n\t\t\t\t\t\t<h3 slot="headline">Font Awesome Icon</h3>\n\t\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t</gov-wizard-item>\n\t\t\t\t\t<gov-wizard-item color="primary" size="s" is-expanded>\n\t\t\t\t\t\t<span slot="prefix">2</span>\n\t\t\t\t\t\t<h3 slot="headline">Kontaktní osoby</h3>\n\t\t\t\t\t\t<p slot="annotation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus.</p>\n\t\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t</gov-wizard-item>\n\t\t\t\t\t<gov-wizard-item color="neutral" size="s" collapsible="false">\n\t\t\t\t\t\t<span slot="prefix">3</span>\n\t\t\t\t\t\t<h3 slot="headline">Působnost v agendách</h3>\n\t\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t</gov-wizard-item>\n\t\t\t\t\t<gov-wizard-item color="error" size="s" collapsible>\n\t\t\t\t\t\t<span slot="prefix">4</span>\n\t\t\t\t\t\t<h3 slot="headline">Zřizované organizace</h3>\n\t\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t</gov-wizard-item>\n\t\t\t\t\t<gov-wizard-item color="warning" size="s" is-expanded>\n\t\t\t\t\t\t<span slot="prefix">5</span>\n\t\t\t\t\t\t<h3 slot="headline">Zřizované organizace</h3>\n\t\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t</gov-wizard-item>\n\t\t\t\t</gov-wizard>\n\n\t\t\t\t<br><br>\n\n\t\t\t\t<gov-wizard size="m"">\n\t\t\t\t\t<gov-wizard-item color="success" size="s" collapsible>\n\t\t\t\t\t\t<gov-icon slot="prefix" name="check-lg"></gov-icon>\n\t\t\t\t\t\t<h3 slot="headline">Font Awesome Icon</h3>\n\t\t\t\t\t\t<span slot="annotation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus.</span>\n\t\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t</gov-wizard-item>\n\t\t\t\t\t<gov-wizard-item color="primary" size="s" is-expanded>\n\t\t\t\t\t\t<span slot="prefix">2</span>\n\t\t\t\t\t\t<h3 slot="headline">Kontaktní osoby</h3>\n\t\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t</gov-wizard-item>\n\t\t\t\t\t<gov-wizard-item color="neutral" size="s">\n\t\t\t\t\t\t<span slot="prefix">3</span>\n\t\t\t\t\t\t<h3 slot="headline">Působnost v agendách</h3>\n\t\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t</gov-wizard-item>\n\t\t\t\t\t<gov-wizard-item color="error" size="s">\n\t\t\t\t\t\t<span slot="prefix">4</span>\n\t\t\t\t\t\t<h3 slot="headline">Zřizované organizace</h3>\n\t\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t</gov-wizard-item>\n\t\t\t\t\t<gov-wizard-item color="warning" size="s">\n\t\t\t\t\t\t<span slot="prefix">5</span>\n\t\t\t\t\t\t<h3 slot="headline">Zřizované organizace</h3>\n\t\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t</gov-wizard-item>\n\t\t\t\t</gov-wizard>\n\t\t\t\t<br><br>\n\n\t\t\t\t<gov-wizard size="l">\n\t\t\t\t\t<gov-wizard-item color="success" size="s" collapsible>\n\t\t\t\t\t\t<gov-icon slot="prefix" name="check-lg"></gov-icon>\n\t\t\t\t\t\t<h3 slot="headline">Font Awesome Icon</h3>\n\t\t\t\t\t\t<span slot="annotation">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus.</span>\n\t\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t</gov-wizard-item>\n\t\t\t\t\t<gov-wizard-item color="primary" size="s" is-expanded>\n\t\t\t\t\t\t<span slot="prefix">2</span>\n\t\t\t\t\t\t<h3 slot="headline">Kontaktní osoby</h3>\n\t\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t</gov-wizard-item>\n\t\t\t\t\t<gov-wizard-item color="neutral" size="s">\n\t\t\t\t\t\t<span slot="prefix">3</span>\n\t\t\t\t\t\t<h3 slot="headline">Působnost v agendách</h3>\n\t\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t</gov-wizard-item>\n\t\t\t\t\t<gov-wizard-item color="error" size="s">\n\t\t\t\t\t\t<span slot="prefix">4</span>\n\t\t\t\t\t\t<h3 slot="headline">Zřizované organizace</h3>\n\t\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t</gov-wizard-item>\n\t\t\t\t\t<gov-wizard-item color="warning" size="s">\n\t\t\t\t\t\t<span slot="prefix">5</span>\n\t\t\t\t\t\t<h3 slot="headline">Zřizované organizace</h3>\n\t\t\t\t\t\t<p>Opět věc a stylování obsahu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula sollicitudin risus, quis tempor metus imperdiet vitae. Duis in blandit lacus.</p>\n\t\t\t\t\t</gov-wizard-item>\n\t\t\t\t</gov-wizard>\n\t\t\t</div>\n\t\t`}}if(customElements.get("wizard-page")===undefined){customElements.define("wizard-page",ho)}class yo extends HTMLElement{connectedCallback(){this.innerHTML=`\n\t\t\t<h1>Icons</h1>\n\t\t\t<h4>Colors</h4>\n\t\t\t<gov-icon name="star-fill" color="default"></gov-icon> default<br/>\n\t\t\t<gov-icon name="star-fill" color="primary"></gov-icon> primary<br/>\n\t\t\t<gov-icon name="star-fill" color="secondary"></gov-icon> secondary<br/>\n\t\t\t<gov-icon name="star-fill" color="neutral"></gov-icon> neutral<br/>\n\t\t\t<gov-icon name="star-fill" color="error"></gov-icon> error<br/>\n\t\t\t<gov-icon name="star-fill" color="success"></gov-icon> success<br/>\n\t\t\t<gov-icon name="star-fill" color="warning"></gov-icon> warning<br/>\n\t\t\t<gov-icon name="star-fill" color="disabled"></gov-icon> disabled<br/>\n\t\t\t<gov-icon name="star-fill" color="white"></gov-icon> white<br/>\n\t\t\t<gov-icon name="star-fill" color="black"></gov-icon> black<br/>\n\t\t`}}if(customElements.get("icon-page")===undefined){customElements.define("icon-page",yo)}const zo=".gov-spin-animation,.gov-pseudo-spin-animation::before{animation:spin 4s linear infinite}@keyframes spin{100%{transform:rotate(360deg)}}@keyframes countdown{to{transform:scaleX(0)}}@keyframes progress{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}@keyframes pulse{0%{opacity:1}50%{opacity:0.4}100%{opacity:1}}html,body{margin:0;padding:0}.container-view{padding:12px}hr{height:0;border:0 none;border-top:1px solid gainsboro;font-size:0}hr.inversed{border-top-color:#254e80}";const ko=zo;const xo=t(class t extends o{constructor(){super();this.__registerHost()}componentWillLoad(){const t=document.getElementById("outlet");t.innerHTML="";const o=new Vt(t,{baseUrl:"/playground/"});o.setRoutes([{path:"/",component:"home-page"},{path:"/infobar",component:"infobar-page"},{path:"/accordion",component:"accordion-page"},{path:"/chip",component:"chip-page"},{path:"/button",component:"button-page"},{path:"/breadcrumbs",component:"breadcrumbs-page"},{path:"/card",component:"card-page"},{path:"/message",component:"message-page"},{path:"/cookiebar",component:"cookiebar-page"},{path:"/container",component:"container-page"},{path:"/control-group",component:"control-group-page"},{path:"/empty",component:"empty-page"},{path:"/error",component:"error-page"},{path:"/forms",component:"forms-page"},{path:"/forms-restructure",component:"forms-restructure-page"},{path:"/form-message",component:"form-message-page"},{path:"/form-label",component:"form-label-page"},{path:"/grid",component:"grid-page"},{path:"/loading",component:"loading-page"},{path:"/dialog",component:"dialog-page"},{path:"/spacer",component:"spacer-page"},{path:"/stepper",component:"stepper-page"},{path:"/tabs",component:"tabs-page"},{path:"/tag",component:"tag-page"},{path:"/tooltip",component:"tooltip-page"},{path:"/tiles",component:"tiles-page"},{path:"/typography",component:"typography-page"},{path:"/toast-message",component:"toast-message-page"},{path:"/toast-message-countdown",component:"toast-message-countdown-page"},{path:"/pagination",component:"pagination-page"},{path:"/wizard",component:"wizard-page"},{path:"/grid",component:"grid-page"},{path:"/layout",component:"layout-page"},{path:"/icon",component:"icon-page"}])}render(){return n(e,{key:"3aeff0ad83f2c4589fb87c72e284e564d5b3939a"})}static get style(){return ko}},[0,"gov-app"]);function wo(){if(typeof customElements==="undefined"){return}const t=["gov-app"];t.forEach((t=>{switch(t){case"gov-app":if(!customElements.get(t)){customElements.define(t,xo)}break}}))}wo();const Po=xo;const Vo=wo;export{Po as GovApp,Vo as defineCustomElement};
-//# sourceMappingURL=gov-app.js.map