diff --git a/test/visual/default.html b/test/visual/default.html
index 204e151..3d6e0cc 100644
--- a/test/visual/default.html
+++ b/test/visual/default.html
@@ -4,6 +4,7 @@
+
diff --git a/test/visual/screens/vaadin-checkbox/focus-tests-lumo/focus/chrome.png b/test/visual/screens/vaadin-checkbox/focus-tests-lumo/focus/chrome.png
new file mode 100644
index 0000000..3e88ee0
Binary files /dev/null and b/test/visual/screens/vaadin-checkbox/focus-tests-lumo/focus/chrome.png differ
diff --git a/test/visual/screens/vaadin-checkbox/focus-tests-lumo/focus/firefox.png b/test/visual/screens/vaadin-checkbox/focus-tests-lumo/focus/firefox.png
new file mode 100644
index 0000000..c5344b5
Binary files /dev/null and b/test/visual/screens/vaadin-checkbox/focus-tests-lumo/focus/firefox.png differ
diff --git a/test/visual/screens/vaadin-checkbox/focus-tests-material/focus/chrome.png b/test/visual/screens/vaadin-checkbox/focus-tests-material/focus/chrome.png
new file mode 100644
index 0000000..a4720a0
Binary files /dev/null and b/test/visual/screens/vaadin-checkbox/focus-tests-material/focus/chrome.png differ
diff --git a/test/visual/screens/vaadin-checkbox/focus-tests-material/focus/firefox.png b/test/visual/screens/vaadin-checkbox/focus-tests-material/focus/firefox.png
new file mode 100644
index 0000000..446f56c
Binary files /dev/null and b/test/visual/screens/vaadin-checkbox/focus-tests-material/focus/firefox.png differ
diff --git a/test/visual/test.js b/test/visual/test.js
index 87d7502..c33e67e 100644
--- a/test/visual/test.js
+++ b/test/visual/test.js
@@ -52,6 +52,13 @@ gemini.suite('vaadin-checkbox', function(rootSuite) {
.setCaptureElements('#validation-tests')
.capture('error');
});
+
+ gemini.suite(`focus-tests-${theme}`, function(suite) {
+ suite
+ .setUrl(`default.html?theme=${theme}`)
+ .setCaptureElements('#focus-tests')
+ .capture('focus');
+ });
});
});
diff --git a/theme/lumo/vaadin-checkbox-group-styles.html b/theme/lumo/vaadin-checkbox-group-styles.html
index dada37b..4acd50e 100644
--- a/theme/lumo/vaadin-checkbox-group-styles.html
+++ b/theme/lumo/vaadin-checkbox-group-styles.html
@@ -1,3 +1,4 @@
+
@@ -33,6 +34,21 @@
color: var(--lumo-disabled-text-color);
-webkit-text-fill-color: var(--lumo-disabled-text-color);
}
+
+ :host([focused]:not([disabled])) [part="label"] {
+ color: var(--lumo-primary-text-color);
+ }
+
+ :host(:hover:not([disabled]):not([focused])) [part="label"] {
+ color: var(--lumo-body-text-color);
+ }
+
+ /* Touch device adjustment */
+ @media (pointer: coarse) {
+ :host(:hover:not([disabled]):not([focused])) [part="label"] {
+ color: var(--lumo-secondary-text-color);
+ }
+ }
diff --git a/theme/material/vaadin-checkbox-group-styles.html b/theme/material/vaadin-checkbox-group-styles.html
index 3d7f9d9..890a274 100644
--- a/theme/material/vaadin-checkbox-group-styles.html
+++ b/theme/material/vaadin-checkbox-group-styles.html
@@ -1,3 +1,4 @@
+
@@ -43,6 +44,10 @@
color: var(--material-disabled-text-color);
-webkit-text-fill-color: var(--material-disabled-text-color);
}
+
+ :host([focused]:not([invalid])) [part="label"] {
+ color: var(--material-primary-text-color);
+ }