@newlogic-digital/ui 3.4.2 → 3.5.0

package/src/styles/main.css

@@ -1,14 +1,19 @@
-@import "Utils/vendor.css";
-@import "Utils/theme/main.css";
-@import "Utils/breakpoints.css";
-@import "Utils/vars.css";
-@import "Utils/default.css";
-@import "Utils/icons.css";
-@import "Utils/keyframes.css";
-@import "Layout/+.css";
-@import "Components/+.css";
-@import "Ui/+.css";
-@import "Sections/+.css";
-@import "Libraries/+.css";
-@import "Utils/print.css";
-@import "Utils/tailwind/+.css";
+@import "winduum/src/base/reset.css";
+@import "./Utils/default.css";
+@import "./Utils/breakpoints.css";
+@import "./Utils/keyframes.css";
+@import "./Utils/print.css";
+@import "./Utils/icons.css";
+@import "./Utils/config.css";
+@import "./Utils/theme/+.css";
+@import "./Libraries/+.css";
+@import "./Layout/+.css" layer(components);
+@import "./Ui/+.css" layer(components);
+@import "./Components/+.css" layer(components);
+@import "./Sections/+.css" layer(components);
+@import "./Utils/tailwind.css";
+@import "tailwindcss/base.css";
+@import "tailwindcss/components.css";
+@import "winduum/src/main-rgb.css" supports(not (color: color-mix(in srgb, red 0%, red)));
+@import "tailwindcss/utilities.css";
+@import "tailwindcss/variants.css";

package/src/styles/tinymce.css

@@ -0,0 +1,34 @@
+@import "Utils/theme/main.css";
+@import "Utils/config.css";
+@import "Ui/Text.css";
+
+.ui-text {
+  & .row {
+    display: flex;
+    box-sizing: border-box;
+    flex-wrap: wrap;
+
+    & > .col {
+      box-sizing: border-box;
+      padding-top: 0;
+      padding-bottom: 0;
+      border: 1px dotted rgb(0 0 0 / 50%);
+
+      &.col-6 {
+        width: calc(6 / 12 * 100%);
+      }
+
+      &.col-8 {
+        width: calc(8 / 12 * 100%);
+      }
+
+      &.col-4 {
+        width: calc(4 / 12 * 100%);
+      }
+
+      &.col-3 {
+        width: calc(3 / 12 * 100%);
+      }
+    }
+  }
+}

package/src/templates/Components/CookieConsent.latte

@@ -0,0 +1,28 @@
+{var $center = true}
+
+<div class="c-cookieconsent {if $center}is-center{/if}" data-controller="c-cookieconsent">
+    <div class="c">
+        <div class="c_head mt-2">
+            {if true}
+                <div class="ui-image w-40 mb-6">
+                    <img src="{placeholder(160, 46)}">
+                </div>
+            {/if}
+            <div class="ui-heading lg md:my-8">Nastavení soukromí a&nbsp;cookies&nbsp;🍪</div>
+        </div>
+        <div class="c_body">
+            <div class="ui-text xs md:sm">
+                <p>Webové stránky používají k poskytování služeb, personalizaci reklam a analýze návštěvnosti soubory&nbsp;cookies.</p>
+                <p>Následující volbou souhlasíte s našimi <a href="/gdpr">zásady&nbsp;ochrany osobních údajů a cookies</a>. Svá&nbsp;nastavení můžete kdykoli změnit.</p>
+            </div>
+        </div>
+        <div class="c_foot {if $center}flex-col gap-y-2{else}gap-x-4{/if}">
+            <div class="col w-full">
+                <button class="ui-btn lg w-full" data-action="click->c-cookieconsent#approve">Ano, souhlasím</button>
+            </div>
+            <div class="col w-full {if !$center}pr-6{/if}">
+                <button class="ui-btn ghosted lg accent-main w-full" data-action="click->c-cookieconsent#decline"><span>Nesouhlasím</span></button>
+            </div>
+        </div>
+    </div>
+</div>

package/src/templates/Components/Dialogs/{Basic.twig → Basic.latte}

@@ -1,22 +1,22 @@
-<form class="c-dialog c-dialog-basic" data-size="sm" data-type="scrollable">
-    <div class="wrp_dialog_head flex justify-between">
+<form class="c-dialog c-dialog-basic sm scrollable">
+    <div class="c_dialog_head flex justify-between">
         <h2 class="ui-heading">Info</h2>
-        <button class="ui-icon" type="button" data-action="click->lib-dialog#hide">
+        <button class="ui-btn square ghosted accent-main" type="button" data-action="click->lib-dialog#close">
             <svg>
                 <use href="#icon-x"></use>
             </svg>
         </button>
     </div>
-    <div class="wrp_dialog_body py-4">
+    <div class="c_dialog_body py-4">
         <div class="ui-text">
-            {% for i in 1..44 %}
+            {foreach range(1, 44) as $i}
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget efficitur metus. In bibendum nisi et dui sagittis efficitur.</p>
-            {% endfor %}
+            {/foreach}
         </div>
     </div>
-    <div class="wrp_dialog_foot">
-        <div class="col m:col-12">
-            <button class="ui-btn" type="button" data-action="click->lib-dialog#hide">Continue</button>
+    <div class="c_dialog_foot">
+        <div class="col max-md:w-full">
+            <button class="ui-btn" type="button" data-action="click->lib-dialog#close">Continue</button>
         </div>
     </div>
 </form>

package/src/templates/Layout/{Header.twig → Header.latte}

@@ -1,29 +1,27 @@
-<header id="l-header" class="{% if headerNormal %}is-l-header-normal{% endif %}" data-controller="l-header">
-    <div class="wrp_header_body row-x">
+<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="elm_header_logo" title="Newlogic UI">
-                <svg class="h-6" fill="currentColor" viewBox="0 0 194 32">
+            <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"/>
                 </svg>
             </a>
         </div>
-        <div class="col ml-auto t:hidden">
-            <button class="elm_header_menu" data-action="click->lib-drawer#show" aria-label="Menu">
+        <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 m:hidden">
-            <nav class="elm_header_nav row">
-                {% for page in layout.nav %}
-                    <div class="col">
-                        <a href="{{ page.url }}" title="{{ page.name }}" class="ui-link after:content-none">{{ page.name }}</a>
-                    </div>
-                {% endfor %}
+        <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 m:hidden flex-row items-center space-x-6 ml-auto">
+        <div class="col max-md:hidden flex-row items-center gap-x-6 ml-auto">
             <div class="col">
-                <button class="ui-icon" data-action="click->lib#darkMode">
+                <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>
@@ -33,8 +31,8 @@
                 </button>
             </div>
             <div class="col">
-                <div class="elm_header_cta">
-                    <a href="https://www.newlogic.cz" title="newlogic.cz" class="ui-btn bg-secondary" target="_blank" rel="noopener"><span>Newlogic.cz</span></a>
+                <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

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html class="no-js sw" 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="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">
+
+        {foreach $prefetch as $url}
+            <link rel="dns-prefetch" href="{$url}">
+        {/foreach}
+
+        {foreach $assets->css->all as $url}
+            <link rel="stylesheet" href="{$url|asset}">
+        {/foreach}
+
+        <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))
+        </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">
+    </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">
+                {include '../Utils/sections.latte', sections => $page->body}
+            </main>
+            {include '../Layout/Footer.latte'}
+        </div>
+
+        {if $layout->cookies}
+            {include '../Components/CookieConsent.latte'}
+        {/if}
+
+        {fetch('/src/icons.svg')|noescape}
+    </body>
+</html>

package/src/templates/Sections/Gdpr.latte

@@ -0,0 +1,127 @@
+<div class="s-text py-14">
+    <div class="container">
+        <div class="d:col-10 ml-auto mr-auto">
+            <div class="wrp_s_head mb-8">
+                <h2 class="ui-heading">Zásady používání cookies</h2>
+            </div>
+            <div class="wrp_s_body">
+                <div class="ui-text"><h4 style="text-align: left;">Pravidla používání cookies na našich webových
+                        stránkách</h4>
+                    <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>
+                    <p></p>
+                    <p></p>
+                    <p></p>
+                </div>
+                <form class="c-form-cookieconsent flex flex-col gap-8" data-controller="c-form-cookieconsent" data-action="submit->c-form-cookieconsent#update:prevent" autocomplete="off">
+                    <div class="c_form_head">
+                        <div class="ui-text">
+                            <h4 style="text-align: left;">Nastavení cookies</h4>
+                            <p style="text-align: left;">
+                                Následujícím nastavením můžete upravit jaké soubory cookie
+                                se budou používat na této stránce.
+                            </p>
+                        </div>
+                    </div>
+                    <div class="c_form_body">
+                        <div class="ui-text mb-4">
+                            <h5>Nutné cookies</h5>
+                            <p>
+                                Tyto soubory cookies jsou nezbytně nutné pro váš pohyb po webové stránce a využívání všech funkcí, např. nastavení preferencí soukromí, přihlašování nebo vyplňování formulářů. Bez těchto cookies by nebylo možné řádně poskytovat služby požadované při používání naší stránky. Nezbytně nutné cookies nevyžadují souhlas uživatele dle příslušných právních předpisů. Můžete si také nakonfigurovat webový prohlížeč a nezbytně nutné soubory cookies zablokovat, ovšem následně se může stát, že nebudete moci používat všechny funkce stránky tak, jak byste chtěli.
+                            </p>
+                        </div>
+                        <label class="ui-switch">
+                            <input type="checkbox" value="decline" checked disabled>
+                        </label>
+                    </div>
+                    <div class="c_form_body">
+                        <div class="ui-text mb-4">
+                            <h5>Statistické soubory cookies</h5>
+                            <p>
+                                Tyto soubory cookie nám umožňují počítat návštěvy a zdroje návštěvnosti, abychom mohli měřit a zlepšovat výkon našich stránek. Pomáhají nám zjistit, které stránky jsou nejoblíbenější a které nejméně, a vidět, jak se návštěvníci na webu pohybují, což nám pomáhá optimalizovat váš zážitek. Všechny informace, které tyto soubory cookie shromažďují, jsou agregované, a proto anonymní. Pokud tyto soubory cookie nepovolíte, nebudeme moci používat vaše údaje tímto způsobem.
+                            </p>
+                        </div>
+                        <label class="ui-switch">
+                            <input type="checkbox" value="performance">
+                        </label>
+                    </div>
+                    <div class="c_form_body">
+                        <div class="ui-text mb-4">
+                            <h5>Reklamní soubory cookies</h5>
+                            <p>
+                                Tyto soubory cookies (zvané také cílené nebo reklamní cookies) se používají k zobrazování reklam na stránkách třetích stran, které by více odpovídaly vaší osobě a vašim zájmům. Používají se také k omezení počtu shlédnutí reklam a měření účinností reklamních kampaní.
+                            </p>
+                        </div>
+                        <label class="ui-switch">
+                            <input type="checkbox" value="marketing">
+                        </label>
+                    </div>
+                    <div class="c_form_foot">
+                        <button class="ui-btn"><span>Uložit předvolby</span></button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>

package/src/templates/Sections/Site.latte

