diff --git a/packages/components/src/components/checkbox-group/checkbox-group.tsx b/packages/components/src/components/checkbox-group/checkbox-group.tsx
index bed5353c3a..a6b36d42d6 100644
--- a/packages/components/src/components/checkbox-group/checkbox-group.tsx
+++ b/packages/components/src/components/checkbox-group/checkbox-group.tsx
@@ -97,7 +97,6 @@ export class CheckboxGroup {
label="checkbox"
name="nameOfCheckbox"
helper-text="helperText"
- checked
>
@@ -113,9 +112,9 @@ export class CheckboxGroup {
+ checked
+ >Checkbox Slot
+
+
+
diff --git a/packages/components/src/components/checkbox/checkbox.css b/packages/components/src/components/checkbox/checkbox.css
index c2342b23da..66b11dacda 100644
--- a/packages/components/src/components/checkbox/checkbox.css
+++ b/packages/components/src/components/checkbox/checkbox.css
@@ -122,6 +122,11 @@ scale-checkbox {
.checkbox__control {
background: var(--color-disabled);
}
+.checkbox--disabled.checkbox--indeterminate
+ .checkbox__control-wrapper
+ .checkbox__control {
+ background: var(--color-disabled);
+}
.checkbox--disabled.checkbox--checked
.checkbox__control-wrapper
.checkbox__icon {
@@ -139,6 +144,14 @@ scale-checkbox {
border-color: var(--color-primary-hover);
background: var(--color-primary-hover);
}
+.checkbox--enabled.checkbox--indeterminate
+ input:hover
+ ~ .checkbox__control-wrapper
+ .checkbox__control {
+ box-shadow: none;
+ border-color: var(--color-primary-hover);
+ background: var(--color-primary-hover);
+}
.checkbox--checked.checkbox--eanabled
input:active
~ .checkbox__control-wrapper
@@ -150,6 +163,17 @@ scale-checkbox {
border-color: var(--color-primary-active);
background: var(--color-primary-active);
}
+.checkbox--indeterminate.checkbox--eanabled
+ input:active
+ ~ .checkbox__control-wrapper
+ .checkbox__control/* ,
+.checkbox
+ input:checked:not([disabled])
+ ~ .checkbox__control-wrapper:active
+ .checkbox__control */{
+ border-color: var(--color-primary-active);
+ background: var(--color-primary-active);
+}
.checkbox--enabled.checkbox--checked
input:active
~ .checkbox__control-wrapper
@@ -167,6 +191,12 @@ scale-checkbox {
border: var(--scl-spacing-1) solid var(--color-primary);
background: var(--color-primary);
}
+.checkbox--enabled.checkbox--indeterminate
+.checkbox__control-wrapper
+.checkbox__control {
+ border: var(--scl-spacing-1) solid var(--color-primary);
+ background: var(--color-primary);
+}
.checkbox.checkbox--disabled .checkbox__control-wrapper .checkbox__control {
border-color: var(--color-disabled);
}