@prokodo/ui 0.1.14 → 1.0.0

package/dist/components/checkbox/Checkbox.module.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.module.scss.js

@@ -1,19 +1,26 @@
 const styles = {
   "prokodo-Checkbox": "prokodo-Checkbox",
-  "prokodo-Checkbox--disabled": "prokodo-Checkbox--disabled",
-  "prokodo-Checkbox--card": "prokodo-Checkbox--card",
+  "prokodo-Checkbox--primary": "prokodo-Checkbox--primary",
+  "prokodo-Checkbox--secondary": "prokodo-Checkbox--secondary",
+  "prokodo-Checkbox--success": "prokodo-Checkbox--success",
+  "prokodo-Checkbox--warning": "prokodo-Checkbox--warning",
+  "prokodo-Checkbox--error": "prokodo-Checkbox--error",
+  "prokodo-Checkbox--info": "prokodo-Checkbox--info",
+  "prokodo-Checkbox--inherit": "prokodo-Checkbox--inherit",
+  "prokodo-Checkbox--white": "prokodo-Checkbox--white",
   "prokodo-Checkbox__left": "prokodo-Checkbox__left",
   "prokodo-Checkbox__input": "prokodo-Checkbox__input",
   "prokodo-Checkbox__control": "prokodo-Checkbox__control",
   "prokodo-Checkbox__control--checked": "prokodo-Checkbox__control--checked",
-  "prokodo-Checkbox__control--card": "prokodo-Checkbox__control--card",
   "prokodo-Checkbox__body": "prokodo-Checkbox__body",
   "prokodo-Checkbox__row": "prokodo-Checkbox__row",
   "prokodo-Checkbox__title": "prokodo-Checkbox__title",
   "prokodo-Checkbox__requiredMark": "prokodo-Checkbox__requiredMark",
   "prokodo-Checkbox__desc": "prokodo-Checkbox__desc",
   "prokodo-Checkbox__right": "prokodo-Checkbox__right",
-  "prokodo-Checkbox__rightIcon": "prokodo-Checkbox__rightIcon"
+  "prokodo-Checkbox--disabled": "prokodo-Checkbox--disabled",
+  "prokodo-Checkbox--card": "prokodo-Checkbox--card",
+  "prokodo-Checkbox--checked": "prokodo-Checkbox--checked"
 };
 export {
   styles as default

package/dist/components/checkbox/Checkbox.view.js

@@ -17,6 +17,7 @@ function CheckboxView({
   showRequiredMark,
   disabled,
   variant = "plain",
+  color = "primary",
   isChecked,
   onChangeInternal
 }) {
@@ -29,7 +30,8 @@ function CheckboxView({
         {
           checked: isChecked,
           disabled: Boolean(disabled),
-          [variant]: true
+          [variant]: true,
+          [color]: true
         },
         className
       ),
@@ -73,7 +75,10 @@ function CheckboxView({
           {
             ...icon,
             className: bem("rightIcon", void 0, icon.className),
-            label: iconLabel ?? void 0
+            label: (
+              /* istanbul ignore next */
+              iconLabel ?? void 0
+            )
           }
         ) : null })
       ]

package/dist/components/checkbox-group/CheckboxGroup.css

@@ -130,13 +130,46 @@
   border: 0;
   min-width: 0;
 }
