source/_patterns/00-atoms/16-tooltips/tooltip-colors.mustache

+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+  <div class="inline-flex flex-col space-y-2">
+    {{> atoms-tooltip(classes: "tooltip--black") }}
+    {{> atoms-tooltip(classes: "tooltip--grey-125") }}
+    {{> atoms-tooltip(classes: "tooltip--red-600") }}
+    {{> atoms-tooltip(classes: "tooltip--yellow-400") }}
+    {{> atoms-tooltip(classes: "tooltip--green-400") }}
+    {{> atoms-tooltip(classes: "tooltip--blue-300") }}
+  </div>
+</div>

source/_patterns/00-atoms/16-tooltips/tooltip-positioning.mustache

+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+  <div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--black tooltip--top") }}
+    </div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--black tooltip--bottom") }}
+    </div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--black tooltip--left") }}
+    </div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--black tooltip--right") }}
+    </div>
+  </div>
+  <div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--grey-125 tooltip--top") }}
+    </div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--grey-125 tooltip--bottom") }}
+    </div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--grey-125 tooltip--left") }}
+    </div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--grey-125 tooltip--right") }}
+    </div>
+  </div>
+  <div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--red-600 tooltip--top") }}
+    </div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--red-600 tooltip--bottom") }}
+    </div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--red-600 tooltip--left") }}
+    </div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--red-600 tooltip--right") }}
+    </div>
+  </div>
+  <div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--yellow-400 tooltip--top") }}
+    </div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--yellow-400 tooltip--bottom") }}
+    </div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--yellow-400 tooltip--left") }}
+    </div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--yellow-400 tooltip--right") }}
+    </div>
+  </div>
+  <div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--green-400 tooltip--top") }}
+    </div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--green-400 tooltip--bottom") }}
+    </div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--green-400 tooltip--left") }}
+    </div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--green-400 tooltip--right") }}
+    </div>
+  </div>
+  <div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--blue-300 tooltip--top") }}
+    </div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--blue-300 tooltip--bottom") }}
+    </div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--blue-300 tooltip--left") }}
+    </div>
+    <div class="p-8">
+      {{> atoms-tooltip(pos: "tooltip--blue-300 tooltip--right") }}
+    </div>
+  </div>
+</div>

source/_patterns/00-atoms/16-tooltips/tooltip-semantic.mustache

+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+  <div class="inline-flex flex-col space-y-2">
+    {{> atoms-tooltip(classes: "tooltip--dark") }}
+    {{> atoms-tooltip(classes: "tooltip--light") }}
+    {{> atoms-tooltip(classes: "tooltip--default") }}
+    {{> atoms-tooltip(classes: "tooltip--error") }}
+    {{> atoms-tooltip(classes: "tooltip--warning") }}
+    {{> atoms-tooltip(classes: "tooltip--success") }}
+    {{> atoms-tooltip(classes: "tooltip--info") }}
+  </div>
+</div>

source/_patterns/00-atoms/16-tooltips/tooltip.mustache

+<span class="tooltip {{ classes }} {{ pos }}{{^ pos }}tooltip--top{{/ pos }}">{{ cta }}</span>

source/_patterns/00-atoms/17-alerts/alert-colors.mustache

