@prokodo/ui 1.0.4 → 1.0.6

package/dist/components/image/Image.client.js

@@ -44,10 +44,13 @@ function toPlainImgProps(p) {
     width,
     height
   };
-  if (Boolean(priority)) {
-    imgProps.loading = "eager";
-    imgProps.fetchPriority = "high";
+  if (!Boolean(priority)) {
+    imgProps.loading = "lazy";
   }
+  imgProps.decoding = "async";
+  imgProps["data-nimg"] = "1";
+  imgProps.style = { color: "transparent", ...imgProps.style };
+  imgProps["suppressHydrationWarning"] = true;
   return imgProps;
 }
 __name(toPlainImgProps, "toPlainImgProps");
@@ -63,13 +66,14 @@ const ImageClient = /* @__PURE__ */ __name(({
   const renderImage = /* @__PURE__ */ __name(() => {
     if (ctxImage !== void 0) {
       const CustomImage = ctxImage;
+      const ctxProps = { ...rawProps, suppressHydrationWarning: true };
       return /* @__PURE__ */ jsx(
         CustomImage,
         {
           alt: alt ?? /* istanbul ignore next */
           "",
           className: bem("image", void 0, className),
-          ...rawProps
+          ...ctxProps
         }
       );
     }

package/dist/components/image/Image.server.js

@@ -39,10 +39,13 @@ function toImgOnlyProps(p) {
     width,
     height
   };
-  if (Boolean(priority)) {
-    imgProps.loading = "eager";
-    imgProps.fetchPriority = "high";
+  if (!Boolean(priority)) {
+    imgProps.loading = "lazy";
   }
+  imgProps.decoding = "async";
+  imgProps["data-nimg"] = "1";
+  imgProps.style = { color: "transparent", ...imgProps.style };
+  imgProps["suppressHydrationWarning"] = true;
   return imgProps;
 }
 __name(toImgOnlyProps, "toImgOnlyProps");

package/dist/components/image-text/ImageText.css

@@ -1,3 +1,11 @@
+@import "../animated/Animated.css";
+@import "../button/Button.css";
+@import "../grid/Grid.css";
+@import "../headline/Headline.css";
+@import "../image/Image.css";
+@import "../lottie/Lottie.css";
+@import "../rich-text/RichText.css";
+
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.

package/dist/components/input/Input.css

@@ -1,3 +1,5 @@
+@import "../label/Label.css";
+
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.
@@ -472,7 +474,7 @@ html[data-theme=dark] .prokodo-Input--info, [data-theme=dark] .prokodo-Input--in
 }
 .prokodo-Input__counter {
   padding-top: var(--pk-space-md);
-  color: var(--pk-palette-grey-600);
+  color: var(--pk-input-helper-fg);
   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/input/Input.module.css

@@ -472,7 +472,7 @@ html[data-theme=dark] .prokodo-Input--info, [data-theme=dark] .prokodo-Input--in
 }
 .prokodo-Input__counter {
   padding-top: var(--pk-space-md);
-  color: var(--pk-palette-grey-600);
+  color: var(--pk-input-helper-fg);
   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/input/Input.view.js

@@ -28,7 +28,7 @@ function InputView({
   inputClassName,
   hideCounter,
   rows,
-  hideLegend: _hideLegend,
+  hideLegend,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   minRows,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -76,14 +76,14 @@ function InputView({
         }
       ),
       /* @__PURE__ */ jsxs("div", { className: bem("field", void 0, fieldClassName), children: [
-        typeof label === "string" && /* @__PURE__ */ jsx(
+        !hideLegend && /* @__PURE__ */ jsx(
           "fieldset",
           {
             "aria-hidden": "true",
             className: bem("notch", {
               "is-focused": Boolean(isFocused) || hasValue
             }),
-            children: /* @__PURE__ */ jsx("legend", { className: bem("notchLegend"), children: /* @__PURE__ */ jsx("span", { children: label }) })
+            children: typeof label === "string" && /* @__PURE__ */ jsx("legend", { className: bem("notchLegend"), children: /* @__PURE__ */ jsx("span", { children: label }) })
           }
         ),
         /* @__PURE__ */ jsx(

package/dist/components/inputOTP/InputOTP.css

@@ -1,3 +1,5 @@
+@import "../input/Input.css";
+
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.

package/dist/components/list/List.css

@@ -1,3 +1,7 @@
+@import "../card/Card.css";
+@import "../icon/Icon.css";
+@import "../link/Link.css";
+
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.
@@ -211,9 +215,6 @@
   border-radius: 1000rem;
   background-color: var(--pk-color-surface-raised);
 }
-html[data-theme=dark] .prokodo-List__item__icon {
-  background-color: var(--pk-palette-grey-400);
-}
 .prokodo-List__item__icon__wrapper {
   display: flex;
   align-items: center;

package/dist/components/list/List.module.css

@@ -211,9 +211,6 @@
   border-radius: 1000rem;
   background-color: var(--pk-color-surface-raised);
 }
-html[data-theme=dark] .prokodo-List__item__icon {
-  background-color: var(--pk-palette-grey-400);
-}
 .prokodo-List__item__icon__wrapper {
   display: flex;
   align-items: center;

package/dist/components/map/Map.css

@@ -1,3 +1,5 @@
+@import "../skeleton/Skeleton.css";
+
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.

package/dist/components/post-item/PostItem.css

@@ -1,3 +1,11 @@
+@import "../animated/Animated.css";
+@import "../avatar/Avatar.css";
+@import "../button/Button.css";
+@import "../card/Card.css";
+@import "../headline/Headline.css";
+@import "../image/Image.css";
+@import "../rich-text/RichText.css";
+
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.
@@ -286,4 +294,161 @@
   .prokodo-PostItem__button {
     width: auto;
   }
+}
+
+/* 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.
+ */
+.prokodo-PostItemAuthor {
+  display: flex;
+  align-items: center;
+  padding-right: 1.5rem;
+}
+.prokodo-PostItemAuthor__name {
+  padding-left: 0.75rem;
+  color: var(--color-grey-500);
+  font-weight: 500;
+  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-PostItemAuthor__name {
+    font-size: 1.125rem;
+    line-height: 1.5;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-PostItemAuthor__name {
+    font-size: 1.125rem;
+    line-height: 1.5;
+  }
 }

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

@@ -1,3 +1,11 @@
+@import "../card/Card.css";
+@import "../chip/Chip.css";
+@import "../headline/Headline.css";
+@import "../icon/Icon.css";
+@import "../image/Image.css";
+@import "../link/Link.css";
+@import "../rich-text/RichText.css";
+
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.

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

@@ -1,3 +1,8 @@
+@import "../card/Card.css";
+@import "../headline/Headline.css";
+@import "../image/Image.css";
+@import "../link/Link.css";
+
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.

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

@@ -1,3 +1,10 @@
+@import "../button/Button.css";
+@import "../card/Card.css";
+@import "../carousel/Carousel.css";
+@import "../headline/Headline.css";
+@import "../image/Image.css";
+@import "../link/Link.css";
+
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.

package/dist/components/quote/Quote.css

@@ -1,3 +1,8 @@
+@import "../avatar/Avatar.css";
+@import "../card/Card.css";
+@import "../headline/Headline.css";
+@import "../rich-text/RichText.css";
+
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.

package/dist/components/rating/Rating.css

@@ -1,3 +1,5 @@
+@import "../label/Label.css";
+
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.

package/dist/components/rich-text/RichText.css

@@ -1,3 +1,8 @@
+@import "../headline/Headline.css";
+@import "../icon/Icon.css";
+@import "../image/Image.css";
+@import "../link/Link.css";
+
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.

package/dist/components/select/Select.client.js

@@ -49,6 +49,7 @@ function SelectClient({
   const [popupReady, setPopupReady] = useState(false);
   const [isMobile, setIsMobile] = useState(false);
   const sheetSwipeStart = useRef(null);
+  const didInitFocus = useRef(false);
   const hasPlaceholder = !Boolean(required) && !Boolean(multiple);
   const optionCount = (hasPlaceholder ? 1 : 0) + items.length;
   useEffect(() => {
@@ -114,7 +115,12 @@ function SelectClient({
     []
   );
   useEffect(() => {
-    if (!open || !popupReady) return;
+    if (!open) {
+      didInitFocus.current = false;
+      return;
+    }
+    if (!popupReady || didInitFocus.current) return;
+    didInitFocus.current = true;
     setActiveIndex(valueToIndex());
     requestAnimationFrame(() => {
       var _a;
@@ -150,6 +156,10 @@ function SelectClient({
       window.removeEventListener("scroll", onScroll, true);
     };
   }, [open, updatePopupPosition]);
+  useEffect(() => {
+    if (!open) return;
+    requestAnimationFrame(() => updatePopupPosition());
+  }, [val, open, updatePopupPosition]);
   useEffect(() => {
     if (!open) return;
     const handleOutside = /* @__PURE__ */ __name((e) => {
@@ -326,7 +336,7 @@ function SelectClient({
                       /* @__PURE__ */ jsx(
                         "button",
                         {
-                          "aria-label": "Close",
+                          "aria-label": rest.closeAriaLabel ?? "Close",
                           className: bem("sheet__close"),
                           type: "button",
                           onClick: close,
@@ -419,7 +429,7 @@ function SelectClient({
                         className: bem("sheet__done"),
                         type: "button",
                         onClick: close,
-                        children: "Done"
+                        children: rest.doneLabel ?? "Done"
                       }
                     ) })
                   ]

package/dist/components/select/Select.css

@@ -1,3 +1,5 @@
+@import "../label/Label.css";
+
 @charset "UTF-8";
 /* stylelint-disable */
 /**
@@ -556,7 +558,7 @@ html[data-theme=dark] .prokodo-Select__listbox, [data-theme=dark] .prokodo-Selec
 .prokodo-Select__sheet__backdrop {
   position: fixed;
   inset: 0;
-  z-index: 199;
+  z-index: var(--pk-z-popover, 1400);
   background: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
@@ -567,7 +569,7 @@ html[data-theme=dark] .prokodo-Select__listbox, [data-theme=dark] .prokodo-Selec
   bottom: 0;
   left: 0;
   right: 0;
-  z-index: 200;
+  z-index: calc(var(--pk-z-popover, 1400) + 1);
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -759,35 +761,18 @@ html[data-theme=dark] .prokodo-Select__sheet, [data-theme=dark] .prokodo-Select_
 }
 .prokodo-Select__sheet__done {
   width: 100%;
-  padding: 0.75rem;
-  border-radius: var(--pk-select-radius, 8px);
+  height: 3rem;
+  padding: var(--pk-space-xs, 0.25rem) var(--pk-space-sm, 0.5rem);
+  border-radius: var(--pk-radius-lg, 12px);
   border: none;
   cursor: pointer;
-  font-weight: 700;
-  background: linear-gradient(90deg, var(--pk-select-gradient-from), var(--pk-select-gradient-to));
+  font-size: 0.9375rem;
+  font-weight: 600;
+  text-align: center;
+  background: linear-gradient(135deg, var(--pk-select-gradient-from), var(--pk-select-gradient-to));
   color: #fff;
+  box-shadow: 0 4px 16px color-mix(in srgb, var(--pk-select-gradient-from) 30%, transparent);
   transition: opacity var(--pk-timing-fast) ease;
-  font-weight: 700;
-  font-size: 1.75rem;
-  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  font-style: normal;
-  line-height: 1.6;
-  letter-spacing: 0.03em;
-  text-transform: none;
-  text-align: left;
-  text-decoration: none;
-}
-@media screen and (min-width: 480px) {
-  .prokodo-Select__sheet__done {
-    font-size: 1.5rem;
-    line-height: 1.55;
-  }
-}
-@media screen and (min-width: 960px) {
-  .prokodo-Select__sheet__done {
-    font-size: 1.5rem;
-    line-height: 1.55;
-  }
 }
 .prokodo-Select__sheet__done:hover {
   opacity: 0.9;

package/dist/components/select/Select.module.css

@@ -556,7 +556,7 @@ html[data-theme=dark] .prokodo-Select__listbox, [data-theme=dark] .prokodo-Selec
 .prokodo-Select__sheet__backdrop {
   position: fixed;
   inset: 0;
-  z-index: 199;
+  z-index: var(--pk-z-popover, 1400);
   background: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
@@ -567,7 +567,7 @@ html[data-theme=dark] .prokodo-Select__listbox, [data-theme=dark] .prokodo-Selec
   bottom: 0;
   left: 0;
   right: 0;
-  z-index: 200;
+  z-index: calc(var(--pk-z-popover, 1400) + 1);
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -759,35 +759,18 @@ html[data-theme=dark] .prokodo-Select__sheet, [data-theme=dark] .prokodo-Select_
 }
 .prokodo-Select__sheet__done {
   width: 100%;
-  padding: 0.75rem;
-  border-radius: var(--pk-select-radius, 8px);
+  height: 3rem;
+  padding: var(--pk-space-xs, 0.25rem) var(--pk-space-sm, 0.5rem);
+  border-radius: var(--pk-radius-lg, 12px);
   border: none;
   cursor: pointer;
-  font-weight: 700;
-  background: linear-gradient(90deg, var(--pk-select-gradient-from), var(--pk-select-gradient-to));
+  font-size: 0.9375rem;
+  font-weight: 600;
+  text-align: center;
+  background: linear-gradient(135deg, var(--pk-select-gradient-from), var(--pk-select-gradient-to));
   color: #fff;
+  box-shadow: 0 4px 16px color-mix(in srgb, var(--pk-select-gradient-from) 30%, transparent);
   transition: opacity var(--pk-timing-fast) ease;
-  font-weight: 700;
-  font-size: 1.75rem;
-  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  font-style: normal;
-  line-height: 1.6;
-  letter-spacing: 0.03em;
-  text-transform: none;
-  text-align: left;
-  text-decoration: none;
-}
-@media screen and (min-width: 480px) {
-  .prokodo-Select__sheet__done {
-    font-size: 1.5rem;
-    line-height: 1.55;
-  }
-}
-@media screen and (min-width: 960px) {
-  .prokodo-Select__sheet__done {
-    font-size: 1.5rem;
-    line-height: 1.55;
-  }
 }
 .prokodo-Select__sheet__done:hover {
   opacity: 0.9;

package/dist/components/sidenav/SideNav.css

@@ -1,3 +1,7 @@
+@import "../headline/Headline.css";
+@import "../icon/Icon.css";
+@import "../link/Link.css";
+
 @charset "UTF-8";
 /* stylelint-disable */
 /**

package/dist/components/slider/Slider.css

@@ -1,3 +1,5 @@
+@import "../label/Label.css";
+
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.

package/dist/components/snackbar/Snackbar.css

@@ -1,3 +1,5 @@
+@import "../icon/Icon.css";
+
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.
@@ -124,6 +126,42 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+.prokodo-SnackbarProvider {
+  position: fixed;
+  z-index: 1400;
+  display: flex;
+  flex-direction: column;
+  gap: var(--pk-space-sm);
+  width: -moz-max-content;
+  width: max-content;
+  max-width: min(480px, 100vw - var(--pk-space-xl) * 2);
+  pointer-events: none;
+}
+.prokodo-SnackbarProvider > * {
+  pointer-events: auto;
+}
+.prokodo-SnackbarProvider--is-top {
+  top: var(--pk-space-lg);
+  bottom: auto;
+}
+.prokodo-SnackbarProvider--is-bottom {
+  bottom: var(--pk-space-lg);
+  top: auto;
+}
+.prokodo-SnackbarProvider--is-left {
+  left: var(--pk-space-lg);
+  right: auto;
+}
+.prokodo-SnackbarProvider--is-right {
+  right: var(--pk-space-lg);
+  left: auto;
+}
+.prokodo-SnackbarProvider--is-center {
+  left: 50%;
+  right: auto;
+  transform: translateX(-50%);
+}
+
 @keyframes Snackbar_slideIn {
   from {
     opacity: 0;

package/dist/components/snackbar/Snackbar.module.css

@@ -124,6 +124,42 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+.prokodo-SnackbarProvider {
+  position: fixed;
+  z-index: 1400;
+  display: flex;
+  flex-direction: column;
+  gap: var(--pk-space-sm);
+  width: -moz-max-content;
+  width: max-content;
+  max-width: min(480px, 100vw - var(--pk-space-xl) * 2);
+  pointer-events: none;
+}
+.prokodo-SnackbarProvider > * {
+  pointer-events: auto;
+}
+.prokodo-SnackbarProvider--is-top {
+  top: var(--pk-space-lg);
+  bottom: auto;
+}
+.prokodo-SnackbarProvider--is-bottom {
+  bottom: var(--pk-space-lg);
+  top: auto;
+}
+.prokodo-SnackbarProvider--is-left {
+  left: var(--pk-space-lg);
+  right: auto;
+}
+.prokodo-SnackbarProvider--is-right {
+  right: var(--pk-space-lg);
+  left: auto;
+}
+.prokodo-SnackbarProvider--is-center {
+  left: 50%;
+  right: auto;
+  transform: translateX(-50%);
+}
+
 @keyframes Snackbar_slideIn {
   from {
     opacity: 0;