@prokodo/ui 0.1.15 → 1.0.1

package/dist/components/link/Link.module.css

@@ -127,7 +127,7 @@
 .prokodo-Link {
   text-decoration: none;
   cursor: pointer;
-  color: var(--color-grey-500);
+  color: var(--pk-link-color);
   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;
@@ -155,38 +155,38 @@
 }
 .prokodo-Link--has-no-background:hover {
   text-decoration: underline;
-  color: var(--color-primary-500);
+  color: var(--pk-link-color-hover);
 }
 .prokodo-Link--has-no-background:focus {
-  color: var(--color-primary-500);
+  color: var(--pk-link-color-hover);
 }
 .prokodo-Link--has-no-background--primary {
-  color: var(--color-primary-500);
+  color: var(--pk-link-color-primary);
 }
 .prokodo-Link--has-no-background--secondary {
-  color: var(--color-secondary-500);
+  color: var(--pk-link-color-secondary);
 }
 .prokodo-Link--has-no-background--info {
-  color: var(--color-grey-300);
+  color: var(--pk-link-color-info);
 }
 .prokodo-Link--has-no-background--success {
-  color: var(--color-success);
+  color: var(--pk-link-color-success);
 }
 .prokodo-Link--has-no-background--warning {
-  color: var(--color-warning);
+  color: var(--pk-link-color-warning);
 }
 .prokodo-Link--has-no-background--error {
-  color: var(--color-error);
+  color: var(--pk-link-color-error);
 }
 .prokodo-Link--has-no-background--white {
-  color: var(--color-white);
+  color: var(--pk-link-color-white);
 }
 .prokodo-Link--has-no-background--white:hover {
-  color: var(--color-white);
+  color: var(--pk-link-color-white);
 }
 .prokodo-Link--has-no-background--primary:hover, .prokodo-Link--has-no-background--secondary:hover, .prokodo-Link--has-no-background--success:hover, .prokodo-Link--has-no-background--error:hover, .prokodo-Link--has-no-background--info:hover, .prokodo-Link--has-no-background--warning:hover {
-  color: var(--color-grey-500);
+  color: var(--pk-link-color-variant-hover);
 }
 .prokodo-Link--has-no-background--primary:focus, .prokodo-Link--has-no-background--secondary:focus, .prokodo-Link--has-no-background--success:focus, .prokodo-Link--has-no-background--error:focus, .prokodo-Link--has-no-background--info:focus, .prokodo-Link--has-no-background--warning:focus {
-  color: var(--color-grey-500);
+  color: var(--pk-link-color-variant-hover);
 }

package/dist/components/link/Link.view.js

