@prokodo/ui 0.1.11 → 0.1.13

package/dist/theme.css

@@ -287,6 +287,9 @@
   display: flex;
   flex-direction: column;
 }
+.prokodo-Accordion--panel {
+  gap: 0;
+}
 .prokodo-Accordion__item {
   border: 1px solid var(--color-grey-200);
   border-radius: 0.75rem;
@@ -298,6 +301,12 @@
 .prokodo-Accordion__item--is-expanded {
   border-color: var(--color-primary-500);
 }
+.prokodo-Accordion__item--panel {
+  border-radius: 0;
+  margin-bottom: 0;
+  box-shadow: none;
+  border: none;
+}
 .prokodo-Accordion__header {
   display: flex;
   align-items: center;
@@ -358,6 +367,43 @@
   animation: none !important;
   box-shadow: var(--elevation-1);
 }
+.prokodo-Accordion__header__wrapper--panel {
+  position: relative;
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: linear-gradient(var(--header-bg, var(--color-white)), var(--header-bg, var(--color-white)));
+  border-radius: 0;
+}
+.prokodo-Accordion__header__wrapper--panel::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 2px;
+  background: linear-gradient(90deg, var(--color-primary-500), var(--color-secondary-500), var(--color-primary-500));
+  background-size: 0% 100%;
+  background-position: 0 0;
+  background-repeat: no-repeat;
+  transition: background-size 0.35s ease;
+}
+.prokodo-Accordion__header__wrapper--panel:hover, .prokodo-Accordion__header__wrapper--panel:focus-visible {
+  animation: none;
+}
+.prokodo-Accordion__header__wrapper--panel:hover::after, .prokodo-Accordion__header__wrapper--panel:focus-visible::after {
+  background-size: 200% 100%;
+  animation: accordionBorderShift 2s linear;
+}
+.prokodo-Accordion__header__wrapper--panel--is-expanded {
+  border-radius: 0;
+  box-shadow: none;
+  animation: none !important;
+}
+.prokodo-Accordion__header__wrapper--panel--is-expanded::after {
+  background-size: 100% 100%;
+  background-position: 100% 0;
+  animation: none !important;
+}
 .prokodo-Accordion__title {
   width: calc(100% - 20px);
   margin: 0;
@@ -473,6 +519,197 @@ html[data-theme=dark] .prokodo-Accordion__icon {
   transition: opacity 1500ms ease-out, transform 500ms ease-out, visibility 1500ms ease-out;
 }
 
+@keyframes fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.prokodo-Autocomplete {
+  position: relative;
+}
+.prokodo-Autocomplete__inputWrap {
+  position: relative;
+  z-index: 41;
+  border-radius: 1.5rem;
+}
+.prokodo-Autocomplete__input {
+  width: 100%;
+}
+.prokodo-Autocomplete__input__inner--is-open, .prokodo-Autocomplete__input__node--is-open {
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+.prokodo-Autocomplete__input__inner--is-open {
+  background: var(--gradient-border-4);
+}
+.prokodo-Autocomplete__list {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: calc(100% - 4px);
+  margin: 0;
+  padding: 0 2px 2px;
+  list-style: none;
+  transform: none;
+  border-bottom-left-radius: 1.5rem;
+  border-bottom-right-radius: 1.5rem;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  background: var(--gradient-border-4);
+  margin-top: -2px;
+  box-shadow: var(--elevation-3);
+  max-height: 260px;
+  overflow: auto;
+  z-index: 50;
+  animation: fade-in 180ms ease-out;
+  scrollbar-width: none;
+}
+.prokodo-Autocomplete__list::-webkit-scrollbar {
+  display: none;
+}
+.prokodo-Autocomplete__state {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0.5rem 1rem 1rem 1rem;
+  background: var(--color-white);
+  color: var(--color-grey-700);
+  border-bottom-left-radius: 1.5rem;
+  border-bottom-right-radius: 1.5rem;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Autocomplete__state {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Autocomplete__state {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+html[data-theme=dark] .prokodo-Autocomplete__state {
+  background: rgb(16, 19, 27);
+  color: var(--color-grey-500);
+}
+.prokodo-Autocomplete__itemRow {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.prokodo-Autocomplete__itemRow--is-last {
+  border-bottom-left-radius: 1.5rem;
+  border-bottom-right-radius: 1.5rem;
+}
+.prokodo-Autocomplete__item {
+  width: 100%;
+  border: none;
+  background: var(--color-white);
+  color: inherit;
+  text-align: left;
+  display: grid;
+  grid-gap: 0.25rem;
+  gap: 0.25rem;
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+  transition: background-color 120ms ease;
+}
+html[data-theme=dark] .prokodo-Autocomplete__item {
+  background: rgb(16, 19, 27);
+}
+.prokodo-Autocomplete__item:hover {
+  background: var(--color-primary-50);
+}
+html[data-theme=dark] .prokodo-Autocomplete__item:hover {
+  background: var(--color-primary-50);
+}
+.prokodo-Autocomplete__item:focus-visible {
+  outline: 0;
+  background: var(--color-primary-50);
+}
+html[data-theme=dark] .prokodo-Autocomplete__item:focus-visible {
+  background: var(--color-primary-50);
+}
+.prokodo-Autocomplete__item--is-first {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.prokodo-Autocomplete__item--is-last {
+  border-bottom-left-radius: 1.5rem;
+  border-bottom-right-radius: 1.5rem;
+}
+.prokodo-Autocomplete__item--is-active {
+  background: var(--color-primary-100);
+}
+html[data-theme=dark] .prokodo-Autocomplete__item--is-active {
+  background: var(--color-primary-100);
+}
+.prokodo-Autocomplete__itemLabel {
+  margin: 0;
+  color: var(--color-grey-900);
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Autocomplete__itemLabel {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Autocomplete__itemLabel {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-Autocomplete__itemDescription {
+  margin: 0;
+  color: var(--color-grey-700);
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Autocomplete__itemDescription {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Autocomplete__itemDescription {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
 .prokodo-Avatar {
   position: relative;
   display: flex;
@@ -667,6 +904,7 @@ html[data-theme=dark] .prokodo-Button--has-variant-outlined {
   background: none;
 }
 .prokodo-Button--has-image, .prokodo-Button--has-icon {
+  display: flex;
   align-items: center;
 }
 .prokodo-Button--icon-only {
@@ -763,6 +1001,15 @@ html[data-theme=dark] .prokodo-Button--has-variant-outlined {
 html[data-theme=dark] .prokodo-Card--white {
   background-color: transparent;
 }
+.prokodo-Card--panel {
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  /* in light mode trotzdem lesbar */
+}
+html:not([data-theme=dark]) .prokodo-Card--panel {
+  background: var(--color-white);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
 .prokodo-Card__skeleton {
   position: absolute;
   z-index: 3;
@@ -2144,7 +2391,6 @@ html[data-theme=dark] .prokodo-DynamicList__helperText {
   position: relative;
   display: flex;
   flex-direction: column;
-  justify-content: space-around;
   height: 100%;
   width: 100%;
 }
@@ -2176,6 +2422,9 @@ html[data-theme=dark] .prokodo-DynamicList__helperText {
     background-color: var(--color-white);
     padding: 0 0.25rem;
   }
+  html[data-theme=dark] .prokodo-Input__label--is-focused {
+    background-color: rgb(16, 19, 27);
+  }
 }
 .prokodo-Input__inner {
   position: relative;
@@ -2212,6 +2461,13 @@ html[data-theme=dark] .prokodo-DynamicList__helperText {
   background-color: var(--color-white);
   color: var(--color-grey-900);
 }
+html[data-theme=dark] .prokodo-Input__input input:-webkit-autofill, html[data-theme=dark] .prokodo-Input__input textarea:-webkit-autofill {
+  background-color: rgb(16, 19, 27);
+}
+html[data-theme=dark] .prokodo-Input__input input:autofill,
+html[data-theme=dark] .prokodo-Input__input textarea:autofill {
+  background-color: rgb(16, 19, 27);
+}
 .prokodo-Input__input input:-webkit-autofill,
 .prokodo-Input__input input:-webkit-autofill:hover,
 .prokodo-Input__input input:-webkit-autofill:focus,
@@ -2232,6 +2488,10 @@ html[data-theme=dark] .prokodo-DynamicList__helperText {
   background-color: var(--color-white);
   color: var(--color-grey-900);
 }
+html[data-theme=dark] .prokodo-Input__input input:-moz-autofill,
+html[data-theme=dark] .prokodo-Input__input textarea:-moz-autofill {
+  background-color: rgb(16, 19, 27);
+}
 .prokodo-Input__input input:is(:-webkit-autofill, :-webkit-autofill), .prokodo-Input__input textarea:is(:-webkit-autofill, :-webkit-autofill) {
   border-color: none; /* adjust as needed */
 }
@@ -2266,8 +2526,8 @@ html[data-theme=dark] .prokodo-DynamicList__helperText {
   background: var(--gradient-border-8);
 }
 .prokodo-Input__input__node {
-  width: calc(100% - 1.5rem - 1.5rem - 0.25rem);
-  padding: 0.875rem 1.5rem;
+  width: calc(100% - 1rem - 1rem - 0.25rem);
+  padding: 0.875rem 1rem;
   margin: 2px;
   border: none;
   outline: none;
@@ -2294,6 +2554,9 @@ html[data-theme=dark] .prokodo-DynamicList__helperText {
     font-size: 1rem;
   }
 }
+html[data-theme=dark] .prokodo-Input__input__node {
+  background-color: rgb(16, 19, 27);
+}
 .prokodo-Input__input__node {
   font-size: 1rem;
 }
@@ -2322,9 +2585,12 @@ html[data-theme=dark] .prokodo-DynamicList__helperText {
   pointer-events: none;
 }
 .prokodo-Input__input__node:disabled {
-  color: var(--color-grey-300);
+  color: var(--color-grey-700);
   background: var(--color-white);
 }
+html[data-theme=dark] .prokodo-Input__input__node:disabled {
+  background-color: rgb(16, 19, 27);
+}
 .prokodo-Input__input:focus {
   border-color: var(--color-primary-500);
   box-shadow: 0 0 5px var(--color-primary-500);
@@ -3636,7 +3902,6 @@ html[data-theme=dark] .prokodo-RichText__pre {
 .prokodo-RichText__ul, .prokodo-RichText__ol {
   padding: 0;
   list-style-type: none;
-  color: var(--color-grey-500);
 }
 .prokodo-RichText__li {
   display: flex;
@@ -3724,22 +3989,19 @@ html[data-theme=dark] .prokodo-RichText__pre {
 
 /* fade-in / out for the popup ------------------------------------------------ */
 @keyframes fade-in {
-  0% {
+  from {
     opacity: 0;
-    transform: scale(0.95, 0.8);
   }
-  100% {
+  to {
     opacity: 1;
   }
 }
 @keyframes fade-out {
-  0% {
+  from {
     opacity: 1;
-    transform: scale(1, 1);
   }
-  100% {
+  to {
     opacity: 0;
-    transform: scale(0.95, 0.8);
   }
 }
 .prokodo-Select {
@@ -3777,6 +4039,9 @@ html[data-theme=dark] .prokodo-RichText__pre {
     -webkit-box-orient: vertical;
     overflow: hidden;
   }
+  html[data-theme=dark] .prokodo-Select__label {
+    background-color: rgb(16, 19, 27);
+  }
 }
 .prokodo-Select__field {
   position: relative;
@@ -3786,6 +4051,7 @@ html[data-theme=dark] .prokodo-RichText__pre {
 }
 .prokodo-Select__field--expanded {
   box-shadow: none;
+  z-index: 100;
 }
 .prokodo-Select__button {
   box-sizing: border-box;
@@ -3816,7 +4082,7 @@ html[data-theme=dark] .prokodo-RichText__pre {
   background: var(--gradient-border-4);
 }
 .prokodo-Select__button:disabled {
-  color: var(--color-grey-300);
+  color: var(--color-grey-700);
   cursor: default;
   background: var(--gradient-border-8);
 }
@@ -3848,9 +4114,8 @@ html[data-theme=dark] .prokodo-RichText__pre {
   align-items: center;
   padding: 0.875rem 1rem;
   margin: 2px;
-  background: var(--color-white);
-  border-radius: 1.5rem;
   background-color: var(--color-white);
+  border-radius: 1.5rem;
   font-weight: 400;
   font-size: 1.125rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -3871,6 +4136,9 @@ html[data-theme=dark] .prokodo-RichText__pre {
     font-size: 1rem;
   }
 }
+html[data-theme=dark] .prokodo-Select__button__inner {
+  background-color: rgb(16, 19, 27);
+}
 .prokodo-Select__button__inner {
   font-size: 1rem;
 }
@@ -3884,10 +4152,9 @@ html[data-theme=dark] .prokodo-RichText__pre {
   color: var(--color-grey-500);
 }
 .prokodo-Select__button__inner--is-placeholder--disabled {
-  color: var(--color-grey-300);
+  color: var(--color-grey-500);
 }
 .prokodo-Select__listbox {
-  position: absolute;
   box-sizing: border-box;
   padding: 2px;
   margin: -2px 0 0 0;
@@ -3901,7 +4168,7 @@ html[data-theme=dark] .prokodo-RichText__pre {
   background: var(--gradient-border-4);
   box-shadow: var(--elevation-3);
   scrollbar-width: none;
-  z-index: 10;
+  z-index: 2147483647;
   /* animation – your JS toggles .is-open / .is-closed */
 }
 .prokodo-Select__listbox--is-open {
@@ -3932,6 +4199,8 @@ html[data-theme=dark] .prokodo-RichText__pre {
   text-decoration: none;
   /* hover / focus */
   /* selected */
+  /* keyboard "active" option (aria-activedescendant) */
+  /* if both selected + active, keep it clearly active */
   /* disabled (if you add aria-disabled) */
 }
 @media screen and (min-width: 480px) {
@@ -3944,6 +4213,9 @@ html[data-theme=dark] .prokodo-RichText__pre {
     font-size: 1rem;
   }
 }
+html[data-theme=dark] .prokodo-Select__item {
+  background: rgb(16, 19, 27);
+}
 .prokodo-Select__item {
   font-size: 1rem;
 }
@@ -3952,14 +4224,35 @@ html[data-theme=dark] .prokodo-RichText__pre {
   border-bottom-right-radius: 1.5625rem;
 }
 .prokodo-Select__item:hover {
-  background-color: var(--color-grey-50);
+  background: var(--color-primary-50);
+}
+html[data-theme=dark] .prokodo-Select__item:hover {
+  background: var(--color-primary-50);
 }
 .prokodo-Select__item:focus-visible {
   outline: 0;
-  background: var(--color-primary-100);
+  background: var(--color-primary-50);
+}
+html[data-theme=dark] .prokodo-Select__item:focus-visible {
+  background: var(--color-primary-50);
 }
 .prokodo-Select__item--selected {
-  background-color: var(--color-primary-50);
+  background: var(--color-primary-100);
+}
+html[data-theme=dark] .prokodo-Select__item--selected {
+  background: var(--color-primary-100);
+}
+.prokodo-Select__item--active {
+  background: var(--color-primary-100);
+}
+html[data-theme=dark] .prokodo-Select__item--active {
+  background: var(--color-primary-100);
+}
+.prokodo-Select__item--selected--active {
+  background: var(--color-primary-100);
+}
+html[data-theme=dark] .prokodo-Select__item--selected--active {
+  background: var(--color-primary-100);
 }
 .prokodo-Select__item[aria-disabled=true] {
   color: var(--color-grey-400);
@@ -3989,6 +4282,9 @@ html[data-theme=dark] .prokodo-RichText__pre {
   inset: 2px;
   background: var(--color-white);
 }
+html[data-theme=dark] .prokodo-Select__checkbox:before {
+  background-color: rgb(16, 19, 27);
+}
 .prokodo-Select__checkbox--checked { /* gradient + tick mark */
   background: var(--gradient-border-4);
 }
@@ -4852,7 +5148,7 @@ html[data-theme=dark] .prokodo-Skeleton::after {
   left: 5px;
 }
 .prokodo-Switch__thumb--disabled {
-  background-color: var(--color-grey-200);
+  background-color: var(--color-grey-600);
 }
 .prokodo-Switch__thumb {
   /* Center child icon */
@@ -5030,6 +5326,211 @@ html[data-theme=dark] .prokodo-Skeleton::after {
   padding-bottom: 1rem;
 }
 
+.prokodo-Tabs {
+  width: 100%;
+}
+.prokodo-Tabs--vertical {
+  display: grid;
+  grid-gap: 1rem;
+  gap: 1rem;
+  grid-template-columns: minmax(px-to-rem(180px), px-to-rem(260px)) 1fr;
+}
+.prokodo-Tabs__list {
+  align-items: stretch;
+  border-bottom: 1px solid var(--color-grey-200);
+  display: flex;
+  gap: 0;
+  overflow-x: auto;
+  padding: 0;
+  position: relative;
+  scrollbar-width: none;
+}
+html[data-theme=dark] .prokodo-Tabs__list {
+  border-bottom-color: var(--color-grey-700);
+}
+.prokodo-Tabs__list--vertical {
+  border-bottom: none;
+  border-right: 1px solid var(--color-grey-200);
+  flex-direction: column;
+  overflow-x: visible;
+}
+html[data-theme=dark] .prokodo-Tabs__list--vertical {
+  border-right-color: var(--color-grey-700);
+}
+.prokodo-Tabs__list--disabled {
+  opacity: 0.7;
+}
+.prokodo-Tabs__tab {
+  align-items: center;
+  background: transparent;
+  border: none;
+  border-top-left-radius: 1.5rem;
+  border-top-right-radius: 1.5rem;
+  box-shadow: none;
+  color: var(--color-grey-700);
+  cursor: pointer;
+  display: inline-flex;
+  gap: 0.5rem;
+  justify-content: center;
+  min-height: px-to-rem(44px);
+  padding: 0.75rem 1rem;
+  position: relative;
+  transition: background-color 160ms ease, color 160ms ease, opacity 160ms ease;
+  font-weight: 400;
+  font-size: 1.125rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Tabs__tab {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Tabs__tab {
+    font-size: 1rem;
+  }
+}
+.prokodo-Tabs__tab--vertical {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.prokodo-Tabs__tab:hover {
+  background: var(--color-primary-50);
+}
+.prokodo-Tabs__tab:focus-visible {
+  outline: 0;
+  background: var(--color-primary-50);
+}
+.prokodo-Tabs__tab::after {
+  background: transparent;
+  bottom: 0;
+  content: "";
+  height: 3px;
+  left: 0;
+  position: absolute;
+  right: 0;
+  transform: scaleX(0.35);
+  transform-origin: center;
+  transition: background-color 180ms ease, transform 180ms ease;
+}
+.prokodo-Tabs__tab--fullWidth {
+  flex: 1 1;
+}
+.prokodo-Tabs__tab--selected {
+  color: var(--color-primary-900);
+}
+.prokodo-Tabs__tab--selected::after {
+  background: var(--gradient-border-4);
+  transform: scaleX(1);
+}
+.prokodo-Tabs__tab--disabled {
+  color: var(--color-grey-500);
+  cursor: not-allowed;
+  opacity: 0.58;
+}
+.prokodo-Tabs__tab--disabled:hover {
+  background: transparent;
+}
+.prokodo-Tabs__tab--disabled::after {
+  background: transparent;
+}
+.prokodo-Tabs__list--vertical .prokodo-Tabs__tab {
+  justify-content: flex-start;
+  text-align: left;
+}
+.prokodo-Tabs__list--vertical .prokodo-Tabs__tab::after {
+  bottom: 0;
+  height: auto;
+  left: 0;
+  right: auto;
+  top: 0;
+  transform: scaleY(0.35);
+  transform-origin: center;
+  width: 3px;
+}
+.prokodo-Tabs__list--vertical .prokodo-Tabs__tab--selected::after {
+  transform: scaleY(1);
+}
+.prokodo-Tabs__tabLabel {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.prokodo-Tabs__badge {
+  align-items: center;
+  background: var(--color-grey-200);
+  border-radius: px-to-rem(999px);
+  color: var(--color-grey-700);
+  display: inline-flex;
+  justify-content: center;
+  min-width: px-to-rem(20px);
+  padding: 0 0.25rem;
+  font-size: px-to-rem(12px);
+  font-weight: 400;
+  font-size: 1.125rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Tabs__badge {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Tabs__badge {
+    font-size: 1rem;
+  }
+}
+.prokodo-Tabs__badgeChip {
+  pointer-events: none;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Tabs__badgeChip {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Tabs__badgeChip {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-Tabs__panel {
+  background: transparent;
+  border-radius: 0;
+  box-shadow: none;
+  padding: 1rem;
+}
+.prokodo-Tabs__panel[hidden] {
+  display: none !important;
+}
+.prokodo-Tabs__panel:focus-visible {
+  outline: 0;
+  background: var(--gradient-border-4);
+}
+
 .prokodo-Teaser {
   overflow: hidden;
 }
@@ -5104,4 +5605,121 @@ html[data-theme=dark] .prokodo-Skeleton::after {
 }
 .prokodo-Teaser__link__icon {
   margin-right: 0.25rem;
+}
+
+.prokodo-Tooltip {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  /* Visually hidden described-by node (portal a11y). */
+  /* CSS-only fallback (only works for inline mode). */
+}
+.prokodo-Tooltip--disabled {
+  pointer-events: none;
+}
+.prokodo-Tooltip__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+  white-space: nowrap;
+}
+.prokodo-Tooltip__trigger {
+  width: -moz-max-content !important;
+  width: max-content !important;
+  flex: 0 0 auto !important;
+}
+.prokodo-Tooltip__bubble {
+  /* Make sizing measurable and stable. */
+  display: block;
+  position: fixed;
+  left: 0;
+  top: 0;
+  /* Position via CSS vars, but NO animated transform/scale */
+  transform: translate3d(var(--pk-tt-x, 0px), var(--pk-tt-y, 0px), 0);
+  /* Only opacity changes for animation */
+  will-change: opacity;
+  z-index: var(--pk-tt-z, 2147483647);
+  max-width: min(360px, 100vw - 16px);
+  white-space: normal;
+  overflow-wrap: anywhere;
+  padding: 0.25rem 0.5rem;
+  border-radius: 10px;
+  box-shadow: var(--elevation-2);
+  background: var(--color-grey-900);
+  color: var(--color-white);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  /* fade only */
+  transition: opacity 120ms ease, visibility 120ms ease;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Tooltip__bubble {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Tooltip__bubble {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-Tooltip__bubble--open {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+.prokodo-Tooltip__bubble::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+.prokodo-Tooltip__bubble--top::after {
+  left: var(--pk-tt-arrow-x, 50%);
+  top: 100%;
+  transform: translateX(-50%);
+  border-width: 8px 8px 0 8px;
+  border-color: var(--color-grey-900) transparent transparent transparent;
+}
+.prokodo-Tooltip__bubble--bottom::after {
+  left: var(--pk-tt-arrow-x, 50%);
+  bottom: 100%;
+  transform: translateX(-50%);
+  border-width: 0 8px 8px 8px;
+  border-color: transparent transparent var(--color-grey-900) transparent;
+}
+.prokodo-Tooltip__bubble--left::after {
+  top: var(--pk-tt-arrow-y, 50%);
+  left: 100%;
+  transform: translateY(-50%);
+  border-width: 8px 0 8px 8px;
+  border-color: transparent transparent transparent var(--color-grey-900);
+}
+.prokodo-Tooltip__bubble--right::after {
+  top: var(--pk-tt-arrow-y, 50%);
+  right: 100%;
+  transform: translateY(-50%);
+  border-width: 8px 8px 8px 0;
+  border-color: transparent var(--color-grey-900) transparent transparent;
+}
+.prokodo-Tooltip:hover .prokodo-Tooltip__bubble, .prokodo-Tooltip:focus-within .prokodo-Tooltip__bubble {
+  opacity: 1;
+  visibility: visible;
 }