+.prokodo-CheckboxGroup--primary {
+  --pk-cg-legend-color: color-mix(in srgb, var(--pk-color-brand) 80%, #000000);
+}
+html[data-theme="dark"] .prokodo-CheckboxGroup--primary, [data-theme="dark"] .prokodo-CheckboxGroup--primary, .pk-theme-dark .prokodo-CheckboxGroup--primary {
+  --pk-cg-legend-color: var(--pk-color-brand);
+}
+.prokodo-CheckboxGroup--secondary {
+  --pk-cg-legend-color: color-mix(in srgb, var(--pk-color-accent) 80%, #000000);
+}
+html[data-theme="dark"] .prokodo-CheckboxGroup--secondary, [data-theme="dark"] .prokodo-CheckboxGroup--secondary, .pk-theme-dark .prokodo-CheckboxGroup--secondary {
+  --pk-cg-legend-color: var(--pk-color-accent);
+}
+.prokodo-CheckboxGroup--success {
+  --pk-cg-legend-color: color-mix(in srgb, var(--pk-color-success) 80%, #000000);
+}
+html[data-theme="dark"] .prokodo-CheckboxGroup--success, [data-theme="dark"] .prokodo-CheckboxGroup--success, .pk-theme-dark .prokodo-CheckboxGroup--success {
+  --pk-cg-legend-color: var(--pk-color-success);
+}
+.prokodo-CheckboxGroup--warning {
+  --pk-cg-legend-color: color-mix(in srgb, var(--pk-color-warning) 80%, #000000);
+}
+html[data-theme="dark"] .prokodo-CheckboxGroup--warning, [data-theme="dark"] .prokodo-CheckboxGroup--warning, .pk-theme-dark .prokodo-CheckboxGroup--warning {
+  --pk-cg-legend-color: var(--pk-color-warning);
+}
+.prokodo-CheckboxGroup--error {
+  --pk-cg-legend-color: var(--pk-color-error);
+}
+.prokodo-CheckboxGroup--info, .prokodo-CheckboxGroup--inherit, .prokodo-CheckboxGroup--white {
+  --pk-cg-legend-color: var(--pk-color-muted);
+}
+html[data-theme="dark"] .prokodo-CheckboxGroup--info, [data-theme="dark"] .prokodo-CheckboxGroup--info, .pk-theme-dark .prokodo-CheckboxGroup--info, html[data-theme="dark"] .prokodo-CheckboxGroup--inherit, [data-theme="dark"] .prokodo-CheckboxGroup--inherit, .pk-theme-dark .prokodo-CheckboxGroup--inherit, html[data-theme="dark"] .prokodo-CheckboxGroup--white, [data-theme="dark"] .prokodo-CheckboxGroup--white, .pk-theme-dark .prokodo-CheckboxGroup--white {
+  --pk-cg-legend-color: var(--pk-palette-grey-200);
+}
 .prokodo-CheckboxGroup__legend {
-  margin: 0 0 0.5rem 0;
+  margin: 0 0 var(--pk-space-sm) 0;
   padding: 0;
-  opacity: 0.82;
+  opacity: 0.9;
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--pk-space-xs);
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -168,7 +201,7 @@
   text-indent: -99999px;
 }
 .prokodo-CheckboxGroup__legendLabel {
-  color: var(--color-grey-900);
+  color: var(--pk-cg-legend-color, var(--pk-color-fg));
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -192,7 +225,7 @@
   }
 }
 .prokodo-CheckboxGroup__legendRequiredMark {
-  color: var(--color-error);
+  color: var(--pk-color-error);
   line-height: 1;
   font-weight: 400;
   font-size: 1rem;
@@ -219,7 +252,7 @@
 .prokodo-CheckboxGroup__list {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: var(--pk-space-sm);
   min-width: 0;
 }
 .prokodo-CheckboxGroup__list--plain {

package/dist/components/checkbox-group/CheckboxGroup.js

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

package/dist/components/checkbox-group/CheckboxGroup.module.css

@@ -130,13 +130,46 @@
   border: 0;
   min-width: 0;
 }
+.prokodo-CheckboxGroup--primary {
+  --pk-cg-legend-color: color-mix(in srgb, var(--pk-color-brand) 80%, #000000);
+}
+html[data-theme="dark"] .prokodo-CheckboxGroup--primary, [data-theme="dark"] .prokodo-CheckboxGroup--primary, .pk-theme-dark .prokodo-CheckboxGroup--primary {
+  --pk-cg-legend-color: var(--pk-color-brand);
+}
+.prokodo-CheckboxGroup--secondary {
+  --pk-cg-legend-color: color-mix(in srgb, var(--pk-color-accent) 80%, #000000);
+}
+html[data-theme="dark"] .prokodo-CheckboxGroup--secondary, [data-theme="dark"] .prokodo-CheckboxGroup--secondary, .pk-theme-dark .prokodo-CheckboxGroup--secondary {
+  --pk-cg-legend-color: var(--pk-color-accent);
+}
+.prokodo-CheckboxGroup--success {
+  --pk-cg-legend-color: color-mix(in srgb, var(--pk-color-success) 80%, #000000);
+}
+html[data-theme="dark"] .prokodo-CheckboxGroup--success, [data-theme="dark"] .prokodo-CheckboxGroup--success, .pk-theme-dark .prokodo-CheckboxGroup--success {
+  --pk-cg-legend-color: var(--pk-color-success);
+}
+.prokodo-CheckboxGroup--warning {
+  --pk-cg-legend-color: color-mix(in srgb, var(--pk-color-warning) 80%, #000000);
+}
+html[data-theme="dark"] .prokodo-CheckboxGroup--warning, [data-theme="dark"] .prokodo-CheckboxGroup--warning, .pk-theme-dark .prokodo-CheckboxGroup--warning {
+  --pk-cg-legend-color: var(--pk-color-warning);
+}
+.prokodo-CheckboxGroup--error {
+  --pk-cg-legend-color: var(--pk-color-error);
+}
+.prokodo-CheckboxGroup--info, .prokodo-CheckboxGroup--inherit, .prokodo-CheckboxGroup--white {
+  --pk-cg-legend-color: var(--pk-color-muted);
+}
+html[data-theme="dark"] .prokodo-CheckboxGroup--info, [data-theme="dark"] .prokodo-CheckboxGroup--info, .pk-theme-dark .prokodo-CheckboxGroup--info, html[data-theme="dark"] .prokodo-CheckboxGroup--inherit, [data-theme="dark"] .prokodo-CheckboxGroup--inherit, .pk-theme-dark .prokodo-CheckboxGroup--inherit, html[data-theme="dark"] .prokodo-CheckboxGroup--white, [data-theme="dark"] .prokodo-CheckboxGroup--white, .pk-theme-dark .prokodo-CheckboxGroup--white {
+  --pk-cg-legend-color: var(--pk-palette-grey-200);
+}
 .prokodo-CheckboxGroup__legend {
-  margin: 0 0 0.5rem 0;
+  margin: 0 0 var(--pk-space-sm) 0;
   padding: 0;
-  opacity: 0.82;
+  opacity: 0.9;
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--pk-space-xs);
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -168,7 +201,7 @@
   text-indent: -99999px;
 }
 .prokodo-CheckboxGroup__legendLabel {
-  color: var(--color-grey-900);
+  color: var(--pk-cg-legend-color, var(--pk-color-fg));
   font-weight: 400;
   font-size: 1rem;
   font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -192,7 +225,7 @@
   }
 }
 .prokodo-CheckboxGroup__legendRequiredMark {
-  color: var(--color-error);
+  color: var(--pk-color-error);
   line-height: 1;
   font-weight: 400;
   font-size: 1rem;
@@ -219,7 +252,7 @@
 .prokodo-CheckboxGroup__list {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
+  gap: var(--pk-space-sm);
   min-width: 0;
 }
 .prokodo-CheckboxGroup__list--plain {

package/dist/components/checkbox-group/CheckboxGroup.module.scss.js

@@ -1,5 +1,13 @@
 const styles = {
   "prokodo-CheckboxGroup": "prokodo-CheckboxGroup",
+  "prokodo-CheckboxGroup--primary": "prokodo-CheckboxGroup--primary",
+  "prokodo-CheckboxGroup--secondary": "prokodo-CheckboxGroup--secondary",
+  "prokodo-CheckboxGroup--success": "prokodo-CheckboxGroup--success",
+  "prokodo-CheckboxGroup--warning": "prokodo-CheckboxGroup--warning",
+  "prokodo-CheckboxGroup--error": "prokodo-CheckboxGroup--error",
+  "prokodo-CheckboxGroup--info": "prokodo-CheckboxGroup--info",
+  "prokodo-CheckboxGroup--inherit": "prokodo-CheckboxGroup--inherit",
+  "prokodo-CheckboxGroup--white": "prokodo-CheckboxGroup--white",
   "prokodo-CheckboxGroup__legend": "prokodo-CheckboxGroup__legend",
   "prokodo-CheckboxGroup__legend--is-hidden": "prokodo-CheckboxGroup__legend--is-hidden",
   "prokodo-CheckboxGroup__legendLabel": "prokodo-CheckboxGroup__legendLabel",

package/dist/components/checkbox-group/CheckboxGroup.view.js

@@ -18,19 +18,23 @@ function CheckboxGroupView({
   hiddenInputName,
   layout = "stack",
   variant = "plain",
+  color = "primary",
   translations: t,
   isChecked,
   onToggle
 }) {
   if (!(options == null ? void 0 : options.length)) return null;
-  const label = ariaLabel ?? (t == null ? void 0 : t.ariaLabel) ?? "Options";
+  const label = (
+    /* istanbul ignore next */
+    ariaLabel ?? (t == null ? void 0 : t.ariaLabel) ?? "Options"
+  );
   const isGroupRequiredActive = Boolean(required) && selectedValues.length === 0;
   return /* @__PURE__ */ jsxs(
     "fieldset",
     {
       "aria-label": label,
       "aria-required": required || void 0,
-      className: bem(),
+      className: bem(void 0, { [color]: true }),
       children: [
         legend ? /* @__PURE__ */ jsxs(
           "legend",
@@ -70,6 +74,7 @@ function CheckboxGroupView({
                 Checkbox,
                 {
                   checked,
+                  color,
                   description: opt.description,
                   disabled: itemDisabled,
                   icon: opt.icon,