@newlogic-digital/ui 3.5.0 → 3.7.5

package/src/templates/Layout/Header.latte

@@ -1,39 +1,37 @@
-<header id="l-header" class="{if $headerNormal}is-l-header-normal{/if}" data-controller="l-header">
-    <div class="l_header_body flex flex-row">
-        <div class="col">
-            <a href="/" class="l_header_logo" title="Newlogic UI">
-                <svg class="w-auto h-6" fill="currentColor" viewBox="0 0 194 32">
-                    <path d="M121.152 0a2.813 2.813 0 0 0-2.805 2.626l.001.009a2.81 2.81 0 0 0 5.608-.009v-.008A2.81 2.81 0 0 0 121.151 0ZM70.216.103V25.34h4.628V.103Zm95.062 1.751v13.152c0 6.505 4.044 10.9 10.162 10.9 5.978 0 9.952-4.395 9.952-10.9V1.854h-3.763v13.152c0 4.395-2.496 7.279-6.189 7.279-3.868 0-6.4-2.884-6.4-7.28V1.856Zm24.077 0v23.56h3.763V1.855ZM0 1.854V25.34h4.767V10.268L17.773 25.34h3.996V1.854H17v15.494L3.996 1.854H0Zm105.945 5.448a8.498 8.498 0 0 0-.503 16.98h-.024.025a8.382 8.382 0 0 0 5.503-1.606v.28l-.001-.016a4.528 4.528 0 0 1-4.873 4.889h.011a5.358 5.358 0 0 1-4.778-2.524l-3.746 2.84c1.508 2.418 4.45 3.855 8.517 3.855 5.645 0 9.36-2.979 9.36-8.342l-.04-15.809h-4.45v1.08a8.46 8.46 0 0 0-5-1.627zm-73.61.011a9.28 9.28 0 1 0 .335 18.553l-.023-.001c.162.009.325.013.489.013 3.609 0 6.701-2.21 8.018-5.41l-4.138-.876-.011.023a4.467 4.467 0 0 1-4.335 2.29h-.007a4.532 4.532 0 0 1-4.373-4.066h13.32l-.002-1.576v-.017a9.28 9.28 0 0 0-9.273-8.933zm102.628.01-.137.002h.006-.117a9.273 9.273 0 1 0 .112 18.543h-.015c.097.003.195.005.292.005 4.059 0 7.473-2.757 8.486-6.562l-4.282-1.086-.006.03a4.447 4.447 0 0 1-4.475 3.371h-.01a5.033 5.033 0 0 1 .21-10.064 4.18 4.18 0 0 1 4.113 3.475l4.451-1.262-.016-.064a8.998 8.998 0 0 0-8.611-6.387zm-48.503.099c-.116 0-.231.002-.33.006h-.053a9.487 9.487 0 1 0 9.482 9.184v-.09a9.1 9.1 0 0 0-9.1-9.1zm-44.884.422 5.818 17.53h4.172l3.47-10.304 3.435 10.305h4.17l5.823-17.527h-4.59l-3.47 10.797-3.577-10.797h-3.613L49.64 18.61 46.167 7.844h-4.591zm77.265.01V25.34l4.628.005V7.853Zm-12.871 3.352c.099 0 .197.004.282.009l.121-.002a4.577 4.577 0 0 1 4.577 4.559l-.001-.002v.001a4.577 4.577 0 0 1-4.697 4.558 4.566 4.566 0 1 1-.282-9.123zm-73.075.147c1.95 0 3.578 1.37 3.982 3.226h-8.443l.008-.03a4.39 4.39 0 0 1 4.299-3.193h-.008l.162-.003zm53.184.48a5.002 5.002 0 0 1 4.994 4.779h-.001a5.046 5.046 0 0 1-4.94 5.219h-.053a5 5 0 0 1 0-9.999zm64.47 6.02-.066.001a3.945 3.945 0 1 0 3.945 3.965l.001-.085a3.88 3.88 0 0 0-3.88-3.88zm-.056.908a3.088 3.088 0 0 1 3.087 3.058v.039c0 1.7-1.378 3.078-3.078 3.078h-.02a3.087 3.087 0 0 1 .01-6.175zm-1.475 1.147v3.589h.907v-1.104h.494l.907 1.104h1.071l-1.006-1.204h-.001l.009-.003c.477-.17.82-.626.82-1.162v-.016c0-.71-.552-1.204-1.46-1.204h-1.74zm.92.77h.802c.374 0 .612.159.612.453 0 .295-.237.493-.612.493h-.803z"/>
+<header class="l-header flex-center" data-controller="l-header">
+    <a href="/" class="mr-12" title="Newlogic UI" data-l-header-target="logo" data-part="logo">
+        <svg class="w-auto h-6" fill="currentColor" viewBox="0 0 194 32">
+            <path d="M121.152 0a2.813 2.813 0 0 0-2.805 2.626l.001.009a2.81 2.81 0 0 0 5.608-.009v-.008A2.81 2.81 0 0 0 121.151 0ZM70.216.103V25.34h4.628V.103Zm95.062 1.751v13.152c0 6.505 4.044 10.9 10.162 10.9 5.978 0 9.952-4.395 9.952-10.9V1.854h-3.763v13.152c0 4.395-2.496 7.279-6.189 7.279-3.868 0-6.4-2.884-6.4-7.28V1.856Zm24.077 0v23.56h3.763V1.855ZM0 1.854V25.34h4.767V10.268L17.773 25.34h3.996V1.854H17v15.494L3.996 1.854H0Zm105.945 5.448a8.498 8.498 0 0 0-.503 16.98h-.024.025a8.382 8.382 0 0 0 5.503-1.606v.28l-.001-.016a4.528 4.528 0 0 1-4.873 4.889h.011a5.358 5.358 0 0 1-4.778-2.524l-3.746 2.84c1.508 2.418 4.45 3.855 8.517 3.855 5.645 0 9.36-2.979 9.36-8.342l-.04-15.809h-4.45v1.08a8.46 8.46 0 0 0-5-1.627zm-73.61.011a9.28 9.28 0 1 0 .335 18.553l-.023-.001c.162.009.325.013.489.013 3.609 0 6.701-2.21 8.018-5.41l-4.138-.876-.011.023a4.467 4.467 0 0 1-4.335 2.29h-.007a4.532 4.532 0 0 1-4.373-4.066h13.32l-.002-1.576v-.017a9.28 9.28 0 0 0-9.273-8.933zm102.628.01-.137.002h.006-.117a9.273 9.273 0 1 0 .112 18.543h-.015c.097.003.195.005.292.005 4.059 0 7.473-2.757 8.486-6.562l-4.282-1.086-.006.03a4.447 4.447 0 0 1-4.475 3.371h-.01a5.033 5.033 0 0 1 .21-10.064 4.18 4.18 0 0 1 4.113 3.475l4.451-1.262-.016-.064a8.998 8.998 0 0 0-8.611-6.387zm-48.503.099c-.116 0-.231.002-.33.006h-.053a9.487 9.487 0 1 0 9.482 9.184v-.09a9.1 9.1 0 0 0-9.1-9.1zm-44.884.422 5.818 17.53h4.172l3.47-10.304 3.435 10.305h4.17l5.823-17.527h-4.59l-3.47 10.797-3.577-10.797h-3.613L49.64 18.61 46.167 7.844h-4.591zm77.265.01V25.34l4.628.005V7.853Zm-12.871 3.352c.099 0 .197.004.282.009l.121-.002a4.577 4.577 0 0 1 4.577 4.559l-.001-.002v.001a4.577 4.577 0 0 1-4.697 4.558 4.566 4.566 0 1 1-.282-9.123zm-73.075.147c1.95 0 3.578 1.37 3.982 3.226h-8.443l.008-.03a4.39 4.39 0 0 1 4.299-3.193h-.008l.162-.003zm53.184.48a5.002 5.002 0 0 1 4.994 4.779h-.001a5.046 5.046 0 0 1-4.94 5.219h-.053a5 5 0 0 1 0-9.999zm64.47 6.02-.066.001a3.945 3.945 0 1 0 3.945 3.965l.001-.085a3.88 3.88 0 0 0-3.88-3.88zm-.056.908a3.088 3.088 0 0 1 3.087 3.058v.039c0 1.7-1.378 3.078-3.078 3.078h-.02a3.087 3.087 0 0 1 .01-6.175zm-1.475 1.147v3.589h.907v-1.104h.494l.907 1.104h1.071l-1.006-1.204h-.001l.009-.003c.477-.17.82-.626.82-1.162v-.016c0-.71-.552-1.204-1.46-1.204h-1.74zm.92.77h.802c.374 0 .612.159.612.453 0 .295-.237.493-.612.493h-.803z"/>
+        </svg>
+    </a>
+    <div class="flex-col ml-auto md:hidden">
+        <button
+            class="l_header_menu"
+            aria-label="Menu"
+            data-action="click->controller#delegate"
+            data-controller-name-param="c-drawer"
+            data-controller-action-param="toggle"
+        >
+            <svg class="size-6"><use href="#icon-bars-3"></use></svg>
+        </button>
+    </div>
+    <nav class="flex-center gap-8 max-md:[.l-header_&]:hidden" data-l-header-target="nav" data-part="nav">
+        <a href="{$page->url}" title="{$page->name}" class="ui-link" n:foreach="$layout->nav as $page">{$page->name}</a>
+    </nav>
+    <div class="flex max-md:hidden items-center gap-x-6 ml-auto">
+        <div class="flex-col">
+            <button class="ui-btn square ghosted accent-light" data-action="utils#darkMode">
+                <svg class="icon-moon dark:hidden">
+                    <use href="#icon-moon"></use>
+                </svg>
+                <svg class="icon-sun hidden dark:block">
+                    <use href="#icon-sun"></use>
                 </svg>
-            </a>
-        </div>
-        <div class="col ml-auto md:hidden">
-            <button class="l_header_menu" data-action="click->l-header#showDrawer" aria-label="Menu">
-                <svg class="icon"><use href="#icon-menu"></use></svg>
             </button>
         </div>
-        <div class="col max-md:hidden">
-            <nav class="l_header_nav flex">
-                <div class="col" n:foreach="$layout->nav as $page">
-                    <a href="{$page->url}" title="{$page->name}" class="ui-link after:content-none">{$page->name}</a>
-                </div>
-            </nav>
-        </div>
-        <div class="col max-md:hidden flex-row items-center gap-x-6 ml-auto">
-            <div class="col">
-                <button class="ui-btn square ghosted accent-light" data-action="click->lib#darkMode">
-                    <svg class="icon-moon dark:hidden">
-                        <use href="#icon-moon"></use>
-                    </svg>
-                    <svg class="icon-sun hidden dark:block">
-                        <use href="#icon-sun"></use>
-                    </svg>
-                </button>
-            </div>
-            <div class="col">
-                <div class="l_header_cta">
-                    <a href="https://www.newlogic.cz" title="newlogic.cz" class="ui-btn accent-light" target="_blank" rel="noopener"><span>Newlogic.cz</span></a>
-                </div>
+        <div class="flex-col">
+            <div class="l_header_cta">
+                <a href="https://www.newlogic.cz" title="newlogic.cz" class="ui-btn accent-light" target="_blank" rel="noopener"><span>Newlogic.cz</span></a>
             </div>
         </div>
     </div>

package/src/templates/Layout/Main.latte

@@ -1,62 +1,73 @@
 <!DOCTYPE html>
-<html class="no-js sw" lang="en">
+<html class="no-js" lang="en">
     <head>
         <meta charset="utf-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <title>{$page->title}</title>
 
         <meta name="keywords" content="">
         <meta name="description" content="">
         <meta name="author" content="">
-        <meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1, viewport-fit=cover"/>
-        <meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
         <meta name="format-detection" content="telephone=no">
         <meta name="mobile-web-app-capable" content="yes">
         <meta name="apple-mobile-web-app-title" content="{$page->title}">
         <meta name="apple-mobile-web-app-capable" content="yes">
+        <meta name="theme-color" content="#ffffff">
 
-        {foreach $prefetch as $url}
-            <link rel="dns-prefetch" href="{$url}">
-        {/foreach}
+        {if isset($prefetch)}
+            {foreach $prefetch as $url}
+                <link rel="preconnect" href="{$url}" crossorigin>
+                <link rel="dns-prefetch" href="{$url}">
+            {/foreach}
+        {/if}
+
+        {if isset($preload)}
+            {foreach $preload as $url}
+                <link
+                    {if isset($url->rel)}rel="{$url->rel}"{else}rel="preload"{/if}
+                    href="{$url->href|asset}"
+                    {if isset($url->as)}as="{$url->as}"{/if}
+                    {if isset($url->type)}type="{$url->type}"{/if}
+                    {if isset($url->crossorigin)}crossorigin{/if}
+                >
+            {/foreach}
+        {/if}
 
         {foreach $assets->css->all as $url}
             <link rel="stylesheet" href="{$url|asset}">
         {/foreach}
 
