@vaadin/vaadin-checkbox - npm Package Compare versions

Comparing version 2.2.8 to 2.2.9

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-checkbox",
-  "version": "2.2.8",
+  "version": "2.2.9",
   "main": "vaadin-checkbox.js",
@@ -45,3 +45,3 @@ "author": "Vaadin Ltd",
     "wct-browser-legacy": "^1.0.1",
-    "@vaadin/vaadin-demo-helpers": "^2.2.0",
+    "@vaadin/vaadin-demo-helpers": "^3.0.0",
     "@polymer/iron-form": "^3.0.0",
@@ -48,0 +48,0 @@ "@vaadin/vaadin-button": "^2.1.0"

src/vaadin-checkbox-group.js

@@ -38,2 +38,3 @@ /**
  * `disabled`   | Set when the checkbox group and its children are disabled. | :host
+ * `focused` | Set when the checkbox group contains focus | :host
  * `has-label` | Set when the element has a label | :host
@@ -166,2 +167,4 @@ * `has-value` | Set when the element has a value | :host
 
+    this.addEventListener('focusin', () => this._setFocused(this._containsFocus()));
+
     this.addEventListener('focusout', e => {
@@ -171,2 +174,3 @@ // validate when stepping out of the checkbox group
         this.validate();
+        this._setFocused(false);
       }
@@ -290,2 +294,17 @@ });
   }
+
+  _containsFocus() {
+    const root = this.getRootNode();
+    // Safari 9 needs polyfilled `_activeElement` to return correct node
+    const activeElement = root._activeElement !== undefined ? root._activeElement : root.activeElement;
+    return this.contains(activeElement);
+  }
+
+  _setFocused(focused) {
+    if (focused) {
+      this.setAttribute('focused', '');
+    } else {
+      this.removeAttribute('focused');
+    }
+  }
 }
@@ -292,0 +311,0 @@

src/vaadin-checkbox.js

@@ -113,3 +113,3 @@ /**
   static get version() {
-    return '2.2.8';
+    return '2.2.9';
   }
@@ -116,0 +116,0 @@

theme/lumo/vaadin-checkbox-group-styles.js

@@ -0,1 +1,2 @@
+import '@vaadin/vaadin-lumo-styles/color.js';
 import '@vaadin/vaadin-lumo-styles/mixins/required-field.js';
@@ -37,2 +38,17 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
       }
+
+      :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);
+        }
+      }
     </style>
@@ -39,0 +55,0 @@ </template>

theme/material/vaadin-checkbox-group-styles.js

@@ -0,1 +1,2 @@
+import '@vaadin/vaadin-material-styles/color.js';
 import '@vaadin/vaadin-material-styles/mixins/required-field.js';
@@ -47,2 +48,6 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
       }
+
+      :host([focused]:not([invalid])) [part="label"] {
+        color: var(--material-primary-text-color);
+      }
     </style>
@@ -49,0 +54,0 @@ </template>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

46118

increased by2.82%

Lines of code

918

increased by3.73%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes