@prokodo/ui 0.1.15 → 1.0.0

package/dist/components/lottie/Lottie.module.css

@@ -126,4 +126,20 @@
  */
 .prokodo-Lottie__container {
   position: relative;
+  width: 100%;
+}
+.prokodo-Lottie__placeholder {
+  width: 100%;
+  aspect-ratio: 1/1;
+  border-radius: var(--pk-radius-md);
+  background-color: var(--pk-color-surface-subtle);
+  animation: pulse var(--pk-timing-slow) ease-in-out infinite alternate;
+}
+@keyframes pulse {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.4;
+  }
 }

package/dist/components/lottie/Lottie.module.scss.js

@@ -1,6 +1,10 @@
+const pulse = "pulse";
 const styles = {
-  "prokodo-Lottie__container": "prokodo-Lottie__container"
+  "prokodo-Lottie__container": "prokodo-Lottie__container",
+  "prokodo-Lottie__placeholder": "prokodo-Lottie__placeholder",
+  pulse
 };
 export {
-  styles as default
+  styles as default,
+  pulse
 };

package/dist/components/map/Map.css

@@ -0,0 +1,130 @@
+/* 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-Map__container {
+  width: 100%;
+  height: var(--pk-map-height, 500px);
+}

package/dist/components/map/Map.js

@@ -1,8 +1,11 @@
 import { jsx } from "react/jsx-runtime";
 import { memo, useRef, useState, useCallback, useEffect } from "react";
+import { create } from "../../helpers/bem.js";
 import { isString, isArray } from "../../helpers/validations.js";
 import { useGoogleMaps } from "../../hooks/useGoogleMaps.js";
+import styles from "./Map.module.scss.js";
 import { Skeleton } from "../skeleton/Skeleton.js";
+const bem = create(styles, "Map");
 const Map = memo(
   ({ apiKey, mapId, center, marker, zoom = 8 }) => {
     const mapRef = useRef(null);
@@ -75,9 +78,9 @@ const Map = memo(
       [initMap]
     );
     if (!loaded) {
-      return /* @__PURE__ */ jsx(Skeleton, { height: "500px", width: "100%" });
+      return /* @__PURE__ */ jsx(Skeleton, { className: bem("container") });
     }
-    return /* @__PURE__ */ jsx("div", { ref: mapRef, style: { width: "100%", height: "500px" } });
+    return /* @__PURE__ */ jsx("div", { ref: mapRef, className: bem("container") });
   }
 );
 Map.displayName = "Map";

package/dist/components/map/Map.module.css