+        {if isset($modulepreload)}
+            {foreach $modulepreload as $url}
+                <link rel="modulepreload" href="{$url|asset}">
+            {/foreach}
+        {/if}
+
         <script>
             (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) && document.documentElement.classList.add('dark')
-            document.documentElement.className = document.documentElement.className.replace('no-js', 'js');matchMedia('(hover: hover) and (pointer: fine)').matches && document.documentElement.classList.add('no-touch');/Android|iPhone|iPad|iPod/i.test(navigator.userAgent) && document.documentElement.classList.add('mobile');(p => document.documentElement.classList.add(p.includes('macintel') && navigator.maxTouchPoints > 2 ? 'ipad' : p))(navigator.platform.toLowerCase().replace(/ .*/, ''));(u => document.documentElement.classList.add(u && u[0]))(navigator.userAgent.toLowerCase().match(/chrome|safari|firefox/i))
+            document.documentElement.classList.remove('no-js')
         </script>
 
         <script src="{$assets->js->main|asset}" type="module"></script>
 
-        <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png?v=YAX2K07XnE">
-        <link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png?v=YAX2K07XnE">
-        <link rel="icon" type="image/png" sizes="192x192" href="/favicons/android-chrome-192x192.png?v=YAX2K07XnE">
-        <link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png?v=YAX2K07XnE">
-        <link rel="manifest" href="/favicons/site.webmanifest?v=YAX2K07XnE">
-        <link rel="mask-icon" href="/favicons/safari-pinned-tab.svg?v=YAX2K07XnE" color="#84ce4e">
-        <link rel="shortcut icon" href="/favicons/favicon.ico?v=YAX2K07XnE">
-        <meta name="apple-mobile-web-app-title" content="Newlogic UI">
-        <meta name="application-name" content="Newlogic UI">
-        <meta name="msapplication-TileColor" content="#84ce4e">
-        <meta name="msapplication-config" content="/favicons/browserconfig.xml?v=YAX2K07XnE">
-        <meta name="theme-color" content="#ffffff">
+        <link rel="icon" type="image/svg+xml" href="/favicons/favicon.svg">
+        <link rel="apple-touch-icon" type="image/webp" href="/favicons/favicon-512.webp">
+        <link rel="manifest" href="/favicons/manifest.webmanifest">
     </head>
 
-    <body data-controller="lib lib-dialog lib-ripple lib-fetch">
-        <div class="l-default">
-            {include '../Layout/Header.latte'}
-            <main id="l-main" class="transition-fade">
+    <body data-controller="controller utils lib-dialog lib-ripple lib-reveal lib-toaster">
+        {include '../Layout/Header.latte'}
+            <main class="l-main swup-transition">
                 {include '../Utils/sections.latte', sections => $page->body}
             </main>
-            {include '../Layout/Footer.latte'}
-        </div>
+        {include '../Layout/Footer.latte'}
 
         {if $layout->cookies}
-            {include '../Components/CookieConsent.latte'}
+            {include '../Components/Dialog/CookieConsent.latte'}
         {/if}
 
-        {fetch('/src/icons.svg')|noescape}
+        {if true} {* load only on first load in production *}
+            {fetch('/src/icons.svg')|noescape}
+        {/if}
     </body>
 </html>

package/src/templates/Sections/CookieConsent.latte

