@prokodo/ui 1.0.4 → 1.0.6

package/dist/components/RTE/RTE.css

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

package/dist/components/accordion/Accordion.css

@@ -1,3 +1,7 @@
+@import "../button/Button.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/animatedText/AnimatedText.server.js

@@ -3,8 +3,8 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable:
 import { jsx } from "react/jsx-runtime";
 import { AnimatedTextView } from "./AnimatedText.view.js";
 function AnimatedTextServer(props) {
-  const { children: _ignored, ...rest } = props;
-  return /* @__PURE__ */ jsx(AnimatedTextView, { ...rest, text: "" });
+  const { children, ...rest } = props;
+  return /* @__PURE__ */ jsx(AnimatedTextView, { ...rest, text: children });
 }
 __name(AnimatedTextServer, "AnimatedTextServer");
 export {

package/dist/components/autocomplete/Autocomplete.css

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

package/dist/components/avatar/Avatar.css

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

package/dist/components/button/Button.css

@@ -1,3 +1,7 @@
+@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/calendly/Calendly.css

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

package/dist/components/card/Card.client.js

@@ -31,7 +31,6 @@ function CardClient({
     },
     [onClick, onKeyDown, disabled]
   );
-  const linkRole = isString(redirect == null ? void 0 : redirect.href) && !Boolean(disabled) ? "link" : void 0;
   const linkTabIndex = isString(redirect == null ? void 0 : redirect.href) && !Boolean(disabled) ? 0 : void 0;
   return /* @__PURE__ */ jsx(
     CardView,
@@ -40,7 +39,6 @@ function CardClient({
       disabled,
       isClickable,
       redirect,
-      role: linkRole,
       tabIndex: linkTabIndex,
       onClick: !Boolean(disabled) ? handleClickVoid : void 0,
       onKeyDown: handleKey,

package/dist/components/card/Card.css

@@ -1,3 +1,10 @@
+@import "../animated/Animated.css";
+@import "../headline/Headline.css";
+@import "../image/Image.css";
+@import "../link/Link.css";
+@import "../rich-text/RichText.css";
+@import "../skeleton/Skeleton.css";
+
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.

package/dist/components/carousel/Carousel.client.js

@@ -180,15 +180,20 @@ function CarouselClient(props) {
                 transform: getTransformValue(),
                 transition: transitioning ? "transform 0.3s ease-in-out" : "none"
               },
-              children: items.map((child, i) => /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: bem("item", void 0, classNameItem),
-                  style: { width: `${100 / effectiveItemsToShow}%` },
-                  children: child
-                },
-                `cl-${i}`
-              ))
+              children: items.map((child, i) => {
+                const isClone = i < effectiveItemsToShow || i >= effectiveItemsToShow + num;
+                return /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    "aria-hidden": isClone || void 0,
+                    className: bem("item", void 0, classNameItem),
+                    inert: isClone || void 0,
+                    style: { width: `${100 / effectiveItemsToShow}%` },
+                    children: child
+                  },
+                  `cl-${i}`
+                );
+              })
             }
           ),
           /* @__PURE__ */ jsx(

package/dist/components/carousel/Carousel.css

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

package/dist/components/datePicker/DatePicker.client.js

@@ -46,6 +46,7 @@ const DatePickerClient = /* @__PURE__ */ __name(({
   const [isOpen, setIsOpen] = useState(false);
   const [isMobile, setIsMobile] = useState(false);
   const [viewMode, setViewMode] = useState("days");
+  const [triggerRect, setTriggerRect] = useState(null);
   const viewModeRef = useRef("days");
   viewModeRef.current = viewMode;
   const swipeTouchStart = useRef(null);
@@ -100,7 +101,12 @@ const DatePickerClient = /* @__PURE__ */ __name(({
   useEffect(() => {
     if (!isOpen || isMobile) return;
     function handlePointerDown(e) {
-      if (rootRef.current && !rootRef.current.contains(e.target)) {
+      var _a;
+      const target = e.target;
+      const inRoot = (_a = rootRef.current) == null ? void 0 : _a.contains(target);
+      const dialogEl = document.getElementById(`${name}-dialog`);
+      const inDialog = dialogEl == null ? void 0 : dialogEl.contains(target);
+      if (!inRoot && !inDialog) {
         setIsOpen(false);
         setDraft(date);
       }
@@ -108,7 +114,23 @@ const DatePickerClient = /* @__PURE__ */ __name(({
     __name(handlePointerDown, "handlePointerDown");
     document.addEventListener("pointerdown", handlePointerDown);
     return () => document.removeEventListener("pointerdown", handlePointerDown);
-  }, [isOpen, isMobile, date]);
+  }, [isOpen, isMobile, date, name]);
+  useEffect(() => {
+    if (!isOpen || isMobile || !rootRef.current) return;
+    function sync() {
+      const el = rootRef.current;
+      if (!el) return;
+      const r = el.getBoundingClientRect();
+      setTriggerRect({ top: r.bottom, left: r.left, width: r.width });
+    }
+    __name(sync, "sync");
+    document.addEventListener("scroll", sync, true);
+    window.addEventListener("resize", sync);
+    return () => {
+      document.removeEventListener("scroll", sync, true);
+      window.removeEventListener("resize", sync);
+    };
+  }, [isOpen, isMobile]);
   const validateDate = useCallback(
     (d) => {
       if (isNull(d)) {
@@ -143,6 +165,10 @@ const DatePickerClient = /* @__PURE__ */ __name(({
         setViewingMonth(date ?? dayjs());
         setDraft(date);
         setViewMode("days");
+        if (rootRef.current) {
+          const r = rootRef.current.getBoundingClientRect();
+          setTriggerRect({ top: r.bottom, left: r.left, width: r.width });
+        }
       }
       return !prev;
     });
@@ -218,6 +244,12 @@ const DatePickerClient = /* @__PURE__ */ __name(({
     },
     []
   );
+  const dialogStyle = !isMobile && triggerRect ? {
+    position: "fixed",
+    top: triggerRect.top + 8,
+    left: triggerRect.left,
+    zIndex: 1400
+  } : void 0;
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -228,7 +260,8 @@ const DatePickerClient = /* @__PURE__ */ __name(({
         {
           ...rest,
           color,
-          dialogPortalTarget: isMobile ? document.body : null,
+          dialogPortalTarget: document.body,
+          dialogStyle,
           errorText: error,
           format: fmt,
           helperText,

package/dist/components/datePicker/DatePicker.css

@@ -1,3 +1,5 @@
+@import "../input/Input.css";
+
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.
@@ -280,7 +282,7 @@ html[data-theme=dark] .prokodo-DatePicker--info, [data-theme=dark] .prokodo-Date
   position: absolute;
   top: calc(100% + var(--pk-space-xs));
   left: 0;
-  z-index: 200;
+  z-index: var(--pk-z-popover, 1400);
   min-width: var(--pk-dp-dialog-min-width);
   width: -moz-max-content;
   width: max-content;
@@ -340,7 +342,7 @@ html[data-theme=dark] .prokodo-DatePicker__dialog, [data-theme=dark] .prokodo-Da
     display: block;
     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);

package/dist/components/datePicker/DatePicker.module.css

@@ -280,7 +280,7 @@ html[data-theme=dark] .prokodo-DatePicker--info, [data-theme=dark] .prokodo-Date
   position: absolute;
   top: calc(100% + var(--pk-space-xs));
   left: 0;
-  z-index: 200;
+  z-index: var(--pk-z-popover, 1400);
   min-width: var(--pk-dp-dialog-min-width);
   width: -moz-max-content;
   width: max-content;
@@ -340,7 +340,7 @@ html[data-theme=dark] .prokodo-DatePicker__dialog, [data-theme=dark] .prokodo-Da
     display: block;
     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);

package/dist/components/datePicker/DatePicker.view.js

@@ -52,7 +52,8 @@ function DatePickerView({
   viewMode,
   onViewModeChange,
   onMonthSelect,
-  onYearSelect
+  onYearSelect,
+  dialogStyle
 }) {
   const effectiveFormat = format ?? (withTime ? "YYYY-MM-DDTHH:mm" : "YYYY-MM-DD");
   const displayValue = (selectedDate == null ? void 0 : selectedDate.format(effectiveFormat)) ?? "";
@@ -103,6 +104,7 @@ function DatePickerView({
           prevAriaLabel,
           prevIcon,
           selectedDate,
+          style: dialogStyle,
           timeLabel,
           todayLabel,
           viewingMonth,

package/dist/components/datePicker/DatePickerDialog.view.js

@@ -42,7 +42,8 @@ function DatePickerDialog({
   viewMode = "days",
   onViewModeChange,
   onMonthSelect,
-  onYearSelect
+  onYearSelect,
+  style
 }) {
   const calendarDays = buildCalendarGrid(viewingMonth, minDate, maxDate);
   const hours = buildHours();
@@ -63,6 +64,7 @@ function DatePickerDialog({
         "aria-modal": "true",
         id: `${name}-dialog`,
         role: "dialog",
+        style,
         className: [
           bem("dialog"),
           dialogColor ? bem(void 0, { [dialogColor]: true }) : ""

package/dist/components/dialog/Dialog.client.js

@@ -45,6 +45,14 @@ function DialogClient({
   useEffect(() => {
     if (open) openDialog();
   }, [open, openDialog]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [isOpen]);
   useEffect(() => {
     if (!isOpen) return;
     const handleKey = /* @__PURE__ */ __name((e) => {

package/dist/components/dialog/Dialog.css

@@ -1,3 +1,5 @@
+@import "../button/Button.css";
+
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.
@@ -150,6 +152,9 @@
   align-items: center;
   z-index: var(--pk-z-modal);
 }
+.prokodo-Dialog--is-visible {
+  display: flex;
+}
 .prokodo-Dialog__backdrop {
   display: none;
   position: fixed;
@@ -158,16 +163,11 @@
   align-items: center;
   z-index: var(--pk-z-modal);
   background-color: rgb(var(--pk-color-overlay-rgb)/var(--pk-color-overlay-alpha));
-}
-.prokodo-Dialog__backdrop {
   animation: Dialog_backdropFadeIn var(--pk-timing-normal) ease;
 }
 .prokodo-Dialog__backdrop--is-visible {
   display: flex;
 }
-.prokodo-Dialog--is-visible {
-  display: flex;
-}
 .prokodo-Dialog__backdrop .prokodo-Dialog, .prokodo-Dialog__backdrop .prokodo-Dialog--is-visible {
   position: static;
   inset: auto;

package/dist/components/dialog/Dialog.module.css

@@ -150,6 +150,9 @@
   align-items: center;
   z-index: var(--pk-z-modal);
 }
+.prokodo-Dialog--is-visible {
+  display: flex;
+}
 .prokodo-Dialog__backdrop {
   display: none;
   position: fixed;
@@ -158,16 +161,11 @@
   align-items: center;
   z-index: var(--pk-z-modal);
   background-color: rgb(var(--pk-color-overlay-rgb)/var(--pk-color-overlay-alpha));
-}
-.prokodo-Dialog__backdrop {
   animation: Dialog_backdropFadeIn var(--pk-timing-normal) ease;
 }
 .prokodo-Dialog__backdrop--is-visible {
   display: flex;
 }
-.prokodo-Dialog--is-visible {
-  display: flex;
-}
 .prokodo-Dialog__backdrop .prokodo-Dialog, .prokodo-Dialog__backdrop .prokodo-Dialog--is-visible {
   position: static;
   inset: auto;

package/dist/components/dialog/Dialog.module.scss.js

@@ -2,10 +2,10 @@ const Dialog_backdropFadeIn = "Dialog_backdropFadeIn";
 const Dialog_fadeIn = "Dialog_fadeIn";
 const styles = {
   "prokodo-Dialog": "prokodo-Dialog",
+  "prokodo-Dialog--is-visible": "prokodo-Dialog--is-visible",
   "prokodo-Dialog__backdrop": "prokodo-Dialog__backdrop",
   Dialog_backdropFadeIn,
   "prokodo-Dialog__backdrop--is-visible": "prokodo-Dialog__backdrop--is-visible",
-  "prokodo-Dialog--is-visible": "prokodo-Dialog--is-visible",
   "prokodo-Dialog__container": "prokodo-Dialog__container",
   Dialog_fadeIn,
   "prokodo-Dialog__container--fullScreen": "prokodo-Dialog__container--fullScreen",

package/dist/components/drawer/Drawer.css

@@ -1,3 +1,6 @@
+@import "../button/Button.css";
+@import "../headline/Headline.css";
+
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.

package/dist/components/dynamic-list/DynamicList.css

@@ -1,3 +1,8 @@
+@import "../button/Button.css";
+@import "../input/Input.css";
+@import "../label/Label.css";
+@import "../select/Select.css";
+
 @charset "UTF-8";
 /* stylelint-disable */
 /**

package/dist/components/form/Form.css

@@ -1,3 +1,18 @@
+@import "../autocomplete/Autocomplete.css";
+@import "../button/Button.css";
+@import "../checkbox/Checkbox.css";
+@import "../checkbox-group/CheckboxGroup.css";
+@import "../datePicker/DatePicker.css";
+@import "../dynamic-list/DynamicList.css";
+@import "../grid/Grid.css";
+@import "../headline/Headline.css";
+@import "../input/Input.css";
+@import "../inputOTP/InputOTP.css";
+@import "../rating/Rating.css";
+@import "../select/Select.css";
+@import "../slider/Slider.css";
+@import "../switch/Switch.css";
+
 /* stylelint-disable */
 /**
  * Calculates a rem-based value by a given pixel size.
@@ -151,4 +166,173 @@
 
 .prokodo-FormField {
   padding-bottom: 1rem;
+}
+
+/* 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-FormResponse {
+  padding: 0 1rem;
+}
+.prokodo-FormResponse__success {
+  color: var(--color-success);
+  font-weight: 700;
+}
+.prokodo-FormResponse__errors {
+  display: block;
+  margin-bottom: 0.75rem;
+  color: var(--color-grey-300);
+}
+.prokodo-FormResponse__errors__item {
+  display: block;
+  padding-bottom: 1rem;
+  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-FormResponse__errors__item {
+    font-size: 1.125rem;
+    line-height: 1.5;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-FormResponse__errors__item {
+    font-size: 1.125rem;
+    line-height: 1.5;
+  }
+}
+.prokodo-FormResponse__errors__desc {
+  display: block;
+  padding: 0;
+  color: var(--color-error);
 }

package/dist/components/form/FormField.client.js

@@ -26,7 +26,7 @@ function FormFieldClient({
   onValidate,
   ...props
 }) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f;
   const renderFieldContainer = useCallback(
     (children) => /* @__PURE__ */ jsx(GridRow, { className: bem(), xs: 12, children }),
     []
@@ -66,6 +66,8 @@ function FormFieldClient({
             priority: true,
             color,
             ...props,
+            closeAriaLabel: props.closeAriaLabel ?? ((_a = messagesFields == null ? void 0 : messagesFields.select) == null ? void 0 : _a.closeAriaLabel),
+            doneLabel: props.doneLabel ?? ((_b = messagesFields == null ? void 0 : messagesFields.select) == null ? void 0 : _b.doneLabel),
             onChange: (
               /* istanbul ignore next */
               /* @__PURE__ */ __name((_, value) => onChange == null ? void 0 : onChange(props, value ?? void 0), "onChange")
@@ -80,7 +82,7 @@ function FormFieldClient({
           {
             priority: true,
             color,
-            errorTranslations: (_a = messagesFields == null ? void 0 : messagesFields.errors) == null ? void 0 : _a.input,
+            errorTranslations: (_c = messagesFields == null ? void 0 : messagesFields.errors) == null ? void 0 : _c.input,
             onValidate: /* @__PURE__ */ __name((_, err) => onValidate == null ? void 0 : onValidate(props, err), "onValidate"),
             onChange: /* @__PURE__ */ __name((e) => onChange == null ? void 0 : onChange(props, e.target.value), "onChange"),
             ...props
@@ -95,7 +97,7 @@ function FormFieldClient({
             priority: true,
             color,
             ...props,
-            translations: (_b = messagesFields == null ? void 0 : messagesFields.errors) == null ? void 0 : _b.date,
+            translations: (_d = messagesFields == null ? void 0 : messagesFields.errors) == null ? void 0 : _d.date,
             onValidate: /* @__PURE__ */ __name((_, err) => onValidate == null ? void 0 : onValidate(props, err), "onValidate"),
             onChange: /* @__PURE__ */ __name((value) => onChange == null ? void 0 : onChange(
               props,
@@ -117,7 +119,7 @@ function FormFieldClient({
             color,
             ...p,
             value: p == null ? void 0 : p.value,
-            fields: (_c = p == null ? void 0 : p.fields) == null ? void 0 : _c.map((field) => ({
+            fields: (_e = p == null ? void 0 : p.fields) == null ? void 0 : _e.map((field) => ({
               ...field,
               onValidate: /* @__PURE__ */ __name((_, err) => onValidate == null ? void 0 : onValidate(p, err), "onValidate")
             })),
@@ -133,7 +135,7 @@ function FormFieldClient({
             priority: true,
             color,
             ...props,
-            errorTranslations: (_d = messagesFields == null ? void 0 : messagesFields.errors) == null ? void 0 : _d.input,
+            errorTranslations: (_f = messagesFields == null ? void 0 : messagesFields.errors) == null ? void 0 : _f.input,
             onValidate: /* @__PURE__ */ __name((_, err) => onValidate == null ? void 0 : onValidate(props, err), "onValidate"),
             onChange: /* @__PURE__ */ __name((e) => {
               var _a2;

package/dist/components/headline/Headline.css

@@ -1,3 +1,5 @@
+@import "../rich-text/RichText.css";
+
 @charset "UTF-8";
 /* stylelint-disable */
 /**