@plcmp/pl-checkbox - npm Package Compare versions

Comparing version 0.1.10 to 0.1.11

package.json

 {
     "name": "@plcmp/pl-checkbox",
-    "version": "0.1.10",
+    "version": "0.1.11",
     "description": "Simple checkbox component.",
@@ -5,0 +5,0 @@ "main": "pl-checkbox.js",

pl-checkbox.js

@@ -22,3 +22,3 @@ import { PlElement, html, css } from "polylib";
                 outline: none;
-                --content-width: auto;
+                --pl-content-width: auto;
             }
@@ -31,3 +31,3 @@
             :host([disabled]) {
-                color: var(--grey-base);
+                color: var(--pl-grey-base);
                 cursor: not-allowed;
@@ -42,3 +42,3 @@ user-select: none;
             :host([disabled]) .caption{
-                color: var(--grey-dark);
+                color: var(--pl-grey-dark);
             }
@@ -53,22 +53,22 @@
                 flex-direction: row;
-                gap: var(--space-sm);
+                gap: var(--pl-space-sm);
                 cursor: pointer;
                 align-items: center;
-                height: var(--base-size-md);
+                height: var(--pl-base-size);
             }
 
             .caption {
-                color: var(--text-color);
-                font-size: var(--text-font);
+                color: var(--pl-text-color);
+                font-size: var(--pl-text-font);
             }
 
             .checkbox {
-                width: var(--base-size-xxs);
-                height: var(--base-size-xxs);
-                border: 1px solid var(--grey-base);
-                border-radius: var(--border-radius);
+                width: calc(var(--pl-base-size) / 2 + 2px);
+                height: calc(var(--pl-base-size) / 2 + 2px);
+                border: 1px solid var(--pl-grey-base);
+                border-radius: var(--pl-border-radius);
                 box-sizing: border-box;
                 position: relative;
                 align-self: center;
-                background-color: var(--background-color);
+                background-color: var(--pl-background-color);
                 transition: background .3s ease-in-out;
@@ -79,8 +79,8 @@ flex-shrink: 0;
             .checkbox-container:hover .checkbox{
-                border: 1px solid var(--primary-base);
+                border: 1px solid var(--pl-primary-base);
             }
 
             .checkbox[state=checked] {
-                background: var(--primary-base);
-                border: 1px solid var(--primary-base);
+                background: var(--pl-primary-base);
+                border: 1px solid var(--pl-primary-base);
                 background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none"%3E%3Cpath d="M1 4.5L3 7L7.5 1" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
@@ -92,4 +92,4 @@ background-repeat: no-repeat;
             :host([disabled]) .checkbox[state=checked] {
-                background: var(--grey-light);
-                border: 1px solid var(--grey-light);
+                background: var(--pl-grey-light);
+                border: 1px solid var(--pl-grey-light);
                 background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none"%3E%3Cpath d="M1 4.5L3 7L7.5 1" stroke="%23AFB3C1" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
@@ -101,4 +101,4 @@ background-repeat: no-repeat;
             .checkbox[state=checked]:hover {
-                background: var(--primary-dark);
-                border: 1px solid var(--primary-dark);
+                background: var(--pl-primary-dark);
+                border: 1px solid var(--pl-primary-dark);
                 background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none"%3E%3Cpath d="M1 4.5L3 7L7.5 1" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
@@ -110,4 +110,4 @@ background-repeat: no-repeat;
             .checkbox[state=indeterminate] {
-                background: var(--white);
-                border: 1px solid var(--grey-base);
+                background: var(--pl-background-color);
+                border: 1px solid var(--pl-grey-base);
             }
@@ -118,3 +118,3 @@
                 content: '';
-                background: var(--primary-base);
+                background: var(--pl-primary-base);
                 width: 8px;
@@ -128,3 +128,3 @@ height: 2px;
             .checkbox[state=indeterminate]:hover {
-                border: 1px solid var(--grey-dark);
+                border: 1px solid var(--pl-grey-dark);
             }
@@ -131,0 +131,0 @@ `;

New alerts

AI-detected possible typosquat

Supply chain risk

AI has identified this package as a potential typosquat of a more popular package. This suggests that the package may be intentionally mimicking another package's name, description, or other metadata.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

7374

1.39%

Worsened metrics

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes