@prokodo/ui 0.1.14 → 1.0.0

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

@@ -119,144 +119,153 @@ function CarouselClient(props) {
   }, "getTransformValue");
   if (num === 0)
     return /* @__PURE__ */ jsx(Skeleton, { height: "200px", variant: "rectangular", width: "100%" });
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ...rest,
-      ref: setHostRef,
-      className: bem(void 0, { "is-active": mouseActive }, className),
-      role: "button",
-      tabIndex: 0,
-      onKeyDown: /* @__PURE__ */ __name((e) => {
-        onKeyDown == null ? void 0 : onKeyDown(e);
-        switch (e.key) {
-          case "ArrowLeft":
-            slide("PREV");
-            break;
-          case "ArrowRight":
-            slide("NEXT");
-            break;
-        }
-      }, "onKeyDown"),
-      onMouseDown: /* @__PURE__ */ __name((e) => {
-        onMouseDown == null ? void 0 : onMouseDown(e);
-        handleMouseDown(e, mouseStartX);
-        setMouse(true);
-      }, "onMouseDown"),
-      onMouseEnter: /* @__PURE__ */ __name((e) => {
-        onMouseEnter == null ? void 0 : onMouseEnter(e);
-        setPlaying(false);
-      }, "onMouseEnter"),
-      onMouseLeave: /* @__PURE__ */ __name((e) => {
-        onMouseLeave == null ? void 0 : onMouseLeave(e);
-        setPlaying(true);
-      }, "onMouseLeave"),
-      onMouseUp: /* @__PURE__ */ __name((e) => {
-        onMouseUp == null ? void 0 : onMouseUp(e);
-        handleMouseUp(e, mouseStartX, mouseEndX, slide);
-        setMouse(false);
-      }, "onMouseUp"),
-      onTouchEnd: /* @__PURE__ */ __name((e) => {
-        onTouchEnd == null ? void 0 : onTouchEnd(e);
-        handleTouchEnd(touchStartX, touchEndX, slide);
-      }, "onTouchEnd"),
-      onTouchMove: /* @__PURE__ */ __name((e) => {
-        onTouchMove == null ? void 0 : onTouchMove(e);
-        handleTouchMove(e, touchEndX);
-      }, "onTouchMove"),
-      onTouchStart: /* @__PURE__ */ __name((e) => {
-        onTouchStart == null ? void 0 : onTouchStart(e);
-        handleTouchStart(e, touchStartX);
-      }, "onTouchStart"),
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: bem("wrapper", void 0, classNameWrapper),
-            style: {
-              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}`
-            ))
+  return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        ref: setHostRef,
+        "aria-roledescription": "carousel",
+        className: bem(void 0, { "is-active": mouseActive }, className),
+        role: "group",
+        tabIndex: 0,
+        onKeyDown: /* @__PURE__ */ __name((e) => {
+          onKeyDown == null ? void 0 : onKeyDown(e);
+          switch (e.key) {
+            case "ArrowLeft":
+              slide("PREV");
+              break;
+            case "ArrowRight":
+              slide("NEXT");
+              break;
           }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: bem("mobile__tutorial", {
-              "is-hidden": !mobileHint
-            }),
-            children: /* @__PURE__ */ jsx("div", { className: bem("mobile__tutorial__animation"), children: /* @__PURE__ */ jsx(Lottie, { animation: "https://lottie.host/7da0edc5-d79e-497c-bcce-ab9dd8e9458d/lahjQ7ICxg.lottie" }) })
-          }
-        ),
-        /* @__PURE__ */ jsxs("footer", { className: bem("controls", void 0, classNameControls), children: [
-          Boolean(enableControl) && /* @__PURE__ */ jsx(
-            Button,
+        }, "onKeyDown"),
+        onMouseDown: /* @__PURE__ */ __name((e) => {
+          onMouseDown == null ? void 0 : onMouseDown(e);
+          handleMouseDown(e, mouseStartX);
+          setMouse(true);
+        }, "onMouseDown"),
+        onMouseEnter: /* @__PURE__ */ __name((e) => {
+          onMouseEnter == null ? void 0 : onMouseEnter(e);
+          setPlaying(false);
+        }, "onMouseEnter"),
+        onMouseLeave: /* @__PURE__ */ __name((e) => {
+          onMouseLeave == null ? void 0 : onMouseLeave(e);
+          setPlaying(true);
+        }, "onMouseLeave"),
+        onMouseUp: /* @__PURE__ */ __name((e) => {
+          onMouseUp == null ? void 0 : onMouseUp(e);
+          handleMouseUp(e, mouseStartX, mouseEndX, slide);
+          setMouse(false);
+        }, "onMouseUp"),
+        onTouchEnd: /* @__PURE__ */ __name((e) => {
+          onTouchEnd == null ? void 0 : onTouchEnd(e);
+          handleTouchEnd(touchStartX, touchEndX, slide);
+        }, "onTouchEnd"),
+        onTouchMove: /* @__PURE__ */ __name((e) => {
+          onTouchMove == null ? void 0 : onTouchMove(e);
+          handleTouchMove(e, touchEndX);
+        }, "onTouchMove"),
+        onTouchStart: /* @__PURE__ */ __name((e) => {
+          onTouchStart == null ? void 0 : onTouchStart(e);
+          handleTouchStart(e, touchStartX);
+        }, "onTouchStart"),
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
             {
-              "aria-label": "previous",
-              variant: "outlined",
-              ...prevButton,
-              className: bem(
-                "button",
-                void 0,
-                `${classNameButtons} ${(prevButton == null ? void 0 : prevButton.className) ?? ""}`
-              ),
-              iconProps: {
-                name: "ArrowLeft01Icon",
-                size: "md",
-                color: "white",
-                ...prevButton == null ? void 0 : prevButton.iconProps
+              className: bem("wrapper", void 0, classNameWrapper),
+              style: {
+                transform: getTransformValue(),
+                transition: transitioning ? "transform 0.3s ease-in-out" : "none"
               },
-              onClick: /* @__PURE__ */ __name(() => slide(PREV), "onClick")
+              children: items.map((child, i) => /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: bem("item", void 0, classNameItem),
+                  style: { width: `${100 / effectiveItemsToShow}%` },
+                  children: child
+                },
+                `cl-${i}`
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: bem("mobile__tutorial", {
+                "is-hidden": !mobileHint
+              }),
+              children: /* @__PURE__ */ jsx("div", { className: bem("mobile__tutorial__animation"), children: /* @__PURE__ */ jsx(Lottie, { animation: "https://lottie.host/7da0edc5-d79e-497c-bcce-ab9dd8e9458d/lahjQ7ICxg.lottie" }) })
             }
           ),
-          enableDots && /* @__PURE__ */ jsx("span", { className: bem("dots", void 0, classNameDots), children: childrenArr.map((_, i) => {
-            const active = i === (current - effectiveItemsToShow + num) % num;
-            return /* @__PURE__ */ jsx(
-              "button",
+          /* @__PURE__ */ jsxs("footer", { className: bem("controls", void 0, classNameControls), children: [
+            Boolean(enableControl) && /* @__PURE__ */ jsx(
+              Button,
               {
+                "aria-label": "previous",
+                variant: "outlined",
+                ...prevButton,
                 className: bem(
-                  "dots__dot",
-                  { "is-active": active },
-                  `${classNameDot} ${active ? classNameDotActive ?? "" : ""}`
+                  "button",
+                  void 0,
+                  /* istanbul ignore next */
+                  `${classNameButtons} ${(prevButton == null ? void 0 : prevButton.className) ?? ""}`
                 ),
-                onClick: /* @__PURE__ */ __name(() => slideTo(i), "onClick"),
-                onKeyDown: /* @__PURE__ */ __name((e) => e.key === "Enter" && slideTo(i), "onKeyDown")
-              },
-              `dot-${i}`
-            );
-          }) }),
-          Boolean(enableControl) && /* @__PURE__ */ jsx(
-            Button,
-            {
-              "aria-label": "next",
-              variant: "outlined",
-              ...nextButton,
-              className: bem(
+                iconProps: {
+                  name: "ArrowLeft01Icon",
+                  size: "sm",
+                  /* istanbul ignore next */
+                  ...prevButton == null ? void 0 : prevButton.iconProps
+                },
+                onClick: (
+                  /* istanbul ignore next */
+                  /* @__PURE__ */ __name(() => slide(PREV), "onClick")
+                )
+              }
+            ),
+            enableDots && /* @__PURE__ */ jsx("span", { className: bem("dots", void 0, classNameDots), children: childrenArr.map((_, i) => {
+              const active = i === (current - effectiveItemsToShow + num) % num;
+              return /* @__PURE__ */ jsx(
                 "button",
-                void 0,
-                `${classNameButtons} ${(nextButton == null ? void 0 : nextButton.className) ?? ""}`
-              ),
-              iconProps: {
-                name: "ArrowRight01Icon",
-                size: "md",
-                color: "white",
-                ...nextButton == null ? void 0 : nextButton.iconProps
-              },
-              onClick: /* @__PURE__ */ __name(() => slide(NEXT), "onClick")
-            }
-          )
-        ] })
-      ]
-    }
+                {
+                  className: bem(
+                    "dots__dot",
+                    { "is-active": active },
+                    `${classNameDot} ${active ? classNameDotActive ?? "" : ""}`
+                  ),
+                  onClick: /* @__PURE__ */ __name(() => slideTo(i), "onClick"),
+                  onKeyDown: /* @__PURE__ */ __name((e) => e.key === "Enter" && slideTo(i), "onKeyDown")
+                },
+                `dot-${i}`
+              );
+            }) }),
+            Boolean(enableControl) && /* @__PURE__ */ jsx(
+              Button,
+              {
+                "aria-label": "next",
+                variant: "outlined",
+                ...nextButton,
+                className: bem(
+                  "button",
+                  void 0,
+                  /* istanbul ignore next */
+                  `${classNameButtons} ${(nextButton == null ? void 0 : nextButton.className) ?? ""}`
+                ),
+                iconProps: {
+                  name: "ArrowRight01Icon",
+                  size: "sm",
+                  /* istanbul ignore next */
+                  ...nextButton == null ? void 0 : nextButton.iconProps
+                },
+                onClick: /* @__PURE__ */ __name(() => slide(NEXT), "onClick")
+              }
+            )
+          ] })
+        ]
+      }
+    )
   );
 }
 __name(CarouselClient, "CarouselClient");

package/dist/components/carousel/Carousel.css

@@ -152,7 +152,7 @@
   left: 0;
   opacity: 1;
   visibility: visible;
-  background-color: rgba(36, 36, 36, 0.7);
+  background-color: var(--pk-carousel-overlay-bg);
   transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
   z-index: 10;
 }
@@ -179,6 +179,7 @@
   width: 100%;
   align-items: center;
   justify-content: space-between;
+  margin-top: var(--pk-carousel-controls-mt);
   opacity: 0;
 }
 @media screen and (min-width: 480px) {
@@ -187,11 +188,14 @@
   }
 }
 .prokodo-Carousel__button {
-  padding: 0.25rem;
+  padding: var(--pk-carousel-button-padding) !important;
+  line-height: 1 !important;
+  --pk-button-padding-x: var(--pk-carousel-button-padding);
+  --pk-button-padding-y: var(--pk-carousel-button-padding);
 }
 .prokodo-Carousel__dots {
   display: flex;
-  margin: 2rem auto 0 auto;
+  margin: var(--pk-carousel-dots-mt) auto 0 auto;
   text-align: center;
 }
 .prokodo-Carousel__dots__dot {
@@ -222,7 +226,7 @@
   background: var(--gradient-border-4);
 }
 .prokodo-Carousel__dots__dot--is-active {
-  background-color: #FFFFFF;
+  background-color: var(--pk-carousel-dot-active-bg);
 }
 @media screen and (max-width: 1280px) {
   .prokodo-Carousel__dots__dot {

package/dist/components/carousel/Carousel.js

@@ -5,8 +5,14 @@ import CarouselServer from "./Carousel.server.js";
 const Carousel = createIsland({
   name: "Carousel",
   Server: CarouselServer,
-  loadLazy: /* @__PURE__ */ __name(() => import("./Carousel.lazy.js"), "loadLazy"),
-  isInteractive: /* @__PURE__ */ __name(() => true, "isInteractive")
+  loadLazy: (
+    /* istanbul ignore next */
+    /* @__PURE__ */ __name(() => import("./Carousel.lazy.js"), "loadLazy")
+  ),
+  isInteractive: (
+    /* istanbul ignore next */
+    /* @__PURE__ */ __name(() => true, "isInteractive")
+  )
 });
 export {
   Carousel

package/dist/components/carousel/Carousel.module.css

@@ -152,7 +152,7 @@
   left: 0;
   opacity: 1;
   visibility: visible;
-  background-color: rgba(36, 36, 36, 0.7);
+  background-color: var(--pk-carousel-overlay-bg);
   transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
   z-index: 10;
 }
@@ -179,6 +179,7 @@
   width: 100%;
   align-items: center;
   justify-content: space-between;
+  margin-top: var(--pk-carousel-controls-mt);
   opacity: 0;
 }
 @media screen and (min-width: 480px) {
@@ -187,11 +188,14 @@
   }
 }
 .prokodo-Carousel__button {
-  padding: 0.25rem;
+  padding: var(--pk-carousel-button-padding) !important;
+  line-height: 1 !important;
+  --pk-button-padding-x: var(--pk-carousel-button-padding);
+  --pk-button-padding-y: var(--pk-carousel-button-padding);
 }
 .prokodo-Carousel__dots {
   display: flex;
-  margin: 2rem auto 0 auto;
+  margin: var(--pk-carousel-dots-mt) auto 0 auto;
   text-align: center;
 }
 .prokodo-Carousel__dots__dot {
@@ -222,7 +226,7 @@
   background: var(--gradient-border-4);
 }
 .prokodo-Carousel__dots__dot--is-active {
-  background-color: #FFFFFF;
+  background-color: var(--pk-carousel-dot-active-bg);
 }
 @media screen and (max-width: 1280px) {
   .prokodo-Carousel__dots__dot {

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

@@ -13,7 +13,17 @@ function CarouselView({
   classNameItem,
   classNameDots,
   classNameDot,
+  classNameDotActive: _classNameDotActive,
+  classNameButtons: _classNameButtons,
+  classNameControls: _classNameControls,
   enableControl,
+  enableDots: _enableDots,
+  autoplay: _autoplay,
+  translateX: _translateX,
+  itemStyle: _itemStyle,
+  responsive: _responsive,
+  nextButton: _nextButton,
+  prevButton: _prevButton,
   children,
   ...rest
 }) {

package/dist/components/checkbox/Checkbox.css

@@ -125,107 +125,121 @@
  * content.
  */
 .prokodo-Checkbox {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: center;
-  grid-gap: 0.75rem;
-  gap: 0.75rem;
-  padding: 0.5rem 0;
-  border-radius: 12px;
-  background: transparent;
-  border: 1px solid transparent;
-  box-shadow: none;
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--pk-space-sm);
   cursor: pointer;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
+  width: 100%;
+  position: relative;
 }
-.prokodo-Checkbox--disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
+html[data-theme="dark"] .prokodo-Checkbox, [data-theme="dark"] .prokodo-Checkbox, .pk-theme-dark .prokodo-Checkbox {
+  --pk-checkbox-control-border: rgba(255, 255, 255, 0.18);
+  --pk-checkbox-control-bg: rgba(255, 255, 255, 0.04);
+  --pk-checkbox-card-bg: rgba(255, 255, 255, 0.03);
+  --pk-checkbox-fg-muted: var(--pk-palette-grey-200);
 }
-.prokodo-Checkbox:focus-within {
-  outline: 3px solid #1E90FF;
-  outline-offset: 4px;
-  border-radius: 1.5rem;
+.prokodo-Checkbox--primary {
+  --pk-checkbox-gradient-from: var(--pk-color-brand);
+  --pk-checkbox-gradient-to: var(--pk-color-accent);
+  --pk-checkbox-shadow-color: color-mix(in srgb, var(--pk-color-brand) 30%, transparent);
 }
-.prokodo-Checkbox--card {
-  padding: 0.5rem 0;
-  border-radius: 12px;
-  background: transparent;
-  border: 1px solid transparent;
-  box-shadow: none;
+.prokodo-Checkbox--secondary {
+  --pk-checkbox-gradient-from: var(--pk-color-accent);
+  --pk-checkbox-gradient-to: var(--pk-color-brand);
+  --pk-checkbox-shadow-color: color-mix(in srgb, var(--pk-color-accent) 30%, transparent);
+}
+.prokodo-Checkbox--success {
+  --pk-checkbox-gradient-from: var(--pk-color-success);
+  --pk-checkbox-gradient-to: #10CCB8;
+  --pk-checkbox-shadow-color: color-mix(in srgb, var(--pk-color-success) 30%, transparent);
+}
+.prokodo-Checkbox--warning {
+  --pk-checkbox-gradient-from: var(--pk-color-warning);
+  --pk-checkbox-gradient-to: #f7cc6a;
+  --pk-checkbox-shadow-color: color-mix(in srgb, var(--pk-color-warning) 30%, transparent);
+}
+.prokodo-Checkbox--error {
+  --pk-checkbox-gradient-from: var(--pk-color-error);
+  --pk-checkbox-gradient-to: #ff6b6b;
+  --pk-checkbox-shadow-color: color-mix(in srgb, var(--pk-color-error) 30%, transparent);
+}
+.prokodo-Checkbox--info, .prokodo-Checkbox--inherit, .prokodo-Checkbox--white {
+  --pk-checkbox-gradient-from: var(--pk-color-muted);
+  --pk-checkbox-gradient-to: var(--pk-color-border);
+  --pk-checkbox-shadow-color: rgba(0, 0, 0, 0.1);
+}
+html[data-theme="dark"] .prokodo-Checkbox--info, [data-theme="dark"] .prokodo-Checkbox--info, .pk-theme-dark .prokodo-Checkbox--info, html[data-theme="dark"] .prokodo-Checkbox--inherit, [data-theme="dark"] .prokodo-Checkbox--inherit, .pk-theme-dark .prokodo-Checkbox--inherit, html[data-theme="dark"] .prokodo-Checkbox--white, [data-theme="dark"] .prokodo-Checkbox--white, .pk-theme-dark .prokodo-Checkbox--white {
+  --pk-checkbox-gradient-from: var(--pk-palette-grey-100);
+  --pk-checkbox-gradient-to: var(--pk-palette-grey-200);
 }
 .prokodo-Checkbox__left {
-  display: inline-flex;
-  align-items: center;
+  flex-shrink: 0;
+  display: flex;
+  align-items: flex-start;
+  padding-top: 2px;
 }
 .prokodo-Checkbox__input {
   position: absolute;
   opacity: 0;
-  width: 1px;
-  height: 1px;
-  margin: 0;
-  padding: 0;
+  width: 0;
+  height: 0;
   pointer-events: none;
 }
 .prokodo-Checkbox__control {
-  width: 18px;
-  height: 18px;
-  border-radius: 6px;
   position: relative;
-  border: 2px solid rgba(255, 255, 255, 0.18);
-  background: rgba(255, 255, 255, 0.02);
-  box-shadow: var(--inner-elevation-1);
-  display: inline-flex;
-  align-items: center;
+  display: flex;
   justify-content: center;
-  transition: border-color 140ms ease, background 140ms ease;
+  align-items: center;
+  width: var(--pk-checkbox-size);
+  height: var(--pk-checkbox-size);
+  border-radius: var(--pk-checkbox-control-radius);
+  background: var(--pk-checkbox-control-bg);
+  flex-shrink: 0;
+  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pk-checkbox-gradient-from) 25%, transparent), inset 0 2px 6px color-mix(in srgb, var(--pk-checkbox-gradient-from) 20%, transparent);
+  transition: background var(--pk-timing-fast) ease, box-shadow var(--pk-timing-fast) ease;
 }
 .prokodo-Checkbox__control::after {
   content: "";
-  width: 9px;
-  height: 5px;
-  border-left: 2px solid var(--color-primary-500, #2f6bff);
-  border-bottom: 2px solid var(--color-primary-500, #2f6bff);
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) rotate(-45deg) scale(0.6);
+  display: block;
+  width: 5px;
+  height: 9px;
+  border: 2px solid transparent;
+  border-top-width: 0;
+  border-left-width: 0;
+  transform: rotate(45deg) translate(-1px, -1px);
   opacity: 0;
-  transition: transform 140ms ease, opacity 140ms ease;
+  transition: opacity var(--pk-timing-fast) ease, border-color var(--pk-timing-fast) ease;
 }
 .prokodo-Checkbox__control--checked {
-  border-color: rgba(255, 255, 255, 0.32);
+  background: linear-gradient(135deg, var(--pk-checkbox-gradient-from), var(--pk-checkbox-gradient-to));
+  border-color: transparent;
+  box-shadow: 0 2px 10px var(--pk-checkbox-shadow-color);
 }
 .prokodo-Checkbox__control--checked::after {
+  border-color: #ffffff;
   opacity: 1;
-  transform: translate(-50%, -50%) rotate(-45deg) scale(1);
-}
-.prokodo-Checkbox__control--card {
-  box-shadow: var(--inner-elevation-1);
 }
-.prokodo-Checkbox__control--card.prokodo-Checkbox__control--checked {
-  background: rgba(255, 255, 255, 0.1);
+.prokodo-Checkbox__input:focus-visible ~ .prokodo-Checkbox__control {
+  outline: none;
+  box-shadow: 0 0 0 var(--pk-focus-ring-width) var(--pk-checkbox-gradient-from), 0 2px 10px var(--pk-checkbox-shadow-color);
 }
 .prokodo-Checkbox__body {
+  flex: 1 1;
   min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
+  gap: 2px;
 }
 .prokodo-Checkbox__row {
-  display: inline-flex;
+  display: flex;
   align-items: center;
-  gap: 0.5rem;
-  min-width: 0;
+  gap: var(--pk-space-xs);
 }
 .prokodo-Checkbox__title {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: var(--color-grey-900);
-  margin: 0;
+  color: var(--pk-checkbox-fg);
   font-weight: 400;
   font-size: 1.125rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -247,8 +261,7 @@
   }
 }
 .prokodo-Checkbox__requiredMark {
-  color: var(--color-error);
-  line-height: 1;
+  color: var(--pk-checkbox-error-fg);
   font-weight: 400;
   font-size: 1.125rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -270,13 +283,7 @@
   }
 }
 .prokodo-Checkbox__desc {
-  color: var(--color-grey-700);
-  opacity: 0.82;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
+  color: var(--pk-checkbox-fg-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;
@@ -300,13 +307,27 @@
   }
 }
 .prokodo-Checkbox__right {
-  justify-self: end;
-  display: inline-flex;
+  flex-shrink: 0;
+  display: flex;
   align-items: center;
-  align-self: start;
-  margin-top: 2px;
+  color: var(--pk-checkbox-fg-muted);
+}
+.prokodo-Checkbox--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.prokodo-Checkbox--card {
+  padding: var(--pk-space-md) var(--pk-space-lg);
+  border-radius: var(--pk-checkbox-radius);
+  border: var(--pk-border-width) solid var(--pk-checkbox-control-border);
+  background: var(--pk-checkbox-card-bg);
+  transition: border-color var(--pk-timing-fast) ease, box-shadow var(--pk-timing-fast) ease;
+}
+.prokodo-Checkbox--card:hover:not(.prokodo-Checkbox--disabled) {
+  border-color: var(--pk-checkbox-gradient-from);
+  box-shadow: 0 2px 8px var(--pk-checkbox-shadow-color);
 }
-.prokodo-Checkbox__rightIcon {
-  color: var(--color-grey-700);
-  opacity: 0.9;
+.prokodo-Checkbox--card.prokodo-Checkbox--checked {
+  border-color: var(--pk-checkbox-gradient-from);
+  box-shadow: 0 2px 8px var(--pk-checkbox-shadow-color);
 }

package/dist/components/checkbox/Checkbox.js

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