@@ -0,0 +1,130 @@
+/* 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-Map__container {
+  width: 100%;
+  height: var(--pk-map-height, 500px);
+}

package/dist/components/map/Map.module.scss.js

@@ -0,0 +1,6 @@
+const styles = {
+  "prokodo-Map__container": "prokodo-Map__container"
+};
+export {
+  styles as default
+};

package/dist/components/pagination/Pagination.css

@@ -124,15 +124,99 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+@keyframes pk-pagination-pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.4;
+    transform: scale(0.96);
+  }
+}
 .prokodo-Pagination {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--pk-pagination-gap);
+}
+.prokodo-Pagination--is-pending {
+  --pk-button-disabled-bg: transparent;
+  --pk-button-disabled-fg: var(--pk-pagination-fg);
+  pointer-events: none;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__btn, .prokodo-Pagination--is-pending .prokodo-Pagination__page {
+  animation: pk-pagination-pulse 1.4s ease-in-out infinite;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__page--active {
+  animation-duration: 2.4s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(1) .prokodo-Pagination__page {
+  animation-delay: 0s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(2) .prokodo-Pagination__page {
+  animation-delay: 0.065s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(3) .prokodo-Pagination__page {
+  animation-delay: 0.13s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(4) .prokodo-Pagination__page {
+  animation-delay: 0.195s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(5) .prokodo-Pagination__page {
+  animation-delay: 0.26s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(6) .prokodo-Pagination__page {
+  animation-delay: 0.325s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(7) .prokodo-Pagination__page {
+  animation-delay: 0.39s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(8) .prokodo-Pagination__page {
+  animation-delay: 0.455s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(9) .prokodo-Pagination__page {
+  animation-delay: 0.52s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(10) .prokodo-Pagination__page {
+  animation-delay: 0.585s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(11) .prokodo-Pagination__page {
+  animation-delay: 0.65s;
+}
+.prokodo-Pagination--color-primary {
+  --pk-pagination-active-border: var(--pk-color-brand);
+  --pk-pagination-active-shadow: 0 4px 18px color-mix(in srgb, var(--pk-color-brand) 45%, transparent);
+  --pk-pagination-active-gradient: var(--gradient-border-4);
+}
+.prokodo-Pagination--color-secondary {
+  --pk-pagination-active-border: var(--pk-color-accent);
+  --pk-pagination-active-shadow: 0 4px 18px color-mix(in srgb, var(--pk-color-accent) 45%, transparent);
+  --pk-pagination-active-gradient: var(--gradient-border-2);
+}
+.prokodo-Pagination--color-success {
+  --pk-pagination-active-border: var(--pk-color-success);
+  --pk-pagination-active-shadow: 0 4px 18px color-mix(in srgb, var(--pk-color-success) 45%, transparent);
+  --pk-pagination-active-gradient: var(--gradient-border-success);
+}
+.prokodo-Pagination--color-error {
+  --pk-pagination-active-border: var(--pk-color-error);
+  --pk-pagination-active-shadow: 0 4px 18px color-mix(in srgb, var(--pk-color-error) 45%, transparent);
+  --pk-pagination-active-gradient: var(--gradient-border-error);
+}
+.prokodo-Pagination--color-warning {
+  --pk-pagination-active-border: var(--pk-color-warning);
+  --pk-pagination-active-shadow: 0 4px 18px color-mix(in srgb, var(--pk-color-warning) 45%, transparent);
+  --pk-pagination-active-gradient: var(--gradient-border-warning);
+}
+.prokodo-Pagination--color-info {
+  --pk-pagination-active-border: var(--pk-color-info);
+  --pk-pagination-active-shadow: 0 4px 18px color-mix(in srgb, var(--pk-color-info) 45%, transparent);
+  --pk-pagination-active-gradient: var(--gradient-border-info);
 }
 .prokodo-Pagination__list {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--pk-pagination-gap);
   margin: 0;
   padding: 0;
   list-style: none;
@@ -142,8 +226,8 @@
   align-items: center;
 }
 .prokodo-Pagination__ellipsis {
-  color: var(--color-grey-700);
-  padding: 0 0.25rem;
+  color: var(--pk-pagination-fg);
+  padding: 0 var(--pk-pagination-pad-x);
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
@@ -172,20 +256,52 @@
 .prokodo-Pagination__btn {
   width: 40px;
   height: 40px;
+  transition: box-shadow 140ms ease;
+}
+.prokodo-Pagination__btn:not(:disabled):hover {
+  box-shadow: 0 4px 14px color-mix(in srgb, var(--pk-pagination-active-border) 30%, transparent);
 }
 .prokodo-Pagination__page {
   min-width: 36px;
   height: 36px;
-  padding: 0 0.25rem;
-  border-radius: 10px;
-  color: var(--color-grey-700);
-  border: 1px solid var(--color-grey-100);
+  padding: 0 var(--pk-pagination-pad-x);
+  border-radius: var(--pk-pagination-page-radius);
+  color: var(--pk-pagination-fg);
+  border: none !important;
+  background: transparent !important;
+  background-color: transparent !important;
   text-align: center !important;
+  transition: box-shadow 140ms ease, background 140ms ease, color 140ms ease, transform 140ms ease;
 }
-html[data-theme=dark] .prokodo-Pagination__page {
-  border: 1px solid var(--color-grey-500);
+.prokodo-Pagination__page:not(:disabled):hover {
+  background: color-mix(in srgb, var(--pk-pagination-active-bg) 10%, transparent) !important;
+  background-color: color-mix(in srgb, var(--pk-pagination-active-bg) 10%, transparent) !important;
+  color: var(--pk-pagination-active-border) !important;
+  transform: scale(1.05);
 }
 .prokodo-Pagination__page--active {
-  border: none;
   pointer-events: none;
+  border-radius: calc(var(--pk-pagination-page-radius) + 2px);
+  box-shadow: var(--pk-pagination-active-shadow);
+  transform: scale(1.1);
+  font-weight: 600 !important;
+  letter-spacing: -0.01em;
+  transition: transform 140ms ease, box-shadow 140ms ease;
+  color: var(--pk-color-fg) !important;
+  background: transparent !important;
+  background-color: transparent !important;
+  --pk-button-disabled-bg: transparent;
+  --pk-button-disabled-fg: var(--pk-color-fg);
+}
+.prokodo-Pagination__page--active::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 2px;
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+          mask-composite: exclude;
+  background: var(--pk-pagination-active-gradient) !important;
 }

package/dist/components/pagination/Pagination.module.css

@@ -124,15 +124,99 @@
  * This mixin specifies basic text-styles for components that render a richtext
  * content.
  */