@@ -0,0 +1,69 @@
+<div class="s-text py-16 md:py-28 grid-cols-container gap-8">
+    <h2 class="ui-heading">Zásady používání cookies</h2>
+    <div class="ui-text">
+        <p style="text-align: left;">Tyto webové stránky používají k poskytování služeb, personalizaci
+            reklam a analýze návštěvnosti soubory cookies. Pokud nepovolíte využití reklamních cookies, web
+            bude používat pouze cookies nezbytné k tomu, abyste se mohli pohybovat po webu a používat jeho
+            funkce. Zásady ukládání cookies na váš počítač si můžete kdykoliv vypnout nebo upravit na konci
+            této stránky.</p>
+        <p></p>
+        <p></p><h4 style="text-align: left;">Cookies nutné pro funkčnost stránek</h4>
+        <p style="text-align: left;">Tyto cookies jsou nezbytné k tomu, abyste se mohli pohybovat po webu a
+            používat jeho funkce. Jsou aktivovány v okamžiku, kdy uživatel vstoupí na stránku. Některé části
+            webových stránek nemusí správně fungovat, pokud tyto soubory cookie nejsou uloženy.</p>
+        <p></p>
+        <table style="border-collapse: collapse; width: 100%; height: 96px;" border="1">
+            <tbody>
+            <tr style="height: 24px;">
+                <td style="width: 46.4115%; height: 24px;">Cookie</td>
+                <td style="width: 46.4115%; height: 24px;">PHPSSID</td>
+            </tr>
+            <tr style="height: 24px;">
+                <td style="width: 46.4115%; height: 24px;">Autor</td>
+                <td style="width: 46.4115%; height: 24px;"><a
+                            href="http://www.newlogic.cz">www.newlogic.cz</a></td>
+            </tr>
+            <tr style="height: 24px;">
+                <td style="width: 46.4115%; height: 24px;">Účel</td>
+                <td style="width: 46.4115%; height: 24px;">Tyto soubory cookies mohou být použity pro
+                    sledování aktuální relace uživatele. Součástí těchto údajů je i IP adresa uživatele,
+                    která je použita jako jedna z komponent pro hash generovaný frameworkem. Vlastník
+                    stránek IP adresu samostatně neukládá a z hashe ji nelze zpětně rekonstruovat.
+                </td>
+            </tr>
+            <tr style="height: 24px;">
+                <td style="width: 46.4115%; height: 24px;">Platnost</td>
+                <td style="width: 46.4115%; height: 24px;">1 den</td>
+            </tr>
+            </tbody>
+        </table>
+        <p></p>
+        <p></p><h4 style="text-align: left;">Cookies užívané k měření návštěvnosti stránek</h4>
+        <p style="text-align: left;">Tyto cookies slouží k měření počtu návštěv stránek. Jedná se o nástroje
+            služby Google Analytics.</p>
+        <p></p>
+        <table style="border-collapse: collapse; width: 100%;" border="1">
+            <tbody>
+            <tr>
+                <td style="width: 46.4689%;">Cookie</td>
+                <td style="width: 46.4689%;">utma, utmb, utmc, utmt, utmz</td>
+            </tr>
+            <tr>
+                <td style="width: 46.4689%;">Autor</td>
+                <td style="width: 46.4689%;"><a
+                            href="https://developers.google.com/analytics/devguides/collection/analyticsjs/cookie-usage">Google
+                        Analytics</a></td>
+            </tr>
+            <tr>
+                <td style="width: 46.4689%;">Účel</td>
+                <td style="width: 46.4689%;">Google Analytics měřící kódy</td>
+            </tr>
+            <tr>
+                <td style="width: 46.4689%;">Platnost</td>
+                <td style="width: 46.4689%;">Do ukončení uživatelské relace.</td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+    {include '../Components/Form/CookieConsent.latte'}
+</div>

package/src/templates/Sections/Site.latte

@@ -1,7 +1,79 @@
 {import TEMPLATES_DIR . 'Ui/+.latte'}
 
-<div class="py-section">
-    <form class="container flex flex-col gap-4" data-controller="lib-form">
+<div class="py-section" data-controller="lib-reveal">
+    <div class="py-12 grid-cols-container">
+        <div class="w-full flex-col gap-4">
+            <div class="c-popover focus w-max">
+                <div class="c-tooltip focus bottom" aria-label="I am tooltip">
+                    <div role="button" class="ui-btn" tabindex="0">Popover</div>
+                </div>
+                <div class="c-popover-content shadow mt-2.5 p-2 w-32 flex-col">
+                    <div class="c-tooltip right" aria-label="I am tooltip">
+                        <button class="ui-btn ghosted accent-main justify-start w-full">Item 1</button>
+                    </div>
+                    <div class="c-popover hover">
+                        <button class="ui-btn ghosted accent-main justify-start w-full">Item 2</button>
+                        <div class="c-popover-content right shadow ml-4 p-2 w-32 flex-col">
+                            <div class="c-tooltip right" aria-label="I am tooltip">
+                                <button class="ui-btn ghosted accent-main justify-start w-full">Item 1</button>
+                            </div>
+                            <button class="ui-btn ghosted accent-main justify-start">Item 2</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="c-tooltip focus bottom w-max" aria-label="I am tooltip">
+                <div role="button" class="ui-btn" tabindex="0">Popover</div>
+            </div>
+            <div class="c-popover mt-12" data-controller="c-popover">
+                <button
+                    class="ui-btn"
+                    role="button"
+                    data-c-popover-placement-param="bottom-end"
+                    popovertargetaction="toggle"
+                    popovertarget="popover"
+                >Popover</button>
+                <div class="c-popover-content shadow h-48" id="popover" popover="manual">
+                    <input type="text" autofocus>
+                    <button type="button" data-action="c-popover#hide">x</button>
+                </div>
+            </div>
+            <div
+                class="c-popover mt-12"
+                data-controller="c-popover"
+                data-c-popover-url-value="/popover/info.json"
+                data-c-popover-insert-to-value="body"
+                id="popoverAction"
+            >
+                <button
+                    class="ui-btn"
+                    role="button"
+                    popovertargetaction="toggle"
+                    popovertarget="popover2"
+                >Popover</button>
+            </div>
+        </div>
+    </div>
+    <div class="[--test:theme(spacing[1.5])]"></div>
+    <svg>
+        <use href="#icon-x-mark"></use>
+    </svg>
+    <svg>
+        <use href="#icon-angle-down-solid"></use>
+    </svg>
+    <form class="grid grid-cols-3 gap-2" data-controller="lib-naja" data-lib-recaptcha-api-value="6Ldvm2scAAAAAL3GHSR6zJb8ilfCdFfNe9dh8pn9" data-action="submit->lib-recaptcha#execute:prevent" data-naja action="/">
+        <div class="ui-control">
+            <input required name="given-name">
+        </div>
+        <div class="ui-control">
+            <input required name="surname">
+        </div>
+        <input type="hidden" name="gtoken" autocomplete="off">
+        <button class="ui-btn" type="button" data-action="utils#submit">
+            Odeslat
+        </button>
+    </form>
+    <form class="container flex flex-col gap-4" data-lib-reveal-target="item" data-controller-name-param="lib-form">
         <div class="grid grid-cols-3 gap-md">
             <div class="c-field">
                 {embed UiControl}
@@ -46,8 +118,8 @@
             <div class="c-field">
                 {embed UiControl}
                     <input n:block=body type="number" min="0" step="1" max="99" required>
-                    <div n:block=iconr class="icon-r">
-                        <div aria-label="Kč"></div>
+                    <div n:block=iconr class="ms-auto">
+                        <div>Kč</div>
                     </div>
                 {/embed}
             </div>
@@ -113,16 +185,16 @@
     <div class="container my-8" data-controller="lib-slider">
         <div class="slider gap-4" data-lib-slider-target="slider">
             <div class="ui-image w-[30rem] h-auto rounded-md overflow-hidden aspect-[8/5]">
-                <img src="{placeholder(1200, 750)}" alt="" loading="lazy" />
+                <img src="{placeholder(1200, 750)}" alt="" loading="lazy">
             </div>
             <div class="ui-image w-[30rem] h-auto rounded-md overflow-hidden aspect-[8/5]">
-                <img src="{placeholder(1200, 750)}" alt="" loading="lazy" />
+                <img src="{placeholder(1200, 750)}" alt="" loading="lazy">
             </div>
             <div class="ui-image w-[30rem] h-auto rounded-md overflow-hidden aspect-[8/5]">
