@newlogic-digital/ui 3.7.5 → 4.0.0

package/src/styles/Ui/Notice.css

@@ -1,9 +0,0 @@
-@import "winduum/src/ui/notice/index.css";
-
-.ui-notice {
-  align-items: flex-start;
-
-  hr {
-    width: 100%;
-  }
-}

package/src/styles/Ui/Progress.css

@@ -1 +0,0 @@
-@import "winduum/src/ui/progress/index.css";

package/src/styles/Ui/Switch.css

@@ -1 +0,0 @@
-@import "winduum/src/ui/switch/index.css";

package/src/styles/Ui/Text.css

@@ -1 +0,0 @@
-@import "winduum/src/ui/text/index.css";

package/src/styles/Ui/Title.css

@@ -1,4 +0,0 @@
-@import "winduum/src/ui/title/default.css";
-@import "winduum/src/ui/title/default-props.css";
-@import "winduum/src/ui/title/sm.css";
-@import "winduum/src/ui/title/lg.css";

package/src/styles/Utils/+.css

@@ -1,6 +0,0 @@
-@import "breakpoints.css";
-@import "config.css";
-@import "default.css";
-@import "keyframes.css";
-@import "theme/+.css";
-@import "utilities.css";

package/src/styles/Utils/config.css

@@ -1,16 +0,0 @@
-@import "winduum/src/base/config/font.css";
-@import "winduum/src/base/config/mask.css";
-@import "winduum/src/base/config/rounded.css";
-@import "winduum/src/base/config/spacing.css";
-@import "winduum/src/base/config/text.css";
-@import "winduum/src/base/config/transition.css";
-@import "winduum/src/base/config/z.css";
-
-:root, :host {
-  --container: min(100% - (var(--container-padding) * 2), var(--container-width));
-  --container-lg: min(100% - (var(--container-padding) * 2), var(--container-lg-width));
-  --container-width: 80rem;
-  --container-lg-width: 90rem;
-  --container-padding: 5vw;
-  --container-padding-calc: max(calc(50vw - (var(--container-width) / 2)), var(--container-padding));
-}

package/src/styles/Utils/theme/+.css

@@ -1 +0,0 @@
-@import "main.css";

package/src/styles/Utils/theme/main.css

@@ -1,33 +0,0 @@
-:root, :host {
-  --font-primary: "Poppins", sans-serif;
-  --font-secondary: "Poppins", sans-serif;
-  --space: srgb;
-  --scheme: dark;
-  --color-accent: var(--color-primary);
-  --color-accent-foreground: var(--color-primary-foreground);
-  --color-primary: #83cd4f;
-  --color-primary-foreground: var(--color-dark);
-  --color-main: #111315;
-  --color-main-foreground: var(--color-body);
-  --color-main-primary: var(--color-main);
-  --color-main-secondary: color-mix(in var(--space), var(--color-main) 75%, var(--color-main-foreground));
-  --color-main-tertiary: color-mix(in var(--space), var(--color-main) 50%, var(--color-main-foreground));
-  --color-body: #fff;
-  --color-body-foreground: var(--color-main);
-  --color-body-primary: var(--color-body);
-  --color-body-secondary: color-mix(in var(--space), var(--color-body) 95%, var(--color-body-foreground));
-  --color-body-tertiary: color-mix(in var(--space), var(--color-body) 90%, var(--color-body-foreground));
-  --color-light: #fff;
-  --color-light-foreground: var(--color-dark);
-  --color-dark: #111315;
-  --color-dark-foreground: var(--color-light);
-  --color-success: #16a34a;
-  --color-error: #dc2626;
-  --color-warning: #eab308;
-  --color-info: #0ea5e9;
-
-  &.dark {
-    --color-main: #c9d1d9;
-    --color-body: #0e1116;
-  }
-}

package/src/styles/Utils/utilities.css

@@ -1,42 +0,0 @@
-@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/templates/Components/Dialog/Basic.latte

@@ -1,24 +0,0 @@
-<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

@@ -1,27 +0,0 @@
-{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/Layout/Header.latte

@@ -1,38 +0,0 @@
-<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/Sections/Site.latte

@@ -1,213 +0,0 @@
-{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>

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

@@ -1,48 +0,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="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>
-        </div>
-        <pre><code class="language-bash">
-            npm i
-        </code></pre>
-        <div class="ui-text">
-            <p>Creating a new project (with <b>Vituum and Newlogic Core</b>)</p>
-        </div>
-        <pre><code class="language-bash">
-            $ git clone --depth 1 https://github.com/newlogic-digital/ui.git . && rm -r .git
-            $ npm i
-        </code></pre>
-        <div class="ui-text">
-            <p>Use with in any other environment</p>
-        </div>
-        <pre><code class="language-bash">
-            $ npm i @newlogic-digital/ui
-        </code></pre>
-        <pre><code class="language-css">
-            /* main.css or separate modules */
-            @import "@newlogic-digital/ui/src/styles/main.css"
-        </code></pre>
-        <pre><code class="language-js">
-            /* main.js or separate modules */
-            import "@newlogic-digital/ui/src/scripts/main.js"
-        </code></pre>
-        <hr>
-    </div>
-    <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 class="mt-6">
-    </div>
-</div>

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

@@ -1,134 +0,0 @@
-<div class="flex-col col-left max-md:hidden">
-    <div class="sticky">
-        <div class="mb-6">
-            <h2 class="ui-title uppercase text-primary mb-3">Get started</h2>
-            <ul class="flex-col gap-3">
-                <li class="flex-col">
-                    <a href="#installation" class="ui-link underline decoration-transparent" title="">
-                        <span>Installation</span>
-                    </a>
-                </li>
-                <li class="flex-col">
-                    <a href="#core" class="ui-link underline decoration-transparent" title="">
-                        <span>Core</span>
-                    </a>
-                </li>
-            </ul>
-        </div>
-        <div class="mb-6">
-            <h2 class="ui-title uppercase text-primary mb-3">Components</h2>
-            <ul class="flex-col gap-3">
-                <li class="flex-col">
-                    <a href="#heading" class="ui-link underline decoration-transparent" title="">
-                        <span>Heading</span>
-                    </a>
-                </li>
-                <li class="flex-col">
-                    <a href="#title" class="ui-link underline decoration-transparent" title="">
-                        <span>Title</span>
-                    </a>
-                </li>
-                <li class="flex-col">
-                    <a href="#button" class="ui-link underline decoration-transparent" title="">
-                        <span>Button</span>
-                    </a>
-                </li>
-                <li class="flex-col">
-                    <a href="#link" class="ui-link underline decoration-transparent" title="">
-                        <span>Link</span>
-                    </a>
-                </li>
-                <li class="flex-col">
-                    <a href="#control" class="ui-link underline decoration-transparent" title="">
-                        <span>Control</span>
-                    </a>
-                </li>
-                <li class="flex-col">
-                    <a href="#check" class="ui-link underline decoration-transparent" title="">
-                        <span>Check</span>
-                    </a>
-                </li>
-                <li class="flex-col">
-                    <a href="#notice" class="ui-link underline decoration-transparent" title="">
-                        <span>Notice</span>
-                    </a>
-                </li>
-                <li class="flex-col">
-                    <a href="#badge" class="ui-link underline decoration-transparent" title="">
-                        <span>Badge</span>
-                    </a>
-                </li>
-                <li class="flex-col">
-                    <a href="#progress" class="ui-link underline decoration-transparent" title="">
-                        <span>Progress</span>
-                    </a>
-                </li>
-                <li class="flex-col">
-                    <a href="#text" class="ui-link underline decoration-transparent" title="">
-                        <span>Text</span>
-                    </a>
-                </li>
-                <li class="flex-col">
-                    <a href="#image" class="ui-link underline decoration-transparent" title="">
-                        <span>Image</span>
-                    </a>
-                </li>
-            </ul>
-        </div>
-        <div class="mb-6">
-            <h2 class="ui-title uppercase text-primary mb-3">Libraries</h2>
-            <ul class="flex-col gap-3">
-                <li class="flex-col">
-                    <a href="#form" class="ui-link underline decoration-transparent" title="">
-                        <span>Form</span>
-                    </a>
-                </li>
-                <li class="flex-col">
-                    <a href="#dialog" class="ui-link underline decoration-transparent" title="">
-                        <span>Dialog</span>
-                    </a>
-                </li>
-                <li class="flex-col">
-                    <a href="#drawer" class="ui-link underline decoration-transparent" title="">
-                        <span>Drawer</span>
-                    </a>
-                </li>
-                <li class="flex-col">
-                    <a href="#ripple" class="ui-link underline decoration-transparent" title="">
-                        <span>Ripple</span>
-                    </a>
-                </li>
-                <li class="flex-col">
-                    <a href="#datepicker" class="ui-link underline decoration-transparent" title="">
-                        <span>Datepicker</span>
-                    </a>
-                </li>
-                <li class="flex-col">
-                    <a href="#swup" class="ui-link underline decoration-transparent" title="">
-                        <span>Swup</span>
-                    </a>
-                </li>
-                <li class="flex-col">
-                    <a href="#tippy" class="ui-link underline decoration-transparent" title="">
-                        <span>Tippy</span>
-                    </a>
-                </li>
-                <li class="flex-col">
-                    <a href="#cookieconsent" class="ui-link underline decoration-transparent" title="">
-                        <span>CookieConsent</span>
-                    </a>
-                </li>
-                <li class="flex-col">
-                    <a href="#recaptcha" class="ui-link underline decoration-transparent" title="">
-                        <span>ReCaptcha</span>
-                    </a>
-                </li>
-                <li class="flex-col">
-                    <a href="#stimulus" class="ui-link underline decoration-transparent" title="">
-                        <span>Stimulus</span>
-                    </a>
-                </li>
-            </ul>
-        </div>
-    </div>
-</div>