+@keyframes pk-pagination-pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.4;
+    transform: scale(0.96);
+  }
+}
 .prokodo-Pagination {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--pk-pagination-gap);
+}
+.prokodo-Pagination--is-pending {
+  --pk-button-disabled-bg: transparent;
+  --pk-button-disabled-fg: var(--pk-pagination-fg);
+  pointer-events: none;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__btn, .prokodo-Pagination--is-pending .prokodo-Pagination__page {
+  animation: pk-pagination-pulse 1.4s ease-in-out infinite;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__page--active {
+  animation-duration: 2.4s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(1) .prokodo-Pagination__page {
+  animation-delay: 0s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(2) .prokodo-Pagination__page {
+  animation-delay: 0.065s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(3) .prokodo-Pagination__page {
+  animation-delay: 0.13s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(4) .prokodo-Pagination__page {
+  animation-delay: 0.195s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(5) .prokodo-Pagination__page {
+  animation-delay: 0.26s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(6) .prokodo-Pagination__page {
+  animation-delay: 0.325s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(7) .prokodo-Pagination__page {
+  animation-delay: 0.39s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(8) .prokodo-Pagination__page {
+  animation-delay: 0.455s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(9) .prokodo-Pagination__page {
+  animation-delay: 0.52s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(10) .prokodo-Pagination__page {
+  animation-delay: 0.585s;
+}
+.prokodo-Pagination--is-pending .prokodo-Pagination__item:nth-child(11) .prokodo-Pagination__page {
+  animation-delay: 0.65s;
+}
+.prokodo-Pagination--color-primary {
+  --pk-pagination-active-border: var(--pk-color-brand);
+  --pk-pagination-active-shadow: 0 4px 18px color-mix(in srgb, var(--pk-color-brand) 45%, transparent);
+  --pk-pagination-active-gradient: var(--gradient-border-4);
+}
+.prokodo-Pagination--color-secondary {
+  --pk-pagination-active-border: var(--pk-color-accent);
+  --pk-pagination-active-shadow: 0 4px 18px color-mix(in srgb, var(--pk-color-accent) 45%, transparent);
+  --pk-pagination-active-gradient: var(--gradient-border-2);
+}
+.prokodo-Pagination--color-success {
+  --pk-pagination-active-border: var(--pk-color-success);
+  --pk-pagination-active-shadow: 0 4px 18px color-mix(in srgb, var(--pk-color-success) 45%, transparent);
+  --pk-pagination-active-gradient: var(--gradient-border-success);
+}
+.prokodo-Pagination--color-error {
+  --pk-pagination-active-border: var(--pk-color-error);
+  --pk-pagination-active-shadow: 0 4px 18px color-mix(in srgb, var(--pk-color-error) 45%, transparent);
+  --pk-pagination-active-gradient: var(--gradient-border-error);
+}
+.prokodo-Pagination--color-warning {
+  --pk-pagination-active-border: var(--pk-color-warning);
+  --pk-pagination-active-shadow: 0 4px 18px color-mix(in srgb, var(--pk-color-warning) 45%, transparent);
+  --pk-pagination-active-gradient: var(--gradient-border-warning);
+}
+.prokodo-Pagination--color-info {
+  --pk-pagination-active-border: var(--pk-color-info);
+  --pk-pagination-active-shadow: 0 4px 18px color-mix(in srgb, var(--pk-color-info) 45%, transparent);
+  --pk-pagination-active-gradient: var(--gradient-border-info);
 }
 .prokodo-Pagination__list {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--pk-pagination-gap);
   margin: 0;
   padding: 0;
   list-style: none;
@@ -142,8 +226,8 @@
   align-items: center;
 }
 .prokodo-Pagination__ellipsis {
-  color: var(--color-grey-700);
-  padding: 0 0.25rem;
+  color: var(--pk-pagination-fg);
+  padding: 0 var(--pk-pagination-pad-x);
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
@@ -172,20 +256,52 @@
 .prokodo-Pagination__btn {
   width: 40px;
   height: 40px;
+  transition: box-shadow 140ms ease;
+}
+.prokodo-Pagination__btn:not(:disabled):hover {
+  box-shadow: 0 4px 14px color-mix(in srgb, var(--pk-pagination-active-border) 30%, transparent);
 }
 .prokodo-Pagination__page {
   min-width: 36px;
   height: 36px;
-  padding: 0 0.25rem;
-  border-radius: 10px;
-  color: var(--color-grey-700);
-  border: 1px solid var(--color-grey-100);
+  padding: 0 var(--pk-pagination-pad-x);
+  border-radius: var(--pk-pagination-page-radius);
+  color: var(--pk-pagination-fg);
+  border: none !important;
+  background: transparent !important;
+  background-color: transparent !important;
   text-align: center !important;
+  transition: box-shadow 140ms ease, background 140ms ease, color 140ms ease, transform 140ms ease;
 }
-html[data-theme=dark] .prokodo-Pagination__page {
-  border: 1px solid var(--color-grey-500);
+.prokodo-Pagination__page:not(:disabled):hover {
+  background: color-mix(in srgb, var(--pk-pagination-active-bg) 10%, transparent) !important;
+  background-color: color-mix(in srgb, var(--pk-pagination-active-bg) 10%, transparent) !important;
+  color: var(--pk-pagination-active-border) !important;
+  transform: scale(1.05);
 }
 .prokodo-Pagination__page--active {
-  border: none;
   pointer-events: none;
+  border-radius: calc(var(--pk-pagination-page-radius) + 2px);
+  box-shadow: var(--pk-pagination-active-shadow);
+  transform: scale(1.1);
+  font-weight: 600 !important;
+  letter-spacing: -0.01em;
+  transition: transform 140ms ease, box-shadow 140ms ease;
+  color: var(--pk-color-fg) !important;
+  background: transparent !important;
+  background-color: transparent !important;
+  --pk-button-disabled-bg: transparent;
+  --pk-button-disabled-fg: var(--pk-color-fg);
+}
+.prokodo-Pagination__page--active::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 2px;
+  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: xor;
+          mask-composite: exclude;
+  background: var(--pk-pagination-active-gradient) !important;
 }

package/dist/components/pagination/Pagination.module.scss.js

@@ -1,11 +1,19 @@
 const styles = {
   "prokodo-Pagination": "prokodo-Pagination",
-  "prokodo-Pagination__list": "prokodo-Pagination__list",
-  "prokodo-Pagination__item": "prokodo-Pagination__item",
-  "prokodo-Pagination__ellipsis": "prokodo-Pagination__ellipsis",
+  "prokodo-Pagination--is-pending": "prokodo-Pagination--is-pending",
   "prokodo-Pagination__btn": "prokodo-Pagination__btn",
   "prokodo-Pagination__page": "prokodo-Pagination__page",
-  "prokodo-Pagination__page--active": "prokodo-Pagination__page--active"
+  "pk-pagination-pulse": "pk-pagination-pulse",
+  "prokodo-Pagination__page--active": "prokodo-Pagination__page--active",
+  "prokodo-Pagination__item": "prokodo-Pagination__item",
+  "prokodo-Pagination--color-primary": "prokodo-Pagination--color-primary",
+  "prokodo-Pagination--color-secondary": "prokodo-Pagination--color-secondary",
+  "prokodo-Pagination--color-success": "prokodo-Pagination--color-success",
+  "prokodo-Pagination--color-error": "prokodo-Pagination--color-error",
+  "prokodo-Pagination--color-warning": "prokodo-Pagination--color-warning",
+  "prokodo-Pagination--color-info": "prokodo-Pagination--color-info",
+  "prokodo-Pagination__list": "prokodo-Pagination__list",
+  "prokodo-Pagination__ellipsis": "prokodo-Pagination__ellipsis"
 };
 export {
   styles as default