hr-design-system-handlebars 0.117.12 → 0.117.14

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# v0.117.14 (Mon Jan 16 2023)
+
+#### 🐛 Bug Fix
+
+- SEO - Content Nav Verursacht CLS. JS Styling ausbauen [#478](https://github.com/mumprod/hr-design-system-handlebars/pull/478) ([@vascoeduardo](https://github.com/vascoeduardo))
+
+#### Authors: 1
+
+- Vasco ([@vascoeduardo](https://github.com/vascoeduardo))
+
+---
+
+# v0.117.13 (Fri Jan 13 2023)
+
+#### 🐛 Bug Fix
+
+- truncate button-text in ClusterTeaser & Tabbox [#477](https://github.com/mumprod/hr-design-system-handlebars/pull/477) (saad.elbaciri@hr.de [@selbaciri](https://github.com/selbaciri))
+
+#### Authors: 2
+
+- Saad El Baciri ([@selbaciri](https://github.com/selbaciri))
+- selbaciri (saad.elbaciri@hr.de)
+
+---
+
 # v0.117.12 (Fri Jan 13 2023)
 
 #### 🐛 Bug Fix

package/dist/assets/index.css

@@ -423,7 +423,7 @@ video {
   --tw-scale-y: 1;
 }
 
-.btn--secondary, .ds-focus, .ds-focus:not(:focus-visible), .ds-teaser-focus::before, span, .ds-teaser-focus:not(:focus-visible)::before, .shadow-\[1px_4px_5px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\], .\!shadow-\[1px_8px_9px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\], .shadow-inner, .shadow-xl, .shadow, .before\:shadow-stage::before {
+.btn--secondary, .ds-focus, .ds-focus:not(:focus-visible), .ds-teaser-focus::before, span, .ds-teaser-focus:not(:focus-visible)::before, .-isOpen, .shadow-inner, .shadow-xl, .shadow, .before\:shadow-stage::before {
   --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
   --tw-ring-shadow: 0 0 rgba(0,0,0,0);
   --tw-shadow: 0 0 rgba(0,0,0,0);
@@ -641,6 +641,219 @@ video {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
+/* ----------------Content NAV------------------ */
+/* ---------------- NAV ITEMS ------------------ */
+.content-nav-item {
+  height: 2.5rem;
+  overflow: hidden;
+  font-size: 1rem;
+  line-height: 1.375rem;
+  font-family: DIN, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+  list-style-type: none;
+  border-color: #005293;
+  border-color: var(--color-button);
+  fill: #005293;
+  fill: var(--color-content-nav);
+  color: #005293;
+  color: var(--color-content-nav);
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+}
+.content-nav-item:hover {
+  background-color: #005293;
+  background-color: var(--color-content-nav);
+  fill: #ffffff;
+  --tw-text-opacity: 1;
+  color: rgba(255, 255, 255, var(--tw-text-opacity));
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline;
+}
+/* ----------------LIST - NAV ITEMS ------------------ */
+.content-nav-item.content-nav-item-list {
+  width: 100%;
+  border-width: 1px;
+}
+.content-nav-item.content-nav-item-list:hover {
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
+}
+.teaser-size-100 .content-nav-item.content-nav-item-list, 
+    .teaser-size-66 .content-nav-item.content-nav-item-list {
+  width: 100%;
+}
+@media (min-width: 768px) {
+
+  .teaser-size-100 .content-nav-item.content-nav-item-list, 
+    .teaser-size-66 .content-nav-item.content-nav-item-list {
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
+  }
+}
+/* ----------------FLOW - NAV ITEMS ------------------ */
+.content-nav-item.content-nav-item-flow {
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+  border-width: 1px;
+}
+.content-nav-item.content-nav-item-flow:hover {
+  -webkit-text-decoration-line: none;
+          text-decoration-line: none;
+}
+/* ----------------MIXED - NAV ITEMS ------------------ */
+@media (min-width: 768px) {
+
+  .teaser-size-100 .content-nav-item.content-nav-item-mixed, 
+    .teaser-size-66 .content-nav-item.content-nav-item-mixed {
+    border-width: 1px !important;
+  }
+
+  .teaser-size-100 .content-nav-item.content-nav-item-mixed, 
+    .teaser-size-66 .content-nav-item.content-nav-item-mixed {
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
+    margin-bottom: 0.5rem;
+    margin-left: 0px;
+    margin-right: 0px;
+    margin-right: 0.5rem;
+    border-color: #005293;
+    border-color: var(--color-content-nav);
+  }
+
+  .teaser-size-100 .content-nav-item.content-nav-item-mixed:hover, 
+    .teaser-size-66 .content-nav-item.content-nav-item-mixed:hover {
+    background-color: #005293 !important;
+    background-color: var(--color-content-nav) !important;
+    fill: #ffffff !important;
+  }
+
+  .teaser-size-100 .content-nav-item.content-nav-item-mixed:hover, 
+    .teaser-size-66 .content-nav-item.content-nav-item-mixed:hover {
+    -webkit-text-decoration-line: none;
+            text-decoration-line: none;
+    --tw-text-opacity: 1;
+    color: rgba(255, 255, 255, var(--tw-text-opacity));
+  }
+}
+.content-nav-item.content-nav-item-mixed {
+  width: 100%;
+  margin-bottom: 0px;
+  border-left-width: 0px;
+  border-right-width: 0px;
+  border-top-width: 0px;
+  border-bottom-width: 1px;
+}
+.content-nav-item.content-nav-item-mixed:last-child {
+  border-bottom-width: 0px;
+}
+.content-nav-item.content-nav-item-mixed {
+  --tw-border-opacity: 1;
+  border-color: rgba(156, 163, 175, var(--tw-border-opacity));
+}
+.content-nav-item.content-nav-item-mixed:hover {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity)) !important;
+  fill: #005293 !important;
+  fill: var(--color-content-nav) !important;
+}
+.content-nav-item.content-nav-item-mixed:hover {
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline;
+  color: #005293;
+  color: var(--color-content-nav);
+}
+/* ----------------DROPDOWN - NAV ITEMS ------------------ */
+.content-nav-item.content-nav-item-dropdown {
+  width: 100%;
+  --tw-border-opacity: 1;
+  border-color: rgba(156, 163, 175, var(--tw-border-opacity));
+  border-bottom-width: 1px;
+}
+.content-nav-item.content-nav-item-dropdown:last-child {
+  border-bottom-width: 0px;
+}
+.content-nav-item.content-nav-item-dropdown:hover {
+  --tw-bg-opacity: 1 !important;
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity)) !important;
+  fill: #005293 !important;
+  fill: var(--color-content-nav) !important;
+}
+.content-nav-item.content-nav-item-dropdown:hover {
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline;
+  color: #005293;
+  color: var(--color-content-nav);
+}
+/* ---------------- NAV DROPDOWN - DROPDOWN ------------------ */
+.content-nav-dropdown_dropdown.-isDropdown {
+  display: flex;
+}
+.content-nav-dropdown_dropdown.-isMixed {
+  display: flex;
+}
+.teaser-size-100 .content-nav-dropdown_dropdown.-isMixed, 
+    .teaser-size-66 .content-nav-dropdown_dropdown.-isMixed {
+  display: flex;
+}
+@media (min-width: 768px) {
+
+  .teaser-size-100 .content-nav-dropdown_dropdown.-isMixed, 
+    .teaser-size-66 .content-nav-dropdown_dropdown.-isMixed {
+    display: none;
+  }
+}
+/* ---------------- NAV DROPDOWN - CONTENT ------------------ */
+.content-nav-dropdown_content.-isOpen {
+  z-index: 9999;
+  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
+  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
+}
+.content-nav-dropdown_content.-isDropdown.-isClosed {
+  z-index: 1003;
+  display: none;
+}
+/* ---------------- NAV DROPDOWN - CONTENT - MIXED------------------ */
+.content-nav-dropdown_content.-isMixed {
+  display: none;
+}
+@media (min-width: 768px) {
+
+  .teaser-size-100 .content-nav-dropdown_content.-isMixed, 
+    .teaser-size-66 .content-nav-dropdown_content.-isMixed {
+    display: block;
+  }
+}
+.content-nav-dropdown_content.-isMixed.-isOpen {
+  display: block;
+}
+@media (min-width: 768px) {
+
+  .teaser-size-100 .content-nav-dropdown_content.-isMixed.-isOpen, 
+    .teaser-size-66 .content-nav-dropdown_content.-isMixed.-isOpen {
+    --tw-shadow: 0 0 rgba(0,0,0,0);
+    --tw-shadow-colored: 0 0 rgba(0,0,0,0);
+    box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
+    box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
+  }
+}
+.teaser-size-100 .content-nav-dropdown_content.-isMixed.-isClosed, 
+    .teaser-size-66 .content-nav-dropdown_content.-isMixed.-isClosed {
+  z-index: 1003;
+  display: none;
+}
+@media (min-width: 768px) {
+
+  .teaser-size-100 .content-nav-dropdown_content.-isMixed.-isClosed, 
+    .teaser-size-66 .content-nav-dropdown_content.-isMixed.-isClosed {
+    display: block;
+  }
+}
 .sr-only {
   position: absolute;
   width: 1px;
@@ -719,9 +932,6 @@ video {
 .z-100 {
   z-index: 100;
 }
-.z-9999 {
-  z-index: 9999;
-}
 .z-1003 {
   z-index: 1003;
 }
@@ -922,18 +1132,6 @@ video {
 .mt-14 {
   margin-top: 3.5rem;
 }
-.\!mb-0 {
-  margin-bottom: 0px !important;
-}
-.ml-0 {
-  margin-left: 0px;
-}
-.mb-2 {
-  margin-bottom: 0.5rem;
-}
-.\!mr-2 {
-  margin-right: 0.5rem !important;
-}
 .block {
   display: block;
 }
@@ -1100,14 +1298,6 @@ video {
 .w-0 {
   width: 0px;
 }
-.\!w-full {
-  width: 100% !important;
-}
-.\!w-fit {
-  width: -webkit-fit-content !important;
-  width: -moz-fit-content !important;
-  width: fit-content !important;
-}
 .min-w-0 {
   min-width: 0px;
 }
@@ -1125,6 +1315,9 @@ video {
 .max-w-xs {
   max-width: 20rem;
 }
+.flex-1 {
+  flex: 1 1 0%;
+}
 .flex-initial {
   flex: 0 1 auto;
 }
@@ -1410,15 +1603,6 @@ video {
 .border-l-2 {
   border-left-width: 2px;
 }
-.border-l-0 {
-  border-left-width: 0px;
-}
-.border-r-0 {
-  border-right-width: 0px;
-}
-.border-t-0 {
-  border-top-width: 0px;
-}
 .border-solid {
   border-style: solid;
 }
@@ -1445,10 +1629,6 @@ video {
   border-color: #005293;
   border-color: var(--color-content-nav);
 }
-.border-button {
-  border-color: #005293;
-  border-color: var(--color-button);
-}
 .border-gray-400 {
   --tw-border-opacity: 1;
   border-color: rgba(156, 163, 175, var(--tw-border-opacity));
@@ -1465,6 +1645,10 @@ video {
   border-color: #005293;
   border-color: var(--color-cluster-teaser-headline,#000);
 }
+.border-button {
+  border-color: #005293;
+  border-color: var(--color-button);
+}
 .bg-red-200 {
   --tw-bg-opacity: 1;
   background-color: rgba(254, 202, 202, var(--tw-bg-opacity));
@@ -1677,10 +1861,6 @@ video {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
-.px-0 {
-  padding-left: 0px;
-  padding-right: 0px;
-}
 .\!px-0 {
   padding-left: 0px !important;
   padding-right: 0px !important;
@@ -1721,6 +1901,10 @@ video {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
+.px-0 {
+  padding-left: 0px;
+  padding-right: 0px;
+}
 .py-5 {
   padding-top: 1.25rem;
   padding-bottom: 1.25rem;
@@ -2104,20 +2288,6 @@ video {
 .opacity-85 {
   opacity: .85;
 }
-.shadow-\[1px_4px_5px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\] {
-  --tw-shadow: 1px 4px 5px 0px rgba(50,50,93,0.10);
-  --tw-shadow-colored: 1px 4px 5px 0px var(--tw-shadow-color);
-  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
-  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow);
-}
-.\!shadow-\[1px_8px_9px_0px_rgba\(50\2c 50\2c 93\2c 0\.10\)\] {
-  --tw-shadow: 1px 8px 9px 0px rgba(50,50,93,0.10) !important;
-  --tw-shadow-colored: 1px 8px 9px 0px var(--tw-shadow-color) !important;
-  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow) !important;
-  box-shadow: 0 0 rgba(0,0,0,0), 0 0 rgba(0,0,0,0), var(--tw-shadow) !important;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0,0,0,0)), var(--tw-ring-shadow, 0 0 rgba(0,0,0,0)), var(--tw-shadow) !important;
-}
 .shadow-inner {
   --tw-shadow: inset 0 0px 5px 0 rgba(0, 0, 0, 0.25);
   --tw-shadow-colored: inset 0 0px 5px 0 var(--tw-shadow-color);
@@ -2227,7 +2397,7 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 .counter-reset {
-  counter-reset: cnt1673621487330;
+  counter-reset: cnt1673895647559;
 }
 .line-clamp-4 {
   overflow: hidden;
@@ -2459,7 +2629,7 @@ video {
   --tw-ring-color: rgba(255, 255, 255, 0.5);
 }
 .-ordered {
-  counter-increment: cnt1673621487330 1;
+  counter-increment: cnt1673895647559 1;
 }
 .-ordered::before {
   position: absolute;
@@ -2475,7 +2645,7 @@ video {
   letter-spacing: .0125em;
   --tw-text-opacity: 1;
   color: rgba(0, 0, 0, var(--tw-text-opacity));
-  content: counter(cnt1673621487330);
+  content: counter(cnt1673895647559);
 }
 /*! ****************************/
 /*! text-shadow                */
@@ -3284,9 +3454,6 @@ video {
 .first\:font-bold:first-child {
   font-weight: 700;
 }
-.last\:mb-0:last-child {
-  margin-bottom: 0px;
-}
 .last\:border-b-0:last-child {
   border-bottom-width: 0px;
 }
@@ -3317,21 +3484,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgba(203, 213, 225, var(--tw-bg-opacity));
 }
-.hover\:bg-content-nav:hover {
-  background-color: #005293;
-  background-color: var(--color-content-nav);
-}
 .hover\:bg-blue-congress:hover {
   --tw-bg-opacity: 1;
   background-color: rgba(0, 82, 147, var(--tw-bg-opacity));
 }
-.hover\:\!bg-white:hover {
-  --tw-bg-opacity: 1 !important;
-  background-color: rgba(255, 255, 255, var(--tw-bg-opacity)) !important;
-}
-.hover\:fill-white:hover {
-  fill: #ffffff;
-}
 .hover\:fill-orange-spicyCarrot:hover {
   fill: #d34600;
 }
@@ -3342,20 +3498,6 @@ video {
   fill: #006dc1;
   fill: var(--color-topline);
 }
-.hover\:\!fill-content-nav:hover {
-  fill: #005293 !important;
-  fill: var(--color-content-nav) !important;
-}
-.hover\:fill-content-nav:hover {
-  fill: #005293;
-  fill: var(--color-content-nav);
-}
-.hover\:\!fill-blue-congress:hover {
-  fill: #005293 !important;
-}
-.hover\:fill-blue-congress:hover {
-  fill: #005293;
-}
 .hover\:text-button-hollow:hover {
   color: #006dc1;
   color: var(--color-button-hollow);
@@ -3368,30 +3510,10 @@ video {
   color: #006dc1;
   color: var(--color-topline);
 }
-.hover\:text-content-nav:hover {
-  color: #005293;
-  color: var(--color-content-nav);
-}
-.hover\:\!text-content-nav:hover {
-  color: #005293 !important;
-  color: var(--color-content-nav) !important;
-}
-.hover\:text-blue-congress:hover {
-  --tw-text-opacity: 1;
-  color: rgba(0, 82, 147, var(--tw-text-opacity));
-}
-.hover\:\!text-blue-congress:hover {
-  --tw-text-opacity: 1 !important;
-  color: rgba(0, 82, 147, var(--tw-text-opacity)) !important;
-}
 .hover\:underline:hover {
   -webkit-text-decoration-line: underline;
           text-decoration-line: underline;
 }
-.hover\:no-underline:hover {
-  -webkit-text-decoration-line: none;
-          text-decoration-line: none;
-}
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -3684,30 +3806,6 @@ video {
     margin-bottom: 4rem;
   }
 
-  .md\:\!mb-2 {
-    margin-bottom: 0.5rem !important;
-  }
-
-  .md\:mr-2 {
-    margin-right: 0.5rem;
-  }
-
-  .md\:mb-0 {
-    margin-bottom: 0px;
-  }
-
-  .md\:\!mr-0 {
-    margin-right: 0px !important;
-  }
-
-  .md\:\!mr-2 {
-    margin-right: 0.5rem !important;
-  }
-
-  .md\:mb-2 {
-    margin-bottom: 0.5rem;
-  }
-
   .md\:block {
     display: block;
   }
@@ -3792,22 +3890,6 @@ video {
     width: 5.5rem;
   }
 
-  .md\:w-fit {
-    width: -webkit-fit-content;
-    width: -moz-fit-content;
-    width: fit-content;
-  }
-
-  .md\:\!w-fit {
-    width: -webkit-fit-content !important;
-    width: -moz-fit-content !important;
-    width: fit-content !important;
-  }
-
-  .md\:\!w-full {
-    width: 100% !important;
-  }
-
   .md\:max-w-1\/2 {
     max-width: 50%;
   }
@@ -3872,14 +3954,6 @@ video {
     border-width: 0px;
   }
 
-  .md\:\!border {
-    border-width: 1px !important;
-  }
-
-  .md\:border {
-    border-width: 1px;
-  }
-
   .md\:border-r {
     border-right-width: 1px;
   }
@@ -3897,16 +3971,6 @@ video {
     border-color: rgba(255, 255, 255, var(--tw-border-opacity));
   }
 
-  .md\:border-content-nav {
-    border-color: #005293;
-    border-color: var(--color-content-nav);
-  }
-
-  .md\:border-blue-congress {
-    --tw-border-opacity: 1;
-    border-color: rgba(0, 82, 147, var(--tw-border-opacity));
-  }
-
   .md\:bg-transparent {
     background-color: transparent;
   }
@@ -4092,39 +4156,6 @@ video {
     .md\:first-of-type\:pt-0:first-of-type {
     padding-top: 0px;
   }
-
-    .md\:hover\:\!bg-content-nav:hover {
-    background-color: #005293 !important;
-    background-color: var(--color-content-nav) !important;
-  }
-
-    .md\:hover\:\!bg-blue-congress:hover {
-    --tw-bg-opacity: 1 !important;
-    background-color: rgba(0, 82, 147, var(--tw-bg-opacity)) !important;
-  }
-
-    .md\:hover\:\!fill-white:hover {
-    fill: #ffffff !important;
-  }
-
-    .md\:hover\:fill-white:hover {
-    fill: #ffffff;
-  }
-
-    .md\:hover\:text-white:hover {
-    --tw-text-opacity: 1;
-    color: rgba(255, 255, 255, var(--tw-text-opacity));
-  }
-
-    .md\:hover\:\!text-white:hover {
-    --tw-text-opacity: 1 !important;
-    color: rgba(255, 255, 255, var(--tw-text-opacity)) !important;
-  }
-
-    .md\:hover\:no-underline:hover {
-    -webkit-text-decoration-line: none;
-            text-decoration-line: none;
-  }
 }
 @media (min-width: 1024px) {