@prokodo/ui 0.1.14 → 1.0.0

package/dist/components/post-item/PostItem.view.js

@@ -13,7 +13,7 @@ import { RichText } from "../rich-text/RichText.js";
 import { Card } from "../card/Card.js";
 const bem = create(styles, "PostItem");
 function PostItemView(props) {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const {
     locale,
     className,
@@ -33,13 +33,14 @@ function PostItemView(props) {
     // public opts
     structuredData = true,
     animate = true,
+    color,
     ...rest
   } = props;
   const cardMerged = {
     ...componentsProps == null ? void 0 : componentsProps.card,
     ...rest,
-    // keep variant narrow; if none is provided, let Card default handle it
-    variant: ((_a = componentsProps == null ? void 0 : componentsProps.card) == null ? void 0 : _a.variant) ?? (rest == null ? void 0 : rest.variant) ?? void 0
+    // keep color narrow; if none is provided, let Card default handle it
+    color: ((_a = componentsProps == null ? void 0 : componentsProps.card) == null ? void 0 : _a.color) ?? (rest == null ? void 0 : rest.color) ?? color ?? void 0
   };
   const ArticleWrapper = animate ? Animated : ({
     children,
@@ -82,6 +83,10 @@ function PostItemView(props) {
                           classes == null ? void 0 : classes.headline
                         ].filter(Boolean).join(" ")
                       ),
+                      color: (title == null ? void 0 : title.color) ?? ((_e = componentsProps == null ? void 0 : componentsProps.headline) == null ? void 0 : _e.color) ?? (color && color !== "white" ? color : (
+                        /* istanbul ignore next */
+                        void 0
+                      )) ?? "inherit",
                       children: title.content
                     }
                   ),
@@ -172,16 +177,20 @@ function PostItemView(props) {
                       void 0,
                       [
                         button == null ? void 0 : button.className,
-                        (_e = componentsProps == null ? void 0 : componentsProps.button) == null ? void 0 : _e.className,
+                        (_f = componentsProps == null ? void 0 : componentsProps.button) == null ? void 0 : _f.className,
                         classes == null ? void 0 : classes.button
                       ].filter(Boolean).join(" ")
                     ),
+                    color: (button == null ? void 0 : button.color) ?? ((_g = componentsProps == null ? void 0 : componentsProps.button) == null ? void 0 : _g.color) ?? (color && color !== "white" ? color : (
+                      /* istanbul ignore next */
+                      void 0
+                    )),
                     contentClassName: bem(
                       "button__content",
                       void 0,
                       [button == null ? void 0 : button.contentClassName, classes == null ? void 0 : classes.buttonContent].filter(Boolean).join(" ")
                     ),
-                    variant: (button == null ? void 0 : button.variant) ?? ((_f = componentsProps == null ? void 0 : componentsProps.button) == null ? void 0 : _f.variant) ?? "outlined"
+                    variant: (button == null ? void 0 : button.variant) ?? ((_h = componentsProps == null ? void 0 : componentsProps.button) == null ? void 0 : _h.variant) ?? "outlined"
                   }
                 )
               ]

package/dist/components/post-item/PostItemAuthor.js

@@ -19,7 +19,10 @@ const PostItemAuthor = memo(
           /* @__PURE__ */ jsx(
             Avatar,
             {
-              image: (avatar == null ? void 0 : avatar.src) !== void 0 && isString(avatar == null ? void 0 : avatar.src) ? { src: avatar == null ? void 0 : avatar.src, alt: (avatar == null ? void 0 : avatar.alt) ?? authorName ?? "" } : void 0,
+              image: (
+                /* istanbul ignore next */
+                (avatar == null ? void 0 : avatar.src) !== void 0 && isString(avatar == null ? void 0 : avatar.src) ? { src: avatar == null ? void 0 : avatar.src, alt: (avatar == null ? void 0 : avatar.alt) ?? authorName ?? "" } : void 0
+              ),
               ...avatarProps
             }
           ),

package/dist/components/post-teaser/PostTeaser.css

@@ -135,20 +135,20 @@
   overflow: hidden;
 }
 .prokodo-PostTeaser__card__content {
-  padding: 0 1rem 0;
+  padding: 0 var(--pk-space-lg) 0;
 }
 .prokodo-PostTeaser__card__footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-top: auto;
-  padding: 1rem;
+  padding: var(--pk-space-lg);
 }
 .prokodo-PostTeaser__meta {
   position: absolute;
-  top: 1rem;
-  left: 1rem;
-  width: calc(100% - 2rem);
+  top: var(--pk-space-lg);
+  left: var(--pk-space-lg);
+  width: calc(100% - 2 * var(--pk-space-lg));
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -167,7 +167,7 @@
 }
 .prokodo-PostTeaser__meta__readcount__wrapper {
   display: flex;
-  gap: 0.5rem;
+  gap: var(--pk-space-sm);
 }
 .prokodo-PostTeaser__image {
   display: block;
@@ -189,14 +189,14 @@
   height: 100%;
 }
 .prokodo-PostTeaser__image__caption {
-  bottom: 0.5rem;
+  bottom: var(--pk-space-sm);
   text-align: right;
-  padding-right: 0.5rem;
-  width: calc(100% - 0.5rem);
+  padding-right: var(--pk-space-sm);
+  width: calc(100% - var(--pk-space-sm));
 }
 .prokodo-PostTeaser__date {
   padding: 0;
-  color: var(--color-grey-300);
+  color: var(--pk-color-muted);
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -212,7 +212,7 @@
   height: 230px;
 }
 .prokodo-PostTeaser__headline {
-  padding: 1rem 1rem 0;
+  padding: var(--pk-space-lg) var(--pk-space-lg) 0;
   display: -webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
@@ -250,8 +250,8 @@
   align-items: center;
 }
 .prokodo-PostTeaser__link__icon {
-  margin-right: 0.25rem;
+  margin-right: var(--pk-space-xs);
 }
 .prokodo-PostTeaser__link--is-hovered {
-  color: var(--color-primary-500) !important;
+  color: var(--pk-color-brand) !important;
 }

package/dist/components/post-teaser/PostTeaser.js

@@ -5,7 +5,10 @@ import PostTeaserServer from "./PostTeaser.server.js";
 const PostTeaser = createIsland({
   name: "PostTeaser",
   Server: PostTeaserServer,
-  loadLazy: /* @__PURE__ */ __name(() => import("./PostTeaser.lazy.js"), "loadLazy")
+  loadLazy: (
+    /* istanbul ignore next */
+    /* @__PURE__ */ __name(() => import("./PostTeaser.lazy.js"), "loadLazy")
+  )
 });
 export {
   PostTeaser

package/dist/components/post-teaser/PostTeaser.module.css

@@ -135,20 +135,20 @@
   overflow: hidden;
 }
 .prokodo-PostTeaser__card__content {
-  padding: 0 1rem 0;
+  padding: 0 var(--pk-space-lg) 0;
 }
 .prokodo-PostTeaser__card__footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-top: auto;
-  padding: 1rem;
+  padding: var(--pk-space-lg);
 }
 .prokodo-PostTeaser__meta {
   position: absolute;
-  top: 1rem;
-  left: 1rem;
-  width: calc(100% - 2rem);
+  top: var(--pk-space-lg);
+  left: var(--pk-space-lg);
+  width: calc(100% - 2 * var(--pk-space-lg));
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -167,7 +167,7 @@
 }
 .prokodo-PostTeaser__meta__readcount__wrapper {
   display: flex;
-  gap: 0.5rem;
+  gap: var(--pk-space-sm);
 }
 .prokodo-PostTeaser__image {
   display: block;
@@ -189,14 +189,14 @@
   height: 100%;
 }
 .prokodo-PostTeaser__image__caption {
-  bottom: 0.5rem;
+  bottom: var(--pk-space-sm);
   text-align: right;
-  padding-right: 0.5rem;
-  width: calc(100% - 0.5rem);
+  padding-right: var(--pk-space-sm);
+  width: calc(100% - var(--pk-space-sm));
 }
 .prokodo-PostTeaser__date {
   padding: 0;
-  color: var(--color-grey-300);
+  color: var(--pk-color-muted);
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-primary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -212,7 +212,7 @@
   height: 230px;
 }
 .prokodo-PostTeaser__headline {
-  padding: 1rem 1rem 0;
+  padding: var(--pk-space-lg) var(--pk-space-lg) 0;
   display: -webkit-box;
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
@@ -250,8 +250,8 @@
   align-items: center;
 }
 .prokodo-PostTeaser__link__icon {
-  margin-right: 0.25rem;
+  margin-right: var(--pk-space-xs);
 }
 .prokodo-PostTeaser__link--is-hovered {
-  color: var(--color-primary-500) !important;
+  color: var(--pk-color-brand) !important;
 }

package/dist/components/post-teaser/PostTeaser.view.js

@@ -30,6 +30,7 @@ function PostTeaserView(props) {
     onClick,
     redirect,
     structuredData = true,
+    color,
     // private
     isHovered,
     readMinutes,
@@ -41,7 +42,7 @@ function PostTeaserView(props) {
   const cardMerged = {
     ...componentsProps == null ? void 0 : componentsProps.card,
     ...cardRest,
-    variant: ((_a = componentsProps == null ? void 0 : componentsProps.card) == null ? void 0 : _a.variant) ?? (cardRest == null ? void 0 : cardRest.variant) ?? "white"
+    color: ((_a = componentsProps == null ? void 0 : componentsProps.card) == null ? void 0 : _a.color) ?? (cardRest == null ? void 0 : cardRest.color) ?? color ?? "white"
   };
   const baseImg = image;
   const imageMerged = baseImg ? {
@@ -145,8 +146,10 @@ function PostTeaserView(props) {
                         Image,
                         {
                           ...imageMerged,
-                          alt: (imageMerged == null ? void 0 : imageMerged.alt) ?? "",
-                          src: (imageMerged == null ? void 0 : imageMerged.src) ?? ""
+                          alt: (imageMerged == null ? void 0 : imageMerged.alt) ?? /* istanbul ignore next */
+                          "",
+                          src: (imageMerged == null ? void 0 : imageMerged.src) ?? /* istanbul ignore next */
+                          ""
                         }
                       )
                     ]
@@ -164,7 +167,10 @@ function PostTeaserView(props) {
                       void 0,
                       [title == null ? void 0 : title.className, classes == null ? void 0 : classes.headline].filter(Boolean).join(" ")
                     ),
-                    variant: (title == null ? void 0 : title.variant) ?? ((_b = componentsProps == null ? void 0 : componentsProps.headline) == null ? void 0 : _b.variant) ?? "secondary",
+                    color: (title == null ? void 0 : title.color) ?? ((_b = componentsProps == null ? void 0 : componentsProps.headline) == null ? void 0 : _b.color) ?? (color && color !== "white" ? color : (
+                      /* istanbul ignore next */
+                      void 0
+                    )) ?? "secondary",
                     children: title == null ? void 0 : title.content
                   }
                 )