@@ -0,0 +1,141 @@
+{import TEMPLATES_DIR . 'Ui/+.latte'}
+
+<div class="py-section">
+    <form class="container flex flex-col gap-4" data-controller="lib-form">
+        <div class="grid grid-cols-3 gap-md">
+            <div class="c-field">
+                {embed UiControl}
+                    <label n:block=label>Jméno</label>
+                    <input n:block=body placeholder="Vyplňte pole">
+                {/embed}
+            </div>
+            <div class="c-field">
+                {embed UiControl}
+                    <input n:block=body required>
+                    <label n:block=label>Příjmení</label>
+                {/embed}
+            </div>
+            <div class="c-field">
+                {embed UiControl}
+                    <input n:block=body type="email" required>
+                    <label n:block=label>Email</label>
+                {/embed}
+            </div>
+            <div class="c-field">
+                {embed UiControlSelect}
+                    <label n:block=label>Select</label>
+                    <select n:block=body required data-placeholder>
+                        <option selected="" value="">- select an option -</option>
+                        <option value="1">Option 1</option>
+                        <option value="2" disabled>Option 2</option>
+                        <option value="3">Option 3</option>
+                    </select>
+                {/embed}
+            </div>
+            <div class="c-field">
+                {embed UiControlSelect}
+                    <select required n:block=body>
+                        <option selected="" value="">- select an option -</option>
+                        <option value="1">Option 1</option>
+                        <option value="2" disabled>Option 2</option>
+                        <option value="3">Option 3</option>
+                    </select>
+                    <label n:block=label>Select</label>
+                {/embed}
+            </div>
+            <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>
+                {/embed}
+            </div>
+            <div class="c-field">
+                {embed UiControl}
+                    <input n:block=body type="file" required>
+                {/embed}
+            </div>
+            <div class="c-field">
+                {var $disabledDays = '["2023-07-13"]'}
+                {embed UiControlDate, attributes: 'data-ui-control-date-disabled-value="' . ($disabledDays|escapeHtml) . '"'}
+                    <input n:block=body type="date" placeholder="dd.mm.rrrr" min="2023-07-12" required>
+                {/embed}
+            </div>
+            <div class="c-field">
+                {embed UiControlDate}
+                    <input n:block=body type="datetime-local" placeholder="dd.mm.rrrr" min="2023-07-12T10:00" step="12000" required>
+                {/embed}
+            </div>
+            <div class="c-field">
+                {embed UiControlDate}
+                    <input n:block=body type="datetime-local" required>
+                    <label n:block=label>Date</label>
+                {/embed}
+            </div>
+            <div class="c-field">
+                {embed UiControlTime}
+                    <input n:block=body type="time" required>
+                {/embed}
+            </div>
+            <div class="c-field">
+                <div class="ui-control" tabindex="-1" data-controller="ui-control-select">
+                    <select required>
+                        <option selected="" value="">- select an option -</option>
+                        <option value="1">Option 1</option>
+                        <option value="2" disabled>Option 2</option>
+                        <option value="3">Option 3</option>
+                    </select>
+                    <label>Floating</label>
+                    <div aria-hidden="true">
+                        <div data-option="" tabindex="0">- select option -</div>
+                        <div data-option="1" tabindex="0">Option 1</div>
+                        <div data-option="2" data-disabled>Option 2</div>
+                        <div data-option="3" tabindex="0">Option 3</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="c-field">
+            {embed UiCheck}
+                <input n:block=body type="checkbox" required>
+                <label n:block=label>Souhlasím s odesláním osobních údajů na super místa</label>
+            {/embed}
+        </div>
+        <div class="c-field">
+            <div class="ui-switch">
+                <input type="checkbox" id="switch" required>
+                <label for="switch">Text</label>
+            </div>
+        </div>
+        <button class="ui-btn">Odeslat</button>
+    </form>
+    <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" />
+            </div>
+            <div class="ui-image w-[30rem] h-auto rounded-md overflow-hidden aspect-[8/5]">
+                <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" />
+            </div>
+            <div class="ui-image w-[30rem] h-auto rounded-md overflow-hidden aspect-[8/5]">
+                <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>
+        <progress class="ui-progress sm" value="50" max="100" data-lib-slider-target="progress"></progress>
+        <div class="flex">
+            <div data-lib-slider-target="counterMin"></div>/
+            <div data-lib-slider-target="counterMax"></div>
+        </div>
+        <button class="ui-btn square" data-action="click->lib-slider#prev">Prev</button>
+        <button class="ui-btn square" data-action="click->lib-slider#next">Next</button>
+    </div>
+
+    <div class="container">
+        <div class="w-full h-32 skeleton rounded my-4"></div>
+    </div>
+</div>

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

@@ -1,12 +1,12 @@
-<div class="row g-8 flex-wrap">
+<div class="row gap-8 flex-wrap">
     <div class="col-12" style="padding-top: 0">
-        <h1 class="ui-heading">Get started</h1>
+        <h1 class="ui-heading lg mb-4">Get started</h1>
         <div class="ui-text">
-            <p>Minimal version <b>Node.js 14+</b> and <b>NPM 7+</b></p>
+            <p>Minimal versions are <b>Node.js 16+</b> and <b>NPM 9+</b></p>
         </div>
     </div>
     <div class="col-12" id="installation">
-        <h1 class="ui-title uppercase text-primary mb-5">Instalation</h1>
+        <h1 class="ui-heading mb-4">Installation</h1>
         <div class="ui-text">
             <p>In existing project (with <b>Vituum and Newlogic Core</b>)</p>
         </div>
@@ -26,72 +26,23 @@
         <pre><code class="language-bash">
             $ npm i @newlogic-digital/ui
         </code></pre>
-        <pre><code class="language-bash">
+        <pre><code class="language-css">
             /* main.css or separate modules */
-            @import "node_modules/@newlogic-digital/ui/src/styles/main.css"
+            @import "@newlogic-digital/ui/src/styles/main.css"
         </code></pre>
-        <pre><code class="language-bash">
+        <pre><code class="language-js">
             /* main.js or separate modules */
-            import "node_modules/@newlogic-digital/ui/src/scripts/main.js"
+            import "@newlogic-digital/ui/src/scripts/main.js"
         </code></pre>
+        <hr>
     </div>
     <div class="col-12" id="core">
-        <h1 class="ui-title uppercase text-primary mb-5">Core</h1>
+        <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://vituum.dev" target="_blank">https://github.com/newlogic-digital/core</a></p>
-            <p>Framework can also be used with other tools, more information is in the section <a href="#build" title="">Build</a></p>
-        </div>
-    </div>
-    <div class="col-12" id="theme">
-        <h1 class="ui-title uppercase text-primary mb-5">Theme</h1>
-        <div class="ui-text">
-            <p>Main CSS variables can be configured in <code>styles/Utils/theme/main.css</code> a <code>styles/Utils/vars.css</code>,
-                you can also create any number of color variations.
-            </p>
-            <p></p>
-            <p>Keyframes can be added in <code>styles/Utils/keyframes.css</code>, print styles in <code>styles/Utils/print.css</code>,
-                import of external css in <code>styles/Utils/vendor.css</code> and tailwind styles can be extended
-                in<code>styles/Utils/tailwind</code>
-            </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>
-    </div>
-    <div class="col-12" id="layout">
-        <h1 class="ui-title uppercase text-primary mb-5">Layout</h1>
-        <div class="ui-text">
-            <p>Global styles are located at <code>styles/Layout/Main.css</code>, others layout styles are for eg. <code>Header.css</code>,
-                <code>Footer.css</code> and naming should be done in following format <code>#l-header</code>, <code>#l-footer</code>
-            </p>
-            <p></p>
-            <p>Global scripts are located at <code>scripts/Layout/Main.js</code></p>
-            <p></p>
-            <p>Example of basic layout in HTML:</p>
-        </div>
-        <pre><code class="language-html">
-            <html class="no-js no-sw" lang="cs">
-                <head>
-                    <title></title>
-                    <link rel="stylesheet" href="/src/styles/main.css">
-                    <script src="https://cdn.jsdelivr.net/npm/lazysizes@5.2.2/lazysizes.min.js"
-                            async></script>
-
-                    <script>'dark' !== localStorage.theme && ('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'), document.documentElement.classList.add(navigator.platform.toLowerCase().replace(/ .*/, '')), function (e) {
-                        var t
-                        e.match(/(msie|trident)/i) ? document.documentElement.classList.add('ie') : e.match(/edge/) ? document.documentElement.classList.add('edge') : (t = e.match(/(chrome|safari|firefox)/i)) && document.documentElement.classList.add(t[0])
-                    }(navigator.userAgent.toLowerCase())</script>
-
-                    <script src="/src/scripts/main.js" type="module"></script>
-                </head>
-                <body data-controller="lib lib-dialog lib-drawer">
-                    <div class="l-default">
-                        <header id="l-header" data-controller="l-header"></header>
-                        <main id="l-main" class="transition-fade">
-                            <!--PAGE CONTENT-->
-                        </main>
-                        <footer id="l-footer"></footer>
-                    </div>
-                </body>
-            </html>
-        </code></pre>
+        <hr>
     </div>
 </div>