+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+  <div class="inline-flex flex-col space-y-2">
+    {{> atoms-alert(classes: "alert--black", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--grey-125", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--red-600", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--yellow-400", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--green-400", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--blue-300", icon: "ico--pirati") }}
+  </div>
+</div>

source/_patterns/00-atoms/17-alerts/alert-faded.mustache

+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+  <div class="inline-flex flex-col space-y-2">
+    {{> atoms-alert(classes: "alert--black alert--faded", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--grey-125 alert--faded", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--red-600 alert--faded", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--yellow-400 alert--faded", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--green-400 alert--faded", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--blue-300 alert--faded", icon: "ico--pirati") }}
+  </div>
+</div>

source/_patterns/00-atoms/17-alerts/alert-semantic.mustache

+<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
+  <div class="inline-flex flex-col space-y-2">
+    {{> atoms-alert(classes: "alert--dark", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--light", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--error", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--warning", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--success", icon: "ico--pirati") }}
+    {{> atoms-alert(classes: "alert--info", icon: "ico--pirati") }}
+  </div>
+</div>

source/_patterns/00-atoms/17-alerts/alert.mustache

+<span class="alert {{ classes }}">
+  {{# icon }}
+    <i class="alert__icon {{ icon }}"></i>
+  {{/ icon }}
+  <span>{{ excerpt.short }}</span>
+</span>

source/_patterns/00-atoms/18-calendars/month-calendar.mustache

+<div class="__js-root">
+  <ui-month-calendar events='{{ calendarData }}'></ui-month-calendar>
+</div>

source/_patterns/00-atoms/18-calendars/year-calendar.mustache

+<div class="__js-root">
+  <ui-year-calendar events='{{ calendarData }}'></ui-year-calendar>
+</div>

source/_patterns/00-atoms/19-image/image.mustache

+<img src="https://picsum.photos/300/200" class="{{ classes }}">

source/_patterns/01-molecules/02-cards/card-actions.mustache

@@ -2,7 +2,7 @@
   <div class="card__body">
     <div class="flex items-center justify-between mb-4">
       <h1 class="card-headline">Ukončit rozpravu?</h1>
-      <button><i class="ico--close"></i></button>
+      <button><i class="ico--cross"></i></button>
     </div>
     <p class="card-body-text">Opravdu chcete ukončit rozpravu?</p>
   </div>
@@ -17,7 +17,7 @@
   <div class="card__body">
     <div class="flex items-center justify-between mb-4">
       <h1 class="card-headline">Ukončit rozpravu?</h1>
-      <button><i class="ico--close"></i></button>
+      <button><i class="ico--cross"></i></button>
     </div>
     <p class="card-body-text">Opravdu chcete ukončit rozpravu?</p>
   </div>

source/_patterns/01-molecules/06-banner/color-variants.mustache

 <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-6 gap-4" style="min-height: 500px;">
   {{> molecules-banner(color: "bg-black") }}
-  {{> molecules-banner(color: "bg-violet-300") }}
-  {{> molecules-banner(color: "bg-green-200") }}
-  {{> molecules-banner(color: "bg-blue-200") }}
+  {{> molecules-banner(color: "bg-violet-500") }}
+  {{> molecules-banner(color: "bg-red-600") }}
+  {{> molecules-banner(color: "bg-blue-300") }}
   {{> molecules-banner(color: "bg-brands-facebook") }}
   {{> molecules-banner(color: "bg-brands-twitter") }}
 </div>

source/_patterns/01-molecules/15-navbar/navbar-menu.mustache

@@ -3,11 +3,14 @@
     <a href="#" data-href="{{ link.templates-homepage }}" class="navbar-menu__link">Hlavní strana</a>
   </li>
   <li class="navbar-menu__item">
-    <ui-navbar-subitem label="Lidé">
-      <ul class="navbar-menu__submenu">
-        <li><a href="#" data-href="{{ link.templates-people }}" class="navbar-menu__link">Delší link co je delší než hlavní menu položka</a></li>
-      </ul>
-    </ui-navbar-subtitem>
+    <ui-navbar-subitem-replacing label="Lidé">
+      <span class="navbar-menu__link navbar-menu__submenu-toggle">Lidé</span>
+      <div class="navbar-menu__submenu-wrap">
+        <ul class="navbar-menu__submenu">
+          <li><a href="#" data-href="{{ link.templates-people }}" class="navbar-menu__link">Delší link co je delší než hlavní menu položka</a></li>
+        </ul>
+      </div>
+    </ui-navbar-subtitem-replacing>
   </li>
   <li class="navbar-menu__item">
     <a href="#" data-href="{{ link.templates-pirate-center }}" class="navbar-menu__link">Pirátské centrum</a>

source/_patterns/01-molecules/17-thumbs/thumbs-inactive.mustache

+<div class="space-x-2 text-sm flex items-center">
+  <button class="text-grey-200 hover:text-blue-300 flex items-center space-x-1">
+    <span class="font-bold">6</span>
+    <i class="ico--thumbs-up"></i>
+  </button>
+  <button class="text-grey-200 hover:text-red-600 flex items-center space-x-1">
+    <i class="ico--thumbs-down transform -scale-x-1"></i>
+    <span class="font-bold">2</span>
+  </button>
+</div>

source/_patterns/01-molecules/20-dropdown-button/dropdown-button.mustache

-<button class="btn btn--icon {{ classes }}">
+<div class="btn btn--icon {{ classes }}">
   <div class="btn__body-wrap">
-    <div class="btn__body {{ bodyClasses }}">{{ cta }}</div>
-    <div class="btn__icon dropdown-button">
+    <button class="btn__body {{ bodyClasses }}">{{ cta }}</button>
+    <button class="btn__icon dropdown-button">
       <i class="ico--chevron-down"></i>
       <ul class="dropdown-button__choices bg-white text-black whitespace-no-wrap">
         <li class="dropdown-button__choice hover:bg-grey-125">
           <a class="block px-4 py-3" href="#">Navrhnout postup</a>
         </li>
       </ul>
-    </div>
+    </button>
   </div>
-</button>
+</div>

source/_patterns/01-molecules/21-modal/modal.mustache

 <div class="modal__overlay hidden toggle-modal-sample-1" id="modal-sample-1">
   <div class="modal__content" role="dialog">
     <div class="modal__container w-full max-w-2xl" role="dialog">
-      <div class="modal__container-body">
+      <div class="modal__container-body elevation-10">
+        <button class="modal__close" title="Zavřít"><i class="ico--cross"></i></button>
         {{> molecules-image-card }}
       </div>
     </div>

source/_patterns/01-molecules/22-images/images.mustache

+{{> atoms-image(classes: "mx-auto my-6 lg:max-w-[800px] max-w-full object-contain") }}
+{{> atoms-image(classes: "float-left mr-4 mb-6 lg:max-w-[400px] max-w-full object-contain") }}
+{{> atoms-image(classes: "float-left mr-4 mb-6 object-contain") }}
+{{> atoms-image(classes: "float-right ml-4 mb-6 lg:max-w-[400px] max-w-full object-contain") }}
+{{> atoms-image(classes: "float-right ml-4 mb-6 object-contain") }}

source/_patterns/02-organisms/00-global/subnav.mustache

@@ -45,11 +45,11 @@
           </nav>
           <aside class="subnav-aside">
             <div class="subnav-aside__item" :class="{'subnav-aside__item--visible': isCurrentView('regions')}">
-              <a @click="toggleView('regions')" class="subnav-aside__close"><i class="ico--close"></i></a>
+              <a @click="toggleView('regions')" class="subnav-aside__close"><i class="ico--cross"></i></a>
               <ui-region-map class="container container--default"></ui-region-map>
             </div>
             <div class="subnav-aside__item" :class="{'subnav-aside__item--visible': isCurrentView('calendar')}">
-              <a @click="toggleView('calendar')" class="subnav-aside__close"><i class="ico--close"></i></a>
+              <a @click="toggleView('calendar')" class="subnav-aside__close"><i class="ico--cross"></i></a>
               <div class="container container--default">
                   <ui-calendar-renderer :events="events" :on-show-more="onShowMore" :has-more="hasMore" :name="'Krajský kalendář'"></ui-calendar-renderer>
               </div>

source/_patterns/02-organisms/01-navbar/navbar.mustache

@@ -28,25 +28,34 @@
                 <a href="#" data-href="{{ link.templates-homepage }}" class="navbar-menu__link">Hlavní strana</a>
               </li>
               <li class="navbar-menu__item">
-                <ui-navbar-subitem label="Lidé">
-                  <ul class="navbar-menu__submenu">
-                    <li><a href="#" data-href="{{ link.templates-people }}" class="navbar-menu__link">Delší link co je delší než hlavní menu položka</a></li>
-                  </ul>
-                </ui-navbar-subtitem>
+                <ui-navbar-subitem-replacing label="Lidé" items="[[&quot;Delší link co je delší než hlavní menu položka&quot;, &quot;{{ link.templates-people }}&quot;]]">
+                  <span class="navbar-menu__link navbar-menu__submenu-toggle">Lidé</span>
+                  <div class="navbar-menu__submenu-wrap">
+                    <ul class="navbar-menu__submenu">
+                      <li><a href="#" data-href="{{ link.templates-people }}" class="navbar-menu__link">Delší link co je delší než hlavní menu položka</a></li>
+                    </ul>
+                  </div>
+                </ui-navbar-subtitem-replacing>
               </li>
               <li class="navbar-menu__item">
-                <ui-navbar-subitem label="Aktuality" href="{{ link.templates-article-listing }}">
-                  <ul class="navbar-menu__submenu">
-                    <li><a href="#" data-href="{{ link.templates-article-detail }}" class="navbar-menu__link">Detail aktuality</a></li>
-                  </ul>
-                </ui-navbar-subtitem>
+                <ui-navbar-subitem-replacing label="Aktuality" href="{{ link.templates-article-listing }}" items="[[&quot;Detail aktuality&quot;, &quot;{{ link.templates-article-detail }}&quot;]]">
+                  <a href="{{ link.templates-article-listing }}" class="navbar-menu__link navbar-menu__submenu-toggle">Lidé</a>
+                  <div class="navbar-menu__submenu-wrap">
+                    <ul class="navbar-menu__submenu">
+                      <li><a href="#" data-href="{{ link.templates-article-detail }}" class="navbar-menu__link">Detail aktuality</a></li>
+                    </ul>
+                  </div>
+                </ui-navbar-subtitem-replacing>
               </li>
               <li class="navbar-menu__item">
-                <ui-navbar-subitem label="Volby">
-                  <ul class="navbar-menu__submenu">
-                    <li><a href="#" data-href="{{ link.templates-elections }}" class="navbar-menu__link">Volební rozcestník</a></li>
-                  </ul>
-                </ui-navbar-subtitem>
+                <ui-navbar-subitem-replacing label="Volby" items="[[&quot;Volební rozcestník&quot;, &quot;{{ link.templates-elections }}&quot;]]">
+                  <span class="navbar-menu__link navbar-menu__submenu-toggle">Volby</span>
+                  <div class="navbar-menu__submenu-wrap">
+                    <ul class="navbar-menu__submenu">
+                      <li><a href="#" data-href="{{ link.templates-elections }}" class="navbar-menu__link">Volební rozcestník</a></li>
+                    </ul>
+                  </div>
+                </ui-navbar-subtitem-replacing>
               </li>
               <li class="navbar-menu__item">
                 <a href="#" data-href="{{ link.templates-pirate-center }}" class="navbar-menu__link">Pirátské centrum</a>