@vaadin/input-container - npm Package Compare versions

Comparing version 25.0.0-alpha5 to 25.0.0-alpha6

package.json

 {
   "name": "@vaadin/input-container",
-  "version": "25.0.0-alpha5",
+  "version": "25.0.0-alpha6",
   "publishConfig": {
@@ -36,16 +36,16 @@ "access": "public"
   "dependencies": {
-    "@vaadin/component-base": "25.0.0-alpha5",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha5",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha5",
+    "@vaadin/component-base": "25.0.0-alpha6",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha6",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha6",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha5",
-    "@vaadin/icon": "25.0.0-alpha5",
-    "@vaadin/icons": "25.0.0-alpha5",
-    "@vaadin/test-runner-commands": "25.0.0-alpha5",
+    "@vaadin/chai-plugins": "25.0.0-alpha6",
+    "@vaadin/icon": "25.0.0-alpha6",
+    "@vaadin/icons": "25.0.0-alpha6",
+    "@vaadin/test-runner-commands": "25.0.0-alpha6",
     "@vaadin/testing-helpers": "^2.0.0",
     "sinon": "^18.0.0"
   },
-  "gitHead": "7dc87bb2a3cae81ed53259fa10b58f990d50c6fd"
+  "gitHead": "cd1d084198d2b326c58d44bb39fa4845b71ce551"
 }

src/styles/vaadin-input-container-base-styles.js

@@ -14,3 +14,3 @@ /**
       align-items: center;
-      --_radius: var(--vaadin-input-field-border-radius, var(--_vaadin-radius-m));
+      --_radius: var(--vaadin-input-field-border-radius, var(--vaadin-radius-m));
       border-radius:
@@ -23,9 +23,9 @@ /* See https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius */
       border: var(--vaadin-input-field-border-width, 1px) solid
-        var(--vaadin-input-field-border-color, var(--_vaadin-border-color-strong));
+        var(--vaadin-input-field-border-color, var(--vaadin-border-color-strong));
       box-sizing: border-box;
       cursor: text;
-      padding: var(--vaadin-input-field-padding, var(--_vaadin-padding-container));
-      gap: var(--vaadin-input-field-gap, var(--_vaadin-gap-container-inline));
-      background: var(--vaadin-input-field-background, var(--_vaadin-background));
-      color: var(--vaadin-input-field-value-color, var(--_vaadin-color-strong));
+      padding: var(--vaadin-input-field-padding, var(--vaadin-padding-container));
+      gap: var(--vaadin-input-field-gap, var(--vaadin-gap-container-inline));
+      background: var(--vaadin-input-field-background, var(--vaadin-background-color));
+      color: var(--vaadin-input-field-value-color, var(--vaadin-color));
       font-size: var(--vaadin-input-field-value-font-size, inherit);
@@ -37,3 +37,3 @@ line-height: var(--vaadin-input-field-value-line-height, inherit);
     :host([dir='rtl']) {
-      --_radius: var(--vaadin-input-field-border-radius, var(--_vaadin-radius-m));
+      --_radius: var(--vaadin-input-field-border-radius, var(--vaadin-radius-m));
       border-radius:
@@ -91,3 +91,3 @@ /* Don't use logical props, see https://github.com/vaadin/vaadin-time-picker/issues/145 */
     ::slotted(:is(input, textarea):placeholder-shown) {
-      color: var(--vaadin-input-field-placeholder-color, var(--_vaadin-color));
+      color: var(--vaadin-input-field-placeholder-color, var(--vaadin-color-subtle));
     }
@@ -100,2 +100,6 @@
 
+    :host([invalid]) {
+      --vaadin-input-field-border-color: var(--vaadin-input-field-error-color, var(--vaadin-color));
+    }
+
     :host([readonly]) {
@@ -111,6 +115,6 @@ border-style: dashed;
     :host([disabled]) {
-      --vaadin-input-field-value-color: var(--vaadin-input-field-disabled-text-color, var(--_vaadin-color-subtle));
+      --vaadin-input-field-value-color: var(--vaadin-input-field-disabled-text-color, var(--vaadin-color-disabled));
       --vaadin-input-field-background: var(
         --vaadin-input-field-disabled-background,
-        var(--_vaadin-background-container-strong)
+        var(--vaadin-background-container-strong)
       );
@@ -117,0 +121,0 @@ --vaadin-input-field-border-color: transparent;

src/styles/vaadin-input-container-core-styles.js

@@ -41,4 +41,3 @@ /**
   ::slotted(input) {
-    -webkit-appearance: none;
-    -moz-appearance: none;
+    appearance: none;
     flex: auto;
@@ -45,0 +44,0 @@ white-space: nowrap;

src/vaadin-input-container.js

@@ -10,3 +10,3 @@ /**
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
-import { CSSInjectionMixin } from '@vaadin/vaadin-themable-mixin/css-injection-mixin.js';
+import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -21,3 +21,3 @@ import { inputContainerStyles } from './styles/vaadin-input-container-core-styles.js';
  */
-export class InputContainer extends CSSInjectionMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))) {
+export class InputContainer extends LumoInjectionMixin(ThemableMixin(DirMixin(PolylitMixin(LitElement)))) {
   static get is() {
@@ -24,0 +24,0 @@ return 'vaadin-input-container';

theme/lumo/vaadin-input-container-styles.js

@@ -68,3 +68,2 @@ import '@vaadin/vaadin-lumo-styles/color.js';
       --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em);
-      -webkit-mask-image: var(--_lumo-text-field-overflow-mask-image);
       mask-image: var(--_lumo-text-field-overflow-mask-image);
@@ -71,0 +70,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

29917

0.09%

Lines of code

450

0.22%

Dependency changes

• + Added

  @vaadin/component-base@25.0.0-alpha6
  (transitive)

• + Added

  @vaadin/icon@25.0.0-alpha6
  (transitive)

• + Added

  @vaadin/vaadin-lumo-styles@25.0.0-alpha6
  (transitive)

• + Added

  @vaadin/vaadin-themable-mixin@25.0.0-alpha6
  (transitive)

• - Removed

  @vaadin/component-base@25.0.0-alpha5
  (transitive)

• - Removed

  @vaadin/icon@25.0.0-alpha5
  (transitive)

• - Removed

  @vaadin/vaadin-lumo-styles@25.0.0-alpha5
  (transitive)

• - Removed

  @vaadin/vaadin-themable-mixin@25.0.0-alpha5
  (transitive)

• Updated

  @vaadin/component-base@25.0.0-alpha6

• Updated

  @vaadin/vaadin-lumo-styles@25.0.0-alpha6

• Updated

  @vaadin/vaadin-themable-mixin@25.0.0-alpha6