@prokodo/ui 0.0.51 → 0.0.53

package/dist/ui.css

@@ -1412,7 +1412,6 @@ html[data-theme=dark] .prokodo-Button--has-variant-outlined {
   background: none;
 }
 .prokodo-Button--has-icon {
-  display: flex;
   align-items: center;
 }
 .prokodo-Button--icon-only {
@@ -1785,7 +1784,6 @@ html[data-theme=dark] .prokodo-Button--icon-only {
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 0.5rem;
   border-radius: 200px;
   overflow: hidden;
   background-color: var(--color-grey-100);
@@ -1812,7 +1810,6 @@ html[data-theme=dark] .prokodo-Button--icon-only {
   background-color: var(--color-white);
 }
 .prokodo-Avatar--has-size-xs {
-  padding: 0.25rem;
   width: 30px;
   height: 30px;
 }
@@ -1833,8 +1830,14 @@ html[data-theme=dark] .prokodo-Button--icon-only {
   height: 100px;
 }
 .prokodo-Avatar__image {
+  width: 100%;
+  height: 100%;
+  display: block;
   -o-object-fit: cover;
      object-fit: cover;
+  -o-object-position: center;
+     object-position: center;
+  border-radius: 100%;
 }
 .prokodo-Avatar__link {
   box-shadow: var(--elevation-1);
@@ -2166,13 +2169,11 @@ html[data-theme=dark] .prokodo-Card--white {
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
-  border-radius: 2rem;
 }
 html[data-theme=dark] .prokodo-Card__background {
   opacity: 0.7;
 }
 .prokodo-Card__link {
-  display: flex;
   align-items: center;
 }
 .prokodo-Card__link:hover {
@@ -2196,7 +2197,10 @@ html[data-theme=dark] .prokodo-Card__background {
   /* keep the gradient *class hooks*, but DO NOT include animated keyframes here */
 }
 .prokodo-Card__gradiant {
-  position: relative;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
   border-radius: 2rem;
 }
 .prokodo-Card__gradiant--primary {
@@ -3869,7 +3873,7 @@ html[data-theme=dark] .prokodo-Label__text {
  * content.
  */
 .prokodo-Drawer {
-  /* Backdrop */
+  /* Backdrop (unchanged, fades in) */
 }
 .prokodo-Drawer__backdrop {
   position: fixed;
@@ -3890,7 +3894,7 @@ html[data-theme=dark] .prokodo-Label__text {
   }
 }
 .prokodo-Drawer {
-  /* Container */
+  /* Container (slide + fade via transitions) */
 }
 .prokodo-Drawer__container {
   position: fixed;
@@ -3900,15 +3904,15 @@ html[data-theme=dark] .prokodo-Label__text {
   pointer-events: none;
   width: 300px;
   height: 100%;
+  overscroll-behavior: contain;
+  /* The important part: animate transform/opacity */
+  opacity: 0;
+  will-change: transform, opacity;
+  transition: transform 0.3s ease, opacity 0.3s ease;
 }
 .prokodo-Drawer__container--open {
   pointer-events: auto;
-}
-@media (prefers-reduced-motion: reduce) {
-  .prokodo-Drawer__container--open {
-    transform: translateX(0) translateY(0);
-    opacity: 1;
-  }
+  opacity: 1;
 }
 .prokodo-Drawer__container--fullscreen {
   width: 100vw !important;
@@ -3929,27 +3933,20 @@ html[data-theme=dark] .prokodo-Label__text {
   transform: translateX(-100%);
 }
 .prokodo-Drawer__container--anchor-left--open {
-  animation: DrawerSlideInLeft 0.3s ease forwards;
-}
-.prokodo-Drawer__container--anchor-left:not(.prokodo-Drawer__container--anchor-left--open) {
-  animation: DrawerSlideOutLeft 0.3s ease forwards;
+  transform: translateX(0);
 }
 .prokodo-Drawer__container {
   /* Anchor: right */
 }
 .prokodo-Drawer__container--anchor-right {
   top: 0;
-  left: auto;
   right: 0;
   width: 80vw;
   height: 100vh;
   transform: translateX(100%);
 }
 .prokodo-Drawer__container--anchor-right--open {
-  animation: DrawerSlideInRight 0.3s ease forwards;
-}
-.prokodo-Drawer__container--anchor-right:not(.prokodo-Drawer__container--anchor-right--open) {
-  animation: DrawerSlideOutRight 0.3s ease forwards;
+  transform: translateX(0);
 }
 .prokodo-Drawer__container {
   /* Anchor: top */
@@ -3962,10 +3959,7 @@ html[data-theme=dark] .prokodo-Label__text {
   transform: translateY(-100%);
 }
 .prokodo-Drawer__container--anchor-top--open {
-  animation: DrawerSlideInTop 0.3s ease forwards;
-}
-.prokodo-Drawer__container--anchor-top:not(.prokodo-Drawer__container--anchor-top--open) {
-  animation: DrawerSlideOutTop 0.3s ease forwards;
+  transform: translateY(0);
 }
 .prokodo-Drawer__container {
   /* Anchor: bottom */
@@ -3978,15 +3972,13 @@ html[data-theme=dark] .prokodo-Label__text {
   transform: translateY(100%);
 }
 .prokodo-Drawer__container--anchor-bottom--open {
-  animation: DrawerSlideInBottom 0.3s ease forwards;
-}
-.prokodo-Drawer__container--anchor-bottom:not(.prokodo-Drawer__container--anchor-bottom--open) {
-  animation: DrawerSlideOutBottom 0.3s ease forwards;
+  transform: translateY(0);
 }
 @media (prefers-reduced-motion: reduce) {
   .prokodo-Drawer__container {
-    animation: none !important;
     transition: none !important;
+    transform: translateX(0) translateY(0) !important;
+    opacity: 1 !important;
   }
 }
 .prokodo-Drawer {
@@ -4004,8 +3996,9 @@ html[data-theme=dark] .prokodo-Label__text {
 }
 .prokodo-Drawer__content {
   padding: 1rem;
+  max-height: calc(100% - 7rem);
   overflow-y: auto;
-  max-height: calc(100% - 3rem);
+  -webkit-overflow-scrolling: touch;
 }
 /* stylelint-disable */
 /**
@@ -6962,7 +6955,8 @@ html[data-theme=dark] .prokodo-List__item__icon {
 .prokodo-InputOTP__input__node {
   width: 100%;
   padding: 0.5rem 1rem;
-}/* stylelint-disable */
+}
+/* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.
  */
@@ -7089,23 +7083,48 @@ html[data-theme=dark] .prokodo-List__item__icon {
  * content.
  */
 .prokodo-PostItem__grid {
-  align-items: center;
-  justify-content: space-between;
-  flex-direction: column-reverse !important;
+  /* Mobile: stacked, image on top via order */
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+  align-items: stretch;
 }
 @media screen and (min-width: 960px) {
   .prokodo-PostItem__grid {
-    flex-direction: row-reverse !important;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 1.5rem;
   }
 }
-.prokodo-PostItem__animation {
-  transform: translate(0, 20vh);
+.prokodo-PostItem__media {
+  order: 1;
+  width: 100%;
+  min-width: 0;
 }
-@media screen and (min-width: 480px) {
-  .prokodo-PostItem__animation {
-    transform: translate(20vh, 0);
+@media screen and (min-width: 960px) {
+  .prokodo-PostItem__media {
+    order: 0;
+    flex: 0 1 33.3333%;
+    max-width: 33.333%;
+    min-width: 0; /* prevent overflow pushing layout */
+  }
+}
+.prokodo-PostItem__main {
+  order: 0;
+  width: 100%;
+  min-width: 0;
+}
+@media screen and (min-width: 960px) {
+  .prokodo-PostItem__main {
+    order: 1;
+    flex: 0 1 66.666%;
+    max-width: 66.666%;
+    min-width: 0;
   }
 }
+.prokodo-PostItem__animation {
+  transform: none;
+}
 .prokodo-PostItem__headline {
   display: -webkit-box;
   -webkit-line-clamp: 2;
@@ -7168,6 +7187,8 @@ html[data-theme=dark] .prokodo-List__item__icon {
 .prokodo-PostItem__content {
   display: flex;
   align-items: center;
+  min-width: 0; /* ← prevent long lines from forcing column wider */
+  overflow-wrap: anywhere; /* ← allow breaking long words/URLs */
   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;
@@ -7197,28 +7218,29 @@ html[data-theme=dark] .prokodo-List__item__icon {
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
+.prokodo-PostItem__content__paragraph > p {
+  margin: 0.5rem 0.25rem;
+}
 .prokodo-PostItem__image {
+  min-height: 300px;
   min-height: 300px;
   -o-object-fit: cover;
      object-fit: cover;
 }
+.prokodo-PostItem__image__content__wrapper {
+  padding: 0;
+}
 .prokodo-PostItem__image__wrapper {
   width: 100%;
+  min-width: 300px;
   min-height: 300px;
   border-radius: 25px;
   overflow: hidden;
-  transform: translate(0, 20vh);
-}
-@media screen and (min-width: 480px) {
-  .prokodo-PostItem__image__wrapper {
-    transform: translate(-20vh, 0);
-  }
-}
-.prokodo-PostItem__image__content__wrapper {
-  display: block;
+  transform: none; /* prevent overlay */
 }
 .prokodo-PostItem__button {
   width: 100%;
+  margin-top: 1rem;
 }
 .prokodo-PostItem__button__content {
   justify-content: flex-start;
@@ -7526,7 +7548,7 @@ html[data-theme=dark] .prokodo-List__item__icon {
   align-items: center;
   justify-content: space-between;
   margin-top: auto;
-  padding: 0 1rem 1rem 1rem;
+  padding: 1rem;
 }
 .prokodo-PostTeaser__meta {
   position: absolute;
@@ -7546,7 +7568,17 @@ html[data-theme=dark] .prokodo-List__item__icon {
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
+.prokodo-PostTeaser__meta__readcount {
+  margin: 0;
+}
+.prokodo-PostTeaser__meta__readcount__wrapper {
+  display: flex;
+  gap: 0.5rem;
+}
 .prokodo-PostTeaser__image {
+  display: block;
+  width: 100%;
+  height: 100%;
   -o-object-fit: cover;
      object-fit: cover;
 }
@@ -7554,6 +7586,13 @@ html[data-theme=dark] .prokodo-List__item__icon {
   position: relative;
   width: 100%;
   height: 230px;
+  overflow: hidden;
+}
+.prokodo-PostTeaser__image__container {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
 }
 .prokodo-PostTeaser__image__caption {
   bottom: 0.5rem;
@@ -7623,7 +7662,8 @@ html[data-theme=dark] .prokodo-List__item__icon {
 }
 .prokodo-PostTeaser__link--is-hovered {
   color: var(--color-primary-500) !important;
-}/* stylelint-disable */
+}
+/* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.
  */
@@ -7757,19 +7797,27 @@ html[data-theme=dark] .prokodo-List__item__icon {
 .prokodo-PostWidget__list--has-fullWidth {
   display: flex;
   flex-wrap: wrap;
+  gap: 1rem;
 }
 .prokodo-PostWidget__list__item {
   display: block;
   margin-top: 1rem;
 }
 .prokodo-PostWidget__list__item--has-fullWidth {
-  width: 50%;
+  width: 100%;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-PostWidget__list__item--has-fullWidth {
+    width: calc(50% - 0.5rem);
+  }
 }
 .prokodo-PostWidget__list__item__content {
   display: flex;
   justify-content: flex-start;
 }
 .prokodo-PostWidget__image {
+  width: 100%;
+  height: 100%;
   -o-object-fit: cover;
      object-fit: cover;
 }
@@ -7783,10 +7831,20 @@ html[data-theme=dark] .prokodo-List__item__icon {
   border-radius: 13px;
   overflow: hidden;
 }
+.prokodo-PostWidget__image {
+  /* This is the Image component’s container to force fill */
+}
+.prokodo-PostWidget__image__container {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
 .prokodo-PostWidget__content {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  min-width: 0;
 }
 .prokodo-PostWidget__headline {
   display: -webkit-box;
@@ -7945,25 +8003,37 @@ html[data-theme=dark] .prokodo-List__item__icon {
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+.prokodo-PostWidgetCarousel__card {
+  padding-bottom: 0;
+}
 .prokodo-PostWidgetCarousel__carousel {
   position: relative;
-  width: 100%;
-  overflow: hidden;
   margin-top: 1.5rem;
 }
+.prokodo-PostWidgetCarousel__carousel__wrapper {
+  padding-bottom: 1rem;
+}
 .prokodo-PostWidgetCarousel__carousel__item__image__link {
   position: relative;
   width: 100%;
-  height: 200px;
+  height: clamp(180px, 30vw, 420px);
   display: block;
   line-height: 0;
   border-radius: 13px;
   overflow: hidden;
 }
 .prokodo-PostWidgetCarousel__carousel__item__image {
+  width: 100%;
+  height: 100%;
   -o-object-fit: cover;
      object-fit: cover;
 }
+.prokodo-PostWidgetCarousel__carousel__item__image__container {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
 .prokodo-PostWidgetCarousel__carousel__item__link {
   position: relative;
   display: block;
@@ -7974,14 +8044,14 @@ html[data-theme=dark] .prokodo-List__item__icon {
 .prokodo-PostWidgetCarousel__carousel__buttons {
   position: absolute;
   bottom: 0.75rem;
-  right: 1rem;
+  right: 0.5rem;
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
-  min-width: 100px;
+  max-width: 100px;
+  gap: 0.5rem;
+  z-index: 2;
 }
 .prokodo-PostWidgetCarousel__headline {
-  width: 75%;
   margin-top: 0.75rem !important;
   display: -webkit-box;
   -webkit-line-clamp: 2;
@@ -10471,222 +10541,4 @@ html[data-theme=dark] .prokodo-List__item__icon {
   * {
     animation: none !important;
   }
-}/* stylelint-disable */
-/**
- * Calculates a rem-based value by a given pixel size.
- */
-/* stylelint-disable */
-/**
- * Applies flex-column and gap.
- */
-/*
-    As example (light, primary)
-    See defined modes in designsystem/config/gradients
-*/
-/**
- * Mixin that renders a media query that target screens that are larger than the
- * given size.
- */
-/**
- * Mixin that renders a media query that target screens that are smaller than the
- * given size.
- */
-/**
- * Mixin that renders a media query that target screens in between the given range.
- */
-/**
- * Mixin that renders a media query that target screens that have height larger than the
- * given size.
- */
-/**
- * Mixin that renders a media query that target screens that have height smaller than the
- * given size.
- */
-/* stylelint-disable */
-/* M3/Elevation Light/1 */
-/* M3/Elevation Light/2 */
-/* M3/Elevation/5 */
-/* M3/Elevation/1 Text */
-/* Inner elevations */
-/* stylelint-disable */
-/**
- * Visually hides an element but not removes them for screen readers.
- */
-/**
- * The inverse of the `hidden` helper to reset a previously hidden element to be
- * visible for users.
- */
-/**
- * Creates a selector for :hover effects depending on the current user input
- * device. If the input device is a mouse, this hover effect will appear.
- * Keyboard and touch inputs are ignored.
- *
- * Example usage:
- * .link {
- *   color: blue;
- *
- *   @include when-hovered() {
- *     color: green;
- *   }
- * }
- */
-/**
- * Creates a selector for :active effects depending on the current user input
- * device. The state applies when the input device is a mouse or keyboard. Touch
- * devices will not show a pressed state.
- *
- * Example usage:
- * .link {
- *   box-shadow: none;
- *
- *   @include when-pressed() {
- *     box-shadow: inset 0 2px 4px grey;
- *   }
- * }
- */
-/**
- * Creates a selector for :focus effects depending on the current user input
- * device. When the user navigates using a keyboard, the focus effect defined in
- * here is applied. For other input devices they don't show up.
- *
- * Example usage:
- * .link {
- *   text-decoration: none;
- *
- *   @include when-focused() {
- *     text-decoration: underline;
- *   }
- * }
- */
-/**
- * Creates a selector for :focus-within effects depending on the current user
- * input device. When the user navigates using a keyboard, the focus effect
- * defined in here is applied. For other input devices they don't show up.
- *
- * Example usage:
- * .link {
- *   img {
- *     opacity: 0.75;
- *
- *     @include when-focused-within() {
- *       opacity: 1;
- *     }
- *   }
- * }
- */
-/**
- * Wrapper for media query "prefers-reduced-motion".
- */
-/**
- * This helper hides the outline but still makes it visible for
- * Windows high-contrast users. Use this instead of `outline: 0;`.
- */
-/**
- * This helper hides the outline but still makes it visible for
- * Windows high-contrast users. Use this instead of `outline: 0;`.
- */
-/**
- * Renders an alternative, but application consistent focus-ring.
- */
-/**
- * Specifies the outer layout for all contents across breakpoints. Apply this
- * mixin to the container element, to center the contents on the screen within
- * the layout offsets.
- */
-/**
- * This mixin specifies basic text-styles for components that render a richtext
- * content.
- */
-/* Keep all keyframes/effects out of the render-blocking bundle. Make them GLOBAL. */
- {
-  /* Left */
-}
-@keyframes DrawerSlideInLeft {
-  0% {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-@keyframes DrawerSlideOutLeft {
-  0% {
-    transform: translateX(0);
-    opacity: 1;
-  }
-  100% {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-}
- {
-  /* Right */
-}
-@keyframes DrawerSlideInRight {
-  0% {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-@keyframes DrawerSlideOutRight {
-  0% {
-    transform: translateX(0);
-    opacity: 1;
-  }
-  100% {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-}
- {
-  /* Top */
-}
-@keyframes DrawerSlideInTop {
-  0% {
-    transform: translateY(-100%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-@keyframes DrawerSlideOutTop {
-  0% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-  100% {
-    transform: translateY(-100%);
-    opacity: 0;
-  }
-}
- {
-  /* Bottom */
-}
-@keyframes DrawerSlideInBottom {
-  0% {
-    transform: translateY(100%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-@keyframes DrawerSlideOutBottom {
-  0% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-  100% {
-    transform: translateY(100%);
-    opacity: 0;
-  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prokodo/ui",
-  "version": "0.0.51",
+  "version": "0.0.53",
   "type": "module",
   "description": "UI components for production-grade Next.js + Headless CMS (Strapi, Contentful, Headless WordPress) websites by prokodo – built for Core Web Vitals & SEO.",
   "sideEffects": false,
@@ -335,9 +335,10 @@
     "build": "vite build && pnpm build:types && node tools/update-exports.mjs",
     "build:types": "tsc --project tsconfig.build.json",
     "typecheck": "tsc --project tsconfig.typecheck.json",
-    "test": "NODE_ENV=test jest --coverage --verbose && pnpm lint && pnpm typecheck",
+    "test": "NODE_ENV=test jest --coverage --verbose && pnpm format && pnpm lint && pnpm typecheck",
     "test:watch": "NODE_ENV=test jest --watch",
     "test:ci": "NODE_ENV=test jest --runInBand --ci",
+    "fix": "pnpm format:fix && pnpm lint:fix",
     "lint": "eslint 'src/**/*.{ts,tsx}' --cache --cache-location .eslintcache",
     "lint:fix": "eslint 'src/**/*.{ts,tsx}' --fix --cache --cache-location .eslintcache",
     "format": "prettier --check .",

package/dist/components/drawer/Drawer.effects.module.scss.js

@@ -1,29 +0,0 @@
-const DrawerSlideInLeft = "DrawerSlideInLeft";
-const DrawerSlideOutLeft = "DrawerSlideOutLeft";
-const DrawerSlideInRight = "DrawerSlideInRight";
-const DrawerSlideOutRight = "DrawerSlideOutRight";
-const DrawerSlideInTop = "DrawerSlideInTop";
-const DrawerSlideOutTop = "DrawerSlideOutTop";
-const DrawerSlideInBottom = "DrawerSlideInBottom";
-const DrawerSlideOutBottom = "DrawerSlideOutBottom";
-const Drawer_effects_module = {
-  DrawerSlideInLeft,
-  DrawerSlideOutLeft,
-  DrawerSlideInRight,
-  DrawerSlideOutRight,
-  DrawerSlideInTop,
-  DrawerSlideOutTop,
-  DrawerSlideInBottom,
-  DrawerSlideOutBottom
-};
-export {
-  DrawerSlideInBottom,
-  DrawerSlideInLeft,
-  DrawerSlideInRight,
-  DrawerSlideInTop,
-  DrawerSlideOutBottom,
-  DrawerSlideOutLeft,
-  DrawerSlideOutRight,
-  DrawerSlideOutTop,
-  Drawer_effects_module as default
-};