-                <img src="{placeholder(1200, 750)}" alt="" loading="lazy" />
+                <img src="{placeholder(1200, 750)}" alt="" loading="lazy">
             </div>
             <div class="ui-image w-[30rem] h-auto rounded-md overflow-hidden aspect-[8/5]">
-                <img src="{placeholder(1200, 750)}" alt="" loading="lazy" />
+                <img src="{placeholder(1200, 750)}" alt="" loading="lazy">
             </div>
         </div>
         <div class="dots flex gap-1.5 h-4 py-4" data-lib-slider-target="dots"></div>

package/src/templates/Sections/Text.latte

@@ -0,0 +1,64 @@
+<div class="s-text py-12 grid-cols-container gap-8">
+    <h1 class="ui-heading">Zásady ochrany osobních údajů</h1>
+    <div class="ui-text">
+        <p><strong>Správce osobních údajů a subjekt údajů</strong></p>
+        <p>Správcem osobních údajů je společnost provozující tento web, rezervační službu.</p>
+        <p>Subjektem údajů je fyzická osoba, která správci poskytla svoje osobní údaje na základě nájemní smlouvy, kupní
+            smlouvy, servisní smlouvy či jiné smlouvy uzavřené se správcem nebo na základě souhlasu se zpracováním
+            osobních údajů v rámci přihlášení k&nbsp;odběru novinek (newsletterů) zasílaných správcem. Subjektem údajů
+            může být též fyzická osoba, jejíž osobní údaje správce získal z&nbsp;jiných zákonných zdrojů.</p>
+        <p>&nbsp;</p>
+        <p><strong>Rozsah zpracování osobních údajů</strong></p>
+        <p>Správce zpracovává osobní údaje v&nbsp;rozsahu, v&nbsp;jakém jsou mu poskytnuty subjekty údajů, nebo v&nbsp;jakém
+            rozsahu je správce získá z&nbsp;jiných zákonných zdrojů. Jedná se o: jméno, příjmení, datum narození,
+            bydliště, místo podnikání, identifikační číslo, číslo platební karty daňové identifikační číslo, e-mail,
+            telefon, podpis.</p>
+        <p>&nbsp;</p>
+        <p><strong>Účel zpracování osobních údajů, souhlas obecný</strong></p>
+        <p>Správce zpracovává osobní údaje subjektů údajů za účelem splnění smlouvy uzavřené mezi subjektem údajů a
+            správcem a to formou elektronických komunikačních prostředků na dálku, nebo písemnou formou, plnění právních
+            povinností a za účelem přímého marketingu (tj. nabízení produktů a služeb správce) včetně zasílání
+            obchodních sdělení ve smyslu zákona č. 480/2004 Sb., o některých službách informační společnosti. Obchodní
+            sdělení správce zasílá pouze v případě, že se subjekt údajů přihlásil k odběru novinek (newsletterů) a
+            vyslovil druhý souhlas se zpracováním osobních údjaů pro marketingové účely.</p>
+        <p>&nbsp;</p>
+        <p><strong>Účel zpracování osobních údajů, souhlas pro marketingové účely</strong></p>
+        <p>Správce zpracovává osobní údaje subjektů údajů za účelem splnění smlouvy uzavřené mezi subjektem údajů a
+            správcem a to formou elektronických komunikačních prostředků na dálku, nebo písemnou formou, plnění právních
+            povinností a za účelem přímého marketing, nabídek, informací o hotelu a jeho aktivitách. Sbjekt údajů má
+            možnost se jednoduchým způsobem a zdarma z odběru novinek (newsletterů) odhlásit.</p>
+        <p>&nbsp;</p>
+        <p><strong>Posouzení nezbytnosti zpracování</strong></p>
+        <p>Správce dbá na ochranu soukromí subjektů údajů, a proto zpracovává pouze osobní údaje, které jsou nezbytně
+            nutné pro stanovené účely zpracování.</p>
+        <p>&nbsp;</p>
+        <p><strong>Právní základ zpracování osobních údajů</strong></p>
+        <p>Právním základem zpracování prováděného za účelem přímého marketingu je souhlas subjektů údajů se zpracováním
+            osobních údajů (přihlášení k odběru newsletterů) nebo oprávněný zájem správce (získání elektronického
+            kontaktu v souvislosti s prodejem výrobku nebo služby správce dle zák. č. 480/2004 Sb.).</p>
+        <p>V ostatních případech je právním základem zpracování splnění smlouvy, ochrana oprávněných zájmů správce
+            (ochrana majetku, uplatnění práv ze smlouvy v soudním řízení apod.) a splnění právní povinnosti.</p>
+        <p>&nbsp;</p>
+        <p><strong>Doba zpracovávání osobních údajů</strong></p>
+        <p>V&nbsp;případě osobních údajů zpracovávaných za účelem splnění smlouvy správce zpracovává osobní údaje po
+            dobu trvání smluvního vztahu a následně po dobu dalších 10 let, a to s&nbsp;ohledem na délku promlčecí lhůty
+            u náhrady škody či újmy. V&nbsp;případě zpracování za účelem splnění právní povinnosti správce zpracovává
+            osobní údaje po dobu stanovenou právními předpisy. V&nbsp;případě osobních údajů zpracovávaných na základě
+            souhlasu subjektu údajů správce zpracovává osobní údaje po dobu 10 let, nebude-li souhlas se zpracováním
+            osobních údajů do té doby odvolán. Tím není dotčena povinnost správce zpracovávat osobní údaje po dobu
+            stanovenou příslušnými právními předpisy či v souladu s nimi.</p>
+        <p>&nbsp;</p>
+        <p><strong>Odvolání souhlasu se zpracováním osobních údajů</strong></p>
+        <p>Jestliže subjekt údajů udělil správci souhlas se zpracováním osobních údajů, může svůj dobrovolně udělený
+            souhlas se zpracováním osobních údajů kdykoli bezplatně odvolat. Odvoláním souhlasu není dotčena zákonnost
+            zpracování vycházejícího ze souhlasu, který byl dán před jeho odvoláním. Odvolání souhlasu též nemá vliv na
+            zpracování osobních údajů, které správce zpracovává na základě jiného právního základu, než je souhlas (tj.
+            zejména je-li zpracování nezbytné pro splnění smlouvy, právní povinnosti či z&nbsp;jiných důvodů uvedených v&nbsp;platných
+            právních předpisech).</p>
+        <p>&nbsp;</p>
+        <p><strong>Přístup k&nbsp;osobním údajům</strong></p>
+        <p>K osobním údajům subjektů údajů má přístup správce a případně též třetí osoby - příjemci, kteří poskytují
+            vhodné záruky a jejichž zpracování splňuje požadavky dle platných právních předpisů a které zajišťuje
+            náležitou ochranu práv subjektů údajů</p>
+    </div>
+</div>

package/src/templates/Sections/Ui/Docs/@intro.html

@@ -1,11 +1,11 @@
-<div class="row gap-8 flex-wrap">
-    <div class="col-12" style="padding-top: 0">
+<div class="flex-col gap-8 flex-wrap">
+    <div class="w-full" style="padding-top: 0">
         <h1 class="ui-heading lg mb-4">Get started</h1>
         <div class="ui-text">
             <p>Minimal versions are <b>Node.js 16+</b> and <b>NPM 9+</b></p>
         </div>
     </div>
-    <div class="col-12" id="installation">
+    <div class="w-full" id="installation">
         <h1 class="ui-heading mb-4">Installation</h1>
         <div class="ui-text">
             <p>In existing project (with <b>Vituum and Newlogic Core</b>)</p>
@@ -36,13 +36,13 @@
         </code></pre>
         <hr>
     </div>
-    <div class="col-12" id="core">
+    <div class="w-full" id="core">
         <h1 class="ui-heading mb-4">Core</h1>
         <div class="ui-text">
             <p><b>Vituum and Newlogic Core</b> is used as the main toolset, the complete documentation is at <a href="https://vituum.dev" target="_blank">vituum.dev</a>.</p>
             <p>Newlogic Core is predefined config with plugins, filters etc. - <a href="https://core.newlogic.cz" target="_blank">core.newlogic.cz</a></p>
             <p>Winduum is used as a main CSS component framework, learn more about it at <a href="https://winduum.dev" title="">winduum.dev</a></p>
         </div>
-        <hr>
+        <hr class="mt-6">
     </div>
 </div>