@@ -5,7 +5,7 @@ import { create } from "../../helpers/bem.js";
 import styles from "./Link.module.scss.js";
 const bem = create(styles, "Link");
 function LinkView({
-  variant = "inherit",
+  color = "inherit",
   href,
   children,
   className,
@@ -23,7 +23,7 @@ function LinkView({
 }) {
   const linkMod = {
     "has-no-background": hasBackground === false,
-    [`has-no-background--${variant}`]: hasBackground === false
+    [`has-no-background--${color}`]: hasBackground === false
   };
   const common = {
     className: bem(void 0, linkMod, className),
@@ -36,16 +36,18 @@ function LinkView({
       "span",
       {
         ...common,
-        role: "button",
-        tabIndex: 0,
-        onClick: hasHandlers ? onClick : void 0,
-        onKeyDown: hasHandlers ? (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            onClick == null ? void 0 : onClick(
-              e
-            );
-          }
-        } : void 0,
+        role: hasHandlers ? "button" : void 0,
+        tabIndex: hasHandlers ? 0 : void 0,
+        ...hasHandlers ? {
+          onClick,
+          onKeyDown: /* @__PURE__ */ __name((e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              onClick == null ? void 0 : onClick(
+                e
+              );
+            }
+          }, "onKeyDown")
+        } : {},
         ...rest,
         children
       }

package/dist/components/list/List.css

@@ -132,8 +132,8 @@
   flex-wrap: wrap;
   align-items: center;
   width: 100%;
-  margin: 0.25rem 0;
-  color: var(--color-grey-500);
+  margin: var(--pk-space-xs) 0;
+  color: var(--pk-color-muted);
   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;
@@ -163,12 +163,12 @@
   flex-wrap: nowrap;
 }
 .prokodo-List__item__card {
-  margin: 0.75rem 0;
+  margin: var(--pk-space-md) 0;
 }
 .prokodo-List__item__card__content {
   display: flex;
   align-items: center;
-  padding: 0.75rem;
+  padding: var(--pk-space-md);
 }
 .prokodo-List__item__inner {
   width: 100%;
@@ -206,22 +206,22 @@
   align-self: flex-start;
   min-width: 2.5rem;
   height: 2.5rem;
-  margin-top: 0.25rem;
-  margin-right: 0.25rem;
+  margin-top: var(--pk-space-xs);
+  margin-right: var(--pk-space-xs);
   border-radius: 1000rem;
-  background-color: var(--color-grey-50);
+  background-color: var(--pk-color-surface-raised);
 }
 html[data-theme=dark] .prokodo-List__item__icon {
-  background-color: var(--color-grey-400);
+  background-color: var(--pk-palette-grey-400);
 }
 .prokodo-List__item__icon__wrapper {
   display: flex;
   align-items: center;
-  padding-right: 0.5rem;
+  padding-right: var(--pk-space-sm);
 }
 .prokodo-List__item__title--card {
   display: block;
-  padding: 0.75rem 0 0.25rem 0.5rem;
+  padding: var(--pk-space-md) 0 var(--pk-space-xs) var(--pk-space-sm);
   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;
@@ -248,19 +248,19 @@ html[data-theme=dark] .prokodo-List__item__icon {
   font-weight: 500;
 }
 .prokodo-List__item__content {
-  width: calc(100% - 2rem);
+  width: calc(100% - var(--pk-space-2xl));
 }
 .prokodo-List__item__desc {
-  color: var(--color-grey-600);
+  color: var(--pk-color-muted);
   margin: 0;
-  padding: 0.25rem 0;
+  padding: var(--pk-space-xs) 0;
   display: block;
   width: 100%;
   -webkit-box-orient: vertical;
   line-clamp: 3;
-  -webkit-line-clamp: 3; /* Limits the content to 3 lines */
+  -webkit-line-clamp: 3;
   overflow: hidden;
-  text-overflow: ellipsis; /* Adds the ellipsis at the end */
+  text-overflow: ellipsis;
   word-wrap: break-word;
   font-weight: 400;
   font-size: 1.125rem;
@@ -284,11 +284,11 @@ html[data-theme=dark] .prokodo-List__item__icon {
 }
 .prokodo-List__item__desc--card {
   padding-top: 0;
-  padding-left: 0.5rem;
+  padding-left: var(--pk-space-sm);
 }
 .prokodo-List__item--is-clickable {
   cursor: pointer;
-  color: var(--color-grey-500);
+  color: var(--pk-color-muted);
 }
 .prokodo-List__item--is-clickable a {
   font-weight: 500;
@@ -316,44 +316,83 @@ html[data-theme=dark] .prokodo-List__item__icon {
 .prokodo-List__item--is-clickable a {
   font-weight: 500;
 }
-.prokodo-List__item--is-clickable:hover span[role=presentation] {
-  color: var(--color-primary-500);
+.prokodo-List__item--is-clickable--inherit:hover {
+  color: var(--pk-color-brand);
 }
-.prokodo-List__item--is-clickable:hover .list-title {
+.prokodo-List__item--is-clickable--inherit:hover .list-title {
   background-image: var(--gradient-text-primary);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
 }
-.prokodo-List__item--is-clickable--inherit:hover {
-  color: var(--color-primary-500);
-}
 .prokodo-List__item--is-clickable--primary {
-  color: var(--color-primary-500);
+  color: var(--pk-color-brand);
+}
+.prokodo-List__item--is-clickable--primary:hover .list-title {
+  background-image: var(--gradient-text-primary);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.prokodo-List__item--is-clickable--primary:hover span[role=presentation] {
+  color: var(--pk-color-brand);
 }
 .prokodo-List__item--is-clickable--secondary {
-  color: var(--color-secondary-500);
+  color: var(--pk-color-accent);
+}
+.prokodo-List__item--is-clickable--secondary:hover span[role=presentation] {
+  color: var(--pk-color-accent);
 }
 .prokodo-List__item--is-clickable--info {
-  color: var(--color-grey-300);
+  color: var(--pk-color-muted);
+}
+.prokodo-List__item--is-clickable--info:hover span[role=presentation] {
+  color: var(--pk-color-muted);
 }
 .prokodo-List__item--is-clickable--success {
-  color: var(--color-success);
+  color: var(--pk-color-success);
+}
+.prokodo-List__item--is-clickable--success:hover .list-title {
+  background-image: var(--gradient-text-success);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.prokodo-List__item--is-clickable--success:hover span[role=presentation] {
+  color: var(--pk-color-success);
 }
 .prokodo-List__item--is-clickable--warning {
-  color: var(--color-warning);
+  color: var(--pk-color-warning);
+}
+.prokodo-List__item--is-clickable--warning:hover .list-title {
+  background-image: var(--gradient-text-warning);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.prokodo-List__item--is-clickable--warning:hover span[role=presentation] {
+  color: var(--pk-color-warning);
 }
 .prokodo-List__item--is-clickable--error {
-  color: var(--color-error);
+  color: var(--pk-color-error);
+}
+.prokodo-List__item--is-clickable--error:hover .list-title {
+  background-image: var(--gradient-text-error);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.prokodo-List__item--is-clickable--error:hover span[role=presentation] {
+  color: var(--pk-color-error);
 }
 .prokodo-List__item--is-clickable--white {
-  color: var(--color-white);
+  color: var(--pk-palette-white);
 }
 .prokodo-List__item--is-clickable--white:hover {
-  color: var(--color-white);
+  color: var(--pk-palette-white);
 }
 .prokodo-List__item--is-clickable--primary:hover, .prokodo-List__item--is-clickable--secondary:hover, .prokodo-List__item--is-clickable--success:hover, .prokodo-List__item--is-clickable--error:hover, .prokodo-List__item--is-clickable--info:hover, .prokodo-List__item--is-clickable--warning:hover {
-  color: var(--color-grey-500);
+  color: var(--pk-color-muted);
 }
 .prokodo-List__item--card {
   display: block;

package/dist/components/list/List.js

@@ -11,7 +11,7 @@ import { Link } from "../link/Link.js";
 const bem = create(styles, "List");
 function List({
   type,
-  variant = "inherit",
+  color = "inherit",
   className,
   /* istanbul ignore next */
   options = (
@@ -46,7 +46,7 @@ function List({
           icon,
           redirect,
           onClick,
-          variant: itemVariant,
+          color: itemColor,
           className: itemClassName
         } = item;
         const isClickable = Boolean(onClick || redirect);
@@ -68,7 +68,7 @@ function List({
           "item",
           {
             "is-clickable": isClickable,
-            [`is-clickable--${itemVariant ?? variant}`]: isClickable,
+            [`is-clickable--${itemColor ?? color}`]: isClickable,
             "has-icon": Boolean(item == null ? void 0 : item.icon),
             ...modifier
           },
@@ -101,13 +101,28 @@ function List({
         }, "DescParagraph");
         const IconWrapper = /* @__PURE__ */ __name(() => {
           if (icon === void 0 || icon === null) return null;
+          if (type === "icon") {
+            return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: bem("item__icon"), children: isValidElement(icon) ? (
+              /* istanbul ignore next */
+              icon
+            ) : /* @__PURE__ */ jsx(
+              Icon,
+              {
+                ...options.icon,
+                className: bem("item__icon__svg"),
+                size: "sm",
+                name: icon ?? /* istanbul ignore next */
+                "ArrowRight01Icon"
+              }
+            ) });
+          }
           return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: bem("item__icon__wrapper"), children: isValidElement(icon) ? (
             /* istanbul ignore next */
             icon
           ) : /* @__PURE__ */ jsx(
             Icon,
             {
-              color: variant,
+              color,
               name: icon,
               ...options.icon
             }
@@ -124,7 +139,7 @@ function List({
                 Card,
                 {
                   priority: true,
-                  variant: "white",
+                  color: "white",
                   ...cardItem,
                   className: bem("item__card", void 0, cardItem.className),
                   contentClassName: bem(
@@ -185,7 +200,7 @@ function List({
                 Link,
                 {
                   className: bem("item__link", void 0, linkProps.className),
-                  variant,
+                  color,
                   ...linkProps,
                   children: [
                     /* @__PURE__ */ jsxs("div", { className: bem("item__link__header"), children: [
@@ -208,8 +223,10 @@ function List({
             ...liHandlers,
             children: [
               /* @__PURE__ */ jsx(IconWrapper, {}),
-              /* @__PURE__ */ jsx(TitleSpan, {}),
-              /* @__PURE__ */ jsx(DescParagraph, {})
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx(TitleSpan, {}),
+                /* @__PURE__ */ jsx(DescParagraph, {})
+              ] })
             ]
           },
           `list-item-${/* istanbul ignore next */

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

@@ -132,8 +132,8 @@
   flex-wrap: wrap;
   align-items: center;
   width: 100%;
-  margin: 0.25rem 0;
-  color: var(--color-grey-500);
+  margin: var(--pk-space-xs) 0;
+  color: var(--pk-color-muted);
   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;
@@ -163,12 +163,12 @@
   flex-wrap: nowrap;
 }
 .prokodo-List__item__card {
-  margin: 0.75rem 0;
+  margin: var(--pk-space-md) 0;
 }
 .prokodo-List__item__card__content {
   display: flex;
   align-items: center;
-  padding: 0.75rem;
+  padding: var(--pk-space-md);
 }
 .prokodo-List__item__inner {
   width: 100%;
@@ -206,22 +206,22 @@
   align-self: flex-start;
   min-width: 2.5rem;
   height: 2.5rem;
-  margin-top: 0.25rem;
-  margin-right: 0.25rem;
+  margin-top: var(--pk-space-xs);
+  margin-right: var(--pk-space-xs);
   border-radius: 1000rem;
-  background-color: var(--color-grey-50);
+  background-color: var(--pk-color-surface-raised);
 }
 html[data-theme=dark] .prokodo-List__item__icon {
-  background-color: var(--color-grey-400);
+  background-color: var(--pk-palette-grey-400);
 }
 .prokodo-List__item__icon__wrapper {
   display: flex;
   align-items: center;
-  padding-right: 0.5rem;
+  padding-right: var(--pk-space-sm);
 }
 .prokodo-List__item__title--card {
   display: block;
-  padding: 0.75rem 0 0.25rem 0.5rem;
+  padding: var(--pk-space-md) 0 var(--pk-space-xs) var(--pk-space-sm);
   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;
@@ -248,19 +248,19 @@ html[data-theme=dark] .prokodo-List__item__icon {
   font-weight: 500;
 }
 .prokodo-List__item__content {
-  width: calc(100% - 2rem);
+  width: calc(100% - var(--pk-space-2xl));
 }
 .prokodo-List__item__desc {
-  color: var(--color-grey-600);
+  color: var(--pk-color-muted);
   margin: 0;
-  padding: 0.25rem 0;
+  padding: var(--pk-space-xs) 0;
   display: block;
   width: 100%;
   -webkit-box-orient: vertical;
   line-clamp: 3;
-  -webkit-line-clamp: 3; /* Limits the content to 3 lines */
+  -webkit-line-clamp: 3;
   overflow: hidden;
-  text-overflow: ellipsis; /* Adds the ellipsis at the end */
+  text-overflow: ellipsis;
   word-wrap: break-word;
   font-weight: 400;
   font-size: 1.125rem;
@@ -284,11 +284,11 @@ html[data-theme=dark] .prokodo-List__item__icon {
 }
 .prokodo-List__item__desc--card {
   padding-top: 0;
-  padding-left: 0.5rem;
+  padding-left: var(--pk-space-sm);
 }
 .prokodo-List__item--is-clickable {
   cursor: pointer;
-  color: var(--color-grey-500);
+  color: var(--pk-color-muted);
 }
 .prokodo-List__item--is-clickable a {
   font-weight: 500;
@@ -316,44 +316,83 @@ html[data-theme=dark] .prokodo-List__item__icon {
 .prokodo-List__item--is-clickable a {
   font-weight: 500;
 }
-.prokodo-List__item--is-clickable:hover span[role=presentation] {
-  color: var(--color-primary-500);
+.prokodo-List__item--is-clickable--inherit:hover {
+  color: var(--pk-color-brand);
 }
-.prokodo-List__item--is-clickable:hover .list-title {
+.prokodo-List__item--is-clickable--inherit:hover .list-title {
   background-image: var(--gradient-text-primary);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
 }
-.prokodo-List__item--is-clickable--inherit:hover {
-  color: var(--color-primary-500);
-}
 .prokodo-List__item--is-clickable--primary {
-  color: var(--color-primary-500);
+  color: var(--pk-color-brand);
+}
+.prokodo-List__item--is-clickable--primary:hover .list-title {
+  background-image: var(--gradient-text-primary);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.prokodo-List__item--is-clickable--primary:hover span[role=presentation] {
+  color: var(--pk-color-brand);
 }
 .prokodo-List__item--is-clickable--secondary {
-  color: var(--color-secondary-500);
+  color: var(--pk-color-accent);
+}
+.prokodo-List__item--is-clickable--secondary:hover span[role=presentation] {
+  color: var(--pk-color-accent);
 }
 .prokodo-List__item--is-clickable--info {
-  color: var(--color-grey-300);
+  color: var(--pk-color-muted);
+}
+.prokodo-List__item--is-clickable--info:hover span[role=presentation] {
+  color: var(--pk-color-muted);
 }
 .prokodo-List__item--is-clickable--success {
-  color: var(--color-success);
+  color: var(--pk-color-success);
+}
+.prokodo-List__item--is-clickable--success:hover .list-title {
+  background-image: var(--gradient-text-success);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.prokodo-List__item--is-clickable--success:hover span[role=presentation] {
+  color: var(--pk-color-success);
 }
 .prokodo-List__item--is-clickable--warning {
-  color: var(--color-warning);
+  color: var(--pk-color-warning);
+}
+.prokodo-List__item--is-clickable--warning:hover .list-title {
+  background-image: var(--gradient-text-warning);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.prokodo-List__item--is-clickable--warning:hover span[role=presentation] {
+  color: var(--pk-color-warning);
 }
 .prokodo-List__item--is-clickable--error {
-  color: var(--color-error);
+  color: var(--pk-color-error);
+}
+.prokodo-List__item--is-clickable--error:hover .list-title {
+  background-image: var(--gradient-text-error);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.prokodo-List__item--is-clickable--error:hover span[role=presentation] {
+  color: var(--pk-color-error);
 }
 .prokodo-List__item--is-clickable--white {
-  color: var(--color-white);
+  color: var(--pk-palette-white);
 }
 .prokodo-List__item--is-clickable--white:hover {
-  color: var(--color-white);
+  color: var(--pk-palette-white);
 }
 .prokodo-List__item--is-clickable--primary:hover, .prokodo-List__item--is-clickable--secondary:hover, .prokodo-List__item--is-clickable--success:hover, .prokodo-List__item--is-clickable--error:hover, .prokodo-List__item--is-clickable--info:hover, .prokodo-List__item--is-clickable--warning:hover {
-  color: var(--color-grey-500);
+  color: var(--pk-color-muted);
 }
 .prokodo-List__item--card {
   display: block;

package/dist/components/list/List.module.scss.js

@@ -14,8 +14,8 @@ const styles = {
   "prokodo-List__item__desc": "prokodo-List__item__desc",
   "prokodo-List__item__desc--card": "prokodo-List__item__desc--card",
   "prokodo-List__item--is-clickable": "prokodo-List__item--is-clickable",
-  "list-title": "list-title",
   "prokodo-List__item--is-clickable--inherit": "prokodo-List__item--is-clickable--inherit",
+  "list-title": "list-title",
   "prokodo-List__item--is-clickable--primary": "prokodo-List__item--is-clickable--primary",
   "prokodo-List__item--is-clickable--secondary": "prokodo-List__item--is-clickable--secondary",
   "prokodo-List__item--is-clickable--info": "prokodo-List__item--is-clickable--info",

package/dist/components/loading/Loading.view.js

@@ -1,6 +1,19 @@
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
 import { jsx, jsxs } from "react/jsx-runtime";
+const colorToCSS = {
+  // "inherit" explicitly targets the adaptive foreground token so the spinner
+  // stays visible regardless of light/dark mode instead of blindly inheriting
+  // a parent color that may match the background.
+  inherit: "var(--pk-color-fg)",
+  primary: "var(--pk-color-brand)",
+  secondary: "var(--pk-color-accent)",
+  success: "var(--pk-color-success)",
+  error: "var(--pk-color-error)",
+  info: "var(--pk-color-fg)",
+  warning: "var(--pk-color-warning)",
+  white: "var(--pk-palette-white)"
+};
 const PX = {
   xs: 16,
   sm: 24,
@@ -21,7 +34,8 @@ const SpinnerView = /* @__PURE__ */ __name(({
     /* istanbul ignore next */
     "Loading"
   ),
-  reducedMotion
+  reducedMotion,
+  color
 }) => {
   const s = PX[size];
   const r = s / 2;
@@ -39,6 +53,10 @@ const SpinnerView = /* @__PURE__ */ __name(({
       width: s,
       style: {
         display: "inline-block",
+        ...color ? {
+          "--pk-loading-color": colorToCSS[color],
+          color: colorToCSS[color]
+        } : void 0,
         ...style
       },
       children: [
@@ -115,7 +133,8 @@ const OverlayView = /* @__PURE__ */ __name(({
   blur = 0,
   zIndex = 9999,
   reducedMotion,
-  resolvedBackdrop
+  resolvedBackdrop,
+  color
 }) => {
   if (!show) return null;
   const bg = resolvedBackdrop === "dark" ? "rgba(0,0,0,0.5)" : "rgba(255,255,255,0.5)";
@@ -142,6 +161,7 @@ const OverlayView = /* @__PURE__ */ __name(({
         SpinnerView,
         {
           ariaLabel,
+          color,
           reducedMotion,
           size
         }

package/dist/components/lottie/Lottie.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;
+  }
 }