@newlogic-digital/ui 3.4.2 → 3.7.5

package/src/styles/Utils/utilities.css

@@ -0,0 +1,42 @@
+@import "winduum/src/utilities/common.css";
+@import "winduum/src/utilities/container/default.css";
+@import "winduum/src/utilities/ripple/index.css";
+@import "winduum/src/utilities/skeleton/index.css";
+@import "winduum/src/utilities/underline.css";
+@import "winduum/src/utilities/swap/index.css";
+
+.container {
+  width: var(--container);
+  margin-inline: auto;
+}
+
+.reveal {
+  opacity: 0;
+  transition-property: var(--transition);
+  transition-timing-function: var(--ease-in-out);
+  transition-duration: 0.75s;
+  will-change: transform;
+
+  @media (prefers-reduced-motion) {
+    opacity: 1;
+    transform: none;
+  }
+
+  @media print {
+    opacity: 1;
+    transform: none;
+  }
+
+  &:is(.in), .no-js & {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.no-scrollbar {
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}

package/src/styles/main.css

@@ -1,14 +1,16 @@
-@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/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/utilities.css" layer(components);
+@import "tailwindcss/base.css";
+@import "tailwindcss/components.css";
+@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/Dialog/Basic.latte

@@ -0,0 +1,24 @@
+<dialog class="c-dialog">
+    <form class="c-dialog-content">
+        <div class="flex justify-between">
+            <h2 class="ui-heading">Info</h2>
+            <button class="ui-btn square ghosted accent-main" type="button" data-action="click->lib-dialog#close">
+                <svg>
+                    <use href="#icon-x-mark"></use>
+                </svg>
+            </button>
+        </div>
+        <div class="py-4">
+            <div class="ui-text">
+                {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>
+                {/foreach}
+            </div>
+        </div>
+        <div class="flex">
+            <div class="col max-md:w-full">
+                <button class="ui-btn" type="button" data-action="click->lib-dialog#close">Continue</button>
+            </div>
+        </div>
+    </form>
+</dialog>

package/src/templates/Components/Dialog/CookieConsent.latte

@@ -0,0 +1,27 @@
+{var $center = true}
+
+<dialog class="c-dialog c-dialog-cookieconsent {if $center}center{/if}" data-controller="c-dialog-cookieconsent">
+    <div class="c-dialog-content">
+        <div class="mt-2 mb-4 md:mb-6">
+            {if true}
+                <div class="ui-image w-40 my-4">
+                    <img src="{placeholder(160, 46)}">
+                </div>
+            {/if}
+            <div class="ui-heading text-3xl md:my-8">Nastavení soukromí a&nbsp;cookies&nbsp;🍪</div>
+        </div>
+        <div class="ui-text">
+            <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 class="flex-center mt-6 md:mt-8 gap-4 {if $center}flex-col{else}max-md:flex-col{/if} px-4">
+            <div class="flex flex-col w-full">
+                <button class="ui-btn lg w-full" data-action="click->c-dialog-cookieconsent#approve">Ano, souhlasím</button>
+            </div>
+            <div class="flex w-full gap-4">
+                <a class="ui-btn ghosted lg accent-main flex-1 px-4" href="/gdpr"><span>Přizpůsobit</span></a>
+                <button class="ui-btn ghosted lg accent-main flex-1 px-4" data-action="click->c-dialog-cookieconsent#decline"><span>Nesouhlasím</span></button>
+            </div>
+        </div>
+    </div>
+</dialog>

package/src/templates/Components/Form/CookieConsent.latte

@@ -0,0 +1,47 @@
+<form class="c-form-cookieconsent flex flex-col gap-8 mt-8" data-controller="c-form-cookieconsent" data-action="submit->c-form-cookieconsent#update:prevent" autocomplete="off">
+    <div class="flex-col">
+        <div class="ui-text">
+            <h3 style="text-align: left;">Nastavení cookies</h3>
+            <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="flex-col">
+        <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="flex-col">
+        <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="flex-col">
+        <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="flex-col items-start">
+        <button class="ui-btn">Uložit předvolby</button>
+    </div>
+</form>

package/src/templates/Layout/Header.latte

@@ -0,0 +1,38 @@
+<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>
+            </button>
+        </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>
+</header>

package/src/templates/Layout/Main.latte

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+    <head>
+        <meta charset="utf-8">
+        <title>{$page->title}</title>
+
+        <meta name="keywords" content="">
+        <meta name="description" content="">
+        <meta name="author" content="">
+        <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">
+
+        {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.classList.remove('no-js')
+        </script>
+
+        <script src="{$assets->js->main|asset}" type="module"></script>
+
+        <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="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'}
+
+        {if $layout->cookies}
+            {include '../Components/Dialog/CookieConsent.latte'}
+        {/if}
+
+        {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

@@ -0,0 +1,213 @@
+{import TEMPLATES_DIR . 'Ui/+.latte'}
+
+<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}
+                    <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="ms-auto">
+                        <div>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>