@neovici/cosmoz-input - npm Package Compare versions

Comparing version 4.0.0 to 4.1.0

dist/styles.js

@@ -37,3 +37,4 @@ import { tagged as css } from '@neovici/cosmoz-utils';
 		);
-
+		--contour-color: var(--line-color);
+		--contour-size: var(--cosmoz-input-contour-size);
 		display: block;
@@ -44,3 +45,6 @@ padding: var(--cosmoz-input-padding, 8px 0);
 		position: relative;
-
+		transition:
+			transform 0.25s,
+			width 0.25s;
+		transform-origin: left top;
 		max-height: var(--cosmoz-input-max-height);
@@ -67,4 +71,4 @@ font-size: var(--font-size);
 		background: var(--bg);
-		border: var(--cosmoz-input-border, none);
-		border-radius: var(--cosmoz-input-border-radius, 0px);
+		border-radius: var(--cosmoz-input-border-radius);
+		box-shadow: 0 0 0 var(--contour-size) var(--contour-color);
 	}
@@ -101,3 +105,5 @@
 		width: var(--cosmoz-input-label-width, 100%);
-		transition: transform 0.25s, width 0.25s;
+		transition:
+			transform 0.25s,
+			width 0.25s;
 		transform-origin: left top;
@@ -110,2 +116,3 @@ color: var(--color);
 		font-weight: var(--cosmoz-input-label-font-weight);
+		padding: var(--cosmoz-input-label-padding);
 	}
@@ -115,5 +122,6 @@
 	#input:not(:placeholder-shown) + label {
+		--cosmoz-input-label-padding: 0 1px;
 		transform: translateY(calc(var(--label-scale) * -100%))
 			scale(var(--label-scale));
-		background-color: var(--cosmoz-input-no-placeholder-label-bg, transparent);
+		background-color: var(--cosmoz-input-floating-label-bg, transparent);
 	}
@@ -130,2 +138,3 @@ :host(:not(always-float-label):focus-within) #input::placeholder,
 		position: relative;
+		display: var(--cosmoz-input-line-display, block);
 	}
@@ -135,3 +144,2 @@ .line::before {
 		position: absolute;
-		display: var(--cosmoz-input-line-display, block);
 		border-bottom: 2px solid transparent;
@@ -155,3 +163,4 @@ border-bottom-color: inherit;
 	:host(:focus-within) {
-		border-color: var(--focused-color);
+		--contour-color: var(--focused-color);
+		caret-color: var(--focused-color);
 	}
@@ -177,2 +186,8 @@
 	}
+
+	:host([invalid]) {
+		--contour-color: var(--invalid-color);
+		caret-color: var(--invalid-color);
+	}
+
 	:host([invalid]) label,
@@ -179,0 +194,0 @@ .error {

package.json

 {
 	"name": "@neovici/cosmoz-input",
-	"version": "4.0.0",
+	"version": "4.1.0",
 	"description": "A input web component",
@@ -5,0 +5,0 @@ "keywords": [

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

Improved metrics

Total package byte prevSize

17778

increased by2.35%

Lines of code

437

increased by3.55%

No dependency changes