@@ -202,7 +208,6 @@ function PostTeaserView(props) {
                       /* @__PURE__ */ jsx(
                         Icon,
                         {
-                          color: "primary",
                           name: "ArrowRight01Icon",
                           size: "xs",
                           className: bem(
@@ -210,6 +215,10 @@ function PostTeaserView(props) {
                             { "is-hovered": Boolean(isHovered) },
                             classes == null ? void 0 : classes.linkIcon
                           ),
+                          color: (color && color !== "white" ? color : (
+                            /* istanbul ignore next */
+                            void 0
+                          )) ?? "primary",
                           ...componentsProps == null ? void 0 : componentsProps.linkIcon,
                           ...redirect == null ? void 0 : redirect.icon
                         }

package/dist/components/post-widget/PostWidget.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.
@@ -133,18 +132,18 @@
 .prokodo-PostWidget__list--has-fullWidth {
   display: flex;
   flex-wrap: wrap;
-  gap: 1rem;
+  gap: var(--pk-space-lg);
 }
 .prokodo-PostWidget__list__item {
   display: block;
-  margin-top: 1rem;
+  margin-top: var(--pk-space-lg);
 }
 .prokodo-PostWidget__list__item--has-fullWidth {
   width: 100%;
 }
 @media screen and (min-width: 480px) {
   .prokodo-PostWidget__list__item--has-fullWidth {
-    width: calc(50% - 0.5rem);
+    width: calc(50% - var(--pk-space-lg) / 2);
   }
 }
 .prokodo-PostWidget__list__item__content {
@@ -156,16 +155,15 @@
   height: 100%;
   -o-object-fit: cover;
      object-fit: cover;
-  /* This is the Image component’s container to force fill */
 }
 .prokodo-PostWidget__image__link {
   position: relative;
   display: block;
   width: 80px;
   height: 80px;
-  margin-right: 1rem;
+  margin-right: var(--pk-space-lg);
   line-height: 0;
-  border-radius: 13px;
+  border-radius: var(--pk-radius-md);
   overflow: hidden;
 }
 .prokodo-PostWidget__image__container {
@@ -189,7 +187,7 @@
 .prokodo-PostWidget__date {
   display: block;
   margin: 0;
-  color: var(--color-grey-300);
+  color: var(--pk-color-muted);
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

package/dist/components/post-widget/PostWidget.js

@@ -5,9 +5,11 @@ import PostWidgetServer from "./PostWidget.server.js";
 const PostWidget = createIsland({
   name: "PostWidget",
   Server: PostWidgetServer,
-  loadLazy: /* @__PURE__ */ __name(() => import("./PostWidget.lazy.js"), "loadLazy"),
-  // Only hydrate if the top-level Card gets interactive handlers
-  isInteractive: /* @__PURE__ */ __name((p) => typeof p.onClick === "function", "isInteractive")
+  loadLazy: (
+    /* istanbul ignore next */
+    /* @__PURE__ */ __name(() => import("./PostWidget.lazy.js"), "loadLazy")
+  )
+  // Only hydrate if the top-level Card gets interactive handlers  isInteractive: /* istanbul ignore next */ p => typeof (p as PostWidgetProps).onClick === "function",
 });
 export {
   PostWidget

package/dist/components/post-widget/PostWidget.module.css

@@ -1,4 +1,3 @@
-@charset "UTF-8";
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.
@@ -133,18 +132,18 @@
 .prokodo-PostWidget__list--has-fullWidth {
   display: flex;
   flex-wrap: wrap;
-  gap: 1rem;
+  gap: var(--pk-space-lg);
 }
 .prokodo-PostWidget__list__item {
   display: block;
-  margin-top: 1rem;
+  margin-top: var(--pk-space-lg);
 }
 .prokodo-PostWidget__list__item--has-fullWidth {
   width: 100%;
 }
 @media screen and (min-width: 480px) {
   .prokodo-PostWidget__list__item--has-fullWidth {
-    width: calc(50% - 0.5rem);
+    width: calc(50% - var(--pk-space-lg) / 2);
   }
 }
 .prokodo-PostWidget__list__item__content {
@@ -156,16 +155,15 @@
   height: 100%;
   -o-object-fit: cover;
      object-fit: cover;
-  /* This is the Image component’s container to force fill */
 }
 .prokodo-PostWidget__image__link {
   position: relative;
   display: block;
   width: 80px;
   height: 80px;
-  margin-right: 1rem;
+  margin-right: var(--pk-space-lg);
   line-height: 0;
-  border-radius: 13px;
+  border-radius: var(--pk-radius-md);
   overflow: hidden;
 }
 .prokodo-PostWidget__image__container {
@@ -189,7 +187,7 @@
 .prokodo-PostWidget__date {
   display: block;
   margin: 0;
-  color: var(--color-grey-300);
+  color: var(--pk-color-muted);
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

package/dist/components/post-widget/PostWidget.view.js

@@ -22,6 +22,7 @@ function PostWidgetView({
   classes,
   componentsProps,
   structuredData = true,
+  color,
   ...rest
 }) {
   var _a, _b;
@@ -30,7 +31,7 @@ function PostWidgetView({
     enableShadow: true,
     ...componentsProps == null ? void 0 : componentsProps.card,
     ...rest,
-    variant: ((_a = componentsProps == null ? void 0 : componentsProps.card) == null ? void 0 : _a.variant) ?? (rest == null ? void 0 : rest.variant) ?? void 0
+    color: ((_a = componentsProps == null ? void 0 : componentsProps.card) == null ? void 0 : _a.color) ?? (rest == null ? void 0 : rest.color) ?? color ?? void 0
   };
   return /* @__PURE__ */ jsxs(
     "section",
@@ -58,16 +59,19 @@ function PostWidgetView({
                 Headline,
                 {
                   highlight: true,
-                  size: "md",
-                  type: "h2",
                   ...{ ...title, ...(componentsProps == null ? void 0 : componentsProps.title) ?? {} },
                   itemProp: "headline",
+                  size: "md",
+                  type: "h2",
                   className: bem(
                     "title",
                     void 0,
                     [title == null ? void 0 : title.className, classes == null ? void 0 : classes.title].filter(Boolean).join(" ")
                   ),
-                  variant: (title == null ? void 0 : title.variant) ?? ((_b = componentsProps == null ? void 0 : componentsProps.title) == null ? void 0 : _b.variant) ?? "secondary",
+                  color: (title == null ? void 0 : title.color) ?? ((_b = componentsProps == null ? void 0 : componentsProps.title) == null ? void 0 : _b.color) ?? (color && color !== "white" ? color : (
+                    /* istanbul ignore next */
+                    void 0
+                  )) ?? "inherit",
                   children: title == null ? void 0 : title.content
                 }
               ),
@@ -118,8 +122,12 @@ function PostWidgetView({
                     const headlineMerged = {
                       size: "sm",
                       type: "h3",
-                      variant: "inherit",
-                      ...item.title ?? {},
+                      color: (color && color !== "white" ? color : (
+                        /* istanbul ignore next */
+                        void 0
+                      )) ?? "inherit",
+                      ...item.title ?? /* istanbul ignore next */
+                      {},
                       ...(componentsProps == null ? void 0 : componentsProps.title) ?? {},
                       ...((_o = item.componentsProps) == null ? void 0 : _o.headline) ?? {},
                       className: bem(
@@ -134,7 +142,11 @@ function PostWidgetView({
                     };
                     let formattedDate;
                     if (isString(item == null ? void 0 : item.date)) {
-                      formattedDate = localizeDate((item == null ? void 0 : item.locale) ?? "en-GB", item == null ? void 0 : item.date);
+                      formattedDate = localizeDate(
+                        (item == null ? void 0 : item.locale) ?? /* istanbul ignore next */
+                        "en-GB",
+                        item == null ? void 0 : item.date
+                      );
                     }
                     return /* @__PURE__ */ jsx(
                       "li",
@@ -208,7 +220,8 @@ function PostWidgetView({
                           }
                         )
                       },
-                      `post-widget-item-${((_y = item.title) == null ? void 0 : _y.content) ?? i}`
+                      `post-widget-item-${((_y = item.title) == null ? void 0 : _y.content) ?? /* istanbul ignore next */
+                      i}`
                     );
                   })
                 }

package/dist/components/post-widget-carousel/PostWidgetCarousel.css

@@ -129,10 +129,10 @@
 }
 .prokodo-PostWidgetCarousel__carousel {
   position: relative;
-  margin-top: 1.5rem;
+  margin-top: var(--pk-space-xl);
 }
 .prokodo-PostWidgetCarousel__carousel__wrapper {
-  padding-bottom: 1rem;
+  padding-bottom: var(--pk-space-lg);
 }
 .prokodo-PostWidgetCarousel__carousel__item__image__link {
   position: relative;
@@ -140,7 +140,7 @@
   height: clamp(180px, 30vw, 420px);
   display: block;
   line-height: 0;
-  border-radius: 13px;
+  border-radius: var(--pk-radius-md);
   overflow: hidden;
 }
 .prokodo-PostWidgetCarousel__carousel__item__image {
@@ -164,16 +164,16 @@
 }
 .prokodo-PostWidgetCarousel__carousel__buttons {
   position: absolute;
-  bottom: 0.75rem;
-  right: 0.5rem;
+  bottom: var(--pk-space-md);
+  right: var(--pk-space-sm);
   display: flex;
   flex-direction: row;
   max-width: 100px;
-  gap: 0.5rem;
+  gap: var(--pk-space-sm);
   z-index: 2;
 }
 .prokodo-PostWidgetCarousel__headline {
-  margin-top: 0.75rem !important;
+  margin-top: var(--pk-space-md) !important;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;

package/dist/components/post-widget-carousel/PostWidgetCarousel.js

@@ -5,9 +5,15 @@ import PostWidgetCarouselServer from "./PostWidgetCarousel.server.js";
 const PostWidgetCarousel = createIsland({
   name: "PostWidgetCarousel",
   Server: PostWidgetCarouselServer,
-  loadLazy: /* @__PURE__ */ __name(() => import("./PostWidgetCarousel.lazy.js"), "loadLazy"),
+  loadLazy: (
+    /* istanbul ignore next */
+    /* @__PURE__ */ __name(() => import("./PostWidgetCarousel.lazy.js"), "loadLazy")
+  ),
   // Carousel is interactive; render server first then hydrate when visible
-  isInteractive: /* @__PURE__ */ __name(() => true, "isInteractive")
+  isInteractive: (
+    /* istanbul ignore next */
+    /* @__PURE__ */ __name(() => true, "isInteractive")
+  )
 });
 export {
   PostWidgetCarousel

package/dist/components/post-widget-carousel/PostWidgetCarousel.module.css

@@ -129,10 +129,10 @@
 }
 .prokodo-PostWidgetCarousel__carousel {
   position: relative;
-  margin-top: 1.5rem;
+  margin-top: var(--pk-space-xl);
 }
 .prokodo-PostWidgetCarousel__carousel__wrapper {
-  padding-bottom: 1rem;
+  padding-bottom: var(--pk-space-lg);
 }
 .prokodo-PostWidgetCarousel__carousel__item__image__link {
   position: relative;
@@ -140,7 +140,7 @@
   height: clamp(180px, 30vw, 420px);
   display: block;
   line-height: 0;
-  border-radius: 13px;
+  border-radius: var(--pk-radius-md);
   overflow: hidden;
 }
 .prokodo-PostWidgetCarousel__carousel__item__image {
@@ -164,16 +164,16 @@
 }
 .prokodo-PostWidgetCarousel__carousel__buttons {
   position: absolute;
-  bottom: 0.75rem;
-  right: 0.5rem;
+  bottom: var(--pk-space-md);
+  right: var(--pk-space-sm);
   display: flex;
   flex-direction: row;
   max-width: 100px;
-  gap: 0.5rem;
+  gap: var(--pk-space-sm);
   z-index: 2;
 }
 .prokodo-PostWidgetCarousel__headline {
-  margin-top: 0.75rem !important;
+  margin-top: var(--pk-space-md) !important;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;