source/_patterns/00-atoms/03-buttons/loading-button.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-basic-button(classes: "text-sm btn--loading" )}}
+    {{> atoms-basic-button(classes: "text-base btn--loading" )}}
+    {{> atoms-basic-button(classes: "text-lg btn--loading" )}}
+  </div>
+</div>

source/_patterns/00-atoms/04-animations/ping.mustache

+<span class="inline-flex h-4 w-4 mr-4 relative">
+  <span class="animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 bg-green-400"></span>
+  <span class="relative inline-flex rounded-full w-4 h-4 mr-4 bg-green-400" title="Online"></span>
+</span>

source/_patterns/00-atoms/15-form-fields/13-textarea.mustache

-<textarea class="text-input form-field__control {{ classes }}" value="" rows="10" cols="40" placeholder="{{ placeholder }}{{^ placeholder }}{{ form.placeholder }}{{/ placeholder }}" {{# disabled }}disabled{{/ disabled }} {{# readonly }}readonly{{/ readonly }}></textarea>
+<textarea class="text-input form-field__control {{ classes }}" value="" rows="{{ rows }}{{^ rows }}10{{/ rows }}" cols="40" placeholder="{{ placeholder }}{{^ placeholder }}{{ form.placeholder }}{{/ placeholder }}" {{# disabled }}disabled{{/ disabled }} {{# readonly }}readonly{{/ readonly }}>{{ textareaContent }}</textarea>

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

+<div class="card">
+  <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--cross"></i></button>
+    </div>
+    <p class="card-body-text">Opravdu chcete ukončit rozpravu?</p>
+  </div>
+  <div class="card-actions space-x-1">
+    {{> atoms-basic-button(classes: "btn--blue-300 text-sm", cta: "Ukončit") }}
+    {{> atoms-basic-button(classes: "btn--red-600 text-sm", cta: "Zrušit") }}
+  </div>
+</div>
+
+
+<div class="card">
+  <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--cross"></i></button>
+    </div>
+    <p class="card-body-text">Opravdu chcete ukončit rozpravu?</p>
+  </div>
+  <div class="card-actions card-actions--right space-x-1">
+    {{> atoms-basic-button(classes: "btn--blue-300 text-sm", cta: "Ukončit") }}
+    {{> atoms-basic-button(classes: "btn--red-600 text-sm", cta: "Zrušit") }}
+  </div>
+</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é">
+    <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>
-    </ui-navbar-subtitem>
+      </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/16-chips/chip-colors.mustache

@@ -8,6 +8,7 @@
     {{> molecules-chip(classes: "chip--cyan-200") }}
     {{> molecules-chip(classes: "chip--cyan-500") }}
     {{> molecules-chip(classes: "chip--green-300") }}
+    {{> molecules-chip(classes: "chip--green-400") }}
     {{> molecules-chip(classes: "chip--orange-300") }}
     {{> molecules-chip(classes: "chip--violet-400") }}
     {{> molecules-chip(classes: "chip--violet-500") }}

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-2 py-3" href="#">Přidat jako návrh postupu</a>
-        </li>
-        <li class="dropdown-button__choice hover:bg-grey-125">
-          <a class="block px-2 py-3" href="#">Přidat jako oznámení</a>
+          <a class="block px-4 py-3" href="#">Navrhnout postup</a>
         </li>
       </ul>
+    </button>
   </div>
 </div>
-</button>