@prokodo/ui 0.0.52 → 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 {
@@ -6951,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.
  */
@@ -7078,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;
@@ -7157,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;
@@ -7186,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;
@@ -7515,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;
@@ -7535,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;
 }
@@ -7543,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;
@@ -7612,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.
  */
@@ -7746,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;
 }
@@ -7772,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;
@@ -7934,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;
@@ -7963,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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prokodo/ui",
-  "version": "0.0.52",
+  "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 .",